Open Claude UI 组件演示
多媒体与产物
Open Claude UI 组件演示：语音波形、图片查看器、双栏分割、产物沙箱、Diff、代码块（手册 v1 第五篇）。每个演示附规格和源码出处。
View as Markdown最后更新：
多媒体与产物覆盖语音、图片、代码和 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 根柱子显示音量，演示可以接本地麦克风，声音不上传。
图片查看器
图片查看器以光标为锚点缩放，支持拖动、方向键切换和 Esc 关闭。
双栏分割
对话和产物并排时，中间分隔条可拖动，双击回到对半。
会话区
左侧最小宽度示例里调小到 160px。
左侧最小宽度示例里调小到 160px。
产物预览区
产物沙箱
产物在沙箱 iframe 里运行，通过 postMessage 和宿主页面通信。
Diff 查看器
代码改动用增删行底色区分，可在统一视图和分栏视图之间切换。
config.tsts
+2-1
| 1 | 1 | export const config = { | |
| 2 | - | port: 3000, | |
| 2 | + | port: Number(process.env.PORT ?? 3000), | |
| 3 | + | host: '0.0.0.0', | |
| 3 | 4 | debug: false, | |
| 4 | 5 | }; |
正在接收差异流...
代码块
代码块是深色外壳，带文件名和复制按钮。
</>typescript•hello.ts
| 1 | export function hello(name: string) { |
| 2 | return `你好，${name}`; |
| 3 | } |
| 4 | |
| 5 | console.log(hello("世界")); |
怎么在项目里使用？
复制 code-examples/ 里对应的文件，并引入 cds-theme.css。例如：
import { CodeBlock } from './CodeBlock';
<CodeBlock filename="hello.ts" language="typescript" code={src} />