企业官网建设流程全解析

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

前言

Travel Plan Draft 是一个面向旅行计划草稿的鸿蒙 ArkTS 单页工具。它把主题输入、数量统计、提示备注和状态保存放在同一屏，适合快速生成、筛选和沉淀内容草稿。

项目服务于 用户按目的地生成日程、预算估算和出行清单。对自由行用户、旅行规划师、亲子出游家庭来说，真正重要的是把灵感或草稿从临时想法变成可追踪的列表，而不是停留在一次性输入框里。

业务痛点：旅行计划需要同时平衡天数、预算、路线和清单，碎片化记录很难快速比较方案。

图示说明：本文围绕 Travel Plan Draft 的页面状态、草稿记录、统计卡片和保存闭环进行拆解。

一、业务定位与产品目标

1.1 面向的使用场景

把不同目的地计划以草稿方式保存，用户可以按预算和清单状态继续完善方案。 这类应用的核心不是替代完整平台，而是在移动端提供一个短路径、低干扰、可持续整理的工作面板。

1.2 页面能力概览

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

1. 顶部标题，明确工具用途。

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

3. 功能标签，说明生成、调整、保存等能力边界。

4. 输入表单和草稿列表，完成新增、展示与状态切换。

二、工程结构与入口文件

2.1 标准 Stage 结构

项目采用标准鸿蒙 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 记录字段设计

AiRecord用四个字段描述一条记录：title表示主题，amount表示数量口径，note保存提示或结果状态，saved表示是否已处理。

interfaceAiRecord{title:string;amount:number;note:string;saved:boolean;}@Staterecords:AiRecord[]=[{title:'Suzhou weekend',amount:2,note:'Budget 1200',saved:false},{title:'Chengdu food trip',amount:4,note:'Checklist exported',saved:false}];

3.2 默认数据的业务含义

默认数据用于说明应用的真实使用方向，也让首次打开页面时可以直接看到统计和列表效果。

这些默认记录覆盖目的地输入、日程生成、预算估算和清单导出，能体现项目不是泛化空壳，而是围绕具体内容流程设计。

四、状态管理：输入、模式与反馈

4.1 页面状态字段

页面使用@State管理输入草稿、智能模式开关和状态文案。smartMode控制顶部开关，status负责反馈新增是否成功。

@StatetitleText:string='';@StateamountText:string='';@StatenoteText:string='';@StatesmartMode:boolean=true;@Statestatus:string='AI lightweight tool ready';

4.2 草稿与正式记录分离

输入框内容先进入titleText、amountText和noteText，点击按钮且校验通过后才会写入 records。这个设计能避免半成品输入污染正式草稿列表。

关键点：生成类工具也需要记录闭环，否则用户会得到一堆瞬时结果，却无法持续比较和复用。

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

5.1 总量统计

totalAmount()遍历 records，把 amount 累加为Plans。这个数字表示当前页面已经沉淀了多少旅行方案。

5.2 状态统计

savedCount()根据saved字段统计已处理记录，并以已处理/总记录数的形式显示。

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

六、新增草稿流程

6.1 输入校验

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

6.2 顶部插入策略

新草稿插入到列表顶部，便于用户优先查看刚生成或刚整理的内容。

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

七、保存状态与刷新机制

7.1 状态切换

列表勾选会切换saved字段。随后通过数组展开生成新引用，让界面稳定刷新。

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

7.2 视觉反馈

被勾选的记录会使用浅绿色背景，未勾选记录保持白色。这种反馈能帮助用户快速区分待处理草稿和已保存结果。

八、统计卡片与功能标签

8.1 顶部统计卡片

顶部统计区左侧展示Plans，右侧展示Saved。紫色强调生成数量，绿色强调已处理状态。

Row({space:10}){Column({space:4}){Text('Plans').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 功能标签解读

页面标签分别是Destination input、Schedule generate、Budget estimate、Checklist export，对应内容生成工具的四个基本环节。

• 目的地输入：确定输入对象。

• 日程生成：形成初始结果。

• 预算估算：进行调整或判断。

• 清单导出：沉淀可复用结果。

九、输入表单与列表渲染

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.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 标准路径

Travel Plan Draft 的一次使用可以拆成四步：

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 或 Add record# 3. 检查新记录是否位于顶部# 4. 勾选记录并观察统计变化

十三、可复用的生成工具模式

13.1 通用公式

这类页面可以抽象成一个生成类工具公式：输入主题、生成数量、提示备注、保存状态。

输入主题 + 生成数量 + 提示备注 + 保存状态 = 可复用的轻量生成工具

13.2 复用边界

复用时不能只替换应用标题，还要同步调整默认数据、统计名称、功能标签和业务说明，否则生成工具会失去真实场景感。

总结

Travel Plan Draft 用简洁的 ArkTS 单页结构，把旅行计划草稿场景中的生成、整理、保存动作串成闭环。它的重点不是复杂模型调用，而是用清晰的状态和列表管理结果。

对于 自由行用户、旅行规划师、亲子出游家庭 来说，这种工具能减少临时记录和反复复制，让草稿持续沉淀。后续补充持久化、模板和导出能力后，它可以进一步扩展为更完整的内容生产助手。

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

相关资源：

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