From 8d1a535a6353d3cc6aae040127936dddaba80123 Mon Sep 17 00:00:00 2001
From: selfrelease <freedak.ipad@gmail.com>
Date: Thu, 18 Jun 2026 10:13:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(workbench):=20=E5=85=A8=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=AA=E6=A1=88=E5=B7=A5=E4=BD=9C=E5=8F=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

性能与加载:
- 分阶段加载：档案头、个案数据、档案数据各自独立加载，骨架屏替代 spinner
- PatientHeadSkeleton / WorkbenchSkeleton / ArchiveSkeleton 三套骨架
- 档案库懒加载（切换 Tab 时才请求）

交互增强:
- Alert 卡片增加「标记已读」和「关闭」按钮，调用 acknowledgeAlert / resolveAlert API
- 态势感知 Detail 区支持同时展开多个类型（状态独立）
- StatCard 点击可折叠/展开，带 chevron 指示
- 待办列表增加分页（每页 8 条）

AI 建议:
- 从单一方案扩展为 3 套方案（保守 A / 常规 B / 积极 C）
- 支持切换标签，卡片内动画过渡
- 每套方案可一键生成对应处置单
- 预置空腹血糖、血压、体重等多套模板

指标卡片:
- Sparkline 增加阈值参考虚线（min/max）
- 超限高亮点 + 「超限」角标
- 档案库扩展为 8 个指标卡（新增舒张压、OGTT 1h/2h、餐后血糖）
- 阈值常量统一管理（THRESHOLDS Map）

分页:
- 档案库观测历史分页（每页 8 条）
- 待办列表分页

样式完善:
- badge-emerald / badge-rose / badge-indigo / badge-calm
- btn-xs / btn-success / btn-rose
- grid-4 / align-center / border-l-*
- 脉冲危急点动画、Tab 未读计数角标
- Alert 支持 updatedAt，severity 别名兼容后端字段

Co-Authored-By: Claude <noreply@anthropic.com>
---
 pcm-platform/admin-web/src/api/client.ts      |    4 +
 pcm-platform/admin-web/src/api/types.ts       |    3 +
 .../admin-web/src/components/Skeleton.css     |   22 +
 .../admin-web/src/components/Skeleton.tsx     |  180 ++
 .../admin-web/src/pages/CaseWorkbenchPage.css |  118 +-
 .../admin-web/src/pages/CaseWorkbenchPage.tsx | 2149 ++++++++++-------
 pcm-platform/admin-web/src/styles/global.css  |   83 +
 7 files changed, 1653 insertions(+), 906 deletions(-)
 create mode 100644 pcm-platform/admin-web/src/components/Skeleton.css
 create mode 100644 pcm-platform/admin-web/src/components/Skeleton.tsx

diff --git a/pcm-platform/admin-web/src/api/client.ts b/pcm-platform/admin-web/src/api/client.ts
index 7759943..5662497 100644
--- a/pcm-platform/admin-web/src/api/client.ts
+++ b/pcm-platform/admin-web/src/api/client.ts
@@ -93,6 +93,10 @@ export const api = {
   listObservations: (patientId: string): Promise<Observation[]> =>
     request(`/patients/${patientId}/observations`),
   listAlerts: (patientId: string): Promise<Alert[]> => request(`/patients/${patientId}/alerts`),
+  acknowledgeAlert: (patientId: string, alertId: string): Promise<Alert> =>
+    request(`/patients/${patientId}/alerts/${alertId}/acknowledge`, { method: 'POST' }),
+  resolveAlert: (patientId: string, alertId: string): Promise<Alert> =>
+    request(`/patients/${patientId}/alerts/${alertId}/resolve`, { method: 'POST' }),
   listReminders: (patientId: string): Promise<Reminder[]> =>
     request(`/patients/${patientId}/reminders`),
 
diff --git a/pcm-platform/admin-web/src/api/types.ts b/pcm-platform/admin-web/src/api/types.ts
index 9dd4afc..edb06e4 100644
--- a/pcm-platform/admin-web/src/api/types.ts
+++ b/pcm-platform/admin-web/src/api/types.ts
@@ -64,10 +64,13 @@ export interface Alert {
   indicator: string;
   value: number;
   level: RiskLevel;
+  /** severity 为 level 的别名，后端字段对齐 */
+  severity: RiskLevel;
   ruleIds: string[];
   messages: string[];
   status: AlertStatus;
   createdAt: string;
+  updatedAt: string;
 }
 
 // 个案
diff --git a/pcm-platform/admin-web/src/components/Skeleton.css b/pcm-platform/admin-web/src/components/Skeleton.css
new file mode 100644
index 0000000..b83ce33
--- /dev/null
+++ b/pcm-platform/admin-web/src/components/Skeleton.css
@@ -0,0 +1,22 @@
+/* 骨架屏动画 */
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.skeleton-line {
+  display: inline-block;
+  background: linear-gradient(
+    90deg,
+    var(--color-border) 25%,
+    var(--color-bg) 50%,
+    var(--color-border) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.5s infinite linear;
+  vertical-align: middle;
+}
+
+.skeleton-root {
+  pointer-events: none;
+}
diff --git a/pcm-platform/admin-web/src/components/Skeleton.tsx b/pcm-platform/admin-web/src/components/Skeleton.tsx
new file mode 100644
index 0000000..3f870fe
--- /dev/null
+++ b/pcm-platform/admin-web/src/components/Skeleton.tsx
@@ -0,0 +1,180 @@
+/**
+ * 骨架屏组件 — 真实布局骨架，提升感知加载速度
+ * 替代整页 loading spinner，让用户"看到"即将呈现的内容结构
+ */
+
+import './Skeleton.css';
+
+interface SkeletonLineProps {
+  width?: string;
+  height?: string;
+  radius?: string;
+}
+
+function SkeletonLine({ width = '100%', height = '14px', radius = '4px' }: SkeletonLineProps): JSX.Element {
+  return (
+    <span
+      className="skeleton-line"
+      style={{ width, height, borderRadius: radius }}
+      aria-hidden="true"
+    />
+  );
+}
+
+function SkeletonBlock({ width = '100%', height = '80px' }: { width?: string; height?: string }): JSX.Element {
+  return (
+    <span
+      className="skeleton-line"
+      style={{ width, height, borderRadius: '8px' }}
+      aria-hidden="true"
+    />
+  );
+}
+
+function SkeletonCircle({ size = '48px' }: { size?: string }): JSX.Element {
+  return (
+    <span
+      className="skeleton-line"
+      style={{ width: size, height: size, borderRadius: '50%' }}
+      aria-hidden="true"
+    />
+  );
+}
+
+export function PatientHeadSkeleton(): JSX.Element {
+  return (
+    <div className="card patient-head skeleton-root">
+      <div className="patient-head__main">
+        <SkeletonCircle size="48px" />
+        <div style={{ flex: 1 }}>
+          <div style={{ display: 'flex', gap: '8px', marginBottom: '8px', alignItems: 'center' }}>
+            <SkeletonLine width="120px" height="18px" />
+            <SkeletonLine width="60px" height="18px" radius="12px" />
+            <SkeletonLine width="60px" height="18px" radius="12px" />
+          </div>
+          <SkeletonLine width="280px" height="12px" />
+          <div style={{ marginTop: '6px' }}>
+            <SkeletonLine width="200px" height="10px" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function WorkbenchSkeleton(): JSX.Element {
+  return (
+    <div className="stack">
+      {/* Tab 骨架 */}
+      <div className="skeleton-root" style={{ display: 'flex', gap: '4px', padding: '4px', borderRadius: '8px', background: 'var(--color-bg)', border: '1px solid var(--color-border)' }}>
+        <SkeletonLine width="160px" height="36px" radius="6px" />
+        <SkeletonLine width="180px" height="36px" radius="6px" />
+      </div>
+
+      {/* 态势感知双栏 */}
+      <div className="workbench-layout-container">
+        <div className="card shadow-sm workbench-master skeleton-root">
+          <SkeletonLine width="80px" height="14px" />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginTop: '12px' }}>
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 12px', border: '1px solid var(--color-border)', borderRadius: '6px' }}>
+                <SkeletonLine width="80px" height="12px" />
+                <SkeletonLine width="40px" height="20px" />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="card shadow-sm workbench-detail skeleton-root">
+          <SkeletonLine width="100px" height="14px" />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' }}>
+            {[1, 2, 3].map((i) => (
+              <div key={i} style={{ padding: '8px 12px', border: '1px solid var(--color-border)', borderRadius: '6px' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
+                  <SkeletonLine width="120px" height="12px" />
+                  <SkeletonLine width="40px" height="18px" radius="10px" />
+                </div>
+                <SkeletonLine width="200px" height="10px" />
+                <SkeletonLine width="160px" height="10px" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 流程卡片 */}
+      <div className="card skeleton-root">
+        <SkeletonLine width="80px" height="14px" />
+        <div style={{ display: 'flex', gap: '8px', marginTop: '12px', flexWrap: 'wrap' }}>
+          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+            <SkeletonLine key={i} width="60px" height="28px" radius="14px" />
+          ))}
+        </div>
+        <SkeletonLine width="200px" height="12px" />
+      </div>
+
+      {/* 指标卡片网格 */}
+      <div className="grid-4" style={{ gap: 'var(--space-3)' }}>
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="card skeleton-root">
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+              <SkeletonLine width="70px" height="12px" />
+              <SkeletonLine width="40px" height="18px" radius="8px" />
+            </div>
+            <SkeletonLine width="100px" height="24px" />
+            <div style={{ marginTop: '12px' }}>
+              <SkeletonLine width="160px" height="40px" />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 双栏 */}
+      <div className="grid-2 workbench-grid">
+        <div className="card skeleton-root">
+          <SkeletonLine width="120px" height="14px" />
+          <SkeletonBlock height="120px" />
+        </div>
+        <div className="card skeleton-root">
+          <SkeletonLine width="120px" height="14px" />
+          <SkeletonBlock height="120px" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ArchiveSkeleton(): JSX.Element {
+  return (
+    <div className="stack">
+      <div className="grid-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="card skeleton-root">
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+              <SkeletonLine width="80px" height="12px" />
+              <SkeletonLine width="36px" height="16px" radius="8px" />
+            </div>
+            <SkeletonLine width="60px" height="22px" />
+            <SkeletonLine width="160px" height="36px" />
+          </div>
+        ))}
+      </div>
+      <div className="grid-2">
+        <div className="card skeleton-root">
+          <SkeletonLine width="140px" height="14px" />
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px', marginTop: '12px' }}>
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <div key={i}>
+                <SkeletonLine width="60px" height="10px" />
+                <SkeletonLine width="80px" height="12px" />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="card skeleton-root">
+          <SkeletonLine width="180px" height="14px" />
+          <SkeletonBlock height="100px" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.css b/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.css
index a815f2a..d0254b5 100644
--- a/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.css
+++ b/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.css
@@ -592,8 +592,118 @@
   }
 }
 
-@media (max-width: 980px) {
-  .workbench-grid {
-    grid-template-columns: 1fr;
-  }
+/* AI 建议多方案切换 */
+.ai-variant-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: var(--space-3);
+  flex-wrap: wrap;
+}
+.ai-variant-tab {
+  padding: 5px 12px;
+  border: 1.5px solid var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg);
+  font-size: var(--font-xs);
+  font-weight: 600;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ai-variant-tab:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary-strong);
+  background: var(--color-primary-soft);
+}
+.ai-variant-tab.active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(220, 86, 138, 0.3);
+}
+.ai-variant-detail {
+  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* 分页 */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+  font-size: var(--font-xs);
+  color: var(--color-text-muted);
+}
+.pagination button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+}
+
+/* 脉冲危急点 */
+@keyframes pulse-alert {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.85); }
+}
+.pulse-dot {
+  animation: pulse-alert 1.5s ease-in-out infinite;
+}
+
+/* 告警卡操作按钮 */
+.alert-item-card .btn-xs {
+  padding: 2px 4px;
+  min-width: 22px;
+  height: 22px;
+  color: var(--color-text-muted);
+}
+.alert-item-card .btn-xs:hover {
+  color: var(--color-primary-strong);
+  background: var(--color-primary-soft);
+}
+
+/* 舒张压卡片单独显示 */
+.diagostic-indicator-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--space-3);
+}
+
+/* Tab badge */
+.tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  margin-left: 4px;
+  background: var(--color-danger);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 9px;
+  animation: pulse-alert 2s ease-in-out infinite;
+}
+
+/* 细化 detail-section 动画 */
+.detail-section {
+  animation: fadeIn 0.2s ease both;
+}
+
+/* dispose-status badge 扩展 */
+.disp-status-badge.pending_confirmation { background: rgba(201,130,31,0.12); color: var(--color-warn); border: 1px solid rgba(201,130,31,0.3); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: 700; }
+.disp-status-badge.executing { background: rgba(47,111,176,0.1); color: var(--color-calm); border: 1px solid rgba(47,111,176,0.3); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: 700; }
+.disp-status-badge.closed { background: var(--color-ok-soft); color: var(--color-ok); border: 1px solid rgba(46,158,107,0.3); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: 700; }
+
+/* justify-center */
+.justify-center { justify-content: center; }
+
+@media (max-width: 980px) {
+  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
+  .indicators-summary-grid { grid-template-columns: repeat(2, 1fr) !important; }
 }
diff --git a/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.tsx b/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.tsx
index ca650e5..2fe7e2a 100644
--- a/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.tsx
+++ b/pcm-platform/admin-web/src/pages/CaseWorkbenchPage.tsx
@@ -1,12 +1,41 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { ArrowLeft, UserRound, Sparkles, ShieldCheck, CheckCircle2, MessageSquareHeart, ShieldAlert, BookOpen, Send } from 'lucide-react';
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowLeft,
+  BookOpen,
+  CheckCircle2,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  Filter,
+  MessageSquareHeart,
+  RefreshCw,
+  Send,
+  ShieldAlert,
+  Sparkles,
+  UserRound,
+  X,
+} from 'lucide-react';
 import { api, ApiError } from '../api/client';
 import { useToast } from '../components/Toast';
 import { useAuth } from '../auth/AuthContext';
 import { useAutoRefresh } from '../lib/useAutoRefresh';
-import type { Alert, CarePlan, Observation, PatientSummary, PregnancyCase, Reminder, WorklistItem, Disposition, Referral, EmotionCheckin } from '../api/types';
-import { formatDate, riskBadgeClass, riskLabel } from '../lib/format';
+import { PatientHeadSkeleton, WorkbenchSkeleton, ArchiveSkeleton } from '../components/Skeleton';
+import type {
+  Alert,
+  CarePlan,
+  Observation,
+  PatientSummary,
+  PregnancyCase,
+  Reminder,
+  WorklistItem,
+  Disposition,
+  Referral,
+  EmotionCheckin,
+} from '../api/types';
+import { formatDate, formatTime, riskBadgeClass, riskLabel } from '../lib/format';
 import { CaseFlowPanel } from '../components/workbench/CaseFlowPanel';
 import { CarePlanPanel } from '../components/workbench/CarePlanPanel';
 import { RedflagPanel } from '../components/workbench/RedflagPanel';
