优化财务与管理页视觉 Wave4（05-27-pc-finance-admin-visual-wave4）
这个提交包含在：
@@ -299,3 +299,45 @@ onNeedRefresh() {
|
||||
<PasswordInput id="login-password" />
|
||||
<Link className="row-start-1" to="/forgot-password">忘记密码？</Link>
|
||||
```
|
||||
|
||||
## Convention: Finance And Admin Console Surfaces
|
||||
|
||||
**What**: PC finance and C-class admin pages should reuse Wave4 shared classes
|
||||
from `client/src/index.css` before creating page-local card/table layouts:
|
||||
|
||||
- `finance-status-strip`, `finance-metric-card`,
|
||||
`finance-metric-card__label` and `finance-metric-card__value` for compact
|
||||
five-column status summaries.
|
||||
- `finance-workspace-grid`, `finance-command-panel`, `finance-list-card` and
|
||||
`finance-list-card--active` for payment/AP/invoice operational workspaces.
|
||||
- `admin-command-panel`, `admin-tile-grid`, `admin-tile-card` and
|
||||
`admin-workspace-grid` for settings, workflow, feature-flag, user, master
|
||||
data, notification-channel and audit pages.
|
||||
|
||||
**Why**: Finance/admin pages are lower-frequency but high-risk operational
|
||||
surfaces. They need dense scanability, stable command regions and clear risk
|
||||
hierarchy without turning every page into a bespoke Tailwind card system.
|
||||
|
||||
**Example**:
|
||||
|
||||
```tsx
|
||||
<div className="finance-status-strip" data-testid="payment-batches-summary">
|
||||
<div className="finance-metric-card">
|
||||
<div className="finance-metric-card__label">可处理</div>
|
||||
<div className="finance-metric-card__value">{actionableCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="finance-workspace-grid">
|
||||
<section className="finance-command-panel">...</section>
|
||||
<section className="finance-command-panel">...</section>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Tests Required**:
|
||||
|
||||
- `cd client && npm run typecheck`
|
||||
- `cd client && npm run build`
|
||||
- Focused Playwright coverage for changed finance/admin pages. The Wave4
|
||||
baseline test is `client/tests/e2e/pc-finance-admin-visual-wave4.spec.ts`.
|
||||
- UI design rules check when changing these shared classes.
|
||||
|
||||
@@ -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": {}
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户