feat: ui update

miniprogram/pages/closet-share-create/closet-share-create.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
     "navigation-bar": "/components/navigation-bar/navigation-bar",
-    "clothes-card": "/components/clothes-card/clothes-card"
+    "clothes-card": "/components/clothes-card/clothes-card",
+    "v2-overlay": "/components/v2-overlay/index"
   }
 }

miniprogram/pages/closet-share-create/closet-share-create.ts

@@ -2,6 +2,7 @@ import { request } from '../../utils/request'
 import { ClothesItem, PagedResult, UserInfo } from '../../types/models'
 import { STORAGE_KEYS } from '../../utils/config'
 import { normalizePaged, hasMorePaged } from '../../utils/paged'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -45,8 +46,21 @@ Page({
     nickname: '微信用户',
     avatar: '',
     selectedCount: 0,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+    // 额度不足引导：v2 玻璃弹窗
+    quotaVisible: false,
+    quotaTitle: '衣柜分享额度不足',
+    quotaText: '购买额度包后可创建衣柜分享',
+    quotaButtons: [
+      { text: '取消', value: '' },
+      { text: '去购买', value: 'ok', type: 'main' },
+    ],
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
   onLoad() {
     this.loadUserInfo()
   },
@@ -182,6 +196,10 @@ Page({
       .catch((e: any) => {
         logger.warn(LOG, '分享创建失败, code=', e && e.code)
         this.setData({ submitting: false })
+        // 衣柜分享额度不足：弹窗引导购买
+        if (e && e.code === 80000) {
+          this.setData({ quotaVisible: true })
+        }
       })
   },
 
@@ -197,4 +215,17 @@ Page({
       fail: (e) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg),
     })
   },
+
+  onQuotaCancel() {
+    this.setData({ quotaVisible: false })
+  },
+
+  onQuotaConfirm(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ quotaVisible: false })
+    if (e.detail.value !== 'ok') return
+    wx.navigateTo({
+      url: '/pages/mall/mall',
+      fail: (err) => logger.warn(LOG, 'navigateTo 商城失败, err=', err && err.errMsg),
+    })
+  },
 })

miniprogram/pages/closet-share-create/closet-share-create.wxml

@@ -1,102 +1,143 @@
-<view class="page create-page">
-  <navigation-bar title="创建分享" />
+<view class="page page-flex">
+  <navigation-bar title="创建分享" scrolled="{{navScrolled}}" />
 
   <!-- 配置视图 -->
-  <scroll-view wx:if="{{view === 'config'}}" scroll-y class="scroll-body">
-    <view class="section-title">分享方式</view>
-    <view class="type-card card {{shareType === 1 ? 'active' : ''}}" bindtap="selectPartial">
-      <view class="type-name">部分衣物</view>
-      <view class="type-desc">挑选几件衣物分享给好友</view>
-      <view wx:if="{{shareType === 1}}" class="icon icon-check type-check"></view>
+  <scroll-view wx:if="{{view === 'config'}}" scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
+    <view class="head">
+      <view class="eyebrow">New Share</view>
+      <view class="display">创建分享</view>
     </view>
-    <view class="type-card card {{shareType === 2 ? 'active' : ''}}" bindtap="selectFull">
-      <view class="type-name">全量快照</view>
-      <view class="type-desc">分享当前衣橱的全部衣物</view>
-      <view wx:if="{{shareType === 2}}" class="icon icon-check type-check"></view>
+
+    <view class="grp-hd csc-grp"><text class="gh-cn">分享方式</text><text class="gh-en">Type</text></view>
+    <view class="csc-types">
+      <view class="csc-type {{shareType === 1 ? 'is-on' : ''}}" bindtap="selectPartial">
+        <view class="csc-type-n">部分衣物</view>
+        <view class="csc-type-d">挑选几件衣物分享给好友</view>
+        <view wx:if="{{shareType === 1}}" class="icon icon-check csc-check"></view>
+      </view>
+      <view class="csc-type {{shareType === 2 ? 'is-on' : ''}}" bindtap="selectFull">
+        <view class="csc-type-n">全量快照</view>
+        <view class="csc-type-d">分享当前衣橱的全部衣物</view>
+        <view wx:if="{{shareType === 2}}" class="icon icon-check csc-check"></view>
+      </view>
     </view>
 
     <!-- 选择衣物入口（部分衣物） -->
