羽球场边工具 HarmonyOS 元服务实战（03）：轻量计分页的状态机

发布时间：2026/10/15 18:56:30

羽球场边工具 HarmonyOS 元服务实战（03）：轻量计分页的状态机
比分不是两个孤立数字场边计分最怕的不是按钮少而是误触后的状态没有出处。页面把双方分数、队名、已结束记录和结果提示放在同一处管理加分与撤销都经过同一个入口因此分数不会被减到负数。分数相同并不代表一场比赛已经有结果。结束动作先判断平分再决定是否生成记录这让“继续打一会儿”的提示成为一个明确的业务分支而不是在列表里留下没有胜者的半成品。用不可为负的变更函数处理误触addScore(team: string, delta: number): void { if (team A) { this.scoreA Math.max(0, this.scoreA delta); } else { this.scoreB Math.max(0, this.scoreB delta); } }记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存的是结论快照不是对界面文本的复制队名随后被修改也不会反向改变已经结束的比赛。结束动作只在胜负成立时写入记录if (this.scoreA this.scoreB) { this.finishedText 比分相同继续打一会儿再结束。; return; } const winner this.scoreA this.scoreB ? this.playerA : this.playerB;最近记录采用前插并截断为五条。场边工具的目标是快速确认刚结束的结果而不是承担完整赛季档案固定窗口能限制页面渲染量也让最新一场始终靠近操作区。最近五场为何采用前插截断关注点处理方式可观察结果比分不是两个孤立数字场边计分最怕的不是按钮少而是误触后的状态没有出处。页面把双状态不依赖页面文案结束动作只在胜负成立时写入记录记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存分支可回读从平分到获胜的可观察结果实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比操作结果可核对实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住把两边打成平分时结束按钮给出继续提示再让其中一边领先后结束最新结果会出现在最近结束区域。从平分到获胜的可观察结果next.unshift({ id: score_${Date.now()}, playerA: { name: this.playerA, score: this.scoreA }, playerB: { name: this.playerB, score: this.scoreB }, scoringSystem: 21, winner, finishedAt: Date.now() });场边计分最怕的不是按钮少而是误触后的状态没有出处。页面把双方分数、队名、已结束记录和结果提示放在同一处管理加分与撤销都经过同一个入口因此分数不会被减到负数。最近记录采用前插并截断为五条。场边工具的目标是快速确认刚结束的结果而不是承担完整赛季档案固定窗口能限制页面渲染量也让最新一场始终靠近操作区。撤销、重置与结束的边界this.history next.slice(0, 5); this.finishedText ${winner} 获胜; // 页面只显示最近的、已经结束的比赛 // 平分局不会进入历史列表实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住把两边打成平分时结束按钮给出继续提示再让其中一边领先后结束最新结果会出现在最近结束区域。分数相同并不代表一场比赛已经有结果。结束动作先判断平分再决定是否生成记录这让“继续打一会儿”的提示成为一个明确的业务分支而不是在列表里留下没有胜者的半成品。关键实现片段import { router } from kit.ArkUI; import { ScoreMatch } from ../common/Models; import { AppColors, AppSizes, AppText } from ../common/Theme; Component Entry struct QuickScoringPage { State playerA: string A队; State playerB: string B队; State scoreA: number 0; State scoreB: number 0; State history: ScoreMatch[] []; State finishedText: string ; addScore(team: string, delta: number): void { if (team A) { this.scoreA Math.max(0, this.scoreA delta); } else { this.scoreB Math.max(0, this.scoreB delta); } } reset(): void { this.scoreA 0; this.scoreB 0; this.finishedText ; } finish(): void { if (this.scoreA this.scoreB) { this.finishedText 比分相同继续打一会儿再结束。; return; } const winner this.scoreA this.scoreB ? this.playerA : this.playerB; const next this.history.slice(); next.unshift({ id: score_${Date.now()}, playerA: { name: this.playerA, score: this.scoreA }, playerB: { name: this.playerB, score: this.scoreB }, scoringSystem: 21, winner, finishedAt: Date.now() }); this.history next.slice(0, 5); this.finishedText ${winner} 获胜; } build() { Column() { Row() { Text(‹) .width(48) .height(AppSizes.APP_BAR) .fontSize(AppText.HEADING) .fontColor(AppColors.WHITE) .textAlign(TextAlign.Center) .onClick(() router.back()); Text(实时计分) .fontSize(AppText.SUBTITLE) .fontWeight(FontWeight.Bold) .fontColor(AppColors.WHITE) .textAlign(TextAlign.Center) .layoutWeight(1); Text().width(48); } .height(AppSizes.APP_BAR) .width(100%) .backgroundColor(AppColors.BRAND); Scroll() { Column() { Row() { TextInput({ text: this.playerA, placeholder: A队 }) .height(AppSizes.BTN_HEIGHT) .layoutWeight(1) .onChange((value: string) this.playerA value); TextInput({ text: this.playerB, placeholder: B队 }) .height(AppSizes.BTN_HEIGHT) .layoutWeight(1) .margin({ left: AppSizes.GAP_MD }) .onChange((value: string) this.playerB value); } .width(100%); Row() { Text(${this.scoreA}) .fontSize(72) .fontWeight(FontWeight.Bold) .fontColor(this.scoreA this.scoreB ? AppColors.BRAND : AppColors.TEXT_SECONDARY) .layoutWeight(1) .textAlign(TextAlign.Center); Text(:) .fontSize(AppText.HEADING) .fontWeight(FontWeight.Bold) .fontColor(AppColors.TEXT_MUTED); Text(${this.scoreB}) .fontSize(72) .fontWeight(FontWeight.Bold) .fontColor(this.scoreB this.scoreA ? AppColors.ACCENT : AppColors.TEXT_SECONDARY) .layoutWeight(1) .textAlign(TextAlign.Center); } .width(100%) .padding({ top: AppSizes.GAP_XL, bottom: AppSizes.GAP_XL }); Row() { Button(1) .layoutWeight(1) .height(64) .fontSize(AppText.TITLE) .backgroundColor(AppColors.BRAND) .fontColor(AppColors.WHITE) .borderRadius(AppSizes.RADIUS_MD) .onClick(() this.addScore(A, 1)); Button(1) .layoutWeight(1) .height(64) .fontSize(AppText.TITLE) .backgroundColor(AppColors.ACCENT) .fontColor(AppColors.WHITE) .borderRadius(AppSizes.RADIUS_MD) .margin({ left: AppSizes.GAP_MD }) .onClick(() this.addScore(B, 1)); } .width(100%); Row() { Button(A撤销) .layoutWeight(1) .height(AppSizes.BTN_HEIGHT) .backgroundColor(AppColors.INPUT) .fontColor(AppColors.TEXT_PRIMARY) .onClick(() this.addScore(A, -1)); Button(重置) .layoutWeight(1) .height(AppSizes.BTN_HEIGHT) .backgroundColor(AppColors.INPUT) .fontColor(AppColors.TEXT_PRIMARY) .margin({ left: AppSizes.GAP_SM, right: AppSizes.GAP_SM }) .onClick(() this.reset()); Button(B撤销) .layoutWeight(1) .height(AppSizes.BTN_HEIGHT) .backgroundColor(AppColors.INPUT) .fontColor(AppColors.TEXT_PRIMARY) .onClick(() this.addScore(B, -1)); } .width(100%) .margin({ top: AppSizes.GAP_MD }); Button(结束比赛) .width(100%) .height(AppSizes.BTN_HEIGHT) .backgroundColor(AppColors.SUCCESS) .fontColor(AppColors.WHITE) .borderRadius(AppSizes.RADIUS_MD) .margin({ top: AppSizes.GAP_LG }) .onClick(() this.finish()); if (this.finishedText.length 0) { Text(this.finishedText) .fontSize(AppText.BODY) .fontColor(AppColors.BRAND) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .width(100%) .margin({ top: AppSizes.GAP_MD }); } if (this.history.length 0) { Column() { Text(最近结束) .fontSize(AppText.TITLE) .fontWeight(FontWeight.Bold) .fontColor(AppColors.TEXT_PRIMARY)用不可为负的变更函数处理误触、结束动作只在胜负成立时写入记录与最近五场为何采用前插截断共同约束了这条处理链输入先被归类计算或异步调用只在定义的入口发生页面随后读取一个明确的结果。把这些判断分散在按钮回调里会让一次重进、一次重复点击或一次失败返回都变成难以定位的差异。从平分到获胜的可观察结果不是事后补上的提示而是模型在边界条件下仍然要给出的答案。用户只需要看到可继续的操作模块内部则保留足够的状态来解释为什么当前结果是这样。实施取舍记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存的是结论快照不是对界面文本的复制队名随后被修改也不会反向改变已经结束的比赛。实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住把两边打成平分时结束按钮给出继续提示再让其中一边领先后结束最新结果会出现在最近结束区域。比分不是两个孤立数字所对应的数据不应依赖临时文本或视图顺序。将事实保留为字段、记录或令牌能够让同一动作在再次进入页面后得到一致的解释也为后续把能力收敛为轻量组件留下稳定边界。操作验证实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住把两边打成平分时结束按钮给出继续提示再让其中一边领先后结束最新结果会出现在最近结束区域。在验证过程中先观察初始状态再执行唯一的主题动作最后回读结果区或系统状态。若输入不满足条件页面应给出可理解的分支若条件恢复用户可以从当前页面再次发起操作而不需要退出并重新建立上下文。更多系统能力可参考 HarmonyOS 开发者文档。规则落到界面之前比分不是两个孤立数字不是展示层的装饰语而是决定输入如何进入状态、状态如何产生结果的约束。场边计分最怕的不是按钮少而是误触后的状态没有出处。页面把双方分数、队名、已结束记录和结果提示放在同一处管理加分与撤销都经过同一个入口因此分数不会被减到负数。结束动作只在胜负成立时写入记录需要把可复算的数据留在模型里记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存的是结论快照不是对界面文本的复制队名随后被修改也不会反向改变已经结束的比赛。从平分到获胜的可观察结果要求页面把正常路径与异常路径放到同一个可观察范围中。实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住把两边打成平分时结束按钮给出继续提示再让其中一边领先后结束最新结果会出现在最近结束区域。当用户重复点击、修改输入或离开后再回来时结果应当来自已定义的状态和规则而不是依赖某一次组件渲染的偶然顺序。操作阶段应观察的字段通过条件初始化默认状态与输入不遗留上一轮结果主动作主题相关值变化与规则一致回读结果或提示可继续操作风险防护点处理结果重复动作单一状态入口不生成旁路数据无效输入条件分支返回明确提示页面重进受控恢复状态可解释状态变化应可复盘结果应可解释并且能在下一次操作时继续被用户使用。每一次状态迁移都应保留足够的业务语义用户能看懂当前结果维护者能从输入、规则和结果之间还原处理过程。把边界条件写成明确分支能够避免异常发生时把旧结果误当成新结果也让后续扩展不必回到页面里寻找隐式判断。

