鸿蒙 ArkTS 实战：Live Stream Script Helper 从智能助手到保存闭环完整解析

前言

Live Stream Script Helper 是一个面向 直播脚本助手 的鸿蒙 ArkTS 单页工具。它把主题输入、数量统计、辅助开关、备注和保存状态组织到一个移动端工作台中。

项目服务于 围绕商品资料生成直播话术、节奏提示和模板保存。对 直播运营、主播、带货策划 来说，核心价值是把临时灵感或问题整理为可保存、可复用、可继续加工的条目。

业务痛点：直播话术需要兼顾开场钩子、节奏和商品卖点，临时写稿容易失去结构。

图示说明：本文围绕 Live Stream Script Helper 的状态模型、列表渲染、统计卡片和保存闭环展开。

一、业务定位与产品目标

1.1 使用场景

把脚本主题、段落数量、节奏备注和模板保存状态集中管理，提升直播前准备效率。 这类工具的关键不是复杂页面，而是把输入、生成、备注和保存形成稳定路径。

1.2 页面能力概览

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

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

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

3. 功能标签，提示核心业务流程。

4. 表单与列表，完成新增、展示、保存切换和反馈。

页面区域	代码元素	业务作用
标题区	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.json5

2.2 入口配置理解

页面实现负责交互，Ability 和模块配置负责加载。调试时先确认入口，再排查状态和渲染逻辑。

{
  "module": {
    "name": "entry",
    "type": "entry",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "exported": true
      }
    ]
  },
  "topic": "直播脚本助手"
}

三、数据模型：条目记录的最小闭环

3.1 字段设计

DraftItem 通过 title、amount、note、saved 四个字段描述一条业务条目。主题负责识别对象，数量负责统计，备注负责上下文，保存状态负责闭环。

interface DraftItem {
  title: string;
  amount: number;
  note: string;
  saved: boolean;
}

@State items: DraftItem[] = [
  { title: 'Skincare intro', amount: 3, note: 'Pace hint: fast hook', saved: false },
  { title: 'Tea pitch', amount: 2, note: 'Template saved', saved: false }
];

3.2 默认数据分析

默认数据体现了项目的真实场景，也让首次打开页面时能验证统计区和列表区是否联动正常。

默认标题	数量	备注	Saved
Skincare intro	3	Pace hint: fast hook	false
Tea pitch	2	Template saved	false

这两条记录分别触达 商品资料、脚本生成、节奏提示 和 模板保存，说明页面不是空泛模板，而是围绕具体任务组织。

四、状态管理：输入与辅助开关

4.1 状态字段

页面使用 @State 管理输入框、辅助开关和状态文案。helperOn 对应界面上的 Helper 开关。

@State titleText: string = '';
@State amountText: string = '';
@State noteText: string = '';
@State helperOn: boolean = true;
@State status: string = 'Assistant workspace ready';

4.2 草稿隔离

输入框内容先保存在临时状态中，只有点击按钮并通过校验后才会进入正式列表，避免半成品输入污染数据。

关键点：智能助手类应用也需要可靠的数据闭环，否则结果只是一闪而过的文本。

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

5.1 总量统计

totalAmount() 遍历 items，把 amount 累加为 Scripts，用于顶部左侧统计卡片。

5.2 保存统计

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

private totalAmount(): number {
  let total = 0;
  this.items.forEach((item: DraftItem) => {
    total += item.amount;
  });
  return total;
}

private savedCount(): number {
  let count = 0;
  this.items.forEach((item: DraftItem) => {
    if (item.saved) {
      count++;
    }
  });
  return count;
}

函数	统计来源	页面位置	业务意义
totalAmount	amount	Scripts	掌握脚本段落规模
savedCount	saved	Saved	掌握可复用结果比例
toggleSaved	index	列表勾选	更新保存状态

六、新增条目流程

6.1 校验规则

新增前会把数量输入转换为数字，并校验标题非空、数量有效。异常输入只更新状态文案，不写入列表。

6.2 顶部插入

通过数组展开把新条目插入到列表顶部，最新内容优先展示，符合移动端快速整理习惯。

