# PAC 设计系统 — 用法约定

PAC「疗效保障」是嵌进牙科宿主系统的**临床召回客服工作台**。栈:React 19 + Tailwind v4 + shadcn/ui(基于 Radix)。风格克制、信息密集、teal 品牌色主导、以边框而非阴影分隔。组件从 `window.PAC.*` 取,全部真实可用。

## 包裹与主题
**无需 Provider。** 所有组件靠 `styles.css` 里的 CSS 变量(`:root` 定义)取色,不依赖运行时主题上下文——直接用即可,唯一要求是页面加载了 `styles.css`。`Toaster` 例外:它是全局 toast 容器,每页**挂一次**(如根布局),再用 `toast()` / `toast.success()` / `toast.error()` 触发,别在每个组件里重复挂。

## 样式惯用法(两套并存,别混造)
这是 **Tailwind 工具类**系统,不是 props-样式或 CSS-modules。给你自己的布局胶水写工具类;组件外观由组件自身负责,你只需传对 variant/props。

**语义 CSS 变量(shadcn 层,组件内部用的角色色)**——改主题只动这些,组件不用改:

| 变量 | 角色 |
|---|---|
| `--primary` / `--primary-foreground` | 主交互色(= teal-600)/ 其上文字 |
| `--background` / `--foreground` | 页面底 / 主文字 |
| `--muted` / `--muted-foreground` | 弱化底 / 次要文字 |
| `--border` | 分隔线(PAC 特意加深) |
| `--card` `--popover` `--destructive` `--ring` | 卡片/浮层底、危险色、焦点环 |

**原始色阶工具类(你写布局时直接用的品牌调色板)**,真实存在于产物:

| 族 | 例(真实类名) | 用途 |
|---|---|---|
| 品牌 teal | `bg-teal-50` `text-teal-700` `ring-teal-200` `bg-teal-600` | 主色、选中态、标签 |
| 中性 slate | `text-slate-900` `text-slate-500` `border-slate-100` `bg-slate-50` | ~90% 界面 |
| 语义强调 | `text-rose-600`(危险)`text-amber-700`(进行中)`text-emerald-700`(成功)`text-sky-700`(待认领)`text-indigo-500`(AI) | 状态色 |

**尺寸口径**:PAC 偏小字密排——正文常 `text-[11px]`~`text-[13px]`,间距 `gap-1.5`/`gap-2`、`p-2`/`p-3`。别用大号松散排版。

## 真相在哪
- 样式:读 `styles.css`(它 `@import` 了 `_ds_bundle.css` 组件样式 + Tailwind 工具层),里面有全部 `--*` 变量与工具类的真实定义。
- 每个组件读 `components/<组>/<Name>/<Name>.prompt.md`(用法+示例)与 `<Name>.d.ts`(props 契约)。
- 分组:`actions`(Button/DropdownMenu)、`display`(Badge/Card/Tabs)、`forms`(Input/Select/Calendar/DatePicker)、`overlay`(Dialog/AlertDialog/Popover/HoverCard/Toaster)、`plan-detail`(工作台业务原语:Chip/PriorityBar/AIStamp/SidebarCard/MD)。

## 一个惯用片段
```tsx
import { Button, Card, CardHeader, CardTitle, CardContent, CardFooter, Chip } from '@pac/web';

// 召回池患者卡:库组件搭骨架,工具类做布局胶水
<Card className="w-[340px]">
  <CardHeader>
    <CardTitle className="text-base">
      黄莉 <span className="ml-1 text-sm font-normal text-slate-500">女 · 51 岁</span>
    </CardTitle>
  </CardHeader>
  <CardContent className="text-[12.5px] leading-relaxed text-slate-700">
    36/46 缺牙拖月未治,重要价值新客,建议尽快邀约种植评估。
    <div className="mt-2 flex flex-wrap gap-1.5">
      <Chip tone="teal" size="xs">重要价值</Chip>
      <Chip tone="rose" size="xs" icon>应治未治</Chip>
    </div>
  </CardContent>
  <CardFooter className="gap-2">
    <Button size="sm">认领</Button>
    <Button size="sm" variant="outline">查看详情</Button>
  </CardFooter>
</Card>
```

**业务原语 Chip 的 tone**:`teal`/`slate`/`amber`/`rose`/`indigo`/`emerald`/`sky`/`violet`(不是 shadcn 的 variant,是 PAC 自有色板);`size` 仅 `xs`/`sm`;`icon` 加圆点。**Button 的 variant**:`default`/`secondary`/`outline`/`ghost`/`destructive`/`link`,`size`:`sm`/`default`/`lg`/`icon`。
