From 8a9fa5af436221f9b78bcf6e1e022e7664631111 Mon Sep 17 00:00:00 2001 From: Suzumiya Date: Mon, 5 Oct 2026 01:32:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=BB=91=E5=9D=97=E5=9C=86=E9=92=AE=E6=94=B9?= =?UTF-8?q?=E5=AE=9E=E5=BF=83=EF=BC=9A=E6=9A=96=E7=99=BD=E5=AE=9E=E5=BF=83?= =?UTF-8?q?=E9=92=AE=20+=20filled=20=E6=AE=B5=E9=93=BA=E5=88=B0=E9=92=AE?= =?UTF-8?q?=E4=B8=8B=E6=B2=BF=EF=BC=88=E5=A4=8D=E6=A0=B8=E5=8F=8D=E9=A6=88?= =?UTF-8?q?=202=20=E4=B9=8B=E4=B8=89=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 圆钮去掉「主色描边 + 半透明底」造成的空心环观感：改 `background: var(--platform-panel-fill)`（两个主题都是不透明面板色），保留 1px `--platform-subpanel-border` 极淡描边与柔和暖影，尺寸仍 20px - 「靶心」根因：`--platform-input-highlight` 在浅色主题只有 90% 不透明，filled 段透出来正好在钮心形成一个点；换不透明 token 后消失。同时给 input `position: relative; z-index: 1`，让实心钮压在档位点之上（不再被下面的点透出） - filled 段：`--strength-progress`（百分比）换成 `--strength-ratio`（0~1 无单位），CSS 用 `calc(20px + ratio * (100% - 20px))` 把填充一直铺到圆钮右缘，两端在任意轨道宽度下都对得齐；默认档填充恰等于圆钮直径（不伪造填充） - hover 把暖影压深一档；focus-visible 焦点环与投影一起给（`box-shadow` 是单值属性，只写环会把实心钮的影子抹掉）；Firefox 的 track/progress/thumb 同步同一套 - 校验：typecheck、2 个 vitest 文件 212 passed / 9 skipped、eslint、prettier、encoding、spacetime-schema、diff-check 全通过；无头 Chromium 重采 5 张**真 PNG** 并已换进 PR 正文（像素级验证：圆钮中心 (252,248,244) 暖白、mid 态 filled 右界与钮右缘重合） --- apps/ai-game-creator-shell/src/styles.css | 41 ++++++++++++++----- .../ComposerControls.tsx | 4 +- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 31fc74cd2..443e94eff 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -13668,6 +13668,9 @@ details.design-agent-reasoning[open] .project-chat-surface.is-direct-codex .project-chat-composer.is-direct-codex .project-chat-composer-strength-range { + /* 圆钮（input 的 thumb）要压在档位点之上：实心钮不该被它下面那颗点透出来。 */ + position: relative; + z-index: 1; width: 100%; height: 26px; margin: 0; @@ -13683,11 +13686,14 @@ details.design-agent-reasoning[open] .project-chat-composer-strength-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; - /* 已选段用主色、未选段用暖灰：进度由组件写进来的 `--strength-progress` 决定。 */ + /* 已选段一直铺到圆钮右缘（`--strength-ratio` 是无单位档位比例，20px = 圆钮直径）， + 圆钮右缘之外才是未选段；`calc` 让两端在任意轨道宽度下都对齐。 */ background: linear-gradient( to right, - var(--platform-accent) 0 var(--strength-progress, 0%), - var(--platform-subpanel-border) var(--strength-progress, 0%) 100% + var(--platform-accent) 0 + calc(20px + var(--strength-ratio, 0) * (100% - 20px)), + var(--platform-subpanel-border) + calc(20px + var(--strength-ratio, 0) * (100% - 20px)) 100% ); } @@ -13699,10 +13705,15 @@ details.design-agent-reasoning[open] height: 20px; margin-top: -7px; appearance: none; - border: 2px solid var(--platform-accent); + border: 1px solid var(--platform-subpanel-border); border-radius: 999px; - background: var(--platform-input-highlight); - box-shadow: 0 2px 6px rgb(112 57 30 / 22%); + /* 实心暖白圆钮：用 `--platform-panel-fill`（两个主题都是不透明面板色）而不是半透明的 + `--platform-input-highlight`——后者浅色主题只有 90% 不透明，下面的已选段会透出来， + 看起来就是个"靶心"。不再画中心点、也不用主色描边成空心环。 */ + background: var(--platform-panel-fill); + box-shadow: + 0 2px 6px rgb(112 57 30 / 24%), + 0 1px 2px rgb(112 57 30 / 16%); } .game-workbench-chat @@ -13712,6 +13723,10 @@ details.design-agent-reasoning[open] :disabled )::-webkit-slider-thumb { transform: scale(1.06); + /* 悬停把暖影压深一档（实心钮靠影子浮起来，不能只靠描边）。 */ + box-shadow: + 0 3px 9px rgb(112 57 30 / 30%), + 0 1px 3px rgb(112 57 30 / 20%); } .game-workbench-chat @@ -13734,7 +13749,10 @@ details.design-agent-reasoning[open] .project-chat-surface.is-direct-codex .project-chat-composer.is-direct-codex .project-chat-composer-strength-range:focus-visible::-webkit-slider-thumb { - box-shadow: 0 0 0 3px var(--platform-input-focus-ring); + /* 焦点环与暖影一起给：`box-shadow` 是单值属性，只写环会把实心钮的影子抹掉。 */ + box-shadow: + 0 0 0 3px var(--platform-input-focus-ring), + 0 2px 6px rgb(112 57 30 / 24%); } .game-workbench-chat @@ -13770,10 +13788,13 @@ details.design-agent-reasoning[open] .project-chat-composer-strength-range::-moz-range-thumb { width: 20px; height: 20px; - border: 2px solid var(--platform-accent); + /* 与 WebKit 同一套实心钮：暖白底 + 极淡描边 + 柔和暖影（不用主色描边成空心环）。 */ + border: 1px solid var(--platform-subpanel-border); border-radius: 999px; - background: var(--platform-input-highlight); - box-shadow: 0 2px 6px rgb(112 57 30 / 22%); + background: var(--platform-panel-fill); + box-shadow: + 0 2px 6px rgb(112 57 30 / 24%), + 0 1px 2px rgb(112 57 30 / 16%); } /* 档位点：纯装饰（命中与吸附由原生 range 负责），个数跟着档位契约走， diff --git a/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectComposer/ComposerControls.tsx b/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectComposer/ComposerControls.tsx index 31dcecd5a..31c7bd694 100644 --- a/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectComposer/ComposerControls.tsx +++ b/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectComposer/ComposerControls.tsx @@ -488,8 +488,8 @@ export function ComposerReasoningEffortSelect({ value={activeIndex} style={ { - /* 已选段填充的进度：CSS 里用它给轨道做双色渐变（不写死颜色）。 */ - '--strength-progress': `${(activeIndex / (options.length - 1)) * 100}%`, + /* 档位比例（0~1，无单位）：CSS 用它算出圆钮中心，填充铺到圆钮右缘。 */ + '--strength-ratio': String(activeIndex / (options.length - 1)), } as CSSProperties } aria-label="思维强度"