鸿蒙原生应用实战：自行车租赁我的页 —— 三段式菜单与悬浮统计组合技

App 33「校园自行车租赁」我的（ProfileTab），主题色 #2D9CDB 青蓝。我的页采用"用户卡 + 统计 + 菜单 + About"四区布局——青蓝渐变 UserCard（🚴 64 半透明圆形头像 + "骑行达人"标题 + "累计减碳 12.6 kg 🌱"副标题） + 悬浮 StatRow（margin -24 上移 + 48 骑行次数 / 126km 总里程 / ¥88 余额 3 统计项） + MenuList 5 菜单项（📋 骑行记录 48次 / 💰 我的钱包 ¥88 / 🎟️ 优惠券 3张 / 🎫 骑行月卡 未开通 / ⚙️ 设置，每项含 emoji + 标题 + extra 右侧辅助文字 + ">" 箭头 + 0.5px Divider 分割线） + 底部 About（"校园自行车租赁" + "Version 1.0.0"）。本篇基于 33-campus-bike/entry/src/main/ets/pages/ProfileTab.ets（约 100 行）逐段拆解，附 4 张实机截图。

一、整体结构：四区"用户卡 + 统计 + 菜单 + About"布局

App 33 我的页是"用户信息 + 数据统计 + 菜单导航 + 底部版本"的标准我的页——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 块结构：

1. UserCard — 青蓝渐变用户卡
2. StatRow — 悬浮 3 统计卡
3. MenuList — 5 菜单列表（带 extra）
4. About — 底部版本信息

与 App 32 我的页对比：

• App 32：4 统计（12/95/¥50/0）+ 4 菜单（借用/押金/信用/设置）
• App 33：3 统计（48/126km/¥88）+ 5 菜单（骑行/钱包/优惠券/月卡/设置）

"32 四统计四菜单 vs 33 三统计五菜单"——"统计数 vs 菜单数"——"32 数据多、33 功能多"——"共享雨伞数据维度多、共享单车功能入口多"——"两个共享 App 我的页的差异"。

"33 菜单带 extra" 是特色——"每菜单右侧有辅助文字"——"48次/¥88/3张/未开通"——"菜单 = 标题 + 数据"——"extra = 菜单摘要"——"App 32 菜单无 extra"——"33 菜单信息更丰富"。

主题色 #2D9CDB 青蓝——同首页/地图/骑行——"品牌色贯穿全 App"。

项目源码开源：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('累计减碳 12.6 kg 🌱').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]] })
}

UserCard 结构：

• 外层：青蓝 135° 渐变背景（#2D9CDB → #69B7E8）+ 顶部 safeTop + 30 padding + 底部 44 padding
• 内层 Row：64×64 半透明白圆头像（🚴 32 号）+ 文字区（"骑行达人" 18 号加粗 + "累计减碳 12.6 kg 🌱" 12 号 0.85 透明）

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——"青蓝 135° 渐变"——同骑行页 RideCard——"系列渐变统一"——"#2D9CDB → #69B7E8"。

padding({ top: this.safeTop + 30, bottom: 44 }) 非对称 padding——"顶部安全区 + 底部 44 让位"——"44 = StatRow 悬浮的占位"——"负 margin 重叠设计"。

Row().width(64).height(64).backgroundColor('#33FFFFFF').borderRadius(32) 头像——"64×64 半透明白圆"——"#33FFFFFF = 白色 20% 透明"——"渐变上的半透明"——"borderRadius 32 = 圆形"。

Text('🚴').fontSize(32) 32 号骑行 emoji——"骑行头像"——"emoji = 用户头像"——"32 号居中"。

Text('骑行达人').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF') 18 号加粗白——"用户名"——"骑行达人 = 身份名"——与 App 32 "雨伞用户"对比——"骑行达人 vs 雨伞用户"——"达人 = 资深用户"——"身份感的命名"。

Text('累计减碳 12.6 kg 🌱').fontSize(12).fontColor('#FFFFFF').opacity(0.85) 12 号白 0.85 透明——"副标题"——"累计减碳 = 环保数据"——"12.6 kg = 碳减排量"——"🌱 = 环保 emoji"——与 App 32 "信用良好·已归还 12 次"对比——"减碳 vs 信用"——"环保型副标题"——"绿色出行 App 的特色"。

bottom: 44 底部 44 padding——"悬浮 StatRow 的关键"——"重叠设计"——"负 margin -24"。

与 App 32 UserCard 对比：

项目	App 32	App 33
渐变	#4A90D9 → #7BB3F0	#2D9CDB → #69B7E8
头像	☂️	🚴
用户名	雨伞用户	骑行达人
副标题	信用良好·已归还 12 次	累计减碳 12.6 kg 🌱

