企业官网建设流程全解析

• 前端
• 企业应用

导读

本文以 PPTist（PowerPoint-ist，在线演示文稿应用）中的「模板式 AIPPT」能力为主线，完整讲解其六大基本原理、AI 结构化数据的字段含义、AIPPT 模板的制作流程、页面标记与节点标记的类型体系，以及模板与 AI 数据之间的匹配替换逻辑。读完本文，你将掌握如何亲手在 PPTist 中制作一套可被 AI 复用的 AIPPT 模板（含封面、目录、过渡、内容、结束五类页面），理解模板页数下限与随机性的关系，并能够读懂 useAIPPT.ts 中模板挑选、文字替换、字号自适应、图片池匹配等核心实现。

一、模板式 AIPPT 的基本原理

PPTist 的 AIPPT 属于「模板式 AIPPT」：AI 并不直接绘制最终成品，而是先产出符合既定结构的结构化数据，再由前端把数据与人工制作好的模板做匹配结合，生成最终 PPT。整套流程可以拆解为以下 6 步：

1. 定义 PPT 结构：约定一套 PPT 中包含哪些类型的页面，每种页面含哪些内容（例如封面页有标题与正文，内容页有若干内容项）；
2. 定义数据格式：基于上述结构，定义用于 AI 生成的结构化数据格式，该格式的具体定义见 示例数据 public/mocks/AIPPT.json 与 结构定义 src/types/AIPPT.ts；
3. 制作模板：在 PPTist 中制作模板页面，并在模板上标记好结构类型（页面类型 + 节点类型）；
4. AI 生成结构化数据：AI 依据第 1 步定义的 PPT 结构，输出符合格式的数据；
5. 生成配图：利用 AI 文生图、图库搜索匹配等方案，为页面生成相关配图（该能力由调用方自行接入图片源实现）；
6. 匹配结合：将 AI 生成的数据、配图与模板进行匹配结合，生成最终 PPT。

注 1：虽然当前线上版本不提供配图演示效果，但 AIPPT 方法是支持此功能的——你只需要自己提供图片源，按照要求的格式将待选图片集合传入 AIPPT 方法即可（对应useAIPPT.ts中presetImgPool(imgs)与AIPPT(templateSlides, AISlides, imgs)的可选第三参数）。

注 2：以上仅适用于模板式 AIPPT；非模板式 AIPPT 可以直接生成最终目标格式，相关数据规范见 doc/AI_PPT_SCHEMA.md。

二、AI 生成的结构化数据格式

模板式 AIPPT 的输入数据是一条条「AI 幻灯片」（AIPPTSlide），其类型定义位于 src/types/AIPPT.ts：

其中offset字段用于标识「当前这条数据是某一页被拆分后的第几段」，配合模板替换逻辑实现项目编号的连续递增（下文第五节详述）。

仓库中的 public/mocks/AIPPT.json 是一份完整的模拟 AI 输出示例，节选片段如下：

[ { "type": "cover", "data": { "title": "犯罪心理学研究", "text": "探索犯罪心理的成因、特征及干预策略，助力犯罪预防与矫治。" } }, { "type": "contents", "data": { "items": [ "犯罪心理学概述", "犯罪心理的形成", "犯罪类型与心理特征", "犯罪心理评估与干预", "犯罪心理学的应用", "未来发展趋势" ] } }, { "type": "transition", "data": { "title": "犯罪心理学概述", "text": "本章将介绍犯罪心理学的定义、历史、基本理论及其研究领域。" } }, { "type": "content", "data": { "title": "定义与历史", "items": [ { "title": "犯罪心理学的定义", "text": "犯罪心理学是研究犯罪行为及其心理机制的学科……" }, { "title": "犯罪心理学的发展历史", "text": "犯罪心理学起源于19世纪末……" } ] } }, { "type": "end" } ]

实际联调时，AI 输出的并不是一个完整的 JSON 文件，而是逐条流式返回。在 AIPPTDialog.vue 中，前端读取流式响应后按行拆分，通过jsonrepair修复破损 JSON 后逐条解析为AIPPTSlide，并立即调用一次AIPPT(templateSlides, [slide])完成单页的实时渲染，实现"生成一页、渲染一页"的流式体验：

const processChunk = (chunk: string) => { try { const text = chunk.replace('```jsonl', '').replace('```json', '').replace('```', '').trim() if (text) { const slide: AIPPTSlide = JSON.parse(jsonrepair(text)) AIPPT(templateSlides, [slide]) } } catch (err) { console.error(err) } }

三、AIPPT 模板制作流程

AIPPT 模板的制作完全复用 PPTist 的普通编辑能力，流程共 5 步：

1. 打开 PPTist，新建或打开一个演示文稿；
2. 制作模板页面：用常规的文本、形状、图片、线条等元素排版出页面（建议把装饰类元素锁定，防止替换时误操作）；
3. 打开左上角菜单中的[幻灯片类型标注]功能（对应 MarkupPanel.vue，通过 EditorHeader/index.vue 中的setMarkupPanelState(true)唤起）；
4. 为制作好的页面标注页面类型，并选中具体元素标注节点类型；
5. 使用导出功能导出为 JSON 文件，得到可被 AIPPT 调用的模板。

