64 lines
3.5 KiB
Markdown
64 lines
3.5 KiB
Markdown
# 任务书 · 图标与轻量动效审计（2026-09-22）
|
||
|
||
## 0. 基线与依赖
|
||
|
||
- 基线 commit：`1bc6a954c597e2817fe72bfedad93119ab19a527`；开工前 fetch 并重核最新 `origin/staging`。
|
||
- 执行分支：`codex/icon-motion-audit-20260922`；工作树：`.worktrees/icon-motion-audit-20260922`。
|
||
- P2 可选任务，依赖首页入口弱边框的状态合同，但不阻塞星盘、聊天人物、报告和首屏可靠性。
|
||
- 与 `TASK-starter-entry-soften-20260922.md` 串行：先完成入口弱边框的 CSS/状态合同，再审计同一批入口；不得并行修改 `starter-home.tsx` 或相关 CSS。与人物选择器的首页组件改动也须遵守仓库的串行纪律。
|
||
|
||
## 1. 会议事实与现状
|
||
|
||
业务提出常见星星图标辨识度一般，可探索月亮、月相、线条感图案；也明确没有合适方案可以暂不更换。业务认可轻量、可爱、扁平化动效，但要求支持阅读和思考，不要炫目。
|
||
|
||
调查确认现有基础已较完整：Lucide、planet glyph、InlineSpinner、shimmer、onboarding/dialog 动效和 `prefers-reduced-motion` 均已存在；DESIGN 已有按钮/row/popover/tooltip/dialog/消息进入时长约束，且禁止恢复 `thinking-orbs` 或新增多套 loading。
|
||
|
||
## 2. 决策记录
|
||
|
||
- 本轮先做库存和合同审计，不强行换掉星星图标；只有有明确辨识度、语义、对比度和移动端预算的方案才可进入小改。
|
||
- 图标优先复用 Lucide 和既有 planet glyph；brand mark 保持静态。
|
||
- 动效只允许既有 120ms/160ms/180ms 预算和 `transform`/`opacity`/颜色/filter；非 active loading 不新增循环动画。
|
||
- `prefers-reduced-motion` 下移除或降级非必要动画。
|
||
|
||
## 3. 硬红线
|
||
|
||
1. 不全站替换图标，不新增第二套 composer、滚动跟随或 loading 动画。
|
||
2. 不为了视觉通过修改业务状态、等待逻辑或隐藏错误。
|
||
3. 装饰图标必须 `aria-hidden`；语义图标必须有可访问名称，不能只靠颜色表达状态。
|
||
4. 不升级依赖，不改无关页面，不引入外部图标包。
|
||
|
||
## 4. 任务分解与验收标准
|
||
|
||
### T1 · 图标/动效库存表
|
||
|
||
盘点首页入口、聊天 header、popover、按钮、报告、星盘 glyph 和 loading 相关实现，标记来源、语义、状态和调用方；识别无调用旧样式，但不在本轮删除无关代码。
|
||
|
||
### T2 · 合同审计
|
||
|
||
检查动效时长、允许属性、循环动画、reduced-motion、键盘/触屏、44px 目标和图标文字空间；必要时补源码合同或可访问性测试，不把截图差异当作唯一证据。
|
||
|
||
### T3 · 可选小改
|
||
|
||
只有 T1/T2 证明某个图标明显影响识别且存在低风险方案时，才替换单个入口图标；同步 DESIGN/CHANGELOG 和测试。没有合适方案则只交付审计记录，不改图标。
|
||
|
||
## 5. 让步顺序
|
||
|
||
T1 > T2 > T3。预算不足时只做库存和合同，禁止为“看起来有变化”强行换图标或加动画。
|
||
|
||
## 6. 开工前置命令
|
||
|
||
```bash
|
||
git status -sb
|
||
git fetch origin --prune
|
||
git worktree add -b codex/icon-motion-audit-20260922 .worktrees/icon-motion-audit-20260922 origin/staging
|
||
cd .worktrees/icon-motion-audit-20260922/frontend
|
||
./node_modules/.bin/tsc --noEmit
|
||
npm run lint
|
||
npm test
|
||
npm run build
|
||
```
|
||
|
||
## 7. 记录与验收
|
||
|
||
写 `docs/tasks/PROGRESS-icon-motion-audit-20260922.md`；若只完成审计，明确写“未换图标、未新增动效”。涉及 UI 时更新 `frontend/DESIGN.md`；浏览器级 reduced-motion/屏幕阅读器验收缺环境则写 `docs/testing/`，不得宣称通过。
|