山海万灵 HarmonyOS 文化知识实战(04):探索证据板的页面状态组织
当图鉴从“看一张卡片”升级到“沿线索探索”时页面不能只放一段说明文字。读者需要知道内容来自哪里、哪些事实已定位、哪些属于本馆导览以及当前神兽和哪些节点相连。山海万灵把这些信息组织为证据板详情页与数字馆长都读取同一个神兽、来源与关系上下文。证据板围绕当前目标组装页面先确定selectedBeastId再解析神兽、来源、知识卡和关联关系。来源信息不是页面临时字符串而是数据模型中的SourceInfo关系也不是图片上的装饰线而是带类型、目标和说明的记录。interface EvidenceBoardState { beast: BeastItem source: SourceInfo learningCards: BeastLearningCard[] relations: CuratorRelationItem[] resultState: CuratorResultState } type CuratorResultState IDLE | LOADING | AI | FALLBACK | FAILED同一个目标在详情页里显示出处与知识卡在馆长页里显示当前讲解和下一步入口。两处都不自行拼接历史事实从而避免一页写“东海路线”、另一页把它当作原典地理。来源、核验与导览分层呈现应龙详情页把原典条目、数字文本核验、异文说明和人工校注状态放进来源面板馆长模块在此基础上生成导览文字。前者回答“内容从哪里来”后者回答“这条线索怎样继续看”。private sourceLabel(source: SourceInfo): string { return source.name · source.verificationLabel } private relationText(item: CuratorRelationItem): string { return item.label item.detail } private canRenderGuide(state: CuratorResultState): boolean { return state AI || state FALLBACK }面板输入输出给用户的内容出处SourceInfo条目、定位、数字核验与复核状态知识与故事学习卡集合已登记的最小事实和导览说明图谱关系关系集合与当前神兽相关的区域、展厅或叙事线索馆长结果CuratorResultState加载、讲解、降级或失败反馈选择主题后再请求结果馆长页让用户选择神兽、故事、地图或展厅主题再发出请求。请求期间按钮进入同步状态结果回到同一个状态对象失败时保留当前神兽和出处板不把已读内容清空。async function requestGuide(topic: CuratorGuideTopic): Promisevoid { this.resultState LOADING try { this.selectedGuide await this.viewModel.explainBeast(this.selectedBeastId, topic) this.resultState this.selectedGuide.fallback ? FALLBACK : AI } catch (_) { this.resultState FAILED } }用单一状态源约束卡片的更新顺序页面的关键不是把信息卡片排在同一屏而是让每次主题切换都遵循同一条状态链先锁定目标神兽再切换结果状态最后提交导览、出处与关系集合。这样卡片拿到的是同一轮请求的结果旧请求晚到时不会覆盖新目标。对于“应龙”这样的多关系对象读者也不会看到已经切到其他神兽、但关系区仍残留应龙路线的错位内容。private beginGuideRequest(beastId: string, topic: CuratorGuideTopic): number { this.curatorRequestSequence 1 this.curatorTargetBeastId beastId this.curatorResultState LOADING this.recommendations [] this.learningCards [] return this.curatorRequestSequence } private shouldApplyGuide(sequence: number, beastId: string): boolean { return sequence this.curatorRequestSequence beastId this.curatorTargetBeastId } private restoreGuideActions(): void { this.curatorResultState IDLE this.notice 可重新选择主题后继续导览。 }这组字段把“谁是当前对象”“本轮是否仍有效”“结果处于哪个阶段”拆开保存。curatorRequestSequence只负责淘汰过期请求curatorTargetBeastId决定页面展示对象curatorResultState决定结果卡的视觉分支。三者不相互代替状态切换才不会把网络时序错误伪装成内容错误。事件必须更新的状态页面可见结果不能发生的副作用选择新的神兽目标 ID、请求序号基础档案与出处先对齐新对象继续显示旧对象的关系列表提交主题结果状态为LOADING结果卡显示进行中证据板仍可阅读清空已确认的出处字段返回导览结果导览、学习卡、关系集合同一对象的讲解和关系同时更新让过期请求覆盖新选择返回降级结果结果状态为FALLBACK标明本地可用的导览内容把降级内容标为 AI 返回请求失败结果状态为FAILED给出可恢复提示与再次选择入口以空白卡片隐藏失败原因结果卡与关系区的组合边界结果卡负责说明“本轮导览给了什么”关系区负责说明“这些内容怎样连接到区域、展厅和叙事线索”。两个组件通过同一份馆长页面数据组合而不是在各自内部再次查询。这样在窄屏时可以纵向排布在宽屏时可以并列显示数据边界不会随布局变化而漂移。ShanhaiCuratorResultCard({ resultState: this.resultState, guide: this.selectedGuide, selectedBeast: this.selectedBeast, onRetry: () this.requestGuide(this.selectedTopic) }) ShanhaiCuratorSourceRelations({ source: this.selectedBeast.sourceInfo, learningCards: this.learningCards, relations: this.recommendations, onOpenRelation: (target) this.openRouteTarget(target) })组合时应保持三个边界。第一结果卡不拼接出处文本它只消费已准备好的导览结果和状态。第二关系区不决定请求成功与否它只展示当前对象可用的来源、学习卡和连接线索。第三页面容器集中处理重试、切换对象和进入下一站子组件通过回调表达用户动作。这样的拆分让状态分支集中在页面层组件可以围绕各自的阅读任务演进。从回读结果验收证据板验收不以“看见一个按钮”作为结论而是检查一次完整动作之后的内容是否互相一致。选择应龙主题并进入馆长模块后导览段落、出处条目、核验状态和“与应龙相关”的关系区应同时归属于应龙切换到另一个主题后旧关系和旧讲解不能继续停留在新对象的结果区。加载、降级和失败分支则分别保留可读的基础档案避免读者在等待或恢复时失去已确认的来源线索。function assertEvidenceBoard(result: EvidenceBoardState): boolean { const sameBeast result.beast.id result.source.beastId const hasGuide result.resultState AI || result.resultState FALLBACK || result.resultState LOADING const relationTargetsValid result.relations .every((item) item.fromBeastId result.beast.id) const fallbackReadable result.resultState ! FALLBACK || result.guide.content.length 0 return sameBeast hasGuide relationTargetsValid fallbackReadable } function canOpenNextStop(target: CuratorRouteTarget): boolean { return target.kind REGION || target.kind HALL || target.kind BEAST }运行时选择“神兽”并打开模块后界面会展示应龙的导览段落、出处条目和“与应龙相关”的关系区。该结构把选择、来源与结果放入明确状态而不是让多个卡片各自保存一份文本。更多 ArkUI 状态模型可参考 HarmonyOS 官方说明。状态切换的失败出口讲解请求进入加载状态后证据板仍保留当前神兽与出处结果可用时更新导览卡失败时显示可恢复反馈。页面不以空白替代失败也不把上一次神兽的关系结果混入新的选择。

