Files
gaokao-volunteer-system/SPRINT_7_S7_A11Y_PORTAL.md
Frontend Developer e8b8ad079e feat(sprint-2): V10 选项 B 完整切换 + G1 闸门通过
框架切换: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
2026-07-03 15:51:03 +08:00

7.4 KiB
Raw Blame History

Sprint 7 任务拆解W12-13 · 9 人天 · 48 子任务)— V10 选项 B

技术栈Vite 5 + React 19 + Zustand 4 + TanStack Query 5 + RHF 7 + Zod 目标i18n + 5 内部页(登录/Dashboard/布局/错误/权限)+ 4 订单案例 闸门G6.1生产可发版验收i18n 全 / Lighthouse 95 / a11y 0 critical V10 变化:从 10d 缩到 9d节省 1d = axe-core S5 已完成 + i18n 用 react-intl 简化) PM 决策2026-07-03整体重写为新实现Playwright 视觉回归 + Chromatic 验收


⚠️ V10 关键变化(与 V2 对比)

维度 V2 V10 选项 B
i18n 库 next-intlNext.js 专用) react-intl 7Vite 友好)
权限守卫 Next.js middleware 手写 RequireAuthVite 友好)
路由 Next.js App Router React Router 7Vite 友好)
总估时 10d 9d

0. Sprint 7 概览

任务 主任务 估时 子任务数
T-D-22 react-intl 接入 1.0d 4
T-D-23 文案审计(中/英双语) 0.5d 3
T-D-24 Chromatic + Lighthouse 收口 1.0d 4
T-E-01 登录页 /admin/login 0.5d 3
T-E-02 Dashboard /admin 1.0d 4
T-E-03 Layout /admin shared 0.5d 3
T-E-04 错误兜底 /admin/error 0.25d 2
T-E-05 权限守卫 <RequireAuth> 0.5d 3
T-E-06 订单列表 0.75d 3
T-E-07 订单详情 1.0d 4
T-E-08 案例列表 0.5d 3
T-E-09 案例详情 0.5d 3
T-E-10 a11y 全量审计V10 关键) 0.75d 4
T-E-11 Chromatic 收口S7 增量) 0.5d 3
合计 14 任务 9d 48

T-D-22 · react-intl 接入1.0d · 4 子任务)⚠️ V10 替换

V10 替换next-intl → react-intl 7Vite 友好)

ST-S7-D-22.1 安装依赖0.125d

pnpm --filter web add react-intl

ST-S7-D-22.2 写 IntlProvider 集成0.25d

  • V10 关键Zustand 存 localezh-CN / en-US

ST-S7-D-22.3 写 messages/zh-CN.json + en-US.json0.5d

  • 内容:所有用户可见文案
  • 结构:扁平 key + ICU MessageFormat

ST-S7-D-22.4 写 locale 切换器0.125d

  • V10 集成Header 下拉菜单

T-D-23 · 文案审计(中/英双语 · 0.5d · 3 子任务)

ST-S7-D-23.1 提取所有硬编码中文0.25d

  • 命令grep -rn "[\u4e00-\u9fff]" apps/web/src/
  • V10 验收0 硬编码中文(全部走 i18n

ST-S7-D-23.2 英文文案完整性0.125d

  • 验收:所有 key 都有 en-US 翻译

ST-S7-D-23.3 ICU 语法校验0.125d

  • 工具eslint-plugin-formatjs

T-D-24 · Chromatic + Lighthouse 收口1.0d · 4 子任务)

ST-S7-D-24.1 Chromatic 收口0.25d

  • 截图:所有页面 × 3 主题 × 2 locale = 36 截图

ST-S7-D-24.2 Lighthouse P75 复测0.25d

  • 目标:≥ 95

ST-S7-D-24.3 修复 Lighthouse 警告0.25d

ST-S7-D-24.4 提交最终基线0.25d


T-E-01 · 登录页 /admin/login0.5d · 3 子任务)

ST-S7-E-01.1 写 LoginFormRHF + Zod · 0.25d

  • 字段:手机号 / 验证码 / 记住我

ST-S7-E-01.2 写 mock 登录0.125d

  • V10 集成useLoginMutation

ST-S7-E-01.3 写 story + e2e0.125d


T-E-02 · Dashboard /admin1.0d · 4 子任务)

ST-S7-E-02.1 写 4 统计卡片0.25d

  • 总订单 / 待审核 / 总用户 / 总分享

ST-S7-E-02.2 写趋势图0.25d

  • V10 集成recharts LineChart

ST-S7-E-02.3 写最近订单列表0.25d

  • V10 集成S5-D-01 DataTable

