hyb-oa/.trellis/tasks/05-27-pc-finance-admin-visual-wave4/implement.md

实施记录

执行策略

1. 先审视财务、AP、票据池和 C 类管理页现有结构，复用 Wave2/Wave3 已建立的 ops-*、detail-* 工作台语言。
2. 只增加必要共享样式或轻量页面结构调整，不改业务 API 和状态机。
3. 财务高频页按“状态摘要、命令面板、风险/异常、主表格或主列表”收敛。
4. C 类管理页按“管理摘要、配置命令、主内容、危险操作”收敛。
5. 增加 focused Playwright mock 视觉用例，覆盖 PC 财务和管理页截图。

风险控制

• 不修改后端 API、schema、权限、审批/付款状态机、企业微信、SMTP 和部署环境变量。
• 不写公网业务数据，不执行真实付款、ERP 写入或企业微信写入。
• 功能开关、付款、导出、导入、删除等高风险动作必须保持原权限、确认和错误提示。
• 低频管理页可降噪，但入口不能消失。

待记录

实施改动

• 新增 Wave4 共享视觉类：finance-status-strip、finance-metric-card、finance-workspace-grid、finance-command-panel、finance-list-card、admin-command-panel、admin-tile-grid、admin-workspace-grid。
• 财务高频页完成状态摘要、命令面板、主列表/表格和风险信息层级收敛：
  • client/src/pages/PaymentBatchesPage.tsx
  • client/src/pages/ApOperationsPage.tsx
  • client/src/pages/InvoicePoolPage.tsx
• C 类管理页完成统一 header、摘要、命令区和内容容器收敛：
  • client/src/pages/UserManagementPage.tsx
  • client/src/pages/MasterDataPage.tsx
  • client/src/pages/NotificationChannelsPage.tsx
  • client/src/pages/SystemSettingsPage.tsx
  • client/src/pages/FeatureFlagsPage.tsx
  • client/src/pages/WorkflowDefinitionsPage.tsx
  • client/src/pages/AuditLogsPage.tsx
• 新增 focused Playwright：client/tests/e2e/pc-finance-admin-visual-wave4.spec.ts。

验证命令

cd client && npm run typecheck
cd client && npx playwright test tests/e2e/pc-finance-admin-visual-wave4.spec.ts --workers=1 --reporter=list
cd client && npm run build
node scripts/qa/check-ui-design-rules.mjs
python3 ./.trellis/scripts/task.py validate 05-27-pc-finance-admin-visual-wave4
node scripts/qa/check-trellis-governance.mjs
git diff --check

结果：以上命令均通过。

截图证据

• output/playwright/pc-finance-admin-visual-wave4/01-payment-batches.png
• output/playwright/pc-finance-admin-visual-wave4/02-ap-operations.png
• output/playwright/pc-finance-admin-visual-wave4/03-invoice-pool.png
• output/playwright/pc-finance-admin-visual-wave4/04-users.png
• output/playwright/pc-finance-admin-visual-wave4/05-master-data.png
• output/playwright/pc-finance-admin-visual-wave4/06-notification-channels.png
• output/playwright/pc-finance-admin-visual-wave4/07-system-settings.png
• output/playwright/pc-finance-admin-visual-wave4/08-feature-flags.png
• output/playwright/pc-finance-admin-visual-wave4/09-workflow-definitions.png
• output/playwright/pc-finance-admin-visual-wave4/10-audit-logs.png

Spec 同步

• 已更新 .trellis/spec/hyb-oa/frontend-react-vite-design.md，沉淀 Wave4 财务/管理页共享 surface 约定。