"两个共享 App 用户卡的对比"——"雨伞 vs 单车"——"信用 vs 减碳"——"32 关注信用体系、33 关注环保贡献"——"业务的差异化"——"副标题 = 业务价值观"。

三、StatRow：3 统计悬浮卡

StatRow 是 margin -24 上移 + 3 统计项的悬浮统计卡：

@Builder
StatRow() {
  Row() {
    ForEach(this.stats, (s: StatItem) => {
      Column({ space: 4 }) {
        Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text)
        Text(s.label).fontSize(11).fontColor(C.textDim)
      }.layoutWeight(1)
    }, (s: StatItem) => s.label)
  }
  .width('92%').padding({ top: 14, bottom: 14 })
  .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 })
}

StatRow 结构：

• 外层 Row：92% 宽 + 14 padding 上下 + 白底 + 14 圆角 + 1px 边框 + margin top -24
• 内层 ForEach：3 个 Column（数值 + 标签）

margin({ top: -24 }) 负 margin 悬浮——"上移 24px"——"与 UserCard 重叠"——"悬浮立体感"——"同 App 32"——"卡片悬浮的标准实现"。

width('92%') 92% 宽——"非满宽"——"两侧 4% 边距"——"卡片感"——"同 App 32"。

3 个统计项：

数值	标签
48	骑行次数
126km	总里程
¥88	余额

"48 骑行次数"——"历史数据"——"骑了 48 次"——"业务量"。

"126km 总里程"——"累计里程"——"126 公里"——"骑行总量"——"里程统计"。

"¥88 余额"——"账户余额"——"88 元"——"钱包余额"——"经济数据"。

"3 项 = 3 维度"：次数（业务量）+ 里程（总量）+ 余额（经济）——"3 维度的用户画像"——与首页统计（5/1/36）区别——"首页全站 vs 我的个人"——"首页是库存、我的是个人数据"。

Column({ space: 4 }).layoutWeight(1) 3 等分——"3 项等宽"——"Row 3 列等分"——"layoutWeight 等权"。

Text(s.value).fontSize(18).fontWeight(FontWeight.Bold) 18 号加粗黑数值——"数值焦点"——"48/126km/¥88"——"含单位的字符串"——"¥88、126km 单位内联"。

Text(s.label).fontSize(11).fontColor(C.textDim) 11 号灰标签——"标签次要"——"11 号小字"。

`StatItem 接口（2 字段）：

interface StatItem { value: string; label: string; }

2 字段极简模型——"value + label"——"value 含单位（¥88/126km）"——"同 App 32 StatItem"——"模型的复用"。

与 App 32 StatRow 对比：

• App 32：4 统计（12/95/¥50/0）
• App 33：3 统计（48/126km/¥88）

"4 vs 3 统计"——"32 数据维度多、33 数据维度少"——"统计项 = 业务核心数据"——"共享单车 3 核心：次数/里程/余额"。

四、MenuList：5 菜单（标题 + extra + 箭头）

MenuList 是 5 个菜单项 + extra 辅助文字 + Divider 的菜单列表：

@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)
        if (m.extra.length > 0) { Text(m.extra).fontSize(12).fontColor(C.textDim) }
        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 })
}

MenuList 结构：

• 外层 Column：92% 宽 + margin top 16 + 白底 + 14 圆角 + 1px 边框
• 内层 ForEach：5 个 Row（emoji + 标题 + extra + 箭头）+ 条件 Divider

5 个菜单项（每项 4 要素）：

emoji	标题	extra	箭头
📋	骑行记录	48 次	>
💰	我的钱包	¥88	>
🎟️	优惠券	3 张	>
🎫	骑行月卡	未开通	>
⚙️	设置	—	>

if (m.extra.length > 0) { Text(m.extra) } extra 条件渲染——"extra 非空才显示"——"设置无 extra"——"条件渲染 extra"——"extra 的可选性"。

Text(m.extra).fontSize(12).fontColor(C.textDim) extra 辅助文字——"右侧辅助信息"——"48次/¥88/3张/未开通"——"菜单摘要"——"12 号灰"——"数据预览"。

"extra 的业务价值"——"菜单 = 功能入口 + 数据预览"——"骑行记录 48次"——"我的钱包 ¥88"——"优惠券 3张"——"月卡未开通"——"用户不用点进去就知道数据"——"extra = 免点即知"——"菜单的预览价值"。

"未开通" 的状态——"骑行月卡未开通"——"灰色提示"——"营销钩子"——"引导开通"——"状态性 extra"。

Text('>') 箭头——"14 号灰"——"跳转箭头"——"通用符号"。

onClick(() => promptAction.showToast({ message: m.title })) 点击反馈——"整行可点"——"Toast 反馈"——"占位跳转"。

if (idx < this.menus.length - 1) { Divider() } 条件 Divider——"最后一项不画"——"0.5px 极细"——"5 项 4 分割"。

width('92%').margin({ top: 16 }) 92% 宽 + 16 顶部——"与 StatRow 同宽"——"卡片协调"。

`MenuItem 接口（4 字段）：

