refactor(web): 重写工作台 UI 匹配原型设计

Home.tsx 改用 CSS Grid 布局替代 antd Row/Col，统计卡片添加
顶部渐变色条。TodoList/AiInsightPanel/TeamOverviewPanel 全部
重写为自定义 inline style，复刻原型中的紧急度圆点、类型标签、
AI 渐变图标、成员进度条、风险分布色块等视觉元素。

apps/web/src/pages/health/components/workbench/AiInsightPanel.tsx

@@ -1,82 +1,212 @@
 import { useEffect, useState } from 'react';
-import { Card, Statistic, Row, Col, Spin, Progress } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { Spin } from 'antd';
 import {
   RobotOutlined,
-  WarningOutlined,
-  TeamOutlined,
-  CheckCircleOutlined,
+  SearchOutlined,
+  FormOutlined,
+  PhoneOutlined,
+  AlertOutlined,
+  MedicineBoxOutlined,
 } from '@ant-design/icons';
-import { actionInboxApi, type WorkbenchStats } from '../../../../api/health/actionInbox';
+import { actionInboxApi, type ActionItem, type WorkbenchStats } from '../../../../api/health/actionInbox';
+
+const RISK_CONFIG: Record<string, { label: string; color: string; bg: string }> = {
+  high: { label: '高风险', color: '#DC2626', bg: '#FEF2F2' },
+  medium: { label: '中风险', color: '#D97706', bg: '#FFFBEB' },
+  low: { label: '低风险', color: '#16A34A', bg: '#F0FDF4' },
+};
+
+function getRiskFromPriority(priority: string) {
+  if (priority === 'urgent') return 'high';
+  if (priority === 'high') return 'medium';
+  return 'low';
+}
 
 export default function AiInsightPanel() {
   const [stats, setStats] = useState<WorkbenchStats | null>(null);
+  const [insights, setInsights] = useState<ActionItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    actionInboxApi
-      .stats()
-      .then(setStats)
+    Promise.all([
+      actionInboxApi.stats(),
+      actionInboxApi.list({ status: 'pending', page: 1, page_size: 3 }),
+    ])
+      .then(([s, res]) => {
+        setStats(s);
+        setInsights(res.data.filter((i) => i.action_type === 'ai_suggestion' || i.action_type === 'alert'));
+      })
       .finally(() => setLoading(false));
   }, []);
 
   if (loading) {
     return (
-      <Card>
-        <div style={{ textAlign: 'center', padding: 24 }}><Spin /></div>
-      </Card>
+      <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>
     );
   }
 