相关新闻

计算机毕业设计之基于springboot+vue框架的在线答题系统

计算机毕业设计之基于springboot+vue框架的在线答题系统

随着新世纪无纸化办公方式的普及，自动化信息处理和基于网络的信息交互方式已被广泛应用。现在很多行业基本上都是交由计算机进行管理和测试，网络与计算机已成为整个线上管理体系中的重要组成部分。虽然信息技术广泛应用和数据存取更加方便，但…

2026/10/15 16:06:29 阅读更多 →
深度测评｜沈阳越想微智：以硬核技术重塑小程序定制行业标杆

深度测评｜沈阳越想微智：以硬核技术重塑小程序定制行业标杆

当前小程序定制行业普遍存在模板化套用、功能同质化、技术浅层化、落地效果薄弱等乱象，多数服务商依赖开源模板套壳开发，难以适配企业个性化业务场景，导致数字化建设流于形式、投入与价值严重不匹配。本次测评从技术体系、团队架构、AI落地能…

2026/10/10 5:53:06 阅读更多 →
省考行测判断推理：图形、定义、类比、逻辑四大题型核心解题框架与实战技巧

省考行测判断推理：图形、定义、类比、逻辑四大题型核心解题框架与实战技巧

1. 项目概述：一份能让你“开窍”的省考判断推理笔记 如果你正在准备省考，尤其是行测部分，那么判断推理这个模块，大概率是你又爱又恨的存在。爱它，是因为它逻辑性强，规律相对固定，掌握了方法提分…