-    <view wx:if="{{shareType === 1}}" class="card select-entry" bindtap="openSelect">
-      <view class="entry-left">
-        <view class="entry-icon"><view class="icon icon-shirt"></view></view>
-        <view class="entry-title">选择衣物</view>
-      </view>
-      <view class="entry-right">
-        <text class="entry-count {{selectedCount ? 'on' : ''}}">{{selectedCount ? '已选 ' + selectedCount + ' 件' : '未选择'}}</text>
-        <view class="icon icon-chevron-right"></view>
+    <view wx:if="{{shareType === 1}}" class="rows csc-entry">
+      <view class="row" bindtap="openSelect">
+        <view class="icon row-ic icon-shirt"></view>
+        <text class="row-lb">选择衣物</text>
+        <text class="row-vl">{{selectedCount ? '已选 ' + selectedCount + ' 件' : '未选择'}}</text>
+        <view class="icon row-ch icon-chevron-right"></view>
       </view>
     </view>
 
-    <view class="section-title">有效期</view>
-    <view class="card expire-card">
+    <view class="grp-hd csc-grp"><text class="gh-cn">有效期</text><text class="gh-en">Expire</text></view>
+    <view class="rows">
       <view
-        class="expire-item hairline"
+        class="row"
         wx:for="{{expireOptions}}"
         wx:key="days"
         data-days="{{item.days}}"
         bindtap="selectExpire"
       >
-        <text>{{item.label}}</text>
-        <view wx:if="{{expireDays === item.days}}" class="icon icon-check expire-check"></view>
+        <text class="row-lb">{{item.label}}</text>
+        <view wx:if="{{expireDays === item.days}}" class="icon csc-tick icon-check"></view>
       </view>
     </view>
 
-    <view class="footer">
-      <view class="btn btn-primary" bindtap="onConfirm">确认分享（消耗 1 次衣柜分享额度）</view>
-    </view>
+    <view class="gap-64"></view>
   </scroll-view>
 
   <!-- 选择衣物视图 -->
-  <view wx:elif="{{view === 'select'}}" class="select-view">
-    <scroll-view scroll-x class="cat-scroll" show-scrollbar="{{false}}">
-      <view class="cat-row">
-        <view
-          wx:for="{{categories}}"
-          wx:key="name"
-          class="cat-item {{activeCategory === index ? 'active' : ''}}"
-          data-index="{{index}}"
-          bindtap="onCategoryTap"
-        >{{item.name}}</view>
-      </view>
-    </scroll-view>
-    <scroll-view scroll-y class="select-body">
-      <view wx:if="{{selectLoading}}" class="grid">
-        <view class="grid-item" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this">
-          <view class="skeleton sk-card"></view>
+  <block wx:elif="{{view === 'select'}}">
+    <view class="segbar">
+      <scroll-view scroll-x class="seg-scroll" show-scrollbar="{{false}}">
+        <view class="seg">
+          <view
+            wx:for="{{categories}}"
+            wx:key="name"
+            class="seg-item {{activeCategory === index ? 'is-on' : ''}}"
+            data-index="{{index}}"
+            bindtap="onCategoryTap"
+          >{{item.name}}</view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <scroll-view scroll-y class="select-body pb-dock" bindscroll="onNavScroll">
+      <view wx:if="{{selectLoading}}" class="csc-grid">
+        <view class="csc-skel" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this">
+          <view class="sk sk-img"></view>
+          <view class="sk sk-ln" style="width: 62%;"></view>
         </view>
       </view>
-      <view wx:else class="grid">
-        <view class="grid-item" wx:for="{{allClothes}}" wx:key="clothes_uuid">
+      <view wx:else class="csc-grid">
+        <view class="csc-tile" wx:for="{{allClothes}}" wx:key="clothes_uuid">
           <clothes-card item="{{item}}" selectable selected="{{item._selected}}" bind:select="onToggleSelect" />
         </view>
       </view>
