学习笔记结构化 —— AI 知识整理助手，鸿蒙原生应用深度解析

ljjde123545

44人浏览 · 2026-07-09 15:10:12

ljjde123545 · 2026-07-09 15:10:12 发布

学习笔记结构化 —— AI 知识整理助手，鸿蒙原生应用深度解析

一、引言

在学习过程中，我们常常会积累大量零散的笔记——课堂随记、阅读摘抄、灵感碎片……这些笔记虽然有价值，但相互之间缺乏关联，难以形成系统的知识体系。学习笔记结构化 这款鸿蒙原生 AI 应用，正是为解决这一问题而生：用户只需粘贴零散笔记，输入学科名称，AI 即可自动生成包含知识框架、重点内容和记忆锚点的结构化输出。

本文将从架构设计、鸿蒙技术深度解析、AI 亮点、技术挑战与用户体验设计五个维度，全面剖析这款应用的技术实现。
在这里插入图片描述

二、应用架构设计

2.1 整体架构

应用采用 MVS（Model-View-Service） 三层架构：

Model 层（NoteStructModel.ets）：定义 FrameworkEntry（框架条目）、NoteData（笔记结构化数据）、NSMessage（消息记录）和 NS_WELCOME（欢迎语）等。
View 层（NoteStructPage.ets）：基于 @Component 的声明式 UI，包含 TextArea 笔记输入区、TextInput 学科输入区、Scroll 结果展示区。
Service 层（NoteStructService.ets）：封装 AI 知识整理引擎，根据笔记内容和学科返回结构化的知识框架。

2.2 数据流

用户粘贴零散笔记 → @State bigText 更新
用户输入学科名称 → @State subjectText 更新
点击"生成框架" → 调用 service.getNoteStruct()
Service 返回 NoteData → @State currentData 更新
@Builder 框架层级展示

三、鸿蒙技术深度解析

3.1 @State + TextInput 学科输入

本应用与其他应用的不同之处在于使用了 TextInput 组件来接收学科输入：

@State subjectText: string = ''

Row() {
  Text('📖 学科名称（可选）')
    .fontSize(14)
    .fontColor(COLOR_TEXT_SEC)
  Blank()
}
.width('100%')
.padding({ left: 16, top: 4 })

TextInput({ text: this.subjectText, placeholder: '输入学科名称，如：中国历史、高中数学...' })
  .fontSize(14)
  .fontColor(COLOR_TEXT)
  .placeholderColor(COLOR_TEXT_SEC)
  .backgroundColor(COLOR_CARD)
  .borderRadius(12)
  .border({ width: 1, color: COLOR_BORDER })
  .padding(12)
  .margin({ left: 16, right: 16, top: 4, bottom: 8 })
  .onChange((val: string) => { this.subjectText = val })

TextInput vs TextArea 的选择：

学科名称是单行输入，使用 TextInput 更合适
笔记内容是多行输入，使用 TextArea
两种输入组件的合理搭配体现了 ArkTS 组件选择的灵活性

3.2 @Builder 框架层级展示

@Builder
buildResultCard(data: NoteData) {
  Column() {
    // 知识框架 - 紫色
    if (data.framework.length > 0) {
      Column() {
        Text('🏗️ 知识框架')
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLOR_PRIMARY)  // #6366F1

        ForEach(data.framework, (entry: FrameworkEntry) => {
          Column() {
            Row() {
              Text('📌').fontSize(16)
              Text(entry.topic)
                .fontSize(15)
                .fontWeight(FontWeight.Bold)
            }

            ForEach(entry.sub, (subItem: string) => {
              Row() {
                Text('  ↳').fontSize(13).fontColor(COLOR_TEXT_SEC)
                Text(subItem).fontSize(13).fontColor(COLOR_TEXT_SEC)
              }
            })
          }
          .backgroundColor('#EEF2FF')
          .borderRadius(12)
          .margin({ bottom: 8 })
        })
      }
      .border({ width: 1, color: COLOR_BORDER })
    }

    // 重点 - 黄色
    if (data.key_points.length > 0) {
      Column() {
        Text('⭐ 重点').fontColor('#F59E0B')
        ForEach(data.key_points, (point: string) => {
          Row() {
            Text('•').fontColor('#F59E0B')
            Text(point)
          }
        })
      }
      .border({ width: 1, color: '#FDE68A' })
    }

    // 记忆锚点 - 绿色
    if (data.memory_hooks.length > 0) {
      Column() {
        Text('🧠 记忆锚点').fontColor('#16A34A')
        ForEach(data.memory_hooks, (hook: string) => {
          Row() {
            Text('•').fontColor('#16A34A')
            Text(hook)
          }
        })
      }
      .border({ width: 1, color: '#BBF7D0' })
    }
  }
}

框架层级展示设计：

框架条目使用了两层嵌套的 ForEach 渲染：

一级主题 (topic)
  ↳ 二级子项 (sub[0])
  ↳ 二级子项 (sub[1])
  ↳ 二级子项 (sub[2])

这种树形结构的视觉呈现让用户一眼就能理解知识的层级关系。

3.3 Flex + ForEach 学科自适应

本应用不使用 Flex 选项选择，而是使用 TextInput 自由输入学科。Service 层通过关键词匹配实现学科自适应：

const key = (notes.toLowerCase() + ' ' + subject.toLowerCase()).trim()

if (key.includes('历史') || key.includes('history') || key.includes('朝代')) {
  // 返回历史学科的框架
}

if (key.includes('数学') || key.includes('math') || key.includes('函数') || key.includes('几何')) {
  // 返回数学学科的框架
}

