test1/components/ppt-editor/README.md

PPT Editor

PPT 幻灯片预览与编辑组件。通过 JSON URL 加载幻灯片列表，iframe 逐页渲染，支持元素级编辑、撤销/重做、自动保存。

用法

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 数组，每项：

interface SliderListItem {
  id: string; // 幻灯片唯一 ID
  content: string; // HTML 内容（iframe srcDoc）
  file_name: string;
  file_type: string;
  path: string;
  title: string;
}

保存接口

内容变更后自动防抖 1 秒调用，也可手动保存：

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。