鸿蒙 ArkTS 实战：Recipe Rewriter 从轻量生成到草稿管理完整解析

鸿蒙 ArkTS 实战Recipe Rewriter 从轻量生成到草稿管理完整解析前言Recipe Rewriter 是一个面向菜谱改写助手的鸿蒙 ArkTS 单页工具。它把主题输入、数量统计、提示备注和状态保存放在同一屏适合快速生成、筛选和沉淀内容草稿。项目服务于 家庭用户或内容作者把菜谱按口味、步骤和购物清单重新整理。对美食博主、家庭料理用户、轻食店运营来说真正重要的是把灵感或草稿从临时想法变成可追踪的列表而不是停留在一次性输入框里。业务痛点菜谱改写需要同时考虑食材、步骤、口味和采购清单手动整理容易遗漏关键说明。图示说明本文围绕 Recipe Rewriter 的页面状态、草稿记录、统计卡片和保存闭环进行拆解。一、业务定位与产品目标1.1 面向的使用场景用草稿列表管理不同菜谱版本用户可以快速保存满意方案并继续调整口味描述。 这类应用的核心不是替代完整平台而是在移动端提供一个短路径、低干扰、可持续整理的工作面板。1.2 页面能力概览当前页面可以拆成四个区域顶部标题明确工具用途。统计卡片展示Drafts与Saved。功能标签说明生成、调整、保存等能力边界。输入表单和草稿列表完成新增、展示与状态切换。页面区域实现元素业务意义标题区Text标识菜谱改写助手统计区totalAmount / savedCount统计菜谱草稿和保存进度标签区四个 Text 标签提示工具覆盖范围列表区ForEach管理草稿和结果二、工程结构与入口文件2.1 标准 Stage 结构项目采用标准鸿蒙 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 记录字段设计AiRecord用四个字段描述一条记录title表示主题amount表示数量口径note保存提示或结果状态saved表示是否已处理。interfaceAiRecord{title:string;amount:number;note:string;saved:boolean;}Staterecords:AiRecord[][{title:Tomato pasta,amount:1,note:Mild taste, list ready,saved:false},{title:Chicken soup,amount:1,note:Steps generated,saved:false}];3.2 默认数据的业务含义默认数据用于说明应用的真实使用方向也让首次打开页面时可以直接看到统计和列表效果。默认标题数量备注SavedTomato pasta1Mild taste, list readyfalseChicken soup1Steps generatedfalse这些默认记录覆盖食材输入、步骤生成、口味调整和购物清单能体现项目不是泛化空壳而是围绕具体内容流程设计。四、状态管理输入、模式与反馈4.1 页面状态字段页面使用State管理输入草稿、智能模式开关和状态文案。smartMode控制顶部开关status负责反馈新增是否成功。StatetitleText:string;StateamountText:string;StatenoteText:string;StatesmartMode:booleantrue;Statestatus:stringAI lightweight tool ready;4.2 草稿与正式记录分离输入框内容先进入titleText、amountText和noteText点击按钮且校验通过后才会写入 records。这个设计能避免半成品输入污染正式草稿列表。关键点生成类工具也需要记录闭环否则用户会得到一堆瞬时结果却无法持续比较和复用。五、统计逻辑数量与保存进度5.1 总量统计totalAmount()遍历 records把 amount 累加为Drafts。这个数字表示当前页面已经沉淀了多少菜谱草稿。5.2 状态统计savedCount()根据saved字段统计已处理记录并以已处理/总记录数的形式显示。privatetotalAmount():number{lettotal0;this.records.forEach((item:AiRecord){totalitem.amount;});returntotal;}privatesavedCount():number{letcount0;this.records.forEach((item:AiRecord){if(item.saved){count;}});returncount;}函数统计字段显示位置业务价值totalAmountamountDrafts掌握菜谱草稿规模savedCountsavedSaved掌握可复用结果比例toggleSavedindex列表勾选快速更新状态六、新增草稿流程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:Draft note,saved:false},...this.records];this.titleText;this.amountText;this.noteText;this.statusDraft added;}七、保存状态与刷新机制7.1 状态切换列表勾选会切换saved字段。随后通过数组展开生成新引用让界面稳定刷新。privatetoggleSaved(index:number):void{this.records[index].saved!this.records[index].saved;this.records[...this.records];}7.2 视觉反馈被勾选的记录会使用浅绿色背景未勾选记录保持白色。这种反馈能帮助用户快速区分待处理草稿和已保存结果。状态背景用户感知未处理#FFFFFF仍需比较或修改已处理#DCFCE7可以复用或归档输入异常状态文案需要修正输入八、统计卡片与功能标签8.1 顶部统计卡片顶部统计区左侧展示Drafts右侧展示Saved。紫色强调生成数量绿色强调已处理状态。Row({space:10}){Column({space:4}){Text(Drafts).fontSize(13).fontColor(#475569)Text(String(this.totalAmount())).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#7C3AED)}.layoutWeight(1).padding(14).backgroundColor(#EDE9FE).borderRadius(8)Column({space:4}){Text(Saved).fontSize(13).fontColor(#475569)Text(this.savedCount()/this.records.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 功能标签解读页面标签分别是Ingredient input、Step generate、Taste adjust、Shopping list对应内容生成工具的四个基本环节。食材输入确定输入对象。步骤生成形成初始结果。口味调整进行调整或判断。购物清单沉淀可复用结果。九、输入表单与列表渲染9.1 表单区域表单采用主题、数量、提示备注三个输入框配合一个新增按钮完成草稿创建。Column({space:10}){TextInput({placeholder:Input topic,text:this.titleText}).onChange((value:string)this.titleTextvalue)TextInput({placeholder:Count,text:this.amountText}).type(InputType.Number).onChange((value:string)this.amountTextvalue)TextInput({placeholder:Prompt note,text:this.noteText}).onChange((value:string)this.noteTextvalue)Button(Add draft).height(42).width(100%).onClick(()this.addRecord())}9.2 列表区域列表使用ForEach渲染 records。每一行都包含勾选框、标题、备注和数量适合快速浏览草稿质量和处理状态。ForEach(this.records,(item:AiRecord,index:number){Row(){Toggle({type:ToggleType.Checkbox,isOn:item.saved}).onChange(()this.toggleSaved(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(#7C3AED)}.padding(14).backgroundColor(item.saved?#DCFCE7:#FFFFFF).borderRadius(8).width(100%)})十、业务流程复盘10.1 标准路径Recipe Rewriter 的一次使用可以拆成四步输入菜谱或食材主题。填写生成份数。补充口味或步骤提示。满意后保存草稿。10.2 异常路径当标题为空或数量无效时新增动作会被拦截。这能保证列表中的草稿至少具备主题和数量两个核心信息。constamountNumber(this.amountText);constinvalidthis.titleText.trim().length0||!Number.isFinite(amount);if(invalid){this.statusEnter title and valid number;}十一、扩展设计11.1 持久化记录如果要从演示工具走向正式应用可以为记录增加 id、创建时间和更新时间并写入本地存储。interfacePersistedDraft{id:string;title:string;amount:number;note:string;saved:boolean;updatedAt:number;}11.2 行业能力扩展后续可以接入营养估算、人数换算、过敏源标注和购物清单导出。推荐按以下顺序扩展先做本地保存避免草稿丢失。再增加模板、分类和搜索能力。最后接入导出、分享或云端同步。十二、调试与验证12.1 核心验证点验证时重点检查新增草稿、数量统计、状态勾选、背景变化和错误提示。12.2 运行检查可以在 DevEco Studio 中启动预览或真机运行按输入、生成、保存的路径逐项验证。# 常规验证动作# 1. 输入主题、数量和提示备注# 2. 点击 Add draft 或 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察统计变化验证项预期结果业务意义有效新增列表顶部出现草稿快速沉淀内容结果空标题显示错误状态避免无主题记录勾选状态统计和背景同步变化区分可复用结果空备注自动写入默认备注保证列表可读十三、可复用的生成工具模式13.1 通用公式这类页面可以抽象成一个生成类工具公式输入主题、生成数量、提示备注、保存状态。输入主题 生成数量 提示备注 保存状态 可复用的轻量生成工具13.2 复用边界复用时不能只替换应用标题还要同步调整默认数据、统计名称、功能标签和业务说明否则生成工具会失去真实场景感。总结Recipe Rewriter 用简洁的 ArkTS 单页结构把菜谱改写助手场景中的生成、整理、保存动作串成闭环。它的重点不是复杂模型调用而是用清晰的状态和列表管理结果。对于 美食博主、家庭料理用户、轻食店运营 来说这种工具能减少临时记录和反复复制让草稿持续沉淀。后续补充持久化、模板和导出能力后它可以进一步扩展为更完整的内容生产助手。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability Kit