private addItem(): void {
  const amount = Number(this.amountText);
  if (this.titleText.trim().length === 0 || !Number.isFinite(amount)) {
    this.status = 'Enter title and valid number';
    return;
  }
  this.items = [{
    title: this.titleText,
    amount: Math.round(amount),
    note: this.noteText.length > 0 ? this.noteText : 'No note yet',
    saved: false
  }, ...this.items];
  this.titleText = '';
  this.amountText = '';
  this.noteText = '';
  this.status = 'Item added';
}

七、保存状态与刷新机制

7.1 切换保存

勾选列表项时，toggleSaved() 会反转 saved 字段，并通过数组展开生成新引用，保证界面刷新。

private toggleSaved(index: number): void {
  this.items[index].saved = !this.items[index].saved;
  this.items = [...this.items];
}

7.2 视觉反馈

保存后的条目使用浅绿色背景，未保存条目保持白色。颜色变化能降低用户扫描成本。

状态	背景色	用户感知
未保存	#FFFFFF	仍需调整或比较
已保存	#DCFCE7	可复用或归档
输入异常	状态文案	需要修正输入

八、统计卡片与能力标签

8.1 顶部统计卡片

顶部双卡片分别显示业务总量和保存进度。紫色强调数量，绿色强调完成状态。

Row({ space: 10 }) {
  Column({ space: 4 }) {
    Text('Scripts').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.items.length).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#047857')
  }.layoutWeight(1).padding(14).backgroundColor('#D1FAE5').borderRadius(8)
}

8.2 功能标签解读

页面标签分别是 Product data、Script generate、Pace hints、Saved template，它们概括了从输入到保存的工作流。

• 商品资料：确定输入对象。

• 脚本生成：生成或整理核心结果。

• 节奏提示：补充筛选、提示或归档。

• 模板保存：沉淀可复用内容。

九、表单与列表渲染

9.1 表单区域

表单由标题、数量、备注三个输入框组成，配合按钮完成条目创建。

Column({ space: 10 }) {
  TextInput({ placeholder: 'Title', text: this.titleText })
    .onChange((value: string) => this.titleText = value)
  TextInput({ placeholder: 'Number', text: this.amountText })
    .type(InputType.Number)
    .onChange((value: string) => this.amountText = value)
  TextInput({ placeholder: 'Note', text: this.noteText })
    .onChange((value: string) => this.noteText = value)
  Button('Add item')
    .height(42)
    .width('100%')
    .onClick(() => this.addItem())
}

9.2 列表区域

列表使用 ForEach 渲染条目，每行包含保存勾选、标题、备注和数量，适合快速浏览与复盘。

ForEach(this.items, (item: DraftItem, 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 标准路径

Live Stream Script Helper 的一次完整使用可以拆成四步：

1. 输入商品资料。
2. 填写脚本段落数。
3. 备注节奏提示。
4. 保存话术模板。

10.2 异常路径

当标题为空或数量非法时，新增动作会被拦截，列表不会出现无效条目。

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

十一、扩展设计

11.1 持久化模型

正式应用可以为条目增加 id、分类、更新时间和来源字段，便于保存和检索。

interface PersistedItem {
  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. 点击新增按钮
# 3. 检查新条目是否位于顶部
# 4. 勾选条目并观察 Saved 统计

验证项	预期结果	业务意义
有效新增	列表顶部出现新条目	快速沉淀结果
空标题	显示错误状态	避免无效条目
勾选保存	统计和背景同步变化	区分可复用内容
空备注	写入 No note yet	保持列表可读

十三、可复用的智能助手模式

13.1 通用公式

这类工具可以抽象为一个通用公式：输入对象、数量口径、上下文备注、保存状态。

输入对象 + 数量口径 + 上下文备注 + 保存状态 = 可复用的智能助手工作台

13.2 复用边界

复用时不能只替换标题，还要同步修改默认数据、统计文案、标签和业务解释，否则页面会缺少真实场景感。

总结

Live Stream Script Helper 用简洁的 ArkTS 单页结构实现了 直播脚本助手 场景中的输入、生成、备注和保存闭环。它的核心价值是让智能结果沉淀为可继续处理的条目。

对 直播运营、主播、带货策划 来说，这种工具能降低临时记录成本。后续补充持久化、模板和导出能力后，可以继续演进为更完整的工作助手。

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

---

相关资源：

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