相关新闻

收藏!小白程序员必看:FDE如何让AI从Demo落地到生产环境?

收藏!小白程序员必看:FDE如何让AI从Demo落地到生产环境?

本文对比了Prompt与FDE在AI应用中的差异:Prompt解决单次对话,而FDE负责AI落地。FDE(前沿部署工程师)作为AI企业与客户间的桥梁,需懂技术、业务及流程,将AI整合进企业真实环境。FDE不同于驻场外包或售前&…

2026/10/17 6:25:23 阅读更多 →
手机散热器横评:半导体、磁吸、液冷如何选?实测原神/星穹铁道降温效果

手机散热器横评:半导体、磁吸、液冷如何选?实测原神/星穹铁道降温效果

手机游戏重度玩家、专业主播、电竞选手,乃至日常刷视频的普通用户,都绕不开一个共同的“痛点”——手机发热。一旦温度飙升,处理器降频、游戏掉帧、屏幕变暗、充电暂停,体验直线下滑。今天我们不谈理论,直接上手&#…

2026/10/17 8:55:17 阅读更多 →
安卓应用安全获取指南:从Google Play下载APK的原理、工具与避坑实践

安卓应用安全获取指南:从Google Play下载APK的原理、工具与避坑实践

1. 项目概述:一个安卓生态的“刚需”场景如果你是一名安卓用户,或者经常需要为安卓设备寻找特定的应用,那么你一定遇到过这个场景:在电脑上浏览网页时,看到了一个Google Play商店的应用链接,觉得非常有用&a…

2026/10/18 15:19:21 阅读更多 →

最新新闻

室内AI出图三周实战路线:从零基础到稳定交付效果图

室内AI出图三周实战路线:从零基础到稳定交付效果图

刚收到一位做室内设计的同行私信,开口就问:“室内AI出图要学多久?我看别人发的那种效果图太惊艳了,但自己连从哪下手都不知道。”我的回答很直接:三周,足够你从完全没碰过AI出图,到稳定输出客户…

2026/10/19 4:49:02 阅读更多 →
深度学习过拟合问题详解:Dropout、正则化与早停法实战指南

深度学习过拟合问题详解:Dropout、正则化与早停法实战指南

