From b2ffdc4cae98d0923bd2eff86282d20e01880fcd Mon Sep 17 00:00:00 2001 From: Suzumiya Date: Tue, 6 Oct 2026 14:03:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E8=8F=9C=E5=8D=95=E5=88=B7?= =?UTF-8?q?=E6=96=B0=E8=A1=8C=E6=94=B9=E6=88=90=E5=B7=A6=E5=AF=B9=E9=BD=90?= =?UTF-8?q?=EF=BC=9A=E5=9B=BE=E6=A0=87=20+=20=E6=96=87=E6=9C=AC=E8=B4=B4?= =?UTF-8?q?=E6=9C=80=E5=B7=A6=E6=88=90=E4=B8=80=E7=BB=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 现象（用户截图 446×330）：刷新行的图标在左、「刷新模型列表」文案被顶到行右端 - 根因：`styles.css:11706`（本次修复前）宿主作用域那条「抵消通用按钮样式」的规则统一写了 `justify-content: space-between !important`（8 类 + `!important`）→ 特异性压过 `styles.css:11751` 的 `.conversation-model-menu-refresh { justify-content: flex-start !important }`（1 类） - 改法：宿主那条块**不再写对齐**（只留 position/display/align-items/width/margin/border/shadow/字号），对齐按角色分到共享样式面——`.conversation-model-select .conversation-model-menu button[role='option'] { justify-content: space-between !important }`（选项行名字左 / 勾右），刷新行继续用 `.conversation-model-menu-refresh { justify-content: flex-start !important; gap: 8px !important }`（gap 从 7px 收到卡片内既有的 8px 节奏，与工具条列间距同值，不新造数） - 实测（无头 Chromium，438px / 280px）：卡片 `padding-left: 12px`；**列表行 left = 刷新行 left = 459.5**（438 档；280 档同为 380.5）；图标 left = 行 left + 行内边距 10 = 469.5；文本 left = 图标右缘 482.5 + **8.00px** = 490.5；计算值 `justify-content: flex-start`、`gap: 8px`；文本右缘 562.5 ≪ 行右缘 693.5（改前会贴近右端） - 测试：`chatDialogFrameLayout.test.ts` 新增「模型菜单刷新行：图标与文本贴最左，选项行才用 space-between」——刷新行必须解出 `flex-start` + `gap: 8px`，选项行必须仍是 `space-between`（宿主块那条 8 类规则会被一并算进层叠求值，写回对齐就会变 `space-between` 而红）。**改前红（实测）**：把 `justify-content: space-between !important` 写回宿主块 → `expected 'space-between' to be 'flex-start'`（1 failed / 15 skipped）；移除即绿 - 校验：`vitest run appSurface + chatDialogFrameLayout + conversationModelSelect` **258 passed / 9 skipped**；typecheck pass 3 / fail 0；eslint（TS 部分）0 error；prettier 全绿；encoding 5402 files；spacetime-schema 93 tables；`git diff --check` rc=0 Refs #600, PR #607 --- apps/ai-game-creator-shell/src/styles.css | 17 +++++++++-- .../tests/chatDialogFrameLayout.test.ts | 29 +++++++++++++++++++ 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 04cee0378..8f6572c71 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -11469,6 +11469,13 @@ button.design-workspace-tree__entry:hover, border-radius: 9px !important; } +/* 选项行：名字在左、勾在右（`space-between`）；刷新行不是选项，保持**左对齐** + ——图标与「刷新模型列表」文本贴最左成一组，文本左边缘 = 图标右边缘 + 7px（见 + `.conversation-model-menu-refresh`）。这条按 `[role='option']` 限定，避免再波及刷新行。 */ +.conversation-model-select .conversation-model-menu button[role='option'] { + justify-content: space-between !important; +} + .conversation-model-select .conversation-model-menu button:hover:not(:disabled), .conversation-model-select .conversation-model-menu button:focus-visible { background: var(--platform-nav-item-icon-fill) !important; @@ -11699,11 +11706,13 @@ button.design-workspace-tree__entry:hover, .conversation-model-menu button { /* 只保留"抵消宿主通用按钮样式"的几何：工作台输入区的 `button` 有 28px 方块一族规则， - 尺寸 / 圆角 / 配色交给上面的共享样式面，避免宿主再抄一份观感。 */ + 尺寸 / 圆角 / 配色交给上面的共享样式面，避免宿主再抄一份观感。 + 这里**不再**统一写 `justify-content: space-between`——那样会连刷新行一起推到两端 + （图标在左、文案被顶到右）。对齐由共享面的「选项行 space-between / 刷新行 flex-start」 + 两条规则各管各的。 */ position: static !important; display: flex !important; align-items: center !important; - justify-content: space-between !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; @@ -11738,8 +11747,10 @@ button.design-workspace-tree__entry:hover, background: var(--platform-line-soft, #ece9e5); } .conversation-model-menu-refresh { + /* 刷新行不是选项：图标 + 文本贴最左成一组（选项行才用 `space-between`）。 + `gap` 取卡片内既有的 8px 节奏（与工具条列间距同值，不新造数）。 */ justify-content: flex-start !important; - gap: 7px !important; + gap: 8px !important; color: var(--platform-text-soft, #6b7280) !important; } .conversation-model-menu-refresh:hover, diff --git a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts index 8eda5d3c0..4e2f41816 100644 --- a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts +++ b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts @@ -521,6 +521,35 @@ describe('陶泥儿对话区：Codex 三段式（顶栏 / 唯一滚动区 / 文 ); }); + it('模型菜单刷新行：图标与文本贴最左，选项行才用 space-between（宽屏）', () => { + // 宿主作用域里那条「抵消通用按钮样式」的规则曾经统一写 `justify-content: space-between` + // （8 类 + `!important`），把刷新行的文案顶到右边——现在它不写对齐，改由共享面按角色分： + // 选项行 `space-between`（名字左 / 勾右），刷新行 `flex-start`（图标 + 文本成一组）。 + const HOST_ROW = + '.game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer .conversation-model-select .conversation-model-menu button'; + const REFRESH_BASE = '.conversation-model-menu-refresh'; + const refresh = desktopDeclarations(HOST_ROW, REFRESH_BASE); + /** 共享面这几条是按 `!important` 声明的（要压过基础规则里的旧值），断言只看最终值。 */ + const value = (declarations: Map, property: string) => + declaration(declarations, property).replace(/ !important$/u, ''); + expect( + value(refresh, 'justify-content'), + '刷新行必须左对齐（图标 + 文案成一组）', + ).toBe('flex-start'); + expect(value(refresh, 'gap')).toBe('8px'); + + const OPTION_SHARED = `${SHARED_CARD} button[role='option']`; + const OPTION_BASE = '.conversation-model-menu button[role="option"]'; + const option = desktopDeclarations(OPTION_SHARED, OPTION_BASE); + expect(value(option, 'justify-content'), '选项行仍是名字左 / 勾右').toBe( + 'space-between', + ); + + // 说明：上面两条断言已经覆盖「宿主块不再盖掉刷新行」——`resolveDeclarations` 会把 + // 宿主链那条 8 类的规则一并算进来，如果它又写回 `justify-content: space-between !important`， + // 第一条断言会直接变回 `space-between` 而红。所以不再额外做源码切片断言。 + }); + it('窄屏（390px）输入盒仍在文档流、四周有边距，列表底部没有留白', () => { const conversation = mobileDeclarations(CONVERSATION); const list = mobileDeclarations(...LIST_SELECTORS);