鸿蒙原生应用 ArkUI 实战：共享雨伞我的页 —— 押金信用统计与渐变卡组合技

App 32「校园共享雨伞」我的（ProfileTab），主题色 #4A90D9 晴空蓝。我的页采用"用户卡 + 统计 + 菜单 + About"四区布局——蓝色渐变 UserCard（顶部 safeTop 30 padding、☂️ 64 圆形头像 + "雨伞用户"标题 + "信用良好·已归还 12 次"副标题） + 悬浮 StatRow（margin -24 上移覆盖用户卡、12 借用记录 / 95 信用积分 / ¥50 押金 / 0 逾期 4 统计项） + MenuList 4 菜单项（📋 借用记录 / 💰 押金记录 / ⭐ 信用积分 / ⚙️ 设置，每项带" > "箭头和 Divider 分割线） + 底部 About（"校园共享雨伞" + "Version 1.0.0" 版本信息）。本篇基于 32-campus-umbrella/entry/src/main/ets/pages/ProfileTab.ets（约 99 行）逐段拆解，附 4 张实机截图。

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

App 32 我的页是"用户信息 + 数据统计 + 菜单导航 + 底部版本"的标准我的页——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 — 悬浮 4 统计卡
3. MenuList — 4 菜单列表
4. About — 底部版本信息

Scroll() { Column() { ... } } 整体可滚——"我的页可滚"——同 App 31 我的页——"系列我的页的可滚"——"长内容的滚动"。

padding({ bottom: D.pad + this.safeBottom + 20 }) 仅底部 padding——"顶部不 padding"——因为 UserCard 已经撑满顶部——"padding 的非对称"。

与 App 31 我的页对比：

• App 31: 用户卡（红渐变） + 统计（珊瑚红） + 2 福利卡（双卡片） + 4 菜单 + 客服 + About
• App 32: 用户卡（蓝渐变） + 4 统计（悬浮） + 4 菜单 + About

"32 我的页比 31 简洁"——"31 多 2 福利卡 + 客服"——"32 极简我的"——"工具型 App 的我的页"——"信息密度的差异"。

与系列其他我的页对比：

• App 26: 用户卡 + 积分 + 4 菜单
• App 28: 用户卡 + 天气 + 4 菜单
• App 29: 用户卡 + 等级 + 2 菜单
• App 32: 用户卡 + 4 统计 + 4 菜单

"32 我的页的 4 统计"——"借用记录/信用/押金/逾期"——"4 项 = 共享雨伞的 4 数据"——"统计的丰富"——"业务的核心数据"。

主题色 #4A90D9 晴空蓝——同首页/地图/借还——"品牌色贯穿全 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 次').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° 渐变背景（#4A90D9 → #7BB3F0）+ 顶部 safeTop + 30 padding + 底部 44 padding
• 内层 Row：64×64 半透明圆形头像（☂️ 32 号）+ 文字区（"雨伞用户" 18 号加粗 + "信用良好 · 已归还 12 次" 12 号 0.85 透明）

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——"蓝色 135° 渐变"——同首页 WeatherCard——"系列渐变的统一"——#4A90D9 蓝 → #7BB3F0 浅蓝——"主题色到浅色版的渐变"。

padding({ top: this.safeTop + 30, left: D.pad, right: D.pad, bottom: 44 })——"非对称 padding"——顶部 safeTop + 30（让标题下移）、底部 44（给 StatRow 让出位置形成"悬浮"效果）——"44 底部 = StatRow 的占位"——"底部 padding 的设计意图"。

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

Text('☂️').fontSize(32) 32 号雨伞 emoji——"emoji 头像"——"32 号 = 中等大小"——"emoji 的居中"（justifyContent Center）——"头像 = emoji 居中"。

Column({ space: 5 }).layoutWeight(1) 文字区——"5 间距标题 + 副标题"——layoutWeight(1) 占满中间空间——"文字占据中间"——"三段式布局"（左头像 + 中文字 + 右无）——"用户卡的两段式"。

Text('雨伞用户').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF') 18 号加粗白——"用户标题"——"雨伞用户 = 业务名"——"业务名作为用户名"——"共享雨伞 App 的用户"——18 号比 App 31 的 22 号小——"32 用户名较小"。

