鸿蒙原生应用 HarmonyOS ArkTS 实战阅读管理我的页等级卡与成就徽章墙组合技App 20「阅读管理」我的 TabProfileTab是个人中心页。整页用渐变用户卡片小明同学 Lv.4 距 Lv.5 还需 120 经验 74% 经验条 4 栏彩色统计历史订单 28/进行中 3/满意度 98%/连续天数 15 本周使用条形图20 次/周六高亮 6 徽章成就墙4 解锁 2 未解锁 5 项菜单我的收藏带 NEW 角标 About。与 App 13 我的页几乎完全同源连历史订单/省钱能手都保留——是模板复刻的最完整示范。本篇基于20-reading-manager/entry/src/main/ets/pages/ProfileTab.ets约 226 行逐段拆解附 4 张实机截图。一、整体结构6 个 Builder 的紫色个人中心ProfileTab 的结构与 App 13/17 我的页完全同源0 个 Statebuild() { Column() { Scroll() { Column({ space: 0 }) { this.UserCard() this.StatRow() this.WeekChartCard() this.AchievementWall() 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) }6 个块顺序UserCard身份→ StatRow数据→ WeekChartCard行为图→ AchievementWall成就→ MenuList资产→ About关于。space: 0让 UserCard 和 StatRow 紧贴——StatRowmargin({ top: -28 })上浮形成卡片叠加悬浮效果。与 App 13 完全同源——6 块顺序、布局、负边距悬浮完全一致。唯一差异主题色紫 #8B5CF6 → 紫 #A855F7。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCard渐变 Lv.4 经验条 签到UserCard 与 App 13 我的页同构Stack 头像/Lv.4 徽章 姓名/认证/Slogan 经验条 签到/数据报告双按钮Builder UserCard() { Column({ space: 12 }) { Row({ space: 14 }) { Stack({ alignContent: Alignment.BottomEnd }) { Row() { Text().fontSize(34) } .width(60).height(60).backgroundColor(rgba(255,255,255,0.35)).borderRadius(D.rLg).justifyContent(FlexAlign.Center) .border({ width: 2, color: rgba(255,255,255,0.7) }) Row() { Text(Lv.4).fontSize(9).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) } .padding({ left: 5, right: 5, top: 1, bottom: 1 }) .backgroundColor(C.warn).borderRadius(4).border({ width: 1.5, color: #FFFFFF }) } Column({ space: 5 }) { Row({ space: 8 }) { Text(小明同学).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(认证).fontSize(9).fontColor(#FFFFFF) .backgroundColor(rgba(255,255,255,0.3)).padding({ left: 5, right: 5, top: 1, bottom: 1 }).borderRadius(3) } Text(活跃用户 · 已使用 28 天).fontSize(11).fontColor(rgba(255,255,255,0.85)) Row({ space: 4 }) { Text(距 Lv.5 还需).fontSize(9).fontColor(rgba(255,255,255,0.7)) Text(120).fontSize(11).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) Text(经验).fontSize(9).fontColor(rgba(255,255,255,0.7)) } Stack({ alignContent: Alignment.Start }) { Column().width(100%).height(4).backgroundColor(rgba(255,255,255,0.25)).borderRadius(2) Column().width(74%).height(4).backgroundColor(#FFFFFF).borderRadius(2) }.width(140) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%).padding({ left: D.pad, right: D.pad, top: this.safeTop 30, bottom: 16 }) Row() { Row({ space: 5 }) { Text().fontSize(11) Text(每日签到).fontSize(11).fontColor(#FFFFFF) } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.2)).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 签到成功 5 经验 }); }) Blank() Row({ space: 5 }) { Text().fontSize(11) Text(数据报告).fontSize(11).fontColor(#FFFFFF) } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.2)).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 数据报告 }); }) }.width(100%).padding({ left: D.pad, right: D.pad, bottom: 14 }) } .width(100%).linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }2.1 身份设定头像 Lv.4 徽章Stack BottomEnd60×60 半透明白头像 橙底白边 Lv.4 徽章C.warn姓名小明同学 认证标签Slogan活跃用户 · 已使用 28 天——时长叙事对比 App 18 的匹配率、App 19 的社团地位App 20 是使用时长经验距 Lv.5 还需 120 经验 74% 白色进度条Lv.4 徽章用橙色C.warn——等级徽章用警示色形成显著标记App 13/17/20 同款。2.2 伪签到不改变状态Row() { Row({ space: 5 }) { Text().fontSize(11) Text(每日签到).fontSize(11).fontColor(#FFFFFF) } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.2)).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 签到成功 5 经验 }); }) ...签到只弹 Toast签到成功 5 经验不改变状态——伪签到App 13/17 同款App 18/19 是真签到 exp10——**0 State 个人中心的签到是伪交互**是模板复刻的简化读者想看真签到参考 App 18/19。5 经验的数值App 13/17/20 都是 5——经验值参数跟随模板App 18/19 是 10。2.3 紫色 135° 渐变.width(100%).linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })#A855F7 → #C084FC135° 渐变——左上浓紫、右下浅紫——紫色个人中心阅读 App 的知识深度调性。三、StatRow4 栏统计模板遗留StatRow 是 4 栏统计历史订单 28/进行中 3/满意度 98%/连续天数 15与 App 13 完全同源private stats: StatItem[] [ { value: 28, label: 历史订单, color: C.primary }, { value: 3, label: 进行中, color: C.accent }, { value: 98%, label: 满意度, color: C.ok }, { value: 15, label: 连续天数, color: C.warn } ];关键问题历史订单/满意度是电商统计不是阅读统计——个人中心统计没换业务App 13 音乐订单模板原样保留——这是 App 20 模板复刻最明显的遗留App 13音乐App 20阅读应改为历史订单 28已读书籍 36进行中 3在读 3满意度 98%阅读时长 128h连续天数 15读书笔记 246统计项没换让 App 20 的我的页与首页已读书籍 36数据矛盾首页 36、我的页 28——**跨页数据不一致**是本页最大的瑕疵首页已读书籍 36 vs 我的页历史订单 28——读者必须引以为戒换业务必换所有数据。4 栏彩色紫/浅紫/绿/橙——颜色留给状态。四、WeekChartCard本周使用条形图WeekChartCard 与 App 13 同构7 天条形图 20 次/周六高亮Builder WeekChartCard() { Column({ space: 12 }) { Row() { Text( 本周使用).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(20 次).fontSize(13).fontWeight(FontWeight.Bold).fontColor(C.primary) }.width(100%) Row({ space: 4 }) { ForEach(this.weekBars, (b: WeekBar, idx: number) { Column({ space: 6 }) { Column() .width(18) .height(Math.max(6, b.value / 5 * 80)) .borderRadius(4) .linearGradient({ angle: 180, colors: idx 5 ? [[C.primary, 0.0], [C.accent, 1.0]] : [[C.primarySoft, 0.0], [C.primary, 1.0]] }) Text(b.day).fontSize(10).fontColor(idx 5 ? C.primary : C.textDim) .fontWeight(idx 5 ? FontWeight.Bold : FontWeight.Normal) }.layoutWeight(1).alignItems(HorizontalAlign.Center) }, (b: WeekBar) b.day) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .margin({ top: 14, left: D.pad, right: D.pad }) }数据2/3/1/4/3/5/2——周六idx5value5 最高、周三idx1? 不对idx2 周三 value1最低——周六高亮idx 5写死。b.value / 5 * 80归一化最大值 5 → 80vp。汇总20 次2314352 20 ✓——严格自洽。本周使用 20 次在阅读 App 里是打开 20 次次数 vs 首页的时长——次数和时长两个度量混用又是口径问题但20 次 各柱之和至少数学自洽。五、AchievementWall6 徽章成就墙模板遗留AchievementWall 是 6 个徽章4 解锁 2 未解锁与 App 13 完全同源private achievements: Achievement[] [ { icon: , title: 初次使用, unlocked: true, desc: 第一次下单 }, { icon: , title: 活跃用户, unlocked: true, desc: 使用7天 }, { icon: ⭐, title: 好评达人, unlocked: true, desc: 5星好评10次 }, { icon: , title: 省钱能手, unlocked: true, desc: 节省100元 }, { icon: , title: 资深用户, unlocked: false, desc: 使用100天 }, { icon: , title: 完美用户, unlocked: false, desc: 满意度100% } ];关键问题同 StatRow第一次下单/好评达人/省钱能手/节省100元是电商徽章不是阅读徽章——**成就徽章没换业务**是 App 20 模板复刻的最大遗留App 13 徽章App 20阅读应改为初次使用第一次下单初读体验读完第一本书好评达人5星好评10次阅读达人累计阅读100小时省钱能手节省100元藏书阁收藏100本书完美用户满意度100%大师读者读完50本书省钱能手出现在阅读 App 的违和感和 App 17 志愿版一样的问题——**徽章 业务成就**是必须遵守的原则。解锁/未解锁三件套背景/透明度/文字4/6动态计算.filter(a a.unlocked).length——App 13/20 用动态计算App 14/15/16 硬编码。六、MenuList AboutMenuList 是 5 项菜单历史订单/消费统计/提醒设置/我的收藏/设置我的收藏带 NEW 角标private menus: MenuItem[] [ { id: 1, emoji: , title: 历史订单, desc: 查看所有历史记录, badge: }, { id: 2, emoji: , title: 消费统计, desc: 月度数据分析, badge: }, { id: 3, emoji: , title: 提醒设置, desc: 订单状态通知, badge: }, { id: 4, emoji: ⭐, title: 我的收藏, desc: 常用列表, badge: NEW }, { id: 5, emoji: ⚙️, title: 设置, desc: 账号与隐私, badge: } ];同 StatRow 的问题历史订单/消费统计/订单状态通知是电商菜单——菜单没换业务阅读 App 应改为阅读记录/读书笔记/书签管理/阅读偏好等。角标NEW →C.ok绿App 13/17/20 同款NEW 用绿、数字用红——m.badge.length 0条件渲染 Divider().margin({ left: 58 })分隔线。AboutVersion 1.0.0HarmonyOS 6.0 · ArkTS · API 23两行App 13 同款。七、State 数量 0模板遗留ProfileTab0 个 State——所有数据private不可变签到是伪签到。4 个 Tab 的 State 分布App 20页面State 数量类型首页1searchText展示搜索书库5表单创建表单记录1activeTab筛选我的0纯展示**0 State 个人中心是 App 13/17/20 这条模板复刻线的标准App 18/19 是 3 个 State 的真签到——模板复刻 vs 功能进化的两条线**在系列里并行。八、模板复刻的正反面教材App 20 我的页是系列模板复刻的最完整示范App 13 紫 #8B5CF6 → App 20 紫 #A855F7也是最典型的反面教材复刻对了的主题色紫 #A855F7 浅紫 渐变布局6 块结构 负边距悬浮组件Stack 头像/Lv 徽章/进度条/Toggle/角标交互Builder 拆分 State 管理没换的反面教材统计历史订单/满意度 → 应是已读书籍/时长徽章省钱能手 → 应是阅读成就菜单历史订单/消费统计 → 应是阅读记录/书签文案下单订单 → 应是阅读笔记换主题不换业务是模板复刻的最大陷阱——用户打开阅读管理却看到省钱能手徽章违和感极强。真实项目套用模板必须数据 文案全换。正面示范App 18/19App 18 社交、App 19 摄影的个人中心完全定制了业务数据社交徽章/摄影徽章/业务统计——换主题 换业务 成功复刻。九、阅读 App 个人中心的业务化改造清单对比 App 13音乐与 App 20阅读的个人中心整理一份**业务化改造清单**——读者套用任何个人中心模板时按此清单逐项替换模板项App 13音乐App 20阅读应改为用户名小明同学读者小明或书友Slogan活跃用户·已使用28天阅读达人·累计阅读128小时统计1历史订单 28已读书籍 36统计2进行中 3在读 3统计3满意度 98%阅读时长 128h统计4连续天数 15读书笔记 246徽章初次使用/好评达人/省钱能手初读体验/阅读达人/藏书阁菜单历史订单/消费统计阅读记录/读书笔记周图本周使用 20 次本周阅读 20 次签到5 经验10 阅读经验个人中心业务化的 5 大块用户/统计/徽章/菜单/周图——每块都要随业务换。判断标准把 App 20 的每个字读一遍出现订单/消费/省钱就是没换干净——业务词检测是最快的复刻验收法搜索订单/消费/省钱/下单关键词有残留就换。十、个人中心模板的系列演变线回顾系列 6 个个人中心App 13/14/15/16/17/18/19/20 中选代表性的可以看清两条演变线线 1模板复刻线骨架复用、业务未换App用户等级业务数据13 音乐小明同学Lv.4订单/省钱音乐场景违和17 志愿小明同学Lv.4订单/省钱志愿场景违和20 阅读小明同学Lv.4订单/省钱阅读场景违和线 2业务定制线骨架 业务全换App用户等级业务数据14 运动张运动Lv.5预约/时长/卡路里15 环保李环保Lv.6分类/准确率/减碳16 商城王积分Lv.7积分/兑换/收藏18 社交张同学Lv.8好友/互动/匹配率19 摄影摄影爱好者Lv.6作品/点赞/获奖对比结论业务定制线的 5 个 App 是成功的模板复用数据/徽章/菜单全换模板复刻线的 3 个 App 是偷懒的模板复用只换主题色。读者应学习线 2、警惕线 1——复用模板和复制模板只有一字之差质量天壤之别。等级递进的彩蛋业务定制线等级 5→6→7→8→6 递增反映每个 App 用户更资深的叙事模板复刻线固定 Lv.4——等级 业务定制的深度信号。十一、总结App 20「阅读管理」我的页解析完毕。Lv.4 紫色个人中心是 App 13 模板的最完整复刻同时也是换主题不换业务的反面教材——读者应对比 App 18/19 的业务定制版学习正确的模板复用。 鸿蒙原生应用 HarmonyOS ArkTS 实战：阅读管理我的页等级卡与成就徽章墙组合技
鸿蒙原生应用 HarmonyOS ArkTS 实战阅读管理我的页等级卡与成就徽章墙组合技App 20「阅读管理」我的 TabProfileTab是个人中心页。整页用渐变用户卡片小明同学 Lv.4 距 Lv.5 还需 120 经验 74% 经验条 4 栏彩色统计历史订单 28/进行中 3/满意度 98%/连续天数 15 本周使用条形图20 次/周六高亮 6 徽章成就墙4 解锁 2 未解锁 5 项菜单我的收藏带 NEW 角标 About。与 App 13 我的页几乎完全同源连历史订单/省钱能手都保留——是模板复刻的最完整示范。本篇基于20-reading-manager/entry/src/main/ets/pages/ProfileTab.ets约 226 行逐段拆解附 4 张实机截图。一、整体结构6 个 Builder 的紫色个人中心ProfileTab 的结构与 App 13/17 我的页完全同源0 个 Statebuild() { Column() { Scroll() { Column({ space: 0 }) { this.UserCard() this.StatRow() this.WeekChartCard() this.AchievementWall() 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) }6 个块顺序UserCard身份→ StatRow数据→ WeekChartCard行为图→ AchievementWall成就→ MenuList资产→ About关于。space: 0让 UserCard 和 StatRow 紧贴——StatRowmargin({ top: -28 })上浮形成卡片叠加悬浮效果。与 App 13 完全同源——6 块顺序、布局、负边距悬浮完全一致。唯一差异主题色紫 #8B5CF6 → 紫 #A855F7。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCard渐变 Lv.4 经验条 签到UserCard 与 App 13 我的页同构Stack 头像/Lv.4 徽章 姓名/认证/Slogan 经验条 签到/数据报告双按钮Builder UserCard() { Column({ space: 12 }) { Row({ space: 14 }) { Stack({ alignContent: Alignment.BottomEnd }) { Row() { Text().fontSize(34) } .width(60).height(60).backgroundColor(rgba(255,255,255,0.35)).borderRadius(D.rLg).justifyContent(FlexAlign.Center) .border({ width: 2, color: rgba(255,255,255,0.7) }) Row() { Text(Lv.4).fontSize(9).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) } .padding({ left: 5, right: 5, top: 1, bottom: 1 }) .backgroundColor(C.warn).borderRadius(4).border({ width: 1.5, color: #FFFFFF }) } Column({ space: 5 }) { Row({ space: 8 }) { Text(小明同学).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(认证).fontSize(9).fontColor(#FFFFFF) .backgroundColor(rgba(255,255,255,0.3)).padding({ left: 5, right: 5, top: 1, bottom: 1 }).borderRadius(3) } Text(活跃用户 · 已使用 28 天).fontSize(11).fontColor(rgba(255,255,255,0.85)) Row({ space: 4 }) { Text(距 Lv.5 还需).fontSize(9).fontColor(rgba(255,255,255,0.7)) Text(120).fontSize(11).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) Text(经验).fontSize(9).fontColor(rgba(255,255,255,0.7)) } Stack({ alignContent: Alignment.Start }) { Column().width(100%).height(4).backgroundColor(rgba(255,255,255,0.25)).borderRadius(2) Column().width(74%).height(4).backgroundColor(#FFFFFF).borderRadius(2) }.width(140) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%).padding({ left: D.pad, right: D.pad, top: this.safeTop 30, bottom: 16 }) Row() { Row({ space: 5 }) { Text().fontSize(11) Text(每日签到).fontSize(11).fontColor(#FFFFFF) } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.2)).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 签到成功 5 经验 }); }) Blank() Row({ space: 5 }) { Text().fontSize(11) Text(数据报告).fontSize(11).fontColor(#FFFFFF) } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.2)).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 数据报告 }); }) }.width(100%).padding({ left: D.pad, right: D.pad, bottom: 14 }) } .width(100%).linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }2.1 身份设定头像 Lv.4 徽章Stack BottomEnd60×60 半透明白头像 橙底白边 Lv.4 徽章C.warn姓名小明同学 认证标签Slogan活跃用户 · 已使用 28 天——时长叙事对比 App 18 的匹配率、App 19 的社团地位App 20 是使用时长经验距 Lv.5 还需 120 经验 74% 白色进度条Lv.4 徽章用橙色C.warn——等级徽章用警示色形成显著标记App 13/17/20 同款。2.2 伪签到不改变状态Row() { Row({ space: 5 }) { Text().fontSize(11) Text(每日签到).fontSize(11).fontColor(#FFFFFF) } .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(rgba(255,255,255,0.2)).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 签到成功 5 经验 }); }) ...签到只弹 Toast签到成功 5 经验不改变状态——伪签到App 13/17 同款App 18/19 是真签到 exp10——**0 State 个人中心的签到是伪交互**是模板复刻的简化读者想看真签到参考 App 18/19。5 经验的数值App 13/17/20 都是 5——经验值参数跟随模板App 18/19 是 10。2.3 紫色 135° 渐变.width(100%).linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })#A855F7 → #C084FC135° 渐变——左上浓紫、右下浅紫——紫色个人中心阅读 App 的知识深度调性。三、StatRow4 栏统计模板遗留StatRow 是 4 栏统计历史订单 28/进行中 3/满意度 98%/连续天数 15与 App 13 完全同源private stats: StatItem[] [ { value: 28, label: 历史订单, color: C.primary }, { value: 3, label: 进行中, color: C.accent }, { value: 98%, label: 满意度, color: C.ok }, { value: 15, label: 连续天数, color: C.warn } ];关键问题历史订单/满意度是电商统计不是阅读统计——个人中心统计没换业务App 13 音乐订单模板原样保留——这是 App 20 模板复刻最明显的遗留App 13音乐App 20阅读应改为历史订单 28已读书籍 36进行中 3在读 3满意度 98%阅读时长 128h连续天数 15读书笔记 246统计项没换让 App 20 的我的页与首页已读书籍 36数据矛盾首页 36、我的页 28——**跨页数据不一致**是本页最大的瑕疵首页已读书籍 36 vs 我的页历史订单 28——读者必须引以为戒换业务必换所有数据。4 栏彩色紫/浅紫/绿/橙——颜色留给状态。四、WeekChartCard本周使用条形图WeekChartCard 与 App 13 同构7 天条形图 20 次/周六高亮Builder WeekChartCard() { Column({ space: 12 }) { Row() { Text( 本周使用).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(20 次).fontSize(13).fontWeight(FontWeight.Bold).fontColor(C.primary) }.width(100%) Row({ space: 4 }) { ForEach(this.weekBars, (b: WeekBar, idx: number) { Column({ space: 6 }) { Column() .width(18) .height(Math.max(6, b.value / 5 * 80)) .borderRadius(4) .linearGradient({ angle: 180, colors: idx 5 ? [[C.primary, 0.0], [C.accent, 1.0]] : [[C.primarySoft, 0.0], [C.primary, 1.0]] }) Text(b.day).fontSize(10).fontColor(idx 5 ? C.primary : C.textDim) .fontWeight(idx 5 ? FontWeight.Bold : FontWeight.Normal) }.layoutWeight(1).alignItems(HorizontalAlign.Center) }, (b: WeekBar) b.day) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .margin({ top: 14, left: D.pad, right: D.pad }) }数据2/3/1/4/3/5/2——周六idx5value5 最高、周三idx1? 不对idx2 周三 value1最低——周六高亮idx 5写死。b.value / 5 * 80归一化最大值 5 → 80vp。汇总20 次2314352 20 ✓——严格自洽。本周使用 20 次在阅读 App 里是打开 20 次次数 vs 首页的时长——次数和时长两个度量混用又是口径问题但20 次 各柱之和至少数学自洽。五、AchievementWall6 徽章成就墙模板遗留AchievementWall 是 6 个徽章4 解锁 2 未解锁与 App 13 完全同源private achievements: Achievement[] [ { icon: , title: 初次使用, unlocked: true, desc: 第一次下单 }, { icon: , title: 活跃用户, unlocked: true, desc: 使用7天 }, { icon: ⭐, title: 好评达人, unlocked: true, desc: 5星好评10次 }, { icon: , title: 省钱能手, unlocked: true, desc: 节省100元 }, { icon: , title: 资深用户, unlocked: false, desc: 使用100天 }, { icon: , title: 完美用户, unlocked: false, desc: 满意度100% } ];关键问题同 StatRow第一次下单/好评达人/省钱能手/节省100元是电商徽章不是阅读徽章——**成就徽章没换业务**是 App 20 模板复刻的最大遗留App 13 徽章App 20阅读应改为初次使用第一次下单初读体验读完第一本书好评达人5星好评10次阅读达人累计阅读100小时省钱能手节省100元藏书阁收藏100本书完美用户满意度100%大师读者读完50本书省钱能手出现在阅读 App 的违和感和 App 17 志愿版一样的问题——**徽章 业务成就**是必须遵守的原则。解锁/未解锁三件套背景/透明度/文字4/6动态计算.filter(a a.unlocked).length——App 13/20 用动态计算App 14/15/16 硬编码。六、MenuList AboutMenuList 是 5 项菜单历史订单/消费统计/提醒设置/我的收藏/设置我的收藏带 NEW 角标private menus: MenuItem[] [ { id: 1, emoji: , title: 历史订单, desc: 查看所有历史记录, badge: }, { id: 2, emoji: , title: 消费统计, desc: 月度数据分析, badge: }, { id: 3, emoji: , title: 提醒设置, desc: 订单状态通知, badge: }, { id: 4, emoji: ⭐, title: 我的收藏, desc: 常用列表, badge: NEW }, { id: 5, emoji: ⚙️, title: 设置, desc: 账号与隐私, badge: } ];同 StatRow 的问题历史订单/消费统计/订单状态通知是电商菜单——菜单没换业务阅读 App 应改为阅读记录/读书笔记/书签管理/阅读偏好等。角标NEW →C.ok绿App 13/17/20 同款NEW 用绿、数字用红——m.badge.length 0条件渲染 Divider().margin({ left: 58 })分隔线。AboutVersion 1.0.0HarmonyOS 6.0 · ArkTS · API 23两行App 13 同款。七、State 数量 0模板遗留ProfileTab0 个 State——所有数据private不可变签到是伪签到。4 个 Tab 的 State 分布App 20页面State 数量类型首页1searchText展示搜索书库5表单创建表单记录1activeTab筛选我的0纯展示**0 State 个人中心是 App 13/17/20 这条模板复刻线的标准App 18/19 是 3 个 State 的真签到——模板复刻 vs 功能进化的两条线**在系列里并行。八、模板复刻的正反面教材App 20 我的页是系列模板复刻的最完整示范App 13 紫 #8B5CF6 → App 20 紫 #A855F7也是最典型的反面教材复刻对了的主题色紫 #A855F7 浅紫 渐变布局6 块结构 负边距悬浮组件Stack 头像/Lv 徽章/进度条/Toggle/角标交互Builder 拆分 State 管理没换的反面教材统计历史订单/满意度 → 应是已读书籍/时长徽章省钱能手 → 应是阅读成就菜单历史订单/消费统计 → 应是阅读记录/书签文案下单订单 → 应是阅读笔记换主题不换业务是模板复刻的最大陷阱——用户打开阅读管理却看到省钱能手徽章违和感极强。真实项目套用模板必须数据 文案全换。正面示范App 18/19App 18 社交、App 19 摄影的个人中心完全定制了业务数据社交徽章/摄影徽章/业务统计——换主题 换业务 成功复刻。九、阅读 App 个人中心的业务化改造清单对比 App 13音乐与 App 20阅读的个人中心整理一份**业务化改造清单**——读者套用任何个人中心模板时按此清单逐项替换模板项App 13音乐App 20阅读应改为用户名小明同学读者小明或书友Slogan活跃用户·已使用28天阅读达人·累计阅读128小时统计1历史订单 28已读书籍 36统计2进行中 3在读 3统计3满意度 98%阅读时长 128h统计4连续天数 15读书笔记 246徽章初次使用/好评达人/省钱能手初读体验/阅读达人/藏书阁菜单历史订单/消费统计阅读记录/读书笔记周图本周使用 20 次本周阅读 20 次签到5 经验10 阅读经验个人中心业务化的 5 大块用户/统计/徽章/菜单/周图——每块都要随业务换。判断标准把 App 20 的每个字读一遍出现订单/消费/省钱就是没换干净——业务词检测是最快的复刻验收法搜索订单/消费/省钱/下单关键词有残留就换。十、个人中心模板的系列演变线回顾系列 6 个个人中心App 13/14/15/16/17/18/19/20 中选代表性的可以看清两条演变线线 1模板复刻线骨架复用、业务未换App用户等级业务数据13 音乐小明同学Lv.4订单/省钱音乐场景违和17 志愿小明同学Lv.4订单/省钱志愿场景违和20 阅读小明同学Lv.4订单/省钱阅读场景违和线 2业务定制线骨架 业务全换App用户等级业务数据14 运动张运动Lv.5预约/时长/卡路里15 环保李环保Lv.6分类/准确率/减碳16 商城王积分Lv.7积分/兑换/收藏18 社交张同学Lv.8好友/互动/匹配率19 摄影摄影爱好者Lv.6作品/点赞/获奖对比结论业务定制线的 5 个 App 是成功的模板复用数据/徽章/菜单全换模板复刻线的 3 个 App 是偷懒的模板复用只换主题色。读者应学习线 2、警惕线 1——复用模板和复制模板只有一字之差质量天壤之别。等级递进的彩蛋业务定制线等级 5→6→7→8→6 递增反映每个 App 用户更资深的叙事模板复刻线固定 Lv.4——等级 业务定制的深度信号。十一、总结App 20「阅读管理」我的页解析完毕。Lv.4 紫色个人中心是 App 13 模板的最完整复刻同时也是换主题不换业务的反面教材——读者应对比 App 18/19 的业务定制版学习正确的模板复用。