-  if (!stats) return null;
-
   return (
-    <Card title="工作台概览" size="small">
-      <Row gutter={16}>
-        <Col span={6}>
-          <Statistic
-            title="待处理"
-            value={stats.total_pending}
-            prefix={<WarningOutlined />}
-            valueStyle={{ color: stats.total_pending > 0 ? '#cf1322' : undefined }}
-          />
-        </Col>
-        <Col span={6}>
-          <Statistic
-            title="AI 建议"
-            value={stats.ai_suggestion_pending}
-            prefix={<RobotOutlined />}
-            valueStyle={{ color: '#1677ff' }}
-          />
-        </Col>
-        <Col span={6}>
-          <Statistic
-            title="紧急告警"
-            value={stats.urgent_alerts}
-            prefix={<WarningOutlined />}
-            valueStyle={{ color: stats.urgent_alerts > 0 ? '#fa541c' : undefined }}
-          />
-        </Col>
-        <Col span={6}>
-          <Statistic
-            title="到期随访"
-            value={stats.followup_due}
-            prefix={<TeamOutlined />}
-          />
-        </Col>
-      </Row>
-      {stats.completion_rate != null && (
-        <div style={{ marginTop: 16 }}>
-          <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>
-            <CheckCircleOutlined style={{ marginRight: 4 }} />
-            完成率
+    <div>
+      {/* AI 洞察卡片 */}
+      <div style={{
+        background: 'var(--erp-bg-card, white)',
+        borderRadius: 12,
+        border: '1px solid var(--erp-border, #E2E8F0)',
+        overflow: 'hidden',
+        marginBottom: 16,
+      }}>
+        {/* 卡片头 */}
+        <div style={{
+          padding: '16px 20px',
+          borderBottom: '1px solid #F1F5F9',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+        }}>
+          <div style={{
+            width: 28,
+            height: 28,
+            borderRadius: 8,
+            background: 'linear-gradient(135deg, #7C3AED, #2563EB)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontSize: 14,
+            fontWeight: 700,
+          }}>
+            AI
           </div>
-          <Progress
-            percent={Math.round(stats.completion_rate * 100)}
-            size="small"
-            status={stats.completion_rate >= 0.8 ? 'success' : 'active'}
-          />
+          <span style={{ fontSize: 14, fontWeight: 600 }}>智能洞察</span>
+          {stats && stats.total_pending > 0 && (
+            <span style={{
+              marginLeft: 'auto',
+              fontSize: 10,
+              background: '#F0FDF4',
+              color: '#16A34A',
+              padding: '2px 8px',
+              borderRadius: 4,
+            }}>
+              {stats.ai_suggestion_pending} 条新建议
+            </span>
+          )}
         </div>
-      )}
-    </Card>
+
+        {/* 洞察列表 */}
+        {insights.length === 0 ? (
+          <div style={{ padding: '24px 20px', textAlign: 'center', color: '#94A3B8', fontSize: 13 }}>
+            暂无 AI 洞察
+          </div>
+        ) : (
+          insights.map((item, idx) => {
+            const risk = getRiskFromPriority(item.priority);
+            const riskCfg = RISK_CONFIG[risk];
+            return (
+              <div key={item.id} style={{
+                padding: '14px 20px',
+                borderBottom: idx < insights.length - 1 ? '1px solid #F1F5F9' : 'none',
+              }}>
+                <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>
+                  {item.patient_name}
+                </div>
+                <div style={{ fontSize: 12, color: '#475569', lineHeight: 1.6 }}>
+                  {item.summary}
+                </div>
+                <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
+                  <span style={{
+                    padding: '2px 8px',
+                    borderRadius: 4,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    background: riskCfg.bg,
+                    color: riskCfg.color,
+                  }}>
+                    {riskCfg.label}
+                  </span>
+                  <span style={{
+                    padding: '2px 8px',
+                    borderRadius: 4,
+                    fontSize: 10,
+                    fontWeight: 500,
+                    background: item.action_type === 'ai_suggestion' ? '#F5F3FF' : '#FEF2F2',
+                    color: item.action_type === 'ai_suggestion' ? '#7C3AED' : '#DC2626',
+                  }}>
+                    {item.action_type === 'ai_suggestion' ? 'AI 分析' : '告警'}
+                  </span>
+                </div>
+
+                {/* 第一条洞察的快捷操作 */}
+                {idx === 0 && (
+                  <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
+                    <button style={{
+                      flex: 1, padding: 8, borderRadius: 10, border: '1px solid #E2E8F0',
+                      background: 'white', textAlign: 'center', cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 11, color: '#475569',
+                    }}>
+                      <PhoneOutlined style={{ fontSize: 16, display: 'block', marginBottom: 4 }} />
+                      联系患者
+                    </button>
+                    <button style={{
+                      flex: 1, padding: 8, borderRadius: 10, border: '1px solid #E2E8F0',
+                      background: 'white', textAlign: 'center', cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 11, color: '#475569',
+                    }}>
+                      <AlertOutlined style={{ fontSize: 16, display: 'block', marginBottom: 4 }} />
+                      安排急诊
+                    </button>
+                    <button style={{
+                      flex: 1, padding: 8, borderRadius: 10, border: '1px solid #E2E8F0',
+                      background: 'white', textAlign: 'center', cursor: 'pointer',
+                      fontFamily: 'inherit', fontSize: 11, color: '#475569',
+                    }}>
+                      <MedicineBoxOutlined style={{ fontSize: 16, display: 'block', marginBottom: 4 }} />
+                      调整用药
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* 快捷操作 */}
+      <div style={{
+        background: 'var(--erp-bg-card, white)',
+        borderRadius: 12,
+        border: '1px solid var(--erp-border, #E2E8F0)',
+        padding: '16px 20px',
+      }}>
+        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>快捷操作</div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
+          <button onClick={() => navigate('/health/patients')} style={{
+            padding: 8, borderRadius: 10, border: '1px solid #E2E8F0',
+            background: 'white', textAlign: 'center', cursor: 'pointer',
+            fontFamily: 'inherit',
+          }}>
+            <SearchOutlined style={{ fontSize: 18, display: 'block', marginBottom: 4, color: '#475569' }} />
+            <span style={{ fontSize: 11, color: '#475569' }}>查询患者</span>
+          </button>
+          <button onClick={() => navigate('/health/follow-ups')} style={{
+            padding: 8, borderRadius: 10, border: '1px solid #E2E8F0',
+            background: 'white', textAlign: 'center', cursor: 'pointer',
+            fontFamily: 'inherit',
+          }}>
+            <FormOutlined style={{ fontSize: 18, display: 'block', marginBottom: 4, color: '#475569' }} />
+            <span style={{ fontSize: 11, color: '#475569' }}>新建随访</span>
+          </button>
+          <button onClick={() => navigate('/health/ai-analysis')} style={{
+            padding: 8, borderRadius: 10, border: '1px solid #E2E8F0',
+            background: 'white', textAlign: 'center', cursor: 'pointer',
+            fontFamily: 'inherit',
+          }}>
+            <RobotOutlined style={{ fontSize: 18, display: 'block', marginBottom: 4, color: '#475569' }} />
+            <span style={{ fontSize: 11, color: '#475569' }}>AI 分析</span>
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }

apps/web/src/pages/health/components/workbench/TeamOverviewPanel.tsx

@@ -1,59 +1,68 @@
 import { useEffect, useState } from 'react';
-import { Card, Table, Tag, Spin, Progress, Empty } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import { Spin } from 'antd';
 import { actionInboxApi, type TeamOverview, type TeamMemberOverview } from '../../../../api/health/actionInbox';
 
-const RISK_COLOR: Record<string, string> = {
-  high: 'red',
-  medium: 'orange',
-  low: 'green',
-};
+function ProgressBar({ value, color }: { value: number; color: string }) {
+  return (
+    <div style={{ height: 4, background: '#F1F5F9', borderRadius: 2, marginTop: 8, overflow: 'hidden' }}>
+      <div style={{
+        height: '100%',
+        borderRadius: 2,
+        width: `${Math.min(100, Math.round(value * 100))}%`,
+        background: color,
+        transition: 'width 0.3s',
+      }} />
+    </div>
+  );
+}
 
-const RISK_LABEL: Record<string, string> = {
-  high: '高风险',
-  medium: '中风险',
-  low: '低风险',
-};
+function MemberCard({ member }: { member: TeamMemberOverview }) {
+  const hasOverdue = member.overdue_count > 0;
+  const rate = member.completion_rate;
+  const barColor = hasOverdue ? '#D97706' : rate >= 0.8 ? '#16A34A' : '#2563EB';
 
-const columns: ColumnsType<TeamMemberOverview> = [
-  {
-    title: '姓名',
-    dataIndex: 'name',
-    key: 'name',
-    width: 100,
-    render: (name: string, record) => (
-      <span>{name}{record.title ? ` (${record.title})` : ''}</span>
-    ),
-  },
-  {
-    title: '待处理',
-    dataIndex: 'pending_count',
-    key: 'pending',
-    width: 80,
-    align: 'center',
-    render: (v: number) => v > 0 ? <Tag color="orange">{v}</Tag> : <span>0</span>,
-  },
-  {
-    title: '已逾期',
-    dataIndex: 'overdue_count',
-    key: 'overdue',
-    width: 80,
-    align: 'center',
-    render: (v: number) => v > 0 ? <Tag color="red">{v}</Tag> : <span>0</span>,
-  },
-  {
-    title: '完成率',
-    dataIndex: 'completion_rate',
-    key: 'rate',
-    width: 120,
-    render: (v: number) => (
-      <Progress
-        percent={Math.round(v * 100)}
-        size="small"
-        status={v >= 0.8 ? 'success' : v >= 0.5 ? 'active' : 'exception'}
-      />
-    ),
-  },
+  return (
+    <div style={{
+      padding: '14px 16px',
+      border: `1px solid ${hasOverdue ? '#FCA5A5' : '#E2E8F0'}`,
+      borderLeft: hasOverdue ? '3px solid #DC2626' : undefined,
+      borderRadius: 10,
+      marginBottom: 10,
+      transition: 'all 0.15s',
+      cursor: 'pointer',
+      background: hasOverdue ? '#FEF2F2' : 'white',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ fontSize: 13, fontWeight: 600 }}>{member.name}</div>
+          <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 2 }}>
+            {member.title ? `${member.title} · ` : ''}待办 {member.pending_count} 项
+          </div>
+        </div>
+        <div style={{ textAlign: 'right' }}>
+          <div style={{
+            fontSize: 18,
+            fontWeight: 700,
+            color: hasOverdue ? '#DC2626' : '#16A34A',
+          }}>
+            {member.overdue_count}
+          </div>
+          <div style={{ fontSize: 10, color: '#94A3B8' }}>超时</div>
+        </div>
+      </div>
+      <ProgressBar value={rate} color={barColor} />
+      <div style={{ fontSize: 10, color: '#94A3B8', marginTop: 4 }}>
+        处理率 {member.completed_count}/{member.pending_count + member.completed_count}
+        {hasOverdue && ` · ${member.overdue_count} 项已升级`}
+      </div>
+    </div>
+  );
+}
+
+const RISK_BLOCKS: { key: string; label: string; color: string; bg: string }[] = [
+  { key: 'high', label: '高危', color: '#DC2626', bg: '#FEF2F2' },
+  { key: 'medium', label: '中危', color: '#D97706', bg: '#FFFBEB' },
+  { key: 'low', label: '低危', color: '#16A34A', bg: '#F0FDF4' },
 ];
 
 export default function TeamOverviewPanel() {
@@ -68,40 +77,71 @@ export default function TeamOverviewPanel() {
   }, []);
 
   if (loading) {
-    return (
-      <Card title="团队概览" size="small">
-        <div style={{ textAlign: 'center', padding: 24 }}><Spin /></div>
-      </Card>
-    );
+    return <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>;
   }
 
-  if (!data || data.members.length === 0) {
-    return (
-      <Card title="团队概览" size="small">
-        <Empty description="暂无团队数据" />
-      </Card>
-    );
-  }
+  if (!data) return null;
 
   return (
-    <Card title="团队概览" size="small">
-      <div style={{ marginBottom: 12, display: 'flex', gap: 16 }}>
-        {Object.entries(data.risk_distribution).map(([level, count]) => (
-          <Tag key={level} color={RISK_COLOR[level]}>
-            {RISK_LABEL[level]}: {count}
-          </Tag>
-        ))}
-        <span style={{ marginLeft: 'auto', color: '#999', fontSize: 12 }}>
-          待处理 {data.total_pending} / 已完成 {data.total_completed}
-        </span>
+    <div>
+      {/* 团队概览卡片 */}
+      <div style={{
+        background: 'var(--erp-bg-card, white)',
+        borderRadius: 12,
+        border: '1px solid var(--erp-border, #E2E8F0)',
+        overflow: 'hidden',
+        marginBottom: 16,
+      }}>
+        <div style={{
+          padding: '16px 20px',
+          borderBottom: '1px solid #F1F5F9',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
+          <span style={{ fontSize: 15, fontWeight: 600 }}>团队概览</span>
+          <span style={{ fontSize: 11, color: '#94A3B8' }}>
+            待处理 {data.total_pending} · 已完成 {data.total_completed}
+          </span>
+        </div>
+        <div style={{ padding: 12 }}>
+          {data.members.length === 0 ? (
+            <div style={{ textAlign: 'center', padding: 24, color: '#94A3B8', fontSize: 13 }}>
+              暂无团队成员数据
+            </div>
+          ) : (
+            data.members.map((member) => (
+              <MemberCard key={member.user_id} member={member} />
+            ))
+          )}
+        </div>
       </div>
-      <Table
-        columns={columns}
-        dataSource={data.members}
-        rowKey="user_id"
-        size="small"
-        pagination={false}
-      />
-    </Card>
+
+      {/* 风险分布 */}
+      <div style={{
+        background: 'var(--erp-bg-card, white)',
+        borderRadius: 12,
+        border: '1px solid var(--erp-border, #E2E8F0)',
+        padding: '16px 20px',
+      }}>
+        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>科室患者风险分布</div>
+        <div style={{ display: 'flex', gap: 8 }}>
+          {RISK_BLOCKS.map((block) => (
+            <div key={block.key} style={{
+              flex: 1,
+              textAlign: 'center',
+              padding: 8,
+              background: block.bg,
+              borderRadius: 6,
+            }}>
+              <div style={{ fontSize: 18, fontWeight: 700, color: block.color }}>
+                {data.risk_distribution[block.key as keyof typeof data.risk_distribution] ?? 0}
+              </div>
+              <div style={{ fontSize: 10, color: block.color }}>{block.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
   );
 }

apps/web/src/pages/health/components/workbench/TodoList.tsx

@@ -1,36 +1,58 @@
 import { useEffect, useState, useCallback } from 'react';
-import { List, Tag, Empty, Spin, Button, Space } from 'antd';
-import {
-  BellOutlined,
-  RobotOutlined,
-  TeamOutlined,
-  WarningOutlined,
-} from '@ant-design/icons';
+import { Empty, Spin } from 'antd';
 import { actionInboxApi, type ActionItem, type ActionType } from '../../../../api/health/actionInbox';
 
-const TYPE_CONFIG: Record<ActionType, { label: string; color: string; icon: React.ReactNode }> = {
-  ai_suggestion: { label: 'AI 建议', color: 'blue', icon: <RobotOutlined /> },
-  alert: { label: '告警', color: 'red', icon: <WarningOutlined /> },
-  followup: { label: '随访', color: 'green', icon: <TeamOutlined /> },
-  data_anomaly: { label: '数据异常', color: 'orange', icon: <BellOutlined /> },
+const TYPE_CONFIG: Record<ActionType, { label: string; color: string; bg: string }> = {
+  ai_suggestion: { label: 'AI 建议', color: '#7C3AED', bg: '#F5F3FF' },
+  alert: { label: '危急告警', color: '#DC2626', bg: '#FEF2F2' },
+  followup: { label: '随访', color: '#0284C7', bg: '#F0F9FF' },
+  data_anomaly: { label: '数据异常', color: '#D97706', bg: '#FFFBEB' },
 };
 
-const PRIORITY_COLOR: Record<string, string> = {
-  urgent: 'red',
-  high: 'volcano',
-  medium: 'orange',
-  low: 'default',
+const PRIORITY_DOT: Record<string, string> = {
+  urgent: '#DC2626',
+  high: '#D97706',
+  medium: '#2563EB',
+  low: '#94A3B8',
 };
 
+const FILTER_OPTIONS: { key: ActionType | 'all'; label: string }[] = [
+  { key: 'all', label: '全部' },
+  { key: 'ai_suggestion', label: 'AI 建议' },
+  { key: 'alert', label: '告警' },
+  { key: 'followup', label: '随访' },
+  { key: 'data_anomaly', label: '数据异常' },
+];
+
+const ACTION_LABEL: Record<ActionType, string> = {
+  ai_suggestion: '审批建议',
+  alert: '立即处理',
+  followup: '开始随访',
+  data_anomaly: '查看详情',
+};
+
+function formatTime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffDays = Math.floor(diffMs / 86400000);
+  if (diffDays > 0) return `${diffDays}天前`;
+  const hours = d.getHours().toString().padStart(2, '0');
+  const mins = d.getMinutes().toString().padStart(2, '0');
+  return `${hours}:${mins}`;
+}
+
 interface TodoListProps {
   onItemClick?: (item: ActionItem) => void;
 }
 
 export default function TodoList({ onItemClick }: TodoListProps) {
   const [items, setItems] = useState<ActionItem[]>([]);
+  const [filtered, setFiltered] = useState<ActionItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
+  const [activeFilter, setActiveFilter] = useState<ActionType | 'all'>('all');
 
   const fetchItems = useCallback(async (p: number) => {
     setLoading(true);
@@ -40,7 +62,7 @@ export default function TodoList({ onItemClick }: TodoListProps) {
         page: p,
         page_size: 10,
       });
-      setItems(res.items);
+      setItems(res.data);
       setTotal(res.total);
     } finally {
       setLoading(false);
@@ -51,6 +73,14 @@ export default function TodoList({ onItemClick }: TodoListProps) {
     fetchItems(page);
   }, [page, fetchItems]);
 
+  useEffect(() => {
+    if (activeFilter === 'all') {
+      setFiltered(items);
+    } else {
+      setFiltered(items.filter((i) => i.action_type === activeFilter));
+    }
+  }, [items, activeFilter]);
+
   if (loading) {
     return <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>;
   }
@@ -60,44 +90,146 @@ export default function TodoList({ onItemClick }: TodoListProps) {
   }
 
   return (
-    <List
-      dataSource={items}
-      pagination={{
-        current: page,
-        total,
-        pageSize: 10,
-        size: 'small',
-        onChange: setPage,
-      }}
-      renderItem={(item) => {
-        const cfg = TYPE_CONFIG[item.action_type];
-        return (
-          <List.Item
-            style={{ cursor: 'pointer', padding: '8px 12px' }}
-            onClick={() => onItemClick?.(item)}
+    <div>
+      {/* 筛选条 */}
+      <div style={{ display: 'flex', gap: 4, padding: '12px 16px', borderBottom: '1px solid #F1F5F9' }}>
+        {FILTER_OPTIONS.map((opt) => (
+          <button
+            key={opt.key}
+            onClick={() => setActiveFilter(opt.key)}
+            style={{
+              padding: '4px 12px',
+              border: `1px solid ${activeFilter === opt.key ? '#2563EB' : '#E2E8F0'}`,
+              borderRadius: 6,
+              background: activeFilter === opt.key ? '#2563EB' : 'white',
+              color: activeFilter === opt.key ? 'white' : '#475569',
+              fontSize: 12,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              transition: 'all 0.15s',
+            }}
           >
-            <List.Item.Meta
-              avatar={<span style={{ fontSize: 18 }}>{cfg.icon}</span>}
-              title={
-                <Space>
-                  <span>{item.title}</span>
-                  <Tag color={cfg.color}>{cfg.label}</Tag>
-                  <Tag color={PRIORITY_COLOR[item.priority]}>{item.priority}</Tag>
-                </Space>
-              }
-              description={
-                <Space direction="vertical" size={2}>
-                  <span>{item.summary}</span>
-                  <span style={{ color: '#999', fontSize: 12 }}>
-                    {item.patient_name} · {new Date(item.created_at).toLocaleDateString()}
-                  </span>
-                </Space>
-              }
-            />
-            <Button type="link" size="small">处理</Button>
-          </List.Item>
-        );
-      }}
-    />
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 待办列表 */}
+      <div style={{ padding: 8 }}>
+        {filtered.length === 0 ? (
+          <Empty description="无匹配项" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        ) : (
+          filtered.map((item) => {
+            const cfg = TYPE_CONFIG[item.action_type];
+            const dotColor = PRIORITY_DOT[item.priority] || PRIORITY_DOT.low;
+            return (
+              <div
+                key={item.id}
+                onClick={() => onItemClick?.(item)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: 12,
+                  padding: '14px 12px',
+                  borderRadius: 10,
+                  cursor: 'pointer',
+                  transition: 'all 0.15s',
+                  borderBottom: '1px solid #F1F5F9',
+                }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = '#EFF6FF'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
+              >
+                {/* 紧急度圆点 */}
+                <div style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  background: dotColor,
+                  marginTop: 6,
+                  flexShrink: 0,
+                }} />
+
+                {/* 内容 */}
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 2 }}>{item.title}</div>
+                  <div style={{ fontSize: 12, color: '#94A3B8' }}>{item.summary}</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
+                    <span style={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: 4,
+                      padding: '2px 8px',
+                      borderRadius: 4,
+                      fontSize: 11,
+                      fontWeight: 500,
+                      background: cfg.bg,
+                      color: cfg.color,
+                    }}>
+                      {cfg.label}
+                    </span>
+                    <span style={{ fontSize: 11, color: '#94A3B8' }}>
+                      {item.patient_name}
+                    </span>
+                  </div>
+                </div>
+
+                {/* 时间 */}
+                <span style={{ fontSize: 11, color: '#94A3B8', whiteSpace: 'nowrap', marginTop: 2 }}>
+                  {formatTime(item.created_at)}
+                </span>
+
+                {/* 操作按钮 */}
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    borderRadius: 6,
+                    border: '1px solid #2563EB',
+                    background: 'white',
+                    color: '#2563EB',
+                    fontSize: 12,
+                    cursor: 'pointer',
+                    fontFamily: 'inherit',
+                    transition: 'all 0.15s',
+                    whiteSpace: 'nowrap',
+                    marginTop: 2,
+                  }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = '#2563EB'; e.currentTarget.style.color = 'white'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = 'white'; e.currentTarget.style.color = '#2563EB'; }}
+                >
+                  {ACTION_LABEL[item.action_type]}
+                </button>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* 分页 */}
+      {total > 10 && (
+        <div style={{
+          padding: '8px 16px',
+          borderTop: '1px solid #F1F5F9',
+          textAlign: 'center',
+          fontSize: 12,
+          color: '#94A3B8',
+        }}>
+          <button
+            disabled={page <= 1}
+            onClick={() => setPage(page - 1)}
+            style={{ border: 'none', background: 'none', cursor: page <= 1 ? 'default' : 'pointer', color: page <= 1 ? '#CBD5E1' : '#2563EB', padding: '4px 8px', fontFamily: 'inherit' }}
+          >
+            上一页
+          </button>
+          <span style={{ margin: '0 8px' }}>{page} / {Math.ceil(total / 10)}</span>
+          <button
+            disabled={page >= Math.ceil(total / 10)}
+            onClick={() => setPage(page + 1)}
+            style={{ border: 'none', background: 'none', cursor: page >= Math.ceil(total / 10) ? 'default' : 'pointer', color: page >= Math.ceil(total / 10) ? '#CBD5E1' : '#2563EB', padding: '4px 8px', fontFamily: 'inherit' }}
+          >
+            下一页
+          </button>
+        </div>
+      )}
+    </div>
   );
 }