统一业务列表 Ant Design 风格（05-31-unify-business-list-ant-design）

.trellis/spec/hyb-oa/frontend-react-vite-design.md

@@ -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**: