鸿蒙 ArkTS 实战：Lab Supply Cabinet 从业务记录到移动工作台完整解析

鸿蒙 ArkTS 实战Lab Supply Cabinet 从业务记录到移动工作台完整解析前言Lab Supply Cabinet 是一个面向实验室耗材柜的鸿蒙 ArkTS 单页应用。它的实现并不追求复杂后台而是把一线业务里最常见的记录、数量统计、备注和完成状态放到一个移动工作台中。项目适用于 实验室管理手套、移液枪头等耗材库存、批次和低库存提醒。对于实验室管理员、科研助理、项目负责人来说核心目标是减少临时纸条、聊天转发和表格补录把当天任务沉淀成可追踪的列表。业务痛点实验耗材消耗快批次和库存如果不及时记录容易影响实验排期和采购计划。图示说明本文围绕 Lab Supply Cabinet 的页面状态、业务记录、统计卡片和交互闭环展开。一、业务定位与页面目标1.1 解决什么问题耗材柜工具以库存数量为核心配合批次备注和完成状态帮助实验室保持清晰的库存视图。 这类小工具的关键不是功能数量而是把一个高频动作做短、做稳、做清楚。1.2 页面能力概览当前页面主要由四部分组成顶部标题确认工具所属业务场景。统计卡片展示Stock与 Done 完成度。业务标签概括页面覆盖的关键环节。表单和列表完成新增、展示、勾选和反馈。页面区域代码元素业务作用标题区Text标识实验室耗材柜场景统计区totalAmount / doneCount统计耗材库存与完成度标签区四个能力标签提示业务范围列表区ForEach承载记录闭环二、工程结构与入口文件2.1 目录结构项目采用标准 Stage 工程页面逻辑集中在entry/src/main/ets/pages/Index.ets。这对于工具型应用很合适定位问题时路径短阅读代码时上下文集中。entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json52.2 入口配置理解页面虽然是业务主体但应用加载依赖模块配置和 Ability 入口。理解这个关系可以避免只看页面代码却找不到运行入口的问题。{module:{name:entry,type:entry,abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,exported:true}]},topic:实验室耗材柜}三、数据模型四个字段完成闭环3.1 记录结构项目使用ToolRecord描述一条业务记录。title表示任务主体amount表示数量口径note保存上下文done表示是否完成。interfaceToolRecord{title:string;amount:number;note:string;done:boolean;}Staterecords:ToolRecord[][{title:Gloves M,amount:120,note:Batch A24,done:false},{title:Pipette tips,amount:35,note:Low stock alert on,done:false}];3.2 默认记录分析默认记录用于表达项目的真实业务方向同时也能在首次运行时验证统计和列表渲染是否正常。默认标题数量备注完成状态Gloves M120Batch A24falsePipette tips35Low stock alert onfalse这些默认数据分别触达耗材库存、领用登记、低库存提醒和批次管理不是空泛占位。四、状态管理设计4.1 页面状态字段页面把 records、输入框草稿、提醒开关和状态文案都放在State中。它们变化后会驱动 UI 重新渲染适合轻量页面直接管理。StatetitleText:string;StateamountText:string;StatenoteText:string;StatenotifyOn:booleantrue;Statestatus:stringTool workflow ready;4.2 草稿和正式记录分离三个输入框先写入草稿状态只有点击新增并通过校验后才进入 records。这样可以避免用户输入一半时影响正式列表。关键点移动端工具越简单越要保证数据进入列表前经过明确动作和基础校验。五、统计逻辑总量与完成度5.1 总量统计totalAmount()遍历 records把 amount 累加为Stock。它是顶部左侧卡片的数据来源。5.2 完成统计doneCount()统计 done 为 true 的记录数量并与总记录数拼接显示。这个指标能快速反映任务推进情况。privatetotalAmount():number{lettotal0;this.records.forEach((item:ToolRecord){totalitem.amount;});returntotal;}privatedoneCount():number{letcount0;this.records.forEach((item:ToolRecord){if(item.done){count;}});returncount;}函数统计来源页面表现业务意义totalAmountamountStock掌握耗材库存doneCountdoneDone掌握完成进度toggleDoneindex背景变化形成闭环六、新增记录流程6.1 输入校验新增时先把数量转换为数字再判断标题是否为空、数量是否有效。无效输入不会进入正式列表。6.2 顶部插入新增记录通过数组展开放到列表最前面新任务优先展示符合现场处理习惯。privateaddRecord():void{constamountNumber(this.amountText);if(this.titleText.trim().length0||!Number.isFinite(amount)){this.statusEnter title and valid number;return;}this.records[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length0?this.noteText:No note yet,done:false},...this.records];this.titleText;this.amountText;this.noteText;this.statusRecord added;}七、完成状态与刷新机制7.1 勾选完成列表项通过 checkbox 触发完成状态切换。代码修改对应记录后重新展开数组生成新引用从而稳定触发刷新。privatetoggleDone(index:number):void{this.records[index].done!this.records[index].done;this.records[...this.records];}7.2 视觉反馈完成后的记录使用浅绿色背景未完成记录保持白色。对于现场工具来说颜色反馈比长文本提示更高效。记录状态颜色含义未完成#FFFFFF仍需处理已完成#DCFCE7已形成闭环输入异常状态文案需要修正输入八、统计卡片与业务标签8.1 顶部统计卡片统计卡片采用左右布局左侧表示业务总量右侧表示完成比例。这个布局适合快速扫描。Row({space:10}){Column({space:4}){Text(Stock).fontSize(13).fontColor(#475569)Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.layoutWeight(1).padding(14).backgroundColor(#DBEAFE).borderRadius(8)Column({space:4}){Text(Done).fontSize(13).fontColor(#475569)Text(this.doneCount()/this.records.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 业务标签解读四个标签分别是Supply stock、Usage register、Low stock alert、Batch manage。它们帮助用户快速理解工具覆盖的业务范围。耗材库存确认记录对象。领用登记明确执行计划。低库存提醒处理异常或提醒。批次管理保留交接依据。九、表单与列表渲染9.1 表单区域表单由标题、数字、备注三个输入框组成配合一个新增按钮完成最短路径录入。Column({space:10}){TextInput({placeholder:Title,text:this.titleText}).onChange((value:string)this.titleTextvalue)TextInput({placeholder:Number,text:this.amountText}).type(InputType.Number).onChange((value:string)this.amountTextvalue)TextInput({placeholder:Note,text:this.noteText}).onChange((value:string)this.noteTextvalue)Button(Add record).height(42).width(100%).onClick(()this.addRecord())}9.2 列表区域列表中每条记录都包含勾选框、标题、备注和数量。信息密度较高但每个字段都有明确位置。ForEach(this.records,(item:ToolRecord,index:number){Row(){Toggle({type:ToggleType.Checkbox,isOn:item.done}).onChange(()this.toggleDone(index))Column({space:6}){Text(item.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#111827)Text(item.note).fontSize(14).fontColor(#475569)}.layoutWeight(1).margin({left:8})Text(String(item.amount)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1D4ED8)}.padding(14).backgroundColor(item.done?#DCFCE7:#FFFFFF).borderRadius(8).width(100%)})十、业务流程复盘10.1 标准路径Lab Supply Cabinet 的业务闭环可以拆成四步录入耗材名称。填写库存数量。备注批次或低库存状态。盘点完成后勾选。10.2 异常路径异常路径主要发生在新增动作前。标题为空或数量非法时列表不写入新数据而是更新状态文案。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、可扩展设计11.1 模型拆分当业务继续增长时可以把记录模型拆到独立文件并增加 id、时间戳和来源字段。interfacePersistedRecord{id:string;title:string;amount:number;note:string;done:boolean;updatedAt:number;}11.2 行业扩展后续可以接入扫码领用、阈值预警、采购申请和批次追踪。扩展顺序可以保持为增加本地持久化保证数据不因关闭应用丢失。增加行业字段让记录更贴近真实业务。增加导出、提醒或同步能力支撑团队协作。十二、调试与验证12.1 核心验证点验证时重点观察新增记录、统计变化、完成勾选和异常输入四类路径。12.2 运行检查可以在 DevEco Studio 中启动预览或真机运行按业务流程逐项验证交互是否符合预期。# 常规验证动作# 1. 输入标题、数量和备注# 2. 点击 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察 Done 统计验证项预期结果业务意义有效新增列表顶部新增记录快速追加现场任务空标题显示错误状态拦截无效数据勾选完成统计和背景同步变化完成闭环明确空备注自动写入默认备注记录保持完整十三、可复用的工具应用模式13.1 通用公式这个项目可以抽象为一个通用模式业务对象、数量口径、备注上下文、完成状态。很多线下管理工具都能从这个公式起步。业务对象 数量口径 备注上下文 完成状态 可落地的移动工作台13.2 复用时要注意什么复用时不能只替换标题还要同步调整默认数据、统计文案、功能标签和业务备注否则页面会失去行业可信度。总结Lab Supply Cabinet 通过简洁的 ArkTS 代码把实验室耗材柜中的高频记录动作整理成移动端工作台。它的核心价值在于让记录可新增、数量可统计、备注可追溯、状态可闭环。对 实验室管理员、科研助理、项目负责人 来说这种应用能够降低现场沟通成本并把当天任务形成清晰列表。随着持久化、提醒和行业字段补齐它可以继续扩展成更完整的业务工具。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability KitCSDN 写作平台Markdown 基础语法