Skip to content

fix(client): 设置页开关尺寸回到宿主原语(#109 收尾) - #112

Merged
Mars-Sea merged 1 commit into
mainfrom
fix/switch-native-size
Oct 30, 2026
Merged

Mars-Sea merged 1 commit into
mainfrom
fix/switch-native-size

Conversation

@Mars-Sea

Copy link
Copy Markdown
Owner

#109 的收尾:换用宿主 Switch 后仍沿用了旧设计画布的 40×24,用户实测它比 DSH 自带开关胖。

改了什么

  • 去掉尺寸覆盖:轨道 40×24 → 36×20,滑块 20px → 16px,与宿主自带 Switch 完全同尺寸(行程仍是 16px,原语的 translateX(16px) 正好落位)。
  • 保留两处动效调整:底色与滑块 160ms 强 ease-out 同步过渡、按压缩放 0.95;颜色、圆角、焦点环、禁用态仍由原语模块 CSS 负责。
  • 新增 tests/styles.test.ts 用例:PAGE_CSS 不得给 .cc-switch 加宽高覆盖,防止以后再次漂移。
  • 同步 page-styles.ts 注释、docs/agent-reference/client-and-settings.md、CHANGELOG,重建 lib/client.js。

尺寸对照

项 宿主自带 改前 改后
轨道 36×20 40×24(宽 +11%、高 +20%) 36×20
滑块 16×16 20×20(+25%) 16×16

上表用宿主 0.2.2-alpha.2 的真实主题变量 + Switch.module.css 拼对照页,在无头 Chromium 里读 getBoundingClientRect 实测。

验证

  • npm run typecheck 通过
  • npm test 1142/1142 通过(新增 1 条)
  • npm run build 通过,lib/client.js 已同步
  • 未在真实 DSH 宿主内截图验证

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
@Mars-Sea
Mars-Sea merged commit fa0a1e1 into main Oct 30, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant