优化详情与移动关键页视觉 Wave3（05-27-pc-detail-mobile-visual-wave3）

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

@@ -77,6 +77,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: Detail And Mobile Command Surfaces
+
+**What**: PC detail pages and notification-like flows should reuse the Wave3
+surface classes in `client/src/index.css` before adding page-local Tailwind
+card systems:
+
+- `detail-workspace-grid` for the main PC detail two-column workspace.
+- `detail-command-panel`, `detail-fact-grid` and `detail-fact-card` for compact
+  status, summary, payment, export and evidence facts.
+- `detail-evidence-card` for attachments, invoices and other proof material.
+- `detail-timeline` and `detail-timeline-item` for approval progress and
+  history.
+- `detail-action-stack` and `detail-action-card` for approve/reject/return,
+  payment and other high-risk command groups.
+- `notification-inbox`, `notification-row-card` and
+  `notification-row-card--unread` for PC notification streams; avoid reverting
+  notifications to a desktop table unless a task explicitly requires tabular
+  comparison.
+
+Mobile key pages should reuse the mobile command classes in
+`client/src/styles/mobile-touch.css`:
+
+- `mobile-focus-card` for the current task, current list or account summary.
+- `mobile-command-surface` for tabs, search and filters.
+- `mobile-list-card--focus` and `mobile-list-card--unread` for state emphasis.
+
+**Why**: Detail pages should feel like quiet command surfaces: status, summary,
+primary action, evidence and history have predictable places. Mobile pages
+should stay card/list based, with no PC tables, no horizontal overflow and no
+button text squeeze.
+
+**Tests Required**:
+
+- `cd client && npm run typecheck`
+- `cd client && npm run build`
+- Focused Playwright screenshot coverage for changed PC detail, notification
+  and mobile pages.
+- UI design rules check when changing shared visual classes.
+
 ## Scenario: Auth Pages And PWA Updates
 
 ### 1. Scope / Trigger

.trellis/tasks/05-27-pc-detail-mobile-visual-wave3/check.jsonl

@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "核对 Wave3 页面是否符合前端设计与验收边界"}
+{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "前端类型检查、构建和测试质量门禁"}
+{"file": ".trellis/spec/hyb-oa/docs-and-evidence.md", "reason": "Trellis 任务证据、截图和报告路径脱敏要求"}
+{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "治理检查和敏感信息排除"}

.trellis/tasks/05-27-pc-detail-mobile-visual-wave3/implement.jsonl

@@ -0,0 +1,4 @@
+{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Wave3 前端视觉与交互裁决、截图和移动约束"}
+{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "React 组件拆分、复用和可维护性约束"}
+{"file": ".trellis/spec/frontend/type-safety.md", "reason": "TypeScript 类型和 props 约束"}
+{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "详情、通知和测试证据不得泄露敏感资料"}

.trellis/tasks/05-27-pc-detail-mobile-visual-wave3/implement.md

@@ -0,0 +1,48 @@
+# 实施记录
+
+## 执行策略
+
+1. 先审视目标页面的组件结构和现有样式，复用 Wave2 已建立的工作台语言。
+2. 只增加必要的共享样式或小组件，不重写业务逻辑。
+3. PC 详情页按“状态/摘要/动作/证据/历史”重新压缩层级。
+4. 移动关键页按单手办理和企业微信 WebView 约束处理密度、按钮和列表。
+5. 增加 focused Playwright mock 视觉用例，覆盖 PC 和移动截图。
+
+## 风险控制
+
+- 不修改后端 API、schema、权限、审批状态机、通知投递、企业微信和部署环境变量。
+- 不写公网业务数据。
+- 动作按钮、确认弹窗、错误提示和权限判断必须保持可达。
+- 移动页不得回退到 PC 表格体验。
+
+## 待记录
+
+## 实施改动
+
+- PC 报销详情 `/reimbursements/:id`：按“办理摘要、付款状态、关联项目、附件材料、明细与票据、审批进度/记录、可执行动作”重排层级，复用新的 detail surface 样式。
+- PC 审批详情 `/workflow/tasks/:id`：审批对象摘要、审批动作和处理历史改为紧凑控制台结构，动作区使用统一 action card。
+- PC 通知中心 `/notifications`：桌面端从表格改为通知流卡片，保留未读筛选、类型筛选、直达业务和标记已读。
+- 移动关键页 `/mobile`、`/mobile/reimbursements`、`/mobile/approvals`、`/mobile/approvals/:taskId`、`/mobile/notifications`、`/mobile/me`：增加当前任务/列表高亮、移动命令面板和未读/重点卡片状态，不引入 PC 表格。
+- 新增 focused Playwright 用例 `client/tests/e2e/pc-detail-mobile-visual-wave3.spec.ts`，mock API 覆盖 PC 与移动截图。
+- 将 Wave3 可复用 detail/mobile surface 规则沉淀到 `.trellis/spec/hyb-oa/frontend-react-vite-design.md`。
+
+## 验证命令
+
+- `cd client && npm run typecheck`：通过。
+- `cd client && npm run build`：通过。
+- `cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list`：2 passed。
+- `cd client && npx playwright test tests/e2e/pc-core-workflow-visual-wave2.spec.ts --workers=1 --reporter=list`：1 passed，用于确认 Wave2 核心页面无明显回退。
+- `node scripts/qa/check-ui-design-rules.mjs`：0 findings。
+- `python3 ./.trellis/scripts/task.py validate 05-27-pc-detail-mobile-visual-wave3`：通过。
+- `node scripts/qa/check-trellis-governance.mjs`：通过。
+- `git diff --check`：通过。
+
+## 截图证据
+
+- Focused 截图输出：`output/playwright/pc-detail-mobile-visual-wave3/`
+- 覆盖文件：`01-pc-reimbursement-detail.png`、`02-pc-workflow-detail.png`、`03-pc-notifications.png`、`04-mobile-home.png`、`05-mobile-reimbursements.png`、`06-mobile-approvals.png`、`07-mobile-approval-detail.png`、`08-mobile-notifications.png`、`09-mobile-me.png`。
+
+## 收尾判断
+
+- 本轮未修改后端 API、数据库 schema、权限模型、审批状态机、企业微信配置或 SMTP 配置。
+- 本轮未执行公网部署和公网真实环境 smoke；部署与公网复核应作为合并后的下一步。

.trellis/tasks/05-27-pc-detail-mobile-visual-wave3/prd.md

@@ -0,0 +1,91 @@
+# PC详情与移动关键页视觉重塑 Wave3
+
+## Goal
+
+在 Wave2 已完成登录页、工作台、报销列表和审批中心后，继续用 `frontend-design` 收敛高频“点进去之后”的体验：报销详情、审批详情、通知中心和移动关键页。目标是让真实试运行用户从列表进入详情、从通知进入待办、从手机进入报销/审批时，仍然看到统一、简洁、低噪音的 Hyinda 工作台体验。
+
+## Start Confirmation
+
+- 用户在 2026-05-27 确认“开始”。
+- 本任务是前端视觉与交互重塑，不改变后端 API、权限模型、审批规则、状态机、数据库 schema、企业微信配置或公网真实数据。
+- 设计裁决来源：`frontend-design` skill；项目事实源仍按 Trellis task、`.trellis/spec/hyb-oa/` 和 `docs/` 执行。
+
+## Scope
+
+- 报销详情 `/reimbursements/:id`：
+  - 降低说明性文案和卡片堆叠。
+  - 强化单据状态、审批进度、票据/附件、付款/财务状态和主要动作。
+  - 保留现有提交、撤回、审批、付款、打印、导出、附件和审计相关能力。
+- 审批详情 `/workflow/tasks/:id`：
+  - 统一为紧凑审批控制台。
+  - 强化当前节点、申请摘要、风险提示、审批动作和历史轨迹。
+  - 保留通过、驳回、退回、转审等现有入口。
+- 通知中心 `/notifications`：
+  - 将通知列表从“消息堆叠”收敛为可扫描的任务/提醒流。
+  - 强化未读、类型、关联业务和批量处理入口。
+- 移动关键页：
+  - `/mobile`、`/mobile/reimbursements`、`/mobile/approvals`、`/mobile/me`、`/mobile/notifications`。
+  - 不引入 PC 表格，不让按钮出屏，不堆叠说明文字。
+  - 保留企业微信 WebView 入口语义、底部导航、PDF 上传和审批操作可达性。
+
+## Out of Scope
+
+- 不改财务/付款/AP/票据池和 C 类管理页；这些进入 Wave4。
+- 不改后端接口、数据模型、权限、审批状态机、通知投递逻辑、企业微信 OAuth 或 SMTP 配置。
+- 不执行公网真实业务写入、真实付款、ERP 写入、数据库重置或企业微信写入。
+- 不把 `docs/产品设计规则.md` 重新扩展为视觉规则。
+
+## Design Direction
+
+- Tone：quiet command surface，克制、紧凑、面向办理。
+- Composition：详情页用“状态带 + 关键摘要 + 主动作 + 证据/历史”的层级；移动端用任务卡和固定动作区，不复制 PC。
+- Copy：删除“解释系统如何工作”的文本，保留业务下一步、风险和不可逆动作提示。
+- Density：PC 详情页允许更高信息密度；移动端优先单手可扫、按钮稳定、不横向溢出。
+- Safety：涉及付款、驳回、退回、删除、附件和导出等动作，保持原确认与错误提示。
+
+## Requirements
+
+- Wave3 页面视觉必须与 Wave2 的登录页、Portal、报销列表和审批待办保持同一套工作台语言。
+- 报销详情和审批详情必须突出当前可做动作，不让次级信息抢占首屏。
+- 通知中心必须能快速区分未读、业务类型和后续入口。
+- 移动关键页必须在 390px 和常见企业微信 WebView 宽度下无横向滚动、无桌面表格、无按钮文字溢出。
+- 现有业务能力不能丢失；若入口降级为次级工具，必须仍可达。
+- 页面和测试不得保存密码、token、Secret、完整账号、真实票据、合同正文、银行资料、完整本地路径或 raw payload。
+
+## Acceptance Criteria
+
+- [x] 报销详情、审批详情、通知中心和移动关键页完成统一视觉与交互层级收敛。
+- [x] Wave2 页面不发生明显回退。
+- [x] PC 详情页首屏核心状态、主要动作和风险/证据入口更清晰。
+- [x] 移动关键页无 PC 表格、无横向溢出、无按钮文字挤压。
+- [x] `cd client && npm run typecheck` 通过。
+- [x] `cd client && npm run build` 通过。
+- [x] Focused Playwright 覆盖报销详情、审批详情、通知中心和移动关键页，并生成截图证据。
+- [x] `node scripts/qa/check-trellis-governance.mjs` 与 `git diff --check` 通过。
+
+## Test Plan
+
+```bash
+cd client && npm run typecheck
+cd client && npm run build
+cd client && npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list
+node scripts/qa/check-trellis-governance.mjs
+git diff --check
+```
+
+发布前后按需补充：
+
+```bash
+SYNC_ENV=0 LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash deploy/trialrun/deploy.sh
+LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-live-smoke-readiness.sh
+E2E_BASE_URL=https://oa.hyinda.com npx playwright test tests/e2e/pc-detail-mobile-visual-wave3.spec.ts --workers=1 --reporter=list
+```
+
+## Technical Notes
+
+- 前端设计 skill：`frontend-design`
+- 前端 spec：`.trellis/spec/hyb-oa/frontend-react-vite-design.md`
+- 前端基础 spec：`.trellis/spec/frontend/`
+- 产品体验事实源：`docs/产品设计规则.md`
+- Wave2 参考：`.trellis/tasks/archive/2026-05/05-27-05-27-pc-core-workflow-visual-wave2/`
+- 现有视觉巡检：`client/tests/e2e/oafront3-pc-readonly-visual.spec.ts`

.trellis/tasks/05-27-pc-detail-mobile-visual-wave3/task.json

@@ -0,0 +1,26 @@
+{
+  "id": "pc-detail-mobile-visual-wave3",
+  "name": "pc-detail-mobile-visual-wave3",
+  "title": "PC详情与移动关键页视觉重塑 Wave3",
+  "description": "用 frontend-design 统一 PC 报销详情、审批详情、通知中心和移动关键页的视觉层级与交互密度。",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": "client",
+  "package": null,
+  "priority": "P2",
+  "creator": "shunli",
+  "assignee": "shunli",
+  "createdAt": "2026-05-27",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "main",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}

client/src/index.css

@@ -429,6 +429,104 @@
     @apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
   }
 
