# Open Claude UI 组件演示 (/docs/components)

这里的组件都是真实运行的 React 代码，直接引自仓库的 [code-examples/](https://github.com/Caho1/open-claude-ui/tree/main/code-examples)，样式变量来自 `cds-theme.css`。按手册章节分页，右上角可以切换深色模式；系统开启“减少动态效果”时动画会停掉。

| 页面 | 手册章节 | 内容 |
|---|---|---|
| [基础原子组件](/docs/components/atoms) | v1 第二篇 | 按钮、组合按钮、分段控制器、状态灯、骨架屏、确认弹窗、附件磁贴、容器查询工具栏 |
| [会话与输入](/docs/components/conversation) | v1 第三篇 | 消息气泡、思考折叠、输入框、/ 与 @ 输入、模型切换与 Token 仪表盘、MCP 工具卡片 |
| [动效与光影](/docs/components/motion) | v1 第四篇 · v2 第四篇 | 时长与缓动、弹簧参数、2.0 动效引擎、推理光晕与扫光、滚动渐隐 |
| [多媒体与产物](/docs/components/media) | v1 第五篇 | 语音波形、图片查看器、双栏分割、产物沙箱、Diff 查看器、代码块 |
| [桌面架构与交互 Hook](/docs/components/desktop) | v1 第六篇 | 桌面顶栏、会话拖拽排序、多代理看板、滚动跟随、漫游焦点、共享元素转场、限流退避 |
| [2.0 新增](/docs/components/v2) | v2 第二、三、五篇 | 算力调节器、输入框底栏、sibling-index 交错、Pill 过冲、发丝边与触控补偿 |

**没有放演示的部分**：`ClaudeAudioPlayer.ts`（复刻官方提示音，属于官方声音资产，不收录）、`createClaudeMainWindow.ts`（Electron 主进程代码，浏览器里跑不了）、`tailwind.config.js` / `cds-theme.css` / `cds-pure.css`（配置与样式表，已经在全站使用）。

站点不包含任何 Anthropic 官方素材：图标统一用 lucide，组件里原本的 emoji 和品牌图标位置换成了中性图标，图片是生成的占位图。

数值的来源与分析方法见 [分析 Claude 桌面端界面](/reverse-engineering-claude)。