+      <view class="gap-32"></view>
     </scroll-view>
-    <view class="select-footer">
-      <view class="sf-count">已选 <text class="t-primary">{{selectedUuids.length}}</text> 件</view>
-      <view class="sf-confirm btn btn-primary" bindtap="confirmSelect">确定</view>
-    </view>
-  </view>
+  </block>
 
   <!-- 成功预览 -->
-  <view wx:else class="success-view">
-    <view class="success-icon"><view class="icon icon-check"></view></view>
-    <view class="success-title">分享已创建</view>
-    <view class="preview-card">
-      <view class="preview-top">
-        <view class="avatar">
-          <image wx:if="{{avatar}}" class="avatar-img" src="{{avatar}}" mode="aspectFill" />
-          <view wx:else class="icon icon-user avatar-placeholder"></view>
+  <scroll-view wx:else scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
+    <view class="head">
+      <view class="eyebrow">Ready</view>
+      <view class="display">分享已创建</view>
+    </view>
+
+    <view class="csc-done-ic">
+      <view class="icon icon-check"></view>
+    </view>
+
+    <view class="csc-preview">
+      <view class="csc-preview-hd">
+        <view class="csc-av">
+          <image wx:if="{{avatar}}" class="pic" src="{{avatar}}" mode="aspectFill" />
+          <view wx:else class="icon icon-user"></view>
         </view>
-        <text class="preview-name">{{nickname}} 向你分享了 {{selectedCount || '全部'}} 件衣物</text>
+        <text class="csc-preview-n">{{nickname}} 向你分享了 {{selectedCount || '全部'}} 件衣物</text>
       </view>
-      <view class="preview-body">
+      <view class="csc-preview-body">
         <view class="icon icon-hanger"></view>
       </view>
-      <view class="preview-btn">查看衣橱</view>
-    </view>
-    <view class="success-btns">
-      <view class="btn btn-outline" bindtap="onDone">完成</view>
-      <view class="btn btn-primary" bindtap="onViewShare">查看分享</view>
     </view>
+
+    <view class="gap-64"></view>
+  </scroll-view>
+
+  <!-- 悬浮底部操作条 -->
+  <view class="dock">
+    <block wx:if="{{view === 'config'}}">
+      <view class="btn btn--ink btn--block" bindtap="onConfirm">确认分享（消耗 1 次衣柜分享额度）</view>
+    </block>
+    <block wx:elif="{{view === 'select'}}">
+      <view class="dock-row">
+        <view class="csc-count-wrap">
+          <view class="csc-count-t num">已选 {{selectedUuids.length}} 件</view>
+          <view class="csc-count-d">最多可选择 10 件单品</view>
+        </view>
+        <view class="btn btn--ink btn--sm csc-confirm" bindtap="confirmSelect">确定</view>
+      </view>
+    </block>
+    <block wx:else>
+      <view class="dock-row">
+        <view class="btn btn--ghost" bindtap="onDone">完成</view>
+        <view class="btn btn--ink" bindtap="onViewShare">查看分享</view>
+      </view>
+    </block>
   </view>
+
+  <!-- 额度不足 -->
+  <v2-overlay
+    visible="{{quotaVisible}}"
+    type="modal"
+    title="{{quotaTitle}}"
+    content="{{quotaText}}"
+    buttons="{{quotaButtons}}"
+    bind:confirm="onQuotaConfirm"
+    bind:cancel="onQuotaCancel"
+  />
 </view>

miniprogram/pages/closet-share-create/closet-share-create.wxss

