鸿蒙原生应用 ArkTS 表单工程：论文笔记页的 TextArea 录入与笔记列表

App 25「论文阅读助手」笔记 Tab（Func2Tab），是论文阅读笔记页——3 模块布局：Header（论文笔记）+ AddCard（新建笔记：关联论文 + 研究思路 TextArea + 保存按钮）+ SectionTitle（我的笔记）+ NoteList（3 条真实研究笔记：自注意力 Q/K/V、残差连接、MLM+NSP）。本篇基于 25-paper-reader/entry/src/main/ets/pages/Func2Tab.ets（约 95 行）逐段拆解，附 4 张实机截图。

一、整体结构：新建 + 列表

Func2Tab 是"论文笔记"的 3 模块布局——新建笔记 + 笔记列表：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 16 }) {
        this.AddCard()
        this.SectionTitle('我的笔记')
        this.NoteList()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

3 块结构：

1. Header — "论文笔记"标题
2. AddCard — 新建笔记（关联论文 + 研究思路 + 保存）
3. SectionTitle('我的笔记') + NoteList — 3 条笔记

"新建 + 列表"是笔记类 App 的标准布局（备忘录/Notion/印象笔记同款）——"先新建、后看已有"的漏斗。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header

Header 是"论文笔记"单行（与系列同款）：

@Builder Header() {
  Row() {
    Text('论文笔记')
      .fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text)
  }
  .width('100%').height(this.safeTop + 56)
  .padding({ top: this.safeTop, left: D.pad, right: D.pad })
  .backgroundColor(C.card)
  .alignItems(VerticalAlign.Bottom)
}

"论文笔记"是功能名（Tab 名=笔记、页面名=论文笔记）——"论文笔记"比"笔记"更具体（限定是论文的笔记）。

三、AddCard：新建笔记

AddCard 是新建笔记的输入区——关联论文 + 研究思路 + 保存：

@Builder AddCard() {
  Column({ space: 12 }) {
    Text('新建笔记').fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width('100%')
    TextInput({ placeholder: '关联论文' })
      .height(40).backgroundColor(C.cardSoft).borderRadius(D.rSm)
      .placeholderColor(C.textDim).placeholderFont({ size: 14 })
    TextArea({ placeholder: '记录你的研究思路、重点内容...' })
      .height(80).backgroundColor(C.cardSoft).borderRadius(D.rSm)
      .placeholderColor(C.textDim).placeholderFont({ size: 14 })
    Button('保存笔记')
      .width('100%').height(40)
      .fontSize(14).fontColor('#FFFFFF').backgroundColor(C.primary)
      .borderRadius(D.rSm)
      .onClick(() => { promptAction.showToast({ message: '笔记已保存' }); })
  }
  .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
}

3 元素：

1. "关联论文" TextInput（40vp）——输入论文标题（关联到哪篇论文）
2. "记录你的研究思路、重点内容..." TextArea（80vp）——笔记正文
3. "保存笔记" Button（40vp 石板灰实心）——点击弹 Toast

占位符的"引导性"：

• "关联论文"——告诉用户"先填这篇笔记属于哪篇论文"
• "记录你的研究思路、重点内容..."——告诉用户"笔记该写什么"（研究思路 + 重点内容）

"关联论文"是论文笔记的特色——对比通用笔记（备忘录），论文笔记必须"关联到具体论文"（否则不知道笔记是读哪篇写的）——"笔记的结构 = 业务需求"。

"保存笔记"点击弹 Toast "笔记已保存"——真实项目应：

1. 校验"关联论文"非空
2. 调 API 保存到后端
3. 笔记列表刷新（新笔记出现在顶部）

**"新建笔记 → 保存 → 列表刷新"**是笔记功能的完整闭环——demo 只做了"保存反馈"（未联动列表）。

四、NoteList：3 条真实研究笔记（本页核心）

NoteList 是 3 条真实研究笔记——每条的"笔记内容"都是真实的论文核心思想：

@Builder NoteList() {
  Column({ space: 12 }) {
    ForEach(this.notes, (n: Note) => {
      Column({ space: 8 }) {
        Row({ space: 8 }) {
          Text('📝').fontSize(18)
          Text(n.paper).fontSize(13).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1)
          Text(n.date).fontSize(11).fontColor(C.textDim)
        }.width('100%')
        Text(n.text).fontSize(13).fontColor(C.textSub).width('100%')
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
      .onClick(() => { promptAction.showToast({ message: n.paper }); })
    }, (n: Note) => n.id.toString())
  }.width('100%')
}

4.1 3 条笔记数据（真实研究笔记）

private notes: Note[] = [
  { id: 1, paper: 'Attention Is All You Need', text: '自注意力机制是核心创新，Q/K/V 矩阵的矩阵运算实现并行化。', date: '今天' },
  { id: 2, paper: 'ResNet', text: '残差连接解决了深层网络梯度消失问题，Identity Mapping 是关键。', date: '昨天' },
  { id: 3, paper: 'BERT', text: 'MLM + NSP 双任务预训练，双向编码器区别于 GPT 的单向。', date: '前天' }
];

