输入区工具条改回唯一一行:润色钮并入工具条,nowrap + 实测 min-width
Project CI / Backend tests (pull_request) Failing after 26s
Project CI / AI game creator shell Rust crates (pull_request) Successful in 5m45s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 6m30s
Project CI / Repository checks (pull_request) Failing after 14s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 7m4s
Project CI / Frontend tests (pull_request) Successful in 2m51s
Project CI / AI game creator shell web tests (pull_request) Failing after 4m12s
Project CI / Native shell tests (pull_request) Successful in 10m32s
Project CI / Backend tests (pull_request) Failing after 26s
Project CI / AI game creator shell Rust crates (pull_request) Successful in 5m45s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 6m30s
Project CI / Repository checks (pull_request) Failing after 14s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 7m4s
Project CI / Frontend tests (pull_request) Successful in 2m51s
Project CI / AI game creator shell web tests (pull_request) Failing after 4m12s
Project CI / Native shell tests (pull_request) Successful in 10m32s
- 口径:工具条只允许一行——`@` / `+` / 「AI 润色 / 恢复原文」/ 模型 / 语音 / 发送 六颗控件平铺,任何面板宽下都不换行、不堆叠、不重叠;宽度不够时按 `min-width` 横向溢出可见,发送钮仍在可视区内 - 换行来源(首轮为「避免重叠」加的 wrap):styles.css:11893 `.project-chat-composer-controls`(6 类)`flex-wrap: wrap`、styles.css:11933 `.project-chat-composer-controls-left` `flex-wrap: wrap`、styles.css:13747 `.conversation-model-select` `flex-wrap: wrap` → 三处都改 `nowrap`;左组补 `flex: 0 0 auto`(固定 28px 动作钮不参与收缩,否则槽位被压窄会把润色钮挤到模型钮上) - 润色钮进工具条:`ResourceReferenceInput` 新增 `actionsPortalTarget`(portal 目标,不传时行为不变,策划面照旧),`DirectProjectComposer` 在左组 `+` 之后放挂点 `.project-chat-composer-controls-actions` 并传入 → 空输入态不再为它留一行;输入盒第二行只剩「润色状态」(无内容时 0 高,`gap` 的 row 分量 6→0、状态自带 `margin-top: 6px`) - min-width 算式(落到两个元素):控件排 `.project-chat-composer-controls` = `@`28 + `+`28 + 润色28 + 模型钮 64(`min-width: 64px`,名字省略号)+ 语音28 + 发送28 = 204,加 5×8px 列间距 = 244,再留 8 余量 → **252px**;外壳 `form.project-chat-composer.is-direct-codex` = 252 + 左右内边距 12×2 + 边框 1×2 → **278px**。夹具实测:自然宽度 290.4、七档(240…900)控件 `top` 差值 ≤1px、两两相交 0 处、`outsideControlsRow` 空 - 低于 min-width:外壳保持 278px、**内容按自身宽度溢出可见**(面板与 composer 都不裁切,选它而不是给工具条 `overflow-x: auto` 是因为工具条里挂着模型菜单浮层,加滚动容器会把它裁掉——#600 的老问题);240px 实测发送钮 rect 仍在窗口内且 `elementFromPoint` 命中它 - 测试:`chatDialogFrameLayout.test.ts` 新增「工具条只有一行…」——七个宽度下 `flex-wrap` 必须 `nowrap`(右组本来就不换行)、控件排 `min-width: 252` / 外壳 `min-width: 278`、组件源码里润色钮渲染在控件排之后的挂点;最高高度算式按新结构更新为 222。**改前红已记录**:把三个源文件 stash 回旧实现后单跑,`240px 下工具条必须保持单行: expected 'wrap' to be 'nowrap'` 与 `expected 228 to be 222` 两条同时红 - 校验:`npx vitest run tests/appSurface.test.ts tests/chatDialogFrameLayout.test.ts` → **225 passed / 9 skipped**;`agc:typecheck` pass 3 / fail 0;eslint、prettier、encoding 5280 files、spacetime-schema 91 tables、`git diff --check` 全绿;对照图与 PR 正文已更新 Refs #600, PR #607
This commit is contained in:
@@ -116,8 +116,8 @@
|
||||
|
||||
- **现象**:#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` 回到行里;工具栏允许换行、右侧组改 `flex: 1 1 auto`,模型钮封顶 160px 且名字走省略号(收缩由它承担,推理档 `flex: 0 0 auto` 不参与收缩,避免把「默认」截成半个字)。**模型失败提示后来改成走浮层**(见本文件顶部 2026-10-04 / 2026-10-05 两条):控件排里既不留常驻红字、也不留常驻状态文字——「控件排内独占一行」那次快照已退役,行高回到由模型触发钮决定。
|
||||
- **判据/取证**:`apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts` 用层叠求值钉住三层几何与操作排 `grid-row: 2 / position: static`、输入盒最高高度算式(12 盒内上内边距 + 160 编辑器 + 6 输入区行距 + 28 操作排 + 0 输入区下内边距 + 8 输入盒与工具栏行距 + **30 工具栏行高(模型触发钮 30px 撑起来,发送/语音是 28px)** + 12 盒内下内边距 = **256**);`tests/appSurface/project-development.suite.ts` 钉住 composer 的 `gap: 8px`。真实渲染对照见 #600 PR:同一夹具在 495/438/360/296/280px 面板 × 空 / 长多行 / 队列+提示 四态下,改前 2~4 处相交(含文字被提示盖住),改后 0 处相交、0 处溢出。
|
||||
- **处理(现行口径)**:`.project-chat-composer.is-direct-codex` 是单列网格(`gap: 8px`);**控件全部集中在唯一一行工具条**——`@` / `+` / 「AI 润色 / 恢复原文」/ 模型 / 语音 / 发送,六颗 `flex-wrap: nowrap` 平铺(润色钮由 `ResourceReferenceInput` 的 `actionsPortalTarget` portal 进工具条,不再自成一行);状态/提示层只在有内容时占行(空输入态第二行为 0 高、行间距为 0,状态自己带 6px 上间距)。窄宽度用 `min-width` 兜(控件排 252px / 外壳 278px)+ 横向溢出可见:**不换行、不堆叠、不重叠**,发送钮仍可点击(夹具 `elementFromPoint` 命中)。模型钮封顶 160px 且名字走省略号(收缩由它承担),左组是固定 28px 动作钮、`flex: 0 0 auto` 不参与收缩。**模型失败提示后来改成走浮层**(见本文件顶部 2026-10-04 / 2026-10-05 两条):控件排里既不留常驻红字、也不留常驻状态文字——「控件排内独占一行」那次快照已退役,行高回到由模型触发钮决定。
|
||||
- **判据/取证**:`apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts` 用层叠求值钉住单行工具条(240 / 280 / 296 / 320 / 360 / 438 / 900 七个宽度下 `flex-wrap` 都是 `nowrap`、控件排 `min-width: 252px`、外壳 `min-width: 278px`)、输入盒最高高度算式(12 盒内上内边距 + 160 编辑器 + 0 输入区行距 + 0 状态行 + 0 输入区下内边距 + 8 输入盒与工具栏行距 + **30 工具栏行高(模型触发钮 30px 撑起来,发送/语音是 28px)** + 12 盒内下内边距 = **222**),以及组件源码里润色钮渲染在工具条挂点(`actionsPortalTarget={controlsActionsSlot}`、挂点在控件排之后);`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 随包 plugins 的 feature 档位必须与消费方一致,且门禁会因 build.rs 未重跑而假通过
|
||||
|
||||
Reference in New Issue
Block a user