# PC财务与管理页视觉重塑 Wave4

## Goal

在 Wave2、Wave3 已完成并部署验证后，继续用 `frontend-design` 收敛剩余 PC 财务/付款/AP/票据池和 C 类低频管理页的视觉与交互层级。目标是让真实试运行中的财务、管理员和负责人进入低频但关键页面时，仍然看到统一、简洁、可扫描的 Hyinda 工作台体验。

## Start Confirmation

- 用户在 2026-05-27 确认“继续做wave4”。
- 本任务只做前端视觉、信息层级和交互密度治理。
- 不改变后端 API、权限模型、付款状态机、审批规则、数据库 schema、SMTP、企业微信配置、真实付款、ERP 写入或生产数据。
- 设计裁决来源：`frontend-design` skill；业务和部署边界仍按 Trellis task、`.trellis/spec/hyb-oa/` 和 `docs/` 执行。

## Scope

### 财务高频页

- 付款批次 `/payment-batches`
- AP 运营 `/ap-operations`
- 票据池 `/invoice-pool`

目标：

- 强化当前状态、筛选/批量操作、风险/异常、主表格或主列表。
- 保留所有现有入口、确认、错误提示、导出、附件和只读边界。
- 不执行真实付款，不新增支付渠道，不写 ERP。

### C 类低频管理页

优先覆盖：

- 用户管理 `/system/users`
- 主数据 `/system/master-data`
- 通知渠道 `/system/notification-channels`
- 系统设置 `/system/settings`
- 功能开关 `/system/feature-flags`
- 流程定义 `/system/workflow-definitions`
- 审计日志 `/audit-logs`

目标：

- 降低说明性文案和页面噪音。
- 统一管理页的 header、状态摘要、命令区、表格/列表容器和危险操作层级。
- 保持管理员可达性和审计/配置安全提示。

## Out of Scope

- 不改移动端。
- 不改登录页、工作台、报销列表、审批中心、报销详情、审批详情和通知中心；这些已由 Wave2/Wave3 覆盖。
- 不改后端接口、数据模型、权限、审批/付款状态机、企业微信、SMTP、OCR provider 或部署环境变量。
- 不执行公网部署、真实业务写入、真实付款、ERP 写入、数据库重置或企业微信写入。

## Design Direction

- Tone：finance operations console，克制、紧凑、风险清晰。
- Composition：状态摘要 + 命令面板 + 主列表/主表格 + 次级说明。
- Copy：保留行动、风险、状态和不可逆操作提示；删除解释系统如何工作的长文案。
- Density：PC 页面可更密，但必须有清晰分区和稳定按钮宽度。
- Safety：付款、导出、配置、功能开关、删除、导入等动作保持原确认与权限判断。

## Requirements

- Wave4 页面必须与 Wave2/Wave3 的工作台语言一致。
- 财务高频页必须让用户快速判断：待处理、异常、可执行动作、下一步。
- 管理页必须减少“工具堆叠感”，统一为可扫描的操作台。
- 现有业务能力不能丢失；若入口降级为次级工具，必须仍可达。
- 测试和证据不得保存密码、token、Secret、完整账号、真实票据、合同正文、银行资料、完整本地路径或 raw payload。

## Acceptance Criteria

- [x] 财务高频页完成统一视觉与操作层级收敛。
- [x] C 类低频管理页完成统一 header、命令区和内容容器收敛。
- [x] Wave2/Wave3 页面不发生明显回退。
- [x] `cd client && npm run typecheck` 通过。
- [x] `cd client && npm run build` 通过。
- [x] Focused Playwright 覆盖财务高频页和 C 类管理页，并生成截图证据。
- [x] `node scripts/qa/check-ui-design-rules.mjs` 通过。
- [x] `node scripts/qa/check-trellis-governance.mjs` 与 `git diff --check` 通过。

## Completion Notes

- 2026-05-27 本地完成 Wave4 代码整改和自动化验证。
- 覆盖页面：`/payment-batches`、`/ap-operations`、`/invoice-pool`、`/system/users`、`/system/master-data`、`/system/notification-channels`、`/system/settings`、`/system/feature-flags`、`/system/workflow-definitions`、`/audit-logs`。
- 截图证据：`output/playwright/pc-finance-admin-visual-wave4/*.png`。
- 尚未执行公网部署；面向用户可测仍需单独批准部署并完成公网检查。

## Test Plan

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

发布前后按需补充：

```bash
SYNC_ENV=0 LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash deploy/trialrun/deploy.sh
LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh
E2E_BASE_URL=https://oa.hyinda.com npx playwright test tests/e2e/pc-finance-admin-visual-wave4.spec.ts --workers=1 --reporter=list
```

## Technical Notes

- 前端设计 skill：`frontend-design`
- 前端 spec：`.trellis/spec/hyb-oa/frontend-react-vite-design.md`
- 前端基础 spec：`.trellis/spec/frontend/`
- 部署/试运行 spec：`.trellis/spec/hyb-oa/deployment-trialrun.md`
- 安全与证据 spec：`.trellis/spec/hyb-oa/security-privacy.md`、`.trellis/spec/hyb-oa/docs-and-evidence.md`
- Wave2 参考任务：`.trellis/tasks/archive/2026-05/05-27-pc-core-workflow-visual-wave2/`
- Wave3 参考任务：`.trellis/tasks/archive/2026-05/05-27-pc-detail-mobile-visual-wave3/`