+  .detail-workspace-grid {
+    @apply grid gap-5 xl:grid-cols-[minmax(0,1.45fr),minmax(300px,0.72fr)];
+  }
+
+  .detail-command-panel {
+    border-color: rgba(203, 213, 225, 0.92);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xs);
+    @apply border p-3.5 md:p-4;
+  }
+
+  .detail-fact-grid {
+    @apply grid gap-2.5 md:grid-cols-2;
+  }
+
+  .detail-fact-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.92);
+    border-radius: var(--radius-sm);
+    @apply border px-3 py-2.5 text-sm;
+  }
+
+  .detail-fact-card__label {
+    color: var(--color-text-tertiary);
+    @apply text-xs font-semibold;
+  }
+
+  .detail-fact-card__value {
+    color: var(--color-text-primary);
+    @apply mt-1 break-words font-medium;
+  }
+
+  .detail-evidence-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(248, 250, 252, 0.72);
+    border-radius: var(--radius-sm);
+    @apply border px-3.5 py-3 text-sm;
+  }
+
+  .detail-evidence-card--accent {
+    border-color: rgba(0, 57, 138, 0.2);
+    background: rgba(0, 57, 138, 0.045);
+  }
+
+  .detail-timeline {
+    @apply space-y-2.5;
+  }
+
+  .detail-timeline-item {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.94);
+    border-radius: var(--radius-sm);
+    @apply border px-3 py-2.5 text-sm;
+  }
+
+  .detail-timeline-item--current {
+    border-color: rgba(0, 57, 138, 0.28);
+    background: rgba(0, 57, 138, 0.055);
+  }
+
+  .detail-timeline-item--done {
+    border-color: rgba(16, 185, 129, 0.28);
+    background: rgba(236, 253, 245, 0.88);
+  }
+
+  .detail-action-stack {
+    @apply grid gap-3;
+  }
+
+  .detail-action-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: var(--radius-sm);
+    @apply border p-3.5;
+  }
+
+  .notification-inbox {
+    @apply space-y-3;
+  }
+
+  .notification-row-card {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: var(--radius-sm);
+    @apply border px-4 py-3 transition-colors hover:border-slate-300 hover:bg-slate-50/50;
+  }
+
+  .notification-row-card--unread {
+    border-color: rgba(0, 57, 138, 0.22);
+    background: rgba(0, 57, 138, 0.035);
+  }
+
+  .notification-row-card__meta {
+    color: var(--color-text-tertiary);
+    @apply text-xs font-medium;
+  }
+
   .badge-success {
     @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/15;
   }

client/src/pages/MobileApprovalsPage.tsx

@@ -1022,7 +1022,7 @@ export function MobileApprovalsPage() {
       ) : (
         <PageHeader
           title={canAccessRemoteApprovals ? "审批" : "审批进度"}
-          subtitle={canAccessRemoteApprovals ? "待我审批和已处理。" : "查看我发起的申请进度。"}
+          subtitle={canAccessRemoteApprovals ? "处理待办，查看已处理。" : "查看我发起的申请进度。"}
         />
       )}
 
