From 69a5b868effc8803316267c2389c02a88ef3a7ee Mon Sep 17 00:00:00 2001 From: Suzumiya Date: Tue, 6 Oct 2026 01:25:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=8E=89=E6=B6=A6=E8=89=B2=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E8=A1=8C=E7=9A=84=E6=AD=BB=E5=A3=B0=E6=98=8E=EF=BC=9A?= =?UTF-8?q?margin-top=206px=20=E4=B8=8D=E5=86=8D=E8=A2=AB=E5=90=8E?= =?UTF-8?q?=E9=9D=A2=E7=9A=84=200=20=E7=9B=96=E6=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 评审 D-A：上一轮给状态行加的 `margin-top: 6px` 被紧接着的旧 `margin-top: 0`（styles.css 两条 Direct 状态规则）覆盖 → 实际间距是 0、状态紧贴编辑器末行；注释与测试注释也跟着说错 - 改法：删掉那两行 `margin-top: 0`，保留 6px，并把 CSS 注释与测试注释改成事实（输入盒 `gap` 的 row 分量为 0，间距由状态元素自带） - 实测（无头 Chromium 夹具，438px 面板）：无状态行时输入盒 **72px** / 表单 **136px**；出现「AI 润色失败，可重试」时状态行 `margin-top` 计算值 = **6px**、状态行高 16.8px，输入盒 **95px** / 表单 **159px**（= 136 + 6 + 16.8）；空态仍 0 高，222 算式与空态断言不变 - 测试：`statusRowHeight = 0` 不再写死——断言 `ResourceReferenceInput` 里状态行仍是条件渲染（`polishing || polishError || polishNotice`）+ 状态规则 `margin-top` 解出 6px（谁改回常驻渲染或把间距写回 0 都会红） Refs #600, PR #607 --- apps/ai-game-creator-shell/src/styles.css | 8 +++++--- .../tests/chatDialogFrameLayout.test.ts | 18 +++++++++++++++++- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 941dd5e10..eb03ad61e 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -12558,8 +12558,9 @@ button.design-workspace-tree__entry:hover, grid-column: 1; align-self: center; min-width: 0; + /* 状态行自带 6px 上间距（输入盒的 `gap` row 分量为 0：没内容时不留幻影行距， + 有内容时由这里给间距）。不要把 `margin-top: 0` 写回来——它会盖掉这一条。 */ margin-top: 6px; - margin-top: 0; } /* direct-codex 的 `@` 触发钮是下面控制排里的 `.project-chat-reference-trigger`， @@ -13240,7 +13241,8 @@ button.design-workspace-tree__entry:hover, grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; - /* 行间距归 0：状态层没有内容时第二行高度为 0，不留幻影行距（间距给状态元素自己）。 */ + /* 行间距归 0：状态层没有内容时第二行高度为 0，不留幻影行距；有内容时由状态元素 + 自带的 6px 上间距提供间隔（见 `.resource-reference-input-status` 那两条规则）。 */ gap: 0 8px; } @@ -13266,8 +13268,8 @@ button.design-workspace-tree__entry:hover, grid-column: 1; align-self: center; min-width: 0; + /* 状态行自带 6px 上间距（输入盒的 `gap` row 分量为 0）。 */ margin-top: 6px; - margin-top: 0; overflow-wrap: anywhere; } diff --git a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts index 60c771f17..fa761e8e6 100644 --- a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts +++ b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts @@ -20,6 +20,10 @@ const CHAT_CONVERSATION_PATH = repoPath( const CHAT_COMPOSER_PATH = repoPath( 'apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectComposer/DirectProjectComposer.tsx', ); +/** 共享输入区实现（「AI 润色 / 恢复原文」与状态行都在这里渲染）。 */ +const INPUT_SOURCE_PATH = repoPath( + 'apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx', +); /** 同目录的控件实现（推理强度滑块在这里渲染）。 */ const CHAT_COMPOSER_CONTROLS_PATH = repoPath( 'apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectComposer/ComposerControls.tsx', @@ -255,7 +259,19 @@ function composerMaxHeight() { pixelValue(editor, 'min-height'), '编辑器最小高度是输入盒高度的下界，改了要同步改这里的算式', ).toBe(72); - // 输入盒第二行的润色状态行没内容时为 0 高（`gap` 的 row 分量已归 0，状态自己带 6px 上间距）。 + // 输入盒第二行是**条件渲染**的润色状态行：`ResourceReferenceInput` 只在 + // `polishing || polishError || polishNotice` 时才渲染它，空态这一行高度为 0（`gap` 的 + // row 分量已归 0，有内容时由状态元素自带的 6px 上间距提供间隔）。这里断言那条条件 + // 还在（谁把它改成常驻渲染，这条就红），所以 `statusRowHeight = 0` 是真实依据而不是写死。 + const inputSource = readFileSync(INPUT_SOURCE_PATH, 'utf8'); + expect( + inputSource, + '润色状态行必须是条件渲染（空态不occupy第二行）', + ).toContain('polishing || polishError || polishNotice'); + const statusRule = desktopDeclarations( + `${COMPOSER_INPUT} .resource-reference-input-status`, + ); + expect(pixelValue(statusRule, 'margin-top')).toBe(6); const statusRowHeight = 0; return {