From 1cd3189e8a333dac46bea58178e2b37898d06d37 Mon Sep 17 00:00:00 2001
From: Mars-Sea <1195751600@qq.com>
Date: Fri, 30 Oct 2026 21:14:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(client):=20=E8=AE=BE=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=E5=B0=BA=E5=AF=B8=E5=9B=9E=E5=88=B0=E5=AE=BF?=
 =?UTF-8?q?=E4=B8=BB=E5=8E=9F=E8=AF=AD=EF=BC=88#109=20=E6=94=B6=E5=B0=BE?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

40x24 的尺寸覆盖让五个开关比宿主自带开关胖一圈：宽 +4px（+11%）、
高 +4px（+20%）、滑块 16 → 20px（+25%），用户 2026-10-30 反馈
「感觉我们的要胖一些」。尺寸交还 Switch.module.css：轨道 36x20、
滑块 16px、行程 16px；PAGE_CSS 只保留 160ms 同步过渡与按压缩放，
颜色、圆角、焦点环、禁用态本就在原语里。

- 新增 styles.test.ts 用例：PAGE_CSS 不得给 .cc-switch 加宽高覆盖
- 同步 page-styles 注释、client-and-settings 文档与 CHANGELOG
- 重建 lib/client.js
---
 CHANGELOG.md                                |  2 +-
 docs/agent-reference/client-and-settings.md |  2 +-
 lib/client.js                               | 24 ++++++++++-----------
 src/client/page-styles.ts                   | 24 ++++++++++-----------
 tests/styles.test.ts                        | 12 +++++++++++
 5 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b8e877..1124118 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Changed
 
-- **设置页开关改用宿主 `Switch` 组件（#108）。** 五个布尔设置（按套餐过滤模型、零数据保留、网页搜索、侧边栏额度、缓存图片卸载）原先是 `appearance:none` 的 checkbox 加伪元素画出的开关，现在是宿主 primitives 的 `Switch`（`<button role="switch" aria-checked>`），与宿主其他设置页开关同源，读屏读到的状态与画面不会再不一致。外观保持 40×24；底色与滑块改为 160ms 同步过渡，按下时轻微缩小。点开关行的标题文字不再切换开关，需点开关本身。
+- **设置页开关改用宿主 `Switch` 组件（#108）。** 五个布尔设置（按套餐过滤模型、零数据保留、网页搜索、侧边栏额度、缓存图片卸载）原先是 `appearance:none` 的 checkbox 加伪元素画出的开关，现在是宿主 primitives 的 `Switch`（`<button role="switch" aria-checked>`），与宿主其他设置页开关同源，读屏读到的状态与画面不会再不一致。尺寸与颜色、圆角、焦点环、禁用态沿用宿主原语（36×20 轨道、16px 滑块），与宿主自带开关同尺寸；底色与滑块改为 160ms 同步过渡，按下时轻微缩小。点开关行的标题文字不再切换开关，需点开关本身。
 
 ## [0.16.0] - 2026-10-30
 
diff --git a/docs/agent-reference/client-and-settings.md b/docs/agent-reference/client-and-settings.md
index 8024660..561596c 100644
--- a/docs/agent-reference/client-and-settings.md
+++ b/docs/agent-reference/client-and-settings.md
@@ -348,7 +348,7 @@ Task-specific reference moved from the former root `AGENTS.md`. All source and t
   包含基础层隐藏项的显式覆盖。保存冲突或缺少原子写入能力时保留草稿。
   显示全部会选中已加载的目录模型；目录失败不清空已存选择。
 - **字号与校验说明**：页面及面板辅助文字至少 12px；重试次数提示与实际 0～50 次限制一致。
