一款基于 Vue 3 + Vite 开发的现代化教师辅助工具，旨在提升备课与教学效率。
1. 功能概述
教案生成是本平台的核心功能。用户输入课程主题，AI 自动流式输出完整的教学设计。
核心技术点：
- AI API 调用 (Fetch Stream)
- Markdown 渲染
- Word 文档导出 (
docxtemplater)
2. 封装 AI 接口 (Streaming)
为了获得流畅的打字机体验，我们需要使用流式 API。在 src/api/qwenAPI.js 中封装通用的发送方法。
关键点： 处理 ReadableStream。
export async function sendToQwenAIDialogue(messages, onData) {
// 省略 API Key 获取逻辑...
const response = await fetch(
"https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation",
{
method: "POST",
headers: {
Authorization: `Bearer ${
apiKey}`,
"Content-Type": "application/json",
"X-DashScope-SSE": "enable", // 开启流式 SSE
},
body: JSON.stringify({
model: "qwen-plus",
input: {
messages },
}),
},
);
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const {
done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
// 解析 SSE 格式数据 (data: ...) 并回调 onData(content)
// ... (解析逻辑需处理粘包和分包)
}
}
3. 设计 Prompt (提示词工程)
优秀的 AI 输出取决于优秀的 Prompt。我们需要让 AI 扮演“资深教研员”。
/* Prompt 结构 */
const systemPrompt = `你是一位经验丰富的中小学高级教师。
请根据用户提供的主题，生成一份详细的教案。
格式要求：
1. 教学目标
2. 教学重难点
3. 教学过程 (导入, 新授, 练习, 总结)
4. 板书设计
请使用 Markdown 格式输出。`;
4. 实现编辑器组件 (LessonPlanGenerator.vue)
界面分为两部分：左侧为输入区，右侧为预览/编辑区。
- 输入区：包含“课程名称”、“年级”、“课时”等表单。
- 生成逻辑：点击生成后，拼接系统提示词和用户输入，调用 API，并将返回的文本片段实时拼接到响应式变量
generatedContent中。
// 核心逻辑
const generatePlan = async () => {
isGenerating.value = true;
generatedContent.value = ""; // 清空
const userMessage = `课程：${
course.value}, 年级：${
grade.value}...`;
await sendToQwenAIDialogue(
[
{
role: "system", content: systemPrompt },
{
role: "user", content: userMessage },
],
(text, isComplete) => {
// 简单的追加逻辑，实际中可能需要处理全量替换或增量追加
generatedContent.value = text;
if (isComplete) isGenerating.value = false;
},
);
};
5. 实现 Word 导出
教案最终需要打印。使用 docxtemplater 和 pizzip 将内容导出。
由于 AI 生成的是 Markdown/HTML，我们需要先将其转换为纯文本或保留基础格式。简单起见，我们直接将编辑器中的文本内容写入 Word 模板。
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import {
saveAs } from "file-saver";
const exportWord = () => {
// 加载 public/template.docx
// 替换模板变量 {content} 为 generatedContent.value
// 生成 Blob 下载
};
在线体验
演示链接： https://www.ytecn.com/teacher/
git链接： https://github.com/tcshowhand/teacher/
总结
本篇教程展示了如何打通 "User Input -> AI Processing -> Streaming Output -> File Export" 的完整链路。这是 AI 应用最经典的工作流。