interface MenuItem { id: number; emoji: string; title: string; extra: string; }

4 字段：id/emoji/title/extra——"比 App 32 MenuItem 多 1 个 extra"——"extra = 33 菜单特色"——"辅助文字字段"。

与 App 32 MenuList 对比：

• App 32：4 菜单（无 extra）
• App 33：5 菜单（带 extra）

"4 vs 5 菜单 + extra"——"33 菜单更丰富"——"5 功能入口"——"extra 数据预览"——"33 我的页功能更全"。

"5 菜单的业务"：

• 骑行记录（历史）
• 我的钱包（经济）
• 优惠券（营销）
• 骑行月卡（订阅）
• 设置（通用）

"5 菜单 = 5 模块"——"历史 + 经济 + 营销 + 订阅 + 设置"——"共享单车的完整功能"——"业务全覆盖"。

五、About：底部版本信息

About 是 **"校园自行车租赁" + "Version 1.0.0"**的版本信息：

@Builder
About() {
  Column({ space: 4 }) {
    Text('校园自行车租赁').fontSize(12).fontColor(C.textDim)
    Text('Version 1.0.0').fontSize(11).fontColor(C.textDim).opacity(0.7)
  }.width('100%').margin({ top: 24 })
}

About 结构：Column 垂直 + 4 间距 + 12 号 App 名 + 11 号版本号（0.7 透明）——"极简底部信息"。

"校园自行车租赁" 全称——"与首页'校园骑行'简称对比"——"About 用全称"——"简称与全称"——"首页简称、About 全称"——"命名的场景"。

Text('Version 1.0.0').fontSize(11).opacity(0.7) 11 号灰 0.7 透明版本——"版本信息"——"系列 About 统一"。

margin({ top: 24 }) 24 顶部间距——"底部呼吸"——"与菜单间距"。

与 App 32 About 对比——"校园共享雨伞 vs 校园自行车租赁"——"同结构"——"系列 About 统一"。

六、我的页的交互细节与可用性分析

6.1 渐变用户卡 vs 实色卡

UserCard 渐变 + StatRow/MenuList 实色——"渐变 = 焦点"——"实色 = 普通"——"层次用色彩"——"3 级视觉层级"。

6.2 悬浮统计的实现

margin -24 上移——"重叠立体"——"与用户卡重叠"——"悬浮的层次"——"同 App 32 实现"——"系列悬浮统一"。

6.3 extra 的"免点即知"

菜单带数据预览——"不用点进去"——"48次/¥88/3张"——"效率"——"信息直达"——"extra 的价值"。

6.4 5 菜单的"功能全覆盖"

历史 + 钱包 + 优惠 + 月卡 + 设置——"5 大模块"——"共享单车完整功能"——"我的页的完整"——"业务全覆盖"。

6.5 "未开通" 的营销

骑行月卡未开通——"灰色提示"——"营销钩子"——"引导开通"——"订阅转化"——"状态性文案"。

6.6 减碳的"环保价值"

累计减碳 12.6 kg 🌱——"环保数据"——"绿色出行"——"碳减排量化"——"价值观传达"——"环保的成就感"。

6.7 3 统计的"单位内联"

¥88/126km——"单位在字符串"——"value 含单位"——"直接显示"——"模型的简单"。

6.8 我的页的"色彩心理学"

青蓝（#2D9CDB）——"蓝色 = 可信赖"——"骑行蓝"——"共享单车蓝"——"用户信息页的冷静"。

6.9 我的页的"信息层级"

L1 身份（UserCard）→ L2 数据（StatRow）→ L3 功能（MenuList）→ L4 关于（About）——"4 层信息"——"从身份到元信息"——"用户的金字塔"。

6.10 我的页的"与 App 32 对比"

32 四统计 + 四菜单 / 33 三统计 + 五菜单带 extra——"两个共享 App 我的"——"32 重数据、33 重功能"——"业务的差异化"——"我的页的两种风格"。

6.11 我的页的"设计哲学"

我的页的 3 个设计哲学：

1. 身份优先——UserCard 顶部渐变最大
2. 数据并列——3 统计等宽
3. 功能完整——5 菜单 + extra 预览

