优化PC核心工作流视觉 Wave2（05-27-pc-core-workflow-visual-wave2）

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

@@ -32,6 +32,51 @@ or hidden according to the active Issue; do not silently re-enable them.
 - Trial-facing PC lists must hide obvious TEST/SMOKE records by default when a
   page-level toggle exists; the toggle may reveal them for troubleshooting.
 
+## Convention: PC Operation List Density
+
+**What**: PC list/workflow pages that combine status metrics, tabs/filters,
+range controls, export and table/list content should reuse the shared operation
+classes in `client/src/index.css`:
+
+- `ops-status-strip` for compact status metrics.
+- `ops-command-bar`, `ops-command-bar__row`, `ops-command-bar__tabs`,
+  `ops-command-bar__actions` and `ops-filter-label` for tabs, filters and
+  secondary actions.
+- `ops-table-focus` for the primary desktop table container.
+- `ops-inline-alert` for temporary mode hints such as batch operation notices.
+
+**Why**: This keeps high-frequency PC pages dense and predictable without
+recreating page-local Tailwind command bars. It also lets `frontend-design`
+change the visual treatment once while preserving component contracts.
+
+**Example**:
+
+```tsx
+<StatStrip columns={4} className="ops-status-strip">
+  <MetricCard title="待办总数" value={summary.pendingTotal} />
+</StatStrip>
+
+<FilterBar className="ops-command-bar !p-3 md:!p-3.5">
+  <div className="ops-command-bar__row">
+    <Tabs value={status}>
+      <TabsList className="ops-command-bar__tabs !h-auto !justify-start !bg-slate-50">
+        <TabsTrigger value="pending">待处理</TabsTrigger>
+      </TabsList>
+    </Tabs>
+    <div className="ops-command-bar__actions">...</div>
+  </div>
+</FilterBar>
+
+<PrimaryTable className="hidden md:block ops-table-focus">...</PrimaryTable>
+```
+
+**Tests Required**:
+
+- `cd client && npm run typecheck`
+- `cd client && npm run build`
+- Focused Playwright screenshot coverage when changing login, Portal, primary
+  PC list pages or command-bar/table styling.
+
 ## Scenario: Auth Pages And PWA Updates
 
 ### 1. Scope / Trigger