diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index f1010c558..3b62e9118 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -10197,17 +10197,23 @@ button.design-workspace-tree__entry:hover, } @media (max-width: 760px) { - .game-workbench-layout--design { + .game-project-workbench--design { + overflow-x: hidden; + overflow-y: auto; + } + + /* 两块面板在固定外壳内滚动；覆盖外壳的 height: 100%，避免第二行被裁切。 */ + .game-project-workbench--design .game-workbench-layout--design { height: auto; grid-template-columns: minmax(0, 1fr); } - .game-workbench-layout--design .game-workbench-stage, - .game-workbench-layout--design .game-workbench-chat { - min-height: 560px; + .game-workbench-layout--design .game-workbench-stage { + height: 560px; } .game-workbench-layout--design .game-workbench-chat { + min-height: 560px; height: clamp(560px, calc(100dvh - 154px), 900px); } diff --git a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts index 0d05f5461..20a1ff525 100644 --- a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts +++ b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts @@ -420,7 +420,13 @@ describe('陶泥儿对话区：Codex 三段式（顶栏 / 唯一滚动区 / 文 describe('策划对话：消息伸缩与长内容边界', () => { function planningDeclarations(className: string, width: number) { const root = document.createElement('div'); - root.innerHTML = `
+ root.innerHTML = `
+
+
+
+
+
+
`; +
`; const element = root.querySelector(className)!; // 从 DOM 匹配完整选择器，防止遗漏基础规则或误把 Direct 专用样式算到策划入口。 const selectors = rules.flatMap((rule) => @@ -494,12 +500,47 @@ describe('策划对话：消息伸缩与长内容边界', () => { }, ); - it('窄屏工作台为单列，对话仍有明确高度而非随历史撑长', () => { - const layout = planningDeclarations('.game-workbench-layout', 390); - const chat = planningDeclarations('.game-workbench-chat', 390); - expect(declaration(layout, 'grid-template-columns')).toBe('minmax(0, 1fr)'); - expect(declaration(chat, 'height')).toBe( - 'clamp(560px, calc(100dvh - 154px), 900px)', + it.each([390, 760])( + '%ipx：固定外壳内工作台可滚动到对话，两块面板保持明确高度', + (width) => { + const workbench = planningDeclarations('.game-project-workbench', width); + const layout = planningDeclarations('.game-workbench-layout', width); + const stage = planningDeclarations('.game-workbench-stage', width); + const chat = planningDeclarations('.game-workbench-chat', width); + expect(declaration(workbench, 'min-height')).toBe('0'); + expect(declaration(workbench, 'overflow-y')).toBe('auto'); + expect(declaration(workbench, 'overflow-x')).toBe('hidden'); + expect(declaration(layout, 'height')).toBe('auto'); + expect(declaration(layout, 'grid-template-columns')).toBe( + 'minmax(0, 1fr)', + ); + expect(declaration(stage, 'height')).toBe('560px'); + expect(declaration(chat, 'height')).toBe( + 'clamp(560px, calc(100dvh - 154px), 900px)', + ); + expect( + declaration( + planningDeclarations('.design-workspace-panel', width), + 'height', + ), + ).toBe('100%'); + expect( + declaration( + planningDeclarations('.design-workspace-tree', width), + 'overflow', + ), + ).toBe('auto'); + }, + ); + + it.each([761, 1280])('%ipx：双栏继续填满外壳剩余高度', (width) => { + const workbench = planningDeclarations('.game-project-workbench', width); + const layout = planningDeclarations('.game-workbench-layout', width); + expect(declaration(workbench, 'overflow')).toBe('hidden'); + expect(workbench.has('overflow-y')).toBe(false); + expect(declaration(layout, 'height')).toBe('100%'); + expect(declaration(layout, 'grid-template-columns')).toBe( + 'minmax(0, 1fr) minmax(380px, 0.42fr)', ); }); diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md index 4bb9a33ab..368ac9c99 100644 --- a/docs/project-memory/shared-memory/pitfalls.md +++ b/docs/project-memory/shared-memory/pitfalls.md @@ -5945,7 +5945,7 @@ Cocos Creator 根目录由 `package.json.creator.version` 与普通 `assets/` ## 策划聊天不能按可选子节点序号分配消息高度 -策划与开发 Agent 共用聊天类名，但布局合同不同。策划新增状态条后，按第二个子节点分配 `1fr` 会把空白给状态条、让消息框随回复增长；只给 `.is-direct-codex` 的状态样式也不会覆盖策划。策划使用纵向 Flex，仅消息列表伸缩，阶段/待处理区域限高滚动；改共用样式时同时核对两种入口。jsdom 交互通过不代表布局正确，须匹配完整 CSS 层叠并用真实浏览器核对空/短/长消息与长待办。实时正文/思考不更新持久消息数组，滚动跟随必须覆盖这些独立状态并保留用户上滚门禁；历史消息缺失的时间不得用读取时刻填补。详见 AGC 实施计划的“策划 Agent 对话显示与滚动合同”。 +策划与开发 Agent 共用聊天类名，但布局合同不同。策划新增状态条后，按第二个子节点分配 `1fr` 会把空白给状态条、让消息框随回复增长；只给 `.is-direct-codex` 的状态样式也不会覆盖策划。策划使用纵向 Flex，仅消息列表伸缩，阶段/待处理区域限高滚动；改共用样式时同时核对两种入口。jsdom 交互通过不代表布局正确，须匹配完整 CSS 层叠并用真实浏览器核对空/短/长消息与长待办。窄屏上下堆叠必须在固定外壳内提供工作台滚动容器，两块面板明确限高；低优先级的 `height: auto` 不能覆盖外壳后代规则的 `height: 100%`。布局夹具必须包含窗口外壳与启动器层级，并实际滚动验证输入框可见可操作，不能只检查输入框在聊天面板内部。实时正文/思考不更新持久消息数组，滚动跟随必须覆盖这些独立状态并保留用户上滚门禁；历史消息缺失的时间不得用读取时刻填补。详见 AGC 实施计划的“策划 Agent 对话显示与滚动合同”。 ## 2026-09-22 Rust 对象快照必须对齐 CI 编译目录和 Cargo 环境 diff --git a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md index 506042090..724656800 100644 --- a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md +++ b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md @@ -248,14 +248,14 @@ Rust 分片日志在失败时输出有界 stdout 尾部中的失败段，保留 - 工作区状态条复用现有聊天状态条的字号、间距和状态点。长项目名允许换行，不能撑宽面板；长错误、澄清和批量文件导入结果在受限区域内完整可读，不能挤走输入框。输入编辑器保留原有高度上限，模型/推理菜单继续允许弹出面板。 - 已在消息底部时，实时正文与思考增高后继续跟随；用户主动上滚阅读历史后不自动抢回底部，发送新消息后恢复跟随。阶段/待处理卡片改变消息可用高度时，仍遵守同一跟随意图。滚动仅为临时 UI 状态，不写入正式会话。 - 历史消息只有收到真实发送时间才能显示时间。现有策划持久消息不含逐消息时间，读取或刷新时保持未知，不以当前时刻补造。当前会话刚提交的乐观消息可以显示已知发送时间；正式快照覆盖后不补造或猜配旧消息时间。 -- 窄屏下资源区与对话区单列排列，对话区仍保持受限高度，长对话不撑长整页。正式主窗最小宽度不变，窄屏验收覆盖浏览器响应式布局。 +- ≤760px 时资源区与对话区单列排列，策划工作台在固定外壳内纵向滚动，用户向下滚动可到达输入区。布局使用内容高度，并以同等或更高选择器优先级覆盖外壳的 `height: 100%`；资源区明确为 560px，对话区高度为 `clamp(560px, calc(100dvh - 154px), 900px)`。文件树与消息列表各自内部滚动，长内容不增加两块面板高度。>760px 继续共用外壳剩余高度，不启用工作台整体滚动。正式主窗最小宽度不变，窄屏验收覆盖浏览器响应式布局。 - 审批、澄清、导入期间禁用、错误重试、项目归属和发送权限沿用现有行为。此次调整不改变 Runtime、API、持久协议或数据库，无数据迁移；不重做开发 Agent 的对话布局。 -验收使用策划组件与现有界面测试覆盖流式/历史跟随、未知时间、审批澄清和导入禁用；使用真实浏览器与当前样式核对桌面/窄屏的空、短、长消息，长项目名、长错误与长澄清，以及输入框和菜单位置。开发 Agent 的既有布局回归同批执行。真实 Provider 请求不作为纯展示修复的前置条件，验证记录须区分模拟事件与真实 Provider。 +验收使用策划组件与现有界面测试覆盖流式/历史跟随、未知时间、审批澄清和导入禁用；使用真实浏览器与当前样式核对桌面/窄屏的空、短、长消息，长项目名、长错误与长澄清，以及输入框和菜单位置。布局验收必须包含 `window-chrome → window-chrome__content → launcher-shell → launcher-main → game-project-workbench` 的完整外壳层级，覆盖 390px、760px、761px 和桌面尺寸；窄屏实际滚动工作台后，输入框须进入可视范围且可操作，长文件树、长消息和待确认内容不能使面板失去高度边界。不能只断言输入框位于聊天面板内部。开发 Agent 的既有布局回归同批执行。真实 Provider 请求不作为纯展示修复的前置条件，验证记录须区分模拟事件与真实 Provider。 | 验收面 | 对应证据 | | --- | --- | -| 策划与开发 Agent 布局隔离、伸缩与窄屏单列 | `chatDialogFrameLayout.test.ts` 的完整选择器层叠回归；Chrome 实际组件与完整样式的桌面/390px 几何和截图检查 | +| 策划与开发 Agent 布局隔离、伸缩与窄屏滚动可达 | `chatDialogFrameLayout.test.ts` 包含外壳的选择器层叠回归；Chrome 实际组件、完整外壳与完整样式的 390px/760px/761px/桌面几何、滚动和输入操作检查 | | 实时正文/思考跟随、上滚停留、发送恢复 | `appSurface/design-agent.suite.ts` 的实时事件与发送恢复用例；还原旧滚动依赖时新增用例失败 | | 历史未知时间与乐观发送时间 | 同套界面测试覆盖读取、乐观发送和正式快照覆盖；恢复 `Date.now()` 补造时新增用例失败 | | 审批/澄清、文件导入禁用及共用控件 | `appSurface.test.ts` 现有交互回归与 Chrome 模型菜单位置检查；不改变原生调用和业务状态 |