# 第四章：系统底座全景解密 (/docs/v2/04)

## 4. 底座解密 [#4-底座解密]

### 4.1 纯 CSS 动效参数 [#41-纯-css-动效参数]

从官方生产样式表中分析提取出的 47 个关键帧涵盖了系统全域动效：

* **Pill 微形变族**：`cds-pill-in`, `cds-pill-pop-up`, `cds-pill-pop-down`, `cds-pill-dip-down`, `cds-pill-dip-up`, `cds-pill-roll-in-up`, `cds-pill-roll-in-down`, `cds-pill-roll-out`, `cds-pill-out`
* **骨架屏呼吸与扫光族**：`cds-skeleton-breathe`, `cds-skeleton-sweep`, `cds-placeholder-reveal`
* **Agent 思考状态族**：`cds-dot-pulse`, `cds-working-dot-halo`, `cds-working-dot-lands`, `cds-working-dot-veil`
* **视口与滚动驱动族**：`cds-scroll-fade-top`, `cds-scroll-fade-bottom`, `cds-scroll-fade-left`, `cds-scroll-fade-right`, `cds-sticky-edge-start`, `cds-sticky-edge-end`
* **元素进入退出族**：`cds-reveal-in`, `cds-reveal-out`, `cds-fade-in`, `cds-slide-in-start`, `cds-slide-in-end`, `cds-morph-in`, `cds-chip-in`, `cds-attachment-out`

---

### 4.2 原生组件命名空间 [#42-原生组件命名空间]

在 2.0 中，Anthropic 全面确立了 **40 个标准 `data-cds` 顶级组件契约**：

```
[40 大标准化组件清单]
• Accordion              • AccordionHeader        • Aside                  • AskUserQuestion
• AssistantMessage       • Banner                 • Button                 • ButtonGroup
• Card                   • CardLink               • ChartContainer         • ChatComposerChin
• ChatComposerDock       • ChatComposerEditor     • ChatComposerNotices    • ChatComposerQueuedMessages
• CommentCard            • DataTable              • FileDiff               • Icon
• MessageActions         • MessageAttachments     • MessageAttachmentsFile • MessageAttachmentsImage
• MessageAttachmentsQuote• MessageAttachmentsVideo• ModelSelector         • ModelSelectorEffort
• Panel                  • PointChartContainer    • PreviewCard            • Prose
• Pulse                  • Skeleton               • SkeletonGroup          • SplitDropdownButton
• Surface                • Table                  • TurnStatusStep         • UserMessage
```

---

### 4.3 响应时间与贝塞尔曲线 [#43-响应时间与贝塞尔曲线]

#### 1. 5 阶响应时间 Token 矩阵 [#1-5-阶响应时间-token-矩阵]

```css
:root {
  --cds-dur-fast: 60ms;        /* 瞬态响应：按压塌陷、Focus 环显现、Checkbox 勾选 */
  --cds-dur-snap: .12s;        /* 利落转场 (120ms)：Pill 收缩、标签关闭、微图标翻转 */
  --cds-dur-base: .2s;         /* 标准交互 (200ms)：模态框展开、卡片悬停上浮、下拉菜单 */
  --cds-dur-sheet: .3s;        /* 抽屉大面板 (300ms)：NewSessionDrawer 滑出、文件侧栏 */
  --cds-dur-slow: .45s;        /* 页面级大转场 (450ms)：Popout 弹射窗口初始化、全屏遮罩 */
}
```

#### 2. 3 大精确贝塞尔控制点 [#2-3-大精确贝塞尔控制点]

```css
:root {
  /* 1. 平滑自然减速曲线 (Quint-like Out) */
  --cds-ease-out: cubic-bezier(.165, .84, .44, 1);

  /* 2. 瞬态刚性捕捉曲线 (Crisp Snap) */
  --cds-ease-snap: cubic-bezier(.32, .72, 0, 1);

  /* 3. 物理过冲回弹曲线 (Spring Overshoot) */
  --cds-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);
}
```

---