8.5 KiB
8.5 KiB
前端体验 Wave4-5 财务与管理页刷新
Goal
在 Wave0-3 新全局体验基线已完成并部署后,继续完成剩余前端任务:复审 Wave4 财务/运营页,并补齐 Wave5 管理配置页缺口,让财务、管理员和负责人在低频但高风险页面中仍看到统一、克制、可扫描、可操作的 OA 工作界面。
What I Already Know
- 用户要求“继续完成所有任务”,上下文指向 Wave4 和 Wave5 未完全按新基线收口。
- 历史任务
05-27-pc-finance-admin-visual-wave4已完成并部署验证过,覆盖付款批次、AP、票据池和部分 C 类管理页。 - 历史 Wave4 发生在最新 Wave0-3 新基线之前,因此本任务不是从零重做,而是做“新基线后的复审 + 缺口补齐”。
- Wave5 原计划为
admin-config;当前没有独立 Wave5 任务,且一部分管理页已被历史 Wave4 合并覆盖。 frontend-designskill 是视觉与交互裁决来源;Trellis、隐私、部署和真实业务边界仍按项目 specs 和 docs 执行。- 面向用户可测试的页面改动,只有部署和公网检查通过后才能告知用户测试。
Product Direction
- Tone:quiet finance/admin command surface,克制、紧凑、风险清晰。
- 财务页优先回答:待处理是什么、异常在哪里、下一步动作是什么、是否会产生付款/导出/审计后果。
- 管理页优先回答:当前配置状态是什么、改动影响范围是什么、危险动作如何确认和追溯。
- 不做营销式页面、不新增装饰 hero、不降低高密信息页的扫描效率。
Scope
Wave4 Refresh:财务与运营页
复审并必要调整:
/payment-batches/ap-operations/invoice-pool
目标:
- 对齐 Wave0-3 的 shell、header、command surface、状态摘要和表格/列表密度。
- 保留现有付款批次、复核、回单、导出、票据上传、票据绑定、OCR/验真、风险提示和错误处理。
- 不新增真实支付渠道,不改变付款状态机,不写 ERP。
Wave5 Gap Fill:管理配置页
优先补齐尚未完全纳入新基线或历史 Wave4 覆盖不足的页面:
/system/approval-rules/people/organization/system/workspace
同步复审已覆盖但需要防回退的页面:
/system/users/system/master-data/system/notification-channels/system/settings/system/feature-flags/system/workflow-definitions/audit-logs
目标:
- 管理配置页统一
ListWorkspace/WorkspaceHeader、状态摘要、命令区、主表格/主列表和危险操作层级。 - 降低解释性文案,但保留配置影响、权限、审计、不可逆动作和外部集成边界提示。
- 组织/人员页面避免“普通资料浏览”和“管理配置”风格割裂。
Requirements
R1. Wave4 不重复重写
- 历史 Wave4 已通过的财务页只做 gap-driven refresh。
- 不为了视觉统一改动 API、状态机、权限或付款动作。
- 若页面已符合新基线,只更新测试覆盖或验收记录,不强行改代码。
R2. Wave5 管理配置补齐
- 审批规则页面必须突出规则数量、启用状态、匹配顺序、影响范围和“只影响新单据”的边界。
- 人员/组织/工作区页面必须对齐管理页骨架,减少独立
card-std拼接感。 - 配置、导出、同步、停用、启用、写入企业微信或影响导航的动作必须保留原确认、权限和错误提示。
R3. 视觉与交互一致性
- 复用
finance-status-strip、finance-metric-card、finance-command-panel、admin-command-panel、admin-tile-grid、ops-table-focus等现有共享类。 - 不新增一套新的页面局部设计系统。
- 按
frontend-design做实际页面质量判断,避免啰嗦、按钮挤压、说明堆叠和风格漂移。
R4. 验证与发布
- 本地必须通过 typecheck/build、UI design rules、focused Playwright、Trellis governance 和
git diff --check。 - Focused Playwright 必须覆盖 Wave4 财务页和 Wave5 管理缺口页。
- 部署给用户测试前必须跑部署脚本、公网 readiness 和 OAOPS1 只读巡检。
Acceptance Criteria
- Wave4 财务/运营页完成新基线复审;必要改动已实施,未发现回退。
- Wave5 管理配置缺口页完成统一骨架、状态摘要、命令区和主内容收敛。
- 历史 Wave4 覆盖页完成防回退视觉/交互检查。
- 没有改变后端 API、权限模型、付款状态机、审批规则语义、数据库 schema、企业微信配置或公网真实数据。
cd client && npm run typecheck通过。cd client && npm run build通过。- Focused Playwright 覆盖 Wave4-5 页面并通过。
node scripts/qa/check-ui-design-rules.mjs --strict通过。python3 ./.trellis/scripts/task.py validate 05-29-frontend-ux-wave4-5-finance-admin-refresh通过。node scripts/qa/check-trellis-governance.mjs和git diff --check通过。- 若部署给用户测试,已完成公网部署与公网检查并记录证据。
Implementation Result
2026-05-29 本地实施完成:
- Wave5 缺口页完成新基线补齐:
/system/approval-rules新增规则状态摘要、创建命令区和规则列表命令区,突出启用数、优先级和“只影响新单据”边界。/people迁移到ListWorkspace/WorkspaceHeader,新增人员状态摘要、企微 HR 主数据命令区、筛选命令区、批量动作区和PrimaryTable。/organization迁移到统一管理骨架,新增组织摘要、部门命令面板和统一组织节点卡片。/system/workspace迁移到统一管理骨架,新增模块显隐摘要、工作区基线面板、角色预设卡片和模块显隐主表。
- Wave4 财务/运营页未重写业务结构,继续复用历史已通过的财务 surface,并通过 focused Playwright 防回退。
- Focused Playwright 扩展到 Wave4-5 页面:付款批次、AP、票据池、审批规则、人员、组织、工作区、用户、主数据、通知渠道、系统设置、功能开关、流程定义、审计日志。
- 本轮没有改后端、数据库、权限、审批规则语义、付款状态机、企业微信配置、SMTP 或生产配置。
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 --strict
python3 ./.trellis/scripts/task.py validate 05-29-frontend-ux-wave4-5-finance-admin-refresh
node scripts/qa/check-trellis-governance.mjs
git diff --check
Deployment gate, only after approval:
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
OAOPS1_REPORT_DIR=.trellis/tasks/05-29-frontend-ux-wave4-5-finance-admin-refresh/research/postdeploy-<date>-wave4-5-public \
LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-oa-real-use-daily.sh
Out Of Scope
- 不新增真实付款渠道、ERP 写入、企业微信写入、数据库迁移或生产配置变更。
- 不新增通用文件中心。
- 不恢复差旅主线能力。
- 不把移动端改造成完整 PC 管理后台。
- 不删除已有业务能力;如发现业务流程缺陷,记录为后续业务流程任务。
Research References
research/scope-audit.md— Wave4 历史覆盖、Wave5 缺口和本任务页面清单。.trellis/tasks/archive/2026-05/05-27-pc-finance-admin-visual-wave4/— 历史 Wave4 范围、实现和部署证据。.trellis/tasks/archive/2026-05/05-28-frontend-ux-redesign/— Wave0-2 新基线和 Wave3-5 后续计划。.trellis/tasks/archive/2026-05/05-28-frontend-ux-wave3-business-mobile/— 最新 Wave3 refresh 和部署证据。
Technical Notes
- 重点代码区域:
client/src/pages/PaymentBatchesPage.tsxclient/src/pages/ApOperationsPage.tsxclient/src/pages/InvoicePoolPage.tsxclient/src/pages/ApprovalRulesPage.tsxclient/src/pages/PeoplePage.tsxclient/src/pages/OrganizationPage.tsxclient/src/pages/WorkspaceSetupPage.tsxclient/src/pages/UserManagementPage.tsxclient/src/pages/MasterDataPage.tsxclient/src/pages/NotificationChannelsPage.tsxclient/src/pages/SystemSettingsPage.tsxclient/src/pages/FeatureFlagsPage.tsxclient/src/pages/WorkflowDefinitionsPage.tsxclient/src/pages/AuditLogsPage.tsxclient/tests/e2e/pc-finance-admin-visual-wave4.spec.ts