"身份 + 数据 + 功能的我的"——"工具型我的页的设计原则"——"从哲学看设计"。

6.13 我的页的"对比与统一"

统一：92% 宽 + 14 圆角 + 1px 边框（StatRow/MenuList）——"卡片统一"。 对比：UserCard 渐变 / StatRow 悬浮 / MenuList 平铺 / About 文字——"4 块差异"。

6.14 我的页的"终评"

用户卡 + 3 统计 + 5 菜单 + About = 完整我的页——"我的页的完成度"——"可上线级"——"系列共享型我的标杆"。

6.15 我的页的"extra 条件渲染"

if (m.extra.length > 0)——"extra 非空才显示"——"设置无 extra"——"条件渲染"——"extra 的可选性"——"数据驱动显示"。

6.16 我的页的"减碳与环保"

12.6 kg 减碳 + 🌱——"环保量化"——"绿色出行的价值"——"用户的环保贡献"——"价值观产品化"——"环保的成就感"。

6.17 我的页的"钱包与月卡"

¥88 余额 + 月卡未开通——"经济模块"——"钱包 + 订阅"——"消费入口"——"营销钩子"——"经济闭环"。

6.18 我的页的"系列创新"

extra 菜单是系列首次——"菜单带数据预览"——"免点即知"——"33 我的页的创新"——"系列菜单的演进"。

6.19 我的页的"用户运营"

骑行达人 + 减碳 + 月卡——"身份激励 + 环保激励 + 订阅引导"——"用户运营组合"——"我的页的运营价值"——"用户留存"。

6.20 我的页的"色彩一致性"

全页青蓝——"渐变卡 + 主题色"——"品牌贯穿"——"色彩记忆"——"青蓝的辨识"。

6.21 我的页的"对比与统一"

统一：StatRow + MenuList 92% 宽 + 14 圆角 + 1px 边框——"卡片样式统一"。 对比：UserCard 渐变 vs 悬浮统计 vs 平铺菜单 vs 文字 About——"4 块层次差异"。

6.22 我的页的"点击反馈体系"

菜单行 Toast 反馈——"每个菜单点击都有响应"——"反馈的完整"——"点击的确定性"——"操作的即时反馈"——"反馈体系的完整"。

6.23 我的页的"数据来源"

48 次 / 126km / ¥88——"数据从哪来？"——"骑行页记录汇总"——"钱包充值"——"demo 的静态数据"——"真实化路径"——"数据接口替换即活"。

6.24 我的页的"拇指操作"

菜单在屏幕中下部——"拇指可达区"——"高频菜单居中"——"设置在最下"——"低频操作放底部"——"拇指设计"。

6.25 我的页的"月卡营销"

骑行月卡未开通——"订阅引导"——"未开通 = 机会"——"灰色 = 不压迫"——"营销的克制"——"订阅转化设计"——"demo 的营销思维"。

6.26 我的页的"demo 价值"

身份 + 数据 + 功能 + 版本 = 完整我的页——"功能完整"——"用户可操作"——"demo 的完成度"——"共享单车我的页标准"——"模板沉淀"。

七、总结：青蓝 + 渐变 + 悬浮 + extra 菜单

App 33 我的页一句话：用青蓝（#2D9CDB）渐变用户卡 + 3 统计悬浮 + 5 菜单带 extra + 底部 About 的完整我的页——青蓝渐变 UserCard 配 🚴 半透明圆形头像 + "骑行达人" + "累计减碳 12.6 kg 🌱"环保副标题，悬浮 StatRow 用 -24 margin 上移展示 48 次/126km/¥88，5 菜单用 emoji + 标题 + extra 辅助文字 + ">" 箭头和 0.5px Divider 分隔，底部 About 显示全称和版本。

3 个设计亮点：

1. 环保副标题——"累计减碳 12.6 kg 🌱"绿色出行的价值观传达
2. extra 菜单预览——48次/¥88/3张/未开通 免点即知
3. 5 菜单功能全覆盖——历史/钱包/优惠/月卡/设置

主题色设计逻辑：青蓝 = 共享单车 + 环保的经典蓝——"我的页用青蓝，因为蓝色是可信赖的颜色"——与首页/地图/骑行同色——"品牌色贯穿"。

与系列呼应：渐变 UserCard（32/31/30）、悬浮统计（32/31）、92% 宽卡片（系列）、extra 辅助文字（26 我的）、0.5px Divider（27/31/32）、About 版本（系列）——"33 我的把系列的渐变 + 悬浮 + extra + Divider 手法组合出'共享单车'场景"。