Text('信用良好 · 已归还 12 次').fontSize(12).fontColor('#FFFFFF').opacity(0.85) 12 号白 0.85 透明——"副标题"——"信用 + 已归还次数"——"信用 = 业务指标"——"12 次 = 累计"——"业务数据的展示"——· 中点分隔。

#33FFFFFF 半透明白——"半透明的视觉"——"为什么是半透明？"——头像在渐变背景上要可见——"半透明 = 与背景融合"——"渐变上的白 = 浅蓝"——"半透明的物理"。

safeTop + 30 顶部安全区 + 30 padding——"让标题下移避开状态栏"——"30 = 系列标准"——"顶部内边距"。

bottom: 44 底部 44 padding——"为什么是 44？"——"44 = StatRow 高度的一半"——"让 StatRow 部分"插入"用户卡底部"——"悬浮效果的关键"——"44 = 重叠设计"。

与 App 31 用户卡对比：

• App 31: ☕ emoji 64 圆 + "饮品爱好者" + "本月消费 ¥286" + 🏆
• App 32: ☂️ emoji 64 圆 + "雨伞用户" + "信用良好·已归还 12 次"

"用户名对比"——31 "饮品爱好者"（身份）、32 "雨伞用户"（业务）——"身份 vs 业务"——"31 更亲切、32 更工具"。

"副标题对比"——31 "本月消费 ¥286"（消费）、32 "信用良好·已归还 12 次"（信用）——"消费 vs 信用"——"两种业务指标"——"指标的选择"。

"右侧元素"——31 有 🏆（勋章）、32 无右侧元素——"31 更丰富、32 更简洁"——"极简的工具型"。

三、StatRow：4 统计悬浮卡（本页设计亮点）

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

@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：4 个 Column（数值 + 标签）

margin({ top: -24 }) 负 margin——"上移 24px"——"为什么用负 margin？"——让 StatRow 上移与 UserCard 重叠——"悬浮的视觉效果"——"负 margin = 重叠"——"卡片悬浮的实现"。

width('92%') 92% 宽——"不 100% 满宽"——"92% = 8% 边距"——"卡片的居中"——"左右各 4% 边距"——"非满宽的设计"。

padding({ top: 14, bottom: 14 }) 14 padding 上下——"卡片的舒适内边距"——"统计卡的紧凑"——"14 = 标准内边距"。

backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) 白底 + 14 圆角 + 边框——"卡片的视觉"——"白底浮在渐变上"——"对比 = 悬浮"。

Column({ space: 4 }).layoutWeight(1) 4 列等分——"4 统计项等宽"——"layoutWeight(1) = 等分"——"4 等分 = 公平展示"。

Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text) 18 号加粗黑数值——"数值 18 号加粗"——"统计的视觉焦点"——"数值 = 视觉中心"。

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

4 个统计项：

数值	标签
12	借用记录
95	信用积分
¥50	押金
0	逾期

"借用记录 12"——"历史数据"——"借了 12 次"——"业务量的统计"。

"信用积分 95"——"信用 0-100"——"95 = 接近满分"——"信用良好的量化"——"信用体系的展示"。

"¥50 押金"——"押金金额"——"共享雨伞的押金"——"经济门槛"——"押金的金额"。

"0 逾期"——"逾期次数"——"0 = 守约"——"信用的体现"——"逾期为 0 = 信用良好"。

"4 项的语义"——"4 项 = 4 个维度"：

• 借用记录：业务量
• 信用积分：信用
• 押金：经济
• 逾期：守约

"4 维度的用户画像"——"用户的 4 个面"——"从业务量到信用"——"4 维度 = 用户完整"。

