71 lines
2.0 KiB
Markdown
71 lines
2.0 KiB
Markdown
# PPT Editor
|
||
|
||
PPT 幻灯片预览与编辑组件。通过 JSON URL 加载幻灯片列表，iframe 逐页渲染，支持元素级编辑、撤销/重做、自动保存。
|
||
|
||
## 用法
|
||
|
||
```tsx
|
||
import PptPreview from "@/components/ppt-editor";
|
||
|
||
<PptPreview
|
||
url="https://example.com/slides.json" // PPT JSON 数据 URL
|
||
artifact={taskArtifact} // TaskArtifact 对象
|
||
taskId="conversation-123" // 会话/任务 ID
|
||
/>;
|
||
```
|
||
|
||
> 外层需包裹 `<NovaKitProvider>`。
|
||
|
||
## Props
|
||
|
||
| 属性 | 类型 | 必填 | 说明 |
|
||
| ---------- | ----------------------------- | ---- | -------------------------------- |
|
||
| `url` | `string` | ✅ | PPT JSON 数据的远程 URL |
|
||
| `artifact` | `TaskArtifact` | ✅ | 产物数据对象，包含文件路径等信息 |
|
||
| `taskId` | `string \| null \| undefined` | ✅ | 会话/任务 ID，用于保存接口 |
|
||
| `editable` | `boolean` | ❌ | 是否开启编辑模式。默认 `true` |
|
||
|
||
## PPT JSON 格式
|
||
|
||
`url` 返回的 JSON 须包含 `slide_list` 数组，每项：
|
||
|
||
```ts
|
||
interface SliderListItem {
|
||
id: string; // 幻灯片唯一 ID
|
||
content: string; // HTML 内容（iframe srcDoc）
|
||
file_name: string;
|
||
file_type: string;
|
||
path: string;
|
||
title: string;
|
||
}
|
||
```
|
||
|
||
## 保存接口
|
||
|
||
内容变更后自动防抖 1 秒调用，也可手动保存：
|
||
|
||
```ts
|
||
POST / v1 / super_agent / chat / slide;
|
||
Body: {
|
||
(task_id, slide_path, slide_content);
|
||
}
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
ppt-editor/
|
||
├── index.tsx # 入口 PptPreview
|
||
├── FloatingToolbar.tsx # 悬浮工具栏（Undo/Redo + Save 状态）
|
||
├── FloatingToolbar.css
|
||
├── hooks/
|
||
│ ├── usePPTEditor.ts # 核心编辑 hook
|
||
│ └── useSize.ts # 元素尺寸监听
|
||
└── server/
|
||
└── index.ts # savePPT 接口
|
||
```
|
||
|
||
## 依赖
|
||
|
||
依赖 `html-editor` 模块：`PPTEditProvider`、`useIframeMode`、`useEditState`、`toolbar-web`。
|