@@ -14,125 +43,330 @@ import { RemindersPanel } from '../components/workbench/RemindersPanel';
 import { CaseTimeline } from '../components/workbench/CaseTimeline';
 import './CaseWorkbenchPage.css';
 
-// SVG 迷你趋势图组件 (Sparkline) - 自适应，清爽，高性能
-function Sparkline({ points, minLimit, maxLimit }: { points: number[]; minLimit?: number; maxLimit?: number }): JSX.Element {
+// ============================================================
+// Sparkline：增加阈值参考虚线 + 超限高亮
+// ============================================================
+const THRESHOLDS: Record<string, { min?: number; max?: number; unit: string }> = {
+  fasting_glucose: { min: 5.1, max: 7.0, unit: 'mmol/L' },
+  postprandial_glucose: { max: 8.5, unit: 'mmol/L' },
+  ogtt_1h: { max: 10.0, unit: 'mmol/L' },
+  ogtt_2h: { max: 8.5, unit: 'mmol/L' },
+  systolic_bp: { min: 90, max: 140, unit: 'mmHg' },
+  diastolic_bp: { min: 60, max: 90, unit: 'mmHg' },
+  weight: { max: 85, unit: 'kg' },
+  heart_rate: { min: 50, max: 110, unit: 'bpm' },
+};
+
+function Sparkline({
+  points,
+  minLimit,
+  maxLimit,
+  indicator,
+}: {
+  points: number[];
+  minLimit?: number;
+  maxLimit?: number;
+  indicator?: string;
+}): JSX.Element {
+  const threshold = indicator ? THRESHOLDS[indicator] : undefined;
+  const effectiveMin = minLimit ?? threshold?.min;
+  const effectiveMax = maxLimit ?? threshold?.max;
+
   if (points.length < 1) {
     return <span className="muted" style={{ fontSize: 'var(--font-xs)' }}>暂无图线</span>;
   }
-  
+
   const width = 160;
   const height = 40;
   const padding = 5;
-  
-  const minVal = minLimit !== undefined ? Math.min(minLimit, ...points) : Math.min(...points);
-  const maxVal = maxLimit !== undefined ? Math.max(maxLimit, ...points) : Math.max(...points);
+  const vals = points;
+  const allVals = [
+    ...vals,
+    ...(effectiveMin !== undefined ? [effectiveMin] : []),
+    ...(effectiveMax !== undefined ? [effectiveMax] : []),
+  ];
+  const minVal = Math.min(...allVals);
+  const maxVal = Math.max(...allVals);
   const valRange = maxVal - minVal === 0 ? 1 : maxVal - minVal;
 
-  const ptsStr = points
+  const lastVal = vals[vals.length - 1];
+  const isOverMax = effectiveMax !== undefined && lastVal > effectiveMax;
+  const isUnderMin = effectiveMin !== undefined && lastVal < effectiveMin;
+
+  const ptsStr = vals
     .map((val, idx) => {
-      const x = padding + (idx / (points.length - 1 || 1)) * (width - padding * 2);
+      const x = padding + (idx / Math.max(vals.length - 1, 1)) * (width - padding * 2);
       const y = height - padding - ((val - minVal) / valRange) * (height - padding * 2);
       return `${x},${y}`;
     })
     .join(' ');
 
-  return (
-    <svg width={width} height={height} className="sparkline">
-      {/* 限制阈值参考虚线（如果有） */}
-      {minLimit !== undefined && valRange > 1 && (
-        <line
-          x1={0}
-          y1={height - padding - ((minLimit - minVal) / valRange) * (height - padding * 2)}
-          x2={width}
-          y2={height - padding - ((minLimit - minVal) / valRange) * (height - padding * 2)}
-          stroke="var(--color-rose-soft)"
-          strokeWidth={1}
-          strokeDasharray="3 3"
-        />
-      )}
-      {maxLimit !== undefined && valRange > 1 && (
-        <line
-          x1={0}
-          y1={height - padding - ((maxLimit - minVal) / valRange) * (height - padding * 2)}
-          x2={width}
-          y2={height - padding - ((maxLimit - minVal) / valRange) * (height - padding * 2)}
-          stroke="var(--color-rose-soft)"
-          strokeWidth={1}
-          strokeDasharray="3 3"
-        />
-      )}
-      {/* 走向折线 */}
-      <polyline
-        fill="none"
-        stroke="var(--color-primary-strong)"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        points={ptsStr}
+  function dashedLine(val: number, key: string, color: string): JSX.Element | null {
+    if (val === undefined || valRange <= 0) return null;
+    const y = height - padding - ((val - minVal) / valRange) * (height - padding * 2);
+    return (
+      <line
+        key={key}
+        x1={0}
+        y1={y}
+        x2={width}
+        y2={y}
+        stroke={color}
+        strokeWidth={1}
+        strokeDasharray="3 3"
+        opacity={0.7}
       />
-      {/* 最新值实心红点 */}
-      {points.length > 0 && (
+    );
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {effectiveMin !== undefined && dashedLine(effectiveMin, 'min', 'var(--color-calm)')}
+      {effectiveMax !== undefined && dashedLine(effectiveMax, 'max', 'var(--color-danger)')}
+      <svg width={width} height={height} className="sparkline">
+        <polyline
+          fill="none"
+          stroke={isOverMax || isUnderMin ? 'var(--color-danger)' : 'var(--color-primary-strong)'}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          points={ptsStr}
+        />
         <circle
           cx={padding + (width - padding * 2)}
-          cy={height - padding - ((points[points.length - 1] - minVal) / valRange) * (height - padding * 2)}
+          cy={height - padding - ((lastVal - minVal) / valRange) * (height - padding * 2)}
           r={3.5}
-          fill="var(--color-primary)"
+          fill={isOverMax || isUnderMin ? 'var(--color-danger)' : 'var(--color-primary)'}
         />
+      </svg>
+      {(isOverMax || isUnderMin) && (
+        <span
+          style={{
+            position: 'absolute',
+            top: 2,
+            right: 0,
+            background: 'var(--color-danger)',
+            color: '#fff',
+            fontSize: '10px',
+            padding: '1px 5px',
+            borderRadius: '4px',
+            fontWeight: 700,
+          }}
+        >
+          超限
+        </span>
       )}
-    </svg>
+    </div>
   );
 }
 
-function translateIndicator(indicator: string): string {
-  const map: Record<string, string> = {
-    fasting_glucose: '空腹血糖',
-    ogtt_1h: 'OGTT 1小时血糖',
-    ogtt_2h: 'OGTT 2小时血糖',
-    postprandial_glucose: '餐后血糖',
-    systolic_bp: '收缩压',
-    diastolic_bp: '舒张压',
-    weight: '体重',
-    heart_rate: '心率',
-  };
-  return map[indicator] ?? indicator;
+// ============================================================
+// AI 建议多方案推荐
+// ============================================================
+type RecommendationVariant = 'conservative' | 'standard' | 'aggressive';
+
+interface AIRecommendationOption {
+  variant: RecommendationVariant;
+  label: string;
+  description: string;
+  actions: { kind: string; description: string }[];
+  icon: string;
 }
 
+const AI_RECOMMENDATIONS: Record<string, AIRecommendationOption[]> = {
+  fasting_glucose: [
+    {
+      variant: 'conservative',
+      label: '方案 A（保守）',
+      description: '先从饮食与运动调整开始，给身体 1 周自然恢复窗口。',
+      icon: '🌿',
+      actions: [
+        { kind: 'lifestyle', description: '饮食指导：减少精制碳水摄入，均衡蛋白质与膳食纤维' },
+        { kind: 'habit', description: '每日餐后散步 20–30 分钟，记录血糖曲线' },
+      ],
+    },
+    {
+      variant: 'standard',
+      label: '方案 B（常规）',
+      description: '立即安排 OGTT 复查，同时启动营养师饮食管理。',
+      icon: '📋',
+      actions: [
+        { kind: 'clinical', description: '安排 OGTT 复查（3 天内）并记录结果' },
+        { kind: 'lifestyle', description: '启动个体化营养干预方案' },
+        { kind: 'measurement', description: '连续 7 天自测空腹血糖，每日记录并上报' },
+      ],
+    },
+    {
+      variant: 'aggressive',
+      label: '方案 C（积极）',
+      description: '立即启动胰岛素治疗预案，同步饮食管理 + 密集监测。',
+      icon: '⚡',
+      actions: [
+        { kind: 'clinical', description: '预约内分泌科联合评估，考虑胰岛素治疗' },
+        { kind: 'measurement', description: '每日 4 次血糖监测（空腹 + 三餐后），密集随访' },
+        { kind: 'referral', description: '提请产科内分泌专家会诊，制定综合管理方案' },
+      ],
+    },
+  ],
+  systolic_bp: [
+    {
+      variant: 'conservative',
+      label: '方案 A（保守）',
+      description: '安静休息后复测，排除一过性血压升高诱因。',
+      icon: '🌿',
+      actions: [
+        { kind: 'measurement', description: '安静休息 30 分钟后复测血压，记录两次读数' },
+        { kind: 'habit', description: '减少咖啡因摄入，避免情绪激动，保证睡眠' },
+      ],
+    },
+    {
+      variant: 'standard',
+      label: '方案 B（常规）',
+      description: '启动血压管理，同时考虑子痫前期排查。',
+      icon: '📋',
+      actions: [
+        { kind: 'clinical', description: '完善子痫前期相关检查（尿蛋白、肝肾功能、血小板）' },
+        { kind: 'measurement', description: '每日早晚各测一次血压，记录并上报趋势' },
+        { kind: 'lifestyle', description: '左侧卧位休息，每天累计 ≥8 小时' },
+      ],
+    },
+    {
+      variant: 'aggressive',
+      label: '方案 C（积极）',
+      description: '立即启动降压药物治疗，提请急诊评估。',
+      icon: '⚡',
+      actions: [
+        { kind: 'clinical', description: '立即启动口服降压药（如拉贝洛尔），监测血压 Q4H' },
+        { kind: 'referral', description: '提请产科急诊评估，排查重度子痫前期' },
+        { kind: 'measurement', description: '住院密切监测母胎情况' },
+      ],
+    },
+  ],
+  weight: [
+    {
+      variant: 'conservative',
+      label: '方案 A（保守）',
+      description: '持续监测体重增长趋势，暂不强制干预。',
+      icon: '🌿',
+      actions: [{ kind: 'measurement', description: '每周固定时间称重，记录并绘制体重增长曲线' }],
+    },
+    {
+      variant: 'standard',
+      label: '方案 B（常规）',
+      description: '个体化营养方案，控制体重过快增长。',
+      icon: '📋',
+      actions: [
+        { kind: 'lifestyle', description: '营养师个体化饮食方案，控制总热量摄入' },
+        { kind: 'measurement', description: '每周记录体重，与 IOM 推荐增长目标对比' },
+      ],
+    },
+    {
+      variant: 'aggressive',
+      label: '方案 C（积极）',
+      description: '多学科联合体重管理，考虑代谢评估。',
+      icon: '⚡',
+      actions: [
+        { kind: 'clinical', description: '完善代谢评估（血糖、血脂、甲状腺功能）' },
+        { kind: 'referral', description: '多学科营养科联合随访' },
+      ],
+    },
+  ],
+};
+
+// 默认通用建议
+function defaultRecommendations(indicator: string, value: number): AIRecommendationOption[] {
+  return [
+    {
+      variant: 'standard',
+      label: '方案 B（常规）',
+      description: `针对 ${indicator} 异常（${value}），制定标准管理方案。`,
+      icon: '📋',
+      actions: [
+        { kind: 'measurement', description: '持续监测该指标，每周记录并上报趋势' },
+        { kind: 'lifestyle', description: '遵医嘱调整生活方式，3 天后复测' },
+      ],
+    },
+  ];
+}
+
+function getRecommendations(indicator: string, value: number): AIRecommendationOption[] {
+  return AI_RECOMMENDATIONS[indicator] ?? defaultRecommendations(indicator, value);
+}
+
+// ============================================================
+// 指标标签翻译
+// ============================================================
+const INDICATOR_LABELS: Record<string, string> = {
+  fasting_glucose: '空腹血糖',
+  ogtt_1h: 'OGTT 1h',
+  ogtt_2h: 'OGTT 2h',
+  postprandial_glucose: '餐后血糖',
+  systolic_bp: '收缩压',
+  diastolic_bp: '舒张压',
+  weight: '体重',
+  heart_rate: '心率',
+};
+
+function translateIndicator(indicator: string): string {
+  return INDICATOR_LABELS[indicator] ?? indicator;
+}
+
+// ============================================================
+// 主组件
+// ============================================================
 export function CaseWorkbenchPage(): JSX.Element {
   const { patientId = '' } = useParams();
   const { show } = useToast();
   const { user } = useAuth();
 
+  // ── 数据状态 ──────────────────────────────────────────────
   const [patient, setPatient] = useState<PatientSummary | null>(null);
   const [caseInfo, setCaseInfo] = useState<PregnancyCase | null>(null);
   const [alerts, setAlerts] = useState<Alert[]>([]);
   const [observations, setObservations] = useState<Observation[]>([]);
   const [carePlans, setCarePlans] = useState<CarePlan[]>([]);
   const [reminders, setReminders] = useState<Reminder[]>([]);
-  
-  // 新增 D 阶段持久化数据状态
   const [dispositions, setDispositions] = useState<Disposition[]>([]);
   const [referrals, setReferrals] = useState<Referral[]>([]);
   const [emotions, setEmotions] = useState<EmotionCheckin[]>([]);
   const [worklist, setWorklist] = useState<WorklistItem[]>([]);
   const [activeTab, setActiveTab] = useState<'workbench' | 'archive'>('workbench');
-  
-  // Master-Detail 联动
+
+  // ── 分页状态 ──────────────────────────────────────────────
+  const [worklistPage, setWorklistPage] = useState(1);
+  const [obsPage, setObsPage] = useState(1);
+  const PAGE_SIZE = 8;
+
+  // ── 态势感知展开状态 ──────────────────────────────────────
+  const [statExpanded, setStatExpanded] = useState<Record<string, boolean>>({
+    alerts: false,
+    followups: false,
+    emotions: false,
+    reminders: false,
+  });
+
+  // ── Master-Detail ──────────────────────────────────────────
   const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
   const [submittingDisposition, setSubmittingDisposition] = useState(false);
   const [actionNote, setActionNote] = useState('');
   const [referralReply, setReferralReply] = useState('');
   const [referralUrgency, setReferralUrgency] = useState<'routine' | 'urgent' | 'emergency'>('routine');
   const [referralSummary, setReferralSummary] = useState('');
-  
-  // 态势感知卡片选中状态
-  const [selectedStatCard, setSelectedStatCard] = useState<'alerts' | 'followups' | 'emotions' | 'reminders'>('alerts');
-  
-  // 趋势图缓存：[indicator ➔ point_values[]]
+
+  // ── AI 建议多方案选中状态 ────────────────────────────────
+  const [selectedVariant, setSelectedVariant] = useState<RecommendationVariant>('standard');
+
+  // ── 趋势图缓存 ────────────────────────────────────────────
   const [trendsMap, setTrendsMap] = useState<Record<string, { points: number[]; direction: string }>>({});
-  
+
+  // ── 加载状态（改为骨架屏） ────────────────────────────────
   const [loading, setLoading] = useState(true);
+  const [patientLoading, setPatientLoading] = useState(true);
+  const [workbenchLoading, setWorkbenchLoading] = useState(true);
+  const [archiveLoading, setArchiveLoading] = useState(false);
   const [opening, setOpening] = useState(false);
 
+  // ── 加载逻辑 ──────────────────────────────────────────────
   const loadCase = useCallback(async () => {
     try {
       const c = await api.getCase(patientId);
@@ -148,62 +382,229 @@ export function CaseWorkbenchPage(): JSX.Element {
     }
   }, [patientId, show]);
 
-  const loadAll = useCallback(
-    async (silent = false) => {
-      if (!silent) setLoading(true);
-      try {
-        const [p, al, obs, rem, dis, ref, emo, wl] = await Promise.all([
-          api.getPatient(patientId),
-          api.listAlerts(patientId),
-          api.listObservations(patientId),
-          api.listReminders(patientId),
-          api.listDispositions(patientId),
-          api.listReferrals(patientId),
-          api.listEmotions(patientId),
-          api.getWorklist(),
-        ]);
-        setPatient(p);
-        setAlerts([...al].reverse());
-        setObservations([...obs].reverse());
-        setReminders([...rem].reverse());
-        setDispositions(dis);
-        setReferrals(ref);
-        setEmotions(emo);
-        setWorklist(wl);
-        
-        await loadCase();
-        
-        // 并行极速拉取当前指标趋势
-        const indicatorsToFetch = ['fasting_glucose', 'systolic_bp', 'diastolic_bp', 'weight', 'heart_rate'];
-        const fetchedTrends = await Promise.all(
-          indicatorsToFetch.map(async (ind) => {
-            try {
-              const res = await api.getTrends(patientId, ind, 7);
-              return { indicator: ind, points: res.points.map((pt) => pt.value), direction: res.direction };
-            } catch {
-              return { indicator: ind, points: [], direction: 'stable' };
+  const loadPatientSummary = useCallback(async () => {
+    setPatientLoading(true);
+    try {
+      const p = await api.getPatient(patientId);
+      setPatient(p);
+    } catch {
+      setPatient(null);
+    } finally {
+      setPatientLoading(false);
+    }
+  }, [patientId]);
+
+  const loadWorkbenchData = useCallback(async () => {
+    setWorkbenchLoading(true);
+    try {
+      const [al, rem, dis, ref, emo, wl] = await Promise.all([
+        api.listAlerts(patientId),
+        api.listReminders(patientId),
+        api.listDispositions(patientId),
+        api.listReferrals(patientId),
+        api.listEmotions(patientId),
+        api.getWorklist(),
+      ]);
+      setAlerts([...al].reverse());
+      setReminders([...rem].reverse());
+      setDispositions(dis);
+      setReferrals(ref);
+      setEmotions(emo);
+      setWorklist(wl);
+      await loadCase();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '加载工作台数据失败');
+    } finally {
+      setWorkbenchLoading(false);
+      setLoading(false);
+    }
+  }, [patientId, loadCase, show]);
+
+  const loadArchiveData = useCallback(async () => {
+    setArchiveLoading(true);
+    try {
+      const [obs, trends] = await Promise.all([
+        api.listObservations(patientId),
+        Promise.all(
+          ['fasting_glucose', 'systolic_bp', 'diastolic_bp', 'weight', 'heart_rate', 'ogtt_1h', 'ogtt_2h'].map(
+            async (ind) => {
+              try {
+                const res = await api.getTrends(patientId, ind, 7);
+                return { indicator: ind, points: res.points.map((pt) => pt.value), direction: res.direction };
+              } catch {
+                return { indicator: ind, points: [] as number[], direction: 'stable' };
+              }
             }
-          })
-        );
-        const nextTrendsMap: Record<string, { points: number[]; direction: string }> = {};
-        for (const tr of fetchedTrends) {
-          nextTrendsMap[tr.indicator] = { points: tr.points, direction: tr.direction };
-        }
-        setTrendsMap(nextTrendsMap);
-      } catch (err) {
-        if (!silent) show(err instanceof ApiError ? err.message : '加载孕妇信息失败');
-      } finally {
-        setLoading(false);
+          )
+        ),
+      ]);
+      setObservations([...obs].reverse());
+      const nextTrends: Record<string, { points: number[]; direction: string }> = {};
+      for (const tr of trends) {
+        nextTrends[tr.indicator] = { points: tr.points, direction: tr.direction };
       }
-    },
-    [patientId, loadCase, show],
-  );
+      setTrendsMap(nextTrends);
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '加载档案数据失败');
+    } finally {
+      setArchiveLoading(false);
+    }
+  }, [patientId, show]);
 
   useEffect(() => {
-    void loadAll();
-  }, [loadAll]);
+    void loadPatientSummary();
+    void loadWorkbenchData();
+  }, [loadPatientSummary, loadWorkbenchData]);
 
-  useAutoRefresh(() => void loadAll(true));
+  useEffect(() => {
+    if (activeTab === 'archive') {
+      void loadArchiveData();
+    }
+  }, [activeTab, loadArchiveData]);
+
+  // 仅在标签可见时静默刷新工作台数据
+  useAutoRefresh(() => void loadWorkbenchData(), { intervalMs: 20000 });
+
+  // 默认选中第一项
+  const myItems = useMemo(() => worklist.filter((it) => it.patientId === patientId), [worklist, patientId]);
+  useEffect(() => {
+    if (myItems.length > 0 && !selectedItemId) {
+      setSelectedItemId(myItems[0].id);
+      setWorklistPage(1);
+    }
+  }, [myItems, selectedItemId]);
+
+  const selectedItem = useMemo(
+    () => myItems.find((it) => it.id === selectedItemId) || null,
+    [myItems, selectedItemId]
+  );
+
+  const matchedAlert = useMemo(
+    () => (selectedItem?.type === 'alert' ? alerts.find((a) => a.id === selectedItem.sourceId) || null : null),
+    [selectedItem, alerts]
+  );
+  const matchedEmotion = useMemo(
+    () => (selectedItem?.type === 'emotion' ? emotions.find((e) => e.id === selectedItem.sourceId) || null : null),
+    [selectedItem, emotions]
+  );
+  const matchedReferral = useMemo(
+    () => (selectedItem?.type === 'referral' ? referrals.find((r) => r.id === selectedItem.sourceId) || null : null),
+    [selectedItem, referrals]
+  );
+
+  const myDispositions = useMemo(
+    () => dispositions.filter((d) => d.patientId === patientId),
+    [dispositions, patientId]
+  );
+
+  // ── 告警操作 ──────────────────────────────────────────────
+  async function handleAcknowledgeAlert(alertId: string): Promise<void> {
+    try {
+      const updated = await api.acknowledgeAlert(patientId, alertId);
+      setAlerts((prev) => prev.map((a) => (a.id === alertId ? updated : a)));
+      show('已标记告警为「已读」');
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '操作失败');
+    }
+  }
+
+  async function handleResolveAlert(alertId: string): Promise<void> {
+    try {
+      const updated = await api.resolveAlert(patientId, alertId);
+      setAlerts((prev) => prev.map((a) => (a.id === alertId ? updated : a)));
+      show('告警已关闭并归档');
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '操作失败');
+    }
+  }
+
+  // ── 处置单 ────────────────────────────────────────────────
+  async function handleCreateDisposition(recommendationTitle: string, kind: string, desc: string): Promise<void> {
+    if (!caseInfo) return;
+    setSubmittingDisposition(true);
+    try {
+      await api.createDisposition(patientId, {
+        caseId: caseInfo.id,
+        sourceType: selectedItem?.type || 'routine',
+        sourceId: selectedItem?.sourceId,
+        title: recommendationTitle,
+        riskLevelAtCreation: caseInfo.riskLevel,
+        actions: [{ kind, description: desc }],
+      });
+      show('已生成处置单草案！');
+      void loadWorkbenchData();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '生成处置单失败');
+    } finally {
+      setSubmittingDisposition(false);
+    }
+  }
+
+  async function handleConfirmDisposition(id: string): Promise<void> {
+    try {
+      await api.confirmDisposition(id);
+      show('主管医生已批准处置单，进入执行阶段。');
+      void loadWorkbenchData();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '确认失败');
+    }
+  }
+
+  async function handleExecuteAction(dispositionId: string, actionId: string): Promise<void> {
+    try {
+      await api.executeDispositionAction(dispositionId, actionId, { resultNote: actionNote || '已交代执行' });
+      show('动作已执行，已生成复测跟进项！');
+      setActionNote('');
+      void loadWorkbenchData();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '执行失败');
+    }
+  }
+
+  async function handleAcceptReferral(id: string): Promise<void> {
+    try {
+      await api.acceptReferral(id);
+      show('医生已接诊会诊任务。');
+      void loadWorkbenchData();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '接诊失败');
+    }
+  }
+
+  async function handleRespondReferral(id: string): Promise<void> {
+    if (!referralReply.trim()) { show('请填写会诊回复意见'); return; }
+    try {
+      await api.respondReferral(id, referralReply, 'completed');
+      show('会诊意见已提交！');
+      setReferralReply('');
+      void loadWorkbenchData();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '回复失败');
+    }
+  }
+
+  async function handleSendCareReminder(): Promise<void> {
+    show('已为该高焦虑孕妇下发静息休息关怀提醒。');
+  }
+
+  async function handleCreateReferralManual(): Promise<void> {
+    if (!referralSummary.trim()) { show('请填写病情描述'); return; }
+    try {
+      await api.createReferral({
+        patientId,
+        dispositionId: null,
+        type: 'consult',
+        urgency: referralUrgency,
+        toDoctorId: '00000000-0000-0000-0000-000000000005',
+        clinicalSummary: referralSummary,
+      });
+      show('会诊发起成功！');
+      setReferralSummary('');
+      void loadWorkbenchData();
+    } catch (err) {
+      show(err instanceof ApiError ? err.message : '发起失败');
+    }
+  }
 
   async function openCase(): Promise<void> {
     if (!patient) return;
@@ -219,161 +620,50 @@ export function CaseWorkbenchPage(): JSX.Element {
     }
   }
 
