AGC 用户输入区域元素堆叠，优化输入框布局与样式 #600

New Issue

2026-10-03T17:50:44+08:00

suzmii commented

2026-10-03 17:50:44 +08:00

问题描述

AGC 工作台用户输入区域当前布局不合理，输入框、模型选择、素材引用、麦克风、发送按钮及状态提示等元素堆叠在一起，间距和层级不清晰，影响识别与操作。

优化方向

重新整理输入框内部布局与间距；
区分输入内容区、工具栏和状态提示区；
优化模型选择、素材引用、语音输入、发送按钮的对齐关系；
保证窄窗口和不同输入内容下不发生遮挡或重叠；
保持现有功能和交互行为不变。

验收标准

各控件不再重叠或拥挤；
输入区域层级清晰，主要操作易于识别；
长文本、多行输入和状态提示显示正常；
桌面端及较窄窗口下布局稳定。

## 问题描述 AGC 工作台用户输入区域当前布局不合理，输入框、模型选择、素材引用、麦克风、发送按钮及状态提示等元素堆叠在一起，间距和层级不清晰，影响识别与操作。 ## 优化方向 - 重新整理输入框内部布局与间距； - 区分输入内容区、工具栏和状态提示区； - 优化模型选择、素材引用、语音输入、发送按钮的对齐关系； - 保证窄窗口和不同输入内容下不发生遮挡或重叠； - 保持现有功能和交互行为不变。 ## 验收标准 - 各控件不再重叠或拥挤； - 输入区域层级清晰，主要操作易于识别； - 长文本、多行输入和状态提示显示正常； - 桌面端及较窄窗口下布局稳定。

suzmii added the

Priority

Medium

3

Kind/Enhancement labels 2026-10-03 17:50:44 +08:00

suzmii referenced a pull request that will close this issue

2026-10-03 19:48:14 +08:00

AGC 用户输入区按三层重排布局，修掉控件叠压（#600） #607

suzmii self-assigned this 2026-10-03 19:48:42 +08:00

suzmii commented

2026-10-04 00:13:56 +08:00

分析：AGC 输入区为什么「元素堆叠」

问题原因（实测定位）

输入区没有分层：.project-chat-composer.is-direct-codex 当时是 gap: 0，输入盒 / 工具栏 / 提示之间没有任何间距契约，谁都可以用绝对定位去压别人。
模型控件的错误提示是 position: absolute; bottom: 36px 的浮层，锚点就在输入盒正下方，必然画在编辑器文字上——实测「本地模型服务不可用」与编辑器相交 70×36px，长草稿时整段盖住第 3~4 行正文。
「AI 润色 / 恢复原文」操作排同样绝对定位（right: 0; bottom: 0）浮在编辑器右下角，实测与编辑器相交 28×24px；它和下方工具栏的发送钮还在同一条竖线上，看起来像「叠了两个按钮」。
工具栏右侧组（推理档 / 模型 / 语音 / 发送）写死 flex: 0 0 auto：宽度不够时既不收缩也不换行，整组向右溢出输入盒。≤296px 面板下「推理档」直接压在「添加文件」上（28×28px）、「插入素材引用」被压 20×28px。
间距口径不一致：工具栏 gap: 8px + padding-top: 2px、输入盒内部 padding: 0 0 4px、提示段落 margin: 4px 0 0，同一段视觉间距被三处各写一遍。

打算进行的更改 / 实现思路（纯表现层，不改 JSX、不改事件 / state / ref）

用 CSS 把三层说清楚：.project-chat-composer.is-direct-codex 改单列网格 + gap: 8px。

输入内容区 .resource-reference-input 自己两行网格：编辑器横跨两列（文字用满整宽），第二行左边放润色状态、右边放「AI 润色 / 恢复原文」操作排（position: static 回网格行，不再浮在文字上）。
工具栏 .project-chat-composer-controls：左右分组、gap: 6px 8px、允许换行；右侧组改 flex: 1 1 auto 可收缩，模型钮封顶 160px、模型名走省略号，推理档不参与收缩（避免「默认」被截成半个字）。
状态提示区：队列 chip 与提示段落统一让 composer 的 gap 负责，提示段落超过 96px 自己滚；模型错误提示从浮层收回控件排内独占一行。

适用范围：Direct 工作台输入区（.project-chat-surface.is-direct-codex）与策划输入区（.game-workbench-layout--design），两者共用同一批工具栏类名。

落地情况