@@ -1,7 +1,9 @@
-.create-page {
+/** 创建分享：三视图（配置 / 选择衣物 / 成功预览）**/
+.page-flex {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .scroll-body {
@@ -9,314 +11,196 @@
   height: 0;
 }
 
-.section-title {
-  font-size: 26rpx;
-  color: #8E8E93;
-  padding: 24rpx 24rpx 16rpx;
+.csc-grp {
+  margin-top: 64rpx;
 }
 
-.type-card {
-  position: relative;
-  margin: 0 24rpx 20rpx;
-  border: 2rpx solid transparent;
-}
-
-.type-card.active {
-  border-color: #007AFF;
-}
-
-.type-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #000;
-}
-
-.type-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 8rpx;
-}
-
-.type-check {
-  position: absolute;
-  top: 32rpx;
-  right: 32rpx;
-  width: 36rpx;
-  height: 36rpx;
-  color: #007AFF;
-}
-
-.select-entry {
-  margin: 0 24rpx 20rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.entry-left {
-  display: flex;
-  align-items: center;
-}
-
-.entry-icon {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 24rpx;
-  background: rgba(0, 122, 255, 0.1);
-  color: #007AFF;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 24rpx;
-}
-
-.entry-icon .icon {
-  width: 40rpx;
-  height: 40rpx;
-}
-
-.entry-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1C1C1E;
-}
-
-.entry-right {
-  display: flex;
-  align-items: center;
-  color: #8E8E93;
-}
-
-.entry-count {
-  font-size: 26rpx;
-  margin-right: 8rpx;
-}
-
-.entry-count.on {
-  color: #007AFF;
-}
-
-.entry-right .icon {
-  width: 28rpx;
-  height: 28rpx;
-  color: #C7C7CC;
-}
-
-.expire-card {
-  margin: 0 24rpx;
-  padding: 0 32rpx;
-}
-
-.expire-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 88rpx;
-  font-size: 28rpx;
-  color: #000;
-}
-
-.expire-check {
-  width: 36rpx;
-  height: 36rpx;
-  color: #007AFF;
-}
-
-.footer {
-  padding: 24rpx;
-  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
-}
-
-/* 选择视图 */
-.select-view {
-  flex: 1;
-  height: 0;
+/* 分享方式：两张可点卡片 */
+.csc-types {
+  padding: 0 var(--pad);
   display: flex;
   flex-direction: column;
+  gap: 20rpx;
 }
 
-.cat-scroll {
-  background: #fff;
-  white-space: nowrap;
+.csc-type {
+  position: relative;
+  padding: 34rpx 36rpx;
+  border-radius: var(--r-ctrl);
+  background: var(--fill);
+  transition: background .18s var(--ease), box-shadow .18s var(--ease);
+}
+
+.csc-type.is-on {
+  background: var(--paper);
+  box-shadow: inset 0 0 0 1rpx var(--ink);
+}
+
+.csc-type-n {
+  font-family: var(--serif);
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.csc-type-d {
+  margin-top: 10rpx;
+  font-size: 23rpx;
+  color: var(--ink-2);
+}
+
+.csc-check {
+  position: absolute;
+  top: 34rpx;
+  right: 36rpx;
+  width: 34rpx;
+  height: 34rpx;
+  color: var(--ink);
+}
+
+.csc-entry {
+  margin-top: 32rpx;
+}
+
+.csc-tick {
+  width: 30rpx;
+  height: 30rpx;
+  color: var(--ink);
+}
+
+/* 选择衣物视图 */
+.segbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--glass);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1rpx solid var(--hairline);
   flex-shrink: 0;
 }
 
-.cat-row {
-  display: inline-flex;
-  padding: 20rpx 24rpx;
-}
-
-.cat-item {
-  flex-shrink: 0;
-  padding: 0 32rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  border-radius: 30rpx;
-  font-size: 26rpx;
-  color: #3C3C43;
-  background: #F2F2F7;
-  margin-right: 16rpx;
-}
-
-.cat-item.active {
-  background: #007AFF;
-  color: #fff;
-}
-
 .select-body {
   flex: 1;
   height: 0;
 }
 
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 24rpx;
-  gap: 24rpx;
+.csc-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 44rpx 26rpx;
+  padding: 40rpx var(--pad) 0;
 }
 
