文件
hyb-oa/.trellis/tasks/05-29-frontend-ux-wave4-5-finance-admin-refresh/prd.md
T

8.5 KiB
原始文件 Blame 文件历史

前端体验 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-design skill 是视觉与交互裁决来源;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.tsx
    • client/src/pages/ApOperationsPage.tsx
    • client/src/pages/InvoicePoolPage.tsx
    • client/src/pages/ApprovalRulesPage.tsx
    • client/src/pages/PeoplePage.tsx
    • client/src/pages/OrganizationPage.tsx
    • client/src/pages/WorkspaceSetupPage.tsx
    • 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
    • client/tests/e2e/pc-finance-admin-visual-wave4.spec.ts