【Codex】我的工作教学统计数据可视化

教学统计把教案主体、整合教案和教学动画放到同一张教学资源看板里，用来查看教材分类、年级、学科和字段完成度。它服务的是教学资源覆盖检查，而不是单个教案的编辑流程。

本文按照 Demo 的结构，基于 SiteStatsViewSet 的教学分区接口和 TeachingCenterStats/index.vue 页面，说明如何把教学中心统计需求转换成 Codex 可执行的代码生成任务。

文章目录

• 设计与需求
• • 后端设计
  • 前端设计
• 扩展功能
• • 数据统计
  • 数据联动
  • 统计缓存与菜单入口
• Codex开发标准
• • [SOP 标准](#SOP 标准)
  • [PDD 标准](#PDD 标准)
• 总结

设计与需求

教学统计复用 SiteStatsViewSet.build_application_section_data("teaching")。后端在 _teaching_center_detail 中返回教案主体、整合教案、教学动画三组 detail，前端按教材分类、教案类型和年级学科矩阵展示。
验收阶段
展示阶段
设计阶段
输入阶段
业务数据
统计口径
菜单入口
后端聚合
接口返回
前端看板
指标卡
矩阵树图
明细表格
数据一致
布局稳定
权限可见

这张图表达的是统计类模块从业务数据到页面展示的转换关系。Codex 处理这类需求时，不能只生成一个空页面或普通 CRUD，需要把统计口径、接口返回结构、前端矩阵展示和菜单权限一起纳入设计。

需求层描述	设计层转换	Codex 代码生成方向
教学资源需要看覆盖	将教案主体、整合教案、教学动画作为三个统计对象	生成教学统计 Hero、模块 Header 和分区矩阵
教案主体需要看年级学科	按 TextBookCategory、年级、学科聚合 LessonPlanMaster	生成教材分类 Tab、学科结构树图和年级学科矩阵
整合教案需要看字段完成	按教材分类和教案类型统计 LessonPlan 完成率	生成教案类型 Tab、字段覆盖矩阵和完成率
教学动画需要看生成情况	按教材分类、年级、学科统计 TeachingAnimation 的代码和字段覆盖	生成动画完成率、字段覆盖树图和年级学科矩阵
页面需要进入数据统计入口	菜单同步脚本写入 /system/MyWork/TeachingCenterStats	生成组件路由、缓存配置和角色权限

教学统计的真实统计对象来自教学中心三个模型，页面重点是资源覆盖和完成度。

统计对象	代码口径	页面呈现
教案主体	LessonPlanMaster.objects.all()，按教材分类、年级、学科构建矩阵	教材分类 Tab、学科结构占比、年级学科数量矩阵
整合教案	LessonPlan.objects.filter(level="1")，按教材分类和教案类型统计完成度	分类完成率、类型 Tab、字段覆盖占比、完成矩阵
教学动画	TeachingAnimation.objects.all()，按教材分类、年级、学科和字段覆盖统计	动画生成率、字段覆盖树图、年级学科完成矩阵

可以直接使用下面的Prompt进行模块功能的设计

请基于 ManageBak-ExamEdu 项目设计并实现【教学统计】统计模块。

模块前端入口为：server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue
后端接口入口为：server_backend/modules/MyWork/views_app/SiteStats.py
接口地址为：/api/MyWork/SiteStats/teaching_stats/
菜单路径为：/system/MyWork/TeachingCenterStats

请先读取上述前端页面、后端 ViewSet、路由注册、统计缓存工具、共享样式文件和菜单同步脚本，再设计模块。不要只按模块名称联想功能，必须以真实源码中的统计口径为准。

模块需要覆盖这些统计对象：教案主体、整合教案、教学动画。

请输出完整模块设计方案，包括业务定位、后端聚合口径、接口返回结构、前端页面结构、指标卡设计、矩阵树图与明细表格关系、菜单权限、缓存策略、验收标准。设计确认后，再按照当前项目技术栈生成或补齐项目代码。

后端设计

后端入口是 server_backend/modules/MyWork/views_app/SiteStats.py。教学统计不是独立 ViewSet，而是 SiteStatsViewSet.teaching_stats action 调用 build_application_section_data("teaching") 返回教学分区数据。

后端设计项	真实代码依据	Codex 生成方向
ViewSet 入口	SiteStatsViewSet，文件 server_backend/modules/MyWork/views_app/SiteStats.py	保持统计接口集中在 ViewSet action 内，避免把聚合逻辑散落到前端
接口方法	teaching_stats` action 调用 `build_application_section_data("teaching")	生成 GET 统计接口，返回可直接驱动页面的结构化数据
数据模型	LessonPlanMaster、LessonPlan、TeachingAnimation	按真实模型字段聚合，不在接口里编造不存在的维度
统计构建	``_teaching_center_stats 生成卡片，_teaching_center_detail 生成 detail	把 summary、cards、detail 或 dimensions 拆清楚，便于前端复用
缓存策略	get_or_build_stats_payload("mywork.site.teaching_stats", "教学统计", ...)	使用统计缓存减少重复聚合开销，并保留刷新入口
路由注册	server_backend/modules/MyWork/urls.py	通过 DRF router 暴露 /api/.../ 接口，不新增孤立 URL
菜单入口	server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py 中的 /system/MyWork/TeachingCenterStats	让统计页面进入"我的工作/数据统计"入口并同步角色权限

后端设计需要保留分区复用方式。_teaching_center_stats 生成卡片口径，_teaching_center_detail 生成前端矩阵需要的 detail，_lesson_plan_master_category_tabs、_lesson_plan_textbook_category_tabs、_teaching_animation_category_tabs 负责具体分类数据。

可以直接使用下面的Prompt进行后端代码的设计

请为【教学统计】补齐后端统计接口。

读取并遵循：
1. `server_backend/modules/MyWork/views_app/SiteStats.py`
2. `server_backend/modules/MyWork/urls.py`
3. `server_backend/modules/MyWork/utils.py`
4. `server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py`

后端接口地址：/api/MyWork/SiteStats/teaching_stats/
缓存 Key：mywork.site.teaching_stats
涉及模型：LessonPlanMaster、LessonPlan、TeachingAnimation

实现要求：
- 统计口径必须来自真实模型字段，不能凭页面名称补字段。
- 返回结构需要覆盖页面顶部 summary、模块 cards、明细 detail 或 dimensions。
- 百分比统一按 `value / total` 计算，total 为 0 时返回 0。
- 空值要归入"未填写、未设置、未分类"等明确标签。
- 接口只承担统计聚合，不把前端展示样式写进后端。
- 保持 `get_or_build_stats_payload` 缓存调用，支持统一刷新统计渲染缓存。
- 路由继续使用已有 DRF router 注册方式，避免新增重复路径。

完成后给出字段口径、返回结构示例、缓存 Key 和接口验收点。

前端设计

前端入口是 server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue，通过 /api/MyWork/SiteStats/teaching_stats/ 获取数据。页面由教案主体、整合教案、教学动画三张 matrix-card 组成。

前端设计项	真实代码依据	Codex 生成方向
页面入口	server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue	保持统计页单文件入口，必要时只抽取真正复用的展示组件
接口调用	request({ url: '/api/MyWork/SiteStats/teaching_stats/', method: 'get' })	页面加载时拉取统计数据，失败时保留空态和 loading 状态
共享样式	server_vue3/src/theme/stats-dashboard.scss	使用 stats-dashboard-standard、stats-module-header、stats-kpi-strip 统一看板骨架
顶部 Hero	页面标题、说明和三枚核心指标	让用户进入页面后立即看到模块规模、记录量和完成率
模块 Frame	Header、描述、指标卡、Body	每个统计对象独立成块，避免图表和表格混在一层
明细展示	教材分类 Tab、教案类型 Tab、矩阵树图、字段覆盖面板、年级学科表格	同一批接口数据同时支撑概览图和可核对表格
交互状态	activeCategory、activePlanCategory、activePlanType、activeAnimationCategory、categoryTabs、lessonPlanCategoryTabs、animationCategoryTabs	Tab、矩阵、表格高度和空态要跟随接口数据稳定变化

页面状态包括 activeCategory、activePlanCategory、activePlanType、activeAnimationCategory。这些状态控制教材分类 Tab、教案类型 Tab 和动画分类 Tab，矩阵树图、字段覆盖图和表格共同消费后端 detail。

可以直接使用下面的Prompt进行前端代码的设计

请为【教学统计】实现或补齐前端统计看板。

读取并遵循：
1. `server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue`
2. `server_vue3/src/theme/stats-dashboard.scss`
3. `docs/sop/server/04.统计看板表格化改造SOP.md`
4. 后端接口 `/api/MyWork/SiteStats/teaching_stats/` 的真实返回结构

页面要求：
- 使用 `stats-dashboard-standard` 作为统计页根容器。
- 顶部 Hero 展示标题、说明和三项核心指标。
- 每个统计对象使用 `stats-module-header` 组织标题、描述和 KPI。
- 图形展示只做概览，必须提供可核对的明细表格或矩阵。
- Tab、矩阵树图、明细表格要消费同一份数据，避免前后口径不一致。
- loading、空数据、接口异常、移动端布局都要有稳定状态。
- 不改后端字段名称，不在前端伪造不存在的统计维度。

完成后给出页面区域、接口字段映射、交互状态和构建验证结果。

扩展功能

【教学统计】不是普通管理页，它的扩展能力集中在数据统计、统计维度联动、缓存刷新和菜单权限。源码没有 LLM、OCR、导入导出或审批流入口，因此文档只描述真实存在的统计能力。

扩展功能	主要用途	落地重点
数据统计	把多个业务表聚合成 summary、cards、detail 或 dimensions	后端统一计算数量、完成率、启用率和字段覆盖率
数据联动	让 Tab、矩阵树图、指标卡、表格共用一套接口数据	前端 computed 状态只做格式化，不改变业务口径
统计缓存与菜单入口	降低统计接口重复聚合成本，并让页面进入数据统计菜单	使用 get_or_build_stats_payload 与菜单同步脚本维护入口

数据统计

教学统计的数据统计能力体现在资源覆盖与完成度计算。后端把教案主体数量、整合教案完成率、教学动画生成率和字段覆盖拆成可视化结构，前端用矩阵展示不同教材分类、年级和学科的资源沉淀情况。
结果阶段
处理阶段
输入阶段
业务模型
字段口径
空值规则
数量聚合
占比计算
结构组装
概览指标
分布数据
明细矩阵
口径校验

可以直接使用下面的Prompt进行数据统计功能设计

请为【教学统计】设计数据统计能力。

统计对象：教案主体、整合教案、教学动画
后端入口：server_backend/modules/MyWork/views_app/SiteStats.py
接口地址：/api/MyWork/SiteStats/teaching_stats/

要求：
- 明确每个统计对象对应的模型、过滤条件、计数字段和完成率字段。
- 统一输出 summary、cards、detail 或 dimensions，不让前端重新推导业务口径。
- 所有 rate 字段返回 0 到 1 的小数，前端再格式化为百分比。
- 分布数据要同时能驱动矩阵树图、图例和明细表格。
- 空值必须归并为可读标签，例如未填写、未设置、未分类、待初始化。
- 给出接口返回示例和异常数据处理规则。

数据联动

教学统计的联动是多层 Tab 联动。教案主体切换教材分类后，学科结构和年级学科矩阵同步变化；整合教案还会继续切换教案类型；教学动画按分类切换后同步字段覆盖和矩阵表。
结果阶段
处理阶段
输入阶段
接口数据
当前 Tab
统计维度
computed 转换
图表数据
表格行列
指标同步
图表同步
表格同步
一致校验

可以直接使用下面的Prompt进行数据联动设计

请为【教学统计】补齐前端数据联动。

前端入口：server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue
联动状态：activeCategory、activePlanCategory、activePlanType、activeAnimationCategory、categoryTabs、lessonPlanCategoryTabs、animationCategoryTabs
展示组件：教材分类 Tab、教案类型 Tab、矩阵树图、字段覆盖面板、年级学科表格

要求：
- Tab 当前值、指标卡、矩阵树图和明细表格必须来自同一份接口数据。
- computed 只做排序、分组、百分比格式化和空值兜底，不改变后端统计结论。
- 切换 Tab 后标题、描述、指标、图表、表格同步更新。
- 接口为空时展示 el-empty，不出现 NaN、undefined 或布局塌陷。
- 表格高度、滚动区域和移动端布局保持稳定。

统计缓存与菜单入口

教学统计使用缓存 Key mywork.site.teaching_stats，并在统一刷新计划中和 mywork.application_stats.teaching 一起刷新。菜单脚本写入 /system/MyWork/TeachingCenterStats，组件指向 system/MyWork/TeachingCenterStats/index。

入口类型	真实文件	说明
接口缓存	server_backend/modules/MyWork/utils.py	get_or_build_stats_payload 读取或构建统计结果
刷新计划	server_backend/modules/MyWork/utils.py	_refresh_plans 覆盖配置、用户、教学、考试、内容统计
菜单同步	server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py	维护 /system/MyWork/TeachingCenterStats、组件 system/MyWork/TeachingCenterStats/index 和角色权限
共享样式	server_vue3/src/theme/stats-dashboard.scss	统一 Hero、Header Frame、KPI、滚动容器样式

可以直接使用下面的Prompt进行统计缓存与菜单入口设计

请为【教学统计】检查统计缓存和菜单入口。

缓存 Key：mywork.site.teaching_stats
菜单路径：/system/MyWork/TeachingCenterStats
组件路径：system/MyWork/TeachingCenterStats/index
前端页面：server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue

要求：
- 统计接口必须接入 `get_or_build_stats_payload`。
- 统一刷新计划需要包含该模块缓存 Key。
- 菜单同步脚本需要写入正确的 web_path、component、component_name、icon、image、sort 和 cache 配置。
- 菜单权限要同步到已有角色权限表，避免页面有路由但角色不可见。
- 交付时列出缓存 Key、菜单路径和接口地址。

Codex开发标准

使用 Codex 开发统计看板时，输入不能只写"做一个统计页面"。更稳的方式是把统计口径、接口字段、页面结构、共享样式、缓存策略和验收清单一次性交给 Codex，让代码生成围绕真实工程边界展开。
验收交付
Codex开发
模块设计
输入约束
源码路径
接口口径
SOP规范
后端聚合
前端布局
缓存菜单
生成代码
补齐状态
统一样式
构建通过
口径一致
页面稳定

SOP 标准

SOP 项	执行标准	对【教学统计】的要求
文档规范	参考 _Demo/_教程撰写.md 的固定结构	标题、开头、TOC、设计、后端、前端、扩展、Codex 标准、总结齐全
统计页规范	参考 docs/sop/server/04.统计看板表格化改造SOP.md	页面使用 Header Frame、指标卡、矩阵树图、明细表格
源码真实性	只写真实代码存在的接口、模型和页面状态	不写 LLM、OCR、导入导出、审批流等不存在能力
样式复用	共享样式统一进入 stats-dashboard.scss	单页只处理必要差异，不复制一套统计页框架
接口稳定	后端给前端结构化统计结果	前端不重新计算复杂业务口径

可以直接使用下面的Prompt进行SOP撰写

请按照 `_Demo/_教程撰写.md` 和 `docs/sop/server/04.统计看板表格化改造SOP.md`，为【教学统计】整理开发 SOP。

SOP 需要覆盖：源码读取顺序、后端统计口径、前端页面结构、共享样式使用、缓存 Key、菜单同步、构建验证、页面验收清单。

文档只写真实存在的文件、接口和模型。涉及流程时使用 Mermaid，涉及口径映射和验收标准时使用 Markdown 表格。

PDD 标准

验收项	验收标准	失败风险
接口可用	/api/MyWork/SiteStats/teaching_stats/ 返回 summary、模块数据和明细数据	页面无数据或字段 undefined
统计口径	后端统计与模型字段一致，rate 计算稳定	图表、表格、指标卡口径不一致
页面结构	Hero、模块 Header、KPI、图表、表格层次清晰	统计页像普通列表或内容拥挤
数据联动	Tab 切换后图表和表格同步	用户看到不同区域数据互相冲突
缓存入口	缓存 Key 能被统一刷新计划覆盖	数据更新后页面仍长期显示旧统计
菜单权限	/system/MyWork/TeachingCenterStats 可见且组件路径正确	卡片能看到但进入页面失败
构建验证	前端构建通过，无类型和模板错误	代码合入后影响管理后台构建

可以直接使用下面的Prompt进行PDD 验收

请为【教学统计】输出 PDD 验收清单。

需要检查：
1. 后端接口 `/api/MyWork/SiteStats/teaching_stats/` 的返回结构和字段口径。
2. 前端页面 `server_vue3/src/views/system/MyWork/TeachingCenterStats/index.vue` 的 Hero、Header Frame、指标卡、矩阵树图、表格、Tab、空态和 loading。
3. 共享样式 `stats-dashboard.scss` 是否被正确使用。
4. 缓存 Key `mywork.site.teaching_stats` 是否进入统一刷新计划。
5. 菜单路径 `/system/MyWork/TeachingCenterStats` 和组件 `system/MyWork/TeachingCenterStats/index` 是否能通过菜单同步脚本落库。
6. `npm run build` 是否通过。

输出结果用表格列出验收项、检查方法、通过标准和风险说明。

总结

教学统计文档的核心是教学资源覆盖。后端通过 SiteStats 的教学分区聚合教案主体、整合教案和教学动画，前端用分类 Tab、矩阵树图和完成率表格呈现资源完整度。

Codex 处理这类统计页时，真正要生成的不只是一个 Vue 页面，而是一条从业务模型、统计接口、缓存刷新、菜单权限到前端可视化的完整链路。只要输入中把真实源码路径、接口地址和统计口径交代清楚，生成出来的代码就更容易接入 ManageBak-ExamEdu 的现有工程结构。