鸿蒙 ArkTS 实战：English Email Assistant 从智能草稿到保存闭环完整解析

前言

English Email Assistant 是一个面向 英文邮件助手 的鸿蒙 ArkTS 单页工具。它将主题输入、数量统计、提示备注、智能模式和保存状态组织在同一个移动端页面中。

项目服务于 用户把中文要点转换为英文邮件，调整礼貌程度并复制发送。对 外贸业务员、跨境运营、职场沟通用户 来说，核心价值是把一次性输入变成可追踪、可比较、可复用的草稿资产。

业务痛点：英文邮件不仅要翻译准确，还要控制礼貌程度、语气和发送场景。

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

一、业务定位与产品目标

1.1 使用场景

用邮件草稿列表管理主题、数量和语气备注，帮助用户沉淀常用英文沟通模板。 这类工具最重要的是短路径和低干扰，让用户能在移动端快速记录想法、生成版本并保存结果。

1.2 页面能力概览

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

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

2. 统计卡片，展示 Emails 与 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 字段设计

AiDraft 使用 title、amount、note、saved 四个字段描述一条草稿。主题、数量、备注和保存状态共同构成最小闭环。

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

@State drafts: AiDraft[] = [
  { title: 'Meeting followup', amount: 1, note: 'Polite tone copied', saved: false },
  { title: 'Delay notice', amount: 1, note: 'Ready to send', saved: false }
];

3.2 默认数据分析

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

默认标题	数量	备注	Saved
Meeting followup	1	Polite tone copied	false
Delay notice	1	Ready to send	false

这两条默认记录对应 中文要点、英文邮件、礼貌程度 和 复制发送，让页面一打开就有明确业务语境。

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

4.1 状态字段

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

@State titleText: string = '';
@State amountText: string = '';
@State noteText: string = '';
@State smartMode: boolean = true;
@State status: string = 'AI draft workspace ready';

4.2 输入草稿隔离

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

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

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

5.1 总量统计

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

5.2 保存统计

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

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

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

函数	统计字段	页面表现	业务意义
totalAmount	amount	Emails	掌握邮件草稿规模
savedCount	saved	Saved	掌握可复用结果比例
toggleSaved	index	勾选状态	更新保存闭环

六、新增草稿流程

6.1 校验规则

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

6.2 插入与清空

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

private addDraft(): void {
  const amount = 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 字段，并通过数组展开生成新引用。

private toggleSaved(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('Emails').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 功能标签解读

页面标签分别是 Chinese points、English email、Politeness level、Copy send，对应从输入到保存的完整路径。

• 中文要点：确定输入内容。

• 英文邮件：形成初始结果。

• 礼貌程度：补充判断或优化。

• 复制发送：沉淀可复用结果。

九、表单与列表渲染

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

English Email Assistant 的使用流程可以拆成四步：

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 PersistedDraft {
  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 统计

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

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

13.1 通用公式

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

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

13.2 复用边界

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

总结

English Email Assistant 用简洁的 ArkTS 页面实现了 英文邮件助手 的草稿管理闭环。它的重点不是复杂算法，而是让生成结果能被记录、比较、保存和复用。

对 外贸业务员、跨境运营、职场沟通用户 来说，这种工具能够降低临时整理成本。后续补齐持久化、模板和导出能力后，可以继续扩展成更完整的智能工作助手。

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

---

相关资源：

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