-.grid-item {
-  width: calc(50% - 12rpx);
-  box-sizing: border-box;
-}
-
-.sk-card {
-  height: 360rpx;
-  border-radius: 32rpx;
-}
-
-.select-footer {
-  flex-shrink: 0;
-  background: #fff;
-  border-top: 1rpx solid #E5E5EA;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20rpx 32rpx;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-}
-
-.sf-count {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1C1C1E;
-}
-
-.sf-confirm {
-  width: 200rpx;
-  height: 80rpx;
-  font-size: 28rpx;
-}
-
-/* 成功视图 */
-.success-view {
-  flex: 1;
-  padding: 48rpx 24rpx;
+.csc-skel {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  gap: 18rpx;
 }
 
-.success-icon {
-  width: 120rpx;
-  height: 120rpx;
+.csc-tile {
+  display: block;
+  width: 100%;
+}
+
+/* 成功预览 */
+.csc-done-ic {
+  margin: 56rpx auto 0;
+  width: 104rpx;
+  height: 104rpx;
   border-radius: 50%;
-  background: #34C759;
-  color: #fff;
+  color: var(--ink);
+  box-shadow: inset 0 0 0 1rpx var(--hairline-2);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.success-icon .icon {
-  width: 64rpx;
-  height: 64rpx;
+.csc-done-ic .icon {
+  width: 44rpx;
+  height: 44rpx;
 }
 
-.success-title {
-  font-size: 34rpx;
-  font-weight: 600;
-  color: #000;
-  margin-top: 24rpx;
+.csc-preview {
+  margin: 64rpx var(--pad) 0;
+  border-top: 1rpx solid var(--hairline);
+  border-bottom: 1rpx solid var(--hairline);
+  padding: 40rpx 0;
 }
 
-.preview-card {
-  width: 100%;
-  background: #fff;
-  border-radius: 32rpx;
-  margin-top: 40rpx;
-  padding: 32rpx;
-  box-sizing: border-box;
-}
-
-.preview-top {
+.csc-preview-hd {
   display: flex;
   align-items: center;
+  gap: 20rpx;
 }
 
-.avatar {
-  width: 64rpx;
-  height: 64rpx;
+.csc-av {
+  width: 56rpx;
+  height: 56rpx;
   border-radius: 50%;
-  background: #F2F2F7;
+  background: var(--paper-3);
+  color: var(--ink-3);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #C7C7CC;
-  margin-right: 16rpx;
+  flex-shrink: 0;
 }
 
-.avatar-img {
+.csc-av .pic {
   width: 100%;
   height: 100%;
 }
 
-.avatar-placeholder {
-  width: 40rpx;
-  height: 40rpx;
+.csc-av .icon {
+  width: 30rpx;
+  height: 30rpx;
 }
 
-.preview-name {
-  font-size: 26rpx;
-  color: #000;
+.csc-preview-n {
+  font-size: 27rpx;
+  color: var(--ink-2);
 }
 
-.preview-body {
-  height: 320rpx;
-  background: #F8F8FA;
-  border-radius: 24rpx;
-  margin-top: 24rpx;
+.csc-preview-body {
+  margin-top: 32rpx;
+  aspect-ratio: 16 / 9;
+  background: var(--paper-2);
+  border-radius: var(--r-img);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #C7C7CC;
+  color: var(--art);
 }
 
-.preview-body .icon {
+.csc-preview-body .icon {
   width: 96rpx;
   height: 96rpx;
 }
 
-.preview-btn {
-  margin-top: 24rpx;
+/* 底部操作条 */
+.csc-count-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.csc-count-t {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.csc-count-d {
+  margin-top: 4rpx;
+  font-size: 22rpx;
+  color: var(--ink-3);
+}
+
+.csc-confirm {
+  width: 240rpx;
   height: 88rpx;
-  border-radius: 24rpx;
-  background: #007AFF;
-  color: #fff;
   font-size: 28rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.success-btns {
-  width: 100%;
-  display: flex;
-  gap: 20rpx;
-  margin-top: 40rpx;
-}
-
-.success-btns .btn {
+.dock-row .btn {
   flex: 1;
 }