鸿蒙原生应用 ArkUI 声明式实战论文助手我的页 —— 渐变用户卡 负边距悬浮统计组合技App 25「论文阅读助手」我的 TabProfileTab是个人中心页——3 块最简结构渐变用户卡 论文阅读者 研究方向: NLP · CV 4 栏统计收藏论文 12/阅读历史 36/笔记 18/研究方向 4 5 菜单收藏论文/阅读历史/笔记管理/研究方向/设置 About论文阅读助手 v1.0.0。与 App 21/22/23/24 我的页同构4 块最简 92% 宽 负边距悬浮。本篇基于25-paper-reader/entry/src/main/ets/pages/ProfileTab.ets约 100 行逐段拆解附 4 张实机截图。一、整体结构4 块最简个人中心ProfileTab 是系列最简洁的个人中心——4 个 Builderbuild() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.MenuList() this.About() } .width(100%) .padding({ bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }4 块顺序UserCard身份→ StatRow数据→ MenuList资产→ About关于。与 App 21/22/23/24 我的页 100% 同构——任务型个人中心模板第 5 次复用21 问卷 → 22 投票 → 23 实验室 → 24 科研 → 25 论文。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCard石板灰渐变 论文阅读者UserCard 是简洁的横向用户卡Builder UserCard() { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(64).height(64).backgroundColor(#33FFFFFF).borderRadius(32).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Text(论文阅读者).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(研究方向: NLP · CV).fontSize(12).fontColor(#FFFFFF).opacity(0.85) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%) .padding({ top: this.safeTop 30, left: D.pad, right: D.pad, bottom: 44 }) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }关键设计64×64 正圆头像borderRadius(32)—— 系列标准 文件 emoji—— 论文的视觉符号论文阅读者—— 称号型身份读者 阅读的人研究方向: NLP · CVSlogan ——研究领域身份研究方向: NLP · CV自然语言处理 · 计算机视觉——研究者的领域身份App 23: 科研达人身份App 24: 副教授 · 发表 8 篇论文职称 成就App 25: 研究方向: NLP · CV领域领域型 Slogan—— 告诉别人我研究什么——对比 App 24 的职称 论文成就型——论文阅读者用领域我做 NLP/CV比成就我发了 X 篇更贴阅读场景阅读者关注领域而非发表。主题色#334155石板灰渐变C.primary→C.accent#64748B——灰 → 浅灰的渐变——系列最素的渐变学术 App 不用鲜艳色——素 学术调性。三、StatRow4 栏统计论文阅读者画像StatRow 是 4 栏统计与系列同款结构private stats: StatItem[] [ { value: 12, label: 收藏论文 }, { value: 36, label: 阅读历史 }, { value: 18, label: 笔记 }, { value: 4, label: 研究方向 } ];4 栏的论文阅读者画像数字标签维度12收藏论文资产收藏 12 篇36阅读历史行为读过 36 篇18笔记产出写了 18 条笔记4研究方向领域4 个研究方向资产/行为/产出/领域4 维画像收藏资产——存了 12 篇阅读行为——读过 36 篇笔记产出——写了 18 条方向领域——研究 4 个方向读 → 藏 → 记是论文阅读的 3 步行为链——读 36 篇 → 藏 12 篇1/3 收藏率→ 记 18 条一半读了记笔记——数据比例反映阅读习惯真正重要的论文才收藏、值得记笔记的更少——数据自洽体现真实感。数据一致性收藏论文 12 首页副标题收藏 12 篇 ✓研究方向 4 首页 5 分类中 4 个研究方向AI/系统/安全/理论✓笔记 18 笔记页 3 条是近期、18 是累计——累计 vs 近期口径3 条是最近写的、18 是总数4 栏数据跨页一致——与首页/笔记页呼应 ✓。四、MenuList5 项菜单MenuList 是 5 项菜单与系列同款结构private menus: MenuItem[] [ { id: 1, emoji: ⭐, title: 收藏论文 }, { id: 2, emoji: , title: 阅读历史 }, { id: 3, emoji: , title: 笔记管理 }, { id: 4, emoji: ️, title: 研究方向 }, { id: 5, emoji: ⚙️, title: 设置 } ];5 项菜单的论文阅读业务覆盖菜单业务⭐ 收藏论文收藏列表与 StatRow 第 1 栏对应 阅读历史阅读记录与第 2 栏对应 笔记管理笔记 CRUD与第 3 栏对应️ 研究方向研究方向管理与第 4 栏对应⚙️ 设置通用4 个论文专属菜单对应 StatRow 4 栏——统计 ↔ 菜单精确对应与 App 24 同款——4 大数据 4 大操作 用户的完整工作台。️ 研究方向是论文 App 的特色菜单——管理我的研究方向NLP/CV 等——研究方向用于论文推荐推荐自己方向的论文。五、MenuList 结构与 AboutMenuList 与系列同款92% 宽 Divider 0.5vp 箭头 idx length - 1Builder MenuList() { Column() { ForEach(this.menus, (m: MenuItem, idx: number) { Row({ space: 12 }) { Text(m.emoji).fontSize(18) Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) Text().fontSize(14).fontColor(C.textDim) } .width(100%).padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() { promptAction.showToast({ message: m.title }); }) if (idx this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) m.title) } .width(92%).margin({ top: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }About是论文阅读助手 / Version 1.0.0双行与系列同款——opacity(0.7)版本号淡化。六、State 数量 0ProfileTab0 个 State—— 所有数据private不可变。这是系列第九个0 State个人中心——展示型 0 State规律持续成立。4 个 Tab 的 State 分布App 25首页1activeCat 分类 Chip论文1saved 收藏笔记0我的0App 25 是任务型 2 状态型应用——首页/论文各 1 个状态分类/收藏、笔记/我的纯展示。七、论文阅读者与系列其他称号的对比App 25 的论文阅读者是系列第 9 个称号型身份App称号类型19 摄影摄影爱好者兴趣21 问卷问卷达人业务22 投票投票达人业务23 实验室科研达人业务24 科研科研工作者职业25 论文论文阅读者阅读阅读者——阅读是论文 App 的核心动作不是研究者——不是所有用户都做研究但都读论文——阅读者 低门槛身份学生/老师/研究者都能是阅读者。称号 用户类型爱好者摄影 兴趣用户达人问卷/投票 活跃用户工作者科研 职业用户阅读者论文 所有读论文的人最普适阅读者是系列最普适的称号——阅读是每个人都能做的事对比科研是职业——低门槛称号 广覆盖用户。八、品牌一致性让 App 有完整叙事App 25 的称号论文阅读者与产品名论文助手品牌一致元素值语义产品名论文助手帮你看论文称号论文阅读者你是看论文的人副标题最近阅读 3 篇 · 收藏 12 篇你的阅读状态4 栏统计收藏/阅读/笔记/方向你的论文数据产品名 用户称号 数据的三层品牌叙事产品我是助手工具用户你是阅读者身份数据你的收藏/阅读/笔记/方向画像品牌一致性让 App 有完整叙事——对比 App 17 志愿省钱能手品牌违和App 25 的论文阅读者与论文助手完全匹配——称号与产品的一致性是模板换肤必须检查的。九、研究方向: NLP · CV的领域型身份App 25 的 Slogan 研究方向: NLP · CV是**领域型身份**——对比系列其他身份类型AppSlogan身份类型19 摄影已上传作品 128 幅创作型做了什么20 阅读已读书籍 36 本积累型读了多少23 实验室累计使用 36 小时投入型用了多久24 科研副教授 · 发表 8 篇论文成就型职称成果25 论文研究方向: NLP · CV领域型研究什么领域型身份的价值告诉别人我研究什么NLP/CV用于论文推荐推荐我领域的论文用于学术交流找到同领域的人研究方向是论文阅读者的核心元数据——领域 内容过滤——真实项目应用户设置研究方向 → 首页按领域推荐论文首页 5 分类AI/系统/安全/理论 可选的领域方向我的研究方向 4 用户选了 4 个领域领域型身份是学术 App 的特色——对比消费型订单/积分、行为型时长/次数学术型关注研究什么。十、收藏 12 阅读 36 笔记 18的数据自洽App 25 的 4 栏统计收藏 12/阅读历史 36/笔记 18/研究方向 4内部自洽读 → 藏 → 记的漏斗阅读 36 篇读过收藏 12 篇1/3 值得收藏笔记 18 条一半读了记笔记漏斗比例反映阅读习惯收藏率 1/336 → 12——只有 1/3 论文值得收藏合理笔记率 50%36 → 18——一半论文记了笔记认真阅读数据比例自洽让统计可信——对比阅读 36 收藏 100比例失调App 25 的36/12/18是合理的数据叙事。真实项目的统计口径收藏数 收藏表行数favorites.count阅读数 阅读历史行数history.count笔记数 笔记表行数notes.count方向数 研究方向表行数directions.count统计 数据库聚合——真实项目从数据库 count——App 25 的 4 栏是聚合结果硬编码演示。十一、MenuList 的5 菜单与论文工作流App 25 的 5 菜单收藏论文/阅读历史/笔记管理/研究方向/设置——完整覆盖论文阅读工作流菜单对应工作流环节数据来源收藏论文值得反复读favorites 表阅读历史读过哪些history 表笔记管理记了什么notes 表研究方向研究什么领域directions 表设置偏好配置preferences 表5 菜单 论文阅读的 5 个动作——收藏/阅读/笔记/方向/设置——每个菜单对应一个数据表——**菜单 数据入口**是个人中心的标准设计。对比系列其他 App 的菜单设计App 21 问卷我的问卷/填写记录/数据导出/问卷模板/设置创作流App 22 投票参与记录/创建投票/投票历史/统计分析/设置投票流App 23 实验室预约记录/使用记录/设备收藏/联系管理员/设置预约流App 25 论文收藏论文/阅读历史/笔记管理/研究方向/设置阅读流5 菜单 业务工作流的 5 个节点——读者做自己 App 时先梳理业务工作流再设计菜单——菜单不是随便列的而是用户在 App 里的5 个核心动作。十二、总结App 25 我的页解析完毕。4 块最简结构UserCard StatRow MenuList About 石板灰渐变 4 栏统计 5 菜单是核心组件。论文阅读者的领域型身份 研究方向: NLP · CV的学术 Slogan 读→藏→记漏斗数据——是学术阅读类 App 个人中心的典型设计。与 App 21/22/23/24 我的页 100% 同构——任务型个人中心模板第 5 次复用证明4 块最简是任务型应用的稳定模式。