山海万灵 HarmonyOS 文化知识实战(12):CMS Dashboard 与内容编辑模型

发布时间:2026/8/5 18:56:44
山海万灵 HarmonyOS 文化知识实战(12):CMS Dashboard 与内容编辑模型 文化知识应用的后台不是“多一个录入页面”而是让内容、图谱、来源和客户端显示模型保持一致。山海万灵的 CMS Dashboard 汇总内容节点、区域、展厅、图谱边和 Prompt 场景内容编辑模型则把一条神兽记录的标题、摘要、出处、状态和更新时间放到可审阅的结构里。Dashboard 先展示可运营的汇总视图后台首页不直接把数据库记录原样堆给运营人员而是读取 Dashboard 模型内容数量、区域与展厅数量、图谱节点与边、Prompt 场景以及内容状态分布。每个指标对应一个可继续进入的内容域而不是孤立数字。export interface CmsDashboard { stats: { contentCount: number regionCount: number hallCount: number graphNodeCount: number graphEdgeCount: number promptCount: number } statuses: Recordstring, number recentContent: CmsContentItem[] }Dashboard 的运行结果中可以读到内容节点、区域/展厅、图谱节点/边和 Prompt 场景等统计它们让内容编辑前先看到目录规模与待处理状态。统计模型还把“内容多少”和“内容是否可用”分开表达。前者来自内容、区域、展厅、图谱和 Prompt 的计数后者来自状态分布与检查项。这样某个区域的条目数量增加并不等于它已经可以面向读者展示运营人员仍能从待审核、已校验、已发布等状态看到需要继续处理的部分。汇总字段面向的决策不承担的职责contentCount判断目录的内容规模不代替单条内容的审核结论graphNodeCount/graphEdgeCount观察图谱覆盖和关系密度不直接决定客户端推荐顺序statuses定位草稿、审核和已发布的分布不携带正文内容recentContent进入最近变更的条目不替代完整的内容检索内容列表使用轻量模型编辑再读取详情列表行只展示编排需要的字段编号、标题、类型、区域、展厅、来源、状态、更新时间与摘要。点击后再读取内容详情避免列表接口携带所有正文和来源附属信息。export interface CmsContentItem { id: string no: string title: string type: BEAST | STORY | REGION | HALL regionName: string hallName: string sourceName: string status: DRAFT | REVIEWING | PUBLISHED updatedAt: string | null summary: string }页面层级读取对象解决的问题DashboardCmsDashboard快速观察内容与图谱规模内容列表CmsContentItem筛选、排序与定位待处理条目编辑页内容详情与来源字段修改正文、来源说明和状态客户端BeastItem等领域模型以面向阅读的模型渲染图鉴与详情加载过程把四类读取并行发起Dashboard、内容列表、图谱与 Prompt。任何一个请求失败时页面保留清晰的错误信息不把部分成功的数据伪装成完整后台。读取完成后Dashboard、内容列表、图谱和 Prompt 分别落在独立状态中切换标签页不会为了展示同一份数据而重新拼装一套大对象。async function loadAll(): Promisevoid { loading.value true errorMessage.value try { const [dashboardData, contentData, graphData, promptData] await Promise.all([ requestJsonDashboardData(/cms/dashboard), requestJson{ items: ContentItem[] }(/cms/content-items), requestJsonGraphData(/cms/graph), requestJson{ items: PromptItem[] }(/cms/prompts) ]) dashboard.value dashboardData contentItems.value contentData.items graph.value graphData prompts.value promptData.items } catch (error) { errorMessage.value 无法连接本地后端${String(error)} } finally { loading.value false } }编辑模型保留来源与状态编辑页把正文与来源说明分开。来源字段包括名称、定位和校验说明状态字段决定条目仍在草稿、审核还是可发布阶段。客户端导入时再将后台字段映射成SourceInfo和BeastItem避免直接依赖后台表结构。function buildCmsContentItem(beast: BeastRecord): CmsContentItem { return { id: beast.id, no: beast.no, title: beast.name, type: BEAST, regionName: findRegionName(beast.regionId), hallName: findHallName(beast.hallId), sourceName: beast.source?.name ?? , status: contentStatusFor(beast), updatedAt: beast.updatedAt ?? null, summary: beast.summary } }验收时先查看 Dashboard 的统计与最近内容再打开一条神兽内容确认标题、摘要、来源和状态字段可读。Vue 组合式状态与表单组织可参考 [Vue 官方文档](https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html)。编辑抽屉打开时先按内容 ID 读取详情而不是把列表行直接转成编辑表单。这样列表可以保持轻量编辑页仍能拿到detail和sourceNote等长文本字段。保存时只提交编辑模型中的明确字段成功返回后替换列表中的同一条记录并重新读取汇总数据让状态分布和最近内容与编辑结果保持一致。async function saveContentEditor(): Promisevoid { if (editingContent.value null) return editorSaving.value true try { const form editingContent.value const updated await requestJsonContentDetail( /cms/content-items/${form.id}, { method: PATCH, body: JSON.stringify(form) } ) contentItems.value contentItems.value.map((item) item.id updated.id ? updated : item ) dashboard.value await requestJsonDashboardData(/cms/dashboard) editingContent.value null } finally { editorSaving.value false } }编辑页需要特别处理两个边界。第一列表请求失败时不能留下过期条目冒充最新数据错误信息应覆盖在当前操作上下文中。第二保存按钮在请求期间由editorSaving锁定防止重复提交同一份表单。来源名称与来源说明分别保存避免把可展示的来源标签与人工校注文本混成一个字段。后台字段到客户端模型的映射约束后台条目的来源、状态和摘要必须在映射层显式转换。客户端不读取后台页面的展示字段而是消费稳定的领域模型因此 Dashboard 的运营信息与图鉴阅读体验可以各自演进同时仍通过同一内容标识关联。这种拆分使客户端模型保持聚焦图鉴页面关心神兽名称、区域、摘要和阅读内容后台则额外关心来源、审核状态、更新时间与运营检查。两端共享稳定标识而不是共享某个页面的临时展示结构。当后台增加新的审核字段时只需在映射边界决定它是否进入阅读模型不会让客户端页面被管理字段牵连。场景后台模型处理客户端模型处理新建或修订内容维护来源、正文与状态只读取可展示的内容字段条目处于审核中在状态分布中可见并等待处理不将审核标记当作阅读文案图谱关系调整维护节点与边的运营信息通过稳定标识关联推荐或详情某项读取失败显示可定位的错误状态保持已有阅读内容的独立渲染对于日常验收可以从总览进入内容列表选择一条神兽记录核对标题、摘要、来源和状态四类字段再返回总览检查统计是否仍可读取。这个动作链验证的是页面组织、详情读取和字段模型之间的衔接发布、回滚和审核流转应由各自的权限与流程页面承担。