鸿蒙原生应用 ArkTS 严格模式实战：科研管理我的页 —— 四栏统计与菜单列表组合技
App 24「科研项目管理」我的 Tab（ProfileTab），是个人中心页——4 块结构（UserCard / StatRow / MenuList / About）：渐变用户卡（📑 科研工作者 + "副教授 · 发表 8 篇论文"）+ 4 栏统计（负责项目 4/科研成果 12/任务记录 36/论文发表 8）+ 5 菜单（负责项目/任务记录/科研成果/获奖记录/设置）+ About（科研项目管理 v1.0.0）。与 App 21/22/23 我的页同构（4 块最简 + 92% 宽 + 负边距悬浮）。本篇基于
24-research-mgmt/entry/src/main/ets/pages/ProfileTab.ets（约 100 行）逐段拆解，附 4 张实机截图。
一、整体结构：4 块最简个人中心
ProfileTab 是系列最简洁的个人中心之一——4 个 @Builder（UserCard + StatRow + MenuList + About）：
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 我的页 100% 同构——"任务型个人中心模板"第 4 次复用。
项目源码开源：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('副教授 · 发表 8 篇论文').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—— 科研管理的视觉符号
- "科研工作者"—— 称号型身份（与 App 19/20/21/22/23 同款"业务 + 身份"）
- "副教授 · 发表 8 篇论文"Slogan ——"职称 + 成就"双信息——比单一"使用 X 小时"更有学术分量
"副教授 · 发表 8 篇论文"—— 这是系列最"具体"的身份描述：
- App 19: "摄影爱好者"
- App 20: "读书人"
- App 21: "问卷达人"
- App 22: "投票达人"
- App 24: "副教授 · 发表 8 篇论文"——职称 + 数字——学术身份最重
"副教授"是中国高校职称体系（讲师/副教授/教授）——科研用户的"职称"是核心身份标识——"发表 8 篇论文"是科研人的核心成就指标——"职称 + 论文"是科研 App 的"双重要身份"。
主题色#4338CA靛蓝—— 系列第一个靛蓝——"靛蓝 = 科研/学术/专业"的色彩心理学（学位服/学术期刊封面常用靛蓝）。
bottom: 44+margin({ top: -24 })= 20vp 实际重叠——"卡片叠加悬浮"。
三、StatRow：4 栏统计（科研人员 4 大指标）
StatRow 是 4 栏统计（与 App 21/22/23 同款结构）：
private stats: StatItem[] = [ { value: '4', label: '负责项目' }, { value: '12', label: '科研成果' }, { value: '36', label: '任务记录' }, { value: '8', label: '论文发表' } ];4 栏的"科研人员画像"：
| 数字 | 标签 | 维度 |
|---|---|---|
| 4 | 负责项目 | 当前4 个项目（与首页项目卡数量一致 ✓） |
| 12 | 科研成果 | 累积12 项成果（论文+专利+报告） |
| 36 | 任务记录 | 执行36 条任务（18 已完成 + 18 待办） |
| 8 | 论文发表 | 学术8 篇论文（与 UserCard Slogan 一致 ✓） |
4 维度的"科研人员画像"：
- 当前（4 负责项目）——"现在做多少"
- 累积（12 科研成果）——"出过多少"
- 执行（36 任务记录）——"做了多少"
- 学术（8 论文发表）——"学术成就"
"科研人员的 4 维画像"——"当前/累积/执行/学术"完整刻画科研工作——对比 App 23 实验室的"预约/时长/收藏/待使用"（设备维度）——App 24 是"科研人员维度"。
数据一致性：
- 4 负责项目 = 首页项目卡数量 ✓
- 8 论文发表 = UserCard Slogan ✓
- 36 任务记录 = 18 已完成 + 18 待办（首页"任务待办 18"的 2 倍 = 全部任务）
"统计与 Slogan/列表"的数据呼应"—— 跨组件数据一致性 ✓。
四、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 项菜单的"科研业务"覆盖：
| 菜单 | 业务 |
|---|---|
| 🔬 负责项目 | 科研管理核心（与 StatRow 第 1 栏对应） |
| 📝 任务记录 | 执行历史（与 StatRow 第 3 栏对应） |
| 📄 科研成果 | 累积产出（与 StatRow 第 2 栏对应） |
| 🏆 获奖记录 | 荣誉（与 StatRow 第 4 栏呼应） |
| ⚙️ 设置 | 通用 |
"负责项目 + 任务记录 + 科研成果 + 获奖记录"4 项科研专属菜单对应 StatRow 4 栏——"统计 ↔ 菜单"的精确对应——"统计 4 栏 + 菜单 4 项 = 用户的 4 大数据/操作"。
"🏆 获奖记录"是科研用户的特色菜单——App 23 实验室的"📞 联系管理员"也是特色菜单——"特色菜单 = 业务核心"——科研用户关心"获奖"、设备用户关心"联系管理员"。
五、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"个人中心（App 13/17/20/21/22/23/24）——"展示型 = 0 @State"规律持续成立。
4 个 Tab 的 @State 分布（App 24）：
- 首页：0
- 项目：1（tasks）
- 文件：1（activeCat）
- 我的：0
App 24 是"任务型 2 状态"型应用——项目详情 ⬜/✅ 切换是"真交互"——App 24 用@State tasks响应式数组，@State的深度观测机制使t.done = !t.done字段修改触发 UI 重渲染——任务看板完成态即时响应。
七、"副教授 · 发表 8 篇论文" Slogan 的学术分量
App 24 的 UserCard Slogan"副教授 · 发表 8 篇论文"值得从学术 App 角度分析：
Slogan 4 要素：
- 职称（副教授）—— 学术身份
- 成就（发表论文）—— 学术产出
- 数字（8）—— 精确可信
- 分隔符（·）—— 层次清晰
"职称 + 论文"是科研 App 的"双重身份标识"：
- 职称：行政体系（学校/单位认定）
- 论文：学术产出（同行评价）
对比系列其他 Slogan：
- App 19: "摄影爱好者"（兴趣）
- App 20: "读书人"（习惯）
- App 21: "问卷达人"（贡献）
- App 22: "投票达人"（参与）
- App 23: "累计使用 36 小时"（投入）
- App 24: "副教授 · 发表 8 篇论文"（职称 + 学术）
App 24 的 Slogan 是系列最"重"的身份——"副教授 + 8 篇论文"是科研 App 的"硬核身份"——学术身份 = 职称 + 论文。
真实项目的"学术身份"维度：
- 学位（学士/硕士/博士）
- 职称（讲师/副教授/教授）
- 学术头衔（博导/长江学者/院士）
- 研究领域（计算机/生物/物理）
"学术身份"比"消费身份"更复杂——学术 App 必须支持多种身份维度的展示。
八、4 栏统计的"科研人员画像"
App 24 的 4 栏统计是"科研人员"的完整画像：
| 维度 | App 24 | App 23 实验室 | App 22 投票 |
|---|---|---|---|
| 1 | 负责项目 4 | 预约记录 18 | 创建投票 6 |
| 2 | 科研成果 12 | 使用时长 36h | 参与投票 28 |
| 3 | 任务记录 36 | 收藏设备 4 | 历史投票 12 |
| 4 | 论文发表 8 | 待使用 2 | 进行中 3 |
3 个"任务型 App"的 4 栏统计对比：
- App 22 投票：4 维度都是"投票"（创作者+参与者双视角）
- App 23 实验室：4 维度都是"设备预约"（行为+时长+偏好+待办）
- App 24 科研：4 维度是"科研画像"（当前+累积+执行+学术）
"4 栏统计 = 4 维用户画像"—— 每类 App 的 4 栏不同——"统计维度 = 业务角色"——读者做自己产品时，"先想业务角色 4 维，再设计 4 栏统计"。
九、"科研工作者"与系列"称号型身份"的对比
App 24 的"科研工作者 + 副教授"是系列最学术化的称号——对比系列其他称号：
| App | 称号 | 业务 |
|---|---|---|
| 13 音乐 | "用户一" | 通用 |
| 17 志愿 | "用户一" | 通用 |
| 19 摄影 | "摄影爱好者" | 兴趣型 |
| 20 阅读 | "用户一" | 通用 |
| 21 问卷 | "问卷达人" | 业务型 |
| 22 投票 | "投票达人" | 业务型 |
| 23 实验室 | "科研达人" | 业务型 |
| 24 科研 | "科研工作者" | 学术型 |
"科研工作者"比"科研达人"更专业——"者"是身份（做什么的）、"人"是水平（做得怎样）：
- 摄影爱好者= "我爱好摄影"
- 科研工作者= "我是做科研的"
- 科研达人= "我科研很厉害"
"工作者"是中性词（所有做科研的人）、"爱好者"是兴趣词（爱做不一定要做）、"达人"是水平词（做得很好）——3 个称号适合不同 App：
- 兴趣 App（摄影）用"爱好者"
- 业务 App（投票/问卷）用"达人"
- 职业 App（科研）用"工作者"
"App 调性 = 称号选择"——读者做自己产品时，根据调性选称号（专业/兴趣/业务）。
十、"副教授 + 8 篇论文" 的"职称+成就"双信息
App 24 的 Slogan"副教授 · 发表 8 篇论文"是系列唯一带"职称"的身份描述——"副教授"是中国高校职称体系（讲师/副教授/教授）的中间一档。
"职称 + 成就"双信息的 Slogan 设计：
- 身份维度（职称）："我是什么"（副教授 = 学术地位）
- 成就维度（论文）："我做了什么"（8 篇 = 学术产出）
"双维度身份标识"让 Slogan 既有"位置"（职称）又有"成果"（论文）——比单一 Slogan 更立体。
学术身份 vs 商业身份的差异：
- 学术身份：职称 + 论文 + 项目 + 奖项
- 商业身份：职位 + 业绩 + 客户 + 收入
- 创作者身份：粉丝 + 作品 + 影响力 + 收入
"App 用户是学者/创作者/专业人士"时，"职称/头衔 + 成就"双信息 Slogan比"动词+对象"更合适。
十一、MenuList 的"5 菜单"与科研工作流
App 24 的 5 菜单（负责项目/任务记录/科研成果/获奖记录/设置）——完整覆盖科研管理工作流：
| 菜单 | 对应工作流环节 | 数据来源 |
|---|---|---|
| 负责项目 | "我在管什么" | projects 表 |
| 任务记录 | "我做了什么" | tasks 表 |
| 科研成果 | "我产出了什么" | results 表 |
| 获奖记录 | "我获得了什么" | awards 表 |
| 设置 | "偏好配置" | preferences 表 |
"5 菜单 = 科研管理的 5 个维度"——项目/任务/成果/获奖/设置——每个菜单对应一个数据表——"菜单 = 数据入口"。
对比系列其他 App 的菜单设计：
- App 21 问卷：我的问卷/填写记录/数据导出/问卷模板/设置（创作流）
- App 22 投票：参与记录/创建投票/投票历史/统计分析/设置（投票流）
- App 23 实验室：预约记录/使用记录/设备收藏/联系管理员/设置（预约流）
- App 24 科研：负责项目/任务记录/科研成果/获奖记录/设置（科研流）
"5 菜单 = 业务工作流的 5 个节点"——读者做自己 App 时，"先梳理业务工作流，再设计菜单"。
十二、总结
App 24 我的页解析完毕。4 块最简结构（UserCard + StatRow + MenuList + About）+ 靛蓝渐变 + 4 栏统计 + 5 菜单是核心组件。"科研工作者"的学术身份 + "副教授 · 发表 8 篇论文"的职称成就双信息 Slogan + "项目/任务/成果/论文"4 维画像——是科研管理类 App 个人中心的典型设计。与 App 21/22/23 我的页 100% 同构——"任务型个人中心模板"第 4 次复用。App 24 有 2 个 @State（tasks + activeCat）——@State tasks的深度观测机制使任务看板完成态切换即时响应。