2026/10/13 13:48:48 阅读更多 →

最新新闻

STM32裸机实现Modbus RTU主从站全功能通信

STM32裸机实现Modbus RTU主从站全功能通信

简介：本资源是一套面向嵌入式开发初学者与工业通信实践者的STM32 MODBUS RTU全功能码通信实战工程，聚焦单片机与PLC、传感器等工业设备的串行互连需求，解决MODBUS协议栈移植难、功能码覆盖不全、RS485硬件适配易出错等典型问题。压缩包共787个…

2026/10/15 18:55:43 阅读更多 →
仓颉 stdx 的 Form 类实战指南：URL 查询参数与表单键值对的构造与读取

仓颉 stdx 的 Form 类实战指南：URL 查询参数与表单键值对的构造与读取

标准库网络密码学并发编程 【免费下载链接】cangjie_stdx 仓颉编程语言提供了 stdx 模块，该模块提供了网络、安全等领域的通用能力。 项目地址： https://gitcode.com/Cangjie/cangjie_stdx 点击查看 免费下载 本指南围绕 stdx.encoding.url 包中的 Form…

2026/10/15 18:55:43 阅读更多 →
STM32F4多通道DMA ADC配置指南：从原理到避坑

STM32F4多通道DMA ADC配置指南：从原理到避坑

