e8b8ad079e
框架切换：Next.js 16 → Vite 5 + React 19 + React Router 7 状态管理：7 手写 hook → 4 Zustand slice 数据获取：直接 fetch → TanStack Query 5 (15 hooks) 表单：3-step 状态机 → RHF 7 + Zod 测试：0 → 25 单测 + 20 e2e (4 浏览器) Bundle：192 KB gzip (目标 < 300 KB) Lint：49 warning → 0 warning Type：33 any → 0 any S2-T-01 切 Vite 5 + React 19 框架 S2-T-02 Zustand 4 slice 替代 7 手写 hook S2-T-03 TanStack Query 5 + 15 hooks S2-T-04 Vitest + RTL + MSW + Chromatic 配置 S2-T-05 OpenAPI Codegen + Zod schema 复用 S2-T-06 RHF 7 + Zod 重写 FormCard S2-T-07 Playwright 视觉基线 4 浏览器 5 spec S2-T-08 Vite build + bundle < 300KB gzip G1 闸门 (全部通过)： - typecheck: 0 error - lint: 0 error 0 warning - test (Vitest): 25/25 passed - test:e2e (Playwright): 20/20 passed - build (Vite): 326 modules 4.14s - codegen:check: OpenAPI types 非占位 Sprint 2 收口报告：SPRINT_2_CLOSEOUT_2026-07-03.md
7.3 KiB
7.3 KiB
Sprint 6 任务拆解（W10-11 · 12 人天 · 56 子任务）— V10 选项 B
技术栈：Vite 5 + React 19 + Zustand 4 + TanStack Query 5 + RHF 7 + Zod 目标：查询/审核业务 UI（SharePanel / DataQueryForm / ReviewFlow / LLMEnhancement / PosterPreview） 闸门：G6（视觉一致性 design pass + Chromatic 0 像素 diff） V10 变化：保持 12d（S6 是业务密集型，工时难压） PM 决策（2026-07-03）：整体重写为新实现；Playwright 视觉回归 + Chromatic 验收
⚠️ V10 关键变化（与 V2 对比）
| 维度 | V2 | V10 选项 B |
|---|---|---|
| DataQueryForm 4 变体 | 1.0d | 1.0d（不变） |
| DataQueryResult 4 变体 | 1.0d | 1.0d（不变） |
| 业务组件库 | 7 | 7（不变） |
| a11y 集成 | S6 末 | S5 已完成，S6 复用 |
| 总估时 | 11d | 12d（略增：加 1d Chromatic 验证） |
0. Sprint 6 概览
| 任务 | 主任务 | 估时 | 子任务数 |
|---|---|---|---|
| T-D-11 | axe-core 集成（复用 S5） | 0d | 0 |
| T-D-12 | 屏幕阅读器 + 键盘测试 | 0.5d | 3 |
| T-D-13 | 替换 alert() 为 Toast | 0.25d | 2 |
| T-D-14 | SharePanel 组件 | 0.75d | 5 |
| T-D-15 | ShareStatusPanel 组件 | 0.5d | 4 |
| T-D-16 | DataQueryForm（4 变体） | 1.0d | 6 |
| T-D-17 | DataQueryResult（4 变体） | 1.0d | 6 |
| T-D-18 | ReviewFlow 组件 | 0.75d | 4 |
| T-D-19 | LLMEnhancement 组件 | 0.75d | 4 |
| T-D-20 | PosterPreview 组件 | 0.5d | 4 |
| T-D-21 | 暗色变体审计 | 1.0d | 4 |
| T-D-22 | Chromatic 视觉回归（S6 增量） | 1.0d | 4 |
| T-D-23 | ESLint 0 warning 守门 | 0.5d | 3 |
| 合计 | 13 任务（含 1 复用） | 9.5d + 缓冲 2.5d = 12d | 49 |
T-D-11 · axe-core 集成（复用 S5 · 0d · 0 子任务）
V10 收益：Sprint 5 已集成，S6 直接复用
T-D-12 · 屏幕阅读器 + 键盘测试（0.5d · 3 子任务）
ST-S6-D-12.1 VoiceOver 测试（0.25d）
- 覆盖：5 业务组件关键路径
ST-S6-D-12.2 NVDA 测试（0.125d）
ST-S6-D-12.3 键盘导航测试（0.125d）
- 覆盖：Tab / Shift+Tab / Enter / Esc / 方向键
T-D-13 · 替换 alert() 为 Toast（0.25d · 2 子任务）
ST-S6-D-13.1 grep + 替换（0.125d）
- 命令：
grep -rn "alert(" apps/web/src/ - 替换：
toast.error(message)/toast.success(message)
ST-S6-D-13.2 验证无 alert() 残留（0.125d）
T-D-14 · SharePanel 组件（0.75d · 5 子任务）
ST-S6-D-14.1 写组件骨架（0.25d）
- V10 集成：RHF + Zod
- UI/交互 1:1：与原型分享面板一致
ST-S6-D-14.2 写表单字段（0.125d）
- 分享链接有效期（7/30/永久）
- 访问密码
- 备注
ST-S6-D-14.3 接入 useShareLinkCreate（0.125d）
ST-S6-D-14.4 写 story（0.125d）
ST-S6-D-14.5 写 e2e（0.125d）
T-D-15 · ShareStatusPanel 组件（0.5d · 4 子任务）
ST-S6-D-15.1 写 3 统计卡片（0.125d）
ST-S6-D-15.2 写访问趋势 mini chart（0.125d）
ST-S6-D-15.3 写 story（0.125d）
ST-S6-D-15.4 写 e2e（0.125d）
T-D-16 · DataQueryForm（4 变体 · 1.0d · 6 子任务）
ST-S6-D-16.1 写 scoreLine 变体（0.125d）
- 字段：省份 / 年份 / 类型
ST-S6-D-16.2 写 rankEstimator 变体（0.125d）
- 字段：位次 / 选科 / 年份
ST-S6-D-16.3 写 majors 变体（0.125d）
- 字段：专业类 / 学历 / 院校
ST-S6-D-16.4 写 schools 变体（0.125d）
- 字段：院校 / 省份 / 类型
ST-S6-D-16.5 接入 TanStack Query mutations（0.25d）
- V10 收益：4 变体复用同一表单骨架
ST-S6-D-16.6 写 story（0.25d）
T-D-17 · DataQueryResult（4 变体 · 1.0d · 6 子体）
ST-S6-D-17.1 写 scoreLine 变体（0.125d）
- 展示：分数段分布表 + chart
ST-S6-D-17.2 写 rankEstimator 变体（0.125d）
- 展示：等效分数 + 院校推荐
ST-S6-D-17.3 写 majors 变体（0.125d）
- 展示：专业列表 + 院校
ST-S6-D-17.4 写 schools 变体（0.125d）
- 展示：院校卡片
ST-S6-D-17.5 接入虚拟滚动（0.25d）
- V10 收益：TanStack Virtual 万行流畅
ST-S6-D-17.6 写 story（0.25d）
T-D-18 · ReviewFlow 组件（0.75d · 4 子任务）
ST-S6-D-18.1 写审核步骤指示器（0.25d）
- V10 集成：复用 S5-D-13 Stepper
ST-S6-D-18.2 写审核表单（RHF 版 · 0.25d）
- 字段：审批意见 / 风险等级 / 备注
ST-S6-D-18.3 接入 useReview* hooks（0.125d）
ST-S6-D-18.4 写 story + e2e（0.125d）
T-D-19 · LLMEnhancement 组件（0.75d · 4 子任务）
ST-S6-D-19.1 写 Provider 选择器（0.25d）
- V10 集成：复用 T-B-17 LLM provider
ST-S6-D-19.2 写流式结果展示（0.25d）
- V10 集成：SSE + Markdown 渲染
ST-S6-D-19.3 接入 useAuditEnhanceMutation（0.125d）
ST-S6-D-19.4 写 story + e2e（0.125d）
T-D-20 · PosterPreview 组件（0.5d · 4 子任务）
ST-S6-D-20.1 写海报渲染（0.125d）
- V10 集成：html2canvas
ST-S6-D-20.2 写 QR Code 嵌入（0.125d）
ST-S6-D-20.3 接入 usePosterGenerateMutation（0.125d）
ST-S6-D-20.4 写 story + e2e（0.125d）
T-D-21 · 暗色变体审计（1.0d · 4 子任务）⚠️ V10 关键
ST-S6-D-21.1 截图所有 7 业务组件 dark mode（0.25d）
ST-S6-D-21.2 Chromatic diff 检测（0.25d）
- 验收：0 像素 diff
ST-S6-D-21.3 修复对比度问题（0.25d）
- 目标：WCAG AA（4.5:1）
ST-S6-D-21.4 提交 Chromatic 基线（0.25d）
T-D-22 · Chromatic 视觉回归（S6 增量 · 1.0d · 4 子任务）⚠️ V10 新增
ST-S6-D-22.1 7 业务组件 × 3 主题（0.25d）
- light / dark / system × 7 组件 = 21 截图
ST-S6-D-22.2 移动端 viewport（0.25d）
- 375px / 768px / 1024px × 7 组件 = 21 截图
ST-S6-D-22.3 交互态截图（0.25d）
- hover / focus / active / disabled / loading / error
ST-S6-D-22.4 提交基线（0.25d）
T-D-23 · ESLint 0 warning 守门（0.5d · 3 子任务）
ST-S6-D-23.1 清理 S6 引入的 any（0.25d）
ST-S6-D-23.2 清理 S6 引入的 unused（0.125d）
ST-S6-D-23.3 守住 Sprint 1-5 已修复规则（0.125d）
V10 验收清单（Sprint 6 G6 闸门）
G6 闸门（必须全部通过）：
[ ] 7 业务组件全部完成 + story 全覆盖
[ ] axe-core 0 critical 0 serious
[ ] pnpm typecheck 0 error 0 any
[ ] pnpm lint 0 error 0 warning
[ ] pnpm test:storybook 全绿
[ ] pnpm chromatic 视觉基线 7 组件 × 3 主题 × 3 viewport × 6 态 = 378 截图
[ ] WCAG AA 对比度全通过
[ ] DataQueryForm 万行结果 < 200ms 渲染
V10 风险（Sprint 6 特有）
| ID | 风险 | 等级 | 缓解 |
|---|---|---|---|
| V10-S6-R1 | 4 变体 DataQueryForm 代码重复 | 中 | 提取 <QueryForm variant=...> 单一组件 |
| V10-S6-R2 | 暗色变体对比度不达标 | 中 | 用 design token 强制；S6-D-21 强制审计 |
| V10-S6-R3 | Chromatic 配额超限 | 低 | 累计 S2-S5 用 4 次，剩 6 次给 S6-S8 |
Sprint 6 文档状态：V10 选项 B 重写完成 总工时：12 人天（V2 是 11 人天，+1d Chromatic 验证） 总子任务：49 个（V2 是 55 个） 下一步：Sprint 5 完成后立即启动