# 多媒体与产物 (/docs/components/media)

多媒体与产物覆盖语音、图片、代码和 Artifacts（产物）相关的界面：麦克风波形、图片查看器、产物双栏、沙箱 iframe、Diff 和代码块。本页 6 个演示对应手册 v1 第五篇；官方提示音属于官方资产，没有收录。

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

| 项目 | 数值 | 出处 |
|---|---|---|
| 语音波形 | `6 频段，非线性 Gamma 映射` | v1/05 §5.1.3 |
| 双栏折叠阈值 | `拖到边缘 18% 以内折叠` | v1/05 §5.3 |
| 代码块外壳 | `12px 圆角，36px 头部` | v1/05 §5.5.4 |
| 复制成功提示 | `绿色勾 2.5 秒后淡出` | v1/05 §5.5.4 |

## 语音波形 [#语音波形]

语音输入时用 6 根柱子显示音量，演示可以接本地麦克风，声音不上传。

<D.MicBars />

## 图片查看器 [#图片查看器]

图片查看器以光标为锚点缩放，支持拖动、方向键切换和 Esc 关闭。

<D.Lightbox />

## 双栏分割 [#双栏分割]

对话和产物并排时，中间分隔条可拖动，双击回到对半。

<D.SplitPane />

## 产物沙箱 [#产物沙箱]

产物在沙箱 iframe 里运行，通过 postMessage 和宿主页面通信。

<D.Epitaxy />

## Diff 查看器 [#diff-查看器]

代码改动用增删行底色区分，可在统一视图和分栏视图之间切换。

<D.Diff />

## 代码块 [#代码块]

代码块是深色外壳，带文件名和复制按钮。

<D.Code />

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

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

```tsx
import { CodeBlock } from './CodeBlock';

<CodeBlock filename="hello.ts" language="typescript" code={src} />
```

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

- [会话与输入](/docs/components/conversation)
- [桌面架构与交互 Hook](/docs/components/desktop)
- [v1 第五篇](/docs/v1/05)
- [全部 Open Claude UI 组件演示](/docs/components)