diff --git a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts index ec2e2f136..c21200d78 100644 --- a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts +++ b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts @@ -359,4 +359,38 @@ describe('陶泥儿对话区:Codex 三段式(顶栏 / 唯一滚动区 / 文 expect(listIndex, '消息列表必须排在顶栏之后').toBeGreaterThan(topbarIndex); expect(formOpen, '输入盒必须排在消息列表之后').toBeGreaterThan(listIndex); }); + + /** + * 面板纵向必须撑满 `.game-workbench-chat` 的高度。 + * + * 这里锁的是一次真实渲染事故:`.game-workbench-chat` 是 + * `grid-template-rows: auto minmax(0, 1fr)`(原本给「头部 + 内容」两行用),direct-codex + * 精简掉头部后 supervisor 面板成了第一个子元素、落进第一行 auto 轨道。面板高度一旦大于 + * 内容(新会话只有一条欢迎消息时就是如此),面板就被压成内容高度——消息列表塌成几十像素、 + * 输入盒被拉伸到两百多像素。实测修法是让面板跨全部行(`grid-row: 1 / -1`)并靠 + * `height: 100%` 撑满轨道;`flex: 0 1 auto` 之类的 flex 简写会把 basis 变回 auto,同样塌。 + */ + it('面板撑满对话列高度,消息列表不再被压成内容高度', () => { + const chat = desktopDeclarations('.game-workbench-chat'); + const surface = desktopDeclarations( + '.game-workbench-chat .project-supervisor-surface', + ); + const list = desktopDeclarations('.project-supervisor-message-list'); + const listInPanel = desktopDeclarations(MESSAGE_LIST_PLAIN); + const listInPanelDirectCodex = desktopDeclarations(MESSAGE_LIST); + + // 对话列仍是两行 grid:面板必须跨全部行,否则只能拿到 auto 行的高度。 + expect(declaration(chat, 'display')).toBe('grid'); + expect(declaration(surface, 'grid-row')).toBe('1 / -1'); + expect(declaration(surface, 'height')).toBe('100%'); + // flex 简写会把 basis 变回 auto,面板又会塌成内容高度。 + expect(surface.has('flex')).toBe(false); + + // 基础规则 `.project-supervisor-message-list { min-height: 340px }` 给列表压了下限; + // 面板里真正生效的是后写的 96px,而 direct-codex 面板必须把它解除到 0—— + // 否则空对话时列表被顶高、输入盒被挤出面板(实测就是 panel 的 4564px 那次)。 + expect(pixelValue(list, 'min-height')).toBe(340); + expect(pixelValue(listInPanel, 'min-height')).toBe(96); + expect(pixelValue(listInPanelDirectCodex, 'min-height')).toBe(0); + }); });