# 2.0 新增 (/docs/components/v2)

2.0 新增收录 Claude Desktop 2.0 引入或重做的界面：推理算力调节器、输入框底部工具栏、sibling-index() 交错入场、Pill 过冲回弹、发丝边与触控补偿、骨架屏双模。本页 6 个演示对应手册 v2 第二、三、五章。

## 关键数值 [#关键数值]

| 项目 | 数值 | 出处 |
|---|---|---|
| Pill 过冲 | `80ms 放大到 1.32× → 120ms overshoot 回落` | v2/03 §3.5.1 |
| 交错入场 | `延迟 = 序号 × 步长（sibling-index()）` | v2/02 §2.5.1 |
| 骨架屏 lockstep | `2.0s 周期，暗到 60%` | v2/03 §3.5.2 |
| 骨架屏 wave | `每块延迟 序号 × 90ms，105° 扫光` | v2/03 §3.5.2 |
| 发丝边 | `0.5px` | v2/02 §2.7 |
| 触控补偿 | `(h-control − 行高) / 2` | v2/02 §2.8 |

## 推理算力调节器 [#推理算力调节器]

2.0 在模型菜单里加了推理算力档位，决定模型思考多久。

<D.Effort />

## 输入框底部工具栏 [#输入框底部工具栏]

输入框底部一栏放算力档位和发送失败消息的重试入口。

<D.Chin />

## sibling-index 交错入场 [#sibling-index-交错入场]

用 CSS 的 sibling-index() 按序号延迟入场，不写 JS。

<D.Stagger />

## Pill 过冲回弹 [#pill-过冲回弹]

胶囊出现时先放大再回弹，分两段完成，总长 200ms。

<D.PillPop />

## 发丝边与触控补偿 [#发丝边与触控补偿]

2.0 用 0.5px 边框；底栏按钮看起来小，点击区用负外边距补大。

<D.Hairline />

## 骨架屏双模 [#骨架屏双模]

骨架屏有整组同步闪烁和逐块波浪两种模式，分别适合列表和大卡片。

<D.SkeletonModes />

## 怎么在项目里使用？ [#怎么在项目里使用]

复制 [code-examples/](https://github.com/Caho1/open-claude-ui/blob/main/code-examples) 里对应的文件，并引入 `cds-theme.css`。例如：

```css
.chip { animation-delay: calc(var(--cds-chip-in-base-delay, 50ms) + min(sibling-index() - 1, 8) * 30ms); }
```

## 相关页面 [#相关页面]

- [动效与光影](/docs/components/motion)
- [v2 第二章](/docs/v2/02)
- [v2 第三章](/docs/v2/03)
- [全部 Open Claude UI 组件演示](/docs/components)