鸿蒙 ArkTS 实战Pet Grooming Order 从专业流程到完成闭环完整解析前言Pet Grooming Order 是一个面向宠物美容预约场景的鸿蒙 ArkTS 单页应用。它没有把重点放在复杂后台能力上而是围绕一线人员最常见的记录、统计、提醒和完成确认构建移动端工作台。这类应用的价值在于把预约任务、备注信息和完成状态放到同一屏减少纸质登记、聊天转述和临时表格之间的切换。本文会结合项目中的Index.ets从数据模型、状态管理、统计逻辑、表单录入、列表渲染和扩展方向完整拆解。场景判断宠物服务需要同时记录项目、时间和服务前状态遗漏照片会影响交付确认。图示说明本文关注的是 Pet Grooming Order 这类轻量工具应用的页面状态、业务记录和交互闭环。一、项目定位与业务目标1.1 面向的真实业务项目服务于 宠物门店记录洗护、修甲等预约项目并留存服务前照片和时间备注。使用者主要包括宠物美容师、门店前台、店长他们对系统的要求通常不是功能堆叠而是打开即用、信息集中、状态明确。预约看板把每只宠物的服务项目和备注放在列表中便于前台与美容师协同。 这也是该项目选择单页结构的核心原因。1.2 页面能力拆分当前页面可以拆成四个层次顶部标题用来确认正在处理的业务类型。统计区域用Appointments和Done表示总量与完成度。功能标签区域用四个短标签压缩业务能力。表单与列表区域用于新增记录、展示备注、切换完成状态。能力区域项目实现业务含义统计卡片totalAmount / doneCount统计预约任务和完成数量功能标签四个 Text 标签明确页面覆盖的业务点录入表单三个 TextInput采集标题、数量和备注记录列表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,srcEntry:./ets/Application/AbilityStage.ts,abilities:[{name:EntryAbility,srcEntry:./ets/entryability/EntryAbility.ets,exported:true}]},articleTopic:宠物美容预约}这一层不直接参与业务计算却决定应用如何被系统加载。对单页工具而言保持配置简洁可以减少排查路径。三、数据模型设计3.1 记录对象的最小闭环Pet Grooming Order 的每条业务记录由title、amount、note、done四个字段构成。这个模型非常克制但已经覆盖了列表工具的核心闭环是什么、数量多少、有什么备注、是否完成。interfaceProRecord{title:string;amount:number;note:string;done:boolean;}Staterecords:ProRecord[][{title:Corgi wash,amount:1,note:Photo before service,done:false},{title:Cat nail trim,amount:1,note:Appointment 16:00,done:false}];3.2 默认数据的业务含义项目内置了两条默认记录方便首次打开页面时直接看到业务样例也能验证统计区和列表区是否联动正常。默认标题数量备注完成状态Corgi wash1Photo before servicefalseCat nail trim1Appointment 16:00false这两条数据不是随意占位而是围绕宠物档案、美容项目、预约时间和照片记录四个业务点设计。四、状态管理与输入缓存4.1 页面状态字段页面使用State保存记录列表、三个输入框内容、提醒开关和状态文案。所有字段都直接参与界面刷新因此适合放在组件状态中。StatetitleText:string;StateamountText:string;StatenoteText:string;StatenotifyOn:booleantrue;Statestatus:stringProfessional workflow ready;4.2 为什么输入框独立保存标题、数量、备注分别保存在titleText、amountText、noteText中避免用户输入过程直接污染记录列表。只有点击按钮并通过校验后才会生成新的记录。关键点表单草稿和正式记录分离可以降低误写入概率也让状态文案有明确的反馈位置。五、统计逻辑总量与完成度5.1 总量统计totalAmount()遍历 records把每条记录的 amount 累加。对于本项目来说它代表Appointments的当前总数也就是页面顶部最醒目的业务指标。5.2 完成数量统计doneCount()只统计done为 true 的记录并以完成数/总记录数的方式展示让用户快速判断剩余处理压力。privatetotalAmount():number{lettotal0;this.records.forEach((item:ProRecord){totalitem.amount;});returntotal;}privatedoneCount():number{letcount0;this.records.forEach((item:ProRecord){if(item.done){count;}});returncount;}方法输入输出页面位置totalAmountrecords.amountAppointments左侧统计卡片doneCountrecords.doneDone 比例右侧统计卡片toggleDone记录索引完成状态变更列表勾选框六、表单新增记录6.1 校验规则新增记录时先把数量字符串转换为数字再检查标题是否为空、数量是否有效。校验失败时页面会把状态文案改为Enter title and valid number。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 触发。代码先修改指定索引的done字段再使用数组展开生成新引用确保 UI 能感知 records 的变化。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(Appointments).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 功能标签页面中的四个标签分别是Pet profile、Grooming item、Appointment time、Photo record。它们不是按钮而是能力提示用来让使用者快速确认这个工具覆盖哪些工作环节。功能标签对应到中文业务可以理解为宠物档案确认记录主体。美容项目补充关键过程信息。预约时间让任务不会沉没。照片记录为后续交接保留依据。九、输入区域与列表渲染9.1 输入区域表单区采用三个输入框加一个按钮的结构字段少、路径短适合移动端单手录入。数量输入框使用InputType.Number降低录入非数字内容的概率。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根据 records 渲染。每行左侧是完成勾选中间是标题和备注右侧是数量信息密度较高但不会混乱。ForEach(this.records,(item:ProRecord,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 从录入到完成结合项目代码Pet Grooming Order 的一次完整业务流可以分为四步录入宠物或项目。填写预约数量。备注时间或照片状态。服务完成后勾选。10.2 异常路径当标题为空或数量无效时新增动作不会写入列表而是更新状态文案。这个处理虽然简单但避免了空记录进入正式列表。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、体验细节与可维护性11.1 低成本可维护项目没有引入额外状态库页面逻辑都在组件内部完成。对于这类轻量工具简单结构反而有利于交付和维护。11.2 可扩展边界后续可以加入宠物档案、疫苗提醒和服务前后照片对比。扩展时可以遵循下面顺序先把记录模型从页面拆到独立文件。再增加本地持久化保证关闭应用后数据不丢失。最后接入网络同步、权限和多端协同。interfacePersistedRecord{id:string;title:string;amount:number;note:string;done:boolean;updatedAt:number;}十二、调试与验证思路12.1 手动验证路径验证时重点看三件事新增记录是否在顶部出现、统计总量是否变化、勾选后完成比例和背景色是否同步更新。12.2 边界输入边界输入包括空标题、非数字数量、负数、超大数量和空备注。当前代码已经拦截空标题和非数字空备注会自动使用No note yet。# DevEco Studio 中可执行的常规验证动作# 1. 启动预览或真机运行# 2. 输入标题和数量# 3. 点击 Add record# 4. 勾选列表项观察 Done 统计验证项预期结果业务意义新增有效记录列表顶部出现新行现场可以快速追加任务空标题提交显示错误状态避免无效记录勾选完成Done 统计变化形成完成闭环备注为空使用默认备注保持列表信息完整十三、适合复用的页面模式13.1 通用记录台Pet Grooming Order 的实现可以抽象成通用记录台一个数组、三个输入字段、两个统计函数、一个新增函数、一个完成切换函数。许多门店、培训、医疗、仓储类小工具都可以复用这个模式。13.2 适配更多行业只要把默认数据、统计名称、功能标签和业务文案替换掉就能变成另一个行业的小工具。真正需要谨慎处理的是字段语义和统计口径不能只改标题。复用公式 业务对象 数量口径 备注上下文 完成状态 可闭环的移动工作台总结Pet Grooming Order 用非常克制的 ArkTS 实现完成了宠物美容预约场景中的核心闭环记录任务、统计数量、补充备注、切换完成状态。它的代码重点不在复杂算法而在业务信息组织方式。对于 宠物美容师、门店前台、店长 来说这种轻量工具的关键价值是减少切换、降低漏处理概率并把当天工作沉淀成清晰列表。后续如果接入本地持久化、提醒能力和行业字段这个项目就能从演示型页面继续成长为可落地的小型业务应用。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco Studio应用包结构Ability KitCSDN 写作平台Markdown 基础语法
