diff --git a/.ua/index.json b/.ua/index.json index 1f6c472..ca78960 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T14:05:23.913Z", + "generatedAt": "2026-10-26T14:07:27.545Z", "repoRoot": ".", "packages": [ { @@ -4122,6 +4122,7 @@ "ua commit-lint <文件|message>：提交信息门禁（type 枚举 / scope 规则 / subject 中文祈使 ≤50 字符），规范见 COMMITTING.md，违规退出码 1", "ua audit:visual [--json|--baseline]：视觉漂移门禁，统计皮肤包里各类硬编码视觉字面量（字号/动效时长/阴影/圆角/焦点环/内距/控件高度/字重/行高/层级/边框色）并与 .ua/visual-baseline.json 棘轮比对，超基线退出码 1；--baseline 重写基线，--json 出机器可读计数与每类命中行号（line / prop / value / hint，Agent 可直接定位）", "ua audit:contrast [--json|--list]：对比度门禁，把令牌里 16 组「文字色 × 底色」配对按 WCAG 公式算成对比度（求值支持 var() 与 color-mix，半透明底先压到页面底色），亮/暗 × 常规/高对比四套分算，低于阈值（正文 7 / 常规 4.5 / 禁用 2.6）退出码 1；--json 出逐对明细，--list 只列配对表", + "ua audit:motion [--json]：动效兜底门禁，扫描皮肤样式表里带 infinite 的动画，逐个核对是否在 prefers-reduced-motion 块里 animation: none，缺兜底退出码 1（--json 出逐条明细）", "ua mcp：零依赖 stdio MCP server，暴露 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe" ], "keyTypes": [ @@ -4129,7 +4130,7 @@ "MCP tool 入参 schema" ] }, - "usage": "node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / doctor", + "usage": "node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|audit:motion|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / audit:motion / doctor", "conventions": [ "零依赖：只用 node 标准库，Node >= 18", "清单是单一来源：代码注释、文档站、llms-full.txt、MCP 全部从 ua.manifest.json 派生", @@ -4138,13 +4139,14 @@ "docs": { "intro": "工程层工具包（private，不发布）。所有 Agent 与人都通过它读取组件库：清单驱动索引、文档、MCP 三件套，外加 style / verify 两道门禁。", "steps": [ - "接手先跑 ua doctor（11 项：node / 依赖 / git 钩子与身份 / 元数据 / 命令面三方一致 / 门禁链完整，秒级），再跑 npm run check 确认基线全绿（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast）", + "接手先跑 ua doctor（11 项：node / 依赖 / git 钩子与身份 / 元数据 / 命令面三方一致 / 门禁链完整，秒级），再跑 npm run check 确认基线全绿（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast → audit:motion）", "查组件：ua list 看全量，ua search <关键词> 按 id/标题/参数名/参数说明/步骤五层 + 配方三层（标题/配方组件/要点）模糊找（命中非 id 标题会标出命中字段，配方命中行直接给 ua recipes <编号> 指路；拼错会回相近 id），ua info <组件id> 看 props/步骤/示例（ua info <包名> 看单包 api 与约定，加 --json 出原始清单）；要给文档 / issue / 回复贴组件说明时加 --md，直接拿到标题 + 参数表 + 用法 + 示例的 Markdown 片段", "查配方：ua recipes 列全量（编号 / 标题 / 用到的组件），ua recipes <编号> 看骨架代码与要点（--json 给脚本用；MCP 里对应 list_recipes / get_recipe）", "查令牌：ua tokens 打印全部 --ua-* 变量（颜色带暗色值），--json 输出结构化数组；写样式前先查，禁止硬编码。令牌分十三组：颜色 / 混色浓度 / 圆角 / 间距 / 字号 / 字重行高 / 边框 / 阴影 / 动效 / 位移 / 焦点环 / 控件高度 / 层级，color-mix 混入浓度用 --ua-alpha-soft/tint/line/mid/strong/heavy，弹层阴影用 --ua-shadow-1..4，过渡用 --ua-duration-* + --ua-ease，transform 位移用 --ua-translate-*（负号 calc(-1 * var(...))），焦点环用 --ua-focus-ring(_inset)", "改完清单跑 npm run docs：同时刷新人类文档站与 llms-full.txt（Agent 首选喂料）", "改完样式跑 npm run audit:visual：各类硬编码计数不得高于 .ua/visual-baseline.json（棘轮只减不增）；字面量可用 npm run visual:migrate 幂等改写成令牌", "改完颜色令牌跑 npm run audit:contrast：16 组文字/底色配对在亮/暗 × 常规/高对比四套主题下都必须达标（正文 7 / 常规 4.5 / 禁用 2.6），跌破即退出码 1——调一个色值就能让全站辅助文字掉到 4.4，人眼看不出但门禁看得出", + "改完动效跑 npm run audit:motion：带 infinite 的动画必须在 prefers-reduced-motion 块里被关掉，缺一条即退出码 1——循环动画漏兜底会把「减少动效」用户整页交给抖动", "在 ~/.workbuddy/mcp.json 注册 ua mcp 后，Agent 可直接调 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe" ], "components": [] diff --git a/AGENTS.md b/AGENTS.md index c0e585d..c8ec238 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -7,7 +7,7 @@ 1. **包管理器必须用 pnpm**：包间依赖用 `workspace:*` 协议，npm 不支持。安装依赖：`pnpm install`。 2. **构建工具**：TypeScript 5（`tsc`）。若环境未全局安装，可使用托管工作区的副本：`C:/Users/shawn/.workbuddy/binaries/node/workspace/node_modules/typescript`（本仓库历史即如此构建）。 3. **Node**：>= 18，ESM（`"type": "module"`）。 -4. **环境自检 + 验证基线**：先跑 `node packages/tools/cli/bin/ua.js doctor`（秒级 11 项检查：node 版本 / 依赖安装 / git 钩子 / git 身份 / .ua 元数据可解析 / usage 串 ↔ dispatch 一致 / check 链覆盖全部门禁步骤 / CLI 清单声明的命令都有实现，任一失败退出码 1），通过后再跑 `npm run check`（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast）确认基线全绿，再开始改代码。 +4. **环境自检 + 验证基线**：先跑 `node packages/tools/cli/bin/ua.js doctor`（秒级 11 项检查：node 版本 / 依赖安装 / git 钩子 / git 身份 / .ua 元数据可解析 / usage 串 ↔ dispatch 一致 / check 链覆盖全部门禁步骤 / CLI 清单声明的命令都有实现，任一失败退出码 1），通过后再跑 `npm run check`（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast → audit:motion）确认基线全绿，再开始改代码。 ## 编码规范（强制） @@ -27,7 +27,7 @@ - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html - `apps/docs`：文档站，纯产物（ua docs 生成） -**门禁一条龙**：`npm run check` = build + demo + style + typecheck + smoke + index + verify + lint-iterations + audit:visual + audit:contrast，提交前必过。其中 `smoke` 是两段内核断言：`@ui-arch/frame` 14 条（信号读写与同值短路、effect 注销与条件分支重追踪、computed 链式派生、多订阅者扇出）+ `@ui-arch/table-core` 26 条（排序 / 筛选 / 分页 / 选择的派生管线 + setRows 换源与失效行剔除）；改内核语义前先跑它，别靠组件 demo 肉眼验。`ua audit:visual` 统计皮肤包里十四类硬编码视觉字面量（字号 / 动效时长 / 阴影 / 圆角 / 焦点环 / 内距 / 控件高度 / 字重 / 行高 / 层级 / 边框色 / 混色浓度 / transform 位移 / 焦点描边）并与 `.ua/visual-baseline.json` 做棘轮：任一类超过基线即退出码 1 并指出疑似引入的提交；迁移脚本 `npm run visual:migrate` 可把字面量幂等改写成令牌。`ua audit:contrast` 走另一条线：把令牌里 16 组「文字色 × 底色」配对（正文/次级/辅助文字 × 页面底/表面/凹陷底、强调色与其反白、语义三色、禁用态豁免档）按 WCAG 公式算成对比度（支持 `color-mix` 与 `var()` 求值，半透明底先压到页面底色上），亮 / 暗 × 常规 / 高对比四套主题各算一遍，低于阈值（正文 7 / 常规 4.5 / 禁用 2.6）即退出码 1；`--json` 出逐对明细，`--list` 只列配对表。改任一颜色令牌后它会立刻告诉你「改完谁读不清了」，不必等人工目测暗色。`ua verify` 校验清单 ↔ 文档 ↔ 演示一致（docs.components 的 id 必须在 api.exports 有对应条目、props 必须带 n/t/d、每个文档字段名必须在组件实现源码里真实出现（改名后忘改文档会直接报错）、反向也校验 `src/types.ts` 里 `<组件>Props`（可用清单的 `propsType` 覆盖接口名，`false` 表示无入参）每个字段都在文档 props 表登记（新加字段忘了写文档会报错）、demo 锚点必须在 `apps/demo/main.ts` 中存在，且该组件必须被 demo 真实调用 `id(` / `id.`），检查皮肤包样式表无硬编码颜色（`#hex` 一律禁止，必须走 `--ua-*` 令牌）与令牌引用有效（`var(--ua-*)` 必须是 tokens.css 已定义或组件自设的变量）、核对每个 `--ua-color-*` 都在 `[data-theme='dark']` 里有覆盖值且暗色块没有凭空多出的变量名（新增颜色令牌漏写暗色值直接报错）、核对 `tokens.json` 的 `color` 键与 tokens.css 的 `--ua-color-*` 同名同值（名字按 camelCase → kebab 折算，亮色值与暗色值都比，双向查漏——只改一处时文档色板会凭空多/少一个令牌，过去只能靠人眼发现）、核对 `@keyframes` 没有「帧体完全相同但名字不同」的复制粘贴（同一段动效只该有一份声明，改名复制会让方向 / 时长各写各的，翻转态就出现过「朝反方向入场」），核对 README 的 `` 区块与「分组：」行都覆盖清单组件集合（漏写/多写/重复都报错），并交叉校验 backlog 的 done 条目与 `.ua/iterations.log` 的 done 留痕一一对应（另外查 backlog id 不重复、g 编号严格递增、同一 id 只有一条 done 留痕，且留痕 ts 带 +08:00、时间线不回退、不落在未来——都是过去手工插条目/手写时间戳踩过的坑）；配方还要求编号连续、每条都有代码块与要点，且代码块里至少认出一个已注册组件 id（拼错组件名时 `ua recipes` 会把它列成空组件表）。 +**门禁一条龙**：`npm run check` = build + demo + style + typecheck + smoke + index + verify + lint-iterations + audit:visual + audit:contrast + audit:motion，提交前必过。其中 `smoke` 是两段内核断言：`@ui-arch/frame` 14 条（信号读写与同值短路、effect 注销与条件分支重追踪、computed 链式派生、多订阅者扇出）+ `@ui-arch/table-core` 26 条（排序 / 筛选 / 分页 / 选择的派生管线 + setRows 换源与失效行剔除）；改内核语义前先跑它，别靠组件 demo 肉眼验。`ua audit:visual` 统计皮肤包里十四类硬编码视觉字面量（字号 / 动效时长 / 阴影 / 圆角 / 焦点环 / 内距 / 控件高度 / 字重 / 行高 / 层级 / 边框色 / 混色浓度 / transform 位移 / 焦点描边）并与 `.ua/visual-baseline.json` 做棘轮：任一类超过基线即退出码 1 并指出疑似引入的提交；迁移脚本 `npm run visual:migrate` 可把字面量幂等改写成令牌。`ua audit:contrast` 走另一条线：把令牌里 16 组「文字色 × 底色」配对（正文/次级/辅助文字 × 页面底/表面/凹陷底、强调色与其反白、语义三色、禁用态豁免档）按 WCAG 公式算成对比度（支持 `color-mix` 与 `var()` 求值，半透明底先压到页面底色上），亮 / 暗 × 常规 / 高对比四套主题各算一遍，低于阈值（正文 7 / 常规 4.5 / 禁用 2.6）即退出码 1；`--json` 出逐对明细，`--list` 只列配对表。改任一颜色令牌后它会立刻告诉你「改完谁读不清了」，不必等人工目测暗色。`ua audit:motion` 守的是动效面：扫描皮肤样式表里所有带 `infinite` 的动画，逐个核对它是否在 `prefers-reduced-motion: reduce` 块里被 `animation: none` 关掉——循环动画是前庭敏感用户的硬伤，漏一条整页就在抖（本轮就靠它抓出转圈与不确定态进度两处漏网）。`ua verify` 校验清单 ↔ 文档 ↔ 演示一致（docs.components 的 id 必须在 api.exports 有对应条目、props 必须带 n/t/d、每个文档字段名必须在组件实现源码里真实出现（改名后忘改文档会直接报错）、反向也校验 `src/types.ts` 里 `<组件>Props`（可用清单的 `propsType` 覆盖接口名，`false` 表示无入参）每个字段都在文档 props 表登记（新加字段忘了写文档会报错）、demo 锚点必须在 `apps/demo/main.ts` 中存在，且该组件必须被 demo 真实调用 `id(` / `id.`），检查皮肤包样式表无硬编码颜色（`#hex` 一律禁止，必须走 `--ua-*` 令牌）与令牌引用有效（`var(--ua-*)` 必须是 tokens.css 已定义或组件自设的变量）、核对每个 `--ua-color-*` 都在 `[data-theme='dark']` 里有覆盖值且暗色块没有凭空多出的变量名（新增颜色令牌漏写暗色值直接报错）、核对 `tokens.json` 的 `color` 键与 tokens.css 的 `--ua-color-*` 同名同值（名字按 camelCase → kebab 折算，亮色值与暗色值都比，双向查漏——只改一处时文档色板会凭空多/少一个令牌，过去只能靠人眼发现）、核对 `@keyframes` 没有「帧体完全相同但名字不同」的复制粘贴（同一段动效只该有一份声明，改名复制会让方向 / 时长各写各的，翻转态就出现过「朝反方向入场」），核对 README 的 `` 区块与「分组：」行都覆盖清单组件集合（漏写/多写/重复都报错），并交叉校验 backlog 的 done 条目与 `.ua/iterations.log` 的 done 留痕一一对应（另外查 backlog id 不重复、g 编号严格递增、同一 id 只有一条 done 留痕，且留痕 ts 带 +08:00、时间线不回退、不落在未来——都是过去手工插条目/手写时间戳踩过的坑）；配方还要求编号连续、每条都有代码块与要点，且代码块里至少认出一个已注册组件 id（拼错组件名时 `ua recipes` 会把它列成空组件表）。 `ua verify` 另外校验 `ITERATION.md` 的《视觉回归抽查清单》：button / textField / select / modal / dataTable / toast 六段各 ≥3 条可勾选要点、每条维度标签必须落在边框 / 阴影 / 过渡 / 焦点环 / 暗色五类内、合计 ≥18 条且五维度全覆盖——视觉类条目收尾前照单过一遍，改清单时别把条目删漏。 diff --git a/ITERATION.md b/ITERATION.md index f4d0902..14eb688 100644 --- a/ITERATION.md +++ b/ITERATION.md @@ -44,7 +44,7 @@ qa/probe ──门禁通过──▶ qa/stable ──人工审阅──▶ main 1. **同步**：`git fetch --all --prune`，切到 `qa/stable` 并 `git pull`；从其最新提交强制重建 `qa/probe` 并切换过去。 2. **选题**：读 `.ua/backlog.json`，先取 `status === "open"` 且 `domain === "visual"` 的条目（有多条取编号最小的一条）；没有视觉欠账时再按数组顺序取第一条 `status === "open"` 的条目；若全部关闭，按《选题规则》自行补充一条新点子后继续。 3. **实现**：按 `CODING.md` 编码规范实现，保持低侵入，单文件 < 200 行，涉及组件需同步 manifest/docs/llms-full.txt。 -4. **门禁**：跑 `npm run check`（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast）。 +4. **门禁**：跑 `npm run check`（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast → audit:motion）。 - **通过**：提交到 `qa/probe`，提交信息按 `COMMITTING.md` 规范（`iter(<条目id>): <中文祈使句>`，元数据变更用 `chore(backlog): 记录 完成`；commit-msg 钩子自动校验），推送 `qa/probe`，fast-forward 合并到 `qa/stable` 并推送；将 backlog 条目 `status` 置为 `done` 并随迭代提交。 - **失败**：尝试修复一次；仍失败则放弃本轮——`qa/probe` 直接重置回 `qa/stable`，backlog 条目在 `notes` 里追加失败原因、`status` 保持 `open`，提交并推送该元数据变更（仅改 `.ua/backlog.json`，不碰代码）。 5. **留痕**：在 `.ua/iterations.log` 追加一行 JSON，**字段统一**：`{"ts":"本地ISO时间","id":"条目id","result":"done|aborted","commit":"短哈希","summary":"一句话"}`。硬性规范：`ts` 必须来自 `date` 命令实测（本地时间，带 +08:00 偏移，**禁止手写或用 UTC 换算**）；时长结论必须来自两次时间查询之差，禁止使用「大约/接近」等估算词；并发实例格式不得自创变体。随本轮提交。`ua lint-iterations` 会把每行 `commit` 拿到 git 历史里回查：哈希必须真实存在、主题必须指向同一条目（`iter()`，早期无 scope 的 `iter: ` 也认），伪造或抄错哈希直接判违规。 diff --git a/README.md b/README.md index a24d12f..1ace61f 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ```bash pnpm install # 包间依赖用 workspace:*，npm 不支持 -npm run check # 门禁一条龙：build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast +npm run check # 门禁一条龙：build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast → audit:motion npm run demo # 打开演示：apps/demo/dist/demo.html npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全量文档 llms-full.txt npm run changelog # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移） diff --git a/llms-full.txt b/llms-full.txt index 07d9551..d2b28e6 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T14:05:23.913Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T14:07:27.545Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -40,14 +40,15 @@ ### @ui-arch/cli -1. 接手先跑 ua doctor（11 项：node / 依赖 / git 钩子与身份 / 元数据 / 命令面三方一致 / 门禁链完整，秒级），再跑 npm run check 确认基线全绿（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast） +1. 接手先跑 ua doctor（11 项：node / 依赖 / git 钩子与身份 / 元数据 / 命令面三方一致 / 门禁链完整，秒级），再跑 npm run check 确认基线全绿（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast → audit:motion） 2. 查组件：ua list 看全量，ua search <关键词> 按 id/标题/参数名/参数说明/步骤五层 + 配方三层（标题/配方组件/要点）模糊找（命中非 id 标题会标出命中字段，配方命中行直接给 ua recipes <编号> 指路；拼错会回相近 id），ua info <组件id> 看 props/步骤/示例（ua info <包名> 看单包 api 与约定，加 --json 出原始清单）；要给文档 / issue / 回复贴组件说明时加 --md，直接拿到标题 + 参数表 + 用法 + 示例的 Markdown 片段 3. 查配方：ua recipes 列全量（编号 / 标题 / 用到的组件），ua recipes <编号> 看骨架代码与要点（--json 给脚本用；MCP 里对应 list_recipes / get_recipe） 4. 查令牌：ua tokens 打印全部 --ua-* 变量（颜色带暗色值），--json 输出结构化数组；写样式前先查，禁止硬编码。令牌分十三组：颜色 / 混色浓度 / 圆角 / 间距 / 字号 / 字重行高 / 边框 / 阴影 / 动效 / 位移 / 焦点环 / 控件高度 / 层级，color-mix 混入浓度用 --ua-alpha-soft/tint/line/mid/strong/heavy，弹层阴影用 --ua-shadow-1..4，过渡用 --ua-duration-* + --ua-ease，transform 位移用 --ua-translate-*（负号 calc(-1 * var(...))），焦点环用 --ua-focus-ring(_inset) 5. 改完清单跑 npm run docs：同时刷新人类文档站与 llms-full.txt（Agent 首选喂料） 6. 改完样式跑 npm run audit:visual：各类硬编码计数不得高于 .ua/visual-baseline.json（棘轮只减不增）；字面量可用 npm run visual:migrate 幂等改写成令牌 7. 改完颜色令牌跑 npm run audit:contrast：16 组文字/底色配对在亮/暗 × 常规/高对比四套主题下都必须达标（正文 7 / 常规 4.5 / 禁用 2.6），跌破即退出码 1——调一个色值就能让全站辅助文字掉到 4.4，人眼看不出但门禁看得出 -8. 在 ~/.workbuddy/mcp.json 注册 ua mcp 后，Agent 可直接调 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe +8. 改完动效跑 npm run audit:motion：带 infinite 的动画必须在 prefers-reduced-motion 块里被关掉，缺一条即退出码 1——循环动画漏兜底会把「减少动效」用户整页交给抖动 +9. 在 ~/.workbuddy/mcp.json 注册 ua mcp 后，Agent 可直接调 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe ## @ui-arch/ui（skin-dom）v0.1.0 @@ -2352,12 +2353,13 @@ API 速览： - ua commit-lint <文件|message>：提交信息门禁（type 枚举 / scope 规则 / subject 中文祈使 ≤50 字符），规范见 COMMITTING.md，违规退出码 1 - ua audit:visual [--json|--baseline]：视觉漂移门禁，统计皮肤包里各类硬编码视觉字面量（字号/动效时长/阴影/圆角/焦点环/内距/控件高度/字重/行高/层级/边框色）并与 .ua/visual-baseline.json 棘轮比对，超基线退出码 1；--baseline 重写基线，--json 出机器可读计数与每类命中行号（line / prop / value / hint，Agent 可直接定位） - ua audit:contrast [--json|--list]：对比度门禁，把令牌里 16 组「文字色 × 底色」配对按 WCAG 公式算成对比度（求值支持 var() 与 color-mix，半透明底先压到页面底色），亮/暗 × 常规/高对比四套分算，低于阈值（正文 7 / 常规 4.5 / 禁用 2.6）退出码 1；--json 出逐对明细，--list 只列配对表 +- ua audit:motion [--json]：动效兜底门禁，扫描皮肤样式表里带 infinite 的动画，逐个核对是否在 prefers-reduced-motion 块里 animation: none，缺兜底退出码 1（--json 出逐条明细） - ua mcp：零依赖 stdio MCP server，暴露 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe 一行用法： ``` -node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / doctor +node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|audit:motion|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / audit:motion / doctor ``` 约定： diff --git a/llms.txt b/llms.txt index 2785bde..99de98a 100644 --- a/llms.txt +++ b/llms.txt @@ -146,8 +146,9 @@ - ua commit-lint <文件|message>：提交信息门禁（type 枚举 / scope 规则 / subject 中文祈使 ≤50 字符），规范见 COMMITTING.md，违规退出码 1 - ua audit:visual [--json|--baseline]：视觉漂移门禁，统计皮肤包里各类硬编码视觉字面量（字号/动效时长/阴影/圆角/焦点环/内距/控件高度/字重/行高/层级/边框色）并与 .ua/visual-baseline.json 棘轮比对，超基线退出码 1；--baseline 重写基线，--json 出机器可读计数与每类命中行号（line / prop / value / hint，Agent 可直接定位） - ua audit:contrast [--json|--list]：对比度门禁，把令牌里 16 组「文字色 × 底色」配对按 WCAG 公式算成对比度（求值支持 var() 与 color-mix，半透明底先压到页面底色），亮/暗 × 常规/高对比四套分算，低于阈值（正文 7 / 常规 4.5 / 禁用 2.6）退出码 1；--json 出逐对明细，--list 只列配对表 + - ua audit:motion [--json]：动效兜底门禁，扫描皮肤样式表里带 infinite 的动画，逐个核对是否在 prefers-reduced-motion 块里 animation: none，缺兜底退出码 1（--json 出逐条明细） - ua mcp：零依赖 stdio MCP server，暴露 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe -- 用法: `node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / doctor` +- 用法: `node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|audit:motion|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / audit:motion / doctor` - 约定: 零依赖：只用 node 标准库，Node >= 18 - 约定: 清单是单一来源：代码注释、文档站、llms-full.txt、MCP 全部从 ua.manifest.json 派生 - 约定: 门禁只增不改：新增校验必须能被人手复现，报错要指出文件与字段 diff --git a/package.json b/package.json index dda3cc4..d165d92 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "style": "node packages/tools/cli/bin/ua.js style", "index": "node packages/tools/cli/bin/ua.js index", "docs": "node packages/tools/cli/bin/ua.js index && node packages/tools/cli/bin/ua.js docs", - "check": "npm run build && npm run demo && npm run style && npm run typecheck && npm run smoke && npm run index && npm run verify && npm run lint-iterations && npm run audit:visual && npm run audit:contrast", + "check": "npm run build && npm run demo && npm run style && npm run typecheck && npm run smoke && npm run index && npm run verify && npm run lint-iterations && npm run audit:visual && npm run audit:contrast && npm run audit:motion", "ua": "node packages/tools/cli/bin/ua.js", "verify": "node packages/tools/cli/bin/ua.js verify", "lint-iterations": "node packages/tools/cli/bin/ua.js lint-iterations", @@ -21,7 +21,8 @@ "changelog": "node packages/tools/cli/bin/ua.js changelog", "changelog:check": "node packages/tools/cli/bin/ua.js changelog --check", "sync-counts": "node packages/tools/cli/bin/ua.js sync-counts", - "audit:contrast": "node packages/tools/cli/bin/ua.js audit:contrast" + "audit:contrast": "node packages/tools/cli/bin/ua.js audit:contrast", + "audit:motion": "node packages/tools/cli/bin/ua.js audit:motion" }, "devDependencies": { "typescript": "^5.6.0" diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index c42172c..141d84c 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -5283,3 +5283,15 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } max-width: 100%; overflow-wrap: anywhere; } + +/* ---- 减少动效补充兜底：转圈与不确定态进度是仅有的两处漏网无限动画 ---- + 放在文件末尾：与既有 prefers-reduced-motion 清单同序，后置胜出即可压住源码序更早的 animation 声明 */ +@media (prefers-reduced-motion: reduce) { + .ua-spinner { + animation: none; /* 转圈停下：保留缺角静态环，仍看得出是「加载中」而不是坏图标 */ + } + .ua-progress-fill.ua-indeterminate { + animation: none; + width: 100%; /* 不确定态降级为满宽淡条：不再左右扫，语义仍是「进行中」 */ + } +} diff --git a/packages/tools/cli/bin/ua.js b/packages/tools/cli/bin/ua.js index fc3c84f..108cccb 100644 --- a/packages/tools/cli/bin/ua.js +++ b/packages/tools/cli/bin/ua.js @@ -7,6 +7,7 @@ import { spawnSync } from 'node:child_process'; import { visualAudit } from '../lib/visual-audit.mjs'; import { auditContrast, formatReport, PAIRS } from '../lib/contrast-audit.mjs'; import { shellPalette } from '../lib/shell-palette.mjs'; +import { auditMotion, formatMotionReport } from '../lib/motion-audit.mjs'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); @@ -1625,6 +1626,25 @@ function cmdAuditContrast(args) { process.exit(result.failures.length === 0 ? 0 : 1); } +/*** 动效兜底审计：带 infinite 的动画必须在 prefers-reduced-motion 下被显式关掉（--json 出明细） + * 只盯无限循环动画：有限时长的过渡不会持续刺激，把它也纳入只会让门禁变吵而没人看。 + */ +function cmdAuditMotion(args) { + let result; + try { + result = auditMotion(ROOT); + } catch (err) { + console.error(`audit:motion 失败：${err.message}`); + process.exit(1); + } + if (args.includes('--json')) { + console.log(JSON.stringify({ ok: result.gaps.length === 0, total: result.total, failing: result.gaps.length, entries: result.entries }, null, 2)); + } else { + console.log(formatMotionReport(result)); + } + process.exit(result.gaps.length === 0 ? 0 : 1); +} + /*** 迭代留痕校验：.ua/iterations.log 每行 JSON 字段与格式必须符合 ITERATION.md 规范 ***/ function cmdLintIterations() { const file = path.join(INDEX_DIR, 'iterations.log'); @@ -1722,7 +1742,7 @@ function cmdDoctor() { detail: [missingInUsage.length ? `usage 缺 ${missingInUsage.join('/')}` : '', missingInCode.length ? `实现缺 ${missingInCode.join('/')}` : ''].filter(Boolean).join('；'), }); // 门禁链自检：package.json 的 check 必须跑齐所有门禁步骤（新增门禁忘了接进链等于没加） - const needSteps = ['build', 'demo', 'style', 'typecheck', 'smoke', 'index', 'verify', 'lint-iterations', 'audit:visual', 'audit:contrast']; + const needSteps = ['build', 'demo', 'style', 'typecheck', 'smoke', 'index', 'verify', 'lint-iterations', 'audit:visual', 'audit:contrast', 'audit:motion']; const chain = String(JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf8')).scripts?.check ?? ''); const lacking = needSteps.filter((step) => !chain.includes(`npm run ${step}`)); checks.push({ name: 'check 链覆盖全部门禁步骤', pass: !lacking.length, detail: lacking.length ? `缺 ${lacking.join(' / ')}` : '' }); @@ -1798,10 +1818,13 @@ switch (cmd) { case 'audit:contrast': cmdAuditContrast(args); break; + case 'audit:motion': + cmdAuditMotion(args); + break; case 'mcp': cmdMcp(); break; default: - console.log('usage: ua |info [--json|--md]|recipes [编号] [--json]|docs|tokens [--json]|style|sync-counts|verify|doctor|commit-lint|lint-iterations|audit:visual [--json|--baseline]|audit:contrast [--json|--list]|changelog|mcp>'); + console.log('usage: ua |info [--json|--md]|recipes [编号] [--json]|docs|tokens [--json]|style|sync-counts|verify|doctor|commit-lint|lint-iterations|audit:visual [--json|--baseline]|audit:contrast [--json|--list]|audit:motion [--json]|changelog|mcp>'); process.exit(cmd ? 1 : 0); } diff --git a/packages/tools/cli/lib/motion-audit.mjs b/packages/tools/cli/lib/motion-audit.mjs new file mode 100644 index 0000000..c107d9f --- /dev/null +++ b/packages/tools/cli/lib/motion-audit.mjs @@ -0,0 +1,70 @@ +/*** @ui-arch 动效兜底审计：带 `infinite` 的动画必须在 prefers-reduced-motion 下被显式关掉 + * + * 为什么单独成门禁：`audit:visual` 只管字面量、`verify` 只管「动效时长走令牌」，没人管「无限循环动画有没有降级」。 + * 循环动画（转圈、扫光、进度条流纹、时间线脉冲）是前庭敏感用户的硬伤，漏一条就等于把整页交给抖动； + * 有限时长的过渡（hover 上浮之类）危害小得多，不在本门禁范围——只盯 infinite 才有明确可执行的判定。 + */ +import fs from 'node:fs'; +import path from 'node:path'; + +/*** 作用：被审计的样式表相对仓库根的路径 ***/ +const CSS_REL = 'packages/skin/ui/ui.css'; + +/*** 作用：极简 CSS 规则扫描器——按大括号层级切出 { 选择器, 规则体, 是否在减少动效媒体块内 }（尾缓冲在 ; 与 } 处清空，遇 { 即为选择器） ***/ +export function scanRules(css) { + const rules = []; + const stack = []; + let tail = ''; // 当前块内自上个 ; 或 } 以来的文本：遇 { 即为选择器 + const clean = (text) => text.replace(/\/\*[\s\S]*?\*\//g, '').trim(); // 剥掉前导注释再比对 + for (const ch of css) { + if (ch === '{') { + const prelude = clean(tail); + stack.push({ prelude, reduced: prelude.startsWith('@media') && /prefers-reduced-motion/.test(prelude), body: '' }); + tail = ''; + continue; + } + if (ch === '}') { + const frame = stack.pop(); + if (!frame) { tail = ''; continue; } + const parentReduced = stack.length ? stack[stack.length - 1].reduced : false; + if (frame.prelude && !frame.prelude.startsWith('@')) { + rules.push({ selector: frame.prelude, body: frame.body, reduced: frame.reduced || parentReduced }); + } + tail = ''; + continue; + } + if (stack.length) stack[stack.length - 1].body += ch; + tail += ch; + if (ch === ';') tail = ''; + } + return rules; +} + +/*** 作用：拆选择器组（`.a, .b` → 两项），去掉伪元素后缀，便于与降级块里的写法对齐 ***/ +const splitSelectors = (selector) => selector.split(',').map((s) => s.trim().replace(/::?(before|after)/g, '')).filter(Boolean); + +/*** 作用：跑一遍审计：返回无限动画清单与缺口（有 animation 声明但没在降级块里关掉的） ***/ +export function auditMotion(root) { + const file = path.join(root, CSS_REL); + if (!fs.existsSync(file)) throw new Error(`找不到 ${CSS_REL}`); + const css = fs.readFileSync(file, 'utf8').replace(/\r\n/g, '\n'); + const rules = scanRules(css); + // 无限动画：动画名后面带 infinite（本项目写法固定，正则认出关键片段即可） + const infinite = rules.filter((r) => !r.reduced && /animation\s*:[^;]*\binfinite\b/.test(r.body)); + // 降级：减少动效块里把动画关掉的规则（animation: none 或 duration 归零两种写法都算达标） + const offline = new Set( + rules.filter((r) => r.reduced && /animation\s*:\s*none|animation-duration\s*:\s*0/.test(r.body)) + .flatMap((r) => splitSelectors(r.selector)), + ); + const entries = infinite.flatMap((r) => splitSelectors(r.selector).map((selector) => ({ selector, covered: offline.has(selector) }))); + return { total: entries.length, entries, gaps: entries.filter((e) => !e.covered) }; +} + +/*** 作用：把审计结果打成文本表（人读模式） ***/ +export function formatMotionReport({ entries, gaps }) { + const lines = ['无限动画的减少动效兜底：']; + for (const e of entries) lines.push(` ${e.covered ? 'OK ' : 'MISS'} ${e.selector}`); + lines.push(''); + lines.push(gaps.length ? `缺兜底 ${gaps.length} 处：${gaps.map((g) => g.selector).join(' / ')}` : `全部 ${entries.length} 处无限动画都有 prefers-reduced-motion 兜底`); + return lines.join('\n'); +} diff --git a/packages/tools/cli/ua.manifest.json b/packages/tools/cli/ua.manifest.json index 35d6d0e..1b6490a 100644 --- a/packages/tools/cli/ua.manifest.json +++ b/packages/tools/cli/ua.manifest.json @@ -22,6 +22,7 @@ "ua commit-lint <文件|message>：提交信息门禁（type 枚举 / scope 规则 / subject 中文祈使 ≤50 字符），规范见 COMMITTING.md，违规退出码 1", "ua audit:visual [--json|--baseline]：视觉漂移门禁，统计皮肤包里各类硬编码视觉字面量（字号/动效时长/阴影/圆角/焦点环/内距/控件高度/字重/行高/层级/边框色）并与 .ua/visual-baseline.json 棘轮比对，超基线退出码 1；--baseline 重写基线，--json 出机器可读计数与每类命中行号（line / prop / value / hint，Agent 可直接定位）", "ua audit:contrast [--json|--list]：对比度门禁，把令牌里 16 组「文字色 × 底色」配对按 WCAG 公式算成对比度（求值支持 var() 与 color-mix，半透明底先压到页面底色），亮/暗 × 常规/高对比四套分算，低于阈值（正文 7 / 常规 4.5 / 禁用 2.6）退出码 1；--json 出逐对明细，--list 只列配对表", + "ua audit:motion [--json]：动效兜底门禁，扫描皮肤样式表里带 infinite 的动画，逐个核对是否在 prefers-reduced-motion 块里 animation: none，缺兜底退出码 1（--json 出逐条明细）", "ua mcp：零依赖 stdio MCP server，暴露 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe" ], "keyTypes": [ @@ -29,7 +30,7 @@ "MCP tool 入参 schema" ] }, - "usage": "node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / doctor", + "usage": "node packages/tools/cli/bin/ua.js [--json|--md]|docs|tokens|style|verify|commit-lint|audit:visual|audit:contrast|audit:motion|doctor|mcp>；仓库内等价于 npm run index / docs / style / verify / audit:visual / audit:contrast / audit:motion / doctor", "conventions": [ "零依赖：只用 node 标准库，Node >= 18", "清单是单一来源：代码注释、文档站、llms-full.txt、MCP 全部从 ua.manifest.json 派生", @@ -38,13 +39,14 @@ "docs": { "intro": "工程层工具包（private，不发布）。所有 Agent 与人都通过它读取组件库：清单驱动索引、文档、MCP 三件套，外加 style / verify 两道门禁。", "steps": [ - "接手先跑 ua doctor（11 项：node / 依赖 / git 钩子与身份 / 元数据 / 命令面三方一致 / 门禁链完整，秒级），再跑 npm run check 确认基线全绿（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast）", + "接手先跑 ua doctor（11 项：node / 依赖 / git 钩子与身份 / 元数据 / 命令面三方一致 / 门禁链完整，秒级），再跑 npm run check 确认基线全绿（build → demo → style → typecheck → smoke → index → verify → lint-iterations → audit:visual → audit:contrast → audit:motion）", "查组件：ua list 看全量，ua search <关键词> 按 id/标题/参数名/参数说明/步骤五层 + 配方三层（标题/配方组件/要点）模糊找（命中非 id 标题会标出命中字段，配方命中行直接给 ua recipes <编号> 指路；拼错会回相近 id），ua info <组件id> 看 props/步骤/示例（ua info <包名> 看单包 api 与约定，加 --json 出原始清单）；要给文档 / issue / 回复贴组件说明时加 --md，直接拿到标题 + 参数表 + 用法 + 示例的 Markdown 片段", "查配方：ua recipes 列全量（编号 / 标题 / 用到的组件），ua recipes <编号> 看骨架代码与要点（--json 给脚本用；MCP 里对应 list_recipes / get_recipe）", "查令牌：ua tokens 打印全部 --ua-* 变量（颜色带暗色值），--json 输出结构化数组；写样式前先查，禁止硬编码。令牌分十三组：颜色 / 混色浓度 / 圆角 / 间距 / 字号 / 字重行高 / 边框 / 阴影 / 动效 / 位移 / 焦点环 / 控件高度 / 层级，color-mix 混入浓度用 --ua-alpha-soft/tint/line/mid/strong/heavy，弹层阴影用 --ua-shadow-1..4，过渡用 --ua-duration-* + --ua-ease，transform 位移用 --ua-translate-*（负号 calc(-1 * var(...))），焦点环用 --ua-focus-ring(_inset)", "改完清单跑 npm run docs：同时刷新人类文档站与 llms-full.txt（Agent 首选喂料）", "改完样式跑 npm run audit:visual：各类硬编码计数不得高于 .ua/visual-baseline.json（棘轮只减不增）；字面量可用 npm run visual:migrate 幂等改写成令牌", "改完颜色令牌跑 npm run audit:contrast：16 组文字/底色配对在亮/暗 × 常规/高对比四套主题下都必须达标（正文 7 / 常规 4.5 / 禁用 2.6），跌破即退出码 1——调一个色值就能让全站辅助文字掉到 4.4，人眼看不出但门禁看得出", + "改完动效跑 npm run audit:motion：带 infinite 的动画必须在 prefers-reduced-motion 块里被关掉，缺一条即退出码 1——循环动画漏兜底会把「减少动效」用户整页交给抖动", "在 ~/.workbuddy/mcp.json 注册 ua mcp 后，Agent 可直接调 list_components / get_component / search_components / get_tokens / list_recipes / get_recipe" ], "components": []