`StatItem 接口（2 字段）：

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

value: string 字符串数值——"为什么是 string 不是 number？"——"¥50" 包含 ¥ 符号——"含单位的字符串"——"¥50 vs 50"——"单位的内联"。

label: string 标签——"标签 = 维度名"——"业务维度"。

2 字段的极简——"StatItem = 极简模型"——"2 字段足够"——"value + label"——"模型的最小化"。

与 App 31 统计行对比：

• App 31: 3 项悬浮（¥0/月节省 + 12/总订单 + 88%/准时）
• App 32: 4 项悬浮（12/95/¥50/0）

"4 vs 3"——"32 多 1 项"——"4 项 = 业务多维度"——"3 项 = 简化"——"统计项数 = 业务"。

"负 margin 悬浮的视觉"——"StatRow 上移 24px"——"部分压在 UserCard 上"——"卡片悬浮效果"——"立体感"——"层次感"——"UI 的立体"。

"为什么 92% 宽？"——"不 100% 满宽"——"卡片的左右边距"——"两侧各 4% 边距"——"卡片的非满宽"——"留白的视觉"。

"为什么 14 padding 上下？"——"14 = 圆角匹配"——"padding = 圆角的视觉"——"内边距的舒适"。

四、MenuList：4 菜单列表（带 Divider）

MenuList 是 4 个菜单项 + 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)
        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：4 个 Row（emoji + 标题 + > 箭头）+ 条件 Divider

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

backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) 白底 + 14 圆角 + 边框——"卡片样式"——"同 StatRow"——"系列卡片的统一"。

Row({ space: 12 }) 菜单项内三段——"12 间距三段"——"emoji + 标题 + > 箭头"——"三段式"。

Text(m.emoji).fontSize(18) 18 号 emoji 头像——"emoji 菜单图标"——"18 号小图标"——"菜单图标的尺寸"。

Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) 14 号黑标题——"标题占据中间"——"layoutWeight(1) = 弹性"——"标题占满中间"。

Text('>').fontSize(14).fontColor(C.textDim) 14 号灰箭头——">" 跳转箭头——"灰箭头 = 弱化"——"箭头 = 跳转"——"菜单的方向"。

padding({ left: 14, right: 14, top: 14, bottom: 14 }) 14 padding 四边——"菜单项的 14 padding"——"舒适的点击区"——"14 = 标准"。

onClick(() => promptAction.showToast({ message: m.title })) 点击反馈——点击弹菜单名 Toast——"菜单点击的反馈"——"占位跳转"——"Toast 的菜单名"。

if (idx < this.menus.length - 1) { Divider() } 条件 Divider——"最后一项不画 Divider"——"分隔线只在项间"——"避免底部 Divider"——"Divider 的条件"。

Divider().color(C.stroke).strokeWidth(0.5) 0.5px 极细分割线——#EAEEF6 极浅灰——"0.5 = 极细"——"分割线的弱化"——"极细 = 几乎不可见"——"分割线的存在"——"存在但不抢眼"。

4 个菜单：

emoji	标题	点击 Toast
📋	借用记录	借用记录
💰	押金记录	押金记录
⭐	信用积分	信用积分
⚙️	设置	设置

"借用记录" 的菜单项——"复用 StatRow 的 '借用记录'"——"菜单 = 详细数据"——"统计 vs 详细"——"12 借用记录（统计）→ 借用记录（菜单）"——"两层数据"。

"押金记录" 的菜单项——"押金 = 经济"——"押金的记录查询"——"经济模块"。

"信用积分" 的菜单项——"信用 = 信用体系"——"95 分的查询"——"信用模块"。

"设置" 的菜单项——"通用设置"——"App 设置"——"标准菜单"。

`MenuItem 接口（3 字段）：

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

3 字段：id/emoji/title——"极简菜单模型"——"3 字段足够"——"id/emoji/title"——"菜单的最小集"。

与 App 31 我的菜单对比：

• App 31: 4 菜单（订单/收藏/地址/设置） + 2 福利卡（优惠券/积分商城） + 客服
• App 32: 4 菜单（借用/押金/信用/设置） + 0 福利卡 + 0 客服

"32 比 31 简洁"——"32 极简"——"没有福利卡"——"没有客服"——"工具型极简我的"。

"为什么 32 没有福利卡？"——"工具型 App 不需要福利"——福利是消费 App 用的——"工具 vs 消费"——"32 工具无福利"。

Divider 的视觉——"分割线的存在"——"分隔菜单项"——"4 项 = 3 分割线"——"Divider 的条件"——"Divider 的克制"。

strokeWidth(0.5) 极细分割线——"0.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 透明）——"极简底部信息"。

