鸿蒙原生应用 ArkTS 严格模式实战科研管理我的页 —— 四栏统计与菜单列表组合技App 24「科研项目管理」我的 TabProfileTab是个人中心页——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 个 BuilderUserCard StatRow MenuList Aboutbuild() { 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: 44margin({ top: -24 }) 20vp 实际重叠——卡片叠加悬浮。三、StatRow4 栏统计科研人员 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/列表的数据呼应—— 跨组件数据一致性 ✓。四、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 栏对应 任务记录执行历史与 StatRow 第 3 栏对应 科研成果累积产出与 StatRow 第 2 栏对应 获奖记录荣誉与 StatRow 第 4 栏呼应⚙️ 设置通用负责项目 任务记录 科研成果 获奖记录4 项科研专属菜单对应 StatRow 4 栏——统计 ↔ 菜单的精确对应——统计 4 栏 菜单 4 项 用户的 4 大数据/操作。 获奖记录是科研用户的特色菜单——App 23 实验室的 联系管理员也是特色菜单——特色菜单 业务核心——科研用户关心获奖、设备用户关心联系管理员。五、MenuList 结构与 AboutMenuList 与系列同款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 数量 0ProfileTab0 个 State—— 所有数据private不可变。这是系列第八个0 State个人中心App 13/17/20/21/22/23/24——展示型 0 State规律持续成立。4 个 Tab 的 State 分布App 24首页0项目1tasks文件1activeCat我的0App 24 是任务型 2 状态型应用——项目详情 ⬜/✅ 切换是真交互——App 24 用State tasks响应式数组State的深度观测机制使t.done !t.done字段修改触发 UI 重渲染——任务看板完成态即时响应。七、副教授 · 发表 8 篇论文 Slogan 的学术分量App 24 的 UserCard Slogan副教授 · 发表 8 篇论文值得从学术 App 角度分析Slogan 4 要素职称副教授—— 学术身份成就发表论文—— 学术产出数字8—— 精确可信分隔符·—— 层次清晰职称 论文是科研 App 的双重身份标识职称行政体系学校/单位认定论文学术产出同行评价对比系列其他 SloganApp 19: 摄影爱好者兴趣App 20: 读书人习惯App 21: 问卷达人贡献App 22: 投票达人参与App 23: 累计使用 36 小时投入App 24: 副教授 · 发表 8 篇论文职称 学术App 24 的 Slogan 是系列最重的身份——副教授 8 篇论文是科研 App 的硬核身份——学术身份 职称 论文。真实项目的学术身份维度学位学士/硕士/博士职称讲师/副教授/教授学术头衔博导/长江学者/院士研究领域计算机/生物/物理学术身份比消费身份更复杂——学术 App 必须支持多种身份维度的展示。八、4 栏统计的科研人员画像App 24 的 4 栏统计是科研人员的完整画像维度App 24App 23 实验室App 22 投票1负责项目 4预约记录 18创建投票 62科研成果 12使用时长 36h参与投票 283任务记录 36收藏设备 4历史投票 124论文发表 8待使用 2进行中 33 个任务型 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 个 Statetasks activeCat——State tasks的深度观测机制使任务看板完成态切换即时响应。