重构前端 Wave0-2 体验基线（05-28-frontend-ux-redesign）

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

@@ -152,6 +152,45 @@ change the visual treatment once while preserving component contracts.
 - Focused Playwright screenshot coverage when changing login, Portal, primary
   PC list pages or command-bar/table styling.
 
+## Convention: Global Shell And Page Header Baseline
+
+**What**: PC page redesigns should preserve the shared Wave0-2 shell and
+header baseline instead of recreating page-local wrappers:
+
+- `AppShellLayout` owns the PC shell background and content offset through
+  `app-shell` and `app-shell-main`.
+- `Sidebar` and `NavLinks` own primary navigation grouping. The mental model is
+  `工作` -> `业务` -> `财务` -> `管理` -> collapsed `更多`.
+- `Topbar` is a compact command surface: page title, group badge, user context,
+  global search and notifications. Do not expand it back into a large hero.
+- `PageHeader` and `WorkspaceHeader` should use `page-header-shell`,
+  `page-header-shell__eyebrow`, `page-header-shell__title`,
+  `page-header-shell__subtitle` and `page-header-shell__actions`.
+- Auth guidance and step hints may use `ux-command-note`, `ux-step-list` and
+  `ux-step-item` when they explain the next action without adding page-local
+  warning cards.
+
+**Why**: The shell/header baseline gives Wave3-5 pages a stable visual entry
+point and prevents each route from inventing a different title/action layout.
+
+**Example**:
+
+```tsx
+<WorkspaceHeader
+  eyebrow="审批"
+  title="审批中心"
+  subtitle="先看待处理，再进入详情核对依据。"
+/>
+```
+
+**Tests Required**:
+
+- `cd client && npm run typecheck`
+- `cd client && npm run build`
+- Focused Playwright coverage when changing `AppShellLayout`, `Sidebar`,
+  `Topbar`, `NavLinks`, `PageHeader`, `WorkspaceHeader`, login, Portal or other
+  A-class pages.
+
 ## Convention: Detail And Mobile Command Surfaces
 
 **What**: PC detail pages and notification-like flows should reuse the Wave3