内容统计把文章管理、项目提示词、GPT提示词、文章句子、文章素材和 Kaggle 竞赛项目放到一张内容沉淀看板里，用来查看内容分类、字段完整度和资源覆盖情况。
本文按照 Demo 的技术文章结构，基于 SiteStatsViewSet 的内容分区接口和 ContentCenterStats/index.vue 页面，说明如何把内容中心统计转成 Codex 可执行的代码生成任务。
文章目录
设计与需求
内容统计复用 SiteStatsViewSet.build_application_section_data("content")。后端 _content_center_modules 明确只统计 6 个内容模块，排除内容购买和服务账号管理；前端按模块循环渲染 module-board。
验收阶段
展示阶段
设计阶段
输入阶段
业务数据
统计口径
菜单入口
后端聚合
接口返回
前端看板
指标卡
矩阵树图
明细表格
数据一致
布局稳定
权限可见
这张图表达的是统计类模块从业务数据到页面展示的转换关系。Codex 处理这类需求时，不能只生成一个空页面或普通 CRUD，需要把统计口径、接口返回结构、前端矩阵展示和菜单权限一起纳入设计。
| 需求层描述 | 设计层转换 | Codex 代码生成方向 |
|---|---|---|
| 内容中心需要看沉淀规模 | 将 6 个内容模块统一成 modules 和 summary | 生成模块数、记录数、整体达成率 |
| 文章管理需要看内容完整度 | 统计分类、产品类型、资源标识、教程文本、视频教程和资源链接 | 生成字段覆盖、资源覆盖和分类分布 |
| 提示词需要看模板结构 | 统计项目提示词、GPT提示词的分类、分组、层级和正文完整度 | 生成分类 Tab、子分类树图和字段完成率 |
| 素材与句子需要看字段状态 | 统计文章句子、文章素材的分类、类型、编号、图片、提示词、标签 | 生成字段覆盖堆叠、分布树图和明细块 |
| Kaggle 项目需要看案例内容 | 统计分类、文章链接、案例文档、数据集链接和提交总数 | 生成分类分布、奖励类型和内容成稿率 |
内容统计的真实统计对象来自 _content_center_modules，页面以模块循环方式呈现。
| 统计对象 | 代码口径 | 页面呈现 |
|---|---|---|
| 文章管理 | ArticleManage 统计标题、分类、类型、正文、教程、资源链接和完成状态 |
内容完整率、文章分类、产品类型、资源标识、字段覆盖 |
| 项目提示词 | ArticleProjectPrompt 统计模板名称、初始化词、模型说明、分类、分组、图标 |
模板完整率、模板分类、标签分组、分类 Tab |
| GPT提示词 | ArticleMaker 统计一级项目、二级提示词、完成状态、项目和分类 |
完成率、项目分布、分类分布、层级结构 |
| 文章句子 | ArticleSentence 统计句子正文、分类、类型、编号和同步时间 |
正文完整率、句子分类、句子类型、编号状态 |
| 文章素材 | ArticleMaterial 统计图片、预览图、中英文提示词、分组、标签 |
素材完整率、素材分类、素材分组、素材标签 |
| Kaggle竞赛项目 | KaggleCompetitions 统计分类、数据集链接、案例文档、文章链接、提交总数 |
内容成稿率、一级分类、二级分类、奖励类型 |
可以直接使用下面的Prompt进行模块功能的设计
text
请基于 ManageBak-ExamEdu 项目设计并实现【内容统计】统计模块。
模块前端入口为：server_vue3/src/views/system/MyWork/ContentCenterStats/index.vue
后端接口入口为：server_backend/modules/MyWork/views_app/SiteStats.py
接口地址为：/api/MyWork/SiteStats/content_stats/
菜单路径为：/system/MyWork/ContentCenterStats
请先读取上述前端页面、后端 ViewSet、路由注册、统计缓存工具、共享样式文件和菜单同步脚本，再设计模块。不要只按模块名称联想功能，必须以真实源码中的统计口径为准。
模块需要覆盖这些统计对象：文章管理、项目提示词、GPT提示词、文章句子、文章素材、Kaggle竞赛项目。
请输出完整模块设计方案，包括业务定位、后端聚合口径、接口返回结构、前端页面结构、指标卡设计、矩阵树图与明细表格关系、菜单权限、缓存策略、验收标准。设计确认后，再按照当前项目技术栈生成或补齐项目代码。后端设计
后端入口是 server_backend/modules/MyWork/views_app/SiteStats.py。内容统计通过 SiteStatsViewSet.content_stats 暴露接口，_content_center_modules 负责组织模块列表，_content_center_detail 汇总整体 summary。
| 后端设计项 | 真实代码依据 | Codex 生成方向 |
|---|---|---|
| ViewSet 入口 | SiteStatsViewSet，文件 server_backend/modules/MyWork/views_app/SiteStats.py |
保持统计接口集中在 ViewSet action 内，避免把聚合逻辑散落到前端 |
| 接口方法 | content_stats` action 调用 `build_application_section_data("content") |
生成 GET 统计接口，返回可直接驱动页面的结构化数据 |
| 数据模型 | ArticleManage、ArticleProjectPrompt、ArticleMaker、ArticleSentence、ArticleMaterial、KaggleCompetitions |
按真实模型字段聚合，不在接口里编造不存在的维度 |
| 统计构建 | ``_content_center_modules 生成模块列表，_content_center_detail 生成 summary |
把 summary、cards、detail 或 dimensions 拆清楚，便于前端复用 |
| 缓存策略 | get_or_build_stats_payload("mywork.site.content_stats", "内容统计", ...) |
使用统计缓存减少重复聚合开销，并保留刷新入口 |
| 路由注册 | server_backend/modules/MyWork/urls.py |
通过 DRF router 暴露 /api/.../ 接口，不新增孤立 URL |
| 菜单入口 | server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py 中的 /system/MyWork/ContentCenterStats |
让统计页面进入"我的工作/数据统计"入口并同步角色权限 |
内容统计后端的重点是字段覆盖。_content_module_detail、_content_completion_summary、_content_field_group 这类函数把每个模块的关键字段整理成 rate、metrics、primary_summary、secondary_summary、tertiary_summary 和 field_groups，前端按统一结构循环渲染。
可以直接使用下面的Prompt进行后端代码的设计
text
请为【内容统计】补齐后端统计接口。
读取并遵循：
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/content_stats/
缓存 Key：mywork.site.content_stats
涉及模型：ArticleManage、ArticleProjectPrompt、ArticleMaker、ArticleSentence、ArticleMaterial、KaggleCompetitions
实现要求：
- 统计口径必须来自真实模型字段，不能凭页面名称补字段。
- 返回结构需要覆盖页面顶部 summary、模块 cards、明细 detail 或 dimensions。
- 百分比统一按 `value / total` 计算，total 为 0 时返回 0。
- 空值要归入"未填写、未设置、未分类"等明确标签。
- 接口只承担统计聚合，不把前端展示样式写进后端。
- 保持 `get_or_build_stats_payload` 缓存调用，支持统一刷新统计渲染缓存。
- 路由继续使用已有 DRF router 注册方式，避免新增重复路径。
完成后给出字段口径、返回结构示例、缓存 Key 和接口验收点。前端设计
前端入口是 server_vue3/src/views/system/MyWork/ContentCenterStats/index.vue，通过 /api/MyWork/SiteStats/content_stats/ 获取 summary 和 modules。页面使用 v-for 渲染模块看板，并根据是否存在 category_tabs 或 field_groups 切换布局。
| 前端设计项 | 真实代码依据 | Codex 生成方向 |
|---|---|---|
| 页面入口 | server_vue3/src/views/system/MyWork/ContentCenterStats/index.vue |
保持统计页单文件入口，必要时只抽取真正复用的展示组件 |
| 接口调用 | request({ url: '/api/MyWork/SiteStats/content_stats/', method: 'get' }) |
页面加载时拉取统计数据，失败时保留空态和 loading 状态 |
| 共享样式 | server_vue3/src/theme/stats-dashboard.scss |
使用 stats-dashboard-standard、stats-module-header、stats-kpi-strip 统一看板骨架 |
| 顶部 Hero | 页面标题、说明和三枚核心指标 | 让用户进入页面后立即看到模块规模、记录量和完成率 |
| 模块 Frame | Header、描述、指标卡、Body | 每个统计对象独立成块，避免图表和表格混在一层 |
| 明细展示 | 模块循环看板、大类统计树图、分类详情卡、字段覆盖堆叠、主/次/补充分布 |
同一批接口数据同时支撑概览图和可核对表格 |
| 交互状态 | modules、activeCategoryTabs、categoryOverviewItems、activeCategoryTabList、fieldCoverageGroups、summaryItems |
Tab、矩阵、表格高度和空态要跟随接口数据稳定变化 |
页面状态包括 activeCategoryTabs 与模块级工具函数。模块有分类 Tab 时使用大类统计和子分类详情；模块有字段组时展示字段覆盖和完成率；普通模块则显示指标卡、主分布、次级分布和补充维度。
可以直接使用下面的Prompt进行前端代码的设计
text
请为【内容统计】实现或补齐前端统计看板。
读取并遵循：
1. `server_vue3/src/views/system/MyWork/ContentCenterStats/index.vue`
2. `server_vue3/src/theme/stats-dashboard.scss`
3. `docs/sop/server/04.统计看板表格化改造SOP.md`
4. 后端接口 `/api/MyWork/SiteStats/content_stats/` 的真实返回结构
页面要求：
- 使用 `stats-dashboard-standard` 作为统计页根容器。
- 顶部 Hero 展示标题、说明和三项核心指标。
- 每个统计对象使用 `stats-module-header` 组织标题、描述和 KPI。
- 图形展示只做概览，必须提供可核对的明细表格或矩阵。
- Tab、矩阵树图、明细表格要消费同一份数据，避免前后口径不一致。
- loading、空数据、接口异常、移动端布局都要有稳定状态。
- 不改后端字段名称，不在前端伪造不存在的统计维度。
完成后给出页面区域、接口字段映射、交互状态和构建验证结果。扩展功能
【内容统计】不是普通管理页，它的扩展能力集中在数据统计、统计维度联动、缓存刷新和菜单权限。源码没有 LLM、OCR、导入导出或审批流入口，因此文档只描述真实存在的统计能力。
| 扩展功能 | 主要用途 | 落地重点 |
|---|---|---|
| 数据统计 | 把多个业务表聚合成 summary、cards、detail 或 dimensions | 后端统一计算数量、完成率、启用率和字段覆盖率 |
| 数据联动 | 让 Tab、矩阵树图、指标卡、表格共用一套接口数据 | 前端 computed 状态只做格式化，不改变业务口径 |
| 统计缓存与菜单入口 | 降低统计接口重复聚合成本，并让页面进入数据统计菜单 | 使用 get_or_build_stats_payload 与菜单同步脚本维护入口 |
数据统计
内容统计的数据统计能力体现在跨内容模型的字段覆盖计算。后端将文章、提示词、句子、素材和 Kaggle 项目的分类分布、资源标识、字段完成率统一封装成模块数组，前端不需要为每个模型单独写一套页面。
结果阶段
处理阶段
输入阶段
业务模型
字段口径
空值规则
数量聚合
占比计算
结构组装
概览指标
分布数据
明细矩阵
口径校验
可以直接使用下面的Prompt进行数据统计功能设计
text
请为【内容统计】设计数据统计能力。
统计对象：文章管理、项目提示词、GPT提示词、文章句子、文章素材、Kaggle竞赛项目
后端入口：server_backend/modules/MyWork/views_app/SiteStats.py
接口地址：/api/MyWork/SiteStats/content_stats/
要求：
- 明确每个统计对象对应的模型、过滤条件、计数字段和完成率字段。
- 统一输出 summary、cards、detail 或 dimensions，不让前端重新推导业务口径。
- 所有 rate 字段返回 0 到 1 的小数，前端再格式化为百分比。
- 分布数据要同时能驱动矩阵树图、图例和明细表格。
- 空值必须归并为可读标签，例如未填写、未设置、未分类、待初始化。
- 给出接口返回示例和异常数据处理规则。数据联动
内容统计的联动围绕模块循环和分类 Tab 展开。点击大类统计卡片会改变当前模块的分类详情，字段覆盖、次级分布、补充维度仍来自同一个 module 对象，保证模块内图表和明细口径一致。
结果阶段
处理阶段
输入阶段
接口数据
当前 Tab
统计维度
computed 转换
图表数据
表格行列
指标同步
图表同步
表格同步
一致校验
可以直接使用下面的Prompt进行数据联动设计
text
请为【内容统计】补齐前端数据联动。
前端入口：server_vue3/src/views/system/MyWork/ContentCenterStats/index.vue
联动状态：modules、activeCategoryTabs、categoryOverviewItems、activeCategoryTabList、fieldCoverageGroups、summaryItems
展示组件：模块循环看板、大类统计树图、分类详情卡、字段覆盖堆叠、主/次/补充分布
要求：
- Tab 当前值、指标卡、矩阵树图和明细表格必须来自同一份接口数据。
- computed 只做排序、分组、百分比格式化和空值兜底，不改变后端统计结论。
- 切换 Tab 后标题、描述、指标、图表、表格同步更新。
- 接口为空时展示 el-empty，不出现 NaN、undefined 或布局塌陷。
- 表格高度、滚动区域和移动端布局保持稳定。统计缓存与菜单入口
内容统计使用缓存 Key mywork.site.content_stats，并和 mywork.application_stats.content 一起进入统一刷新计划。菜单脚本写入 /system/MyWork/ContentCenterStats，组件指向 system/MyWork/ContentCenterStats/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/ContentCenterStats、组件 system/MyWork/ContentCenterStats/index 和角色权限 |
| 共享样式 | server_vue3/src/theme/stats-dashboard.scss |
统一 Hero、Header Frame、KPI、滚动容器样式 |
可以直接使用下面的Prompt进行统计缓存与菜单入口设计
text
请为【内容统计】检查统计缓存和菜单入口。
缓存 Key：mywork.site.content_stats
菜单路径：/system/MyWork/ContentCenterStats
组件路径：system/MyWork/ContentCenterStats/index
前端页面：server_vue3/src/views/system/MyWork/ContentCenterStats/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撰写
text
请按照 `_Demo/_教程撰写.md` 和 `docs/sop/server/04.统计看板表格化改造SOP.md`，为【内容统计】整理开发 SOP。
SOP 需要覆盖：源码读取顺序、后端统计口径、前端页面结构、共享样式使用、缓存 Key、菜单同步、构建验证、页面验收清单。
文档只写真实存在的文件、接口和模型。涉及流程时使用 Mermaid，涉及口径映射和验收标准时使用 Markdown 表格。PDD 标准
| 验收项 | 验收标准 | 失败风险 |
|---|---|---|
| 接口可用 | /api/MyWork/SiteStats/content_stats/ 返回 summary、模块数据和明细数据 |
页面无数据或字段 undefined |
| 统计口径 | 后端统计与模型字段一致，rate 计算稳定 | 图表、表格、指标卡口径不一致 |
| 页面结构 | Hero、模块 Header、KPI、图表、表格层次清晰 | 统计页像普通列表或内容拥挤 |
| 数据联动 | Tab 切换后图表和表格同步 | 用户看到不同区域数据互相冲突 |
| 缓存入口 | 缓存 Key 能被统一刷新计划覆盖 | 数据更新后页面仍长期显示旧统计 |
| 菜单权限 | /system/MyWork/ContentCenterStats 可见且组件路径正确 |
卡片能看到但进入页面失败 |
| 构建验证 | 前端构建通过，无类型和模板错误 | 代码合入后影响管理后台构建 |
可以直接使用下面的Prompt进行PDD 验收
text
请为【内容统计】输出 PDD 验收清单。
需要检查：
1. 后端接口 `/api/MyWork/SiteStats/content_stats/` 的返回结构和字段口径。
2. 前端页面 `server_vue3/src/views/system/MyWork/ContentCenterStats/index.vue` 的 Hero、Header Frame、指标卡、矩阵树图、表格、Tab、空态和 loading。
3. 共享样式 `stats-dashboard.scss` 是否被正确使用。
4. 缓存 Key `mywork.site.content_stats` 是否进入统一刷新计划。
5. 菜单路径 `/system/MyWork/ContentCenterStats` 和组件 `system/MyWork/ContentCenterStats/index` 是否能通过菜单同步脚本落库。
6. `npm run build` 是否通过。
输出结果用表格列出验收项、检查方法、通过标准和风险说明。总结
内容统计文档的核心是内容沉淀完整度。后端通过 SiteStats 内容分区生成 6 个内容模块的统一结构，前端按模块循环渲染分类、字段覆盖、资源标识和完成率。
Codex 处理这类统计页时，真正要生成的不只是一个 Vue 页面，而是一条从业务模型、统计接口、缓存刷新、菜单权限到前端可视化的完整链路。只要输入中把真实源码路径、接口地址和统计口径交代清楚，生成出来的代码就更容易接入 ManageBak-ExamEdu 的现有工程结构。