-  // 1. 本个案过滤的待处置待办
-  const myItems = useMemo(() => {
-    return worklist.filter((it) => it.patientId === patientId);
-  }, [worklist, patientId]);
+  // ── 分页计算 ──────────────────────────────────────────────
+  const paginatedItems = useMemo(() => {
+    const start = (worklistPage - 1) * PAGE_SIZE;
+    return myItems.slice(start, start + PAGE_SIZE);
+  }, [myItems, worklistPage]);
 
-  // 默认选中第一项
-  useEffect(() => {
-    if (myItems.length > 0 && !selectedItemId) {
-      setSelectedItemId(myItems[0].id);
-    }
-  }, [myItems, selectedItemId]);
+  const paginatedObs = useMemo(() => {
+    const start = (obsPage - 1) * PAGE_SIZE;
+    return observations.slice(start, start + PAGE_SIZE);
+  }, [observations, obsPage]);
 
-  const selectedItem = useMemo(() => {
-    return myItems.find((it) => it.id === selectedItemId) || null;
-  }, [myItems, selectedItemId]);
+  const totalWorklistPages = Math.ceil(myItems.length / PAGE_SIZE);
+  const totalObsPages = Math.ceil(observations.length / PAGE_SIZE);
 
-  // 2. 根据选中的待办，匹配实体：
-  const matchedAlert = useMemo(() => {
-    if (!selectedItem || selectedItem.type !== 'alert') return null;
-    return alerts.find((a) => a.id === selectedItem.sourceId) || null;
-  }, [selectedItem, alerts]);
+  const openAlerts = useMemo(() => alerts.filter((a) => a.status === 'open'), [alerts]);
+  const followingUpDisps = useMemo(() => myDispositions.filter((d) => d.status === 'following_up'), [myDispositions]);
 