简介：这份资源面向STM32F4嵌入式开发者与学习者，聚焦多通道ADC与DMA协同采集这一实战主题，帮助解决多路模拟信号高速采样时CPU占用高、中断频繁、实时性不足的问题。压缩包共103个文件，约846KB，以47个.h头文件与46个.c…

2026/10/15 18:55:43 阅读更多 →
业务部门用了ChatBI后，怎么优化实现持续决策增值

业务部门用了ChatBI后，怎么优化实现持续决策增值

导语 一句话答案：业务部门用ChatBI（观远问数Agent，是基于大语言模型打造的智能数据问答产品，支持业务人员用自然语言快速取数、获取数据洞察）实现持续决策增值，核心是从“单次临时问数”升级为“场景拓展-知…

2026/10/15 18:55:43 阅读更多 →
Tomcat8+Java7+ExtJS WebSocket聊天室实现与避坑指南

Tomcat8+Java7+ExtJS WebSocket聊天室实现与避坑指南

简介：基于Tomcat8Java7ExtJS的WebSocket聊天室实现是一份完整的实时通信入门源码，适合刚接触Java Web与前端开发的读者。项目演示了如何通过JSR 356标准API定义服务端端点，并利用ExtJS组件搭建聊天界面，帮助理解网页端与服务器之间…

2026/10/15 18:55:43 阅读更多 →
cash-ls 完全指南：纯 ES6 跨平台实现的 Unix ls 命令

cash-ls 完全指南：纯 ES6 跨平台实现的 Unix ls 命令

开发工具CLI 【免费下载链接】cash Cross-platform Linux commands in ES6 项目地址： https://gitcode.com/gh_mirrors/ca/cash 点击查看 免费下载 导读 cash-ls 是 Cash 项目（Cross-platform Linux commands in ES6）中负责目录与文件列表的…

2026/10/15 18:54:42 阅读更多 →

日新闻

Docker Compose 容器化部署 ChirpStack LoRaWAN 网络服务器实战

Docker Compose 容器化部署 ChirpStack LoRaWAN 网络服务器实战

1. 为什么选择容器化方式部署 LoRa 网络服务LoRa 物联网项目落地时，网络服务器是整个链路的核心枢纽。它负责接收网关上报的数据包、完成去重与解密、再把有效载荷分发给上层应用。早期大家习惯把网络服务器直接装在物理机上，依赖一堆系统库和特定版本的…

2026/10/15 0:00:46 阅读更多 →
共享LLM服务下的跨模型自动扩缩容：Kubernetes实战与避坑指南

共享LLM服务下的跨模型自动扩缩容：Kubernetes实战与避坑指南

1. 共享推理服务里，扩缩容到底难在哪做过大模型推理服务部署的人，大概都经历过这样的场景：一个团队共用一套推理集群，A 业务跑的是 7B 的小模型，B 业务跑的是 72B 的大模型，C 业务白天流量高、晚上几乎归零…

2026/10/15 0:00:46 阅读更多 →
Systemd 启动阶段根文件系统只读之谜：fstab 与 remount-fs 服务深度解析

Systemd 启动阶段根文件系统只读之谜：fstab 与 remount-fs 服务深度解析

1. 引子：一次内核恐慌引发的追查先从一个真实场景说起。某次我给一台老旧的嵌入式设备折腾系统裁减，为了把启动时间压进两秒以内，我手贱地把一串自认为“没用”的 systemd 服务给 disable 了，其中就包括systemd-remount-fs.servic…

2026/10/15 0:00:46 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/15 16:18:54 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/14 16:30:29 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/15 13:48:15 阅读更多 →

月新闻

我发现了一个新思路：用 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/15 0:14:36 阅读更多 →
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/14 22:45:47 阅读更多 →
黑夜航拍船只数据集训练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/15 9:49:14 阅读更多 →