优化财务与管理页视觉 Wave4（05-27-pc-finance-admin-visual-wave4）

2026-05-27 22:23:45 +08:00
@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "核对 Wave4 页面是否符合前端设计与验收边界"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "前端类型检查、构建和测试质量门禁"}
+{"file": ".trellis/spec/hyb-oa/docs-and-evidence.md", "reason": "Trellis 任务证据、截图和报告路径脱敏要求"}
+{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "治理检查和敏感信息排除"}
@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Wave4 前端视觉与交互裁决、截图和 PC 操作页约束"}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "React 组件拆分、复用和可维护性约束"}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "TypeScript 类型和 props 约束"}
+{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "财务、管理和测试证据不得泄露敏感资料"}
@@ -0,0 +1,66 @@
+# 实施记录
+
+## 执行策略
+
+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`。
+
+## 验证命令
+
+```bash
+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 约定。
@@ -0,0 +1,114 @@
+# 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/`
@@ -0,0 +1,26 @@
+{
+  "id": "pc-finance-admin-visual-wave4",
+  "name": "pc-finance-admin-visual-wave4",
+  "title": "PC财务与管理页视觉重塑 Wave4",
+  "description": "用 frontend-design 统一 PC 财务/付款/AP/票据池和 C 类管理页的视觉层级与操作密度。",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": "client",
+  "package": null,
+  "priority": "P2",
+  "creator": "shunli",
+  "assignee": "shunli",
+  "createdAt": "2026-05-27",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "main",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}