体验细节：环保副标题、3 统计悬浮、5 菜单 extra 预览、About 全称——"我的页的核心 = 让用户'3 秒看完数据 + 1 秒进功能'"。

可扩展性展望：真实用户数据、碳积分体系、钱包充值、优惠券领取、月卡购买、设置详情、帮助中心——"demo 的单车我的页骨架完整"。

七、扩展思考：我的页的信息架构与设计哲学

7.1 我的页的"用户视角"

4 块 = 4 个"我"：

1. 我是谁（UserCard）——身份 + 环保贡献
2. 我的数据（StatRow）——次数/里程/余额
3. 我能做什么（MenuList）——5 功能入口
4. 关于 App（About）——元信息

"4 个我的层次"——"从身份到元信息"——"用户视角的金字塔"——"自上而下的认知"。

7.2 我的页的"转化路径"

看用户卡（骑行达人）→ 看统计（48 次）→ 点菜单（骑行记录/钱包/月卡）——"从身份到行动"——"我的页的转化链"——"菜单 = 行动入口"——"extra = 行动预告"。

7.3 我的页的"业务建模"

MenuItem 4 字段（id/emoji/title/extra）——"4 字段建模"——"比 32 多 extra"——"extra = 菜单摘要"——"最小可用集"——加 badge（角标）、加 link（跳转）即可扩展——"数据模型的扩展点"。

7.4 我的页的"设计哲学"

我的页的 3 个设计哲学：

1. 身份优先——渐变 UserCard 视觉焦点
2. 数据透明——3 统计等宽 + 单位内联
3. 功能直达——5 菜单 + extra 预览

"身份 + 数据 + 功能直达的我的页"——"工具型我的页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何共享类 App"。

7.5 我的页的"终评"

App 33 我的页综合评估——"四区结构 + 青蓝主题 + extra 菜单"——"我的页的完成度评级"——"一个可上线级的共享单车我的页"——"系列共享型我的标杆"——"demo 的高完成度"。

八、彩蛋：我的页的细节设计

8.1 减碳"12.6 kg"的量化

"累计减碳 12.6 kg"——"碳减排量化"——"12.6 kg = 骑行里程换算"——"环保的数值化"——"🌱 的视觉"——"环保的成就感"——"价值观的产品化"。

8.2 "骑行达人" 的命名

"骑行达人"——"达人 = 资深"——"身份等级"——"激励用语"——"用户荣耀"——"达人的荣誉感"——"身份命名"。

8.3 "未开通" 的灰度

"未开通" 灰色——"状态弱化"——"未购买不强调"——"营销的克制"——"灰色 = 非激活"——"状态的颜色"。

8.4 菜单 extra 的"对齐"

extra 在标题和箭头之间——"三段式"——"emoji + 标题 + extra + 箭头"——"四段式布局"——"信息的顺序"——"右对齐"。

8.5 3 统计的"数字与单位"

48/126km/¥88——"混合显示"——"纯数字 + 带单位"——"value 字符串"——"单位内联的简单"。

8.6 悬浮的"-24 margin"

margin top -24——"上移 24"——"重叠 24"——"悬浮高度"——"24 = 半圆角"——"重叠的视觉"——"立体层次"。

8.7 我的页的"跨页数据"

48 次 = 骑行页 3 条记录——"跨页数据"——"我的统计 + 骑行记录"——"数据一致性"——"demo 全局数据"。

8.8 我的页的"5 菜单多样性"

4 种 extra（次/¥/张/未开通）+ 1 无 extra（设置）——"extra 的多样"——"不同类型数据"——"条件渲染"——"extra 的可选性"。

8.9 我的页的"颜色体系"

渐变青 + 半透明白 + 灰字 + 黑字——"4 级颜色"——"渐变（焦点）→ 白（头像）→ 黑（标题）→ 灰（次要）"——"颜色的层级"——"可读性分级"。

8.10 我的页的"demo 完整性"

用户卡 + 统计 + 5 菜单 + About = 完整我的页——"功能完整"——"用户可操作"——"demo 的完成度"——"从身份到功能的完整链"。

可扩展性展望：

• 首页：GPS 定位、电量实时刷新、车辆推荐
• 地图：Map Kit、真实坐标、停车点管理
• 骑行：真实计时、GPS 轨迹、费用结算
• 我的：碳积分、钱包、优惠券、月卡

"demo 的 4 页骨架完整"——"共享单车 App 的标准范式"。

补充说明：本篇所有代码引用均基于 33-campus-bike/entry/src/main/ets/pages/ProfileTab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖我的首屏、我的钱包菜单点击、优惠券菜单点击、骑行月卡菜单点击四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。