一款基于 Vue 3 + Vite 开发的现代化教师辅助工具，旨在提升备课与教学效率。
1. 功能颠覆
传统的 PPT 制作耗时耗力。本功能通过 AI 直接生成 PPT 的 JSON 结构化数据，然后利用前端库动态渲染成 PPTX 文件。
核心技术点：
- 结构化 Prompt (要求 AI 返回 JSON)
pptxgenjs(浏览器端生成 PPT)localforage(自动保存草稿)
2. 定义数据结构
不同于教案的纯文本，PPT 是高度结构化的。我们定义如下数据模型：
const pptData = {
title: "课程标题",
subtitle: "副标题/授课人",
slides: [
{
layout: "Title", // 封面页
title: "...",
subtitle: "...",
},
{
layout: "Content", // 内容页
title: "第一章：基础概念",
content: ["要点1", "要点2", "要点3"], // 数组形式方便渲染列表
note: "演讲者备注...",
},
],
};
3. 强制 AI 输出 JSON
为了让代码能解析 AI 的结果，必须在 Prompt 中通过 System Instruction 强制约束格式。
const pptPrompt = `你是一个 PPT 制作专家。请根据内容生成 PPT 大纲。
**必须严格只返回 JSON 格式，不要包含 Markdown 代码块标记。**
JSON 结构如下：
{ "title": "...", "slides": [ ... ] }`;
在接收到 AI 的响应后，我们需要进行清洗（去除可能的 ``json 前缀）并JSON.parse`。如果解析失败，提示用户重试。
4. 可视化编辑器开发 (PPTEditor.vue)
我们需要一个界面来展示和修改这组 JSON 数据。
- 左侧/顶部：全局设置（主题、标题）。
- 主体：幻灯片列表。使用
v-for循环pptData.slides。 - 编辑卡片：每个 Slide 是一个卡片，支持修改 Title 和 Content (使用
<textarea>编辑数组)。 - 操作：支持添加/删除页面，拖拽排序（进阶）。
5. 集成 PptxGenJS 导出
这是最神奇的一步。将内存中的 JSON 变为真正的 .pptx 文件。
import PptxGenJS from "pptxgenjs";
const exportPPT = () => {
const pres = new PptxGenJS();
// 遍历每一页
pptData.value.slides.forEach((slide) => {
const s = pres.addSlide();
// 根据 layout 不同进行不同渲染
if (slide.layout === "Title") {
s.addText(slide.title, {
x: 1, y: 3, fontSize: 32, align: "center" });
} else {
s.addText(slide.title, {
x: 0.5, y: 0.5, fontSize: 24, bold: true });
// 渲染列表内容
slide.content.forEach((line, idx) => {
s.addText(line, {
x: 1, y: 1.5 + idx * 0.5, bullet: true });
});
}
// 添加备注
if (slide.note) s.addNotes(slide.note);
});
pres.writeFile({
fileName: "Lesson.pptx" });
};
6. 数据持久化
用户往往不能一次做完。使用 localforage 监听 pptData 的变化并自动存入 IndexedDB。
watch(
pptData,
(newVal) => {
localforage.setItem("current_ppt", newVal);
},
{
deep: true },
);
在线体验
演示链接： https://www.ytecn.com/teacher/
git链接： https://github.com/tcshowhand/teacher/
总结
通过 "AI 生成结构 -> 人工微调 JSON -> 渲染引擎导出"，我们实现了一个高效的 PPT 生产流水线，极大释放了教师的生产力。
