鸿蒙 ArkTS 实战：Book Summary Card 从智能草稿到保存闭环完整解析

前言

Book Summary Card 是一个面向 读书总结卡片 的鸿蒙 ArkTS 单页工具。它将主题输入、数量统计、提示备注、智能模式和保存状态组织在同一个移动端页面中。

项目服务于 读者根据摘录生成书籍摘要、提取金句并分享卡片。对 读书博主、学生、自我提升读者 来说，核心价值是把一次性输入变成可追踪、可比较、可复用的草稿资产。

业务痛点：读书摘录如果没有总结和卡片化整理，后续复习与分享成本会很高。

在这里插入图片描述

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

一、业务定位与产品目标

1.1 使用场景

项目把书名、卡片数量、金句状态和保存状态集中管理，适合持续沉淀读书笔记。 这类工具最重要的是短路径和低干扰，让用户能在移动端快速记录想法、生成版本并保存结果。

1.2 页面能力概览

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

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

  2. 统计卡片，展示 Cards 与 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: 'Atomic Habits', amount: 1, note: 'Quote extracted', saved: false },
  { title: 'Deep Work', amount: 1, note: 'Card shared', saved: false }
];

3.2 默认数据分析

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

默认标题 数量 备注 Saved
Atomic Habits 1 Quote extracted false
Deep Work 1 Card shared 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 相加，得到 Cards 的展示值。

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 Cards 掌握总结卡片规模
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('Cards').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 功能标签解读

页面标签分别是 Excerpt input、Summary generate、Quote extract、Card share，对应从输入到保存的完整路径。

  • 摘录输入：确定输入内容。

  • 摘要生成：形成初始结果。

  • 金句提取：补充判断或优化。

  • 卡片分享：沉淀可复用结果。

九、表单与列表渲染

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

Book Summary Card 的使用流程可以拆成四步：

  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 复用边界

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

总结

Book Summary Card 用简洁的 ArkTS 页面实现了 读书总结卡片 的草稿管理闭环。它的重点不是复杂算法，而是让生成结果能被记录、比较、保存和复用。

对 读书博主、学生、自我提升读者 来说，这种工具能够降低临时整理成本。后续补齐持久化、模板和导出能力后，可以继续扩展成更完整的智能工作助手。

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

相关资源：

# harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

【昇腾】基于昇腾适配的GPToss大模型性能优化实操指南

avatar 人工智能6S服务平台

从慢得离谱到性能翻倍：昇腾910B迁移小模型MobileNet避坑与调优实录

一开始觉得是.to('cpu')慢，结果完全不是。性能问题必须用工具定位，Python层面的计时在异步场景下不可靠。尤其是在涉及NPU/GPU异步计算时，不加测出来的时间都是假的。对于ResNet18、MobileNet这种小计算量模型，调度开销是杀手，开启任务队列优化是必须的。MindStudio的Timeline视图非常直观，能精确到每个算子的微秒级耗时。这个工具一定要学会用。同时昇腾NPU首

avatar 人工智能6S服务平台

HarmonyOS ArkUI DatePicker / TimePicker 日期时间选择器完全指南

系列：鸿蒙 HarmonyOS 6.1 新特性实战 · 第 37 篇日期时间选择是几乎所有 App 都需要的功能。ArkUI 提供了内联式（嵌入页面）和弹窗式两种形态，分别对应 DatePicker/

avatar 人工智能6S服务平台