鸿蒙 ArkTS 实战：Short Review Generator 从智能草稿到保存闭环完整解析

前言

Short Review Generator 是一个面向短评生成器的鸿蒙 ArkTS 单页工具。它将主题输入、数量统计、提示备注、智能模式和保存状态组织在同一个移动端页面中。

项目服务于 用户根据体验关键词生成短评，选择语气并保留历史记录。对本地生活用户、测评作者、内容运营来说，核心价值是把一次性输入变成可追踪、可比较、可复用的草稿资产。

业务痛点：短评需要简洁又有个人感受，临时写作容易空泛或语气不稳定。

图示说明：本文围绕 Short Review Generator 的状态模型、草稿列表、统计卡片和保存闭环展开。

一、业务定位与产品目标

1.1 使用场景

用草稿列表保存不同主题的短评数量和语气备注，方便快速选择可发布版本。 这类工具最重要的是短路径和低干扰，让用户能在移动端快速记录想法、生成版本并保存结果。

1.2 页面能力概览

当前页面可以拆成四个区域：

1. 顶部标题，明确工具场景。

2. 统计卡片，展示Reviews与Saved。

3. 功能标签，提示输入、生成、调整和保存能力。

4. 表单与列表，完成新增草稿、展示备注和保存切换。

二、工程结构与入口文件

2.1 目录结构

项目采用标准 Stage 工程，主页面位于entry/src/main/ets/pages/Index.ets。这种结构对轻量工具很友好，业务逻辑集中，阅读路径明确。

entry/ src/ main/ ets/ entryability/ EntryAbility.ets pages/ Index.ets module.json5

2.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 默认数据分析

默认数据能体现项目的真实方向，也能在首次运行时验证统计区和列表区是否联动。

这两条默认记录对应体验关键词、短评生成、语气选择和历史记录，让页面一打开就有明确业务语境。

四、状态管理：输入草稿与智能模式

4.1 状态字段

页面使用@State管理输入框内容、智能模式开关和状态文案。字段变化会直接驱动 UI 刷新。

@StatetitleText:string='';@StateamountText:string='';@StatenoteText:string='';@StatesmartMode:boolean=true;@Statestatus:string='AI draft workspace ready';

4.2 输入草稿隔离

输入框的内容不会直接写入正式列表，只有点击新增并通过校验后，才会形成新的草稿记录。

关键点：生成类工具不仅要产出内容，还要让内容能被保存、比较和复用。

五、统计逻辑：总量与保存数

5.1 总量统计

totalAmount()遍历drafts，把每条草稿的amount相加，得到Reviews的展示值。

5.2 保存统计

savedCount()统计saved为 true 的草稿数量，用于展示已保存结果与总草稿数的比例。

privatetotalAmount():number{lettotal=0;this.drafts.forEach((item:AiDraft)=>{total+=item.amount;});returntotal;}privatesavedCount():number{letcount=0;this.drafts.forEach((item:AiDraft)=>{if(item.saved){count++;}});returncount;}

六、新增草稿流程

6.1 校验规则

新增前先把数量转换为数字，再检查标题是否为空、数量是否有效。校验失败时只更新状态文案。

6.2 插入与清空

新草稿会被插入到列表顶部，同时清空输入框并更新状态，保证下一次输入不受上一次影响。

privateaddDraft():void{constamount=Number(this.amountText);if(this.titleText.trim().length===0||!Number.isFinite(amount)){this.status='Enter title and valid number';return;}this.drafts=[{title:this.titleText,amount:Math.round(amount),note:this.noteText.length>0?this.noteText:'Draft note',saved:false},...this.drafts];this.titleText='';this.amountText='';this.noteText='';this.status='Draft added';}

七、保存状态与刷新机制

7.1 切换保存

用户勾选草稿时，toggleSaved()会反转对应记录的 saved 字段，并通过数组展开生成新引用。

privatetoggleSaved(index:number):void{this.drafts[index].saved=!this.drafts[index].saved;this.drafts=[...this.drafts];}

7.2 视觉反馈

保存后的草稿背景变为浅绿色，未保存草稿保持白色。这个反馈能帮助用户快速判断哪些内容已经可复用。

八、统计卡片与能力标签

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.titleText=value)TextInput({placeholder:'Count',text:this.amountText}).type(InputType.Number).onChange((value:string)=>this.amountText=value)TextInput({placeholder:'Prompt note',text:this.noteText}).onChange((value:string)=>this.noteText=value)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 的使用流程可以拆成四步：

1. 输入体验关键词。
2. 填写短评数量。
3. 备注语气要求。
4. 保存满意短评。

10.2 异常路径

当标题为空或数量非法时，新增动作不会写入草稿列表，而是显示错误状态。

constamount=Number(this.amountText);constinvalid=this.titleText.trim().length===0||!Number.isFinite(amount);if(invalid){this.status='Enter title and valid number';}

十一、扩展设计

11.1 持久化模型

如果要把演示工具扩展成正式工具，可以给草稿增加 id、更新时间和分类字段。

interfacePersistedDraft{id:string;title:string;amount:number;note:string;saved:boolean;updatedAt:number;}

11.2 行业能力扩展

后续可以加入评分维度、平台字数限制、风格模板和发布记录。

扩展顺序可以保持为：

1. 增加本地持久化，避免草稿丢失。

2. 增加分类、搜索和模板能力。

3. 增加导出、分享或云端同步。

十二、调试与验证

12.1 核心验证点

验证时重点检查新增、统计、保存切换、背景变化和异常输入反馈。

12.2 运行检查

可以在 DevEco Studio 中运行预览或真机，按输入、生成、保存路径逐项验证。

# 常规验证动作# 1. 输入主题、数量和提示备注# 2. 点击 Add draft# 3. 检查新草稿是否位于顶部# 4. 勾选草稿并观察 Saved 统计

十三、可复用的智能草稿模式

13.1 通用公式

这类应用可以抽象成一个通用公式：主题输入、数量口径、提示备注、保存状态。

主题输入 + 数量口径 + 提示备注 + 保存状态 = 可复用的智能草稿工作台

13.2 复用边界

复用时不能只换标题，还要同步调整默认数据、统计文案、功能标签和业务解释，否则文章和应用都会失去场景可信度。

总结

Short Review Generator 用简洁的 ArkTS 页面实现了短评生成器的草稿管理闭环。它的重点不是复杂算法，而是让生成结果能被记录、比较、保存和复用。

对 本地生活用户、测评作者、内容运营 来说，这种工具能够降低临时整理成本。后续补齐持久化、模板和导出能力后，可以继续扩展成更完整的智能工作助手。

如果这篇文章对你有帮助，可以点赞、收藏并关注，后续会继续拆解更多鸿蒙 ArkTS 实战项目。

相关资源：

• HarmonyOS 应用开发
• ArkTS 语言基础
• ArkUI 声明式开发
• DevEco Studio
• Stage 模型应用结构
• Ability Kit