注意：实际上并不存在专门提供给 AIPPT 的模板。所谓的 AIPPT 模板，只是把在 PPTist 中制作的普通页面标注上类型标记而已。这些数据不仅用于 AI 生成 PPT，也可以作为普通的页面模板使用。从 public/mocks/template_1.json 可以看到，模板文件结构就是普通演示文稿的slides数组，每个 slide 携带一个type字段（如"type":"cover"、"type":"contents"），元素上携带textType（文本元素）、text.type（形状内文本）、imageType（图片元素）等节点标记。

导出后的 JSON 模板还可以在 AIPPT 生成对话框中作为本地模板使用（见AIPPTDialog.vue的uploadLocalTemplate()，支持上传.pptist格式文件，读取后经decrypt解密得到{ slides, theme }再触发生成）。

四、模板标记类型：页面标记与节点标记

4.1 页面标记（5 类）

标注面板（MarkupPanel.vue）中的「当前页面类型」下拉框提供了如下选项，对应 src/types/slides.ts 中的SlideType：

页面标记记录在 slide 的type字段上，通过slidesStore.updateSlide({ type })/removeSlideProps写入或移除。

4.2 节点标记（文本标记与图片标记）

节点标记分为两种——文本标记和图片标记：

• 文本标记可作用于文本节点（text元素）和带文字的形状节点（shape元素内嵌text）；标注面板中，当选中元素是文本或带文字的形状时，会展示「当前文本类型」下拉框；
• 图片标记只作用于图片节点（image元素）；选中图片时展示「当前图片类型」下拉框；
• 你可以自行添加更多类型的标记（如图表）。

文本标记的完整取值（TextType，见 src/types/slides.ts）：

图片标记的完整取值（ImageType，见 src/types/slides.ts）：

在 useAIPPT.ts 中，checkTextType(el, type)同时兼容两种承载方式：el.type === 'text' && el.textType === type，或el.type === 'shape' && el.text && el.text.type === type。

五、AIPPT 模板制作原则

一个用于 AIPPT 的模板至少需要包含以下页面（至少 13 页，建议 30 页以上）：

需要注意的 3 点：

1. 以上页数仅满足当前替换逻辑的最基本要求。如果希望 AI 生成的 PPT 具有一定的随机性，需要适当增加每种页面的数量。例如，假设模板中存在 3 个封面页，生成时会从 3 个中随机选择 1 个使用（源码中对应coverTemplates[Math.floor(Math.random() * coverTemplates.length)]）。
2. 当前替换逻辑下，目录页可支持 1～20 个目录项，内容页可支持 1～12 个内容项，但不需要每种数量的模板都做一遍，因为程序会自动通过模板的拼接/裁减方式来实现特殊的项目数。
3. 你可以自行调整替换逻辑，以支持更多情况。

5.1 项目数超出模板时的自动拼接

当 AI 输出的目录项/内容项数量超过模板中标记元素的数量时，useAIPPT.ts会在渲染前先对 AI 数据做拆分，用同一个模板连续渲染多页，实现"一页放不下就多页拼接"：

• content页数据拆分规则：items 数量为 5～6 时拆为3 + 剩余；7～8 时拆为4 + 4；9～10 时拆为3 + 3 + 3；大于 10 时拆为4 + 4 + 剩余；1～4 直接使用；
• contents页数据拆分规则：items 数量为 11 时拆为6 + 5；大于 11 时拆为10 + 剩余（首页最多渲染 10 项）；10 及以下直接使用。

拆分时会给后续段设置offset（如offset: 3），渲染「项目编号」节点时通过index + offset + 1保证编号连续递增。

5.2 模板不足时的最接近匹配

getUseableTemplates(templates, n, type)负责在同类模板中挑选可用的那个：

• 当n === 1（只需 1 个内容项）时，优先筛选出「恰好没有 item 标记、恰好 1 个 title、恰好 1 个 content」的模板，即单栏排版页；
• 一般情况先在标记数量>= n的模板中挑选「标记数量最接近 n」的那一批（len - n最小者）；
• 若所有模板的标记数量都小于 n，则退而选择标记数量最多的模板。

选好目标数量后，返回所有标记数量与目标相等的模板，再由调用方随机取一，保证多样性的同时尽量复用同一版式。

5.3 文本替换与字号自适应

getNewTextElement({ el, text, maxLine, longestText, digitPadding })是文本替换的核心：它保留模板节点原有的样式（字体、颜色、对齐等），仅替换第一个文本节点内容，并删除其余冗余文本节点。为保证替换后不溢出，内部通过getAdaptedFontsize用 CanvasmeasureText测量文本宽度，在字号不低于 10px 的前提下逐级减小字号（≤22px 时步长 1，否则步长 2），直到行数不超过maxLine或总高度适配文本框；digitPadding用于项目编号补零（如01）。

六、模板与 AI 数据的匹配替换逻辑（源码级）

useAIPPT.ts中导出的核心方法为AIPPT(templateSlides, _AISlides, imgs?)，它按AISlides中每条数据的类型，分别走不同的替换分支：