-- **设置页动效与悬停（2026-10-29）**：可按的元素（`cc-btn`、`cc-segItem`、`cc-iconButton`、`cc-resetInline`）`:active` 时缩放（0.97，20～28px 图标按钮 0.95），160ms `cubic-bezier(.23,1,.32,1)`；折叠箭头、卡片入场、保存条、额度进度条、`cc-notice` 入场共用这条曲线，颜色与描边 150ms `ease`。只动 `transform`／`opacity`／颜色：额度条 `cc-usageBarFill` 与 `cc-miniMeterFill` 满宽，按比例 `translateX` 左移（保留圆角端），`cc-notice` 用 `@starting-style` 从上方 4px 淡入；保存条 48px、不过冲、出场快于入场。所有 `:hover` 集中在页尾的 `(hover:hover) and (pointer:fine)` 块，块内校验失败的描边排在普通悬停之后，以同等优先级压住它；整行开关（分组标题、账户卡片头）悬停只加深箭头，不铺底色。`prefers-reduced-motion` 去掉缩放与位移、保留淡入与颜色。分组、账户卡片展开收起刻意不加动画。布尔开关（`ToggleField`）用宿主 primitives 的 `Switch`（issue #108，`<button role="switch" aria-checked>`，不再是 `appearance:none` 的 checkbox 加伪元素）；`.cc-switch` 只做三处调整：尺寸保持设计画布的 40×24、滑块 20px（原语为 36×20，两者行程都是 16px）；底色与滑块统一为 160ms 强 ease-out 同步过渡；按压缩放 0.95。原语不收 `id`，所以开关行标题是纯文本、开关以 `aria-label` 取名，点标题不再切换。`Switch` 的签名与样式在 `0.2.1-rc.2`、`0.2.1-rc.4`、`0.2.2-alpha.2` 三版逐字一致（2026-10-30 核对），升级宿主时一并复核。约束由 `tests/styles.test.ts` 末尾四条用例锁定。分组说明 `cc-groupDesc` 下直接接账户列表、提示块组或覆盖表时留 12px（设置行自带 12px 内边距，不另加）。
+- **设置页动效与悬停（2026-10-29）**：可按的元素（`cc-btn`、`cc-segItem`、`cc-iconButton`、`cc-resetInline`）`:active` 时缩放（0.97，20～28px 图标按钮 0.95），160ms `cubic-bezier(.23,1,.32,1)`；折叠箭头、卡片入场、保存条、额度进度条、`cc-notice` 入场共用这条曲线，颜色与描边 150ms `ease`。只动 `transform`／`opacity`／颜色：额度条 `cc-usageBarFill` 与 `cc-miniMeterFill` 满宽，按比例 `translateX` 左移（保留圆角端），`cc-notice` 用 `@starting-style` 从上方 4px 淡入；保存条 48px、不过冲、出场快于入场。所有 `:hover` 集中在页尾的 `(hover:hover) and (pointer:fine)` 块，块内校验失败的描边排在普通悬停之后，以同等优先级压住它；整行开关（分组标题、账户卡片头）悬停只加深箭头，不铺底色。`prefers-reduced-motion` 去掉缩放与位移、保留淡入与颜色。分组、账户卡片展开收起刻意不加动画。布尔开关（`ToggleField`）用宿主 primitives 的 `Switch`（issue #108，`<button role="switch" aria-checked>`，不再是 `appearance:none` 的 checkbox 加伪元素）；`.cc-switch` 只做两处动效调整：底色与滑块统一为 160ms 强 ease-out 同步过渡；按压缩放 0.95。盒尺寸、颜色、圆角、焦点环、禁用态全部交还原语（36×20 轨道、16px 滑块、16px 行程），设计画布的 40×24 不再沿用（2026-10-30 用户反馈它比宿主自带开关胖，回到原语尺寸后无差别）。原语不收 `id`，所以开关行标题是纯文本、开关以 `aria-label` 取名，点标题不再切换。`Switch` 的签名与样式在 `0.2.1-rc.2`、`0.2.1-rc.4`、`0.2.2-alpha.2` 三版逐字一致（2026-10-30 核对），升级宿主时一并复核。约束由 `tests/styles.test.ts` 末尾五条用例锁定（最后一条禁止重新给开关加宽高覆盖，否则又会比宿主开关胖）。分组说明 `cc-groupDesc` 下直接接账户列表、提示块组或覆盖表时留 12px（设置行自带 12px 内边距，不另加）。
 - **右侧只有一条边界（2026-10-22）**：设置行控件、账户卡片、分组头动作（「刷新」）、「查看模型用量」都贴内容
   右缘。为此「恢复默认」不在控件后面留列，而是放在标题行「已自定义」徽标后的 20px 圆形图标按钮（`OverrideTag`，
   `cc-resetInline`；只清空存储值的草稿只显示按钮）——同日先后试过「每行末尾留 28px 复位空位」与「卡片、分组头