3 条笔记都是"真实论文核心思想"：

笔记	论文	核心思想（真实）
1	Attention Is All You Need	自注意力机制 + Q/K/V 矩阵运算 + 并行化
2	ResNet	残差连接 + 解决梯度消失 + Identity Mapping
3	BERT	MLM + NSP 双任务 + 双向编码器 vs GPT 单向

"3 条笔记 = 3 篇论文的精华"：

• 自注意力 Q/K/V——Transformer 的核心（Query/Key/Value 矩阵）
• 残差连接 + Identity Mapping——ResNet 的核心（恒等映射）
• MLM + NSP——BERT 的核心（掩码语言模型 + 下一句预测）

"真实研究笔记"的价值（同首页/论文页）：

• 专业——AI 研究者看出"这笔记写对了"
• 教学——学生从笔记学到 3 篇经典论文的要点
• 一致——与首页（4 篇论文）、论文页（Transformer 摘要）形成"跨页学术一致性"

"笔记内容 = 论文精读的产出"——这是论文阅读 App 的终极价值：把"读论文"变成"记笔记"。

4.2 笔记卡 2 行结构

每张笔记卡 2 行：

第 1 行：

• 📝 emoji（18sp）
• 论文名（13sp 加粗 + layoutWeight(1)）——"Attention Is All You Need"
• 日期（11sp 灰）——"今天"

第 2 行：

• 笔记内容（13sp 灰）——"自注意力机制是核心创新，Q/K/V 矩阵的矩阵运算实现并行化。"

"论文名 + 日期"在上、"内容"在下——"标题行 + 内容行"是笔记卡的标准（备忘录同款）——"关联论文 + 日期"定位"这篇笔记读哪篇写的"。

五、@State 与"笔记数据流"

Func2Tab 0 个 @State——notes 是 private 普通数组（新建笔记未联动）——"0 状态笔记页"。

真实项目的"笔记数据流"：

1. 新建：AddCard 输入 → @State 双向绑定 → 保存调 API
2. 列表：@State notes 从 API 拉取 → ForEach 渲染
3. 更新：保存后 notes 整体替换（新笔记在前）→ 自动刷新

"新建 → 保存 → 刷新"的响应式闭环——demo 只做了"保存 Toast"（未联动列表）——"保存后列表刷新"是真实笔记功能的必备。

六、笔记 vs 评论 vs 批注

App 25 的"笔记"是独立笔记（在笔记 Tab 写）——论文阅读还有 2 种"记录"形态：

形态	特点	场景
独立笔记（App 25）	单独 Tab，一篇论文一条笔记	系统性总结
批注（页面内）	在论文正文旁写	精读细节
评论（社区）	公开讨论	学术交流

"独立笔记"是最基础的形态——App 25 采用它（简单）——真实论文工具（Zotero/ReadPaper）3 种都有。

"批注"是论文精读的进阶——在 PDF 正文高亮 + 旁注——App 25 只有独立笔记，真实项目应加批注。

七、3 条笔记的"论文思想精读"

App 25 的 3 条研究笔记不仅是"真实内容"，更是3 篇论文的思想精华——逐条精读：

笔记 1（Attention Is All You Need）："自注意力机制是核心创新，Q/K/V 矩阵的矩阵运算实现并行化。"

• Q/K/V = Query（查询）/Key（键）/Value（值）三个矩阵
• 注意力 = Q 和 K 点积 → softmax 权重 → 加权 V
• 矩阵运算并行化 = Transformer 比 RNN 快（RNN 串行、Transformer 并行）

笔记 2（ResNet）："残差连接解决了深层网络梯度消失问题，Identity Mapping 是关键。"

• 残差连接 = 输出 = F(x) + x（跳连）
• 梯度消失 = 深层网络反向传播时梯度衰减（残差让梯度直通）
• Identity Mapping = 恒等映射（x 直接跳连，不加变换）

笔记 3（BERT）："MLM + NSP 双任务预训练，双向编码器区别于 GPT 的单向。"

• MLM = Masked Language Model（掩码语言模型，随机遮字预测）
• NSP = Next Sentence Prediction（下一句预测）
• 双向 vs 单向 = BERT 看上下文、GPT 只看上文

"3 条笔记 = 3 篇论文的 3 个核心知识点"——笔记页既是"记录工具"也是"学习卡片"——读者读 demo 顺便学了 3 个 AI 核心概念——"内容即教学"是 App 25 的深层价值。

八、"论文笔记"的数据模型

App 25 的 Note 接口（paper/text/date）是"最简笔记模型"——真实论文笔记应有更丰富字段：

