重构审批中心与报销详情降噪（approval-detail-simplification-refactor）

2026-05-29 13:10:06 +08:00
@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "前端规约入口，用于核对 React/Vite 页面实现是否走正确规则来源。"}
+{"file": ".trellis/spec/hyb-oa/index.md", "reason": "hyb-oa 规约入口，用于核对项目级检查范围。"}
+{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "核对 Trellis 任务合同、验证和提交治理要求。"}
+{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "核对 A 类 PC 页面任务优先、详情页命令面和前端验证规则。"}
@@ -0,0 +1,71 @@
+# 审批中心与报销详情降噪实现方案
+
+## Design Direction
+
+本轮沿用第一轮已确认的“安静、任务优先、工作台式极简”方向。审批中心和报销详情都是 A 类 PC 页面，不能做营销式 hero，也不引入新的视觉体系；重点是压缩首屏动作、重排信息层级、把低频能力后置。
+
+硬性规则：
+
+- 每个页面首屏只允许 1 个主按钮。
+- 每个页面首屏最多 2 个次级入口。
+- 说明文案只服务风险、异常、空态或确认动作。
+- 低频能力后置，不删除。
+
+## WorkflowTasksPage
+
+目标：从“审批台账 + 统计筛选”调整为“待我处理优先”。
+
+实现要点：
+
+- `WorkspaceHeader` 去掉解释性 subtitle，首屏标题保持“审批中心”。
+- 默认保留待处理任务作为第一层；历史状态和业务类型筛选收纳到“高级 / 历史”折叠区。
+- 将统计卡从首屏常驻移入高级区，或压缩为待处理焦点旁的轻量摘要。
+- 删除默认 `WorkspaceNotice` 处理原则卡；错误、空态和二次确认继续保留说明。
+- 桌面表格行内主动作改为：
+  - pending 且允许 approve：主按钮“处理”或“通过”保留二次确认；“详情”作为次级或更多入口。
+  - 非 pending：主按钮“查看”。
+- 移动布局不是本轮重构范围；若共享代码影响移动卡片，只做必要回归，不能大改移动壳。
+
+## ReimbursementDetailPage
+
+目标：从“所有材料和操作平铺”调整为“状态驱动页面”。
+
+实现要点：
+
+- `EntityOverviewHero` 顶部压缩说明文案；主动作只表达当前状态下最应该做的一件事。
+- 新增或重组“当前状态 / 下一步”首屏任务面板，回答：
+  - 当前状态是什么。
+  - 下一步是什么。
+  - 谁需要处理。
+  - 明细/发票/附件是否满足当前状态要求。
+- 按状态决定主动作：
+  - `draft` / `rejected`：优先补齐材料或提交；删除草稿进“更多”。
+  - `reviewing`：优先查看审批进度；催办/撤回作为次级状态动作。
+  - `approved`：财务角色优先付款；普通员工看等待付款结果。
+  - `paid`：优先查看付款结果；打印/PDF作为次级留档入口。
+- 明细和发票保留完整编辑能力，但在首屏之后作为“材料”工作区；缺发票、超标准、预算阻断等异常才前置提示。
+- 附件、项目关联、差旅关联、财务导出、审批历史保留，但移到次级区、侧栏或折叠区，不与主动作抢首屏。
+- 不改变 `ReimbursementActions` 的服务端动作调用和确认语义，只调整展示位置和入口密度。
+
+## Shared Implementation Notes
+
+- 优先复用现有组件和类：`ListWorkspace`、`WorkspaceHeader`、`FilterBar`、`PrimaryTable`、`PageScaffold`、`EntityOverviewHero`、`SectionPanel`、`detail-workspace-grid`、`detail-command-panel`、`detail-fact-grid`、`detail-evidence-card`、`detail-timeline`。
+- 不新增 UI 框架，不引入新状态管理。
+- 不改 API 请求参数语义；高级/历史开关优先用本地状态或既有 URL 参数。
+- 不让无权限用户看到不可执行入口。
+- 不把低频入口删除；找不到合适位置时先进“更多”或次级区。
+
+## Verification Plan
+
+- `cd client && npm run typecheck`
+- `cd client && npm run build`
+- 审批中心 PC 视觉验证：
+  - 默认显示待处理任务。
+  - 高级/历史入口可展开历史状态、业务类型筛选和统计。
+  - 行内动作预算符合 1 个主动作。
+- 报销详情 PC 视觉验证：
+  - 草稿/被驳回状态能看到补材料/提交路径。
+  - 审批中状态能看到当前处理人和审批进度入口。
+  - 已通过/已支付状态不展示编辑类主动作。
+  - 打印、删除、财务导出、审批记录仍可达但不抢首屏。
+- Trellis governance 和 `git diff --check` 必须通过。
@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/frontend/index.md", "reason": "前端规约入口，确认 React/Vite 页面实现规则来源。"}
+{"file": ".trellis/spec/hyb-oa/index.md", "reason": "hyb-oa 规约入口，确认项目级规则读取顺序。"}
+{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "Trellis 任务、批准、验证和提交治理规则。"}
+{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "A 类 PC 页面任务优先、详情页命令面和前端验证规则。"}
@@ -0,0 +1,115 @@
+# 审批中心与报销详情降噪重构
+
+## 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
+
+- [x] 审批中心默认进入“待处理”任务视图，首屏不再被统计卡和解释卡占满。
+- [x] 审批中心低频历史/筛选/统计入口后置，仍可访问。
+- [x] 审批中心行内动作满足 1 个主动作原则，并保留通过动作二次确认。
+- [x] 报销详情顶部能直接表达当前状态、下一步、谁处理、关键完整性。
+- [x] 报销详情首屏主动作不超过 1 个，次级入口不超过 2 个。
+- [x] 报销详情低频能力后置但不删除：打印/PDF、删除草稿、项目关联、财务导出、审批记录、附件治理仍可达。
+- [x] 说明文案只服务风险、异常、空态和确认动作。
+- [x] 不修改后端 API、数据库、权限、状态机、移动端/企业微信页面。
+- [x] 补充或更新聚焦 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`
@@ -0,0 +1,30 @@
+{
+  "id": "approval-detail-simplification-refactor",
+  "name": "approval-detail-simplification-refactor",
+  "title": "审批中心与报销详情降噪重构",
+  "description": "第二轮 PC Web 前端页面降噪重构：审批中心待处理优先，报销详情状态驱动。",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": "client",
+  "package": null,
+  "priority": "P2",
+  "creator": "shunli",
+  "assignee": "shunli",
+  "createdAt": "2026-05-29",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "main",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [
+    "client/src/pages/WorkflowTasksPage.tsx",
+    "client/src/pages/ReimbursementDetailPage.tsx",
+    ".trellis/spec/hyb-oa/frontend-react-vite-design.md"
+  ],
+  "notes": "",
+  "meta": {}
+}