diff --git a/lib/client.js b/lib/client.js
index 714e653..b9ae092 100644
--- a/lib/client.js
+++ b/lib/client.js
@@ -10611,19 +10611,19 @@ window.__ModuleLoader__.load({
 .cc-check:checked::after{content:'';position:absolute;top:3px;left:5px;width:3px;height:7px;border:solid var(--dsw-alias-label-primary-foreground,#fff);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 .cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* The settings switches are the platform's Switch primitive (issue #108); its
- * module CSS owns the colours, capsule shape, focus ring and disabled look.
- * This layer only adjusts it. (1) Size stays the design canvas's 40x24 with a
- * 20px thumb, one step up from the primitive's 36x20; the travel is 16px in
- * both, so the primitive's own translateX still lands the thumb. The
+ * module CSS owns the box (36x20 track, 16px thumb, 16px travel), the colours,
+ * capsule shape, focus ring and disabled look. This layer only joins the page's
+ * motion: the primitive slides the thumb over 120ms ease and snaps the track
+ * colour, so here the thumb and track share one 160ms strong ease-out and read
+ * as one object, and the switch scales to .95 on press like the other small
+ * pressables. The design canvas's 40x24 track is deliberately NOT re-applied
+ * (2026-10-30: it made every switch read fatter than the host's own settings
+ * switches, so the primitive's box is the single source of truth). The
  * cc-rowControl> qualifier lifts these above the module's single-class rules
- * whatever order the two sheets load in. (2) Motion joins the page's: the
- * primitive slides the thumb over 120ms ease and snaps the track colour, so
- * the thumb and track now share one 160ms strong ease-out and read as one
- * object, and the switch scales to .95 on press like the other small
- * pressables. The thumb is targeted as the button's only child because its
- * module class name is hashed. */
-.cc-rowControl>.cc-switch{width:40px;height:24px;transition:background-color .16s var(--cc-ease-out),transform .16s var(--cc-ease-out)}
-.cc-rowControl>.cc-switch>span{width:20px;height:20px;transition:transform .16s var(--cc-ease-out)}
+ * whatever order the two sheets load in. The thumb is targeted as the button's
+ * only child because its module class name is hashed. */
+.cc-rowControl>.cc-switch{transition:background-color .16s var(--cc-ease-out),transform .16s var(--cc-ease-out)}
+.cc-rowControl>.cc-switch>span{transition:transform .16s var(--cc-ease-out)}
 .cc-switch:active:not(:disabled){transform:scale(.95)}
 .cc-accountMode{align-items:center;gap:8px;display:flex;margin:12px 16px 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-accountList{flex-direction:column;gap:8px;display:flex}
diff --git a/src/client/page-styles.ts b/src/client/page-styles.ts
index 493fac4..0452690 100644
--- a/src/client/page-styles.ts
+++ b/src/client/page-styles.ts
@@ -214,19 +214,19 @@ export const PAGE_CSS = `
 .cc-check:checked::after{content:'';position:absolute;top:3px;left:5px;width:3px;height:7px;border:solid var(--dsw-alias-label-primary-foreground,#fff);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 .cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* The settings switches are the platform's Switch primitive (issue #108); its
- * module CSS owns the colours, capsule shape, focus ring and disabled look.
- * This layer only adjusts it. (1) Size stays the design canvas's 40x24 with a
- * 20px thumb, one step up from the primitive's 36x20; the travel is 16px in
- * both, so the primitive's own translateX still lands the thumb. The
+ * module CSS owns the box (36x20 track, 16px thumb, 16px travel), the colours,
+ * capsule shape, focus ring and disabled look. This layer only joins the page's
+ * motion: the primitive slides the thumb over 120ms ease and snaps the track
+ * colour, so here the thumb and track share one 160ms strong ease-out and read
+ * as one object, and the switch scales to .95 on press like the other small
+ * pressables. The design canvas's 40x24 track is deliberately NOT re-applied
+ * (2026-10-30: it made every switch read fatter than the host's own settings
+ * switches, so the primitive's box is the single source of truth). The
  * cc-rowControl> qualifier lifts these above the module's single-class rules
- * whatever order the two sheets load in. (2) Motion joins the page's: the
- * primitive slides the thumb over 120ms ease and snaps the track colour, so
- * the thumb and track now share one 160ms strong ease-out and read as one
- * object, and the switch scales to .95 on press like the other small
- * pressables. The thumb is targeted as the button's only child because its
- * module class name is hashed. */
-.cc-rowControl>.cc-switch{width:40px;height:24px;transition:background-color .16s var(--cc-ease-out),transform .16s var(--cc-ease-out)}
-.cc-rowControl>.cc-switch>span{width:20px;height:20px;transition:transform .16s var(--cc-ease-out)}
+ * whatever order the two sheets load in. The thumb is targeted as the button's
+ * only child because its module class name is hashed. */
+.cc-rowControl>.cc-switch{transition:background-color .16s var(--cc-ease-out),transform .16s var(--cc-ease-out)}
+.cc-rowControl>.cc-switch>span{transition:transform .16s var(--cc-ease-out)}
 .cc-switch:active:not(:disabled){transform:scale(.95)}
 .cc-accountMode{align-items:center;gap:8px;display:flex;margin:12px 16px 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-accountList{flex-direction:column;gap:8px;display:flex}
diff --git a/tests/styles.test.ts b/tests/styles.test.ts
index 489f513..348deb3 100644
--- a/tests/styles.test.ts
+++ b/tests/styles.test.ts
@@ -370,3 +370,15 @@ test('PAGE_CSS: an invalid field keeps its error border under the pointer', () =
   assert.ok(plain >= 0 && invalid > plain, 'the invalid hover border must follow the plain one at equal specificity')
   assert.ok(block[invalid]!.includes('.cc-unitBoxInvalid:hover'))
 })
+
+test('PAGE_CSS: the settings switch takes its box from the primitive, never from this sheet', () => {
+  // The design canvas's 40x24 track made every switch read fatter than the
+  // host's own settings switches (user report, 2026-10-30); the primitive's
+  // 36x20 track with a 16px thumb is the single source of truth now. Pin that
+  // this sheet styles the switch's motion only, so a future size override
+  // cannot silently reintroduce the mismatch.
+  const boxed = PAGE_RULES.filter(
+    (rule) => /\.cc-switch\b/.test(rule.selector) && /(?:^|;)\s*(?:width|height)\s*:/.test(rule.body),
+  )
+  assert.deepEqual(boxed.map((rule) => rule.selector), [])
+})