diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index d08a30305..fb352ba32 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -10287,14 +10287,9 @@ iframe.preview-frame { flex: 0 0 auto; } - /* 窄屏：输入框左右留白收紧，操作排（`@` / AI 润色 / 恢复原文）保持单行不换行， - 编辑器靠 `minmax(0, 1fr)` 吸收宽度，不会挤出横向滚动条。 */ - .game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer - .resource-reference-input { - padding: 10px 12px 6px; - } + /* 窄屏输入框的内边距由六类选择器的 + `.… .project-chat-composer.is-direct-codex .resource-reference-input` 统一给（`padding: 0`）， + 这里原有一条五类的 `padding: 10px 12px 6px` 恒不生效，已按「删死重」删除。 */ .game-workbench-chat .project-chat-surface, .game-workbench-chat .project-chat-conversation { @@ -11703,7 +11698,9 @@ button.design-workspace-tree__entry:hover, .project-chat-reasoning-effort { display: inline-flex; align-items: center; - flex: 0 1 auto; + /* 档位文案很短（默认 / 高 / 中 / 低），不参与收缩——收缩会把它截成半个字； + 要让位时由模型钮（名字走省略号）承担。 */ + flex: 0 0 auto; min-width: 0; gap: 6px; } @@ -11905,29 +11902,19 @@ button.design-workspace-tree__entry:hover, max-height: 24px; } +/* 输入区仍然生效的两条声明：文字色与可交互性。几何（`display` / `width` / `padding`）、 + 描边与底色全部由更高特异性的 + `.game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer.is-direct-codex + .resource-reference-input` 那两条规则决定（六类 > 五类），这里的同属性声明恒不生效， + 已按「删死重」删除。 */ .game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer .resource-reference-input { - display: grid; - width: 100%; - padding: 12px 15px 6px; - border-color: var(--platform-surface-border); - border-radius: 14px; - background: var(--platform-input-fill); color: var(--platform-text-base); pointer-events: auto; } -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer - .resource-reference-input:focus-within { - border-color: var(--platform-surface-hover-border); - outline: none; - box-shadow: 0 0 0 3px var(--platform-input-focus-ring); -} - .game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer @@ -11940,12 +11927,13 @@ button.design-workspace-tree__entry:hover, line-height: 1.6; } +/* 编辑器的行高与滚动：`min-height` / `max-height` 由更高特异性的 + `.… .project-chat-composer.is-direct-codex .resource-reference-input .resource-reference-input-editor` + 那条决定（六类 + 额外一层 `.resource-reference-input`），这里的旧值恒不生效，已删。 */ .game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer .resource-reference-input-editor { - min-height: 96px; - max-height: 140px; overflow-y: auto; padding: 0; font-size: 13px; @@ -13155,8 +13143,10 @@ details.design-agent-reasoning[open] .is-direct-codex .project-chat-composer.is-direct-codex`）。策划输入区 （`PlanningChatView` / `.game-workbench-layout--design`）不在本 issue 范围内， 本次一行都不动：它的控件排几何、下拉宽度、提示段落 margin 全部保持改动前的值。 - 这一组只补前文没有的属性；模型钮的 160px 上限 / 64px 下限、提示段落 margin 均 - 写在前文各自那条规则里（Direct 侧用多一层真实祖先提高特异性，不依赖源码顺序）。 + 这一组只补前文没有的属性；模型钮的 160px 上限 / 64px 下限、推理档的 + `flex: 0 0 auto`、提示段落 margin 均写在前文各自那条规则里（Direct 侧用多一层 + 真实祖先提高特异性）。**本区块不依赖源码顺序**：这里要么是前文从未声明过的属性， + 要么用更长的选择器链严格盖过前文，把整块挪到文件中间结果也不变。 ① 工具栏里的下拉控件（推理档 / 模型）要能收缩、模型名要能省略，宽度不够时靠换行 让位，而不是把整组推到输入盒外面去和左边的 `@` `+` 重叠； ② 模型控件自己的状态提示（`ConversationModelSelect` 的 `[role='alert']` / @@ -13186,14 +13176,12 @@ details.design-agent-reasoning[open] text-overflow: ellipsis; } -/* 推理档：档位文案很短（默认 / 高 / 中 / 低），不参与收缩——收缩会把它截成半个字， - 要让位时由模型钮（名字走省略号）承担；读写失败提示整行右对齐。 */ +/* 推理档的读写失败提示整行右对齐（`flex: 0 0 auto` 已写回上面那条推理档规则）。 */ .game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer.is-direct-codex .project-chat-composer-controls .project-chat-reasoning-effort { - flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } diff --git a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts index b628aab6d..a68908fca 100644 --- a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts +++ b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts @@ -6369,13 +6369,16 @@ export function registerProjectWorkbenchFoundationTests() { expect(messageListRule).toContain('padding-bottom: 0;'); expect(messageListRule).toContain('flex: 1 1 auto;'); - // 编辑器高度上限仍是输入盒高度的来源之一。 + // 编辑器的 min/max 高度是输入盒高度的来源之一。生效声明在六类选择器那条 + // （比旧五类规则多一层 `.resource-reference-input`，严格更高），旧规则的 96 / 140 + // 恒不生效、已按「删死重」删除；层叠生效值与输入盒最高高度算式由 + // tests/chatDialogFrameLayout.test.ts 验证。 const editorRule = styles.match( - /\.game-workbench-chat\s+\.project-chat-surface\.is-direct-codex\s+\.project-chat-composer\s+\.resource-reference-input-editor\s*\{([^}]*)\}/s, + /\.game-workbench-chat\s+\.project-chat-surface\.is-direct-codex\s+\.project-chat-composer\.is-direct-codex\s+\.resource-reference-input\s+\.resource-reference-input-editor\s*\{([^}]*)\}/s, )?.[1] ?? ''; - expect(styleNumber(editorRule, 'max-height')).toBe(140); - expect(styleNumber(editorRule, 'min-height')).toBe(96); + expect(styleNumber(editorRule, 'max-height')).toBe(160); + expect(styleNumber(editorRule, 'min-height')).toBe(72); }); it('keeps workbench chat bubbles aligned and the process card inset with them', () => { diff --git a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts index 17e632124..f50c687aa 100644 --- a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts +++ b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts @@ -152,6 +152,11 @@ const COMPOSER_EDITOR = `${COMPOSER_INPUT} .resource-reference-input-editor`; const COMPOSER_EDITOR_PLAIN = `${COMPOSER_PLAIN} .resource-reference-input-editor`; const COMPOSER_CONTROLS = `${COMPOSER} .project-chat-composer-controls`; const COMPOSER_SUBMIT = `${COMPOSER_CONTROLS} .project-chat-submit-button`; +/** 模型触发钮：工具栏那一排里最高的一颗（30px），行高由它决定而不是发送钮（28px）。 */ +const COMPOSER_TRIGGER = `${COMPOSER_CONTROLS} .conversation-model-trigger`; +/** 触发钮的基础几何规则挂在 `.project-chat-composer`（不带 `.is-direct-codex`）上，同样命中。 */ +const COMPOSER_TRIGGER_BASE = + '.project-chat-surface.is-direct-codex .project-chat-composer .conversation-model-trigger'; const INPUT_ACTIONS = `${COMPOSER_INPUT} .resource-reference-input-actions`; const INPUT_ACTIONS_PLAIN = `${COMPOSER} .resource-reference-input-actions`; const TOPBAR = `${CHAT} .project-chat-topbar`; @@ -197,6 +202,7 @@ function composerMaxHeight() { ); const controls = desktopDeclarations(COMPOSER_CONTROLS); const submit = desktopDeclarations(COMPOSER_SUBMIT); + const trigger = desktopDeclarations(COMPOSER_TRIGGER, COMPOSER_TRIGGER_BASE); const editorMaxHeight = pixelValue(editor, 'max-height'); const actionsRowHeight = pixelValue(polishButton, 'height'); @@ -207,13 +213,21 @@ function composerMaxHeight() { const inputPaddingBottom = paddingBox(input).bottom; const composerPaddingTop = paddingBox(composer).top; const composerPaddingBottom = paddingBox(composer).bottom; - // 工具栏自己的高度就是那颗 28px 方钮：与输入区之间的间距归输入盒的 row-gap， - // 工具栏不再自带 padding-top（否则就是同一段间距写两遍）。 + // 工具栏行高由这一排里**最高的一颗控件**决定：模型触发钮 30px 高于发送 / 语音的 + // 28px（`align-items: center` 只做居中，不会把行高压回 28）。所以这里取两者最大值， + // 而不是写死某一颗钮的高度——改任一颗的尺寸都会自动反映到算式里。 expect( controls.has('padding-top'), '工具栏与输入区之间的间距由输入盒的 row-gap 提供，不再用 padding-top', ).toBe(false); - const controlsRowHeight = pixelValue(submit, 'height'); + expect( + pixelValue(trigger, 'height'), + '工具栏行高由模型触发钮决定，改了要重新核对这条算式', + ).toBe(30); + const controlsRowHeight = Math.max( + pixelValue(submit, 'height'), + pixelValue(trigger, 'height'), + ); expect( pixelValue(editor, 'min-height'), @@ -301,10 +315,10 @@ describe('陶泥儿对话区：Codex 三段式（顶栏 / 唯一滚动区 / 文 // 输入盒最高高度由真实声明算出来（三层布局，自上而下）： // 盒内上内边距 12 + 编辑器 160 + 输入区行距 6 + 操作排 28 + 输入区下内边距 0 - // + 输入盒与工具栏的行距 8 + 工具栏 28 + 盒内下内边距 12 = 254。 + // + 输入盒与工具栏的行距 8 + 工具栏 30（模型触发钮撑起来的行高）+ 盒内下内边距 12 = 256。 expect(actionsRowHeight, '操作排按钮高度变了就要重算下面的算式').toBe(28); expect(pixelValue(desktopDeclarations(COMPOSER_SUBMIT), 'height')).toBe(28); - expect(total).toBe(254); + expect(total).toBe(256); const paddingBottom = paddingBox(list).bottom; // 新契约：留白归 0。旧版这里是一条 `inset + 输入区最高高度 + 间距` 的算式，