统一业务列表 Ant Design 风格（05-31-unify-business-list-ant-design）
这个提交包含在：
@@ -313,6 +313,37 @@ pages must pick one primary template before implementation:
|
||||
- Focused Playwright or screenshot checks for changed A-class, mobile or shared
|
||||
template surfaces.
|
||||
|
||||
## Convention: Business Template Components
|
||||
|
||||
**What**: Operational pages should reuse thin template components for layout and
|
||||
interaction coordinates, while keeping business fields, permission checks, state
|
||||
matrices and actions explicit in each page.
|
||||
|
||||
**Contracts**:
|
||||
|
||||
- Use template components for repeated page structure instead of page-local
|
||||
table cards, custom command bars or copied empty states. For business ledger
|
||||
lists, prefer `BusinessListToolbar`, `BusinessTable`, `BusinessTableFrame`,
|
||||
`BusinessMobileList` and shared empty states from
|
||||
`client/src/components/patterns/BusinessListTemplate.tsx`.
|
||||
- Do not create a configuration-driven page generator for reimbursement,
|
||||
procurement, contracts, projects, assets, payments, AP or invoices. These
|
||||
pages have different permissions, state transitions, attachment rules and
|
||||
financial actions; hiding those differences in schema config increases
|
||||
maintenance risk for the solo-developer workflow.
|
||||
- PC ledger pages should render filters and table body as separate surfaces:
|
||||
command bar first, table/list after it. Do not place the primary table inside
|
||||
another card just to add a local title such as `台账列表`, `项目列表`,
|
||||
`批次列表` or `票据列表`.
|
||||
- Mobile may keep card rows, but the card fields and row actions should mirror
|
||||
the PC table columns and operation column.
|
||||
- Details, edits and approval pages should follow the same template philosophy:
|
||||
shared shell and action placement, explicit business content. Implement them
|
||||
incrementally through focused Trellis tasks.
|
||||
|
||||
**Why**: Template components enforce mature Ant Design / Ant Design Pro style
|
||||
layout consistency without turning business pages into a brittle generator.
|
||||
|
||||
## Convention: Global Shell And Page Header Baseline
|
||||
|
||||
**What**: PC page redesigns should preserve the shared Wave0-2 shell and
|
||||
@@ -1590,7 +1621,9 @@ 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.
|
||||
admin summaries, analytics surfaces or true dashboards. Ordinary business
|
||||
ledger lists such as `付款` and `票据` should prefer `BusinessListTemplate`
|
||||
table surfaces instead of standalone summary chips/cards.
|
||||
- `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
|
||||
@@ -1604,17 +1637,14 @@ 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-status-strip" data-testid="approval-rules-summary">
|
||||
<div className="finance-metric-card">
|
||||
<div className="finance-metric-card__label">可处理</div>
|
||||
<div className="finance-metric-card__value">{actionableCount}</div>
|
||||
<div className="finance-metric-card__label">启用规则</div>
|
||||
<div className="finance-metric-card__value">{enabledCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="finance-workspace-grid">
|
||||
<section className="finance-command-panel">...</section>
|
||||
<section className="finance-command-panel">...</section>
|
||||
</div>
|
||||
<BusinessTable testId="payment-batches-table">...</BusinessTable>
|
||||
```
|
||||
|
||||
**Tests Required**:
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "检查实现是否符合统一列表、命令栏、操作列、详情入口和测试要求。"}
|
||||
{"file": ".trellis/tasks/05-31-unify-business-list-ant-design/research/ant-design-business-list-pattern.md", "reason": "检查实现是否符合本任务采用的 Ant Design / ProTable 业务列表参考模式。"}
|
||||
@@ -0,0 +1,2 @@
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "统一业务列表页面的视觉、交互、布局和验证规则。"}
|
||||
{"file": ".trellis/tasks/05-31-unify-business-list-ant-design/research/ant-design-business-list-pattern.md", "reason": "本任务采用的 Ant Design / ProTable 业务列表参考模式。"}
|
||||
@@ -0,0 +1,20 @@
|
||||
# Implementation Notes
|
||||
|
||||
## Plan
|
||||
|
||||
1. 新增轻量 `BusinessListTemplate` 组件族，复用现有 `ListWorkspace`、`FilterBar`、`PrimaryTable` 和 `ops-*` 样式。
|
||||
2. 移除报销页顶部三个圆形任务按钮，改回标准状态 tabs 和台账工具。
|
||||
3. 将采购、资产列表拆成命令栏 + 表格，不再把主表格嵌在卡片/筛选容器里。
|
||||
4. 将合同、项目、付款 PC 默认列表从卡片流改为表格，移动端保留卡片表达。
|
||||
5. 移除票据和付款列表上的独立摘要 chips，测试锚点改为表格。
|
||||
6. 更新前端设计 spec，沉淀“模板组件 + 页面契约，不做页面生成器”的规则。
|
||||
|
||||
## Verification
|
||||
|
||||
* `cd client && npm run typecheck`
|
||||
* `cd client && npm run build`
|
||||
* `r103-cross-page-ui-consistency + pc-finance-admin-visual-wave4 + r102-reimbursement-main-flow`：10 passed
|
||||
* `pc-detail-mobile-visual-wave3 -g "Wave3 PC"`：1 passed
|
||||
* `git diff --check`
|
||||
* `python3 ./.trellis/scripts/task.py validate 05-31-unify-business-list-ant-design`
|
||||
* `node scripts/qa/check-trellis-governance.mjs`
|
||||
@@ -0,0 +1,92 @@
|
||||
# 统一业务列表 Ant Design 风格
|
||||
|
||||
## Goal
|
||||
|
||||
统一报销、采购、合同、项目、资产、付款、应付账款、票据等业务列表页面的 PC 列表形态，采用成熟 Ant Design / Ant Design Pro 的企业后台心智：页头、查询区、表格、右侧操作列、分页和折叠工具区。目标是减少解释性文案、装饰性入口和页面级例外，让小团队用户一眼知道在哪里查、在哪里新建、在哪里处理。
|
||||
|
||||
## What I Already Know
|
||||
|
||||
* 用户明确认为报销页顶部三个圆形按钮没有必要，且所有列表页应统一样式。
|
||||
* 当前产品面向国内小于 10 人科技初创公司，OA 页面不追求创新控件，优先参考成熟系统。
|
||||
* 系统没有 ERP，以后也不会有 ERP；财务相关入口使用 `付款`、`应付账款`、`票据` 等业务名。
|
||||
* 请假和日常考勤由企微承载，OA 不重复处理普通请假/打卡流程。
|
||||
* 视觉与交互裁决使用 `frontend-design` skill；本任务在企业 OA 场景下走克制、密集、Ant Design Pro 风格。
|
||||
* 现有规范已要求：普通业务台账使用单列列表页，不使用默认左右分栏；状态摘要使用 tabs/chips，不使用大状态卡；筛选默认一行；操作列在右侧。
|
||||
|
||||
## Current Findings
|
||||
|
||||
* `ReimbursementsPage.tsx` 在列表上方额外放了三个圆形任务按钮，应移除或并入状态 tabs。
|
||||
* `AssetRegistryPage.tsx` 列表嵌在 `FilterBar` 内，台账工具是大表单卡片，列表结构与报销/采购不完全一致。
|
||||
* `ContractsRegistryPage.tsx` 列表仍是卡片流，筛选与编辑面板占位较重，不像标准表格列表。
|
||||
* `ProjectsPage.tsx` 使用项目卡片流和 `SectionPanel`，缺少统一表格列和右侧操作列。
|
||||
* `PaymentBatchesPage.tsx` 列表是 2/3 列卡片，和业务台账列表不一致。
|
||||
* `InvoicePoolPage.tsx` 与 `InvoiceListCard.tsx` 有独立摘要 chips，列表容器、筛选位置和 table wrapper 与其他页不一致。
|
||||
* `ApOperationsPage.tsx` 已较接近标准表格，但局部 `finance-command-panel` 嵌套较多，仍需和统一命令栏、表格容器收敛。
|
||||
|
||||
## Scope
|
||||
|
||||
本任务修改前端列表体验与相关前端测试，范围包括共享列表模板、报销、采购、资产、合同、项目、付款、票据页面，以及稳定设计规则沉淀。后端接口、数据库、权限模型、审批引擎和公网部署不在范围内。
|
||||
|
||||
## Requirements
|
||||
|
||||
* 采用“模板组件 + 页面契约”的方式推进，而不是代码生成器：
|
||||
* `BusinessListTemplate`：统一业务台账列表页的页头、查询区、工具区、表格、空状态、分页和移动端卡片。
|
||||
* `BusinessDetailTemplate`：统一详情页的顶部摘要、主事实区、证据/关联区、右侧状态与操作区、历史记录区。
|
||||
* `BusinessEditTemplate`：统一新建/编辑页的分组表单、底部保存/提交动作、错误提示、离开确认。
|
||||
* `ApprovalDetailTemplate`：统一待处理/审批详情页的一条操作栏、原因输入、确认弹窗和处理历史。
|
||||
* 本任务的实现重点先落在 `BusinessListTemplate` 和列表页改造；详情、编辑、审批详情模板先记录规则，后续按页面分批落地。
|
||||
* 报销页顶部三个圆形任务按钮删除，不保留为单独首屏区域；对应数量如仍有价值，放入状态 tabs 或紧凑 chips。
|
||||
* 所有业务台账列表首屏使用同一结构：
|
||||
* 页面标题区：标题 + 一个主操作按钮；低频操作进入 `台账工具` 或 `更多`。
|
||||
* 查询区：搜索、状态、范围三类高频筛选默认一行；日期、供应商、法体、成本中心、测试数据、导出等进入 `筛选` / `台账工具`。
|
||||
* 内容区：PC 默认表格，移动端继续卡片列表。
|
||||
* 表格列：对象身份、对象摘要/相对方/人员、金额或日期、状态、右侧操作。
|
||||
* 操作列：默认 `查看详情`、`处理`、`继续编辑`、`查看进度`；低频和风险动作进入 `更多`。
|
||||
* 分页：表格下方右侧或现有统一 Pagination，不在卡片流里单独发明。
|
||||
* 普通列表不显示解释性语句，例如“这里展示与你相关的记录”“待处理是需要处理的工作”。
|
||||
* 合同、项目、付款等当前卡片流列表改为统一表格；卡片只保留移动端或真正需要展示图文/摘要的非台账页面。
|
||||
* 资产、合同、付款、票据的工具区只在用户点击后展开，且位置和样式统一。
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
* [x] 形成可复用的业务列表模板/组件契约，页面不再各自拼装不同列表框架。
|
||||
* [x] 报销列表不再显示三个圆形任务按钮。
|
||||
* [x] 报销、采购、资产、合同、项目、付款、应付账款、票据的 PC 列表使用一致的页头、命令栏、表格容器、状态 tag、操作列和空状态。
|
||||
* [x] 合同、项目、付款 PC 列表不再以多列卡片作为默认展示。
|
||||
* [x] 默认可见筛选不超过一行；高级筛选与导出类能力归入 `筛选` / `台账工具`。
|
||||
* [x] 列表页不出现重复解释普通流程的文案。
|
||||
* [x] 移动端列表仍可正常浏览和进入详情。
|
||||
|
||||
## Test Plan
|
||||
|
||||
* `cd client && npm run typecheck`
|
||||
* `cd client && npm run build`
|
||||
* `cd client && E2E_BASE_URL=http://127.0.0.1:5173 npx playwright test tests/e2e/r103-cross-page-ui-consistency.spec.ts tests/e2e/pc-finance-admin-visual-wave4.spec.ts --workers=1 --reporter=list`
|
||||
* `cd client && E2E_BASE_URL=http://127.0.0.1:5173 npx playwright test tests/e2e/r102-reimbursement-main-flow.spec.ts --workers=1 --reporter=list`
|
||||
* `cd client && E2E_BASE_URL=http://127.0.0.1:5173 npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts -g "Wave3 PC" --workers=1 --reporter=list`
|
||||
* `git diff --check`
|
||||
* `python3 ./.trellis/scripts/task.py validate 05-31-unify-business-list-ant-design`
|
||||
* `node scripts/qa/check-trellis-governance.mjs`
|
||||
|
||||
## Definition Of Done
|
||||
|
||||
* 前端类型检查通过：`cd client && npm run typecheck`
|
||||
* 前端构建通过：`cd client && npm run build`
|
||||
* 运行受影响列表页的聚焦 Playwright/视觉检查。
|
||||
* Trellis task 校验和治理检查通过。
|
||||
* 需要沉淀的稳定规则更新到 `.trellis/spec/hyb-oa/frontend-react-vite-design.md` 或现有文档，不另起散乱文档。
|
||||
|
||||
## Out Of Scope
|
||||
|
||||
* 不引入 Ant Design 组件库替换当前 UI 基座。
|
||||
* 不在本任务一次性重构所有详情页、编辑页和审批详情页；只沉淀模板规则，优先交付列表统一。
|
||||
* 不做页面代码生成器；业务页面仍显式写字段、权限、状态和动作，只复用结构、样式和操作坐标。
|
||||
* 不重做后端接口、权限模型、审批状态机或真实付款能力。
|
||||
* 不处理企微普通请假/打卡流程。
|
||||
* 不做公网部署，除非后续单独获得明确批准。
|
||||
|
||||
## Technical Notes
|
||||
|
||||
* 设计参考：Ant Design / Ant Design Pro 成熟企业后台列表页心智。
|
||||
* 当前共享组件：`ListWorkspace`、`WorkspaceHeader`、`FilterBar`、`PrimaryTable`、`Pagination`、`StatusBadge`。
|
||||
* 当前共享样式：`ops-command-bar`、`ops-command-bar__row`、`ops-command-bar__tabs`、`ops-command-bar__actions`、`ops-table-focus`、`table-header`、`table-th`、`table-row`、`table-td`。
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
# Ant Design 业务列表模式参考
|
||||
|
||||
## Source Notes
|
||||
|
||||
* Ant Design Table 文档强调表格用于展示结构化数据，并围绕行选择、排序筛选、固定列、分页和操作列组织列表能力。
|
||||
* Ant Design Pro / ProTable 的常见心智是：查询表单、工具栏、表格主体、分页、行操作。它适合中后台的业务台账页面。
|
||||
* 本项目不直接引入 Ant Design 依赖；只参考信息架构和交互习惯，继续使用现有 React/Vite/Tailwind/shadcn 风格组件。
|
||||
|
||||
## Applied Pattern For hyb-oa
|
||||
|
||||
* Page header: 页面标题 + 主操作。
|
||||
* Query bar: 搜索、状态、范围等高频筛选。
|
||||
* Toolbar: `筛选` / `台账工具` / `更多` 收纳低频能力。
|
||||
* Table: 对象身份、对象摘要、关键金额/日期、状态、操作。
|
||||
* Row action: 右侧固定操作列，主动作明确，低频动作进 `更多`。
|
||||
* Pagination: 表格底部统一分页。
|
||||
|
||||
## Design Decision
|
||||
|
||||
业务台账页默认不要使用圆形按钮、摘要大卡、多列卡片流、左右分栏或解释性说明。除非页面是工作台、统计分析或详情页，否则首屏应优先让用户看到可查询、可排序/筛选、可进入详情的业务列表。
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "unify-business-list-ant-design",
|
||||
"name": "unify-business-list-ant-design",
|
||||
"title": "统一业务列表 Ant Design 风格",
|
||||
"description": "统一业务台账列表页为成熟 Ant Design Pro 风格，抽取轻量列表模板并改造报销、采购、资产、合同、项目、付款、应付账款和票据列表。",
|
||||
"status": "in_progress",
|
||||
"dev_type": null,
|
||||
"scope": "client",
|
||||
"package": "hyb-oa",
|
||||
"priority": "P2",
|
||||
"creator": "shunli",
|
||||
"assignee": "shunli",
|
||||
"createdAt": "2026-05-31",
|
||||
"completedAt": null,
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户