feat: ui update

2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
@@ -1,5 +1,6 @@
 {
  "usingComponents": {
-    "navigation-bar": "/components/navigation-bar/navigation-bar"
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "v2-overlay": "/components/v2-overlay/index"
  }
 }
@@ -4,6 +4,7 @@ import { UserInfo, QuotaItem } from '../../types/models'
 import { QuotaType, STORAGE_KEYS } from '../../utils/config'
 import { formatDate } from '../../utils/format'
 import { setTabBarSelected, setTabBarUnread } from '../../utils/tabbar'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'

 // 日志模块名
@@ -44,8 +45,21 @@ Page({
    },
    birthDateStr: '',
    today: '',
+    // 四栏额度条：上传 / AI 推荐 / 社区分享 / 衣柜分享
+    quotaStats: [] as Array<{ key: number; label: string; remain: number; total: number }>,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+    // 性别选择：v2 玻璃动作表
+    sexVisible: false,
+    sexItems: [
+      { text: '男', value: 1 },
+      { text: '女', value: 2 },
+    ],
  },

+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
  onLoad() {
    this.setToday()
  },
@@ -162,11 +176,17 @@ Page({
  },

  onSexSelect() {
-    wx.showActionSheet({
-      itemList: ['男', '女'],
-      success: (res) => this.setData({ 'editForm.sex': res.tapIndex + 1 }),
-      fail: (e) => logger.debug(LOG, '取消性别选择, err=', e && e.errMsg),
-    })
+    this.setData({ sexVisible: true })
+  },
+
+  onSexPick(e: WechatMiniprogram.CustomEvent) {
+    const sex = Number(e.detail.value) || 0
+    logger.debug(LOG, '选择性别, sex=', sex)
+    this.setData({ 'editForm.sex': sex, sexVisible: false })
+  },
+
+  onSexCancel() {
+    this.setData({ sexVisible: false })
  },

  onBirthChange(e: WechatMiniprogram.CustomEvent) {
@@ -1,126 +1,175 @@
 <view class="page page-flex">
-  <navigation-bar title="我的" back="{{false}}" />
+  <navigation-bar title="我的" back="{{false}}" scrolled="{{navScrolled}}" />

-  <scroll-view scroll-y class="scroll-body">
-    <!-- 额度提示条 -->
-    <view wx:if="{{uploadRemain > 0 && uploadRemain <= 2}}" class="quota-banner" bindtap="onTapMall">
-      你的上传额度仅剩 {{uploadRemain}} 次，点击购买额度包 >
+  <scroll-view scroll-y class="scroll-body pb-tab" bindscroll="onNavScroll">
+    <!-- 页头 -->
+    <view class="head">
+      <view class="eyebrow">Profile</view>
    </view>

-    <!-- 个人信息 -->
-    <view class="card user-card">
-      <view class="avatar">
-        <image wx:if="{{userInfo.avatar}}" class="avatar-img" src="{{userInfo.avatar}}" mode="aspectFill" />
-        <view wx:else class="icon icon-user avatar-placeholder"></view>
+    <!-- 资料区：大号头像 + 衬线昵称 + 胶囊标签 -->
+    <view class="pf-hero">
+      <view class="pf-av">
+        <image wx:if="{{userInfo.avatar}}" class="pf-av-img" src="{{userInfo.avatar}}" mode="aspectFill" />
+        <view wx:else class="icon icon-user"></view>
      </view>
-      <view class="user-info">
-        <view class="user-name">
-          <text>{{userInfo.username || '微信用户'}}</text>
-          <text wx:if="{{userInfo.sex === 1}}" class="sex-tag">男</text>
-          <text wx:elif="{{userInfo.sex === 2}}" class="sex-tag">女</text>
-        </view>
-        <view class="user-tags">
-          <text wx:if="{{userInfo.vip_type !== 1}}" class="tag tag-blue">月度会员</text>
-          <text wx:if="{{zodiac}}" class="tag tag-gray">{{zodiac}}</text>
-          <text wx:else class="tag tag-gray" bindtap="onEdit">设置生日</text>
+      <view class="pf-info">
+        <view class="pf-name">{{userInfo.username || '微信用户'}}</view>
+        <view class="pf-sub">
+          <text wx:if="{{userInfo.sex === 1}}" class="pill">男</text>
+          <text wx:elif="{{userInfo.sex === 2}}" class="pill">女</text>
+          <text wx:if="{{userInfo.vip_type !== 1}}" class="pill pill--ink">月度会员</text>
+          <text wx:if="{{zodiac}}" class="pill pill--line">{{zodiac}}</text>
+          <text wx:else class="pill pill--line" bindtap="onEdit">设置生日</text>
        </view>
      </view>
-      <view class="edit-link" bindtap="onEdit">编辑资料<view class="icon icon-chevron-right"></view></view>
-    </view>
-
-    <!-- 功能列表 1 -->
-    <view class="card menu-card">
-      <view class="menu-row hairline" bindtap="onTapMall">
-        <view class="icon icon-gauge menu-icon"></view>
-        <text class="menu-label">我的额度</text>
-        <text class="menu-value">上传额度剩 {{uploadRemain}}</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
-      </view>
-      <view class="menu-row hairline" bindtap="onTapOrder">
-        <view class="icon icon-doc menu-icon"></view>
-        <text class="menu-label">我的订单</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
-      </view>
-      <view class="menu-row hairline" bindtap="onTapNotification">
-        <view class="icon icon-bell menu-icon"></view>
-        <text class="menu-label">通知</text>
-        <view wx:if="{{unread > 0}}" class="menu-badge">{{unread > 99 ? '99+' : unread}}</view>
-        <view class="icon icon-chevron-right menu-arrow"></view>
-      </view>
-      <view class="menu-row hairline" bindtap="onTapCollect">
-        <view class="icon icon-star menu-icon"></view>
-        <text class="menu-label">我的收藏</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
-      </view>
-      <view class="menu-row" bindtap="onTapFlow">
-        <view class="icon icon-doc menu-icon"></view>
-        <text class="menu-label">额度明细</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
+      <view class="pf-edit" bindtap="onEdit">
+        编辑资料
+        <view class="icon icon-chevron-right"></view>
      </view>
    </view>

-    <!-- 功能列表 2 -->
-    <view class="card menu-card">
-      <view class="menu-row hairline" bindtap="onEdit">
-        <view class="icon icon-pencil menu-icon"></view>
-        <text class="menu-label">编辑资料</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
+    <!-- 额度提醒 -->
+    <view wx:if="{{uploadRemain > 0 && uploadRemain <= 2}}" class="pf-warn" bindtap="onTapMall">
+      <view class="icon icon-info"></view>
+      <text class="pf-warn-t">你的上传额度仅剩 {{uploadRemain}} 次，点击购买额度包</text>
+      <view class="icon icon-chevron-right"></view>
+    </view>
+
+    <!-- 我的额度：四栏发丝线数字条 -->
+    <view class="pf-quota" bindtap="onTapMall">
+      <view class="pf-quota-hd">
+        <text class="eyebrow">Quota</text>
+        <text class="qk">我的额度</text>
+        <view class="icon icon-chevron-right"></view>
      </view>
-      <view class="menu-row hairline" bindtap="onEdit">
-        <view class="icon icon-calendar menu-icon"></view>
-        <text class="menu-label">设置生日</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
-      </view>
-      <view class="menu-row hairline" bindtap="onTapService">
-        <view class="icon icon-headphones menu-icon"></view>
-        <text class="menu-label">客服与反馈</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
-      </view>
-      <view class="menu-row" bindtap="onTapAbout">
-        <view class="icon icon-info menu-icon"></view>
-        <text class="menu-label">关于纸条AI衣橱</text>
-        <view class="icon icon-chevron-right menu-arrow"></view>
+      <view class="stats">
+        <view class="stat" wx:for="{{quotaStats}}" wx:key="key">
+          <view class="stat-n num">{{item.remain}}<text class="unit">/{{item.total}}</text></view>
+          <view class="stat-l">{{item.label}}</view>
+        </view>
      </view>
    </view>

-    <view class="version">v1.0.0</view>
+    <!-- 账户 -->
+    <view class="grp-hd pf-grp"><text class="gh-cn">账户</text><text class="gh-en">Account</text></view>
+    <view class="rows">
+      <view class="row" bindtap="onTapOrder">
+        <view class="icon row-ic icon-doc"></view>
+        <text class="row-lb">我的订单</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+      <view class="row" bindtap="onTapNotification">
+        <view class="icon row-ic icon-bell"></view>
+        <text class="row-lb">通知</text>
+        <text wx:if="{{unread > 0}}" class="row-badge">{{unread > 99 ? '99+' : unread}}</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+      <view class="row" bindtap="onTapCollect">
+        <view class="icon row-ic icon-star"></view>
+        <text class="row-lb">我的收藏</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+      <view class="row" bindtap="onTapFlow">
+        <view class="icon row-ic icon-gauge"></view>
+        <text class="row-lb">额度明细</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+    </view>
+
+    <!-- 设置 -->
+    <view class="grp-hd pf-grp"><text class="gh-cn">设置</text><text class="gh-en">Settings</text></view>
+    <view class="rows">
+      <view class="row" bindtap="onEdit">
+        <view class="icon row-ic icon-pencil"></view>
+        <text class="row-lb">编辑资料</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+      <view class="row" bindtap="onEdit">
+        <view class="icon row-ic icon-calendar"></view>
+        <text class="row-lb">设置生日</text>
+        <text class="row-vl">{{birthDateStr || '未设置'}}</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+      <view class="row" bindtap="onTapService">
+        <view class="icon row-ic icon-headphones"></view>
+        <text class="row-lb">客服与反馈</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+      <view class="row" bindtap="onTapAbout">
+        <view class="icon row-ic icon-info"></view>
+        <text class="row-lb">关于纸条AI衣橱</text>
+        <view class="icon row-ch icon-chevron-right"></view>
+      </view>
+    </view>
+
+    <view class="pf-ver">v1.0.0</view>
+    <view class="gap-64"></view>
  </scroll-view>

-  <!-- 编辑资料弹窗 -->
-  <view wx:if="{{editVisible}}" class="mask" bindtap="onCloseEdit">
+  <!-- 编辑资料：底部玻璃抽屉 -->
+  <view wx:if="{{editVisible}}" class="scrim" bindtap="onCloseEdit"></view>
+  <view wx:if="{{editVisible}}" class="sheet-wrap">
    <view class="sheet" catchtap="noop">
-      <view class="sheet-grabber"></view>
-      <view class="sheet-title">编辑资料</view>
-
-      <view class="avatar-wrap">
-        <image wx:if="{{editForm.avatar}}" class="avatar-img" src="{{editForm.avatar}}" mode="aspectFill" />
-        <view wx:else class="icon icon-user avatar-placeholder"></view>
-        <button class="avatar-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"></button>
+      <view class="sheet-grab"></view>
+      <view class="sheet-hd">
+        <text class="sheet-t">编辑资料</text>
+        <text class="sheet-x" bindtap="onCloseEdit">取消</text>
      </view>
-      <view class="avatar-tip">点击更换头像</view>

-      <view class="form-field">
-        <text class="form-label">昵称</text>
-        <input class="input" type="nickname" value="{{editForm.username}}" bindinput="onNameInput" maxlength="32" placeholder="请输入昵称" />
-      </view>
-      <view class="form-field">
-        <text class="form-label">性别</text>
-        <view class="form-value" bindtap="onSexSelect">
-          <text class="{{editForm.sex ? '' : 'placeholder'}}">{{editForm.sex === 1 ? '男' : editForm.sex === 2 ? '女' : '请选择'}}</text>
-          <view class="icon icon-chevron-right menu-arrow"></view>
+      <view class="sheet-body">
+        <view class="avatar-wrap">
+          <image wx:if="{{editForm.avatar}}" class="avatar-img" src="{{editForm.avatar}}" mode="aspectFill" />
+          <view wx:else class="icon icon-user avatar-placeholder"></view>
+          <button class="avatar-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"></button>
+        </view>
+        <view class="avatar-tip">点击更换头像</view>
+
+        <view class="form-field">
+          <text class="form-label">昵称</text>
+          <input
+            class="input form-input"
+            type="nickname"
+            value="{{editForm.username}}"
+            bindinput="onNameInput"
+            maxlength="32"
+            placeholder="请输入昵称"
+            placeholder-class="input-ph"
+          />
+        </view>
+        <view class="form-field" bindtap="onSexSelect">
+          <text class="form-label">性别</text>
+          <view class="form-value">
+            <text class="{{editForm.sex ? '' : 'input-ph'}}">{{editForm.sex === 1 ? '男' : editForm.sex === 2 ? '女' : '请选择'}}</text>
+            <view class="icon icon-chevron-right form-arrow"></view>
+          </view>
+        </view>
+        <view class="form-field">
+          <text class="form-label">生日</text>
+          <picker mode="date" value="{{birthDateStr}}" end="{{today}}" bindchange="onBirthChange">
+            <view class="form-value">
+              <text class="{{birthDateStr ? '' : 'input-ph'}}">{{birthDateStr || '请选择生日'}}</text>
+              <view class="icon icon-chevron-right form-arrow"></view>
+            </view>
+          </picker>
        </view>
      </view>
-      <view class="form-field">
-        <text class="form-label">生日</text>
-        <picker mode="date" value="{{birthDateStr}}" end="{{today}}" bindchange="onBirthChange">
-          <view class="form-value">
-            <text class="{{birthDateStr ? '' : 'placeholder'}}">{{birthDateStr || '请选择生日'}}</text>
-            <view class="icon icon-chevron-right menu-arrow"></view>
-          </view>
-        </picker>
-      </view>

-      <view class="btn btn-primary sheet-btn {{avatarUploading ? 'btn-disabled' : ''}}" bindtap="onSaveProfile">{{avatarUploading ? '上传中…' : '保存'}}</view>
+      <view class="sheet-foot">
+        <view
+          class="btn btn--ink btn--block {{avatarUploading || saving ? 'is-off' : ''}}"
+          bindtap="onSaveProfile"
+        >{{avatarUploading ? '上传中…' : (saving ? '保存中…' : '保存')}}</view>
+      </view>
    </view>
  </view>
+
+  <!-- 性别选择：底部动作表 -->
+  <v2-overlay
+    visible="{{sexVisible}}"
+    type="actionsheet"
+    items="{{sexItems}}"
+    bind:select="onSexPick"
+    bind:cancel="onSexCancel"
+  />
 </view>
@@ -1,3 +1,4 @@
+/** 我的：大号头像 + 衬线昵称 + 四栏额度条 + 纯发丝线分组列表 **/
 .page-flex {
  height: 100vh;
  display: flex;
@@ -10,198 +11,145 @@
  height: 0;
 }

-.quota-banner {
-  margin: 24rpx 24rpx 0;
-  background: #FFF3E6;
-  color: #FF9500;
-  font-size: 24rpx;
-  padding: 20rpx 24rpx;
-  border-radius: 16rpx;
-}
-
-.user-card {
-  margin: 24rpx;
+.pf-hero {
  display: flex;
  align-items: center;
+  gap: 32rpx;
+  padding: 48rpx var(--pad) 0;
 }

-.avatar {
-  width: 128rpx;
-  height: 128rpx;
+.pf-av {
+  width: 144rpx;
+  height: 144rpx;
  border-radius: 50%;
-  background: #F2F2F7;
+  flex-shrink: 0;
  overflow: hidden;
+  background: var(--paper-3);
+  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
-  color: #C7C7CC;
-  flex-shrink: 0;
 }

-.avatar-img {
+.pf-av .icon {
+  width: 62rpx;
+  height: 62rpx;
+}
+
+.pf-av-img {
  width: 100%;
  height: 100%;
 }

-.avatar-placeholder {
-  width: 72rpx;
-  height: 72rpx;
-}
-
-.user-info {
-  flex: 1;
-  margin-left: 24rpx;
+.pf-info {
  min-width: 0;
-}
-
-.user-name {
-  display: flex;
-  align-items: center;
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #000;
-}
-
-.sex-tag {
-  font-size: 20rpx;
-  color: #007AFF;
-  background: rgba(0, 122, 255, 0.1);
-  border-radius: 8rpx;
-  padding: 2rpx 12rpx;
-  margin-left: 12rpx;
-  font-weight: 400;
-}
-
-.user-tags {
-  display: flex;
-  gap: 12rpx;
-  margin-top: 12rpx;
-}
-
-.edit-link {
-  display: flex;
-  align-items: center;
-  font-size: 26rpx;
-  color: #8E8E93;
-}
-
-.edit-link .icon {
-  width: 28rpx;
-  height: 28rpx;
-  color: #C7C7CC;
-}
-
-.menu-card {
-  margin: 0 24rpx 24rpx;
-  padding: 0 32rpx;
-}
-
-.menu-row {
-  display: flex;
-  align-items: center;
-  height: 100rpx;
-}
-
-.menu-icon {
-  width: 44rpx;
-  height: 44rpx;
-  color: #007AFF;
-  margin-right: 24rpx;
-}
-
-.menu-label {
  flex: 1;
-  font-size: 28rpx;
-  color: #000;
 }

-.menu-value {
-  font-size: 26rpx;
-  color: #8E8E93;
+.pf-name {
+  font-family: var(--serif);
+  font-size: 46rpx;
+  font-weight: 500;
+  letter-spacing: -.005em;
+  line-height: 1.2;
 }

-.menu-badge {
-  min-width: 32rpx;
-  height: 32rpx;
-  padding: 0 10rpx;
-  border-radius: 16rpx;
-  background: #FF3B30;
-  color: #fff;
-  font-size: 20rpx;
-  line-height: 32rpx;
-  text-align: center;
-  box-sizing: border-box;
+.pf-sub {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 20rpx;
+}
+
+.pf-edit {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 2rpx;
+  font-size: 25rpx;
+  color: var(--ink-3);
  flex-shrink: 0;
-  margin-left: 12rpx;
 }

-.menu-arrow {
-  width: 28rpx;
-  height: 28rpx;
-  color: #C7C7CC;
-  margin-left: 12rpx;
+.pf-edit .icon {
+  width: 24rpx;
+  height: 24rpx;
 }

-.version {
+/* 额度提醒：浅填充提示条，不依赖彩色 */
+.pf-warn {
+  margin: 44rpx var(--pad) 0;
+  padding: 26rpx 30rpx;
+  border-radius: var(--r-ctrl);
+  background: var(--fill);
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  font-size: 25rpx;
+  line-height: 1.55;
+}
+
+.pf-warn .icon {
+  width: 32rpx;
+  height: 32rpx;
+  flex-shrink: 0;
+  color: var(--ink-2);
+}
+
+.pf-warn-t {
+  flex: 1;
+}
+
+.pf-quota {
+  display: block;
+  width: 100%;
+  margin-top: 48rpx;
+}
+
+.pf-quota-hd {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 0 var(--pad) 26rpx;
+}
+
+.pf-quota-hd .qk {
+  font-size: 26rpx;
+  font-weight: 600;
+}
+
+.pf-quota-hd .icon {
+  width: 24rpx;
+  height: 24rpx;
+  color: var(--ink-4);
+  margin-left: auto;
+}
+
+.pf-grp {
+  margin-top: 68rpx;
+}
+
+.pf-ver {
+  padding: 52rpx 0 12rpx;
  text-align: center;
  font-size: 22rpx;
-  color: #C7C7CC;
-  padding: 24rpx 0 48rpx;
-}
-
-/* 编辑弹窗 */
-.mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 200;
-}
-
-.sheet {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
-  padding: 20rpx 32rpx;
-  padding-bottom: calc(32rpx + env(safe-area-inset-bottom) + 120rpx);
-  max-height: 85vh;
-  overflow-y: auto;
-}
-
-.sheet-grabber {
-  width: 72rpx;
-  height: 10rpx;
-  border-radius: 5rpx;
-  background: #E5E5EA;
-  margin: 0 auto 24rpx;
-}
-
-.sheet-title {
-  font-size: 34rpx;
-  font-weight: 600;
-  color: #000;
-  text-align: center;
-  margin-bottom: 24rpx;
+  color: var(--ink-4);
+  letter-spacing: .06em;
 }

+/* ===== 编辑资料抽屉 ===== */
 .avatar-wrap {
  position: relative;
  width: 160rpx;
  height: 160rpx;
-  margin: 0 auto;
+  margin: 16rpx auto 0;
  border-radius: 50%;
-  background: #F2F2F7;
+  background: var(--paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
-  box-sizing: border-box;
-  color: #C7C7CC;
+  color: var(--ink-3);
 }

 .avatar-wrap .avatar-img {
@@ -210,8 +158,8 @@
 }

 .avatar-wrap .avatar-placeholder {
-  width: 88rpx;
-  height: 88rpx;
+  width: 72rpx;
+  height: 72rpx;
 }

 .avatar-btn {
@@ -233,28 +181,30 @@
 .avatar-tip {
  text-align: center;
  font-size: 22rpx;
-  color: #8E8E93;
+  color: var(--ink-3);
  margin: 16rpx 0 24rpx;
 }

 .form-field {
  display: flex;
  align-items: center;
-  padding: 20rpx 0;
-  border-bottom: 1rpx solid #F2F2F7;
+  padding: 24rpx var(--pad);
+  border-bottom: 1rpx solid var(--hairline);
 }

 .form-label {
  width: 140rpx;
  font-size: 28rpx;
-  color: #000;
+  color: var(--ink-2);
  flex-shrink: 0;
 }

-.form-field .input {
+.form-input {
  flex: 1;
-  background: #fff;
+  height: auto;
+  background: transparent;
  padding: 0;
+  font-size: 30rpx;
 }

 .form-value {
@@ -262,20 +212,11 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  font-size: 28rpx;
-  color: #000;
+  font-size: 30rpx;
 }

-.placeholder {
-  color: #C7C7CC;
-}
-
-.sheet-btn {
-  margin-top: 32rpx;
-  width: 100%;
-}
-
-.btn-disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.form-arrow {
+  width: 26rpx;
+  height: 26rpx;
+  color: var(--ink-4);
 }