// 默认：通用框架

这种设计支持无限学科的扩展，而不仅限于预设选项。

3.4 Scroll 结果容器

if (this.currentData !== null) {
  Scroll() {
    Column() {
      this.buildResultCard(this.currentData)
    }
    .padding({ bottom: 20 })
  }
  .layoutWeight(1)
  .scrollBar(BarState.Off)
}

3.5 条件渲染

// 按钮条件：仅需笔记非空（学科可选）
if (this.bigText !== '') {
  Text('生成框架')
    .onClick(() => { this.onGenerate() })
}

与其他应用不同，本应用的"生成框架"按钮只需要笔记内容非空，学科名称是可选的。这种设计降低了使用门槛，即使用户不输入学科名称，AI 也能通过笔记内容推断学科并生成合适的框架。

四、AI 应用亮点分析

4.1 零散笔记 → 层级框架重构

这是本应用最核心的 AI 能力。零散的笔记条目（如独立的日期、事件、概念）被自动归类整理为层级化的知识框架。

以历史学科为例，零散的笔记如"夏朝建立于约公元前 2070 年"、“秦始皇统一六国”、"三省六部制"等会被 AI 整理为：

一、朝代更迭主线
  ↳ 夏商周→秦汉→三国两晋南北朝→隋唐→宋元明清
  ↳ 重要转折点：秦统一、隋统一、元统一

二、重要制度变革
  ↳ 分封制→郡县制→三省六部制→行省制
  ↳ 科举制度的发展演变

三、重大历史事件
  ↳ 统一战争：秦灭六国、隋灭陈
  ↳ 改革变法：商鞅变法、王安石变法

4.2 记忆锚点 / 口诀生成

AI 不仅能整理知识框架，还能生成记忆锚点和口诀，帮助用户更高效地记忆：

朝代歌：“夏商与西周，东周分两段，春秋和战国，一统秦两汉……”
数学口诀：“一半平方，加减常数”（配方法口诀）
首字母法：将关键词首字母组成有意义的短语

这些记忆技巧将抽象的知识转化为易记的形式，大大提升了学习效率。

4.3 学科自适应

AI 能够根据笔记内容和学科名称自动判断学科类型，并生成对应的知识框架：

学科	框架结构	重点内容	记忆锚点风格
历史	朝代更迭、制度变革、重大事件	朝代顺序、制度演变逻辑	朝代歌、历史时间轴
数学	函数与方程、几何与图形、概率与统计	核心公式、解题方法	口诀记忆、手指记忆法
通用	核心概念、方法与应用、拓展延伸	知识脉络、重点难点	类比记忆、费曼学习法

4.4 从信息到知识的转化

AI 实现了从"信息收集"到"知识建构"的跃迁：

输入：零散的、无序的笔记碎片
处理：AI 分析内容关联性，按主题归类，建立层级关系
输出：结构化的知识框架 + 重点标识 + 记忆方法

这正是"知识管理"的核心——让离散的信息通过结构化转化为可用的知识。

五、关键技术挑战与解决方案

5.1 挑战一：零散笔记的自动分类

问题：用户的笔记内容可能涉及多个主题，AI 需要自动识别并分类。

解决方案：Service 层通过关键词匹配进行主题识别，将相关内容归类到对应的框架条目下。真实场景中可接入大模型进行语义理解，实现更精准的分类。

5.2 挑战二：层级深度的控制

问题：知识框架的层级深度需要适中，太浅不够详细，太深又显得冗余。

解决方案：统一采用"两级层级"（主题 → 子项），每个主题最多包含 3 个子项。这种结构既保证了足够的粒度，又避免了信息过载。

5.3 挑战三：记忆锚点的个性化

问题：不同学科的记忆方法不同，需要个性化的记忆锚点生成策略。

解决方案：针对不同学科类型，预设不同的记忆锚点生成策略：

历史 → 时间轴记忆、朝代歌
数学 → 口诀记忆、公式推导
通用 → 首字母法、类比记忆、费曼学习法

六、用户体验设计

6.1 视觉设计

沉稳紫色系：以 #EEF2FF 为主背景色，搭配 #6366F1 主色，传达知识沉淀的品牌感受
树形层级展示：使用 📌 标记主题、↳ 标记子项，视觉上呈现树形结构
三段式输出：知识框架 → 重点 → 记忆锚点，信息密度递减

6.2 交互设计

双输入设计：TextArea（笔记）+ TextInput（学科），满足不同输入需求
学科可选：降低使用门槛，不输学科也能生成通用框架
一键重置：清空所有输入

6.3 学习体验设计

框架条目采用浅紫色背景 (#EEF2FF)，在白色卡片中突出显示
重点内容使用 ⭐ 标记，便于复习时快速定位
记忆锚点提供可直接使用的记忆方法

七、总结

学习笔记结构化 应用通过鸿蒙原生技术栈，实现了一款强大的 AI 知识整理工具。在技术层面，@State + TextInput 的自由输入设计、@Builder 树形层级框架展示、ForEach 嵌套渲染，展现了鸿蒙 ArkTS 在处理复杂数据结构时的优势。在 AI 层面，零散笔记 → 层级框架重构、记忆锚点/口诀生成、学科自适应，体现了 AI 在教育学习领域的巨大潜力。

这款应用的核心价值在于：将学习从"被动接收信息"转变为"主动建构知识"。它不仅仅是笔记整理工具，更是学习方法的赋能者，帮助用户建立系统化的知识体系。

技术栈：HarmonyOS ArkTS · 声明式 UI · @State · @Builder · TextArea · TextInput · Flex · ForEach · Scroll