AI 驱动的智能备课助手。一键生成标准教案、配套试题及PPT课件大纲。支持手写体试卷排版、自动出题、以及 Word/PDF/PPTX 多格式导出，让教师备课更高效、更轻松。
1. 从 Demo 到产品
前几篇教程实现了功能雏形，但要真正可用，还需进行细节打磨。本篇关注系统的完整性。
核心内容：
- AI 智能助手组件
- 用户配置中心
- 生产环境构建优化
2. 全局 AI 助手 (AIChatAssistant.vue)
用户在使用任何功能时（如编辑 PPT），可能随时需要 AI 帮助润色一句话或解释一个概念。
我们需要一个悬浮窗组件。
- 状态共享：使用
props传入当前的上下文（如当前选中的 PPT 页面内容），让 AI 知道用户正在做什么。 - UI 设计：类似客服窗口，折叠/展开动画。
- 功能：提供 "帮我润色"、"扩写这段话" 等快捷指令。
<!-- 悬浮球 -->
<div class="ai-fab" @click="isOpen = !isOpen">🤖</div>
<!-- 对话框 -->
<div class="ai-window" v-if="isOpen">
<div class="history">...消息列表...</div>
<div class="input-area">
<input v-model="input" @keyup.enter="send" />
</div>
</div>
3. 设置中心 (SettingsModal.vue)
我们不希望用户每次刷新都要重新输入 API Key。
结合 Tutorial 1 中的 Pinia Store，我们开发一个模态框组件，用于配置：
- DeepSeek / Qwen API Key
- 模型选择 (V3, R1, Plus)
- 导出偏好设置
4. 性能与存储优化
- 按需加载：路由组件使用
import()动态导入，减小首屏体积。 - 本地存储升级：使用
localforage替代localStorage。localStorage有 5MB 限制，存图片或大型 PPT JSON 容易溢出。IndexedDB 则大得多。
/* main.js 中的全局配置 */
import localforage from "localforage";
localforage.config({
name: "TeacherHelperApp",
});
5. 构建与部署
使用 Vite 进行生产构建。
npm run build
产出 dist 文件夹。
Nginx 部署注意：由于是 SPA 单页应用，必须配置 Nginx 将所有 404 请求重定向到 index.html，否则刷新子路由（如 /ppt）会报错。
location / {
try_files $uri $uri/ /index.html;
}
在线体验
演示链接： https://www.ytecn.com/teacher/
git链接： https://github.com/tcshowhand/teacher/
结语
通过这五篇实战教程，我们从零开始，利用 Vue 3 全家桶和 AI 能力，构建了一个功能完备的教师辅助平台。它不仅是一个 CRUD 应用，更深度融合了生成式 AI，代表了新一代应用开发的趋势。希望这套教程能为你带来启发！
