修掉润色状态行的死声明:margin-top 6px 不再被后面的 0 盖掉

- 评审 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
This commit is contained in:
2026-10-06 01:25:42 +08:00
parent bbd5e51d3d
commit 69a5b868ef
2 changed files with 22 additions and 4 deletions
+5 -3
View File
@@ -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;
}
@@ -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 {