Column({ space: 4 }) 4 间距——"两行垂直"——"App 名 + 版本"——"极简布局"。

Text('校园共享雨伞').fontSize(12).fontColor(C.textDim) 12 号灰 App 名——"完整 App 名"——"与 bundleName 一致"——"系列 App 命名"。

Text('Version 1.0.0').fontSize(11).fontColor(C.textDim).opacity(0.7) 11 号灰 0.7 透明版本——"版本信息"——"11 号 < 12 号 App 名"——"App 名更显眼"——"0.7 透明 = 更弱"。

margin({ top: 24 }) 24 顶部 margin——"与菜单的间距"——"24 = 较多间距"——"底部的呼吸"——"底部的留白"。

与系列其他 About 对比：

• App 26: "AI PPT 助手" / "Version 1.0.0"
• App 27: "通知提醒" / "Version 1.0.0"
• App 32: "校园共享雨伞" / "Version 1.0.0"

"系列 About 的统一"——"12 号 + 11 号"——"App 名 + 版本"——"系列规范的复用"——"系列底部一致"。

"为什么 About 在最底？"——"版本信息 = 次要"——"底部 = 视觉末端"——"次要信息的底部"——"用户偶尔看"。

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

6.1 用户卡的渐变设计

linearGradient({ angle: 135 }) 135° 渐变——"135° = 左上到右下"——"渐变的方向"——"斜向渐变"——"渐变的视觉"——"系列的渐变统一"。

6.2 半透明头像的视觉

#33FFFFFF 白色 20% 透明——"半透明白"——"渐变背景上的半透明"——"半透明的物理"——"透明 = 与背景融合"——"圆形头像的视觉"。

6.3 4 统计的业务维度

借用/信用/押金/逾期——"4 维度"——"4 维 = 业务核心"——"业务的关键指标"——"共享雨伞的 4 数据"。

6.4 悬浮效果的实现

margin({ top: -24 }) 负 margin——"上移 24px"——"压住 UserCard 底部"——"立体感"——"层次感"——"UI 的立体"。

6.5 4 菜单的业务

借用/押金/信用/设置——"4 项 = 业务模块"——"业务 + 设置"——"3 业务 + 1 设置"——"业务优先"。

6.6 92% 宽的非满宽设计

width('92%') 92% 宽——"非 100% 满宽"——"两侧各 4% 边距"——"卡片的非满宽"——"留白的视觉"。

6.7 Divider 的存在

Divider().color(C.stroke).strokeWidth(0.5) 极细分割线——"0.5 = 极细"——"分割但弱化"——"分隔的克制"——"4 项 3 分割"。

6.8 整卡可点的菜单

Row onClick——"整菜单项可点"——"统一可点区"——"用户点哪都响应"——"易用性 > 精确"。

6.9 用户卡的"顶部安全区"

padding({ top: this.safeTop + 30 }) safeTop + 30——"顶部安全区"——"让标题下移"——"30 = 系列标准"——"安全区的标准"。

6.11 "雨伞用户" 的命名

"雨伞用户"——"业务名 = 用户名"——"工具型命名"——"用户 = 业务用户"——"共享雨伞的命名"——"不像 31 '饮品爱好者'"。

6.12 副标题"信用良好·已归还 12 次"

"信用良好" + "已归还 12 次"——"信用 + 累计"——"两个数据合并"——"信用定性 + 12 定量"——"业务信息"——"共享雨伞的信用体系"。

6.13 4 统计的"等宽设计"

layoutWeight(1) 4 个等宽——"4 项等宽"——"Row 4 列等分"——"视觉的公平"——"等宽的等权"。

6.14 95 分的"信用良好"

"信用良好" 描述 95 分——"定性 + 定量"——"95 = 接近 100"——"信用的量化"——"信用 = 数值"。

6.15 ¥50 押金的"经济门槛"

¥50 押金——"50 元押金"——"共享雨伞押金"——"经济成本"——"押金的金额"——"50 = 较低押金"。

6.16 0 逾期的"守约证明"

"0 逾期"——"0 = 没逾期过"——"守约"——"信用良好的证明"——"0 的视觉"——"无逾期的安心"。