ST-S7-E-02.4 写 story + e2e0.25d


T-E-03 · Layout /admin shared0.5d · 3 子任务)

ST-S7-E-03.1 写 Sidebar0.25d

  • V10 不变量 L1:≥ 1024px 显示侧栏

ST-S7-E-03.2 写 Header0.125d

ST-S7-E-03.3 写响应式折叠0.125d


T-E-04 · 错误兜底 /admin/error0.25d · 2 子任务)

ST-S7-E-04.1 写 ErrorPage0.125d

ST-S7-E-04.2 接入 ErrorBoundary0.125d


T-E-05 · 权限守卫 <RequireAuth>0.5d · 3 子任务)⚠️ V10 重写

V10 替换Next.js middleware → React Router 7 loader + RequireAuth 组件

ST-S7-E-05.1 写 useAuth Zustand selector0.125d

ST-S7-E-05.2 写 <RequireAuth> 组件0.25d

  • 行为:未登录跳 /admin/login权限不足跳 /403

ST-S7-E-05.3 接入路由配置0.125d


T-E-06 · 订单列表0.75d · 3 子任务)

ST-S7-E-06.1 写 useOrdersQuery0.125d

ST-S7-E-06.2 写 OrdersTableS5-D-01 集成 · 0.5d

  • V10 集成TanStack Table + 排序 + 筛选 + 分页

ST-S7-E-06.3 写 story + e2e0.125d


T-E-07 · 订单详情1.0d · 4 子任务)

ST-S7-E-07.1 写 useOrderQuery0.125d

ST-S7-E-07.2 写 OrderDetail 组件0.5d

  • V10 集成TabsSprint 1+ DataTable + Chart

ST-S7-E-07.3 写操作按钮组0.25d

  • 审核通过 / 拒绝 / 申请修改

ST-S7-E-07.4 写 story + e2e0.125d


T-E-08 · 案例列表0.5d · 3 子任务)

ST-S7-E-08.1 写 useCasesQuery0.125d

ST-S7-E-08.2 写 CasesGrid0.25d

ST-S7-E-08.3 写 story + e2e0.125d


T-E-09 · 案例详情0.5d · 3 子任务)

ST-S7-E-09.1 写 useCaseQuery0.125d

ST-S7-E-09.2 写 CaseDetail0.25d

  • V10 集成SafeMarkdown 渲染案例正文

ST-S7-E-09.3 写 story + e2e0.125d


T-E-10 · a11y 全量审计0.75d · 4 子任务)⚠️ V10 关键

PM 决策2026-07-03Chromatic + axe-core 双重验收

ST-S7-E-10.1 axe-core 全量扫描0.25d

  • 覆盖:所有页面 + 所有业务组件

ST-S7-E-10.2 键盘导航全路径测试0.25d

  • 验收:所有交互可仅用键盘完成

ST-S7-E-10.3 屏幕阅读器测试0.125d

  • 验收VoiceOver + NVDA 都能正确朗读

ST-S7-E-10.4 WCAG AA 报告0.125d

  • 工具Lighthouse a11y 100 分

T-E-11 · Chromatic 收口S7 增量 · 0.5d · 3 子任务)

ST-S7-E-11.1 截图所有 admin 页面0.25d

ST-S7-E-11.2 提交基线0.125d

ST-S7-E-11.3 验证 0 像素 diff0.125d


V10 验收清单Sprint 7 G6.1 闸门)

G6.1 闸门(必须全部通过):
  [ ] i18n 中/英双语全覆盖0 硬编码
  [ ] admin 模块 5 页面 + 4 订单/案例全部完成
  [ ] 权限守卫正确工作
  [ ] axe-core 0 critical 0 serious
  [ ] Lighthouse P ≥ 95 / A ≥ 95 / B ≥ 95 / S ≥ 95
  [ ] pnpm typecheck 0 error 0 any
  [ ] pnpm lint 0 error 0 warning
  [ ] pnpm test:storybook 全绿
  [ ] pnpm chromatic 0 像素 diff
  [ ] pnpm test:e2e 全绿(含 5 admin 路径)
  [ ] bundle < 320KB gzip

V10 风险Sprint 7 特有)

ID 风险 等级 缓解
V10-S7-R1 react-intl 切换语言闪烁 提前注入 locale 到 html lang 属性
V10-S7-R2 RequireAuth 与 React Router 7 loader 兼容 官方推荐模式
V10-S7-R3 i18n key 命名冲突 强制命名空间 module.component.field

Sprint 7 文档状态V10 选项 B 重写完成 总工时9 人天V2 是 10 人天,节省 1d 总子任务48 个V2 是 52 个) 下一步Sprint 6 完成后立即启动