山海万灵 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: Record<string, number> recentContent: CmsContentItem[] }

Dashboard 的运行结果中可以读到内容节点、区域/展厅、图谱节点/边和 Prompt 场景等统计；它们让内容编辑前先看到目录规模与待处理状态。

统计模型还把“内容多少”和“内容是否可用”分开表达。前者来自内容、区域、展厅、图谱和 Prompt 的计数，后者来自状态分布与检查项。这样，某个区域的条目数量增加并不等于它已经可以面向读者展示；运营人员仍能从待审核、已校验、已发布等状态看到需要继续处理的部分。

内容列表使用轻量模型，编辑再读取详情

列表行只展示编排需要的字段：编号、标题、类型、区域、展厅、来源、状态、更新时间与摘要。点击后再读取内容详情，避免列表接口携带所有正文和来源附属信息。

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 }

加载过程把四类读取并行发起：Dashboard、内容列表、图谱与 Prompt。任何一个请求失败时，页面保留清晰的错误信息，不把部分成功的数据伪装成完整后台。读取完成后，Dashboard、内容列表、图谱和 Prompt 分别落在独立状态中，切换标签页不会为了展示同一份数据而重新拼装一套大对象。

async function loadAll(): Promise<void> { loading.value = true errorMessage.value = '' try { const [dashboardData, contentData, graphData, promptData] = await Promise.all([ requestJson<DashboardData>('/cms/dashboard'), requestJson<{ items: ContentItem[] }>('/cms/content-items'), requestJson<GraphData>('/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(): Promise<void> { if (editingContent.value === null) return editorSaving.value = true try { const form = editingContent.value const updated = await requestJson<ContentDetail>( `/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 requestJson<DashboardData>('/cms/dashboard') editingContent.value = null } finally { editorSaving.value = false } }

编辑页需要特别处理两个边界。第一，列表请求失败时不能留下过期条目冒充最新数据；错误信息应覆盖在当前操作上下文中。第二，保存按钮在请求期间由editorSaving锁定，防止重复提交同一份表单。来源名称与来源说明分别保存，避免把可展示的来源标签与人工校注文本混成一个字段。

后台字段到客户端模型的映射约束

后台条目的来源、状态和摘要必须在映射层显式转换。客户端不读取后台页面的展示字段，而是消费稳定的领域模型；因此 Dashboard 的运营信息与图鉴阅读体验可以各自演进，同时仍通过同一内容标识关联。

这种拆分使客户端模型保持聚焦：图鉴页面关心神兽名称、区域、摘要和阅读内容，后台则额外关心来源、审核状态、更新时间与运营检查。两端共享稳定标识，而不是共享某个页面的临时展示结构。当后台增加新的审核字段时，只需在映射边界决定它是否进入阅读模型，不会让客户端页面被管理字段牵连。

对于日常验收，可以从总览进入内容列表，选择一条神兽记录，核对标题、摘要、来源和状态四类字段，再返回总览检查统计是否仍可读取。这个动作链验证的是页面组织、详情读取和字段模型之间的衔接；发布、回滚和审核流转应由各自的权限与流程页面承担。