6.17 借用记录菜单的"复用"

"借用记录" 在 StatRow + MenuList 都出现——"两层数据"——"统计概览 + 详细查询"——"信息的层次"。

6.18 4 菜单的"业务 + 设置"

3 业务（借用/押金/信用）+ 1 设置——"业务优先"——"业务 75% + 设置 25%"——"业务导向"。

6.19 整卡可点的易用性

菜单 Row onClick——"整菜单可点"——"用户随便点"——"易用性高"——"操作成本低"——"demo 简化"。

6.20 Divider 的"最后一项不画"

if (idx < this.menus.length - 1)——"最后一项不画"——"避免底部 Divider"——"卡片的整洁"——"Divider 的条件"。

6.21 18 号加粗的"数值"

fontSize(18).fontWeight(FontWeight.Bold)——"18 号加粗"——"数值的视觉焦点"——"数值 = 视觉中心"——"加粗 = 强调"。

6.22 11 号灰色的"标签"

fontSize(11).fontColor(C.textDim)——"11 号灰"——"标签的次要"——"11 = 小"——"灰 = 弱"。

6.23 emoji 的"低成本"

4 emoji（📋💰⭐⚙️）——"emoji 图标"——"低成本实现"——"demo 用 emoji"——"上线换 SVG"。

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

晴空蓝——"蓝色 = 工具"——"我的页的冷静"——"蓝色 = 可信赖"——"工具型配色的心理"。

6.25 "我的"页的"信息架构"

4 层信息：

1. L1 身份（UserCard）——"我是谁"
2. L2 数据（StatRow）——"我的数据"
3. L3 功能（MenuList）——"我能做什么"
4. L4 关于（About）——"App 信息"

"4 层 = 4 个我"——"身份/数据/功能/关于"——"用户的多面"——"完整的用户页"。

6.26 渐变 vs 实色的对比

UserCard 渐变 vs StatRow/MenuList 实色——"渐变突出、实色普通"——"渐变 = 视觉焦点"——"实色 = 普通内容"——"层次用色彩"。

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

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

6.29 我的页的"系列呼应"

渐变 UserCard（30/31）、悬浮统计（31）、Divider 菜单（27/31）、About 版本（系列）——"32 我的把系列手法组合"——"复用 = 一致"。

6.30 我的页的"终评"

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

七、总结：晴空蓝 + 渐变 + 悬浮 + 极简

App 32 我的页一句话：用晴空蓝（#4A90D9）渐变用户卡 + 4 统计悬浮 + 4 菜单 + 底部 About 版本的极简工具型我的页——蓝色渐变 UserCard 配 ☂️ 半透明圆形头像 + 雨伞用户 + 信用良好副标题，悬浮 StatRow 用 -24 margin 上移压住用户卡底部，4 菜单用 emoji + 标题 + > 箭头和 0.5px 极细 Divider 分隔，底部 About 显示完整 App 名和版本号。

3 个设计亮点：

1. 渐变 UserCard——#4A90D9 → #7BB3F0 蓝色 135° 渐变 + 半透明白圆头像
2. 悬浮 StatRow——margin -24 上移 + 92% 宽 + 4 项等宽统计
3. 极简 4 菜单——业务 + 设置 + 0.5px Divider 极细分割

主题色设计逻辑：晴空蓝 = 工具型我的页的冷静色——"我的页 = 个人信息，需要冷静的可信赖感"——与首页/地图/借还同色——"品牌色贯穿"。

与系列呼应：渐变 UserCard（30 公益/31 珊瑚红）、悬浮统计（31）、92% 宽卡片（30/31）、emoji 菜单（系列）、Divider 极细（27/31）、About 版本（系列）——"32 我的把系列手法组合出'共享工具'场景"。

体验细节：渐变品牌、悬浮层次、4 统计、极简菜单、About 版本——"我的页的核心 = 让用户'3 秒看完数据 + 1 秒进功能'"。

可扩展性展望：真实用户数据、统计接口、信用体系、押金支付、设置详情、帮助中心、消息中心——"demo 的我的页骨架完整"。

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

7.1 我的页的"用户视角"

4 块 = 4 个"我"：