提交 ac2df9f12（自审收口：宽度上限与间距写回各自规则，去掉重复声明）+ f5886560b（主体），分支 fix/agc-composer-layout，PR #607。
改动文件：apps/ai-game-creator-shell/src/styles.css、两个 CSS 契约测试（tests/chatDialogFrameLayout.test.ts、tests/appSurface/project-development.suite.ts）、docs/project-memory/shared-memory/pitfalls.md。
真实 Chromium（一次性 Vite + headless）矩阵：5 个面板宽（495 / 438 / 360 / 296 / 280px）× 4 种状态（空 / 5 行长文本 / 队列+提示 / 三者叠加）——改前 2~4 处相交、长文本态另有文字被盖（最大 70×36px），改后 0 相交、0 溢出、0 文字遮挡；策划面同一夹具：模型提示 68×21px → 0。
PR #607 正文已附 3 组「改前 → 改后」对照图（438 空态 / 360 长文本 / 280 三态叠加），另有 20 张矩阵图留在本机 .tmp/agc-composer-600/（未入仓）。
仍未验证：真机 Tauri / WebView2 未跑、@ 素材选择面板未展开、300px 以下面板未覆盖（详见 PR 正文的「未完成项 / 存疑 / 剩余风险」）。

## 分析：AGC 输入区为什么「元素堆叠」 **问题原因（实测定位）** - 输入区没有分层：`.project-chat-composer.is-direct-codex` 当时是 `gap: 0`，输入盒 / 工具栏 / 提示之间没有任何间距契约，谁都可以用绝对定位去压别人。 - 模型控件的错误提示是 `position: absolute; bottom: 36px` 的浮层，锚点就在输入盒正下方，必然画在编辑器文字上——实测「本地模型服务不可用」与编辑器相交 70×36px，长草稿时整段盖住第 3~4 行正文。 - 「AI 润色 / 恢复原文」操作排同样绝对定位（`right: 0; bottom: 0`）浮在编辑器右下角，实测与编辑器相交 28×24px；它和下方工具栏的发送钮还在同一条竖线上，看起来像「叠了两个按钮」。 - 工具栏右侧组（推理档 / 模型 / 语音 / 发送）写死 `flex: 0 0 auto`：宽度不够时既不收缩也不换行，整组向右溢出输入盒。≤296px 面板下「推理档」直接压在「添加文件」上（28×28px）、「插入素材引用」被压 20×28px。 - 间距口径不一致：工具栏 `gap: 8px` + `padding-top: 2px`、输入盒内部 `padding: 0 0 4px`、提示段落 `margin: 4px 0 0`，同一段视觉间距被三处各写一遍。 **打算进行的更改 / 实现思路（纯表现层，不改 JSX、不改事件 / state / ref）** 用 CSS 把三层说清楚：`.project-chat-composer.is-direct-codex` 改单列网格 + `gap: 8px`。 1. 输入内容区 `.resource-reference-input` 自己两行网格：编辑器横跨两列（文字用满整宽），第二行左边放润色状态、右边放「AI 润色 / 恢复原文」操作排（`position: static` 回网格行，不再浮在文字上）。 2. 工具栏 `.project-chat-composer-controls`：左右分组、`gap: 6px 8px`、允许换行；右侧组改 `flex: 1 1 auto` 可收缩，模型钮封顶 160px、模型名走省略号，推理档不参与收缩（避免「默认」被截成半个字）。 3. 状态提示区：队列 chip 与提示段落统一让 composer 的 `gap` 负责，提示段落超过 96px 自己滚；模型错误提示从浮层收回控件排内独占一行。适用范围：Direct 工作台输入区（`.project-chat-surface.is-direct-codex`）与策划输入区（`.game-workbench-layout--design`），两者共用同一批工具栏类名。 **落地情况** - 提交 `ac2df9f12`（自审收口：宽度上限与间距写回各自规则，去掉重复声明）+ `f5886560b`（主体），分支 `fix/agc-composer-layout`，PR #607。 - 改动文件：`apps/ai-game-creator-shell/src/styles.css`、两个 CSS 契约测试（`tests/chatDialogFrameLayout.test.ts`、`tests/appSurface/project-development.suite.ts`）、`docs/project-memory/shared-memory/pitfalls.md`。 - 真实 Chromium（一次性 Vite + headless）矩阵：5 个面板宽（495 / 438 / 360 / 296 / 280px）× 4 种状态（空 / 5 行长文本 / 队列+提示 / 三者叠加）——改前 2~4 处相交、长文本态另有文字被盖（最大 70×36px），改后 0 相交、0 溢出、0 文字遮挡；策划面同一夹具：模型提示 68×21px → 0。 - PR #607 正文已附 3 组「改前 → 改后」对照图（438 空态 / 360 长文本 / 280 三态叠加），另有 20 张矩阵图留在本机 `.tmp/agc-composer-600/`（未入仓）。 - 仍未验证：真机 Tauri / WebView2 未跑、`@` 素材选择面板未展开、300px 以下面板未覆盖（详见 PR 正文的「未完成项 / 存疑 / 剩余风险」）。

suzmii referenced this issue from a commit

2026-10-04 00:47:47 +08:00

Merge origin/master（ccd27157）进 fix/agc-composer-layout

suzmii referenced this issue from a commit

2026-10-04 00:47:47 +08:00

修 #600 评审 P2：行高算式取真实决定值、推理档 flex 写回所有者、删死重

suzmii referenced this issue from a commit

2026-10-04 23:43:42 +08:00

合并 master 6c956605：保留 #605 与 #600 两侧改动

Sign in to join this conversation.