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

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

@@ -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.