鸿蒙 ArkTS 实战Kids Story Generator 从轻量生成到草稿管理完整解析前言Kids Story Generator 是一个面向儿童故事生成器的鸿蒙 ArkTS 单页工具。它把主题输入、数量统计、提示备注和状态保存放在同一屏适合快速生成、筛选和沉淀内容草稿。项目服务于 家长或老师按角色设定生成睡前故事支持朗读准备和书架保存。对家长、幼教老师、儿童内容创作者来说真正重要的是把灵感或草稿从临时想法变成可追踪的列表而不是停留在一次性输入框里。业务痛点儿童故事需要角色、情节和朗读节奏匹配临时编写容易缺少连续性。图示说明本文围绕 Kids Story Generator 的页面状态、草稿记录、统计卡片和保存闭环进行拆解。一、业务定位与产品目标1.1 面向的使用场景项目用故事草稿列表保存主题和备注方便家长连续生成、朗读和收藏。 这类应用的核心不是替代完整平台而是在移动端提供一个短路径、低干扰、可持续整理的工作面板。1.2 页面能力概览当前页面可以拆成四个区域顶部标题明确工具用途。统计卡片展示Stories与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:Brave cloud bunny,amount:1,note:Read aloud ready,saved:false},{title:Tiny train hero,amount:1,note:Saved to shelf,saved:false}];3.2 默认数据的业务含义默认数据用于说明应用的真实使用方向也让首次打开页面时可以直接看到统计和列表效果。默认标题数量备注SavedBrave cloud bunny1Read aloud readyfalseTiny train hero1Saved to shelffalse这些默认记录覆盖角色设定、故事生成、朗读准备和书架保存能体现项目不是泛化空壳而是围绕具体内容流程设计。四、状态管理输入、模式与反馈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 累加为Stories。这个数字表示当前页面已经沉淀了多少故事草稿。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;}函数统计字段显示位置业务价值totalAmountamountStories掌握故事草稿规模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 顶部统计卡片顶部统计区左侧展示Stories右侧展示Saved。紫色强调生成数量绿色强调已处理状态。Row({space:10}){Column({space:4}){Text(Stories).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 功能标签解读页面标签分别是Role setting、Story generate、Read aloud、Saved shelf对应内容生成工具的四个基本环节。角色设定确定输入对象。故事生成形成初始结果。朗读准备进行调整或判断。书架保存沉淀可复用结果。九、输入表单与列表渲染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 标准路径Kids Story 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 或 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察统计变化验证项预期结果业务意义有效新增列表顶部出现草稿快速沉淀内容结果空标题显示错误状态避免无主题记录勾选状态统计和背景同步变化区分可复用结果空备注自动写入默认备注保证列表可读十三、可复用的生成工具模式13.1 通用公式这类页面可以抽象成一个生成类工具公式输入主题、生成数量、提示备注、保存状态。输入主题 生成数量 提示备注 保存状态 可复用的轻量生成工具13.2 复用边界复用时不能只替换应用标题还要同步调整默认数据、统计名称、功能标签和业务说明否则生成工具会失去真实场景感。总结Kids Story Generator 用简洁的 ArkTS 单页结构把儿童故事生成器场景中的生成、整理、保存动作串成闭环。它的重点不是复杂模型调用而是用清晰的状态和列表管理结果。对于 家长、幼教老师、儿童内容创作者 来说这种工具能减少临时记录和反复复制让草稿持续沉淀。后续补充持久化、模板和导出能力后它可以进一步扩展为更完整的内容生产助手。如果这篇文章对你有帮助可以点赞、收藏并关注后续会继续拆解更多鸿蒙 ArkTS 实战项目。相关资源HarmonyOS 应用开发ArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用结构Ability Kit