鸿蒙 ArkTS 实战Short Review Generator 从智能草稿到保存闭环完整解析前言Short Review Generator 是一个面向短评生成器的鸿蒙 ArkTS 单页工具。它将主题输入、数量统计、提示备注、智能模式和保存状态组织在同一个移动端页面中。项目服务于 用户根据体验关键词生成短评选择语气并保留历史记录。对本地生活用户、测评作者、内容运营来说核心价值是把一次性输入变成可追踪、可比较、可复用的草稿资产。业务痛点短评需要简洁又有个人感受临时写作容易空泛或语气不稳定。图示说明本文围绕 Short Review Generator 的状态模型、草稿列表、统计卡片和保存闭环展开。一、业务定位与产品目标1.1 使用场景用草稿列表保存不同主题的短评数量和语气备注方便快速选择可发布版本。 这类工具最重要的是短路径和低干扰让用户能在移动端快速记录想法、生成版本并保存结果。1.2 页面能力概览当前页面可以拆成四个区域顶部标题明确工具场景。统计卡片展示Reviews与Saved。功能标签提示输入、生成、调整和保存能力。表单与列表完成新增草稿、展示备注和保存切换。页面区域代码元素业务作用标题区Text标识短评生成器统计区totalAmount / savedCount统计短评草稿和保存进度标签区四个能力标签明确工具边界列表区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 字段设计AiDraft使用title、amount、note、saved四个字段描述一条草稿。主题、数量、备注和保存状态共同构成最小闭环。interfaceAiDraft{title:string;amount:number;note:string;saved:boolean;}Statedrafts:AiDraft[][{title:Cafe review,amount:2,note:Warm tone,saved:false},{title:Headphone review,amount:3,note:History saved,saved:false}];3.2 默认数据分析默认数据能体现项目的真实方向也能在首次运行时验证统计区和列表区是否联动。默认标题数量备注SavedCafe review2Warm tonefalseHeadphone review3History savedfalse这两条默认记录对应体验关键词、短评生成、语气选择和历史记录让页面一打开就有明确业务语境。四、状态管理输入草稿与智能模式4.1 状态字段页面使用State管理输入框内容、智能模式开关和状态文案。字段变化会直接驱动 UI 刷新。StatetitleText:string;StateamountText:string;StatenoteText:string;StatesmartMode:booleantrue;Statestatus:stringAI draft workspace ready;4.2 输入草稿隔离输入框的内容不会直接写入正式列表只有点击新增并通过校验后才会形成新的草稿记录。关键点生成类工具不仅要产出内容还要让内容能被保存、比较和复用。五、统计逻辑总量与保存数5.1 总量统计totalAmount()遍历drafts把每条草稿的amount相加得到Reviews的展示值。5.2 保存统计savedCount()统计saved为 true 的草稿数量用于展示已保存结果与总草稿数的比例。privatetotalAmount():number{lettotal0;this.drafts.forEach((item:AiDraft){totalitem.amount;});returntotal;}privatesavedCount():number{letcount0;this.drafts.forEach((item:AiDraft){if(item.saved){count;}});returncount;}函数统计字段页面表现业务意义totalAmountamountReviews掌握短评草稿规模savedCountsavedSaved掌握可复用结果比例toggleSavedindex勾选状态更新保存闭环六、新增草稿流程6.1 校验规则新增前先把数量转换为数字再检查标题是否为空、数量是否有效。校验失败时只更新状态文案。6.2 插入与清空新草稿会被插入到列表顶部同时清空输入框并更新状态保证下一次输入不受上一次影响。privateaddDraft():void{constamountNumber(this.amountText);if(this.titleText.trim().length0||!Number.isFinite(amount)){this.statusEnter title and valid number;return;}this.drafts[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length0?this.noteText:Draft note,saved:false},...this.drafts];this.titleText;this.amountText;this.noteText;this.statusDraft added;}七、保存状态与刷新机制7.1 切换保存用户勾选草稿时toggleSaved()会反转对应记录的 saved 字段并通过数组展开生成新引用。privatetoggleSaved(index:number):void{this.drafts[index].saved!this.drafts[index].saved;this.drafts[...this.drafts];}7.2 视觉反馈保存后的草稿背景变为浅绿色未保存草稿保持白色。这个反馈能帮助用户快速判断哪些内容已经可复用。状态背景色用户感知未保存#FFFFFF仍需修改或比较已保存#DCFCE7可复用或归档输入异常状态文案需要修正输入八、统计卡片与能力标签8.1 顶部统计卡片顶部统计区采用左右双卡片左侧展示草稿数量口径右侧展示保存进度。Row({space:10}){Column({space:4}){Text(Reviews).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.drafts.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#047857)}.layoutWeight(1).padding(14).backgroundColor(#D1FAE5).borderRadius(8)}8.2 功能标签解读页面标签分别是Experience keywords、Review generate、Tone select、History log对应从输入到保存的完整路径。体验关键词确定输入内容。短评生成形成初始结果。语气选择补充判断或优化。历史记录沉淀可复用结果。九、表单与列表渲染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.addDraft())}9.2 列表区域列表使用ForEach渲染草稿每条记录展示保存勾选、标题、备注和数量信息密度适合移动端快速扫描。ForEach(this.drafts,(item:AiDraft,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 标准路径Short Review Generator 的使用流程可以拆成四步输入体验关键词。填写短评数量。备注语气要求。保存满意短评。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# 3. 检查新草稿是否位于顶部# 4. 勾选草稿并观察 Saved 统计验证项预期结果业务意义有效新增列表顶部出现草稿快速沉淀内容空标题显示错误状态避免无主题记录勾选保存统计和背景同步变化区分可复用结果空备注写入 Draft note保持列表可读十三、可复用的智能草稿模式13.1 通用公式这类应用可以抽象成一个通用公式主题输入、数量口径、提示备注、保存状态。主题输入 数量口径 提示备注 保存状态 可复用的智能草稿工作台13.2 复用边界复用时不能只换标题还要同步调整默认数据、统计文案、功能标签和业务解释否则文章和应用都会失去场景可信度。总结Short Review Generator 用简洁的 ArkTS 页面实现了短评生成器的草稿管理闭环。它的重点不是复杂算法而是让生成结果能被记录、比较、保存和复用。对 本地生活用户、测评作者、内容运营 来说这种工具能够降低临时整理成本。后续补齐持久化、模板和导出能力后可以继续扩展成更完整的智能工作助手。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability Kit