Jyotisha/docs/tasks/TASK-icon-motion-audit-20260922.md

任务书 · 图标与轻量动效审计（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. 开工前置命令

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/，不得宣称通过。