GenarrativeAI/Genarrative
11
0
Fork 0
Code Issues 36 Pull Requests 14 Actions 1 Packages Projects 1 Releases Wiki Activity

AGC 用户输入区按三层重排布局，修掉控件叠压（#600）
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 5m49s
Details
Project CI / AI game creator shell Rust crates (pull_request) Successful in 3m26s
Details
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Failing after 5m12s
Details
Project CI / Frontend tests (pull_request) Successful in 4m2s
Details
Project CI / Backend tests (pull_request) Failing after 5m43s
Details
Project CI / Repository checks (pull_request) Failing after 4m13s
Details
Project CI / AI game creator shell web tests (pull_request) Successful in 2m17s
Details
Project CI / Native shell tests (pull_request) Successful in 7m20s
Details

Browse Source 
- 输入盒 `.project-chat-composer.is-direct-codex` 改单列网格 + `gap: 8px`，把输入内容区 / 工具栏 / 状态提示区三层用行间距分开，不再靠绝对定位互相压
- 「AI 润色 / 恢复原文」操作排从 `position: absolute; right: 0; bottom: 0` 回到输入区第二行网格（编辑器横跨全宽），不再压在编辑器文字上
- 模型控件的错误 / 状态提示改成控件排内独占一行（`position: static`），不再浮在输入内容区上方盖住文字
- 工具栏右侧组由 `flex: 0 0 auto` 改为可收缩 + 外层可换行；模型钮封顶 160px、名字走省略号，推理档不参与收缩
- 状态提示区（待发队列 chip、提示段落）与输入盒、工具栏共用同一档行间距（去掉重复的 margin / padding-top）
- 同步两处 CSS 契约断言：composer 几何（`tests/appSurface/project-development.suite.ts`）与输入盒最高高度算式 + 操作排网格行（`tests/chatDialogFrameLayout.test.ts`）
- pitfalls 记录本次叠压的实测尺寸、成因与现行口径
This commit is contained in:
董羽秦
2026-10-03 19:45:45 +08:00
parent 1c4073b500
commit f5886560bd
4 changed files with 275 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/project-memory/shared-memory/pitfalls.md
+8
View File
@@ -2,6 +2,14 @@
这里只记录对当前开发仍有用的症状、根因、排查方法和风险边界。同一事实保留一个当前口径；退役对象的专属过程与单轮测试结果由 Git 历史追溯。遇到旧路径或版本时，以现行代码和专题文档为准。
## 2026-10-03 AGC 输入区控件叠在一起：输入区内的操作排与状态提示不能用绝对定位
- **现象**：#600 截图里用户输入区域「元素堆叠」——空草稿时「AI 润色」按钮就压在输入内容区右下角（实测与编辑器相交 28×24px），模型控件的失败提示「本地模型服务不可用」直接画在第 3~4 行文字上（70×36px，长草稿时把整段文字盖住）；面板越窄越糟：280px 面板下推理档整颗压在「添加文件」上（28×28px），「插入素材引用」与推理档也相交（20×28px）。
- **原因**：两条「靠绝对定位把控件挪出流」的旧写法叠在一起：① `.resource-reference-input-actions` 被写成 `position: absolute; right: 0; bottom: 0`，浮到编辑器右下角（同一份样式早前其实是网格第二行，见文件里 11893 行那条注释，被后写的绝对定位规则盖掉）；② `ConversationModelSelect` 的 `[role='alert'] / [role='status']` 是 `bottom: 36px` 的浮层，锚点就在输入盒正下方，提示必然落在文字上。另外 `.project-chat-composer-controls-right` 写死 `flex: 0 0 auto`，宽度不够时既不收缩也不换行，整组向右溢出输入盒（360px 面板下溢出 34px、280px 下 114px）。
- **处理（现行口径）**：`.project-chat-composer.is-direct-codex` 是单列网格（`gap: 8px`），三层自上而下——输入内容区 / 工具栏 / 状态提示区；输入内容区自己是两行网格（编辑器横跨两列，第二行左放润色状态、右放「AI 润色 / 恢复原文」操作排），操作排 `position: static` 回到行里；模型提示改成控件排内独占一行（`position: static; flex: 1 1 100%`），不再浮在输入区上方；工具栏允许换行、右侧组改 `flex: 1 1 auto`，模型钮封顶 160px 且名字走省略号（收缩由它承担，推理档 `flex: 0 0 auto` 不参与收缩，避免把「默认」截成半个字）。
- **判据/取证**：`apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts` 用层叠求值钉住三层几何与操作排 `grid-row: 2 / position: static`、输入盒最高高度算式（12+160+6+28+0+8+28+12 = 254）；`tests/appSurface/project-development.suite.ts` 钉住 composer 的 `gap: 8px`。真实渲染对照见 #600 PR：同一夹具在 495/438/360/296/280px 面板 × 空 / 长多行 / 队列+提示 四态下，改前 2~4 处相交（含文字被提示盖住），改后 0 处相交、0 处溢出。
- **关联**：`apps/ai-game-creator-shell/src/styles.css`（文件末尾「输入区工具栏与状态提示」区块）、`docs/【功能说明】AGC聊天AI润色与发送前提醒-2026-09-10.md`。
## 2026-10-03 AGC 栏目画布上传素材落「待归类」：kind 派生分类不等于入口栏目
- **现象**（Issue 359）：在 AGC 资源栏目子画布（如「UI 交互」「角色与对象」）左下角工具栏点「上传」选图片 / 视频 / 代码类文件，提示条给出「已上传 1 个素材」，但当前栏目计数纹丝不动（仍「0 项」），素材出现在「待归类」。用户看到的是"上传成功了，可它就消失在这个页面里"。