教育管理系统教学动画用Codex自动生成项目代码
维护教学动画记录、学科教材信息、HTML 动画代码、讲解文案、预览地址和音频导出任务。 它在教育管理系统中承接教学资源生产、教案组织和课堂内容交付，不能只按后台表格维护来理解。
本文基于 server_backend/modules/TeachingCenter/models.py、server_backend/modules/TeachingCenter/views_app/TeachingAnimation.py、server_backend/modules/TeachingCenter/utils.py 与 server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/index.vue、api.ts、crud.tsx、Details/index.vue、Details/EditCodeDialog.vue 的真实代码，说明如何把教学动画需求拆成字段、接口、页面、扩展能力和验收标准，再转换成 Codex 可执行的项目代码生成任务。
文章目录
设计与需求
教学动画需要放回教学中心业务场景中设计。源码中的 TeachingAnimation 既承载基础字段，也会被下游页面、资源预览、任务处理或统计接口复用。交给 Codex 的任务必须写清楚页面结构、数据模型、接口规则和权限验收，避免生成一个字段堆叠的普通 CRUD 页面。
教学业务需求
教学动画设计
页面结构
数据模型
接口规则
权限验收
Codex生成代码
教学模块交付
| 需求层描述 | 设计层转换 | Codex 代码生成方向 |
|---|---|---|
| 业务目标 | 维护教学动画记录、学科教材信息、HTML 动画代码、讲解文案、预览地址和音频导出任务。 | 生成模块入口、页面结构和业务说明 |
| 数据模型 | TeachingAnimation 字段覆盖 status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio |
生成序列化、字段校验、查询筛选和保存回显 |
| 页面结构 | server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/index.vue、api.ts、crud.tsx、Details/index.vue、Details/EditCodeDialog.vue | 生成列表、筛选区、表单、详情或自定义组件 |
| 接口规则 | /api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio | 保持 api.ts、ViewSet 和路由注册一致 |
| 权限验收 | 按教师、管理员和资源处理场景约束按钮与接口 | 在 PDD 中列出操作范围和异常用例 |
| 扩展能力 | 数据联动、LLM 内容生成、资源预览、文件管理 | 只实现源码中真实存在的扩展入口和服务边界 |
可以直接使用下面的Prompt进行模块功能的设计
text
请 Codex 基于教育管理系统真实源码设计"教学动画"模块。
业务说明：维护教学动画记录、学科教材信息、HTML 动画代码、讲解文案、预览地址和音频导出任务。
后端源码：server_backend/modules/TeachingCenter/models.py、server_backend/modules/TeachingCenter/views_app/TeachingAnimation.py、server_backend/modules/TeachingCenter/utils.py
前端源码：server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/index.vue、api.ts、crud.tsx、Details/index.vue、Details/EditCodeDialog.vue
模型对象：TeachingAnimation
字段范围：status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio
接口范围：/api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio
扩展能力边界：数据联动、LLM 内容生成、资源预览、文件管理
请输出页面结构、数据模型、接口规则、权限验收、测试用例和代码生成任务。只允许使用源码中存在的字段、接口和页面状态。后端设计
教学动画的后端设计重点不是堆 CRUD 接口，而是让教学数据能被页面、资源处理、任务队列和后续模块稳定复用。后端包含 TeachingAnimationPromptBuilderFactory、TeachingAnimationSerializer 和多个预览/提取/导出 action。generate_prompt 只构建 Prompt，get_preview_url 生成签名预览链接，render_preview 输出可嵌入 HTML。
| 后端设计项 | 设计重点 | Codex 生成方向 |
|---|---|---|
| 数据模型 | TeachingAnimation 字段覆盖 status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio |
生成序列化、字段映射和保存校验 |
| 查询筛选 | 按后端 filterset_class、SearchFilter 和前端查询项对齐 |
生成筛选参数和列表接口 |
| 自定义接口 | /api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio | 生成 action、参数校验和返回结构 |
| 权限控制 | 按当前项目权限体系约束新增、编辑、删除和处理动作 | 生成前后端一致的权限点 |
| 异常处理 | 参数缺失、记录不存在、资源缺失、任务失败要返回明确消息 | 生成可验收错误响应 |
可以直接使用下面的Prompt进行后端代码的设计
text
请为教育管理系统教学中心的教学动画模块设计或补齐后端代码。
后端源码范围：server_backend/modules/TeachingCenter/models.py、server_backend/modules/TeachingCenter/views_app/TeachingAnimation.py、server_backend/modules/TeachingCenter/utils.py
模型对象：TeachingAnimation
字段范围：status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio
接口范围：/api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio
请按当前项目技术栈生成模型字段、序列化规则、接口视图、路由注册、筛选查询、权限控制和基础校验。自定义 action 只能来自源码或 PDD 明确说明，不能额外增加不存在的业务入口。
后端包含 `TeachingAnimationPromptBuilderFactory`、`TeachingAnimationSerializer` 和多个预览/提取/导出 action。`generate_prompt` 只构建 Prompt，`get_preview_url` 生成签名预览链接，`render_preview` 输出可嵌入 HTML。前端设计
教学动画的前端设计重点不是把字段堆到表格里，而是让教师或管理员能完成教学资源维护、生成结果检查、资源导出和状态回显。前端需要处理下拉选项、Prompt 生成、HTML 代码编辑、预览弹窗、内容提取、讲解提取和音频导出。
| 前端设计项 | 设计重点 | Codex 生成方向 |
|---|---|---|
| 页面结构 | server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/index.vue、api.ts、crud.tsx、Details/index.vue、Details/EditCodeDialog.vue | 生成 index.vue、api.ts、crud.tsx 与必要组件 |
| 接口封装 | /api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio | 统一封装列表、详情、保存、删除和自定义 action |
| 表单结构 | 按 status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio 组织新增、编辑和回显字段 | 生成字段组件、校验规则和保存载荷 |
| 列表查询 | 与后端筛选字段对齐 | 生成查询项、分页、刷新和重置逻辑 |
| 资源交互 | 只接入源码中已有的预览、导出、生成或任务入口 | 生成按钮、弹窗、轮询和错误提示 |
可以直接使用下面的Prompt进行前端代码的设计
text
请为教育管理系统教学中心的教学动画模块设计或补齐前端代码。
前端源码范围：server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/index.vue、api.ts、crud.tsx、Details/index.vue、Details/EditCodeDialog.vue
接口范围：/api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio
字段范围：status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio
扩展能力边界：数据联动、LLM 内容生成、资源预览、文件管理
请生成页面结构、列表查询、筛选区域、新增编辑表单、详情预览、权限按钮、保存回显和接口调用。字段、接口、按钮显示必须与后端真实代码一致。
前端需要处理下拉选项、Prompt 生成、HTML 代码编辑、预览弹窗、内容提取、讲解提取和音频导出。扩展功能
教学动画 的扩展能力来自教学中心真实代码，主要围绕教学资源生成、资源预览、任务处理或统计分析展开。这些能力直接影响课程内容能否被教师检查、复用和交付。
| 扩展功能 | 主要用途 | 落地重点 |
|---|---|---|
| 数据联动 | 让学科、教材、知识点、难度、核心素养和标题回显一致 | 下拉接口、label 映射、display_title、保存回显 |
| LLM 内容生成 | 根据动画记录字段构建 html_code 与 html_explain 的 Prompt | generate_prompt、target_field、payload、人工复制或回填 |
| 资源预览 | 通过签名 URL 预览已保存的 HTML 动画 | get_preview_url、render_preview、token 过期、iframe 嵌入 |
| 文件管理 | 将动画音频导出为下载中心任务 | audio 路径、文件存在校验、create_download_center_task |
数据联动
教学动画 的数据联动来自当前源码中的真实字段、接口或前端交互，主要用于让学科、教材、知识点、难度、核心素养和标题回显一致。落地重点是下拉接口、label 映射、display_title、保存回显，不能把没有代码支撑的功能写成独立能力。
结果阶段
处理阶段
输入阶段
业务参数
页面操作
组装请求
调用接口
转换结果
内容回显
列表刷新
交给 Codex 生成时，要把请求参数、返回结构、状态提示和保存边界写清楚。涉及生成、识别、预览或导出时，结果应先回填页面或进入下载中心，由人工确认后再进入正式数据。
可以直接使用下面的Prompt进行数据联动设计
text
请为教育管理系统的教学动画模块实现数据联动。
能力用途：让学科、教材、知识点、难度、核心素养和标题回显一致。
落地重点：下拉接口、label 映射、`display_title`、保存回显。
请实现学科、教材、知识点、难度和核心素养下拉联动，保存时处理 difficulty_label 与 important_quality_label。
请读取当前后端 ViewSet、工具类、任务文件、前端 api.ts、crud.tsx、index.vue 和组件目录，按真实字段与接口补齐代码。不要新增源码中不存在的能力。LLM 内容生成
教学动画 的LLM 内容生成来自当前源码中的真实字段、接口或前端交互，主要用于根据动画记录字段构建 html_code 与 html_explain 的 Prompt。落地重点是generate_prompt、target_field、payload、人工复制或回填，不能把没有代码支撑的功能写成独立能力。
结果阶段
处理阶段
输入阶段
业务参数
页面操作
组装请求
调用接口
转换结果
内容回显
列表刷新
交给 Codex 生成时，要把请求参数、返回结构、状态提示和保存边界写清楚。涉及生成、识别、预览或导出时，结果应先回填页面或进入下载中心，由人工确认后再进入正式数据。
可以直接使用下面的Prompt进行LLM功能设计
text
请为教育管理系统的教学动画模块实现LLM 内容生成。
能力用途：根据动画记录字段构建 html_code 与 html_explain 的 Prompt。
落地重点：generate_prompt、target_field、payload、人工复制或回填。
该接口只生成 Prompt，不直接入库。前端应展示 Prompt 与 payload，生成结果需要人工确认后再保存到 html_code 或 html_explain。
请读取当前后端 ViewSet、工具类、任务文件、前端 api.ts、crud.tsx、index.vue 和组件目录，按真实字段与接口补齐代码。不要新增源码中不存在的能力。资源预览
教学动画 的资源预览来自当前源码中的真实字段、接口或前端交互，主要用于通过签名 URL 预览已保存的 HTML 动画。落地重点是get_preview_url、render_preview、token 过期、iframe 嵌入，不能把没有代码支撑的功能写成独立能力。
结果阶段
处理阶段
输入阶段
业务参数
页面操作
组装请求
调用接口
转换结果
内容回显
列表刷新
交给 Codex 生成时，要把请求参数、返回结构、状态提示和保存边界写清楚。涉及生成、识别、预览或导出时，结果应先回填页面或进入下载中心，由人工确认后再进入正式数据。
可以直接使用下面的Prompt进行资源预览功能设计
text
请为教育管理系统的教学动画模块实现资源预览。
能力用途：通过签名 URL 预览已保存的 HTML 动画。
落地重点：get_preview_url、render_preview、token 过期、iframe 嵌入。
请实现预览 URL 获取、过期提示、空 html_code 兜底和 iframe 预览。
请读取当前后端 ViewSet、工具类、任务文件、前端 api.ts、crud.tsx、index.vue 和组件目录，按真实字段与接口补齐代码。不要新增源码中不存在的能力。文件管理
教学动画 的文件管理来自当前源码中的真实字段、接口或前端交互，主要用于将动画音频导出为下载中心任务。落地重点是audio 路径、文件存在校验、create_download_center_task，不能把没有代码支撑的功能写成独立能力。
结果阶段
处理阶段
输入阶段
业务参数
页面操作
组装请求
调用接口
转换结果
内容回显
列表刷新
交给 Codex 生成时，要把请求参数、返回结构、状态提示和保存边界写清楚。涉及生成、识别、预览或导出时，结果应先回填页面或进入下载中心，由人工确认后再进入正式数据。
可以直接使用下面的Prompt进行文件管理功能设计
text
请为教育管理系统的教学动画模块实现文件管理。
能力用途：将动画音频导出为下载中心任务。
落地重点：audio 路径、文件存在校验、create_download_center_task。
请实现 export_audio 前后端交互，返回 download_center_id 并提示用户前往下载中心。
请读取当前后端 ViewSet、工具类、任务文件、前端 api.ts、crud.tsx、index.vue 和组件目录，按真实字段与接口补齐代码。不要新增源码中不存在的能力。Codex开发标准
使用 Codex 开发教学动画时，需要用需求边界、PDD、SOP、接口权限规则和验收标准约束开发过程。教学中心模块通常会跨模型、任务、下载中心和前端组件，必须先读上下文，再分阶段生成代码。
验收交付
Codex开发
模块设计
输入约束
需求边界
PDD设计
SOP目录规范
接口与权限规则
后端设计
前端设计
能力边界
读取上下文
生成后端代码
生成前端代码
补齐扩展能力
功能自检
PDD验收
问题修复
模块交付
SOP 标准
SOP 用于约束代码目录、文件职责和开发顺序。教学动画需要沿用 modules/TeachingCenter 和 server_vue3/src/views/modules/TeachingCenter 目录。
text
ManageBak-ExamEdu/
├── server_backend/
│ └── modules/
│ └── TeachingCenter/
│ ├── models.py
│ ├── urls.py
│ ├── utils.py
│ ├── tasks.py
│ └── views_app/
│ └── TeachingAnimation.py
├── server_vue3/
│ └── src/
│ └── views/
│ └── modules/
│ └── TeachingCenter/
│ └── TeachingAnimation/
│ ├── index.vue
│ ├── api.ts
│ ├── crud.tsx
│ └── components/
└── docs/
└── modules/
└── teaching-TeachingAnimation/
├── pdd.md
├── api.md
├── test-cases.md
└── codex-sop.md| 开发阶段 | Codex 执行目标 | 输出结果 |
|---|---|---|
| 模块设计 | 明确教学动画的业务目标、字段、接口和权限范围 | pdd.md |
| 目录规划 | 按 TeachingCenter 后端和前端目录规划文件职责 | codex-sop.md |
| 后端实现 | 补齐 ViewSet、序列化、筛选、自定义 action 和路由 | 后端模块代码 |
| 前端实现 | 补齐页面、接口封装、表格配置、表单和组件 | 前端页面代码 |
| 数据联动 | 打通筛选、保存、详情、预览和刷新 | 联动逻辑代码 |
| 扩展功能 | 补齐数据联动、LLM 内容生成、资源预览、文件管理 | 扩展能力代码与验收记录 |
| 验收修复 | 按 PDD 检查功能、接口、权限和数据回显 | 验收记录与修复提交 |
可以直接使用下面的Prompt进行SOP撰写
text
请按照教育管理系统模块开发 SOP，从零实现或补齐教学中心的教学动画模块。
开发前先输出目录结构，不要直接写代码。目录需要贴合当前项目：后端在 server_backend/modules/TeachingCenter/，前端在 server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/，文档在 docs/modules/teaching-TeachingAnimation/。
请先生成 pdd.md、api.md、test-cases.md 和 codex-sop.md，再根据文档生成项目代码。实现过程中只允许使用源码中真实存在的能力：数据联动、LLM 内容生成、资源预览、文件管理。PDD 标准
PDD 是教学动画的设计与验收文档，用来约束 Codex 输出是否符合真实教学业务。
| 验收维度 | 验收标准 | 不通过表现 |
|---|---|---|
| 业务目标 | 维护教学动画记录、学科教材信息、HTML 动画代码、讲解文案、预览地址和音频导出任务。 | 只生成普通 CRUD，缺少教学业务字段 |
| 页面结构 | 页面包含列表、筛选、表单、详情和必要资源操作 | 页面路径或按钮与源码不一致 |
| 数据模型 | TeachingAnimation 字段覆盖 status、plan_code、subject、title、question_tag、text_book、difficulty、important_quality、content、additional、html_src、html_code、html_explain、audio |
保存或回显字段缺失 |
| 接口规则 | /api/TeachingCenter/TeachingAnimation/、generate_prompt、get_preview_url、render_preview、update_html_code_from_content、update_html_explain_from_content、update_html_code、get_audio_path、export_audio 可被前端正确调用 | 前端封装与后端路由不一致 |
| 权限控制 | 操作按钮和后端接口遵守当前项目权限体系 | 只隐藏按钮，接口层无约束 |
| 测试用例 | 覆盖查询、新增、编辑、删除、详情和异常处理 | 只有描述，没有验收路径 |
| 数据联动 | 让学科、教材、知识点、难度、核心素养和标题回显一致，并能按源码字段和接口验收 | 页面入口、接口或回显不一致 |
| LLM 内容生成 | 根据动画记录字段构建 html_code 与 html_explain 的 Prompt，并能按源码字段和接口验收 | 页面入口、接口或回显不一致 |
| 资源预览 | 通过签名 URL 预览已保存的 HTML 动画，并能按源码字段和接口验收 | 页面入口、接口或回显不一致 |
| 文件管理 | 将动画音频导出为下载中心任务，并能按源码字段和接口验收 | 页面入口、接口或回显不一致 |
可以直接使用下面的Prompt进行PDD 验收
text
请根据 docs/modules/teaching-TeachingAnimation/pdd.md 对教学中心的教学动画模块进行 PDD 验收。
验收范围包括后端源码 server_backend/modules/TeachingCenter/models.py、server_backend/modules/TeachingCenter/views_app/TeachingAnimation.py、server_backend/modules/TeachingCenter/utils.py，前端源码 server_vue3/src/views/modules/TeachingCenter/TeachingAnimation/index.vue、api.ts、crud.tsx、Details/index.vue、Details/EditCodeDialog.vue。
请检查业务目标、页面结构、数据模型、接口规则、权限控制、测试用例和扩展能力。扩展能力范围限定为：数据联动、LLM 内容生成、资源预览、文件管理。
请输出验收结果表，标记通过、未通过和需要修复的文件位置。不要只给结论，需要指出具体问题、影响范围和修复建议。总结
教学动画模块的开发价值，不在于生成一张能增删改查的后台页面，而在于把教学内容、资源生成、预览检查和交付结果组织成可维护的业务闭环。字段、接口、页面和任务状态保持一致，教学中心后续扩展才不会被数据结构拖住。
使用 Codex 开发这类模块时，PDD 定义业务边界和验收标准，SOP 约束目录结构和开发顺序，Prompt 把页面、模型、接口、权限和真实扩展能力交给 Codex 分阶段实现。