1. 我是谁（UserCard）——身份信息
2. 我的数据（StatRow）——业务数据
3. 我能做什么（MenuList）——功能入口
4. 关于 App（About）——元信息

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

7.2 渐变 vs 实色的"层次设计"

UserCard 渐变（视觉焦点） + StatRow/MenuList 实色（普通内容） + About 灰色（最弱）——"3 级视觉层级"——"色彩 = 重要性"——"渐变 = 焦点、实色 = 普通、灰 = 末端"——"3 级灰度的层次"。

7.3 悬浮 vs 平铺的"层次设计"

UserCard 平铺（顶部） + StatRow 悬浮（-24 重叠） + MenuList 平铺（中间） + About 平铺（底部）——"4 块的层次"——"悬浮 = 立体"——"平铺 = 普通"——"层次 = 立体感"。

7.4 我的页的"设计哲学"

我的页的 3 个设计哲学：

1. 身份优先——UserCard 顶部最大视觉
2. 数据并列——4 统计等宽
3. 功能极简——4 菜单 + 业务 + 设置

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

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

全页晴空蓝——"UserCard 渐变蓝"——"头像 蓝色透明圆"——"主题色贯穿"——"品牌的稳定性"——"色彩记忆"。

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

统一：92% 宽 + 14 圆角 + 1px 边框（StatRow/MenuList）——"卡片样式统一"。 对比：渐变 vs 实色、平铺 vs 悬浮、4 vs 2 vs 4 vs 2（块的元素数）——"块的差异"。

7.8 我的页的"信息密度"

4 块密度：

• UserCard：2 行信息（标题 + 副标题）
• StatRow：4 项（数值 + 标签）
• MenuList：4 项（emoji + 标题 + 箭头）
• About：2 行（App 名 + 版本）

"4 块的层次密度"——"信息密度从大到小"——"UserCard 密、StatRow 中、MenuList 中、About 稀"——"密度的层次"。

7.9 我的页的"终评"

App 32 我的综合评估——"四区结构 + 晴空蓝主题 + 渐变 + 悬浮 + 极简菜单"——"我的页的完成度评级"——"一个可上线级的工具型我的页"——"系列工具型我的标杆"——"demo 的高完成度"。

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

8.1 半透明头像的"颜色选择"

#33FFFFFF 白色 20% 透明——"半透明的视觉"——"渐变上的白 = 浅蓝"——"半透明的物理"——"为什么是 20%？"——"20% = 既可见又不抢眼"。

8.2 信用良好 vs 95 分

"信用良好" 描述 + "95" 量化——"定性 + 定量"——"双表达"——"95 = 接近 100 = 良好"——"信用体系"。

8.3 4 统计的"数据建模"

StatItem 2 字段——"value + label"——"极简模型"——"2 字段足够"——"value 含单位（¥50）"——"单位的内联"。

8.4 菜单 emoji 的"选择"

📋💰⭐⚙️——"业务 + 工具"——"📋 借用 = 列表、💰 押金 = 钱、⭐ 信用 = 评价、⚙️ 设置 = 工具"——"4 emoji 的语义"。

8.5 " > " 箭头的"通用符号"

">" 箭头——"箭头 = 跳转"——"菜单的方向"——"通用符号"——"无需文字"——"图标的国际性"。

8.6 渐变 135° 的"方向感"

135° 角（左上到右下）——"渐变方向"——"135° = 阳光照射"——"渐变的方向语言"——"斜向的视觉"。

8.7 -24 margin 的"重叠设计"

margin({ top: -24 }) 负 margin——"重叠"——"StatRow 压住 UserCard"——"立体的视觉"——"24 = 半圆角"——"重叠的尺寸"。

8.8 92% 宽的"非满宽"

width('92%') 92% 宽——"两侧各 4%"——"卡片的留白"——"非满宽 = 卡片感"——"满宽 = 屏幕感"。

8.9 0.5px Divider 的"极细"

strokeWidth(0.5) 0.5 极细——"几乎不可见"——"分隔但不抢眼"——"0.5 = 极细"——"分隔的克制"。

8.10 About 的"双行"

"App 名" + "Version"——"双行底部信息"——"系列 About 统一"——"12 + 11 字号"——"底部的极简"。