优化报销审批证据布局（reimbursement-form-shared-component-migration）

2026-09-02 12:55:24 +08:00
@@ -71,8 +71,8 @@ type ReimbursementWorkspaceShellProps = {
 ### Approval Adapter

 - 消费路由边界移交的 workflow task detail/query result，不为同一 task 再发一份分派查询；另行获取实时报销详情。
- 拥有 task detail 的业务解释和刷新策略、allowedActions、提交快照、处理历史、审批 mutation、退回引用、材料查看、联网状态和 fail-closed。
- 只注入证据查看、引用和审批决策能力；编辑/关联/解绑 capability 必须不存在。
+- 拥有 task detail 的业务解释和刷新策略、allowedActions、提交快照、处理历史、审批 mutation、退回动作内引用、材料查看、联网状态和 fail-closed。
+- 常驻内容只注入证据查看和审批决策能力；引用只注入已展开的退回编辑区，编辑/关联/解绑 capability 必须不存在。
 - 任务、快照、实时报销内容任一关键部分未就绪时，输出不可决策模型和原因。

 ### Readonly Adapter
@@ -92,9 +92,9 @@ type ReimbursementWorkspaceShellProps = {
 报销人 · 日期 · 合计
 事由
 ┌────────────────────────────────────┬────────────────────┐
-│ 明细及所属票据                     │ 当前节点/状态      │
-│ 未归属票据（仅有时）               │ 可决策状态         │
-│ 补充附件                           │ 异常锚点（仅有时） │
+│ 费用明细表                         │ 当前节点/状态      │
+│ 票据与附件（发票/补充附件分组）    │ 可决策状态         │
+│ 未归属恢复（仅有时）               │ 异常锚点（仅有时） │
 │ 异常/快照差异（仅有时）            │ 审批/提交动作      │
 │ 处理历史/进度                      │ sticky             │
 └────────────────────────────────────┴────────────────────┘
@@ -102,7 +102,7 @@ type ReimbursementWorkspaceShellProps = {

 ### Mobile

-标题/状态 → 报销人/日期/合计 → 事由 → 明细/票据 → 未归属（仅有时）→ 附件 → 异常/差异（仅有时）→ 历史/进度 → 底部动作。
+标题/状态 → 报销人/日期/合计 → 事由 → 费用明细卡 → 票据与附件（分组）→ 未归属恢复（仅有时）→ 异常/差异（仅有时）→ 历史/进度 → 底部动作。

 正常检查不生成卡片。异常模型必须带对象引用和锚点：

@@ -162,3 +162,27 @@ type ReimbursementWorkspaceIssue = {
 ## 10. UI/UX Basis

 本任务不引入新视觉系统。采用 `ui-ux-pro-max` 对本场景适用的通用原则：一致标题层级、组合优于模式继承、异常不只靠颜色、反馈明确、触控目标至少 44×44、渐进披露避免把所有解释预先铺开。其数据库没有命中特定“审批工作台”React 模板，因此不采用不存在的模板结论，继续以项目现有组件和 `docs/产品设计规则.md` 的信息架构为基线。
+
+## 11. Post-deployment KISS Evidence Layout
+
+上线真人目视反馈证明，统一工作台架构正确，但 `ReimbursementItemEvidenceList` 仍把“费用明细、所属票据、文件动作、退回引用”压进同一嵌套卡片。收尾迭代保持适配器和 capability 边界不变，把展示层拆成三个语义组件：
+
+```text
+ReimbursementEvidenceSection
+├─ ReimbursementExpenseItems
+│  ├─ desktop: ExpenseItemsTable
+│  └─ mobile: ExpenseItemCards
+├─ ReimbursementMaterials
+│  ├─ invoices
+│  └─ supplementary attachments
+└─ ReimbursementReturnReferencePicker（仅退回动作展开时挂载）
+```
+
+- `ExpenseItemsTable` 与 `ExpenseItemCards` 消费同一行模型：类型、日期、说明、金额、票据数量/状态、异常摘要、稳定锚点。PC/移动可以不同 DOM，不得各自重新计算业务状态。
+- 发票不再嵌套在明细 DOM 内；projection 继续保留 `linkedItemId`，由纯函数派生每行票据摘要和独立材料列表。点击问题锚点仍能定位到对应明细行或材料行。
+- 文件行的文件名/整行采用语义按钮或链接作为唯一查看入口；视觉上不重复“查看原件/查看附件”。移动命中区域不小于 44px，键盘焦点和 `aria-label` 必须包含材料类型与文件名/票号。
+- edit capability 映射为明细单一编辑入口和材料区维护入口；readonly/approval 不注入维护能力。未归属或阻断票据是例外，可在材料行就地显示关联恢复动作。
+- `onReferenceItem` / `onReferenceInvoice` 不再传给常驻明细/材料组件；审批适配器仅在 `activeSecondaryAction === "return"` 时把异常优先的候选模型传给引用选择器。选择器只写入本地退回意见文本，不调用 API。
+- “查看完整材料”是区块级批量预览能力，与单文件入口并存时必须保持次要层级；单文件打开仍沿用既有短时 URL、用途审计和失败隔离。
+
+参考 `/home/shunli/shenzhou-business-suite` 的费用明细表、移动卡片和附件分区只用于确定信息架构。实现不依赖该项目代码，也不复制其权限、状态或样式实现。