interface Note {
  id: number;
  paperId: number;      // 关联论文 id（外键）
  paperTitle: string;   // 论文标题（冗余，便于显示）
  text: string;         // 笔记正文
  tags: string[];       // 标签（如"核心思想"/"实验结果"/"待讨论"）
  pageRange: string;    // 页码区间（"第3-5页"）
  createdAt: string;    // 创建时间
  updatedAt: string;    // 更新时间
}

"论文笔记 6 字段"vs"App 25 3 字段"：

• App 25：paper（标题字符串）/text/date——最简
• 真实：paperId（外键）+ tags + pageRange + 双时间——完整

"笔记关联论文"的数据设计：

• 外键（paperId）——笔记属于哪篇论文（App 25 用字符串 title 是简化）
• 冗余标题（paperTitle）——列表显示不用 join

"笔记数据模型"决定笔记功能——真实项目应"笔记支持多篇论文（多对多）"、"笔记带标签（分类）"、"笔记关联页码（定位）"。

九、论文阅读的"笔记方法"设计

App 25 的笔记页是"记录工具"——真实论文阅读 App 的笔记方法设计：

3 种论文笔记方法：

1. 摘要法（App 25 当前）——读完写一段总结（"这篇文章讲什么"）
2. 三问法（进阶）——"解决了什么问题？方法是什么？结论是什么？"（结构化）
3. 批判法（进阶）——"优点/缺点/改进方向"（批判性阅读）

"摘要法"是入门——App 25 的"记录研究思路、重点内容"是摘要法——真实工具应提供"三问/批判"模板（结构化笔记比自由笔记更高效）。

"笔记模板"设计：

【论文】Attention Is All You Need
【问题】RNN/CNN 无法并行处理序列
【方法】纯注意力机制（Transformer）
【结论】并行 + 高性能
【我的思考】...

"模板化笔记"是论文精读的标准——读者做论文工具时，提供"三问模板"比"空白笔记"更专业。

十、总结

App 25 笔记页解析完毕。新建笔记卡（关联论文 + 研究思路 + 保存）+ 3 条真实研究笔记（自注意力 Q/K/V/残差连接/MLM+NSP）是核心组件。"真实研究笔记"是最大亮点——"笔记内容 = 论文精读的产出"。"3 条笔记 = 3 篇论文的思想精华"（内容即教学）。"论文笔记 6 字段数据模型"和"3 种笔记方法（摘要/三问/批判）"是真实笔记工具的进阶。"新建 → 保存 → 刷新"的响应式闭环是真实笔记功能的必备。

十一、笔记与收藏的"阅读闭环"

App 25 的笔记页（Func2Tab）与论文详情页的收藏（Func1Tab saved）形成**"阅读闭环"**：

"读 → 收藏 → 笔记"的完整闭环：

首页（找论文）→ 论文详情（读摘要 + 收藏 saved）→ 笔记页（写笔记）→ 我的页（收藏 12 / 笔记 18 统计）

"收藏"和"笔记"的分工：

• 收藏（1 步）——"这篇值得保留"（轻）
• 笔记（多步）——"这篇我要精读记录"（重）

"轻收藏 + 重笔记"是论文工具的双轨：

• 收藏 = 快速标记（刷到好论文先收藏）
• 笔记 = 深度产出（读完写笔记）

真实项目应打通"收藏 → 笔记"：收藏列表里"写笔记"入口、笔记自动关联已收藏论文、收藏和笔记都进我的页统计。

"收藏 + 笔记 = 论文阅读的完整闭环"——App 25 的 2 个 Tab（论文收藏 + 笔记）承担闭环两端——读者做论文工具时，先设计"收藏 + 笔记"双轨。

十二、笔记页的"空状态"设计

App 25 笔记页有 3 条笔记（非空）——真实笔记页需要"空状态"设计：

空状态（0 条笔记）的 3 元素：

1. 插画（📝 或自定义图标）
2. 文案（"还没有笔记，去读一篇论文吧"）
3. 行动按钮（"去读论文"）

// 空状态条件渲染
if (this.notes.length === 0) {
  // 显示空状态插画 + 引导
} else {
  // 显示笔记列表
}

"空状态引导"是产品设计的必修——用户第一次打开（0 笔记）时，空状态引导"怎么开始用"——"从空状态到有内容"的引导是留存关键。

App 25 的简化：3 条演示笔记（无空状态）——真实项目"新建笔记后删除到 0"应显示空状态——读者做任何"列表 + 新建"功能时，记得空状态。

十三、总结

App 25 笔记页解析完毕。新建笔记卡（关联论文 + 研究思路 + 保存）+ 3 条真实研究笔记（自注意力 Q/K/V/残差连接/MLM+NSP）是核心组件。"真实研究笔记"是最大亮点——"笔记内容 = 论文精读的产出"。"收藏 + 笔记 = 阅读闭环"（轻收藏 + 重笔记双轨）和**"空状态引导"是笔记工具的设计要点。"论文笔记 6 字段数据模型"和"3 种笔记方法（摘要/三问/批判）"**是真实笔记工具的进阶。