• cover：从coverTemplates中随机取一个，替换title（maxLine 1）与content（maxLine 3）标记的节点；
• contents：用getUseableTemplates挑目录模板，按编号（itemNumber）与列表项（item）的groupId分组对齐——先按编号文本或left + top * 2排序确定填充顺序，再替换对应项文本；未被使用的项连同其groupId一并过滤掉（避免空位残留）；itemNumber用index + offset + 1重写编号；
• transition：过渡页模板在首次使用时随机选定后全局复用（transitionTemplate缓存，保证所有过渡页风格一致），transitionIndex递增并写入partNumber节点；
• content：itemTitle、item、itemNumber按left + top * 2的"从上到下、从左到右"顺序排序后依次填充；当只有 1 个内容项时，直接写入content标记节点（maxLine 6）作整页正文；
• end：从endTemplates随机取一个，仅处理图片替换，不替换文字。

所有分支对图片节点的处理一致：若元素带imageType且图片池imgPool非空，则调用getNewImgElement(el)——按模板图片宽高比从图片池中挑选比例相近的图（getUseableImage优先匹配宽高关系），再计算等比缩放与居中裁剪区间clip.range，最终返回新src与clip的图片元素。这印证了注 1：只要调用方提供图片源（如public/mocks/imgs.json中的{ id, src, width, height }列表），模板式 AIPPT 即自动具备配图能力。

生成结束后，若当前画布为空则setSlides(slides)整体替换，否则addSlidesFromData(slides)追加到已有文稿之后。

七、在 PPTist 中使用 AIPPT 生成演示文稿

从 AIPPTDialog.vue 可以看到完整的交互流程，共三步：

1. 输入主题（setup 步）：输入 PPT 主题关键词（最长 50 字，支持回车提交与推荐主题一键填充），并可配置以下参数：
   • 语言：中文 / English / 日本語；
   • 风格：通用 / 学术风 / 职场风 / 教育风 / 营销风；
   • 模型：GLM-4.7-Flash、Doubao-Seed-1.6-Flash、DeepSeek-v4-Flash 等（以 AIPPTDialog.vue 中下拉选项为准）；
   • 配图：无 / 模拟测试（test，此时会加载public/mocks/imgs.json作为图片池）/ AI 搜图、AI 生图（当前版本置灰不可选）；
   • 覆盖已有幻灯片：勾选后生成前先清空当前画布。 点击「AI 生成」调用api.AIPPT_Outline（请求/tools/aippt_outline，stream 模式），流式读取大纲内容，结束后用getMdContent提取```markdown ```代码块并去除 HTML 注释，得到可编辑大纲。
2. 确认大纲（outline 步）：在 OutlineEditor.vue 中编辑大纲内容（可右键添加/删除大纲项），确认后进入模板选择。
3. 选择模板并生成（template 步）：从预置模板列表（如template_1～template_8，封面缩略图位于 public/imgs）中选择，或上传本地.pptist模板；随后调用api.AIPPT（请求/tools/aippt，stream 模式），流式解析逐条生成幻灯片，完成后套用模板自带主题theme。

若服务端返回state === -1，界面会提示「该模型 API 的并发数过高，请更换其他模型重试」，说明生成服务对模型并发有一定限制。

八、模板落地与扩展建议

• 模板即普通演示文稿：AIPPT 模板没有任何专属文件格式，就是把普通页面标上type/textType/imageType后导出的 JSON（或.pptist）。你完全可以在 PPTist 中继续用常规方式二次编辑、复用模板页面；
• 数量与随机性权衡：想让 AI 每次生成的成品"看起来不一样"，最直接的办法是增加每种页面的模板数量（尤其是封面、过渡、结束页），替换逻辑会在同类模板中随机选取；
• 自定义扩展：useAIPPT.ts中的拆分阈值（如 5/6/7/8/9/10/11）、getUseableTemplates的匹配策略、getAdaptedFontsize的字号下限（minFontSize = 10）与步长，均为纯前端逻辑，可按需调整以支持更多项目数或更激进的排版策略；也可仿照TextType增加新的标记类型（如图表标记），并在替换分支中补充对应处理。

相关文档与源码索引

• doc/AIPPT.md：模板式 AIPPT 官方说明（本文主体来源）
• doc/AI_PPT_SCHEMA.md：AI 生成数据的目标格式规范（非模板式 AIPPT）
• src/types/AIPPT.ts：AIPPTSlide数据结构定义
• public/mocks/AIPPT.json：完整的 AI 结构化数据示例
• src/hooks/useAIPPT.ts：模板匹配、文本替换、字号自适应、图片池替换实现
• src/views/Editor/MarkupPanel.vue：幻灯片类型标注面板（页面类型 + 节点类型）
• src/views/Editor/AIPPTDialog.vue：AIPPT 生成对话框（主题 → 大纲 → 模板 → 流式生成）
• public/mocks/template_1.json：带类型标记的模板数据实例
• src/types/slides.ts：SlideType、TextType、ImageType等类型定义
• src/services/index.ts：AIPPT 相关接口（/tools/aippt_outline、/tools/aippt）

• 前端
• 企业应用