mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-12 14:01:00 +08:00
hectorqin
3c3e461a49
按钮里放的是 Unicode 字符——`☰` `⚙` `✕` `⟨` `⟩` `＋` `🗂` `📁` `⮝`—— 和 emoji。八个字形来自八个字族，光学重量各不相同；`🗂` `📁` `⏮` 在部分平台 被渲染成彩色的，而一个彩色 emoji 出现在单色工具栏里，是「没有设计过」最直接的 信号。不同平台的字体回退还不同，同一个界面在 Android 和桌面浏览器上长得不一样。 此外样式表里所有按钮都没有 `:focus-visible` 规则，键盘走一遍看不到焦点在哪。 所以这次做三件事：图标改成自带字体、把缺失的交互状态补齐、把散落的字面量收成 设计令牌，并把规范写成文档。 图标用字体而不是内联 SVG，理由是**一致性可以被强制**：字体把字形变成字符，它 继承 `color` 和 `font-size`，没有自己的几何，因此没有可以漂移的地方；而三十个 内联 SVG 组件里，颜色、尺寸、线宽每一项都是单个字形可以漂移的位置。字体是 bundle 里的一个 16KB 相对路径文件，`file://` 下能加载，与「一份产物两个宿主」 的既有约束一致。 字形由 `web/tools/icons/` 下的脚本从描边路径编译：路径 → 折线 → 圆头矩形 → 精确布尔并（Clipper）→ TTF。先做过一版「栅格化 + 边界追踪」，失败了：笔画宽度 只有一个栅格单元，而逐单元的边界规则无法表达「边界在一格宽的图形上左右交替」， 结果是一个圆被追踪成 58 段碎片。精确布尔没有这种情形。 放弃的方案：内联 SVG（前面说的漂移问题）、把图标做成 React 组件并逐个手绘 （每个都是独立的几何，光学重量必然不一致）、从 CDN 引用图标字体（本产品必须 在无外网环境下工作）。 界面改动： - `Icon` 组件 + 37 个字形，码位表由生成器写出，测试直接解析字体 `cmap` 核对 - `IconButton` 的 `icon` 是字形名而非任意 `children`，传错名字是编译错误； `label` 必填，字形始终 `aria-hidden` - 补上全部按钮的 `:focus-visible`（本次之前完全缺失） - 间距/字号/动效收成令牌；`prefers-reduced-motion` 通过折叠时长令牌实现， 而不是给每条动画各加一个媒体查询 - 悬停包进 `@media (hover: hover) and (pointer: fine)`，避免触屏上按钮停在悬停态 验证：`web` 336 个测试通过（新增 9 个图标契约测试）；`typecheck`、`build`、 `check-shell.sh`、`verify-web-assets.sh` 全过；字体已确认被打进 Android assets。 真浏览器（Chromium + 真实服务端）实测了书架、书库管理、阅读器三个屏幕的浅色与 深色主题，以及键盘 Tab 下的焦点环。产物 259.5KB → 259.5KB（gzip 81.4KB）， 新增 16KB 字体、CSS 减到 24.4KB。 Ref: #29