@@ -1104,14 +1104,14 @@ export function MobileApprovalsPage() {
           <span className={`mobile-section-meta ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
         </div>
 
-        <Tabs value={taskTab} onValueChange={handleTaskTabChange}>
+        <div className="mobile-command-surface">
-          <TabsList className="flex w-full justify-start gap-1">
+          <Tabs value={taskTab} onValueChange={handleTaskTabChange}>
-            <TabsTrigger value="pending">待我审批</TabsTrigger>
+            <TabsList className="flex w-full justify-start gap-1">
-            <TabsTrigger value="completed" disabled={!canUseRemote}>已处理</TabsTrigger>
+              <TabsTrigger value="pending">待我审批</TabsTrigger>
-          </TabsList>
+              <TabsTrigger value="completed" disabled={!canUseRemote}>已处理</TabsTrigger>
-        </Tabs>
+            </TabsList>
+          </Tabs>
 
-        <div className="space-y-3">
           <Input
             data-testid="mobile-approvals-search"
             value={searchInput}
@@ -1119,7 +1119,7 @@ export function MobileApprovalsPage() {
             placeholder="搜索审批"
           />
 
-          <details className="mobile-subcard bg-zinc-50/70 text-sm">
+          <details className="mobile-subcard bg-white text-sm">
             <summary className="cursor-pointer select-none font-medium text-zinc-700">
               筛选与批量
             </summary>
@@ -1318,7 +1318,7 @@ export function MobileApprovalsPage() {
       ) : null}
 
       {isPushDetail ? (
-      <section className="mobile-card mobile-page-stack scroll-mt-4" data-testid="mobile-approvals-detail">
+      <section className="mobile-card mobile-focus-card mobile-page-stack scroll-mt-4" data-testid="mobile-approvals-detail">
         <h3 className="mobile-section-title">处理</h3>
 
         {!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}

client/src/pages/MobileMePage.tsx

@@ -89,9 +89,9 @@ export function MobileMePage() {
 
   return (
     <PageScaffold className="space-y-3 pb-4">
-      <PageHeader title="我的" />
+      <PageHeader title="我的" meta={<span className="badge-neutral">账号与入口</span>} />
 
-      <SectionPanel title="个人信息">
+      <SectionPanel title="个人信息" className="mobile-focus-card">
         <div className="mobile-slot-row mobile-me-profile-row" data-testid="mobile-me-profile-row">
           <div className="mobile-slot-avatar mobile-me-avatar-slot" data-testid="mobile-me-avatar-slot">
             <EmployeeAvatar name={me?.name ?? "员工"} src={profile?.avatarUrl} size="md" />
@@ -122,7 +122,7 @@ export function MobileMePage() {
         </div>
       </SectionPanel>
 
-      <SectionPanel title="更多入口">
+      <SectionPanel title="更多入口" description="常用移动入口集中在这里。">
         <div className="mobile-entry-grid mobile-me-entry-grid" data-testid="mobile-more-links">
           <MobileActionLink to="/mobile/notifications" label="通知中心" icon="notifications" />
           <MobileActionLink to="/mobile/leave" label="请假" icon="event_available" />

client/src/pages/MobileNotificationsPage.tsx

@@ -137,7 +137,14 @@ export function MobileNotificationsPage() {
         />
 
       <section className="mobile-card mobile-page-stack" data-testid="mobile-notifications-list">
-        <div className="mobile-page-stack">
+        <div className="mobile-section-header">
+          <div>
+            <h3 className="mobile-section-title">通知流</h3>
+            <p className="mobile-list-card__subtitle mt-1">未读优先，点击直达业务详情</p>
+          </div>
+        </div>
+
+        <div className="mobile-command-surface">
           <Tabs
             data-testid="mobile-notifications-filter-tabs"
             value={unreadOnly ? "unread" : "all"}
@@ -201,7 +208,7 @@ export function MobileNotificationsPage() {
               <button
                 data-testid="mobile-notification-card"
                 key={item.id}
-                className="mobile-list-card w-full text-left"
+                className={`mobile-list-card w-full text-left ${item.readAt ? "" : "mobile-list-card--unread"}`}
                 type="button"
                 onClick={() => void openNotificationTarget(item, targetLink)}
               >

client/src/pages/MobilePortalPage.tsx

@@ -251,11 +251,14 @@ export function MobilePortalPage() {
 
   return (
     <PageScaffold className="mobile-page-stack">
-      <PageHeader title="今天" />
+      <PageHeader
+        title="今天待办"
+        meta={<span className="badge-neutral">移动工作台</span>}
+      />
 
       {canAccessApprovals && pendingApprovalCount > 0 ? (
-        <section className="mobile-card mobile-page-stack" data-testid="mobile-pending-summary">
+        <section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-pending-summary">
-          <div className="mobile-section-header">
+          <div className="mobile-section-header mobile-section-header--top">
             <div className="min-w-0">
               <div className="mobile-section-title">待处理</div>
               <div className="mobile-list-card__subtitle mt-1">待我审批</div>
@@ -343,7 +346,7 @@ export function MobilePortalPage() {
 
       <section className="mobile-card mobile-page-stack" data-testid="mobile-today-focus">
         <div className="mobile-section-header">
-          <div className="mobile-section-title">常用</div>
+          <div className="mobile-section-title">常用动作</div>
         </div>
         <div className="mobile-icon-grid" data-testid="mobile-action-grid">
           {actions.map((action) => (

client/src/pages/MobileReimbursementsPage.tsx

@@ -70,7 +70,10 @@ function ReimbursementCard({
   const displayCode = resolveReimbursementDisplayCode(item);
 
   return (
-    <article className="mobile-card" data-testid="mobile-reimbursement-card">
+    <article
+      className={`mobile-list-card ${item.status === "draft" || item.status === "reviewing" ? "mobile-list-card--focus" : ""}`}
+      data-testid="mobile-reimbursement-card"
+    >
       <Link className="block" to={`/mobile/reimbursements/${item.id}`} state={{ from: currentMobileSource }}>
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
@@ -204,7 +207,8 @@ export function MobileReimbursementsPage() {
   return (
     <PageScaffold className="space-y-4">
       <PageHeader
-        title="报销"
+        title="移动报销"
+        meta={<span className="badge-neutral">{STATUS_LABEL[status]}</span>}
         actions={
           canCreateExpense ? (
             <Button
@@ -219,7 +223,7 @@ export function MobileReimbursementsPage() {
         }
       />
 
-      <section className="mobile-card">
+      <section className="mobile-card mobile-focus-card">
         <div className="mobile-info-grid">
           <div>
             <div className="text-xs text-zinc-500">当前列表</div>
@@ -232,7 +236,14 @@ export function MobileReimbursementsPage() {
         </div>
       </section>
 
-      <section className="mobile-card" data-testid="mobile-reimbursements-list">
+      <section className="mobile-card mobile-page-stack" data-testid="mobile-reimbursements-list">
+        <div className="mobile-section-header">
+          <div>
+            <h3 className="mobile-section-title">报销记录</h3>
+            <p className="mobile-list-card__subtitle mt-1">按状态查看草稿、审批和付款进度</p>
+          </div>
+        </div>
+        <div className="mobile-command-surface">
         <Tabs value={status} onValueChange={handleStatusChange}>
           <TabsList className="grid h-auto w-full grid-cols-4">
             {STATUS_TABS.map((item) => (
@@ -242,8 +253,9 @@ export function MobileReimbursementsPage() {
             ))}
           </TabsList>
         </Tabs>
+        </div>
 
-        <div className="mt-4 space-y-3">
+        <div className="mobile-page-stack">
           {listQuery.isLoading ? <div className="mobile-empty-state">加载中...</div> : null}
           {listQuery.isError ? (
             <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">

client/src/pages/NotificationsPage.tsx

@@ -8,16 +8,9 @@ import { PageHeader } from "../components/common/PageHeader";
 import { TableSkeleton } from "../components/common/TableSkeleton";
 import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
+import { PageScaffold } from "../components/patterns/PageScaffold";
 import { resolveNotificationTargetLink } from "../lib/notificationLinks";
 import { resolveErrorMessage } from "../lib/resolveErrorMessage";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
 const PAGE_SIZE = 20;
@@ -86,10 +79,10 @@ export function NotificationsPage() {
   const notificationItems = listQuery.data?.items ?? [];
 
   return (
-    <div className="space-y-6">
+    <PageScaffold>
       <PageHeader
         title="通知"
-        subtitle="站内通知与待办提醒。"
+        subtitle="事件、待办和业务直达入口。"
         actions={
           <>
             <Button
@@ -108,7 +101,7 @@ export function NotificationsPage() {
         }
       />
 
-      <div className="card-std p-6 space-y-4">
+      <div className="card-std space-y-4 p-4 md:p-5">
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-col gap-3 md:flex-row md:items-center">
             <Tabs
@@ -121,7 +114,7 @@ export function NotificationsPage() {
                 })
               }
             >
-              <TabsList className="flex w-full flex-wrap justify-start gap-1 md:w-auto">
+              <TabsList className="ops-command-bar__tabs !w-full md:!w-auto">
                 <TabsTrigger data-testid="notifications-filter-all" value="all">
                   全部
                 </TabsTrigger>
@@ -153,8 +146,9 @@ export function NotificationsPage() {
             </label>
           </div>
 
-          <div className="text-sm text-zinc-600">
+          <div className="detail-evidence-card text-sm">
-            未读 {listQuery.data?.unreadCount ?? 0} 条
+            <span className="font-semibold text-zinc-900">未读 {listQuery.data?.unreadCount ?? 0}</span>
+            <span className="ml-2 text-zinc-500">/ 共 {listQuery.data?.total ?? 0}</span>
           </div>
         </div>
 
@@ -174,12 +168,12 @@ export function NotificationsPage() {
 
         {!listQuery.isLoading && !listQuery.isError ? (
           <>
-            <div className="space-y-3 md:hidden">
+            <div className="notification-inbox md:hidden">
               {notificationItems.length ? (
                 notificationItems.map((item) => {
                   const targetLink = resolveNotificationTargetLink(item);
                   return (
-                    <div data-testid="notification-mobile-card" key={item.id} className="rounded-lg border border-zinc-200 bg-white p-4">
+                    <div data-testid="notification-mobile-card" key={item.id} className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}>
                       <div className="flex items-start justify-between gap-3">
                         <div className="min-w-0">
                           <div className="text-sm font-semibold text-zinc-900">{item.title}</div>
@@ -217,68 +211,56 @@ export function NotificationsPage() {
                 <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
               )}
             </div>
-            <div className="hidden rounded-lg border border-zinc-200 md:block">
+            <div className="notification-inbox hidden md:block" data-testid="notifications-table">
-            <Table data-testid="notifications-table">
+              {notificationItems.length ? (
-              <TableHeader>
+                notificationItems.map((item) => {
-                <tr>
+                  const targetLink = resolveNotificationTargetLink(item);
-                  <TableHead>标题</TableHead>
+                  return (
-                  <TableHead>时间</TableHead>
+                    <article
-                  <TableHead>状态</TableHead>
+                      data-testid="notification-row"
-                  <TableHead className="w-40">操作</TableHead>
+                      key={item.id}
-                </tr>
+                      className={`notification-row-card ${item.readAt ? "" : "notification-row-card--unread"}`}
-              </TableHeader>
+                    >
-              <TableBody>
+                      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-                {notificationItems.length ? (
+                        <div className="min-w-0">
-                  notificationItems.map((item) => {
+                          <div className="flex flex-wrap items-center gap-2">
-                    const targetLink = resolveNotificationTargetLink(item);
+                            <div className="font-semibold text-zinc-900">{item.title}</div>
-                    return (
+                            <span className={item.readAt ? "badge-neutral" : "badge-warning"}>
-                      <TableRow data-testid="notification-row" key={item.id}>
+                              {item.readAt ? "已读" : "未读"}
-                        <TableCell>
+                            </span>
-                          <div className="font-medium text-zinc-900">{item.title}</div>
-                          {item.body ? (
-                            <div className="mt-1 text-xs text-zinc-500">{item.body}</div>
-                          ) : null}
-                        </TableCell>
-                        <TableCell className="text-xs text-zinc-600">
-                          {item.createdAt.slice(0, 19).replace("T", " ")}
-                        </TableCell>
-                        <TableCell className="text-xs text-zinc-600">
-                          {item.readAt ? "已读" : "未读"}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex flex-wrap gap-2">
-                            {targetLink ? (
-                              <Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
-                                <Link to={targetLink}>查看</Link>
-                              </Button>
-                            ) : null}
-
-                            {!item.readAt ? (
-                              <Button
-                                data-testid="notification-mark-read"
-                                size="sm"
-                                type="button"
-                                variant="secondary"
-                                disabled={markReadMutation.isPending}
-                                onClick={() => markReadMutation.mutate(item.id)}
-                              >
-                                标为已读
-                              </Button>
-                            ) : null}
                           </div>
-                        </TableCell>
+                          {item.body ? <div className="mt-1 text-sm text-zinc-500">{item.body}</div> : null}
-                      </TableRow>
+                          <div className="notification-row-card__meta mt-2">
-                    );
+                            {item.createdAt.slice(0, 19).replace("T", " ")}
-                  })
+                          </div>
-                ) : (
+                        </div>
-                  <TableRow>
+                        <div className="flex shrink-0 flex-wrap gap-2">
-                    <TableCell className="py-3 text-zinc-500" colSpan={4}>
+                          {targetLink ? (
-                      暂无通知
+                            <Button asChild size="sm" variant="secondary" data-testid="notification-target-link">
-                    </TableCell>
+                              <Link to={targetLink}>查看</Link>
-                  </TableRow>
+                            </Button>
-                )}
+                          ) : null}
-              </TableBody>
+
-            </Table>
+                          {!item.readAt ? (
+                            <Button
+                              data-testid="notification-mark-read"
+                              size="sm"
+                              type="button"
+                              variant="secondary"
+                              disabled={markReadMutation.isPending}
+                              onClick={() => markReadMutation.mutate(item.id)}
+                            >
+                              标为已读
+                            </Button>
+                          ) : null}
+                        </div>
+                      </div>
+                    </article>
+                  );
+                })
+              ) : (
+                <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
+              )}
             </div>
           </>
         ) : null}
@@ -294,6 +276,6 @@ export function NotificationsPage() {
           testIdPrefix="notifications"
         />
       </div>
-    </div>
+    </PageScaffold>
   );
 }

client/src/pages/ReimbursementDetailPage.tsx

@@ -961,7 +961,7 @@ export function ReimbursementDetailPage() {
     <PageScaffold>
       <EntityOverviewHero
         title={`报销详情 ${displayCode}`}
-        subtitle="明细、发票和审批。"
+        subtitle="状态、票据、审批和付款集中处理。"
         meta={(
           <>
             <StatusBadge status={detail.status} />
@@ -1005,11 +1005,11 @@ export function ReimbursementDetailPage() {
         )}
       />
 
-      <div className="detail-shell-grid">
+      <div className="detail-workspace-grid">
-        <div className="space-y-6">
+        <div className="space-y-5">
-          <SectionPanel title="概览与关联">
+          <SectionPanel title="办理摘要">
-            <div className="space-y-6" data-testid="reimbursement-overview">
+            <div className="space-y-4" data-testid="reimbursement-overview">
-              <StatStrip columns={4}>
+              <StatStrip columns={4} className="ops-status-strip">
                 <MetricCard
                   title="关联项目"
                   value={
@@ -1026,20 +1026,32 @@ export function ReimbursementDetailPage() {
                 />
               </StatStrip>
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-summary">
+              <div className="detail-command-panel" data-testid="reimbursement-summary">
-                <div>报销编号：{displayCode}</div>
+                <div className="detail-fact-grid">
-                <div>报销日期：{detail.reimbursementDate ?? "-"}</div>
+                  <div className="detail-fact-card">
-                <div>金额：{detail.totalAmount ?? "-"}</div>
+                    <div className="detail-fact-card__label">报销编号</div>
-                <div>提交人：{detail.submitter?.name ?? "-"}</div>
+                    <div className="detail-fact-card__value">{displayCode}</div>
-                <div>报销人：{detail.owner?.name ?? "-"}</div>
+                  </div>
-                <div>说明：{detail.description || "-"}</div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">报销日期</div>
+                    <div className="detail-fact-card__value">{detail.reimbursementDate ?? "-"}</div>
+                  </div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">提交人 / 报销人</div>
+                    <div className="detail-fact-card__value">{detail.submitter?.name ?? "-"} / {detail.owner?.name ?? "-"}</div>
+                  </div>
+                  <div className="detail-fact-card">
+                    <div className="detail-fact-card__label">说明</div>
+                    <div className="detail-fact-card__value">{detail.description || "-"}</div>
+                  </div>
+                </div>
               </div>
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-payment-status">
+              <div className="detail-command-panel" data-testid="reimbursement-payment-status">
                 <div className="flex items-center justify-between gap-3">
                   <div>
                     <h4 className="text-base font-semibold text-zinc-900">付款状态</h4>
-                    <p className="text-xs text-zinc-500">付款备注写入审计日志，凭证、日期和操作人用于财务台账核对。</p>
+                    <p className="text-xs text-zinc-500">凭证、日期和操作人用于财务台账核对。</p>
                   </div>
                   <span
                     className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
@@ -1051,22 +1063,22 @@ export function ReimbursementDetailPage() {
                     {detail.status === "paid" ? "已付款" : "未付款"}
                   </span>
                 </div>
-                <div className="mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+                <div className="detail-fact-grid mt-3 xl:grid-cols-4">
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                  <div className="detail-fact-card">
-                    <div className="text-xs text-zinc-500">付款日期</div>
+                    <div className="detail-fact-card__label">付款日期</div>
-                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentDate ?? "-"}</div>
+                    <div className="detail-fact-card__value">{payment.paymentDate ?? "-"}</div>
                   </div>
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                  <div className="detail-fact-card">
-                    <div className="text-xs text-zinc-500">付款凭证号</div>
+                    <div className="detail-fact-card__label">付款凭证号</div>
-                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentVoucherNo ?? "-"}</div>
+                    <div className="detail-fact-card__value">{payment.paymentVoucherNo ?? "-"}</div>
                   </div>
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                  <div className="detail-fact-card">
-                    <div className="text-xs text-zinc-500">付款渠道</div>
+                    <div className="detail-fact-card__label">付款渠道</div>
-                    <div className="mt-1 font-medium text-zinc-900">{payment.paymentChannel ?? "-"}</div>
+                    <div className="detail-fact-card__value">{payment.paymentChannel ?? "-"}</div>
                   </div>
-                  <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2">
+                  <div className="detail-fact-card">
-                    <div className="text-xs text-zinc-500">操作人 / 时间</div>
+                    <div className="detail-fact-card__label">操作人 / 时间</div>
-                    <div className="mt-1 font-medium text-zinc-900">
+                    <div className="detail-fact-card__value">
                       {payment.paidBy?.name ?? "-"} · {formatDateTime(payment.paidAt)}
                     </div>
                   </div>
@@ -1110,11 +1122,11 @@ export function ReimbursementDetailPage() {
                 </div>
               ) : null}
 
-              <div className="rounded-lg border border-zinc-200 p-4 text-sm">
+              <div className="detail-command-panel">
                 <div className="flex items-center justify-between gap-3">
                   <div>
                     <h4 className="text-base font-semibold text-zinc-900">关联项目</h4>
-                    <p className="text-xs text-zinc-500">报销可选挂到项目，用于项目执行面板汇总。</p>
+                    <p className="text-xs text-zinc-500">用于项目执行面板汇总。</p>
                   </div>
                   {detail.project ? (
                     <Link to={`/projects/${detail.project.id}`} className="text-sm text-primary hover:underline">
@@ -1179,7 +1191,7 @@ export function ReimbursementDetailPage() {
               {(detail.attachments ?? []).length ? (
                 <div className="space-y-2">
                   {(detail.attachments ?? []).map((attachment) => (
-                    <div key={attachment.id} className="flex flex-col gap-3 rounded-lg border border-zinc-200 px-4 py-3 md:flex-row md:items-center md:justify-between">
+                    <div key={attachment.id} className="detail-evidence-card flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                       <div className="min-w-0">
                         <div className="truncate font-medium text-zinc-900">{attachment.originalName}</div>
                         <div className="text-xs text-zinc-500">
@@ -1254,7 +1266,7 @@ export function ReimbursementDetailPage() {
           <p className="text-sm text-zinc-500">正在刷新费用标准校验结果...</p>
         ) : null}
 
-        <div className="rounded-lg border border-zinc-200">
+        <div className="ops-table-focus overflow-x-auto border border-zinc-200">
           <Table data-testid="reimbursement-items-table">
             <TableHeader>
               <tr>
@@ -1401,7 +1413,7 @@ export function ReimbursementDetailPage() {
                       const invoiceHint = resolveInvoiceNextStepText(item);
                       return (
                         <div
-                          className="rounded-lg border border-zinc-200 px-4 py-3"
+                          className="detail-evidence-card"
                           key={item.id}
                         >
                           <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
@@ -1421,7 +1433,7 @@ export function ReimbursementDetailPage() {
                             </div>
                             <div className="flex flex-col items-start gap-2 md:items-end">
                               <div className="flex items-center gap-2">
-                                <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
+                                <span className="badge-neutral">
                                   {resolveInvoiceStatusLabel(item.status)}
                                 </span>
                                 {canUnbindInvoices ? (
@@ -1455,7 +1467,7 @@ export function ReimbursementDetailPage() {
           <SectionPanel title="预算与审核提示">
             <div className="space-y-6">
               {budgetHint ? (
-                <div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="reimbursement-budget-hint">
+                <div className="detail-command-panel text-sm" data-testid="reimbursement-budget-hint">
                   <h3 className="text-base font-semibold text-zinc-900">预算提示</h3>
                   <div className="mt-3">预算池：{budgetHint.budgetCode} / {budgetHint.budgetName}</div>
                   <div>
@@ -1519,22 +1531,22 @@ export function ReimbursementDetailPage() {
                     </p>
                   ) : null}
 
-                  <div className="grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-4" data-testid="reimbursement-erp-export">
+                  <div className="detail-fact-grid text-sm xl:grid-cols-4" data-testid="reimbursement-erp-export">
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+                    <div className="detail-fact-card">
-                      <div className="text-xs text-zinc-500">导出状态</div>
+                      <div className="detail-fact-card__label">导出状态</div>
-                      <div className="mt-1 font-medium text-zinc-900">{erpSyncStatus}</div>
+                      <div className="detail-fact-card__value">{erpSyncStatus}</div>
                     </div>
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+                    <div className="detail-fact-card">
-                      <div className="text-xs text-zinc-500">最近导出</div>
+                      <div className="detail-fact-card__label">最近导出</div>
-                      <div className="mt-1 font-medium text-zinc-900">{formatDateTime(erpPreviewQuery.data?.exportState.exportedAt ?? null)}</div>
+                      <div className="detail-fact-card__value">{formatDateTime(erpPreviewQuery.data?.exportState.exportedAt ?? null)}</div>
                     </div>
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+                    <div className="detail-fact-card">
-                      <div className="text-xs text-zinc-500">导出任务</div>
+                      <div className="detail-fact-card__label">导出任务</div>
-                      <div className="mt-1 break-all font-medium text-zinc-900">{erpPreviewQuery.data?.exportState.lastOutboxId ?? "-"}</div>
+                      <div className="detail-fact-card__value break-all">{erpPreviewQuery.data?.exportState.lastOutboxId ?? "-"}</div>
                     </div>
-                    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+                    <div className="detail-fact-card">
-                      <div className="text-xs text-zinc-500">外部凭证号</div>
+                      <div className="detail-fact-card__label">外部凭证号</div>
-                      <div className="mt-1 break-all font-medium text-zinc-900">{erpPreviewQuery.data?.exportState.externalId ?? "-"}</div>
+                      <div className="detail-fact-card__value break-all">{erpPreviewQuery.data?.exportState.externalId ?? "-"}</div>
                     </div>
                   </div>
 
@@ -1549,7 +1561,7 @@ export function ReimbursementDetailPage() {
           </SectionPanel>
         </div>
 
-        <div className="space-y-6">
+        <div className="space-y-5">
           <DetailSideMeta title="报销摘要">
             <div>报销编号：{displayCode}</div>
             <div>报销人：{detail.owner?.name ?? "-"}</div>
@@ -1565,16 +1577,16 @@ export function ReimbursementDetailPage() {
               title="审批进度"
               description={`当前位于第 ${detail.workflowProgress.currentStepIndex + 1} / ${detail.workflowProgress.totalSteps} 步。`}
             >
-              <div className="space-y-3" data-testid={TEST_IDS.reimbursement.workflowProgress}>
+              <div className="detail-timeline" data-testid={TEST_IDS.reimbursement.workflowProgress}>
                 {detail.workflowProgress.steps.map((step, index) => (
                   <div
                     key={step.id}
                     className={
                       step.status === "current"
-                        ? "rounded-lg border border-primary-200 bg-primary-50 px-3 py-2"
+                        ? "detail-timeline-item detail-timeline-item--current"
                         : step.status === "completed"
-                          ? "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2"
+                          ? "detail-timeline-item detail-timeline-item--done"
-                          : "rounded-lg border border-zinc-200 bg-white px-3 py-2"
+                          : "detail-timeline-item"
                     }
                   >
                     <div className="flex items-center justify-between gap-3 text-sm">
@@ -1593,9 +1605,9 @@ export function ReimbursementDetailPage() {
 
           <DetailSideMeta title="审批记录">
             {detail.approvalHistory.length ? (
-              <div className="space-y-3" data-testid="reimbursement-approval-history">
+              <div className="detail-timeline" data-testid="reimbursement-approval-history">
                 {detail.approvalHistory.map((item) => (
-                  <div key={item.id} className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm">
+                  <div key={item.id} className="detail-timeline-item">
                     <div className="flex items-center justify-between gap-3">
                       <span className="font-medium text-zinc-900">{workflowActionLabel(item.action)}</span>
                       <span className="text-xs text-zinc-500">{formatDateTime(item.createdAt)}</span>

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -104,9 +104,9 @@ function workflowActionLabel(action: string | undefined | null) {
 
 function DetailField({ label, value }: { label: string; value: ReactNode }) {
   return (
-    <div className="rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm">
+    <div className="detail-fact-card">
-      <dt className="text-xs font-medium text-zinc-500">{label}</dt>
+      <dt className="detail-fact-card__label">{label}</dt>
-      <dd className="mt-1 break-words font-medium text-zinc-900">{value || "-"}</dd>
+      <dd className="detail-fact-card__value">{value || "-"}</dd>
     </div>
   );
 }
@@ -263,7 +263,7 @@ export function WorkflowTaskDetailPage() {
     <PageScaffold>
       <EntityOverviewHero
         title={`任务详情 ${detail.task.stepName}`}
-        subtitle="查看摘要并处理。"
+        subtitle="摘要、动作和处理历史集中办理。"
         meta={(
           <>
             <StatusBadge status={detail.task.status} />
@@ -277,18 +277,18 @@ export function WorkflowTaskDetailPage() {
         )}
       />
 
-      <div className="detail-shell-grid">
+      <div className="detail-workspace-grid">
-        <div className="space-y-6">
+        <div className="space-y-5">
           <SectionPanel title="审批对象摘要">
             <div className="space-y-4" data-testid="workflow-task-overview">
-              <StatStrip columns={4}>
+              <StatStrip columns={4} className="ops-status-strip">
                 <MetricCard title="当前节点" value={<span className="text-base">{detail.task.stepName}</span>} />
                 <MetricCard title="业务类型" value={<span className="text-base">{entityTitle(detail.workflowInstance?.entityType)}</span>} />
                 <MetricCard title="可执行动作" value={<span className="text-base">{allowedActionLabels || "-"}</span>} />
                 <MetricCard title="创建时间" value={<span className="text-base">{formatDateTime(detail.task.createdAt)}</span>} />
               </StatStrip>
 
-              <dl className="grid gap-3 md:grid-cols-2" data-testid="workflow-task-summary">
+              <dl className="detail-fact-grid" data-testid="workflow-task-summary">
                 {detail.reimbursement ? (
                   <>
                     <DetailField label="报销单号" value={detail.reimbursement.formNumber ?? "-"} />
@@ -401,7 +401,7 @@ export function WorkflowTaskDetailPage() {
           ) : null}
 
           <SectionPanel title="审批动作">
-            <div className="space-y-4">
+            <div className="detail-action-stack">
               {actionError ? (
                 <p
                   className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
@@ -411,7 +411,7 @@ export function WorkflowTaskDetailPage() {
                 </p>
               ) : null}
 
-              <div className="flex flex-wrap gap-2">
+              <div className="detail-action-card flex flex-wrap gap-2">
                 <Button
                   data-testid="workflow-task-approve"
                   disabled={!allowedActions.has("approve") || mutation.isPending}
@@ -422,7 +422,7 @@ export function WorkflowTaskDetailPage() {
                 </Button>
               </div>
 
-              <div className="space-y-2 rounded-lg border border-zinc-200 p-4">
+              <div className="detail-action-card space-y-2">
                 <p className="text-sm font-medium text-zinc-800">驳回</p>
                 <Textarea
                   data-testid="workflow-task-reject-comment"
@@ -441,7 +441,7 @@ export function WorkflowTaskDetailPage() {
                 </Button>
               </div>
 
-              <div className="space-y-2 rounded-lg border border-zinc-200 p-4">
+              <div className="detail-action-card space-y-2">
                 <p className="text-sm font-medium text-zinc-800">退回</p>
                 <Textarea
                   data-testid="workflow-task-return-comment"
@@ -461,7 +461,7 @@ export function WorkflowTaskDetailPage() {
               </div>
 
               {canTransfer ? (
-                <div className="space-y-2 rounded-lg border border-zinc-200 p-4">
+                <div className="detail-action-card space-y-2">
                   <p className="text-sm font-medium text-zinc-800">转审</p>
                   <select
                     className="select-std"
@@ -502,10 +502,10 @@ export function WorkflowTaskDetailPage() {
           </SectionPanel>
 
           <SectionPanel title="处理历史">
-            <div className="space-y-2">
+            <div className="detail-timeline">
               {detail.history.length ? (
                 detail.history.map((item) => (
-                  <div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm" key={item.id}>
+                  <div className="detail-timeline-item" key={item.id}>
                     <div className="font-medium text-zinc-900">
                       {workflowActionLabel(item.action)} · {item.actorName || item.actorId}
                     </div>
@@ -520,7 +520,7 @@ export function WorkflowTaskDetailPage() {
           </SectionPanel>
         </div>
 
-        <div className="space-y-6">
+        <div className="space-y-5">
           <DetailSideMeta title="任务摘要">
             <div>节点：{detail.task.stepName}</div>
             <div>实例状态：{workflowInstanceStatusLabel(detail.workflowInstance?.currentStatus)}</div>

client/src/styles/mobile-touch.css

@@ -41,6 +41,21 @@
   padding: var(--mobile-card-padding);
 }
 
+.mobile-focus-card {
+  border-color: rgb(191 219 254);
+  background: linear-gradient(180deg, rgb(239 246 255), rgb(255 255 255));
+}
+
+.mobile-command-surface {
+  display: grid;
+  gap: var(--mobile-card-gap);
+  min-width: 0;
+  border: 1px solid rgb(228 228 231);
+  border-radius: 12px;
+  background: rgb(250 250 250);
+  padding: 10px;
+}
+
 .hyb-mobile-shell .section-panel::before {
   display: none;
 }
@@ -222,6 +237,16 @@
   padding: var(--mobile-card-padding);
 }
 
+.mobile-list-card--focus {
+  border-color: rgb(191 219 254);
+  background: rgb(239 246 255);
+}
+
+.mobile-list-card--unread {
+  border-color: rgb(191 219 254);
+  background: rgb(239 246 255);
+}
+
 .mobile-page-stack {
   display: grid;
   gap: var(--mobile-card-gap);
@@ -236,6 +261,10 @@
   min-width: 0;
 }
 
+.mobile-section-header--top {
+  align-items: flex-start;
+}
+
 .mobile-section-title {
   min-width: 0;
   color: rgb(24 24 27);

client/tests/e2e/pc-detail-mobile-visual-wave3.spec.ts

@@ -0,0 +1,666 @@
+import { mkdirSync } from "node:fs";
+import path from "node:path";
+import type { Page, Route } from "@playwright/test";
+
+import { expect, test } from "./helpers/fixtures";
+
+test.use({ serviceWorkers: "block" });
+
+const outputDir = path.resolve(process.cwd(), "../output/playwright/pc-detail-mobile-visual-wave3");
+
+const visualUser = {
+  identifier: "[email protected]",
+  password: "VisualWave3Password1234",
+  name: "王顺理",
+};
+
+const visualMe = {
+  id: "employee-wave3",
+  employeeNo: "HYD-W3",
+  name: visualUser.name,
+  email: visualUser.identifier,
+  phone: null,
+  roleCodes: ["employee", "manager", "finance"],
+  permissions: [
+    "expense.create",
+    "expense.submit",
+    "expense.view_own",
+    "expense.view_all",
+    "expense.delete_own",
+    "expense.approve",
+    "leave.approve",
+    "procurement.approve",
+    "invoice.upload",
+    "invoice.view_own",
+    "invoice.manage",
+    "payment.batch.manage",
+    "risk.review.manage",
+    "leave.view_own",
+    "attendance.view_own",
+  ],
+  profileCompleteness: {
+    hasEmergencyContact: true,
+    hasBankAccount: true,
+    hasAvatar: false,
+    hasIdNumber: false,
+    score: 88,
+  },
+  notificationPushEnabled: true,
+  departmentId: "dept-wave3",
+};
+
+const workflowTask = {
+  id: "task-wave3",
+  instanceId: "workflow-wave3",
+  stepId: "manager-review",
+  stepName: "主管审批",
+  assigneeId: visualMe.id,
+  assigneeRole: "manager",
+  status: "pending",
+  outcome: null,
+  createdAt: "2026-05-27T09:05:00.000Z",
+  completedAt: null,
+  workflowInstance: {
+    entityType: "reimbursement",
+    entityId: "reim-wave3",
+    currentStatus: "reviewing",
+  },
+  businessSummary: {
+    reference: "BX20260527003",
+    title: "项目差旅资料补充",
+    applicantName: "李明",
+    amount: "¥1,860.00",
+    duration: null,
+    businessStatus: "reviewing",
+  },
+  allowedActions: ["approve", "reject", "return", "transfer"],
+};
+
+const reimbursementDetail = {
+  id: "reim-wave3",
+  formNumber: "BX20260527003",
+  submitterId: visualMe.id,
+  ownerId: visualMe.id,
+  departmentId: "dept-wave3",
+  department: { id: "dept-wave3", name: "研发部" },
+  status: "reviewing",
+  createdAt: "2026-05-27T08:50:00.000Z",
+  submittedAt: "2026-05-27T09:00:00.000Z",
+  reimbursementDate: "2026-05-27",
+  totalAmount: "1860.00",
+  description: "项目现场资料与交通报销",
+  payment: {
+    paymentVoucherNo: null,
+    paymentDate: null,
+    paymentChannel: null,
+    paidAt: null,
+    paidBy: null,
+  },
+  projectId: "project-wave3",
+  linkedTravelRequestId: null,
+  linkedTravelRequest: null,
+  project: { id: "project-wave3", projectNo: "HYB-W3", name: "OA 试运行" },
+  owner: { id: visualMe.id, employee_no: visualMe.employeeNo, name: visualMe.name },
+  submitter: { id: visualMe.id, employee_no: visualMe.employeeNo, name: visualMe.name },
+  invoices: [
+    {
+      id: "invoice-wave3",
+      status: "available",
+      invoiceCode: "0440026",
+      invoiceNumber: "00012890",
+      invoiceDate: "2026-05-26",
+      sellerName: "北京示例服务有限公司",
+      totalAmount: "860.00",
+      originalName: "invoice-wave3.pdf",
+      linkedItemId: "item-wave3-1",
+    },
+  ],
+  attachments: [
+    {
+      id: "att-wave3",
+      originalName: "现场说明.pdf",
+      mimeType: "application/pdf",
+      fileSize: 128000,
+      fileSha256: "hash-wave3",
+      uploadedBy: { id: visualMe.id, name: visualMe.name, employeeNo: visualMe.employeeNo },
+      createdAt: "2026-05-27T09:10:00.000Z",
+    },
+  ],
+  budgetHint: null,
+  pendingWorkflow: {
+    instanceId: "workflow-wave3",
+    stepId: "manager-review",
+    task: {
+      id: "task-wave3",
+      step_name: "主管审批",
+      assignee_id: visualMe.id,
+      assignee_role: "manager",
+    },
+  },
+  workflowProgress: {
+    currentStepIndex: 0,
+    totalSteps: 2,
+    steps: [
+      { id: "step-1", name: "主管审批", status: "current" },
+      { id: "step-2", name: "财务复核", status: "pending" },
+    ],
+  },
+  approvalHistory: [
+    {
+      id: "history-wave3-1",
+      stepName: "提交",
+      action: "start",
+      actorName: visualMe.name,
+      comment: "请审批",
+      createdAt: "2026-05-27T09:00:00.000Z",
+    },
+  ],
+  riskFlags: [],
+  items: [
+    {
+      id: "item-wave3-1",
+      expenseTypeId: "expense-travel",
+      expenseDate: "2026-05-26",
+      amount: "860.00",
+      description: "交通与资料",
+      expenseType: {
+        id: "expense-travel",
+        code: "TRAVEL",
+        name: "交通费",
+        category: "travel",
+        enabled: true,
+      },
+    },
+    {
+      id: "item-wave3-2",
+      expenseTypeId: "expense-service",
+      expenseDate: "2026-05-27",
+      amount: "1000.00",
+      description: "现场服务",
+      expenseType: {
+        id: "expense-service",
+        code: "SERVICE",
+        name: "服务费",
+        category: "service",
+        enabled: true,
+      },
+    },
+  ],
+};
+
+const workflowDetail = {
+  task: {
+    id: workflowTask.id,
+    instanceId: workflowTask.instanceId,
+    stepId: workflowTask.stepId,
+    stepName: workflowTask.stepName,
+    assigneeId: workflowTask.assigneeId,
+    assigneeRole: workflowTask.assigneeRole,
+    status: workflowTask.status,
+    outcome: null,
+    comment: null,
+    createdAt: workflowTask.createdAt,
+    completedAt: null,
+  },
+  workflowInstance: {
+    id: "workflow-wave3",
+    entityType: "reimbursement",
+    currentStatus: "reviewing",
+    currentStepId: "manager-review",
+    contextData: { standardViolations: [] },
+    startedAt: "2026-05-27T09:00:00.000Z",
+    completedAt: null,
+  },
+  reimbursement: {
+    id: reimbursementDetail.id,
+    formNumber: reimbursementDetail.formNumber,
+    status: reimbursementDetail.status,
+    reimbursementDate: reimbursementDetail.reimbursementDate,
+    totalAmount: reimbursementDetail.totalAmount,
+    description: reimbursementDetail.description,
+    owner: { id: visualMe.id, employeeNo: visualMe.employeeNo, name: visualMe.name },
+    submitter: { id: visualMe.id, employeeNo: visualMe.employeeNo, name: visualMe.name },
+  },
+  leaveRequest: null,
+  attendanceCorrection: null,
+  purchaseRequest: null,
+  travelRequest: null,
+  allowedActions: workflowTask.allowedActions,
+  history: [
+    {
+      id: "workflow-history-wave3",
+      taskId: workflowTask.id,
+      actorId: visualMe.id,
+      actorName: visualMe.name,
+      actorEmployeeNo: visualMe.employeeNo,
+      action: "start",
+      comment: "进入审批",
+      payload: null,
+      createdAt: "2026-05-27T09:00:00.000Z",
+    },
+  ],
+};
+
+const notifications = [
+  {
+    id: "notification-wave3-1",
+    type: "workflow.task_assigned",
+    title: "你有新的报销审批",
+    body: "BX20260527003 等待主管审批",
+    targetType: "workflow_task",
+    targetId: workflowTask.id,
+    readAt: null,
+    createdAt: "2026-05-27T09:12:00.000Z",
+  },
+  {
+    id: "notification-wave3-2",
+    type: "reimbursement.approved",
+    title: "报销已通过",
+    body: "项目资料报销进入财务复核",
+    targetType: "reimbursement",
+    targetId: reimbursementDetail.id,
+    readAt: "2026-05-27T09:20:00.000Z",
+    createdAt: "2026-05-27T09:18:00.000Z",
+  },
+];
+
+function envelope<T>(data: T) {
+  return { requestId: "mock-wave3", data };
+}
+
+async function fulfillJson<T>(route: Route, data: T) {
+  await route.fulfill({
+    status: 200,
+    contentType: "application/json",
+    body: JSON.stringify(envelope(data)),
+  });
+}
+
+function screenshotPath(fileName: string) {
+  mkdirSync(outputDir, { recursive: true });
+  return path.join(outputDir, fileName);
+}
+
+function navigationItem(key: string, href: string, label: string, icon: string, placement = "main") {
+  return { key, href, label, icon, placement, permissionCodes: [], featureFlagKey: null };
+}
+
+async function mockWave3Apis(page: Page) {
+  await page.route((url) => url.pathname.startsWith("/api/"), async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathName = url.pathname;
+
+    if (pathName === "/api/auth/capabilities") {
+      await fulfillJson(route, {
+        emailDelivery: { ready: true, statusReasons: [] },
+        emailLoginCode: { enabled: true },
+        passwordReset: { enabled: true },
+      });
+      return;
+    }
+
+    if (pathName === "/api/auth/sso/providers") {
+      await fulfillJson(route, []);
+      return;
+    }
+
+    if (pathName === "/api/auth/wecom/config") {
+      await fulfillJson(route, {
+        enabled: true,
+        entryEnabled: true,
+        oauthEnabled: true,
+        corpId: "wx-wave3",
+        agentId: "1000002",
+        loginUrl: "/api/auth/wecom/login?returnTo=%2Fmobile",
+        bindEnabled: true,
+        defaultReturnTo: "/mobile",
+        status: "ready",
+        statusReasons: [],
+      });
+      return;
+    }
+
+    if (pathName === "/api/auth/login" || pathName === "/api/auth/refresh") {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        headers: { "set-cookie": "has_session=1; Path=/; SameSite=Lax" },
+        body: JSON.stringify(envelope({ accessToken: "mock-wave3-token", expiresIn: 900, mustChangePassword: false })),
+      });
+      return;
+    }
+
+    if (pathName === "/api/me") {
+      await fulfillJson(route, visualMe);
+      return;
+    }
+
+    if (pathName === "/api/system/navigation") {
+      await fulfillJson(route, {
+        workspace: {
+          id: "workspace-wave3",
+          persisted: true,
+          profile: "small_team_internal",
+          orgMode: "single_company",
+          primaryEntryMode: "password",
+          notificationStrategy: "in_app",
+          devicePriority: "desktop",
+          moduleVisibility: {},
+          createdAt: null,
+          updatedAt: null,
+          updatedBy: null,
+        },
+        sections: {
+          main: [
+            navigationItem("portal", "/portal", "工作台", "home_app_logo"),
+            navigationItem("workflow", "/workflow/tasks", "审批待办", "fact_check"),
+            navigationItem("expense", "/reimbursements", "报销", "request_quote"),
+            navigationItem("notifications", "/notifications", "通知", "notifications"),
+          ],
+          admin: [],
+          backup: [],
+        },
+        recommendedRolePresets: [],
+      });
+      return;
+    }
+
+    if (pathName === "/api/notifications/mark-all-read") {
+      await fulfillJson(route, { updatedCount: 1 });
+      return;
+    }
+
+    if (pathName.startsWith("/api/notifications/") && pathName.endsWith("/mark-read")) {
+      await fulfillJson(route, { id: pathName.split("/")[3], readAt: "2026-05-27T09:30:00.000Z" });
+      return;
+    }
+
+    if (pathName === "/api/notifications") {
+      const unreadOnly = url.searchParams.get("unreadOnly") === "1";
+      const items = unreadOnly ? notifications.filter((item) => !item.readAt) : notifications;
+      await fulfillJson(route, {
+        page: Number(url.searchParams.get("page") ?? 1),
+        pageSize: Number(url.searchParams.get("pageSize") ?? 20),
+        total: items.length,
+        unreadOnly,
+        unreadCount: notifications.filter((item) => !item.readAt).length,
+        items,
+      });
+      return;
+    }
+
+    if (pathName === "/api/reimbursements/reim-wave3") {
+      await fulfillJson(route, reimbursementDetail);
+      return;
+    }
+
+    if (pathName === "/api/reimbursements") {
+      await fulfillJson(route, {
+        page: 1,
+        pageSize: Number(url.searchParams.get("pageSize") ?? 20),
+        total: 2,
+        scope: url.searchParams.get("scope") ?? "own",
+        items: [
+          {
+            id: reimbursementDetail.id,
+            formNumber: reimbursementDetail.formNumber,
+            status: reimbursementDetail.status,
+            reimbursementDate: reimbursementDetail.reimbursementDate,
+            totalAmount: reimbursementDetail.totalAmount,
+            description: reimbursementDetail.description,
+            payment: reimbursementDetail.payment,
+            owner: { id: visualMe.id, employeeNo: visualMe.employeeNo, name: visualMe.name },
+            submitter: { id: visualMe.id, employeeNo: visualMe.employeeNo, name: visualMe.name },
+            project: reimbursementDetail.project,
+            pendingWorkflow: {
+              instanceId: "workflow-wave3",
+              stepId: "manager-review",
+              allowedActions: ["approve", "reject"],
+              task: { id: workflowTask.id, stepName: "主管审批", assigneeId: visualMe.id, assigneeRole: "manager" },
+            },
+            createdAt: reimbursementDetail.createdAt,
+            updatedAt: "2026-05-27T09:20:00.000Z",
+          },
+        ],
+      });
+      return;
+    }
+
+    if (pathName === "/api/expense-types") {
+      await fulfillJson(route, {
+        enabled: true,
+        items: [
+          {
+            id: "expense-travel",
+            code: "TRAVEL",
+            name: "交通费",
+            description: null,
+            category: "travel",
+            sortOrder: 1,
+            accountCodeDefault: null,
+            isSystemDefault: true,
+            enabled: true,
+            createdAt: null,
+            updatedAt: null,
+          },
+        ],
+      });
+      return;
+    }
+
+    if (pathName === "/api/projects") {
+      await fulfillJson(route, { items: [reimbursementDetail.project] });
+      return;
+    }
+
+    if (pathName === "/api/workflow/tasks/summary") {
+      await fulfillJson(route, {
+        scope: "mine",
+        pendingTotal: 1,
+        overdueTotal: 0,
+        earliestPendingAt: workflowTask.createdAt,
+        averagePendingAgeHours: 1,
+        byEntityType: [{ key: "reimbursement", pendingTotal: 1, overdueTotal: 0 }],
+        byStep: [{ key: "主管审批", pendingTotal: 1, overdueTotal: 0 }],
+        byAssigneeRole: [{ key: "manager", pendingTotal: 1, overdueTotal: 0 }],
+      });
+      return;
+    }
+
+    if (pathName === "/api/workflow/tasks/task-wave3") {
+      await fulfillJson(route, workflowDetail);
+      return;
+    }
+
+    if (pathName === "/api/workflow/tasks") {
+      await fulfillJson(route, {
+        page: 1,
+        pageSize: Number(url.searchParams.get("pageSize") ?? 100),
+        total: 1,
+        items: [workflowTask],
+      });
+      return;
+    }
+
+    if (pathName === "/api/workflow/approvers") {
+      await fulfillJson(route, {
+        page: 1,
+        pageSize: 50,
+        total: 1,
+        items: [
+          {
+            id: "approver-wave3",
+            employeeNo: "HYD-A1",
+            name: "审批人",
+            email: "[email protected]",
+            roleCodes: ["manager"],
+          },
+        ],
+      });
+      return;
+    }
+
+    if (pathName === "/api/portal/home") {
+      await fulfillJson(route, {
+        workspace: { id: "workspace-wave3", persisted: true, profile: "small_team_internal" },
+        greeting: { name: visualMe.name },
+        cards: [],
+        pendingTasks: { count: 1, href: "/workflow/tasks" },
+        myApplications: [],
+        riskSummary: null,
+        announcements: [],
+        quickLinks: [],
+        todayPresence: null,
+        teamPresence: null,
+        weeklyReport: null,
+        weeklySummary: null,
+        todoSummary: null,
+        projectSummary: null,
+        peopleLifecycle: null,
+        financeSummary: {
+          pendingBatchCount: 2,
+          failedItemCount: 0,
+          riskCount: 1,
+          paymentBatchEnabled: true,
+          href: "/payment-batches",
+        },
+        adoptionSummary: null,
+        recentActivities: [],
+        teamStatusBoard: [],
+      });
+      return;
+    }
+
+    if (pathName === "/api/leave-requests") {
+      await fulfillJson(route, { page: 1, pageSize: 8, total: 0, scope: "own", items: [] });
+      return;
+    }
+
+    if (pathName === "/api/purchase-requests") {
+      await fulfillJson(route, { page: 1, pageSize: 8, total: 0, items: [] });
+      return;
+    }
+
+    if (pathName === "/api/employees/employee-wave3/profile") {
+      await fulfillJson(route, {
+        employee: {
+          id: visualMe.id,
+          employeeNo: visualMe.employeeNo,
+          name: visualMe.name,
+          phone: "",
+          email: visualMe.email,
+          status: "active",
+          employmentStatus: "active",
+          departmentId: "dept-wave3",
+          title: "项目经理",
+          directManagerId: null,
+          hireDate: "2026-01-01",
+          probationEndDate: null,
+          lastWorkingDate: null,
+          workLocation: "北京",
+          emergencyContactName: null,
+          emergencyContactPhone: null,
+          notes: null,
+          avatarUrl: null,
+          archivedAt: null,
+          roleCodes: visualMe.roleCodes,
+          department: { id: "dept-wave3", name: "研发部" },
+          directManager: null,
+        },
+        lifecycle: { events: [], checklistTasks: [], blockers: { openAssetCount: 0, pendingWorkflowTaskCount: 0, canCompleteOffboarding: true } },
+        assignedAssets: [],
+        organization: { reportingChain: [], directReports: [] },
+      });
+      return;
+    }
+
+    await fulfillJson(route, {});
+  });
+}
+
+async function login(page: Page) {
+  await page.goto("/login");
+  await page.getByTestId("login-identifier").fill(visualUser.identifier);
+  await page.getByTestId("login-password").fill(visualUser.password);
+  await page.getByTestId("login-submit").click();
+  await page.waitForURL(/\/(portal|mobile)/);
+  await page.waitForLoadState("networkidle").catch(() => undefined);
+}
+
+async function expectNoHorizontalOverflow(page: Page) {
+  const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+  expect(overflow).toBeLessThanOrEqual(2);
+}
+
+test.beforeEach(async ({ page }) => {
+  await mockWave3Apis(page);
+  await login(page);
+});
+
+test("Wave3 PC 详情和通知中心视觉截图", async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 960 });
+
+  await page.goto("/reimbursements/reim-wave3");
+  await expect(page.getByRole("heading", { name: /报销详情/ })).toBeVisible();
+  await expect(page.getByText("办理摘要")).toBeVisible();
+  await expect(page.getByTestId("reimbursement-payment-status")).toBeVisible();
+  await page.screenshot({ path: screenshotPath("01-pc-reimbursement-detail.png"), fullPage: true });
+
+  await page.goto("/workflow/tasks/task-wave3");
+  await expect(page.getByRole("heading", { name: /任务详情/ })).toBeVisible();
+  await expect(page.getByText("审批动作")).toBeVisible();
+  await expect(page.getByTestId("workflow-task-overview")).toBeVisible();
+  await page.screenshot({ path: screenshotPath("02-pc-workflow-detail.png"), fullPage: true });
+
+  await page.goto("/notifications");
+  await expect(page.getByRole("heading", { name: "通知" })).toBeVisible();
+  await expect(page.getByTestId("notification-row").first()).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await page.screenshot({ path: screenshotPath("03-pc-notifications.png"), fullPage: true });
+});
+
+test("Wave3 移动关键页视觉截图", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+
+  await page.goto("/mobile");
+  await expect(page.getByRole("heading", { name: "今天待办" })).toBeVisible();
+  await expect(page.getByTestId("mobile-action-grid")).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await expectNoHorizontalOverflow(page);
+  await page.screenshot({ path: screenshotPath("04-mobile-home.png"), fullPage: true });
+
+  await page.goto("/mobile/reimbursements");
+  await expect(page.getByRole("heading", { name: "移动报销" })).toBeVisible();
+  await expect(page.getByTestId("mobile-reimbursements-list")).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await expectNoHorizontalOverflow(page);
+  await page.screenshot({ path: screenshotPath("05-mobile-reimbursements.png"), fullPage: true });
+
+  await page.goto("/mobile/approvals");
+  await expect(page.getByRole("heading", { name: "审批", exact: true })).toBeVisible();
+  await expect(page.getByTestId("mobile-approvals-list")).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await expectNoHorizontalOverflow(page);
+  await page.screenshot({ path: screenshotPath("06-mobile-approvals.png"), fullPage: true });
+
+  await page.goto("/mobile/approvals/task-wave3");
+  await expect(page.getByTestId("mobile-approvals-detail")).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await expectNoHorizontalOverflow(page);
+  await page.screenshot({ path: screenshotPath("07-mobile-approval-detail.png"), fullPage: true });
+
+  await page.goto("/mobile/notifications");
+  await expect(page.getByTestId("mobile-notifications-list")).toBeVisible();
+  await expect(page.getByTestId("mobile-notification-card").first()).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await expectNoHorizontalOverflow(page);
+  await page.screenshot({ path: screenshotPath("08-mobile-notifications.png"), fullPage: true });
+
+  await page.goto("/mobile/me");
+  await expect(page.getByRole("heading", { name: "我的" })).toBeVisible();
+  await expect(page.getByTestId("mobile-more-links")).toBeVisible();
+  await expect(page.locator("table")).toHaveCount(0);
+  await expectNoHorizontalOverflow(page);
+  await page.screenshot({ path: screenshotPath("09-mobile-me.png"), fullPage: true });
+});