-  const matchedEmotion = useMemo(() => {
-    if (!selectedItem || selectedItem.type !== 'emotion') return null;
-    return emotions.find((e) => e.id === selectedItem.sourceId) || null;
-  }, [selectedItem, emotions]);
-
-  const matchedReferral = useMemo(() => {
-    if (!selectedItem || selectedItem.type !== 'referral') return null;
-    return referrals.find((r) => r.id === selectedItem.sourceId) || null;
-  }, [selectedItem, referrals]);
-
-  // AI 建议处置生成处置单
-  async function handleCreateDispositionFromRecommendation(recommendationTitle: string, kind: string, desc: string): Promise<void> {
-    if (!caseInfo) return;
-    setSubmittingDisposition(true);
-    try {
-      await api.createDisposition(patientId, {
-        caseId: caseInfo.id,
-        sourceType: selectedItem?.type || 'routine',
-        sourceId: selectedItem?.sourceId,
-        title: recommendationTitle,
-        riskLevelAtCreation: caseInfo.riskLevel,
-        actions: [{ kind, description: desc }],
-      });
-      show('已为您成功生成处置单草案！');
-      void loadAll(true);
-    } catch (err) {
-      show(err instanceof ApiError ? err.message : '生成处置单失败');
-    } finally {
-      setSubmittingDisposition(false);
-    }
+  // ── 渲染 ──────────────────────────────────────────────────
+  if (patientLoading) {
+    return (
+      <div className="stack">
+        <Link to="/worklist" className="muted"><ArrowLeft size={16} strokeWidth={1.75} /> 返回工作列表</Link>
+        <PatientHeadSkeleton />
+      </div>
+    );
   }
 
-  // 确认处置单
-  async function handleConfirmDisposition(id: string): Promise<void> {
-    try {
-      await api.confirmDisposition(id);
-      show('主管医生已批准该高危处置单！已进入执行阶段。');
-      void loadAll(true);
-    } catch (err) {
-      show(err instanceof ApiError ? err.message : '确认处置单失败');
-    }
-  }
-
-  // 执行并生成复测跟进项
-  async function handleExecuteAction(dispositionId: string, actionId: string): Promise<void> {
-    try {
-      await api.executeDispositionAction(dispositionId, actionId, {
-        resultNote: actionNote || '已交代执行',
-      });
-      show('动作已成功执行，已一键生成后端复测达标跟进项(FollowUp)！');
-      setActionNote('');
-      void loadAll(true);
-    } catch (err) {
-      show(err instanceof ApiError ? err.message : '执行失败');
-    }
-  }
-
-  // 医生接受转会诊
-  async function handleAcceptReferral(id: string): Promise<void> {
-    try {
-      await api.acceptReferral(id);
-      show('医生已接诊会诊任务，状态流转为会诊中。');
-      void loadAll(true);
-    } catch (err) {
-      show(err instanceof ApiError ? err.message : '接诊失败');
-    }
-  }
-
-  // 医生在线填写意见并回复
-  async function handleRespondReferral(id: string): Promise<void> {
-    if (!referralReply.trim()) {
-      show('请填写会诊回复意见');
-      return;
-    }
-    try {
-      await api.respondReferral(id, referralReply, 'completed');
-      show('会诊意见已在线成功回复！');
-      setReferralReply('');
-      void loadAll(true);
-    } catch (err) {
-      show(err instanceof ApiError ? err.message : '回复会诊失败');
-    }
-  }
-
-  // 下发心理关怀静息休息提醒
-  async function handleSendCareReminder(): Promise<void> {
-    try {
-      // 通过红旗来安全派发 rest，或者是由于高风险直接下发
-      show('关怀动作：已为该高焦虑孕妇下发静息休息关怀动作提醒。');
-    } catch (err) {
-      show('下发失败');
-    }
-  }
-
-  // 手动发起转诊/会诊
-  async function handleCreateReferralManual(): Promise<void> {
-    if (!referralSummary.trim()) {
-      show('请填写病情描述');
-      return;
-    }
-    try {
-      await api.createReferral({
-        patientId,
-        dispositionId: null,
-        type: 'consult',
-        urgency: referralUrgency,
-        toDoctorId: '00000000-0000-0000-0000-000000000005', // 种子里的 test_doctor_01
-        clinicalSummary: referralSummary,
-      });
-      show('会诊发起成功！已指派给专家医生协同。');
-      setReferralSummary('');
-      void loadAll(true);
-    } catch (err) {
-      show(err instanceof ApiError ? err.message : '发起会诊失败');
-    }
-  }
-
-  if (loading) {
-    return <p className="empty">临床数据极速载入中…</p>;
-  }
   if (!patient) {
     return (
       <div className="stack">
-        <Link to="/worklist" className="muted">
-          <ArrowLeft size={16} strokeWidth={1.75} /> 返回工作列表
-        </Link>
+        <Link to="/worklist" className="muted"><ArrowLeft size={16} strokeWidth={1.75} /> 返回工作列表</Link>
         <p className="empty">未找到该孕妇。</p>
       </div>
     );
   }
 
-  // 针对该孕妇匹配当前的活动处置单
-  const myDispositions = dispositions.filter(d => d.patientId === patientId);
+  // 最新关键指标（用于档案卡）
+  const latestObs = useMemo(() => {
+    const map: Record<string, Observation> = {};
+    for (const o of observations) {
+      if (!map[o.indicator]) map[o.indicator] = o;
+    }
+    return map;
+  }, [observations]);
 
   return (
     <div className="stack">
@@ -381,7 +671,7 @@ export function CaseWorkbenchPage(): JSX.Element {
         <ArrowLeft size={16} strokeWidth={1.75} /> 返回工作列表
       </Link>
 
-      {/* 档案摘要头 (B端精细大卡) */}
+      {/* 档案摘要头 */}
       <div className="card patient-head shadow-sm">
         <div className="patient-head__main">
           <div className="patient-head__avatar shadow-sm">
@@ -390,26 +680,27 @@ export function CaseWorkbenchPage(): JSX.Element {
           <div>
             <h1 className="patient-head__name">
               {patient.name}
-              <span className={`badge ${riskBadgeClass(patient.initialRiskLevel)}`}>
-                初始 {riskLabel(patient.initialRiskLevel)}
-              </span>
-              {caseInfo && (
-                <span className={`badge ${riskBadgeClass(caseInfo.riskLevel)}`}>
-                  当前 {riskLabel(caseInfo.riskLevel)}
-                </span>
-              )}
+              <span className={`badge ${riskBadgeClass(patient.initialRiskLevel)}`}>初始 {riskLabel(patient.initialRiskLevel)}</span>
+              {caseInfo && <span className={`badge ${riskBadgeClass(caseInfo.riskLevel)}`}>当前 {riskLabel(caseInfo.riskLevel)}</span>}
             </h1>
             <p className="muted">
-              编号 {patient.patientNo || '—'} · {patient.age} 岁 · 孕 {patient.gestationalWeeks} 周{' '}
-              {patient.gestationalDays} 天 · 预产期 {formatDate(patient.edd)}
+              编号 {patient.patientNo || '—'} · {patient.age} 岁 · 孕 {patient.gestationalWeeks} 周 {patient.gestationalDays} 天
+              · 预产期 {formatDate(patient.edd)}
               {patient.prePregnancyBmi != null && ` · 孕前 BMI ${patient.prePregnancyBmi.toFixed(1)}`}
             </p>
             {patient.initialRiskFactors.length > 0 && (
-              <p className="muted patient-head__factors">
-                基线风险因素：{patient.initialRiskFactors.join('、')}
-              </p>
+              <p className="patient-head__factors">基线风险因素：{patient.initialRiskFactors.join('、')}</p>
             )}
           </div>
+          <button
+            className="btn btn-ghost btn-sm"
+            onClick={() => { void loadWorkbenchData(); }}
+            title="刷新数据"
+            type="button"
+            style={{ marginLeft: 'auto' }}
+          >
+            <RefreshCw size={14} />
+          </button>
         </div>
       </div>
 
@@ -424,338 +715,395 @@ export function CaseWorkbenchPage(): JSX.Element {
         </div>
       ) : (
         <>
-          {/* 胶囊 Tab 控制器 */}
+          {/* 胶囊 Tab */}
           <div className="tab-pill-container shadow-sm">
             <div className="tab-pill-group">
-              <button
-                className={`tab-pill ${activeTab === 'workbench' ? 'active' : ''}`}
-                onClick={() => setActiveTab('workbench')}
-              >
-                个案工作台 (决策与处置)
+              <button className={`tab-pill ${activeTab === 'workbench' ? 'active' : ''}`} onClick={() => setActiveTab('workbench')}>
+                个案工作台
+                {openAlerts.length > 0 && <span className="tab-badge">{openAlerts.length}</span>}
               </button>
-              <button
-                className={`tab-pill ${activeTab === 'archive' ? 'active' : ''}`}
-                onClick={() => setActiveTab('archive')}
-              >
-                健康档案库 (全数据汇集)
+              <button className={`tab-pill ${activeTab === 'archive' ? 'active' : ''}`} onClick={() => setActiveTab('archive')}>
+                健康档案库
               </button>
             </div>
           </div>
 
-          {activeTab === 'workbench' ? (
-            /* ========================================================
-               TAB 1: 决策与处置个案工作台 (T-D.7 + T-D.3 + T-D.4)
-               ======================================================== */
-            <div className="stack">
-              {/* 1. 态势感知速览 Master-Detail 布局 */}
-              <div className="workbench-layout-container">
-                {/* Master: 态势卡片列表 */}
-                <div className="workbench-master card shadow-sm">
-                  <h3 className="pane-title">态势感知速览</h3>
-                  <div className="stat-list">
-                    <div
-                      className={`stat-item ${selectedStatCard === 'alerts' ? 'active' : ''}`}
-                      onClick={() => setSelectedStatCard('alerts')}
-                    >
-                      <div className="stat-item__label">待处理警报</div>
-                      <div className="stat-item__val text-rose">{alerts.filter(a => a.status === 'open').length} <span className="stat-unit">条</span></div>
+          {/* ── TAB 1: 个案工作台 ──────────────────────────────── */}
+          {activeTab === 'workbench' && (
+            workbenchLoading ? <WorkbenchSkeleton /> : (
+              <div className="stack">
+                {/* 1. 态势感知 Master-Detail */}
+                <div className="workbench-layout-container">
+                  <div className="workbench-master card shadow-sm">
+                    <h3 className="pane-title"><ShieldAlert size={18} strokeWidth={1.8} /> 态势感知速览</h3>
+                    <div className="stat-list">
+                      <StatCard
+                        label="待处理警报"
+                        value={openAlerts.length}
+                        unit="条"
+                        colorClass="text-rose"
+                        badge={
+                          openAlerts.length > 0
+                            ? <span className="badge badge-rose pulse-dot">危急</span>
+                            : <span className="badge badge-emerald">已清零</span>
+                        }
+                        expanded={statExpanded.alerts}
+                        onToggle={() => setStatExpanded((p) => ({ ...p, alerts: !p.alerts }))}
+                        loading={workbenchLoading}
+                      />
+                      <StatCard
+                        label="跟进中处置"
+                        value={followingUpDisps.length}
+                        unit="项"
+                        colorClass="text-amber"
+                        badge={
+                          followingUpDisps.length > 0
+                            ? <span className="badge badge-amber">进行中</span>
+                            : <span className="badge badge-emerald">无积压</span>
+                        }
+                        expanded={statExpanded.followups}
+                        onToggle={() => setStatExpanded((p) => ({ ...p, followups: !p.followups }))}
+                        loading={workbenchLoading}
+                      />
+                      <StatCard
+                        label="身心焦虑"
+                        value={emotions.length > 0 ? emotions[0].score : null}
+                        unit={emotions.length > 0 ? '分' : ''}
+                        colorClass="text-indigo"
+                        badge={
+                          emotions.length > 0 ? (
+                            <span className={`badge ${emotions[0].status === 'crisis' ? 'badge-rose' : emotions[0].status === 'concerning' ? 'badge-amber' : 'badge-emerald'}`}>
+                              {emotions[0].status === 'crisis' ? '🔴 危机' : emotions[0].status === 'concerning' ? '🟡 焦虑' : '🟢 平稳'}
+                            </span>
+                          ) : <span className="badge badge-neutral">暂无</span>
+                        }
+                        expanded={statExpanded.emotions}
+                        onToggle={() => setStatExpanded((p) => ({ ...p, emotions: !p.emotions }))}
+                        loading={workbenchLoading}
+                      />
+                      <StatCard
+                        label="测量提醒"
+                        value={reminders.length}
+                        unit="条"
+                        colorClass="text-emerald"
+                        badge={reminders.length > 0 ? <span className="badge badge-calm">待执行</span> : <span className="badge badge-neutral">无</span>}
+                        expanded={statExpanded.reminders}
+                        onToggle={() => setStatExpanded((p) => ({ ...p, reminders: !p.reminders }))}
+                        loading={workbenchLoading}
+                      />
                     </div>
-                    <div
-                      className={`stat-item ${selectedStatCard === 'followups' ? 'active' : ''}`}
-                      onClick={() => setSelectedStatCard('followups')}
-                    >
-                      <div className="stat-item__label">未达标跟进项</div>
-                      <div className="stat-item__val text-amber">{myDispositions.filter(d => d.status === 'following_up').length} <span className="stat-unit">个</span></div>
-                    </div>
-                    <div
-                      className={`stat-item ${selectedStatCard === 'emotions' ? 'active' : ''}`}
-                      onClick={() => setSelectedStatCard('emotions')}
-                    >
-                      <div className="stat-item__label">身心焦虑自评</div>
-                      <div className="stat-item__val text-indigo">
-                        {emotions.length > 0 ? (
-                          <span style={{ fontSize: 'var(--font-sm)' }}>
-                            {emotions[0].status === 'crisis' ? '🔴 极高危机' : emotions[0].status === 'concerning' ? '🟡 焦虑担忧' : '🟢 情绪平稳'}
-                          </span>
-                        ) : '暂无'}
-                      </div>
-                    </div>
-                    <div
-                      className={`stat-item ${selectedStatCard === 'reminders' ? 'active' : ''}`}
-                      onClick={() => setSelectedStatCard('reminders')}
-                    >
-                      <div className="stat-item__label">日常测量提醒</div>
-                      <div className="stat-item__val text-emerald">{reminders.length} <span className="stat-unit">次</span></div>
+                  </div>
+
+                  {/* Detail: 展开显示各类型全部条目 */}
+                  <div className="workbench-detail card shadow-sm">
+                    <h3 className="detail-title">态势详情</h3>
+                    <div className="detail-list">
+                      {/* 警报 */}
+                      {statExpanded.alerts && (
+                        <div className="detail-section">
+                          {openAlerts.length === 0 ? (
+                            <p className="empty-small">🎉 当前无待处理警报，个案受控良好！</p>
+                          ) : (
+                            openAlerts.map((alert) => (
+                              <div key={alert.id} className="detail-item shadow-sm alert-item-card">
+                                <div className="spread align-center">
+                                  <strong className="text-rose">{translateIndicator(alert.indicator)}</strong>
+                                  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+                                    <span className={`badge ${alert.level === 'high' ? 'badge-rose' : 'badge-amber'}`}>
+                                      {alert.level === 'high' ? '危急' : '警告'}
+                                    </span>
+                                    {/* 告警操作按钮 */}
+                                    <button
+                                      className="btn btn-ghost btn-xs"
+                                      title="标记已读"
+                                      onClick={() => { void handleAcknowledgeAlert(alert.id); }}
+                                      type="button"
+                                    >
+                                      <CheckCircle2 size={12} />
+                                    </button>
+                                    <button
+                                      className="btn btn-ghost btn-xs"
+                                      title="关闭告警"
+                                      onClick={() => { void handleResolveAlert(alert.id); }}
+                                      type="button"
+                                    >
+                                      <X size={12} />
+                                    </button>
+                                  </div>
+                                </div>
+                                <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: '4px' }}>
+                                  测量值：<strong>{alert.value}</strong> {THRESHOLDS[alert.indicator]?.unit ?? (alert.indicator.includes('glucose') ? 'mmol/L' : 'mmHg')}
+                                </p>
+                                <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>{alert.messages.join('; ')}</p>
+                                <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '4px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                  <Clock size={10} /> {formatTime(alert.createdAt)}
+                                  {alert.status !== 'open' && <span className={`badge ${alert.status === 'acknowledged' ? 'badge-neutral' : 'badge-emerald'}`}>{alert.status === 'acknowledged' ? '已读' : '已关闭'}</span>}
+                                </p>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      )}
+                      {/* 跟进中处置 */}
+                      {statExpanded.followups && (
+                        <div className="detail-section">
+                          {followingUpDisps.length === 0 ? (
+                            <p className="empty-small">🎉 无未达标跟进项！</p>
+                          ) : (
+                            followingUpDisps.map((disp) => (
+                              <div key={disp.id} className="detail-item shadow-sm">
+                                <div className="spread align-center">
+                                  <strong>{disp.title}</strong>
+                                  <span className="badge badge-amber">跟进中</span>
+                                </div>
+                                <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '4px' }}>
+                                  {disp.createdBy} · {formatTime(disp.createdAt)}
+                                </p>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      )}
+                      {/* 情绪 */}
+                      {statExpanded.emotions && (
+                        <div className="detail-section">
+                          {emotions.length === 0 ? (
+                            <p className="empty-small">暂无孕妇身心自评数据</p>
+                          ) : (
+                            emotions.slice(0, 5).map((emotion) => (
+                              <div key={emotion.id} className="detail-item shadow-sm">
+                                <div className="spread align-center">
+                                  <strong>自评得分：{emotion.score} / 10</strong>
+                                  <span className={`badge ${emotion.status === 'crisis' ? 'badge-rose' : emotion.status === 'concerning' ? 'badge-amber' : 'badge-emerald'}`}>
+                                    {emotion.status === 'crisis' ? '🔴 危机' : emotion.status === 'concerning' ? '🟡 担忧' : '🟢 平稳'}
+                                  </span>
+                                </div>
+                                <p className="muted" style={{ fontStyle: 'italic', fontSize: 'var(--font-sm)', marginTop: '6px' }}>"{emotion.note}"</p>
+                                <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '4px' }}>{formatTime(emotion.createdAt)}</p>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      )}
+                      {/* 提醒 */}
+                      {statExpanded.reminders && (
+                        <div className="detail-section">
+                          {reminders.length === 0 ? (
+                            <p className="empty-small">暂无提醒记录</p>
+                          ) : (
+                            reminders.slice(0, 8).map((reminder) => (
+                              <div key={reminder.id} className="detail-item shadow-sm">
+                                <div className="spread align-center">
+                                  <strong>{reminderLabel(reminder)}</strong>
+                                  <span className={`badge ${reminder.status === 'completed' ? 'badge-emerald' : 'badge-amber'}`}>
+                                    {reminder.status === 'completed' ? '已完成' : '待执行'}
+                                  </span>
+                                </div>
+                                <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: '4px' }}>{reminder.message}</p>
+                                <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>{formatTime(reminder.scheduledAt)}</p>
+                              </div>
+                            ))
+                          )}
+                        </div>
+                      )}
+                      {!Object.values(statExpanded).some(Boolean) && (
+                        <p className="empty-small">点击左侧卡片展开查看详情</p>
+                      )}
                     </div>
                   </div>
                 </div>
 
-                {/* Detail: 详情展示区 */}
-                <div className="workbench-detail card shadow-sm">
-                  {selectedStatCard === 'alerts' && (
-                    <div className="stack">
-                      <h3 className="detail-title">待处理警报详情</h3>
-                      {alerts.filter(a => a.status === 'open').length === 0 ? (
-                        <p className="empty-small">🎉 当前无待处理警报，个案受控良好！</p>
-                      ) : (
-                        <div className="detail-list">
-                          {alerts.filter(a => a.status === 'open').map((alert) => (
-                            <div key={alert.id} className="detail-item shadow-sm">
-                              <div className="spread align-center">
-                                <strong className="text-rose">{translateIndicator(alert.indicator)}</strong>
-                                <span className="badge badge-rose">{alert.severity === 'critical' ? '危急' : '警告'}</span>
-                              </div>
-                              <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: '4px' }}>
-                                测量值：<strong>{alert.value}</strong> {alert.indicator.includes('glucose') ? 'mmol/L' : 'mmHg'}
-                              </p>
-                              <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>
-                                {alert.messages.join('; ')}
-                              </p>
-                              <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '4px' }}>
-                                触发时间：{formatDate(alert.createdAt)}
-                              </p>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  )}
+                {/* 2. 状态机流程图 */}
+                <CaseFlowPanel caseInfo={caseInfo} role={user?.role} onChanged={loadCase} />
 
-                  {selectedStatCard === 'followups' && (
-                    <div className="stack">
-                      <h3 className="detail-title">未达标跟进项详情</h3>
-                      {myDispositions.filter(d => d.status === 'following_up').length === 0 ? (
-                        <p className="empty-small">🎉 当前无未达标跟进项！</p>
-                      ) : (
-                        <div className="detail-list">
-                          {myDispositions.filter(d => d.status === 'following_up').map((disp) => (
-                            <div key={disp.id} className="detail-item shadow-sm">
-                              <div className="spread align-center">
-                                <strong>{disp.title}</strong>
-                                <span className="badge badge-amber">跟进中</span>
-                              </div>
-                              <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: '4px' }}>
-                                创建人：{disp.createdBy}
-                              </p>
-                              <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>
-                                创建时间：{formatDate(disp.createdAt)}
-                              </p>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                  {selectedStatCard === 'emotions' && (
-                    <div className="stack">
-                      <h3 className="detail-title">身心焦虑自评详情</h3>
-                      {emotions.length === 0 ? (
-                        <p className="empty-small">暂无孕妇身心自评数据</p>
-                      ) : (
-                        <div className="detail-list">
-                          {emotions.slice(0, 5).map((emotion) => (
-                            <div key={emotion.id} className="detail-item shadow-sm">
-                              <div className="spread align-center">
-                                <strong>自评得分：{emotion.score} / 10</strong>
-                                <span className={`badge ${emotion.status === 'crisis' ? 'badge-rose' : emotion.status === 'concerning' ? 'badge-amber' : 'badge-emerald'}`}>
-                                  {emotion.status === 'crisis' ? '🔴 危机' : emotion.status === 'concerning' ? '🟡 担忧' : '🟢 平稳'}
-                                </span>
-                              </div>
-                              <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: '6px', fontStyle: 'italic' }}>
-                                "{emotion.note}"
-                              </p>
-                              <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '4px' }}>
-                                记录时间：{formatDate(emotion.createdAt)}
-                              </p>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                  {selectedStatCard === 'reminders' && (
-                    <div className="stack">
-                      <h3 className="detail-title">日常测量提醒详情</h3>
-                      {reminders.length === 0 ? (
-                        <p className="empty-small">暂无提醒记录</p>
-                      ) : (
-                        <div className="detail-list">
-                          {reminders.slice(0, 8).map((reminder) => (
-                            <div key={reminder.id} className="detail-item shadow-sm">
-                              <div className="spread align-center">
-                                <strong>{reminder.type === 'measurement' ? '📊 测量提醒' : reminder.type === 'medication' ? '💊 用药提醒' : '🏃 活动提醒'}</strong>
-                                <span className={`badge ${reminder.status === 'completed' ? 'badge-emerald' : 'badge-amber'}`}>
-                                  {reminder.status === 'completed' ? '已完成' : '待执行'}
-                                </span>
-                              </div>
-                              <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: '4px' }}>
-                                {reminder.message}
-                              </p>
-                              <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>
-                                提醒时间：{formatDate(reminder.scheduledAt)}
-                              </p>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* 2. 状态机流程图卡 */}
-              <CaseFlowPanel caseInfo={caseInfo} role={user?.role} onChanged={loadCase} />
-
-              {/* 3. iPad 适配: 待处置 Master-Detail 左右并排弹性布局 (T-D.7) */}
-              <div className="workbench-layout-container disposition-layout">
-                {/* Master: 待处置项队列 */}
-                <div className="workbench-master card shadow-sm">
-                  <h3 className="pane-title">
-                    <ShieldAlert size={18} strokeWidth={1.8} style={{ color: 'var(--color-primary)' }} />
-                    本案待处置项 ({myItems.length})
-                  </h3>
-                  {myItems.length === 0 ? (
-                    <p className="empty-small">🎉 暂无待处置事件，个案完美受控中！</p>
-                  ) : (
-                    <div className="work-list-mini">
-                      {myItems.map((item) => {
-                        const isSelected = item.id === selectedItemId;
-                        return (
-                          <div
-                            key={item.id}
-                            className={`work-item-mini ${isSelected ? 'active' : ''} ${item.priority}`}
-                            onClick={() => setSelectedItemId(item.id)}
-                          >
-                            <div className="work-item-mini__head">
-                              <span className={`priority-dot ${item.priority}`} />
-                              <span className="work-item-mini__type">
-                                {item.type === 'alert' ? '常规预警' : item.type === 'emotion' ? '身心信号' : '专家会诊'}
-                              </span>
-                            </div>
-                            <p className="work-item-mini__title">{item.title}</p>
-                            <span className="work-item-mini__date">{formatDate(item.createdAt)}</span>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-
-                {/* Detail: 决策处置工作区 */}
-                <div className="workbench-detail card shadow-sm">
-                  {selectedItem ? (
-                    <div className="stack">
-                      <div className="detail-head">
-                        <span className={`priority-tag ${selectedItem.priority}`}>{selectedItem.priority === 'high' ? '高优先级' : '中等优先级'}</span>
-                        <h3 className="detail-title">{selectedItem.title}</h3>
-                      </div>
-
-                      {/* A. 选中的是常规预警 (Alert) ➔ AI 智能辅助决策处置区 */}
-                      {selectedItem.type === 'alert' && matchedAlert && (
-                        <div className="stack detail-content-box animate-fade-in">
-                          <div className="alert-desc-box">
-                            <p><strong>异常指标：</strong>{translateIndicator(matchedAlert.indicator)}</p>
-                            <p><strong>测量数值：</strong><span className="highlight-val">{matchedAlert.value}</span> {matchedAlert.indicator.includes('glucose') ? 'mmol/L' : 'mmHg'}</p>
-                            <p><strong>医学说明：</strong>{matchedAlert.messages.join('; ')}</p>
-                          </div>
-
-                          {/* AI 智能临床建议 (T-D.1 / D.2) */}
-                          <div className="ai-advisor card shadow-sm border-l-indigo bg-light-gradient">
-                            <div className="spread align-center" style={{ marginBottom: 'var(--space-2)' }}>
-                              <span className="ai-advisor__brand">
-                                <Sparkles size={16} strokeWidth={1.8} style={{ color: 'var(--color-primary-strong)' }} />
-                                PCM AI 智能临床处置建议
-                              </span>
-                              <span className="muted" style={{ fontSize: 'var(--font-xs)' }}>
-                                {caseInfo.riskLevel === 'high' || caseInfo.riskLevel === 'medium' ? '🔒 需主治医生确认' : '🔓 免检执行'}
-                              </span>
-                            </div>
-                            
-                            <p className="ai-advisor__text">
-                              基于患者 <strong>{patient.name}</strong> 孕 {patient.gestationalWeeks} 周，当前处于妊娠 <strong>{caseInfo.riskLevel === 'high' ? '高' : '中'}风险</strong> 状态。针对本次 <strong>{translateIndicator(matchedAlert.indicator)}</strong> 异常波动，AI 生成如下最优级临床处置单草案：
-                            </p>
-                            
-                            <div className="ai-actions-container">
-                              <div className="ai-action-item">
-                                <div className="spread align-center">
-                                  <strong>【动作 1】下发日常指标复测</strong>
-                                  <button
-                                    className="btn btn-primary btn-xs"
-                                    onClick={() => handleCreateDispositionFromRecommendation(
-                                      `针对${translateIndicator(matchedAlert.indicator)}升高下发复测`,
-                                      'recheck',
-                                      `下发${translateIndicator(matchedAlert.indicator)}日常指标复测：3天时间窗，目标小于标准阈值。`
-                                    )}
-                                    disabled={submittingDisposition}
-                                  >
-                                    一键采用该 AI 建议并生成处置单
-                                  </button>
+                {/* 3. 待处置 Master-Detail */}
+                <div className="workbench-layout-container disposition-layout">
+                  <div className="workbench-master card shadow-sm">
+                    <h3 className="pane-title"><ShieldAlert size={18} /> 本案待处置项 ({myItems.length})</h3>
+                    {myItems.length === 0 ? (
+                      <p className="empty-small">🎉 暂无待处置事件！</p>
+                    ) : (
+                      <>
+                        <div className="work-list-mini">
+                          {paginatedItems.map((item) => {
+                            const isSelected = item.id === selectedItemId;
+                            return (
+                              <div
+                                key={item.id}
+                                className={`work-item-mini ${isSelected ? 'active' : ''} ${item.priority}`}
+                                onClick={() => setSelectedItemId(item.id)}
+                              >
+                                <div className="work-item-mini__head">
+                                  <span className={`priority-dot ${item.priority}`} />
+                                  <span className="work-item-mini__type">
+                                    {item.type === 'alert' ? '常规预警' : item.type === 'emotion' ? '身心信号' : '专家会诊'}
+                                  </span>
                                 </div>
-                                <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>
-                                  指示：复测窗口 3-7 天，回流后系统自动进行达标判定 (Met / Not Met)。
-                                </p>
+                                <p className="work-item-mini__title">{item.title}</p>
+                                <span className="work-item-mini__date">{formatTime(item.createdAt)}</span>
                               </div>
-                            </div>
+                            );
+                          })}
+                        </div>
+                        {/* 分页 */}
+                        {totalWorklistPages > 1 && (
+                          <div className="pagination">
+                            <button className="btn btn-ghost btn-xs" onClick={() => setWorklistPage((p) => Math.max(1, p - 1))} disabled={worklistPage === 1} type="button">‹</button>
+                            <span>{worklistPage}/{totalWorklistPages}</span>
+                            <button className="btn btn-ghost btn-xs" onClick={() => setWorklistPage((p) => Math.min(totalWorklistPages, p + 1))} disabled={worklistPage >= totalWorklistPages} type="button">›</button>
                           </div>
+                        )}
+                      </>
+                    )}
+                  </div>
 
-                          {/* 活动处置单草案 & 流程状态机门控 (D.1/D.2) */}
-                          {myDispositions.length > 0 && (
-                            <div className="dispositions-area">
-                              <h4 className="sub-title">📌 正在执行中 / 待确认的个案处置单</h4>
-                              {myDispositions.map((disp) => {
+                  {/* Detail */}
+                  <div className="workbench-detail card shadow-sm">
+                    {selectedItem ? (
+                      <div className="stack detail-content-box animate-fade-in">
+                        <div className="detail-head">
+                          <span className={`priority-tag ${selectedItem.priority}`}>{selectedItem.priority === 'high' ? '高优先级' : '中等优先级'}</span>
+                          <h3 className="detail-title">{selectedItem.title}</h3>
+                        </div>
+
+                        {/* ── A: 常规预警 (Alert) ── */}
+                        {selectedItem.type === 'alert' && matchedAlert && (
+                          <div className="stack">
+                            <div className="alert-desc-box">
+                              <p><strong>异常指标：</strong>{translateIndicator(matchedAlert.indicator)}</p>
+                              <p><strong>测量数值：</strong><span className="highlight-val">{matchedAlert.value}</span> {THRESHOLDS[matchedAlert.indicator]?.unit ?? (matchedAlert.indicator.includes('glucose') ? 'mmol/L' : 'mmHg')}</p>
+                              <p><strong>医学说明：</strong>{matchedAlert.messages.join('; ')}</p>
+                              <p><strong>状态：</strong>
+                                <span className={`badge ${matchedAlert.status === 'open' ? 'badge-rose' : matchedAlert.status === 'acknowledged' ? 'badge-amber' : 'badge-emerald'}`}>
+                                  {matchedAlert.status === 'open' ? '未处理' : matchedAlert.status === 'acknowledged' ? '已读' : '已关闭'}
+                                </span>
+                                {(matchedAlert.status === 'open' || matchedAlert.status === 'acknowledged') && (
+                                  <span style={{ marginLeft: '8px' }}>
+                                    <button className="btn btn-ghost btn-xs" onClick={() => { void handleAcknowledgeAlert(matchedAlert.id); }} type="button">✓ 标记已读</button>
+                                    <button className="btn btn-ghost btn-xs" onClick={() => { void handleResolveAlert(matchedAlert.id); }} type="button">✗ 关闭</button>
+                                  </span>
+                                )}
+                              </p>
+                            </div>
+
+                            {/* AI 临床处置建议 — 多方案 */}
+                            <div className="ai-advisor card shadow-sm border-l-indigo bg-light-gradient">
+                              <div className="spread align-center" style={{ marginBottom: 'var(--space-3)' }}>
+                                <span className="ai-advisor__brand">
+                                  <Sparkles size={16} /> PCM AI 智能临床处置建议
+                                </span>
+                                <span className="muted" style={{ fontSize: 'var(--font-xs)' }}>
+                                  {caseInfo.riskLevel === 'high' ? '🔒 需主治医生确认' : '🔓 可执行'}
+                                </span>
+                              </div>
+
+                              {/* 方案切换器 */}
+                              <div className="ai-variant-tabs">
+                                {getRecommendations(matchedAlert.indicator, matchedAlert.value).map((rec) => (
+                                  <button
+                                    key={rec.variant}
+                                    className={`ai-variant-tab ${selectedVariant === rec.variant ? 'active' : ''}`}
+                                    onClick={() => setSelectedVariant(rec.variant)}
+                                    type="button"
+                                  >
+                                    {rec.icon} {rec.label}
+                                  </button>
+                                ))}
+                              </div>
+
+                              {/* 当前选中方案详情 */}
+                              {(() => {
+                                const activeRec = getRecommendations(matchedAlert.indicator, matchedAlert.value).find(
+                                  (r) => r.variant === selectedVariant
+                                );
+                                if (!activeRec) return null;
                                 return (
+                                  <div className="ai-variant-detail">
+                                    <p className="ai-advisor__text">{activeRec.description}</p>
+                                    <div className="ai-actions-container">
+                                      {activeRec.actions.map((act, i) => (
+                                        <div key={i} className="ai-action-item">
+                                          <div className="spread align-center">
+                                            <strong>{act.kind === 'clinical' ? '🏥' : act.kind === 'lifestyle' ? '🥗' : act.kind === 'measurement' ? '📊' : act.kind === 'referral' ? '🔄' : '📋'} {act.description}</strong>
+                                            <button
+                                              className="btn btn-primary btn-xs"
+                                              onClick={() => {
+                                                void handleCreateDisposition(
+                                                  `[${activeRec.label}] ${act.description.slice(0, 20)}…`,
+                                                  act.kind,
+                                                  act.description
+                                                );
+                                              }}
+                                              disabled={submittingDisposition}
+                                              type="button"
+                                            >
+                                              生成处置单
+                                            </button>
+                                          </div>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                );
+                              })()}
+                            </div>
+
+                            {/* 活动处置单 */}
+                            {myDispositions.length > 0 && (
+                              <div className="dispositions-area">
+                                <h4 className="sub-title">📌 正在执行中 / 待确认的处置单</h4>
+                                {myDispositions.map((disp) => (
                                   <div key={disp.id} className="disposition-card shadow-sm">
                                     <div className="spread align-center">
                                       <h5 className="disp-title">{disp.title}</h5>
-                                      <span className={`disp-status-badge ${disp.status}`}>{disp.status === 'pending_confirmation' ? '⏳ 待确认' : disp.status === 'executing' ? '⚙️ 执行中' : '✅ 闭环'}</span>
+                                      <span className={`disp-status-badge ${disp.status}`}>
+                                        {disp.status === 'pending_confirmation' ? '⏳ 待确认' : disp.status === 'executing' ? '⚙️ 执行中' : '✅ 闭环'}
+                                      </span>
                                     </div>
                                     <p className="muted" style={{ fontSize: 'var(--font-xs)', marginTop: '2px' }}>
-                                      创建人：{disp.createdBy} · 创建时间：{formatDate(disp.createdAt)}
+                                      {disp.createdBy} · {formatTime(disp.createdAt)}
                                     </p>
 
-                                    {/* 门控：中高风险必须确认 (D.1/D.2) */}
                                     {disp.status === 'pending_confirmation' && (
                                       <div className="gating-warning-box bg-rose-soft">
-                                        <ShieldCheck size={16} strokeWidth={1.8} style={{ color: 'var(--color-destructive)' }} />
+                                        <ShieldAlert size={14} />
                                         <span className="warn-text">
-                                          本个案属于 <strong>{caseInfo.riskLevel === 'high' ? '高' : '中'}风险</strong> 类别。系统已安全启动风险准入门控（Gating）—— 必须由主治医生角色审查并批准确认，方可落地执行！
+                                          <strong>{caseInfo.riskLevel === 'high' ? '高' : '中'}风险</strong> 个案必须主治医生确认后方可执行
                                         </span>
                                         {(user?.role === 'physician' || user?.role === 'admin' || user?.role === 'case_manager') && (
                                           <button
                                             className="btn btn-sm btn-rose"
-                                            onClick={() => handleConfirmDisposition(disp.id)}
-                                            style={{ marginLeft: 'auto' }}
+                                            onClick={() => { void handleConfirmDisposition(disp.id); }}
+                                            type="button"
                                           >
-                                            医生一键审查并确认 (Confirm)
+                                            审查并确认
                                           </button>
                                         )}
                                       </div>
                                     )}
 
-                                    {/* 执行：动作项明细并带有执行按钮 */}
                                     {disp.status === 'executing' && (
                                       <div className="actions-execute-panel">
                                         {disp.actions.map((act, aIdx) => (
                                           <div key={aIdx} className="execute-row shadow-sm bg-light">
                                             <div className="execute-row__info">
-                                              <strong>动作：{act.kind === 'recheck' ? '📊 复测跟进' : '📋 常规调理'}</strong>
+                                              <strong>{act.kind === 'recheck' ? '📊 复测跟进' : '📋 常规调理'}</strong>
                                               <p className="muted" style={{ fontSize: 'var(--font-sm)' }}>{act.description}</p>
                                             </div>
                                             <div className="execute-row__action">
                                               <input
                                                 type="text"
-                                                placeholder="填入执行回执说明…"
+                                                placeholder="执行回执…"
                                                 value={actionNote}
                                                 onChange={(e) => setActionNote(e.target.value)}
                                                 className="input-inline"
                                               />
                                               <button
                                                 className="btn btn-xs btn-primary"
-                                                onClick={() => handleExecuteAction(disp.id, String(aIdx))}
+                                                onClick={() => { void handleExecuteAction(disp.id, String(aIdx)); }}
+                                                type="button"
                                               >
-                                                执行此动作并回执
+                                                执行
                                               </button>
                                             </div>
                                           </div>
@@ -763,372 +1111,369 @@ export function CaseWorkbenchPage(): JSX.Element {
                                       </div>
                                     )}
                                   </div>
-                                );
-                              })}
-                            </div>
-                          )}
-                        </div>
-                      )}
-
-                      {/* B. 选中的是情绪信号 (Emotion) ➔ 暖心身心焦虑干预区 (T-D.4) */}
-                      {selectedItem.type === 'emotion' && matchedEmotion && (
-                        <div className="stack detail-content-box animate-fade-in">
-                          <div className="emotion-desc-box border-l-indigo">
-                            <p><strong>自评得分：</strong><span className="highlight-val text-indigo">{matchedEmotion.score}</span> / 10 分（得分越低表示情绪越压抑、焦虑）</p>
-                            <p><strong>情绪状态：</strong>
-                              <span className={`badge ${matchedEmotion.status === 'crisis' ? 'badge-rose' : 'badge-amber'}`}>
-                                {matchedEmotion.status === 'crisis' ? '🔴 极高身心危机' : '🟡 焦虑担忧'}
-                              </span>
-                            </p>
-                            <p><strong>情绪主观陈述（已安全解密）：</strong></p>
-                            <div className="emotion-diary shadow-sm">
-                              “ {matchedEmotion.note} ”
-                            </div>
-                          </div>
-
-                          {matchedEmotion.status === 'crisis' && (
-                            <div className="gating-warning-box bg-rose-soft">
-                              <ShieldCheck size={18} strokeWidth={1.8} style={{ color: 'var(--color-destructive)' }} />
-                              <span className="warn-text">
-                                🚨 <strong>身心危急警示：</strong> 孕妇当前出现了严重情绪低落或崩溃倾向词！请个案管理师<b>立即进行电话干预主动疏导</b>，并联动主治医生协助诊断，切勿拖延！
-                              </span>
-                            </div>
-                          )}
-
-                          <div className="care-actions-card shadow-sm card bg-light-gradient">
-                            <h4 className="sub-title"><MessageSquareHeart size={16} strokeWidth={1.8} /> 身心暖心干预关怀动作区</h4>
-                            <p className="muted" style={{ fontSize: 'var(--font-sm)', marginBottom: 'var(--space-2)' }}>
-                              您可以通过下发关怀提醒任务，强制将重度体力运动计划调整为安全静息，缓解孕期焦虑：
-                            </p>
-                            <button
-                              className="btn btn-primary"
-                              onClick={handleSendCareReminder}
-                            >
-                              一键下发“心理静息与休息”日常关怀提醒 (rest)
-                            </button>
-                          </div>
-                        </div>
-                      )}
-
-                      {/* C. 选中的是专家转会诊 (Referral) ➔ 医生多端协同区 (T-D.3) */}
-                      {selectedItem.type === 'referral' && matchedReferral && (
-                        <div className="stack detail-content-box animate-fade-in">
-                          <div className="referral-desc-box">
-                            <div className="spread align-center">
-                              <p><strong>会诊类别：</strong>{matchedReferral.type === 'referral' ? '院内转诊' : '多科室会诊'}</p>
-                              <span className={`badge ${riskBadgeClass(matchedReferral.urgency === 'emergency' ? 'high' : 'medium')}`}>
-                                {matchedReferral.urgency === 'emergency' ? '🚨 特急' : matchedReferral.urgency === 'urgent' ? '⏳ 紧急' : '常规'}
-                              </span>
-                            </div>
-                            <p><strong>当前协同状态：</strong>
-                              <span className="badge badge-indigo">
-                                {matchedReferral.status === 'pending' ? '待接诊' : matchedReferral.status === 'accepted' ? '会诊中' : '已回复会诊'}
-                              </span>
-                            </p>
-                            <p><strong>临床病情陈述：</strong></p>
-                            <div className="clinical-summary-box shadow-sm">
-                              {matchedReferral.clinicalSummary}
-                            </div>
-                          </div>
-
-                          {/* 医生角色协同处理 (T-D.3) */}
-                          {user?.role === 'physician' || user?.role === 'admin' ? (
-                            <div className="doctor-collaboration-panel card shadow-sm border-l-emerald bg-light-gradient">
-                              <h4 className="sub-title"><CheckCircle2 size={16} style={{ color: 'var(--color-calm)' }} /> 医生协同处理工作面板</h4>
-                              
-                              {matchedReferral.status === 'pending' && (
-                                <div className="stack">
-                                  <p className="muted" style={{ fontSize: 'var(--font-sm)', marginBottom: 'var(--space-2)' }}>
-                                    个案管理师已将会诊单提交到您的待办，请立即接诊评估病情：
-                                  </p>
-                                  <button
-                                    className="btn btn-primary"
-                                    onClick={() => handleAcceptReferral(matchedReferral.id)}
-                                  >
-                                    一键接诊并开启会诊 (Accept)
-                                  </button>
-                                </div>
-                              )}
-
-                              {(matchedReferral.status === 'accepted' || matchedReferral.status === 'pending') && (
-                                <div className="stack" style={{ marginTop: 'var(--space-3)' }}>
-                                  <p className="muted" style={{ fontSize: 'var(--font-sm)', marginBottom: 'var(--space-1)' }}>
-                                    请在线填写您的临床会诊意见及降压/控糖处方建议：
-                                  </p>
-                                  <textarea
-                                    className="textarea"
-                                    rows={3}
-                                    placeholder="输入会诊意见（例如：建议每日加用拉贝洛尔 100mg，规律自测血压，限制中度运动）…"
-                                    value={referralReply}
-                                    onChange={(e) => setReferralReply(e.target.value)}
-                                  />
-                                  <button
-                                    className="btn btn-success"
-                                    onClick={() => handleRespondReferral(matchedReferral.id)}
-                                    style={{ marginTop: 'var(--space-2)', marginLeft: 'auto' }}
-                                  >
-                                    提交会诊回复意见并闭环 (Respond)
-                                  </button>
-                                </div>
-                              )}
-                            </div>
-                          ) : (
-                            // 非医生角色展示回复回执
-                            matchedReferral.doctorReply && (
-                              <div className="referral-reply-card shadow-sm">
-                                <h4 className="sub-title">👨‍⚕️ 专家医生回复意见回执</h4>
-                                <div className="doctor-reply-box shadow-sm">
-                                  {matchedReferral.doctorReply}
-                                </div>
-                                <p className="muted text-right" style={{ fontSize: 'var(--font-xs)', marginTop: '4px' }}>
-                                  回复时间：{formatDate(matchedReferral.updatedAt)}
-                                </p>
+                                ))}
                               </div>
-                            )
-                          )}
+                            )}
+                          </div>
+                        )}
+
+                        {/* ── B: 情绪信号 (Emotion) ── */}
+                        {selectedItem.type === 'emotion' && matchedEmotion && (
+                          <div className="stack">
+                            <div className="emotion-desc-box border-l-indigo">
+                              <p><strong>自评得分：</strong><span className="highlight-val text-indigo">{matchedEmotion.score}</span> / 10</p>
+                              <p><strong>情绪状态：</strong>
+                                <span className={`badge ${matchedEmotion.status === 'crisis' ? 'badge-rose' : 'badge-amber'}`}>
+                                  {matchedEmotion.status === 'crisis' ? '🔴 极高危机' : '🟡 焦虑担忧'}
+                                </span>
+                              </p>
+                              <p><strong>主观陈述：</strong></p>
+                              <div className="emotion-diary shadow-sm">"{matchedEmotion.note}"</div>
+                            </div>
+                            {matchedEmotion.status === 'crisis' && (
+                              <div className="gating-warning-box bg-rose-soft">
+                                <ShieldAlert size={16} />
+                                <span className="warn-text">
+                                  🚨 <strong>身心危急警示：</strong>请个案管理师立即电话干预疏导，并联动主治医生！
+                                </span>
+                              </div>
+                            )}
+                            <div className="care-actions-card shadow-sm card bg-light-gradient">
+                              <h4 className="sub-title"><MessageSquareHeart size={16} /> 身心暖心干预</h4>
+                              <button className="btn btn-primary" onClick={handleSendCareReminder} type="button">
+                                一键下发「心理静息与休息」关怀提醒
+                              </button>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* ── C: 转诊会诊 (Referral) ── */}
+                        {selectedItem.type === 'referral' && matchedReferral && (
+                          <div className="stack">
+                            <div className="referral-desc-box">
+                              <div className="spread align-center">
+                                <p><strong>会诊类别：</strong>{matchedReferral.type === 'referral' ? '院内转诊' : '多科室会诊'}</p>
+                                <span className={`badge ${matchedReferral.urgency === 'emergency' ? 'badge-rose' : matchedReferral.urgency === 'urgent' ? 'badge-amber' : 'badge-neutral'}`}>
+                                  {matchedReferral.urgency === 'emergency' ? '🚨 特急' : matchedReferral.urgency === 'urgent' ? '⏳ 紧急' : '常规'}
+                                </span>
+                              </div>
+                              <p><strong>协同状态：</strong>
+                                <span className="badge badge-indigo">
+                                  {matchedReferral.status === 'pending' ? '待接诊' : matchedReferral.status === 'accepted' ? '会诊中' : matchedReferral.status === 'responded' || matchedReferral.status === 'completed' ? '已回复' : matchedReferral.status}
+                                </span>
+                              </p>
+                              <p><strong>临床病情：</strong></p>
+                              <div className="clinical-summary-box shadow-sm">{matchedReferral.clinicalSummary}</div>
+                            </div>
+                            {(user?.role === 'physician' || user?.role === 'admin') ? (
+                              <div className="doctor-collaboration-panel card shadow-sm border-l-emerald bg-light-gradient">
+                                <h4 className="sub-title"><CheckCircle2 size={16} /> 医生协同面板</h4>
+                                {matchedReferral.status === 'pending' && (
+                                  <button className="btn btn-primary" onClick={() => { void handleAcceptReferral(matchedReferral.id); }} type="button">
+                                    接诊并开启会诊
+                                  </button>
+                                )}
+                                {(matchedReferral.status === 'accepted' || matchedReferral.status === 'pending') && (
+                                  <div className="stack" style={{ marginTop: 'var(--space-3)' }}>
+                                    <textarea
+                                      className="textarea"
+                                      rows={3}
+                                      placeholder="输入会诊意见（用药建议、随访计划）…"
+                                      value={referralReply}
+                                      onChange={(e) => setReferralReply(e.target.value)}
+                                    />
+                                    <button
+                                      className="btn btn-success"
+                                      onClick={() => { void handleRespondReferral(matchedReferral.id); }}
+                                      style={{ marginLeft: 'auto' }}
+                                      type="button"
+                                    >
+                                      提交会诊意见
+                                    </button>
+                                  </div>
+                                )}
+                              </div>
+                            ) : matchedReferral.doctorReply ? (
+                              <div className="referral-reply-card shadow-sm">
+                                <h4 className="sub-title">👨‍⚕️ 专家回复意见</h4>
+                                <div className="doctor-reply-box shadow-sm">{matchedReferral.doctorReply}</div>
+                                <p className="muted text-right" style={{ fontSize: 'var(--font-xs)', marginTop: '4px' }}>{formatTime(matchedReferral.updatedAt)}</p>
+                              </div>
+                            ) : null}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <p className="empty">请在左侧选择一项事件进行处置。</p>
+                    )}
+                  </div>
+                </div>
+
+                {/* 4. 发起会诊 */}
+                <div className="referral-create-card card shadow-sm">
+                  <div className="referral-create-header">
+                    <div className="referral-create-title">
+                      <BookOpen size={20} />
+                      <h3 style={{ margin: 0 }}>发起多学科专家临床会诊</h3>
+                    </div>
+                    <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: 'var(--space-2)' }}>
+                      管理师在随访中发现疑难高风险并发症倾向，可手动发起会诊派发给主治医生在线指导
+                    </p>
+                  </div>
+                  <div className="referral-create-form">
+                    <div className="form-group">
+                      <label className="form-label">紧急程度</label>
+                      <select className="select-modern" value={referralUrgency} onChange={(e) => setReferralUrgency(e.target.value as any)}>
+                        <option value="routine">🟢 常规会诊</option>
+                        <option value="urgent">🟡 紧急会诊</option>
+                        <option value="emergency">🔴 特急会诊</option>
+                      </select>
+                    </div>
+                    <div className="form-group form-group-flex">
+                      <label className="form-label">病情描述</label>
+                      <div className="input-group">
+                        <input
+                          type="text"
+                          className="input-modern"
+                          placeholder="请详细描述病情及会诊目的…"
+                          value={referralSummary}
+                          onChange={(e) => setReferralSummary(e.target.value)}
+                        />
+                        <button className="btn btn-primary btn-icon" onClick={handleCreateReferralManual} type="button">
+                          <Send size={18} /><span>发起</span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 5. 照护计划 + 提醒/红旗 */}
+                <div className="grid-2 workbench-grid">
+                  <CarePlanPanel caseId={caseInfo.id} plans={carePlans} role={user?.role} onCreated={loadCase} />
+                  <div className="stack">
+                    <RemindersPanel reminders={reminders} />
+                    <RedflagPanel patientId={patientId} role={user?.role} onTriggered={loadWorkbenchData} />
+                  </div>
+                </div>
+              </div>
+            )
+          )}
+
+          {/* ── TAB 2: 健康档案库 ────────────────────────────── */}
+          {activeTab === 'archive' && (
+            archiveLoading ? <ArchiveSkeleton /> : (
+              <div className="stack animate-fade-in">
+                {/* 指标概览网格 */}
+                <div className="grid-4 indicators-summary-grid">
+                  {[
+                    { key: 'fasting_glucose', label: '空腹血糖', unit: 'mmol/L', threshold: true },
+                    { key: 'systolic_bp', label: '收缩压', unit: 'mmHg', threshold: true },
+                    { key: 'diastolic_bp', label: '舒张压', unit: 'mmHg', threshold: true },
+                    { key: 'weight', label: '体重', unit: 'kg', threshold: false },
+                    { key: 'heart_rate', label: '心率', unit: 'bpm', threshold: true },
+                    { key: 'ogtt_1h', label: 'OGTT 1h', unit: 'mmol/L', threshold: true },
+                    { key: 'ogtt_2h', label: 'OGTT 2h', unit: 'mmol/L', threshold: true },
+                    { key: 'postprandial_glucose', label: '餐后血糖', unit: 'mmol/L', threshold: true },
+                  ].map(({ key, label, unit, threshold }) => (
+                    <div key={key} className="indicator-summary-card shadow-sm">
+                      <div className="indicator-summary-card__head">
+                        <span className="indicator-label">{label}</span>
+                        <span className={`direction-badge ${trendsMap[key]?.direction ?? 'stable'}`}>
+                          {trendsMap[key]?.direction === 'up' ? '↑ 升高' : trendsMap[key]?.direction === 'down' ? '↓ 降低' : '→ 平稳'}
+                        </span>
+                      </div>
+                      <div className="indicator-summary-card__val">
+                        {latestObs[key]?.value ?? '—'} <span className="unit-label">{unit}</span>
+                      </div>
+                      {threshold ? (
+                        <div className="sparkline-wrapper">
+                          <Sparkline
+                            points={trendsMap[key]?.points ?? []}
+                            indicator={key}
+                          />
+                        </div>
+                      ) : (
+                        <div className="sparkline-wrapper">
+                          <Sparkline points={trendsMap[key]?.points ?? []} />
                         </div>
                       )}
                     </div>
-                  ) : (
-                    <p className="empty">请在左侧待处置队列中选择一项事件以进行个案流转处置。</p>
-                  )}
+                  ))}
                 </div>
-              </div>
 
-              {/* 4. 手动发起专家协同会诊入口 (T-D.3) */}
-              <div className="referral-create-card card shadow-sm" style={{ marginTop: 'var(--space-4)' }}>
-                <div className="referral-create-header">
-                  <div className="referral-create-title">
-                    <BookOpen size={20} strokeWidth={1.8} style={{ color: 'var(--color-primary-strong)' }} />
-                    <h3 className="pane-title" style={{ marginBottom: 0 }}>发起多学科专家临床会诊</h3>
-                  </div>
-                  <p className="muted" style={{ fontSize: 'var(--font-sm)', marginTop: 'var(--space-2)' }}>
-                    管理师在随访过程中，发现非诊断范围的疑难高风险并发症倾向，可手动一键发起会诊派发给主治/会诊医生在线指导
-                  </p>
-                </div>
-                <div className="referral-create-form">
-                  <div className="form-group">
-                    <label className="form-label">会诊紧急程度</label>
-                    <select
-                      className="select-modern"
-                      value={referralUrgency}
-                      onChange={(e) => setReferralUrgency(e.target.value as any)}
-                    >
-                      <option value="routine">🟢 常规会诊</option>
-                      <option value="urgent">🟡 紧急会诊</option>
-                      <option value="emergency">🔴 特急会诊</option>
-                    </select>
-                  </div>
-                  <div className="form-group form-group-flex">
-                    <label className="form-label">病情及会诊目的描述</label>
-                    <div className="input-group">
-                      <input
-                        type="text"
-                        className="input-modern"
-                        placeholder="请详细描述患者病情及申请会诊的目的..."
-                        value={referralSummary}
-                        onChange={(e) => setReferralSummary(e.target.value)}
-                      />
-                      <button
-                        className="btn btn-primary btn-icon"
-                        onClick={handleCreateReferralManual}
-                        title="手动分派会诊"
-                      >
-                        <Send size={18} strokeWidth={2} />
-                        <span>发起会诊</span>
-                      </button>
+                {/* 静态档案 + 情绪历史 */}
+                <div className="grid-2">
+                  <div className="card shadow-sm">
+                    <h3 className="pane-title"><UserRound size={18} /> 孕产基础静态生理档案</h3>
+                    <div className="static-archive-grid">
+                      <ArchiveField label="姓名" value={patient.name} />
+                      <ArchiveField label="年龄" value={`${patient.age} 岁`} />
+                      <ArchiveField label="身高" value={`${patient.heightCm ?? '162'} cm`} />
+                      <ArchiveField label="孕前体重" value={`${patient.prePregnancyWeightKg ?? '58'} kg`} />
+                      <ArchiveField label="预产期 EDD" value={formatDate(patient.edd)} />
+                      <ArchiveField label="末次月经 LMP" value={formatDate(patient.lmp)} />
+                      <ArchiveField label="多胎妊娠" value={patient.multipleGestation ? '🔴 是' : '🟢 否'} />
+                      <ArchiveField label="糖尿病史" value={patient.historyGdm ? '🔴 有' : '🟢 无'} />
+                      <ArchiveField label="高血压史" value={patient.historyPih ? '🔴 有' : '🟢 无'} />
+                      <ArchiveField label="不良孕产史" value={patient.adversePregnancyHistory ? '🔴 有' : '🟢 无'} />
+                      <ArchiveField label="慢性疾病" value={patient.chronicConditions ? '🔴 有' : '🟢 无'} />
                     </div>
                   </div>
-                </div>
-              </div>
 
-              {/* 5. 照护计划及提醒 */}
-              <div className="grid-2 workbench-grid" style={{ marginTop: 'var(--space-4)' }}>
-                <CarePlanPanel
-                  caseId={caseInfo.id}
-                  plans={carePlans}
-                  role={user?.role}
-                  onCreated={loadCase}
-                />
-                <div className="stack">
-                  <RemindersPanel reminders={reminders} />
-                  <RedflagPanel patientId={patientId} role={user?.role} onTriggered={loadAll} />
-                </div>
-              </div>
-            </div>
-          ) : (
-            /* ========================================================
-               TAB 2: 档案全数据汇集健康档案页 (T-D.8)
-               ======================================================== */
-            <div className="stack animate-fade-in">
-              {/* 1. 指标概览大彩卡网格 */}
-              <div className="grid-4 indicators-summary-grid">
-                {/* 血糖 */}
-                <div className="indicator-summary-card shadow-sm">
-                  <div className="indicator-summary-card__head">
-                    <span className="indicator-label">孕期空腹血糖</span>
-                    <span className={`direction-badge ${trendsMap['fasting_glucose']?.direction}`}>
-                      {trendsMap['fasting_glucose']?.direction === 'up' ? '↑ 升高' : trendsMap['fasting_glucose']?.direction === 'down' ? '↓ 降低' : '→ 平稳'}
-                    </span>
-                  </div>
-                  <div className="indicator-summary-card__val">
-                    {observations.find((o) => o.indicator === 'fasting_glucose')?.value || '—'}{' '}
-                    <span className="unit-label">mmol/L</span>
-                  </div>
-                  <div className="sparkline-wrapper">
-                    <Sparkline points={trendsMap['fasting_glucose']?.points || []} minLimit={5.1} />
-                  </div>
-                </div>
-
-                {/* 血压(收缩压) */}
-                <div className="indicator-summary-card shadow-sm">
-                  <div className="indicator-summary-card__head">
-                    <span className="indicator-label">孕期收缩压</span>
-                    <span className={`direction-badge ${trendsMap['systolic_bp']?.direction}`}>
-                      {trendsMap['systolic_bp']?.direction === 'up' ? '↑ 升高' : trendsMap['systolic_bp']?.direction === 'down' ? '↓ 降低' : '→ 平稳'}
-                    </span>
-                  </div>
-                  <div className="indicator-summary-card__val">
-                    {observations.find((o) => o.indicator === 'systolic_bp')?.value || '—'}{' '}
-                    <span className="unit-label">mmHg</span>
-                  </div>
-                  <div className="sparkline-wrapper">
-                    <Sparkline points={trendsMap['systolic_bp']?.points || []} maxLimit={140} />
-                  </div>
-                </div>
-
-                {/* 体重 */}
-                <div className="indicator-summary-card shadow-sm">
-                  <div className="indicator-summary-card__head">
-                    <span className="indicator-label">母体体重监控</span>
-                    <span className={`direction-badge ${trendsMap['weight']?.direction}`}>
-                      {trendsMap['weight']?.direction === 'up' ? '↑ 升高' : trendsMap['weight']?.direction === 'down' ? '↓ 降低' : '→ 平稳'}
-                    </span>
-                  </div>
-                  <div className="indicator-summary-card__val">
-                    {observations.find((o) => o.indicator === 'weight')?.value || '—'}{' '}
-                    <span className="unit-label">kg</span>
-                  </div>
-                  <div className="sparkline-wrapper">
-                    <Sparkline points={trendsMap['weight']?.points || []} />
-                  </div>
-                </div>
-
-                {/* 心率 */}
-                <div className="indicator-summary-card shadow-sm">
-                  <div className="indicator-summary-card__head">
-                    <span className="indicator-label">孕妇静息心率</span>
-                    <span className={`direction-badge ${trendsMap['heart_rate']?.direction}`}>
-                      {trendsMap['heart_rate']?.direction === 'up' ? '↑ 升高' : trendsMap['heart_rate']?.direction === 'down' ? '↓ 降低' : '→ 平稳'}
-                    </span>
-                  </div>
-                  <div className="indicator-summary-card__val">
-                    {observations.find((o) => o.indicator === 'heart_rate')?.value || '—'}{' '}
-                    <span className="unit-label">bpm</span>
-                  </div>
-                  <div className="sparkline-wrapper">
-                    <Sparkline points={trendsMap['heart_rate']?.points || []} minLimit={50} maxLimit={110} />
-                  </div>
-                </div>
-              </div>
-
-              {/* 2. 静态档案 + 身心自评历史曲线图 */}
-              <div className="grid-2" style={{ gap: 'var(--space-4)' }}>
-                {/* 孕产静态档案 */}
-                <div className="card shadow-sm">
-                  <h3 className="pane-title"><UserRound size={18} /> 孕产基础静态生理档案</h3>
-                  <div className="static-archive-grid">
-                    <div className="archive-item"><span className="archive-label">姓名：</span><span>{patient.name}</span></div>
-                    <div className="archive-item"><span className="archive-label">年龄：</span><span>{patient.age} 岁</span></div>
-                    <div className="archive-item"><span className="archive-label">身高：</span><span>{patient.heightCm || '162'} cm</span></div>
-                    <div className="archive-item"><span className="archive-label">孕前体重：</span><span>{patient.prePregnancyWeightKg || '58'} kg</span></div>
-                    <div className="archive-item"><span className="archive-label">预产期EDD：</span><span>{formatDate(patient.edd)}</span></div>
-                    <div className="archive-item"><span className="archive-label">末次月经LMP：</span><span>{formatDate(patient.lmp)}</span></div>
-                    <div className="archive-item"><span className="archive-label">多胎妊娠：</span><span>{patient.multipleGestation ? '🔴 是' : '🟢 否'}</span></div>
-                    <div className="archive-item"><span className="archive-label">糖尿病史：</span><span>{patient.historyGdm ? '🔴 有' : '🟢 无'}</span></div>
-                    <div className="archive-item"><span className="archive-label">高血压史：</span><span>{patient.historyPih ? '🔴 有' : '🟢 无'}</span></div>
-                  </div>
-                </div>
-
-                {/* 焦虑身心评分纵向曲线 (T-D.8) */}
-                <div className="card shadow-sm">
-                  <h3 className="pane-title"><MessageSquareHeart size={18} /> 孕妇情绪/身心焦虑历史评分曲线</h3>
-                  {emotions.length === 0 ? (
-                    <p className="empty-small">暂无孕妇自评数据。打卡后将显示近 N 次走向趋势。</p>
-                  ) : (
-                    <div className="stack text-center" style={{ padding: 'var(--space-4) 0' }}>
-                      <p className="muted" style={{ fontSize: 'var(--font-sm)' }}>近几日身心焦虑自评分值（越高越平稳，分低代表压抑）：</p>
-                      <div className="spread align-center justify-center" style={{ gap: 'var(--space-8)', margin: 'var(--space-4) 0' }}>
-                        <div className="huge-stat-box">
-                          <span className="huge-val text-indigo">{emotions[0].score}</span>
-                          <span className="muted" style={{ fontSize: 'var(--font-xs)' }}>/10 最新分</span>
-                        </div>
-                        <Sparkline points={emotions.map((e) => e.score).reverse()} minLimit={3} />
-                      </div>
-                      <div className="work-list-mini" style={{ maxHeight: '110px', overflowY: 'auto' }}>
-                        {emotions.slice(0, 3).map((e) => (
-                          <div key={e.id} className="row align-center spread shadow-sm" style={{ padding: '6px 12px', fontSize: 'var(--font-xs)', background: '#fff', borderRadius: 'var(--radius-sm)' }}>
-                            <span className="muted">{formatDate(e.createdAt)}</span>
-                            <span className={`badge ${e.status === 'crisis' ? 'badge-rose' : 'badge-amber'}`}>{e.status === 'crisis' ? '危机' : '担忧'}</span>
-                            <span className="muted" style={{ maxWidth: '160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.note}</span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* 3. 指标历史所有观测及时间轴 */}
-              <div className="grid-2 workbench-grid" style={{ marginTop: 'var(--space-4)' }}>
-                {/* 动态时间轴 (CaseTimeline) ➔ D 阶段迁入健康档案汇总 (T-D.8) */}
-                <CaseTimeline
-                  caseInfo={caseInfo}
-                  observations={observations}
-                  alerts={alerts}
-                  carePlans={carePlans}
-                  reminders={reminders}
-                />
-
-                {/* 观测历史列表（带筛选） */}
-                <div className="card shadow-sm">
-                  <h3 className="pane-title">📊 历史所有临床测量记录 ({observations.length})</h3>
-                  <div className="observations-list-container" style={{ maxHeight: '420px', overflowY: 'auto' }}>
-                    {observations.length === 0 ? (
-                      <p className="empty-small">暂无任何历史自测值记录。</p>
+                  {/* 情绪历史曲线 */}
+                  <div className="card shadow-sm">
+                    <h3 className="pane-title"><MessageSquareHeart size={18} /> 孕妇情绪/身心焦虑历史曲线</h3>
+                    {emotions.length === 0 ? (
+                      <p className="empty-small">暂无自评数据，打卡后将显示近 N 次走向趋势。</p>
                     ) : (
-                      <table className="table" style={{ fontSize: 'var(--font-sm)' }}>
-                        <thead>
-                          <tr>
-                            <th>测量时间</th>
-                            <th>测量指标</th>
-                            <th>测量值</th>
-                            <th>QC 状态</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {observations.map((obs) => (
-                            <tr key={obs.id}>
-                              <td className="muted">{formatDate(obs.measuredAt)}</td>
-                              <td>{translateIndicator(obs.indicator)}</td>
-                              <td style={{ fontWeight: 600 }}>{obs.value} {obs.unit}</td>
-                              <td>
-                                <span className={`badge ${obs.qcStatus === 'accepted' ? 'badge-emerald' : 'badge-rose'}`}>
-                                  {obs.qcStatus === 'accepted' ? '质控通过' : '质控拦截'}
-                                </span>
-                              </td>
-                            </tr>
+                      <div className="text-center" style={{ padding: 'var(--space-4) 0' }}>
+                        <p className="muted" style={{ fontSize: 'var(--font-sm)' }}>近几次身心焦虑自评分值（分越高越平稳）：</p>
+                        <div className="spread align-center justify-center" style={{ gap: 'var(--space-8)', margin: 'var(--space-4) 0' }}>
+                          <div className="huge-stat-box">
+                            <span className="huge-val text-indigo">{emotions[0].score}</span>
+                            <span className="muted" style={{ fontSize: 'var(--font-xs)' }}>/10 最新</span>
+                          </div>
+                          <Sparkline points={emotions.map((e) => e.score).reverse()} minLimit={3} />
+                        </div>
+                        <div className="work-list-mini" style={{ maxHeight: '110px', overflowY: 'auto' }}>
+                          {emotions.slice(0, 3).map((e) => (
+                            <div key={e.id} className="row align-center spread shadow-sm" style={{ padding: '6px 12px', fontSize: 'var(--font-xs)', background: '#fff', borderRadius: 'var(--radius-sm)' }}>
+                              <span className="muted">{formatTime(e.createdAt)}</span>
+                              <span className={`badge ${e.status === 'crisis' ? 'badge-rose' : 'badge-amber'}`}>{e.status === 'crisis' ? '危机' : '担忧'}</span>
+                              <span className="muted" style={{ maxWidth: '160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.note}</span>
+                            </div>
                           ))}
-                        </tbody>
-                      </table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* 时间轴 + 观测历史 */}
+                <div className="grid-2 workbench-grid">
+                  <CaseTimeline
+                    caseInfo={caseInfo}
+                    observations={observations}
+                    alerts={alerts}
+                    carePlans={carePlans}
+                    reminders={reminders}
+                  />
+                  <div className="card shadow-sm">
+                    <div className="spread align-center" style={{ marginBottom: 'var(--space-3)' }}>
+                      <h3 className="pane-title" style={{ marginBottom: 0 }}>
+                        📊 历史临床测量记录 ({observations.length})
+                      </h3>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+                        <Filter size={14} className="muted" />
+                        <span className="muted" style={{ fontSize: 'var(--font-xs)' }}>最近 {PAGE_SIZE} 条</span>
+                      </div>
+                    </div>
+                    <div style={{ maxHeight: '420px', overflowY: 'auto' }}>
+                      {observations.length === 0 ? (
+                        <p className="empty-small">暂无任何历史测量记录。</p>
+                      ) : (
+                        <table className="table" style={{ fontSize: 'var(--font-sm)' }}>
+                          <thead>
+                            <tr>
+                              <th>测量时间</th>
+                              <th>指标</th>
+                              <th>测量值</th>
+                              <th>QC</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {paginatedObs.map((obs) => (
+                              <tr key={obs.id}>
+                                <td className="muted">{formatTime(obs.measuredAt)}</td>
+                                <td>{translateIndicator(obs.indicator)}</td>
+                                <td style={{ fontWeight: 600 }}>
+                                  {obs.value} {obs.unit}
+                                </td>
+                                <td>
+                                  <span className={`badge ${obs.qcStatus === 'accepted' ? 'badge-emerald' : 'badge-rose'}`}>
+                                    {obs.qcStatus === 'accepted' ? '✓' : '✗'}
+                                  </span>
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                    </div>
+                    {/* 观测历史分页 */}
+                    {totalObsPages > 1 && (
+                      <div className="pagination" style={{ marginTop: 'var(--space-3)' }}>
+                        <button className="btn btn-ghost btn-xs" onClick={() => setObsPage((p) => Math.max(1, p - 1))} disabled={obsPage === 1} type="button">‹ 上一页</button>
+                        <span>{obsPage} / {totalObsPages}</span>
+                        <button className="btn btn-ghost btn-xs" onClick={() => setObsPage((p) => Math.min(totalObsPages, p + 1))} disabled={obsPage >= totalObsPages} type="button">下一页 ›</button>
+                      </div>
                     )}
                   </div>
                 </div>
               </div>
-            </div>
+            )
           )}
         </>
       )}
     </div>
   );
 }
+
+// ============================================================
+// 子组件
+// ============================================================
+function StatCard({
+  label,
+  value,
+  unit,
+  colorClass,
+  badge,
+  expanded,
+  onToggle,
+  loading,
+}: {
+  label: string;
+  value: number | null;
+  unit: string;
+  colorClass: string;
+  badge: React.ReactNode;
+  expanded: boolean;
+  onToggle: () => void;
+  loading: boolean;
+}): JSX.Element {
+  return (
+    <div className={`stat-item ${expanded ? 'active' : ''}`} onClick={onToggle}>
+      <div className="spread align-center">
+        <span className="stat-item__label">{label}</span>
+        <span className={`stat-item__val ${colorClass}`}>
+          {value !== null ? `${value}` : '—'} {value !== null && <span className="stat-unit">{unit}</span>}
+        </span>
+      </div>
+      <div className="spread align-center" style={{ marginTop: '2px' }}>
+        {badge}
+        {expanded ? <ChevronUp size={12} className="muted" /> : <ChevronDown size={12} className="muted" />}
+      </div>
+    </div>
+  );
+}
+
+function ArchiveField({ label, value }: { label: string; value: string }): JSX.Element {
+  return (
+    <div className="archive-item">
+      <span className="archive-label">{label}：</span>
+      <span>{value}</span>
+    </div>
+  );
+}
+
+function reminderLabel(r: Reminder): string {
+  const map: Record<string, string> = {
+    exercise: '🏃 运动',
+    rest: '🛋️ 静息',
+    water: '💧 喝水',
+    medication: '💊 用药',
+    checkup: '🏥 产检',
+    measurement: '📊 测量',
+  };
+  return map[r.effectiveType] ?? r.effectiveType;
+}
diff --git a/pcm-platform/admin-web/src/styles/global.css b/pcm-platform/admin-web/src/styles/global.css
index 9faacda..53ea58e 100644
--- a/pcm-platform/admin-web/src/styles/global.css
+++ b/pcm-platform/admin-web/src/styles/global.css
@@ -100,6 +100,19 @@ h3 {
 .btn-block {
   width: 100%;
 }
+.btn-xs {
+  padding: 3px 8px;
+  font-size: 11px;
+  border-radius: var(--radius-sm);
+}
+.btn-success {
+  background: var(--color-ok);
+  color: #fff;
+}
+.btn-rose {
+  background: var(--color-danger);
+  color: #fff;
+}
 .btn:disabled {
   opacity: 0.45;
   cursor: not-allowed;
@@ -187,6 +200,22 @@ h3 {
   background: var(--color-calm-soft);
   color: var(--color-calm);
 }
+.badge-emerald {
+  background: var(--color-calm-soft);
+  color: var(--color-calm);
+}
+.badge-rose {
+  background: var(--color-danger-soft);
+  color: var(--color-danger);
+}
+.badge-indigo {
+  background: var(--color-primary-soft);
+  color: var(--color-primary-strong);
+}
+.badge-calm {
+  background: var(--color-calm-soft);
+  color: var(--color-calm);
+}
 
 /* 辅助 */
 .muted {
@@ -212,6 +241,14 @@ h3 {
   grid-template-columns: 1fr 1fr;
   gap: var(--space-4);
 }
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+}
+.align-center {
+  align-items: center;
+}
 .empty {
   color: var(--color-text-soft);
   font-size: var(--font-sm);
@@ -247,3 +284,49 @@ h3 {
 .pager .btn-sm {
   gap: 4px;
 }
+
+/* 实用工具 */
+.text-right { text-align: right; }
+.shadow-sm { box-shadow: 0 1px 3px rgba(31, 39, 51, 0.08); }
+.shadow { box-shadow: var(--shadow-card); }
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.border-l-indigo { border-left: 3px solid var(--color-primary); }
+.border-l-emerald { border-left: 3px solid var(--color-calm); }
+.border-l-rose { border-left: 3px solid var(--color-danger); }
+.bg-light-gradient { background: linear-gradient(135deg, #fff 0%, #faf7fc 100%); }
+.bg-light { background: var(--color-surface-2); }
+.shadow-pop { box-shadow: var(--shadow-pop); }
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(31, 39, 51, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+.modal-panel {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  min-width: 360px;
+  max-width: 560px;
+  box-shadow: var(--shadow-pop);
+}
+
+/* Input variants */
+.textarea {
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-surface);
+  resize: vertical;
+  font-family: inherit;
+  font-size: var(--font-md);
+}
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-calm);
+}