hyb-oa/.trellis/tasks/archive/2026-05/05-27-pc-finance-admin-visual-wave4/prd.md

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

• 财务高频页完成统一视觉与操作层级收敛。
• C 类低频管理页完成统一 header、命令区和内容容器收敛。
• Wave2/Wave3 页面不发生明显回退。
• cd client && npm run typecheck 通过。
• cd client && npm run build 通过。
• Focused Playwright 覆盖财务高频页和 C 类管理页，并生成截图证据。
• node scripts/qa/check-ui-design-rules.mjs 通过。
• 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。
• 2026-05-27 用户批准部署后，已将提交 c5eb27e 部署到 https://oa.hyinda.com。
• 部署后公网检查通过：/ready、部署脚本 runtime/external smoke、公网 live smoke、public bundle 文案扫描、live readiness 聚合和 Wave4 公网页面视觉冒烟。
• live readiness 报告：artifacts/qa-flow/live-smoke-readiness-20260527-222743/summary.json，状态 PASS。
• 当前可以进入公网用户检查。

Test Plan

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

发布前后按需补充：

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/