鸿蒙原生应用 ArkUI 声明式拆解论文详情页的关键词 Flex 换行与收藏翻转App 25「论文阅读助手」论文 TabFunc1Tab是论文精读详情页——5 模块布局TitleCard Attention Is All You Need Vaswani, A. et al. (8 authors) NeurIPS 2017 引用 95,000AbstractCard真实 Transformer 英文摘要 KeywordCard5 关键词 Flex 换行 CiteCard引用信息 复制引用按钮 ActionRow收藏论文/做笔记 双按钮 saved 真交互翻转。本篇基于25-paper-reader/entry/src/main/ets/pages/Func1Tab.ets约 119 行逐段拆解附 4 张实机截图未收藏/已收藏/取消收藏/顶部摘要。一、整体结构5 模块论文精读Func1Tab 是论文精读的 5 模块布局——标题 → 摘要 → 关键词 → 引用 → 操作build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.TitleCard() this.AbstractCard() this.KeywordCard() this.CiteCard() this.ActionRow() } .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) }5 个块按标题 → 摘要 → 关键词 → 引用 → 行动漏斗展开TitleCard— 论文身份 标题 作者 会议 引用AbstractCard— 摘要真实 Transformer 英文原文KeywordCard— 5 关键词Flex 换行胶囊CiteCard— 引用信息 复制引用ActionRow— 收藏/做笔记saved 真交互论文精读 5 模块是学术阅读的标准流程——标题识别 → 摘要判断 → 关键词定位 → 引用溯源 → 收藏行动——论文阅读 App 的完整功能。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是论文详情单行与系列同款height(safeTop 56) 靠底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 是论文、页面是论文详情。三、TitleCard论文身份卡TitleCard 是论文的身份卡—— 标题 作者 会议 引用Builder TitleCard() { Column({ space: 8 }) { Text().fontSize(36) Text(Attention Is All You Need).fontSize(17).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Text(Vaswani, A. et al. (8 authors)).fontSize(12).fontColor(C.textDim).width(100%) Row({ space: 8 }) { Text(NeurIPS 2017).fontSize(11).fontColor(#FFFFFF) .padding({ left: 6, right: 6, top: 2, bottom: 2 }).backgroundColor(C.primary).borderRadius(4) Text(引用 95,000).fontSize(11).fontColor(C.warn) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }4 层信息 emoji36sp——论文图标标题17sp 加粗——Attention Is All You Need作者12sp 灰——Vaswani, A. et al.(8 authors)——8 authors标注作者数Transformer 论文有 8 位作者真实会议引用11sp——NeurIPS 2017石板灰底白字标签 引用 95,000橙色与首页论文卡的差异首页是Vaswani et al.简写、详情页是Vaswani, A. et al. (8 authors)全名作者数——列表简写、详情全称是学术信息的分层展示。引用 95,000加了约数——引用数实时变化用约数更准确。四、AbstractCard真实英文摘要本页最大亮点AbstractCard 是Transformer 论文的真实英文摘要Builder AbstractCard() { Column({ space: 8 }) { Text(摘要).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Text(The dominant sequence transduction models are based on complex recurrent or convolutional neural networks. We propose a new simple network architecture, the Transformer, based solely on attention mechanisms, dispensing with recurrence and convolutions entirely.) .fontSize(13).fontColor(C.textSub).width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }真实摘要原文Attention Is All You Need 的 Abstract 开头The dominant sequence transduction models are based on complex recurrent or convolutional neural networks. We propose a new simple network architecture, the Transformer, based solely on attention mechanisms, dispensing with recurrence and convolutions entirely.这是 100% 真实的 Transformer 论文摘要——学术真实感的巅峰dominant sequence transduction models主流序列转换模型recurrent or convolutional neural networks递归或卷积神经网络the Transformer, based solely on attention mechanisms基于纯注意力机制的 Transformerdispensing with recurrence and convolutions entirely完全摒弃递归与卷积真实摘要的价值专业——AI 研究者一眼认出这是 Attention 论文教学——学生可以从 demo 学到 Transformer 的核心思想纯注意力取代 RNN/CNN真实——与首页论文卡、笔记页自注意力机制 Q/K/V形成跨页学术一致性摘要用英文原文是论文 App 的正确选择——论文本身是英文的摘要就该是英文——原汁原味的学术内容。五、KeywordCard5 关键词KeywordCard 是 5 个关键词的 Flex 换行胶囊Builder KeywordCard() { Column({ space: 10 }) { Text(关键词).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) { ForEach([Transformer, Attention, Self-Attention, NLP, Sequence-to-Sequence], (k: string, idx: number) { Text(k).fontSize(12).fontColor(C.primary) .padding({ left: 10, right: 10, top: 6, bottom: 6 }) .backgroundColor(C.primarySoft).borderRadius(10) .margin({ right: 8, bottom: 8 }) .onClick(() { promptAction.showToast({ message: k }); }) }, (k: string, idx: number) k idx) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }5 个关键词真实 Transformer 论文关键词Transformer核心架构Attention注意力机制Self-Attention自注意力NLP自然语言处理Sequence-to-Sequence序列到序列5 关键词 论文的学术标签——关键词让用户扫一眼就知道论文讲什么——学术论文的关键词是元数据标签用于检索/分类。Flex 换行胶囊——石板灰字 浅石板灰底C.primarySoft#E9ECF1 10vp 圆角——关键词胶囊是学术标签的标准视觉。点击关键词弹 Toast——真实项目应点关键词 → 搜索该关键词的所有论文——关键词 检索入口。六、CiteCard引用信息 复制引用CiteCard 是引用信息学术格式 复制引用按钮Builder CiteCard() { Column({ space: 8 }) { Text(引用信息).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Text(Vaswani, A., Shazeer, N., Parmar, N., et al. (2017). Attention Is All You Need. NeurIPS.) .fontSize(12).fontColor(C.textSub).width(100%) Button(复制引用) .fontSize(13).fontColor(C.primary).backgroundColor(C.primarySoft) .borderRadius(D.rSm).height(36) .border({ width: 1, color: C.primary }) .onClick(() { promptAction.showToast({ message: 引用已复制 }); }) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }引用信息真实格式Vaswani, A., Shazeer, N., Parmar, N., et al. (2017). Attention Is All You Need. NeurIPS.这是APA 引用格式学术界标准作者Vaswani, A., Shazeer, N., Parmar, N., et al.作者列表年份(2017)标题Attention Is All You Need斜体会议NeurIPS复制引用按钮——石板灰描边 浅石板灰底 石板灰字——描边按钮与实心按钮区分——点击弹 Toast 引用已复制——真实项目应复制到剪贴板ohos.pasteboard。引用信息是论文 App 的必备功能——研究者写论文时复制引用是最高频操作写参考文献列表——一键复制引用 研究者效率工具。七、ActionRow收藏/做笔记 saved 真交互ActionRow 是收藏论文/做笔记 双按钮 saved 真交互Builder ActionRow() { Row({ space: 12 }) { Button(this.saved ? 已收藏 : 收藏论文) .fontSize(14).fontColor(this.saved ? C.ok : C.primary) .backgroundColor(this.saved ? C.primarySoft : C.card) .borderRadius(D.rMd).height(44).layoutWeight(1) .border({ width: 1, color: this.saved ? C.ok : C.primary }) .onClick(() { this.saved !this.saved; promptAction.showToast({ message: this.saved ? 已收藏 : 取消收藏 }); }) Button(做笔记) .fontSize(14).fontColor(#FFFFFF).backgroundColor(C.primary) .borderRadius(D.rMd).height(44).layoutWeight(1) .onClick(() { promptAction.showToast({ message: 前往笔记 }); }) }.width(100%) }7.1 收藏按钮的双态真交互State saved: boolean false驱动收藏按钮 4 处联动Button(this.saved ? 已收藏 : 收藏论文) .fontSize(14).fontColor(this.saved ? C.ok : C.primary) .backgroundColor(this.saved ? C.primarySoft : C.card) .borderRadius(D.rMd).height(44).layoutWeight(1) .border({ width: 1, color: this.saved ? C.ok : C.primary }) .onClick(() { this.saved !this.saved; promptAction.showToast({ message: this.saved ? 已收藏 : 取消收藏 }); })双态 4 处联动文字收藏论文 ↔ 已收藏文字色石板灰 ↔ 绿C.ok背景白 ↔ 浅石板灰边框石板灰 ↔ 绿State saved翻转saved !saved Toast 反馈已收藏/取消收藏——收藏真交互——与 App 22 投票 voted、App 24 任务 done 同款布尔状态翻转。边框双态未收藏时石板灰描边C.primary已收藏时绿色描边C.ok——4 处联动全部双态切换视觉反馈完整。收藏/已收藏双态是收藏功能的标配微博/知乎/抖音的收藏→已收藏——收藏状态可视化让用户知道这篇收藏了吗。7.2 做笔记按钮Button(做笔记)实心石板灰底白字——点击弹 Toast 前往笔记——真实项目应跳到笔记 Tab 并预填论文标题——详情 → 笔记的跨 Tab 联动。收藏 做笔记双行动收藏标记——以后要读/已读完做笔记记录——记下读这篇的想法标记 记录是论文阅读的 2 大行动——收藏是存起来、笔记是写下来。八、State 与收藏数据流Func1Tab 有1 个 Statesaved收藏状态——1 个布尔状态驱动收藏按钮 4 处联动App 22/24 同款布尔翻转模式。真实项目的收藏数据流点击收藏 →saved true 调 APIPOST /favorites刷新页面 →saved false初始化 → 从 API 拉取GET /favorites/{id} 判断是否已收藏我的页收藏论文 12 → 从收藏列表聚合收藏状态 本地 UI 服务端同步——demo 只做本地翻转saved内存态真实项目要服务端持久化 启动拉取。九、论文详情页与系列其他详情页对比App详情页模块数特色23 实验室设备详情4 卡参数表 使用说明24 科研项目详情3 模块团队 任务看板25 论文论文详情5 模块真实摘要 关键词 引用论文详情页 5 模块是系列最学术的详情页23 设备身份/参数/说明/预约工程24 项目团队/任务管理25 论文标题/摘要/关键词/引用/操作学术详情页模块 业务深度——论文的摘要/关键词/引用是学术特有三要素——学术详情页比工程/管理详情页更专业。十、论文精读的 5 步方法论App 25 论文详情页的 5 模块标题/摘要/关键词/引用/操作对应论文精读的 5 步方法论第 1 步读标题TitleCard——这篇论文关于什么Attention Is All You Need 注意力机制第 2 步读摘要AbstractCard——这篇论文做了什么提出 Transformer 取代 RNN/CNN第 3 步读关键词KeywordCard——这篇论文的核心概念Transformer/Attention/Self-Attention第 4 步查引用CiteCard——这篇论文怎么引用写参考文献用第 5 步收藏/记笔记ActionRow——这篇论文值得留收藏 笔记标题 → 摘要 → 关键词 → 引用 → 行动是研究者读论文的天然流程——App 25 的 5 模块完美映射精读方法论——UI 结构 用户工作流是优秀设计的本质。精读 5 步是论文工具的通用模板——读者做论文/学术工具时按 5 步组织详情页。十一、英文摘要的本地化设计App 25 的 AbstractCard 用英文原文——论文 App 的摘要语言设计3 种摘要语言方案英文原文App 25——忠实原样专业用户友好中文翻译——大众用户友好但翻译失真英文 中文——最全但占空间论文 App 用英文原文是正确选择论文本身是英文翻译会失真目标用户研究者/学生读英文无障碍原文 忠实英文摘要 中文界面的混合设计App 25UI 元素按钮/标签用中文——界面本地化学术内容摘要/标题/作者用英文——内容保真界面中文化 学术内容英文化是学术 App 的最佳实践——读者做学术工具时按此设计。十二、复制引用的格式与场景App 25 的 CiteCard 显示 APA 格式 复制引用按钮——引用格式的多样性3 种常见引用格式APAApp 25——Vaswani, A., et al. (2017). Attention Is All You Need. NeurIPS.MLA——Vaswani, Ashish, et al. Attention Is All You Need. NeurIPS (2017).IEEE——A. Vaswani et al., Attention Is All You Need, NeurIPS, 2017.不同期刊/课程要求不同格式——真实论文工具Zotero/Mendeley支持一键切换格式——App 25 固定 APA 是简化。复制引用的使用场景写论文参考文献列表最高频写课程作业引用写博客/公众号引用引用格式管理是论文工具的刚需——真实项目应支持 APA/MLA/IEEE/GB 等多格式复制为 BibTeXLaTeX 用户从 DOI 自动生成引用App 25 的APA 复制是入门——读者做论文工具时多格式引用是进阶功能。十三、总结App 25 论文详情页解析完毕。5 模块标题/摘要/关键词/引用/操作 真实 Transformer 英文摘要 APA 引用格式 saved 收藏交互是核心组件。真实学术内容摘要原文/引用格式是最大亮点——论文 App 用真实内容 专业可信。精读 5 步方法论标题→摘要→关键词→引用→行动是 UI 结构的本质。**界面中文化 学术内容英文化是学术 App 的最佳实践。多格式引用管理是进阶功能。收藏/已收藏双态 布尔翻转**是收藏功能的标准交互。