企业官网建设流程全解析

鸿蒙原生应用 ArkUI 声明式实战：论文助手我的页 —— 渐变用户卡 + 负边距悬浮统计组合技

App 25「论文阅读助手」我的 Tab（ProfileTab），是个人中心页——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 个 @Builder：

build() { 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]] }) }

关键设计：

1. 64×64 正圆头像（borderRadius(32)）—— 系列标准
2. 📄 文件 emoji—— 论文的视觉符号
3. "论文阅读者"—— 称号型身份（"读者" = 阅读的人）
4. "研究方向: NLP · CV"Slogan ——"研究领域"身份

"研究方向: NLP · CV"（自然语言处理 · 计算机视觉）——研究者的"领域身份"：

• App 23: "科研达人"（身份）
• App 24: "副教授 · 发表 8 篇论文"（职称 + 成就）
• App 25: "研究方向: NLP · CV"（领域）

"领域型 Slogan"—— 告诉别人"我研究什么"——对比 App 24 的"职称 + 论文"（成就型）——论文阅读者用"领域"（我做 NLP/CV）比"成就"（我发了 X 篇）更贴"阅读"场景（阅读者关注领域而非发表）。

主题色#334155石板灰渐变（C.primary→C.accent#64748B）——"灰 → 浅灰"的渐变——系列最"素"的渐变（学术 App 不用鲜艳色）——"素 = 学术调性"。

三、StatRow：4 栏统计（论文阅读者画像）

StatRow 是 4 栏统计（与系列同款结构）：

private stats: StatItem[] = [ { value: '12', label: '收藏论文' }, { value: '36', label: '阅读历史' }, { value: '18', label: '笔记' }, { value: '4', label: '研究方向' } ];

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 栏数据跨页一致"——与首页/笔记页呼应 ✓。

四、MenuList：5 项菜单

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 项菜单的"论文阅读业务"覆盖：

"4 个论文专属菜单"对应 StatRow 4 栏——"统计 ↔ 菜单"精确对应（与 App 24 同款）——"4 大数据 + 4 大操作 = 用户的完整工作台"。

"🏷️ 研究方向"是论文 App 的特色菜单——管理"我的研究方向"（NLP/CV 等）——研究方向用于论文推荐（推荐自己方向的论文）。

五、MenuList 结构与 About

MenuList 与系列同款（92% 宽 + Divider 0.5vp +>箭头 +idx < length - 1）：

@Builder 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 数量 = 0

ProfileTab0 个 @State—— 所有数据private不可变。这是系列第九个"0 @State"个人中心——"展示型 = 0 @State"规律持续成立。

4 个 Tab 的 @State 分布（App 25）：

• 首页：1（activeCat 分类 Chip）
• 论文：1（saved 收藏）
• 笔记：0
• 我的：0

App 25 是"任务型 2 状态"型应用——首页/论文各 1 个状态（分类/收藏）、笔记/我的纯展示。

七、"论文阅读者"与系列其他称号的对比

App 25 的"论文阅读者"是系列第 9 个"称号型身份"：

"阅读者"——"阅读"是论文 App 的核心动作（不是"研究者"——不是所有用户都做研究，但都读论文）——"阅读者 = 低门槛身份"（学生/老师/研究者都能是"阅读者"）。

"称号 = 用户类型"：

• "爱好者"（摄影）= 兴趣用户
• "达人"（问卷/投票）= 活跃用户
• "工作者"（科研）= 职业用户
• "阅读者"（论文）= 所有读论文的人（最普适）

"阅读者"是系列最普适的称号——"阅读"是每个人都能做的事（对比"科研"是职业）——"低门槛称号 = 广覆盖用户"。

八、"品牌一致性"让 App 有完整叙事

App 25 的称号"论文阅读者"与产品名"论文助手"品牌一致：

"产品名 + 用户称号 + 数据"的三层品牌叙事：

• 产品：我是"助手"（工具）
• 用户：你是"阅读者"（身份）
• 数据：你的"收藏/阅读/笔记/方向"（画像）

"品牌一致性"让 App 有完整叙事——对比 App 17 志愿"省钱能手"（品牌违和），App 25 的"论文阅读者"与"论文助手"完全匹配——"称号与产品的一致性"是模板换肤必须检查的。

九、"研究方向: NLP · CV"的领域型身份

App 25 的 Slogan "研究方向: 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/3（36 → 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 菜单（收藏论文/阅读历史/笔记管理/研究方向/设置）——完整覆盖论文阅读工作流：

"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 块最简"是任务型应用的稳定模式。