UI 业务流程图
预装版 UI 的分工很明确:接入方负责服务端鉴权和宿主页面,iframe 负责生成、编辑与下载。宿主通过配置决定入口,通过消息感知结果。
宿主与 iframe 的职责边界
先把预装版 UI 理解成“接入方页面里的完整 AiPPT 工作区”:接入方负责用户体系、服务端鉴权和宿主页面交互,iframe 内负责生成、编辑、模板选择、下载等产品流程。
| 你要确认的事 | 看哪里 | 结论 |
|---|---|---|
| 用什么凭证打开 UI | 服务端鉴权段 | 使用 /api/grant/code 获取 code,不要使用拼装版 API 的 token |
| 打开后进入哪个页面 | 页面入口段 | 通过 routerOptions 进入作品列表、生成页或编辑器 |
| 是否要跳过默认入口 | 自定义创建段 | 通过 options.custom_generate 传入标题、文件、参考文档或已有任务 |
| 生成和编辑完成后怎么联动业务 | 事件段 | 通过 onMessage 接收保存、下载、错误、场景鉴权等通知 |
最小接入流程
- 服务端按 UI 鉴权 获取
code。 - 前端引入
https://api-static.aippt.cn/aippt-iframe-sdk.js。 - 调用
AipptIframe.show,传入appkey、code、channel、container和onMessage。 - 按业务需要补充
routerOptions或options.custom_generate。 - 监听关键事件,至少处理初始化失败、保存、下载和场景鉴权结果。
按问题查文档,不必顺序通读
接入配置由入口选择、能力配置和事件处理三部分组成:
| 顺序 | 页面 | 适合解决的问题 |
|---|---|---|
| 1 | 业务流程图 | 先确认 UI 版本整体链路、三类入口和关键事件边界 |
| 2 | 接入 | 完成 code 获取、SDK 引入和 AipptIframe.show 初始化 |
| 3 | 配置 | 配置功能板块、下载、场景鉴权、页面入口和自定义创建 |
| 4 | 事件通知 | 处理 iframe 通知宿主页面的路由、生成、保存、下载、错误和鉴权消息 |
| 5 | 事件推送 | 宿主页面主动向 iframe 发送操作,例如触发保存 |
| 6 | 更新日志 | 判断版本变化是否影响配置项、事件解析或接入逻辑 |
入口决策
| 入口 | 配置方式 | 进入后由谁继续推进 | 典型后续 |
|---|---|---|---|
| 默认进入 | routerOptions.list、routerOptions.generate、routerOptions.editor | 用户在 iframe 页面内继续操作 | 作品列表、AI 任务生成页或指定作品编辑器 |
| UI 自定义创建 | options.custom_generate.type + content / File / referList | UI 版本根据初始化内容创建任务 | 进入编辑大纲;粘贴 Markdown 可按 step=2 直接进模板选择 |
| API 自定义创建 | options.custom_generate.taskId + step | API 已创建任务,UI 版本继续展示该任务 | step=1 编辑大纲,step=2 选择模板,step=3 直接合成 PPT |
主流程
| 阶段 | 关键动作 | 相关配置或事件 |
|---|---|---|
| 接入鉴权 | 服务端使用 AK/SK 获取 code,前端引入 aippt-iframe-sdk.js | UI 鉴权、UI 接入 |
| 初始化 iframe | 调用 AipptIframe.show,传入 appkey、code、channel、container 和 onMessage | UI 接入 |
| 初始化配置 | 按业务需要配置功能板块、下载模式、场景鉴权、自定义创建和默认路由 | UI 配置 |
| 页面入口 | 分为默认进入、UI 自定义创建、API 自定义创建三类入口 | routerOptions、custom_generate |
| 生成流程 | 用户选择标题、文件、Markdown、参考文档、单页等方式生成大纲和内容;大纲弹框中可编辑大纲、下一步和下载大纲 | fc_plate、custom_generate.type、OUTLINE_CONFIRM、OUTLINE_DOWNLOAD |
| 场景鉴权 | 开启 scene_auth 后,iframe 在指定场景发出 SCENE_AUTH,接入方调用 sceneAuthContinue 决定是否继续 | SCENE_AUTH、AipptIframe.sceneAuthContinue |
| 作品处理 | 选择模板并合成新作品,合成成功后可进入编辑器继续编辑;进入编辑器后的保存才触发 PPT_SAVE | OUTLINE_CONFIRM、GENERATE_PPT_SUCCESS、PPT_SAVE、PPT_DOWNLOAD |
| 宿主交互 | 接入方通过 onMessage 接收通知,通过 setMessage 主动触发保存等动作 | 事件通知、事件推送 |
