hyb-oa/.trellis/tasks/05-27-pc-detail-mobile-visual-wave3/implement.md

实施记录

执行策略

1. 先审视目标页面的组件结构和现有样式，复用 Wave2 已建立的工作台语言。
2. 只增加必要的共享样式或小组件，不重写业务逻辑。
3. PC 详情页按“状态/摘要/动作/证据/历史”重新压缩层级。
4. 移动关键页按单手办理和企业微信 WebView 约束处理密度、按钮和列表。
5. 增加 focused Playwright mock 视觉用例，覆盖 PC 和移动截图。

风险控制

• 不修改后端 API、schema、权限、审批状态机、通知投递、企业微信和部署环境变量。
• 不写公网业务数据。
• 动作按钮、确认弹窗、错误提示和权限判断必须保持可达。
• 移动页不得回退到 PC 表格体验。

待记录

实施改动

• PC 报销详情 /reimbursements/:id：按“办理摘要、付款状态、关联项目、附件材料、明细与票据、审批进度/记录、可执行动作”重排层级，复用新的 detail surface 样式。
• PC 审批详情 /workflow/tasks/:id：审批对象摘要、审批动作和处理历史改为紧凑控制台结构，动作区使用统一 action card。
• PC 通知中心 /notifications：桌面端从表格改为通知流卡片，保留未读筛选、类型筛选、直达业务和标记已读。
• 移动关键页 /mobile、/mobile/reimbursements、/mobile/approvals、/mobile/approvals/:taskId、/mobile/notifications、/mobile/me：增加当前任务/列表高亮、移动命令面板和未读/重点卡片状态，不引入 PC 表格。
• 新增 focused Playwright 用例 client/tests/e2e/pc-detail-mobile-visual-wave3.spec.ts，mock API 覆盖 PC 与移动截图。
• 将 Wave3 可复用 detail/mobile surface 规则沉淀到 .trellis/spec/hyb-oa/frontend-react-vite-design.md。

验证命令

• cd client && npm run typecheck：通过。
• cd client && npm run build：通过。
• cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list：2 passed。
• cd client && npx playwright test tests/e2e/pc-core-workflow-visual-wave2.spec.ts --workers=1 --reporter=list：1 passed，用于确认 Wave2 核心页面无明显回退。
• node scripts/qa/check-ui-design-rules.mjs：0 findings。
• python3 ./.trellis/scripts/task.py validate 05-27-pc-detail-mobile-visual-wave3：通过。
• node scripts/qa/check-trellis-governance.mjs：通过。
• git diff --check：通过。

截图证据

• Focused 截图输出：output/playwright/pc-detail-mobile-visual-wave3/
• 覆盖文件：01-pc-reimbursement-detail.png、02-pc-workflow-detail.png、03-pc-notifications.png、04-mobile-home.png、05-mobile-reimbursements.png、06-mobile-approvals.png、07-mobile-approval-detail.png、08-mobile-notifications.png、09-mobile-me.png。

收尾判断

• 本轮未修改后端 API、数据库 schema、权限模型、审批状态机、企业微信配置或 SMTP 配置。
• 本轮未执行公网部署和公网真实环境 smoke；部署与公网复核应作为合并后的下一步。