# PAC UI 设计基调

> Next 16 + React 19 + TailwindCSS 4 + shadcn/ui + Radix + lucide + zustand
> 移动优先,iframe 嵌入约束。

---

## 1. 场景约束

| 约束 | 设计含义 |
|---|---|
| iframe 嵌入多个宿主 | **中性不抢宿主**,但保留 PAC 辨识 |
| 客服打电话边看边记 | 高信息密度、单手可操作、CTA 显眼 |
| 移动优先 | 默认 mobile,sm/md/lg 渐进 |
| 医疗 SaaS | 专业 > 花哨,不弹跳不彩虹 |

## 2. 配色

| 槽位 | 值 | 用途 |
|---|---|---|
| Primary | `teal-600` `#0D9488` | 主操作 / 选中态 |
| Primary subtle | `teal-50` | 标签底 / 高亮区 |
| 辅助强调 | `indigo-500` `#6366F1` | Persona / AI 产物标识 |
| Success | `emerald-600` | success_appointed |
| Warning | `amber-500` | scheduled_next / 待跟进 |
| Danger | `rose-600` | abandoned / 投诉 / DNC |
| Info | `sky-500` | 同步状态 / 默认信息 |
| 中性灰阶 | shadcn **slate**(不动) | 跟宿主和谐 |

**渠道色**:phone=sky · wecom=emerald · sms=violet · other=slate
**优先级条**:emerald → amber → rose 三段渐变(不直显数字)

## 3. 字体 / 数字

- 中文:`PingFang SC, "Noto Sans CJK SC", system-ui, sans-serif`(不引外部字体)
- 数字:**`tabular-nums`** 等宽 — 金额 / 时间窗 / 计数
- 字号阶梯(mobile):12 / 14 / 16 / 20 / 24,标题最大 24

## 4. 形状 / 间距

| | 值 |
|---|---|
| 圆角 base | `--radius: 0.5rem`(8px) |
| 卡片 | `rounded-lg` |
| chip | `rounded-full` |
| 阴影 | 默认 `shadow-sm`,hover `shadow-md`,**禁重阴影** |
| 卡片内边距 | mobile `p-4` / desktop `p-5` |
| 列表间距 | `gap-3` |
| 触控目标 | 最小 **44×44px** |

## 5. 信息密度纪律

> **视觉焦点只放决策必需的信息,其余收进抽屉 / 折叠 / 二级页。**

| 层级 | 形态 | 内容 |
|---|---|---|
| 焦点 | always-on | 身份 / 优先级 / 召回理由摘要 / CTA |
| 次级 | accordion / tab | reason 证据列表 / 治疗链时间轴 / AI 产物 |
| 详情 | 抽屉 / 全屏 modal | 完整 transaction timeline / EMR 原文 / 影像 metadata |
| 调试 | 隐藏(角色门控) | rawPayload / agentInvocation token / fact version 历史 |

**不强制卡片结构**,但**强制信息分层** — 任何页面都要明确"什么进焦点、什么进抽屉"。

## 6. Motion

- ease-out **150ms** 通用
- 状态切换 / 列表插入 pulse **300ms**
- 禁:bounce / 大幅 scale / 旋转

## 7. iframe 嵌入约束

- 容器用 `bg-background` token,不假设白底
- 不用 fixed/absolute 全屏遮罩
- 不引外部字体(走宿主 system font 链)
- 链接 `target="_top"`(deep-link 跳宿主原页)

## 8. 关键 UI 单元清单(W3-W4 落地)

| 组件 | 用途 | 优先级 |
|---|---|---|
| `<PlanCard>` | 召回任务列表项 | P0 |
| `<PersonaCard>` | 患者画像快读 | P0 |
| `<ReasonChip>` | scenario 标签 | P0 |
| `<PriorityBar>` | 5 段渐变优先级 | P0 |
| `<ChannelIcon>` | 渠道图标 | P0 |
| `<TreatmentChainTimeline>` | 治疗链横向时间轴 ⭐ 差异化 | P0 |
| `<OutcomeDialog>` | 执行回写(强枚举) | P0 |
| `<ScriptViewer>` | Markdown 话术(开场/跟进/异议折叠) | P1 |
| `<EvidenceDrawer>` | factIds → transaction 原文 | P1 |
