hyb-oa/.trellis/tasks/archive/2026-05/05-29-approval-detail-simplification-refactor/prd.md

审批中心与报销详情降噪重构

Goal

延续第一轮 PC 首页和报销列表降噪规则，把同一套“任务优先、主动作收敛、低频能力后置”推广到审批中心和报销详情，让审批人进入页面后能立即处理待办，让员工进入详情后能立即知道当前状态和下一步。

Scope

• 第二轮只重构 PC Web 的两个 A 类页面：
  • client/src/pages/WorkflowTasksPage.tsx
  • client/src/pages/ReimbursementDetailPage.tsx
• 同步更新受影响的 Playwright/E2E 断言和视觉截图验证。
• 继续遵守 .trellis/spec/hyb-oa/frontend-react-vite-design.md 的 A-Class PC Task-First Pages 规则。
• 不修改后端 API、数据库、权限模型、审批状态机、报销状态机、移动端/企业微信页面、生产配置或真实数据。

What I already know

• 用户已确认第一轮前后对比效果可作为统一设计规则。
• 第一轮已完成首页“今日任务入口化”和报销列表“员工进度视图化”，并沉淀为前端规约。
• 上一轮 PRD 已将审批中心和报销详情列为第二轮扩展对象。
• 审批中心当前首屏包含统计卡、全部状态 Tab、业务类型筛选、处理原则说明、列表行内“通过/详情”等；复杂感主要来自统计和解释文案抢占首屏注意力。
• 报销详情当前顶部同时暴露打印、返回、催办、删除草稿；正文首屏同时展示状态摘要、付款状态、差旅、项目、附件、明细、发票、预算、风险、AI、导出、审批记录和动作栏，信息层级偏平铺。
• 目标用户是 10 人以下国内科技公司，审批链短、角色重叠；PC 端仍需要保留批量查看、财务复核、导出和留档能力，但不能抢占员工/审批人的第一屏路径。

Assumptions

• 本轮继续采用前端层信息架构重排，不做业务能力删除。
• 审批中心默认服务审批人“待我处理”；发起人历史、已处理、业务类型筛选和统计属于次级能力。
• 报销详情默认服务当前状态下的下一步；明细、发票、附件、预算、审批记录、财务导出和打印留档按状态相关性排序或折叠。
• 说明文案只在风险、异常、空态和确认动作中出现；常规流程解释不默认铺开。
• 低频能力后置到“更多”“高级/历史”“详情页次级区”或状态相关面板，不删除。

Open Questions

• 当前无阻塞问题；若实现发现现有 API 数据无法支持目标排序或显隐，先回到 PRD 讨论，不直接改后端。

Requirements

• 审批中心首屏默认只回答：有多少待我处理、最需要处理哪一条、下一步是处理还是查看。
• 审批中心首屏主动作预算：列表行主动作只保留 1 个强动作；“通过”这种高风险动作必须保留二次确认。
• 审批中心的统计摘要、业务类型筛选、已处理/已驳回/已取消/已跳过历史、全量查询放到“高级 / 历史”区域或次级折叠区。
• 审批中心不再默认展示“处理原则”说明卡；仅在空态、错误或特殊批量/风险场景显示说明。
• 报销详情顶部改为状态驱动：当前状态、下一步、谁处理、关键金额/票据完整性先出现。
• 报销详情按状态展示主动作：
  • 草稿/被驳回：补明细、补发票、提交。
  • 审批中：看进度、催办、撤回或返回列表。
  • 已通过：等待/执行付款，财务角色可付款。
  • 已支付：查看付款结果、打印/PDF、留档。
• 报销详情首屏只保留 1 个主动作，最多 2 个次级入口；打印/PDF、删除草稿、财务导出、项目关联、附件治理、审批历史等后置。
• 报销详情中的明细、发票、附件保留完整能力，但默认按“当前状态需要补什么”排序，不把所有面板同时作为第一层任务。
• 普通用户界面继续避免 UUID、taskId、内部状态码或调试字段作为主标识。
• 所有高风险动作继续使用既有确认弹窗、权限判断和服务端校验，不绕开现有安全机制。