深度学习里有个特别常见的现象:训练集上的loss一路走低,看起来模型要成神了,结果验证集上的表现先是不动,然后掉头向上,甚至越跑越差。很多初学者第一次遇到这种情况时都会怀疑是自己代码写错了,其实不是&a…

2026/10/19 4:49:02 阅读更多 →
校园快递管理系统毕业设计:从数据库建模到SpringBoot+Vue全流程实战

校园快递管理系统毕业设计:从数据库建模到SpringBoot+Vue全流程实战

做了这么多年开发带毕业设计,我越来越觉得快递管理这类系统是被低估的选题。乍一听有点"烂大街",但真落地起来,它把权限控制、状态流转、二维码生成、消息通知、数据统计这些日常业务里绕不开的场景全串起来了,很适合用…

2026/10/19 4:49:02 阅读更多 →
大模型选型评测:MiniMax2.1、GLM-4.7、Qwen3-Coder、Doubao-Seed场景对比

大模型选型评测:MiniMax2.1、GLM-4.7、Qwen3-Coder、Doubao-Seed场景对比

直接上结论:现在大模型的竞争早就不是“谁参数多谁赢”的蛮力阶段了,而是进入了“精细化分工”的成熟期。我最近密集测试了MiniMax2.1、GLM-4.7、Qwen3-Coder、Doubao-Seed这四款各有来头的模型,感慨挺多的:它们都不是“全能的六边…

2026/10/19 4:49:02 阅读更多 →
从代码到实物:程序生成图案的激光切割与实体制作指南

从代码到实物:程序生成图案的激光切割与实体制作指南

做手作和写代码,这两件事在我这儿一直不太分家。前几年折腾过不少生成艺术的小项目,每次想从屏幕里的图案变成现实里能挂上墙、能拼装、能送人的实物,都要在绘图软件、脚本、激光切割参数、纸张克重之间来回倒腾,烦得不行。后来我…

2026/10/19 4:49:02 阅读更多 →
CentOS下BIND域名解析配置实战:从正向/反向解析到故障排查

CentOS下BIND域名解析配置实战:从正向/反向解析到故障排查

1. 项目概述:CentOS下的域名解析配置到底要做什么第五个年头做Linux运维,最常见的需求之一就是“帮我把域名解析配置上”。这句话在上线部署、内网服务联调、测试环境搭建里反复出现。尤其是新买了一台CentOS服务器,业务程序部署完了&#xf…

2026/10/19 4:48:02 阅读更多 →

日新闻

频率跟踪型PWM电源设计:臭氧发生器谐振点漂移与软开关实现

频率跟踪型PWM电源设计:臭氧发生器谐振点漂移与软开关实现

简介:本资源为电源技术方向的学术研究文档,聚焦介质阻挡放电型臭氧发生器电源的频率跟踪型PWM控制策略,面向电力电子、高压电源及臭氧应用领域的科研人员与工程技术人员。针对负载呈容性、等效电容随外加电压升高而增大、谐振频率随之漂移的难…

2026/10/19 0:00:47 阅读更多 →
Vibe Coding 遇上 TaoToken:把开发者思维圣殿的灵感流接入统一 Key 通道

Vibe Coding 遇上 TaoToken:把开发者思维圣殿的灵感流接入统一 Key 通道

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/19 0:00:47 阅读更多 →
HundredCV-Chat话题建模实战教程:利用4,871个内置话题标签构建主题分析系统

HundredCV-Chat话题建模实战教程:利用4,871个内置话题标签构建主题分析系统

【免费下载链接】HundredCV-Chat 项目地址: https://ai.gitcode.com/hf_mirrors/Jax-dan/HundredCV-Chat 点击查看 免费下载 HundredCV-Chat 是一个由 100 位青年简历数据开发而来的中文多轮对话数据集,共包含 24,750 组日常闲聊对话和 4,871 个话题标签…

2026/10/19 0:00:47 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型(GMM)的语音识别系统,很多人第一反应就是一堆数学公式,觉得门槛很高。但如果你真的在MATLAB里把它落地跑通,会发现核心其实就是三件事:把声音变成特征向量,用GMM给每个类别…

2026/10/18 0:00:55 阅读更多 →
数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人,但落到具体操作上,无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程:对图像做反白、改调色板、彩色转灰度,最后把像素数据导出成txt文件。单看每一…

2026/10/18 0:00:55 阅读更多 →
机器人大脑技术盘点:具身智能的感知、决策与数据闭环

机器人大脑技术盘点:具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词,你会发现一个很有意思的现象:每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型,有人指的是运动控制系统,还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/19 1:30:52 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/19 2:54:50 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 17:22:31 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/18 12:16:16 阅读更多 →