hyb-oa/.trellis/tasks/archive/2026-05/05-28-pc-frontend-layout-unification/implement.md

实施方案

推荐方案

采用“共享模板先行 + 重点页面收敛”的方式，而不是逐页重画。

1. 盘点现有 PC 页面是否已经使用 ListWorkspace、WorkspaceHeader、FilterBar、PrimaryTable、PageScaffold 和 ops-* / finance-* / admin-*。
2. 先补共享层：
   • 统一页面宽度、标题层级、标题动作区、统计条密度、命令区间距、表格容器边界。
   • 保持现有 class contract，不破坏已经通过 Wave2-Wave4 的页面。
3. 再改重点页面：
   • 工作台：突出今日动作和待办，折叠低频入口。
   • 报销/审批：列表统一筛选和主表，详情统一摘要、票据/附件、审批、付款/证据四区。
   • 财务/AP/票据池：保留高密，但统一统计、操作面板和表格焦点。
   • C 类管理页：统一统计条、命令区、表格、空状态，减少页面说明。
4. 最后做视觉与交互验证：
   • typecheck/build
   • UI design rules
   • focused Playwright
   • 必要时用截图检查桌面和移动响应式。

风险控制

• 不动业务数据流、接口、权限、审批状态机和数据库。
• 不把“视觉优化”变成流程重构。
• 不新增重复 UI 系统；优先复用已有 pattern 和 CSS class。
• 高风险动作只调整位置和呈现，不取消二次确认。

第一批文件候选

实际实现前再按代码确认，候选区域包括：

• client/src/components/patterns/
• client/src/index.css
• client/src/pages/PortalHomePage.tsx
• client/src/pages/ReimbursementsPage.tsx
• client/src/pages/ReimbursementDetailPage.tsx
• client/src/pages/WorkflowTasksPage.tsx
• client/src/pages/WorkflowTaskDetailPage.tsx
• client/src/pages/InvoicePoolPage.tsx
• client/src/pages/PaymentBatchesPage.tsx
• client/src/pages/ApOperationsPage.tsx
• client/src/pages/UserManagementPage.tsx
• client/src/pages/MasterDataPage.tsx
• client/src/pages/FeatureFlagsPage.tsx
• client/src/pages/NotificationChannelsPage.tsx
• client/src/pages/AuditLogsPage.tsx

不做事项

• 不新增登录、邮箱、企业微信功能。
• 不接发票验真真实 provider。
• 不改制度签收、用印台账、采购比价或审批阈值。
• 不部署公网。

完成记录

• 共享层：收敛 theme.css 半径、ListWorkspace 标题/筛选/表格密度、index.css 的 ops-*、finance-*、admin-* 和 Portal 类。
• 页面层：压缩 Portal 工作台文案与面板密度，系统设置改为带图标的管理入口卡片，报销批量操作、详情错误态、主数据/功能开关/通知渠道间距统一。
• 验证：typecheck、build、UI design rules、Trellis governance、Wave2/Wave4 focused Playwright 均通过。