鸿蒙原生应用 ArkTS 表单工程论文笔记页的 TextArea 录入与笔记列表App 25「论文阅读助手」笔记 TabFunc2Tab是论文阅读笔记页——3 模块布局Header论文笔记 AddCard新建笔记关联论文 研究思路 TextArea 保存按钮 SectionTitle我的笔记 NoteList3 条真实研究笔记自注意力 Q/K/V、残差连接、MLMNSP。本篇基于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 块结构Header— 论文笔记标题AddCard— 新建笔记关联论文 研究思路 保存SectionTitle(我的笔记) NoteList— 3 条笔记新建 列表是笔记类 App 的标准布局备忘录/Notion/印象笔记同款——先新建、后看已有的漏斗。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是论文笔记单行与系列同款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 元素关联论文 TextInput40vp——输入论文标题关联到哪篇论文记录你的研究思路、重点内容... TextArea80vp——笔记正文保存笔记 Button40vp 石板灰实心——点击弹 Toast占位符的引导性关联论文——告诉用户先填这篇笔记属于哪篇论文记录你的研究思路、重点内容...——告诉用户笔记该写什么研究思路 重点内容关联论文是论文笔记的特色——对比通用笔记备忘录论文笔记必须关联到具体论文否则不知道笔记是读哪篇写的——笔记的结构 业务需求。保存笔记点击弹 Toast 笔记已保存——真实项目应校验关联论文非空调 API 保存到后端笔记列表刷新新笔记出现在顶部**新建笔记 → 保存 → 列表刷新**是笔记功能的完整闭环——demo 只做了保存反馈未联动列表。四、NoteList3 条真实研究笔记本页核心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 条笔记都是真实论文核心思想笔记论文核心思想真实1Attention Is All You Need自注意力机制 Q/K/V 矩阵运算 并行化2ResNet残差连接 解决梯度消失 Identity Mapping3BERTMLM 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 行 emoji18sp论文名13sp 加粗 layoutWeight(1)——Attention Is All You Need日期11sp 灰——今天第 2 行笔记内容13sp 灰——自注意力机制是核心创新Q/K/V 矩阵的矩阵运算实现并行化。论文名 日期在上、内容在下——标题行 内容行是笔记卡的标准备忘录同款——关联论文 日期定位这篇笔记读哪篇写的。五、State 与笔记数据流Func2Tab0 个 State——notes是private普通数组新建笔记未联动——0 状态笔记页。真实项目的笔记数据流新建AddCard 输入 → State 双向绑定 → 保存调 API列表State notes 从 API 拉取 → ForEach 渲染更新保存后 notes 整体替换新笔记在前→ 自动刷新新建 → 保存 → 刷新的响应式闭环——demo 只做了保存 Toast未联动列表——保存后列表刷新是真实笔记功能的必备。六、笔记 vs 评论 vs 批注App 25 的笔记是独立笔记在笔记 Tab 写——论文阅读还有 2 种记录形态形态特点场景独立笔记App 25单独 Tab一篇论文一条笔记系统性总结批注页面内在论文正文旁写精读细节评论社区公开讨论学术交流独立笔记是最基础的形态——App 25 采用它简单——真实论文工具Zotero/ReadPaper3 种都有。批注是论文精读的进阶——在 PDF 正文高亮 旁注——App 25 只有独立笔记真实项目应加批注。七、3 条笔记的论文思想精读App 25 的 3 条研究笔记不仅是真实内容更是3 篇论文的思想精华——逐条精读笔记 1Attention Is All You Need自注意力机制是核心创新Q/K/V 矩阵的矩阵运算实现并行化。Q/K/V Query查询/Key键/Value值三个矩阵注意力 Q 和 K 点积 → softmax 权重 → 加权 V矩阵运算并行化 Transformer 比 RNN 快RNN 串行、Transformer 并行笔记 2ResNet残差连接解决了深层网络梯度消失问题Identity Mapping 是关键。残差连接 输出 F(x) x跳连梯度消失 深层网络反向传播时梯度衰减残差让梯度直通Identity Mapping 恒等映射x 直接跳连不加变换笔记 3BERTMLM 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 字段vsApp 25 3 字段App 25paper标题字符串/text/date——最简真实paperId外键 tags pageRange 双时间——完整笔记关联论文的数据设计外键paperId——笔记属于哪篇论文App 25 用字符串 title 是简化冗余标题paperTitle——列表显示不用 join笔记数据模型决定笔记功能——真实项目应笔记支持多篇论文多对多、笔记带标签分类、笔记关联页码定位。九、论文阅读的笔记方法设计App 25 的笔记页是记录工具——真实论文阅读 App 的笔记方法设计3 种论文笔记方法摘要法App 25 当前——读完写一段总结这篇文章讲什么三问法进阶——解决了什么问题方法是什么结论是什么结构化批判法进阶——优点/缺点/改进方向批判性阅读摘要法是入门——App 25 的记录研究思路、重点内容是摘要法——真实工具应提供三问/批判模板结构化笔记比自由笔记更高效。笔记模板设计【论文】Attention Is All You Need 【问题】RNN/CNN 无法并行处理序列 【方法】纯注意力机制Transformer 【结论】并行 高性能 【我的思考】...模板化笔记是论文精读的标准——读者做论文工具时提供三问模板比空白笔记更专业。十、总结App 25 笔记页解析完毕。新建笔记卡关联论文 研究思路 保存 3 条真实研究笔记自注意力 Q/K/V/残差连接/MLMNSP是核心组件。真实研究笔记是最大亮点——笔记内容 论文精读的产出。3 条笔记 3 篇论文的思想精华内容即教学。论文笔记 6 字段数据模型和3 种笔记方法摘要/三问/批判是真实笔记工具的进阶。新建 → 保存 → 刷新的响应式闭环是真实笔记功能的必备。十一、笔记与收藏的阅读闭环App 25 的笔记页Func2Tab与论文详情页的收藏Func1Tab saved形成**阅读闭环**读 → 收藏 → 笔记的完整闭环首页找论文→ 论文详情读摘要 收藏 saved→ 笔记页写笔记→ 我的页收藏 12 / 笔记 18 统计收藏和笔记的分工收藏1 步——这篇值得保留轻笔记多步——这篇我要精读记录重轻收藏 重笔记是论文工具的双轨收藏 快速标记刷到好论文先收藏笔记 深度产出读完写笔记真实项目应打通收藏 → 笔记收藏列表里写笔记入口、笔记自动关联已收藏论文、收藏和笔记都进我的页统计。收藏 笔记 论文阅读的完整闭环——App 25 的 2 个 Tab论文收藏 笔记承担闭环两端——读者做论文工具时先设计收藏 笔记双轨。十二、笔记页的空状态设计App 25 笔记页有 3 条笔记非空——真实笔记页需要空状态设计空状态0 条笔记的 3 元素插画 或自定义图标文案还没有笔记去读一篇论文吧行动按钮去读论文// 空状态条件渲染 if (this.notes.length 0) { // 显示空状态插画 引导 } else { // 显示笔记列表 }空状态引导是产品设计的必修——用户第一次打开0 笔记时空状态引导怎么开始用——从空状态到有内容的引导是留存关键。App 25 的简化3 条演示笔记无空状态——真实项目新建笔记后删除到 0应显示空状态——读者做任何列表 新建功能时记得空状态。十三、总结App 25 笔记页解析完毕。新建笔记卡关联论文 研究思路 保存 3 条真实研究笔记自注意力 Q/K/V/残差连接/MLMNSP是核心组件。真实研究笔记是最大亮点——笔记内容 论文精读的产出。收藏 笔记 阅读闭环轻收藏 重笔记双轨和**空状态引导是笔记工具的设计要点。论文笔记 6 字段数据模型和3 种笔记方法摘要/三问/批判**是真实笔记工具的进阶。