模型菜单刷新行改成左对齐:图标 + 文本贴最左成一组
Project CI / AI game creator shell Rust crates (pull_request) Successful in 5m1s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 7m11s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 6m25s
Project CI / Frontend tests (pull_request) Successful in 3m23s
Project CI / Backend tests (pull_request) Successful in 8m1s
Project CI / AI game creator shell web tests (pull_request) Successful in 3m2s
Project CI / Repository checks (pull_request) Successful in 7m6s
Project CI / Native shell tests (pull_request) Successful in 9m31s

- 现象(用户截图 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
This commit is contained in:
2026-10-06 14:03:36 +08:00
parent 76ad99d2f7
commit b2ffdc4cae
2 changed files with 43 additions and 3 deletions
+14 -3
View File
@@ -11469,6 +11469,13 @@ button.design-workspace-tree__entry:hover,
border-radius: 9px !important; 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:hover:not(:disabled),
.conversation-model-select .conversation-model-menu button:focus-visible { .conversation-model-select .conversation-model-menu button:focus-visible {
background: var(--platform-nav-item-icon-fill) !important; background: var(--platform-nav-item-icon-fill) !important;
@@ -11699,11 +11706,13 @@ button.design-workspace-tree__entry:hover,
.conversation-model-menu .conversation-model-menu
button { button {
/* 只保留"抵消宿主通用按钮样式"的几何:工作台输入区的 `button` 有 28px 方块一族规则, /* 只保留"抵消宿主通用按钮样式"的几何:工作台输入区的 `button` 有 28px 方块一族规则,
尺寸 / 圆角 / 配色交给上面的共享样式面,避免宿主再抄一份观感。 */ 尺寸 / 圆角 / 配色交给上面的共享样式面,避免宿主再抄一份观感。
这里**不再**统一写 `justify-content: space-between`——那样会连刷新行一起推到两端
(图标在左、文案被顶到右)。对齐由共享面的「选项行 space-between / 刷新行 flex-start」
两条规则各管各的。 */
position: static !important; position: static !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: space-between !important;
width: 100% !important; width: 100% !important;
min-width: 0 !important; min-width: 0 !important;
margin: 0 !important; margin: 0 !important;
@@ -11738,8 +11747,10 @@ button.design-workspace-tree__entry:hover,
background: var(--platform-line-soft, #ece9e5); background: var(--platform-line-soft, #ece9e5);
} }
.conversation-model-menu-refresh { .conversation-model-menu-refresh {
/* 刷新行不是选项:图标 + 文本贴最左成一组(选项行才用 `space-between`)。
`gap` 取卡片内既有的 8px 节奏(与工具条列间距同值,不新造数)。 */
justify-content: flex-start !important; justify-content: flex-start !important;
gap: 7px !important; gap: 8px !important;
color: var(--platform-text-soft, #6b7280) !important; color: var(--platform-text-soft, #6b7280) !important;
} }
.conversation-model-menu-refresh:hover, .conversation-model-menu-refresh:hover,
@@ -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<string, string>, 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)输入盒仍在文档流、四周有边距,列表底部没有留白', () => { it('窄屏(390px)输入盒仍在文档流、四周有边距,列表底部没有留白', () => {
const conversation = mobileDeclarations(CONVERSATION); const conversation = mobileDeclarations(CONVERSATION);
const list = mobileDeclarations(...LIST_SELECTORS); const list = mobileDeclarations(...LIST_SELECTORS);