Acceptance Criteria

• 审批中心默认进入“待处理”任务视图，首屏不再被统计卡和解释卡占满。
• 审批中心低频历史/筛选/统计入口后置，仍可访问。
• 审批中心行内动作满足 1 个主动作原则，并保留通过动作二次确认。
• 报销详情顶部能直接表达当前状态、下一步、谁处理、关键完整性。
• 报销详情首屏主动作不超过 1 个，次级入口不超过 2 个。
• 报销详情低频能力后置但不删除：打印/PDF、删除草稿、项目关联、财务导出、审批记录、附件治理仍可达。
• 说明文案只服务风险、异常、空态和确认动作。
• 不修改后端 API、数据库、权限、状态机、移动端/企业微信页面。
• 补充或更新聚焦 Playwright/视觉验证，覆盖审批中心和报销详情 PC 视口。

Definition of Done

• PRD 和设计方案获得用户批准后再进入实现。
• 实现前按 Trellis workflow 激活任务并读取前端规约。
• 前端改动需执行 cd client && npm run typecheck && npm run build。
• 涉及 A 类核心页面时补充必要 Playwright/视觉验证。
• 执行 python3 ./.trellis/scripts/task.py validate .trellis/tasks/05-29-approval-detail-simplification-refactor。
• 执行 node scripts/qa/check-trellis-governance.mjs。
• 执行 git diff --check。
• 面向用户可测试的页面改动，部署和公网检查通过后再通知用户测试。

Out of Scope

• 不修改后端 API、数据库、审批/报销状态机、权限判定和审批动作语义。
• 不重构移动端/企业微信页面。
• 不恢复或扩展差旅能力。
• 不做全站一次性重写。
• 不做生产部署、真实数据写入或企业微信写入。

Technical Notes

• 当前任务：.trellis/tasks/05-29-approval-detail-simplification-refactor/
• 上一轮任务：.trellis/tasks/archive/2026-05/05-29-frontend-simplification-refactor/
• 统一设计规则：.trellis/spec/hyb-oa/frontend-react-vite-design.md
• 体验事实源：docs/产品设计规则.md
• 审批中心：client/src/pages/WorkflowTasksPage.tsx
• 报销详情：client/src/pages/ReimbursementDetailPage.tsx
• 相关视觉验证可参考：client/tests/e2e/pc-core-workflow-visual-wave2.spec.ts、client/tests/e2e/pc-detail-mobile-visual-wave3.spec.ts、client/tests/e2e/visual-shell.spec.ts。

Test Plan

• cd client && npm run typecheck
• cd client && npm run build
• cd client && npx playwright test tests/e2e/pc-core-workflow-visual-wave2.spec.ts --workers=1 --reporter=list
• cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --grep "PC" --workers=1 --reporter=list
• 必要时新增或更新聚焦测试，验证审批中心和报销详情 PC 首屏动作预算。
• python3 ./.trellis/scripts/task.py validate .trellis/tasks/05-29-approval-detail-simplification-refactor
• node scripts/qa/check-trellis-governance.mjs
• git diff --check

Verification Results

• PASS：cd client && npm run typecheck
• PASS：cd client && npm run build
• PASS：cd client && npx playwright test tests/e2e/pc-core-workflow-visual-wave2.spec.ts --workers=1 --reporter=list
• PASS：cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --grep "PC" --workers=1 --reporter=list
• PASS：cd client && npx playwright test tests/e2e/r102-reimbursement-main-flow.spec.ts --workers=1 --reporter=list
• PASS：python3 ./.trellis/scripts/task.py validate .trellis/tasks/05-29-approval-detail-simplification-refactor
• PASS：node scripts/qa/check-trellis-governance.mjs
• PASS：git diff --check