From dd6e5186b0c9fb566dbaa697c53e1fd4243c8c89 Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Mon, 5 Oct 2026 18:56:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E9=80=89=E6=AE=B5=E7=BB=88=E7=82=B9?=
 =?UTF-8?q?=E6=94=B9=E5=88=B0=E5=9C=86=E9=92=AE=E4=B8=AD=E5=BF=83=EF=BC=9A?=
 =?UTF-8?q?=E5=9C=86=E9=92=AE=E5=8F=B3=E4=BE=A7=E4=B8=8D=E5=86=8D=E9=9C=B2?=
 =?UTF-8?q?=E5=87=BA=E6=A9=99=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 现象：4× 放大图里橙色 filled 段的右端越到圆钮右侧之外（圆钮边缘能看到一小截橙色）
- 根因：渐变终点写成 `calc(20px + var(--strength-ratio) * (100% - 20px))`，而圆钮中心在 `10px + ratio * (100% - 20px)` —— 终点比圆钮中心多 10px（正好落在圆钮**右缘**），亚像素 / 圆角 / 描边误差都会让它露出来
- 改法：两个渐变停靠点都改成 `calc(10px + var(--strength-ratio, 0) * (100% - 20px))`，filled 段右端与圆钮中心重合；100% 时圆钮压在轨道右端、填充与圆钮右缘齐平
- 实测（无头 Chromium，4× 设备像素）：0/25/50/75/100% 五档沿轨道中线扫描，圆钮右缘以外主色像素命中数 **0**（改前对照图能看到橙色溢出）；hover / active / focus-visible / disabled 四态同样 0
- 守卫：`chatDialogFrameLayout.test.ts` 断言轨道渐变停靠点含 `calc(10px + var(--strength-ratio, 0) * (100% - 20px))` 且不含 `calc(20px + …)`

Refs #600, PR #607
---
 apps/ai-game-creator-shell/src/styles.css           |  9 +++++----
 .../tests/chatDialogFrameLayout.test.ts             | 13 +++++++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index d2de3cd8b..89cdff927 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -11526,14 +11526,15 @@ button.design-workspace-tree__entry:hover,
 .project-chat-composer-strength-range::-webkit-slider-runnable-track {
   height: 6px;
   border-radius: 999px;
-  /* 已选段一直铺到圆钮右缘（`--strength-ratio` 是无单位档位比例，20px = 圆钮直径），
-     圆钮右缘之外才是未选段；`calc` 让两端在任意轨道宽度下都对齐。 */
+  /* 已选段终点 = **圆钮中心**（`--strength-ratio` 是无单位档位比例；圆钮中心 =
+     10px + ratio * (100% - 20px)，两端各留一个圆钮半径）。原先终点写成 20px + …（= 圆钮
+     **右缘**），亚像素 / 圆角 / 描边一有误差就在圆钮右侧露出一小截橙色。 */
   background: linear-gradient(
     to right,
     var(--platform-accent) 0
-      calc(20px + var(--strength-ratio, 0) * (100% - 20px)),
+      calc(10px + var(--strength-ratio, 0) * (100% - 20px)),
     var(--platform-subpanel-border)
-      calc(20px + var(--strength-ratio, 0) * (100% - 20px)) 100%
+      calc(10px + var(--strength-ratio, 0) * (100% - 20px)) 100%
   );
 }
 
diff --git a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts
index 0879bb33e..5b9f2d2f6 100644
--- a/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts
+++ b/apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts
@@ -429,6 +429,19 @@ describe('陶泥儿对话区：Codex 三段式（顶栏 / 唯一滚动区 / 文
     expect(sectionPadding.right).toBe(0);
     expect(sectionPadding.top).toBe(4);
     expect(sectionPadding.bottom).toBe(2);
+
+    // 已选段终点必须与**圆钮中心**重合（`10px + ratio * (100% - 20px)`）：写成 `20px + …`
+    // （= 圆钮**右缘**）时圆钮右侧会露出一小截橙色（4× 设备像素实拍对照见 PR）。
+    const track = desktopDeclarations(
+      `${STRENGTH_RANGE}::-webkit-slider-runnable-track`,
+    );
+    const trackBackground = declaration(track, 'background');
+    expect(trackBackground).toContain(
+      'calc(10px + var(--strength-ratio, 0) * (100% - 20px))',
+    );
+    expect(trackBackground).not.toContain(
+      'calc(20px + var(--strength-ratio, 0) * (100% - 20px))',
+    );
   });
 
   it('窄屏（390px）输入盒仍在文档流、四周有边距，列表底部没有留白', () => {