feat: ui update

miniprogram/pages/ai-recommend/ai-recommend.json

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

miniprogram/pages/ai-recommend/ai-recommend.ts

@@ -1,5 +1,6 @@
 import { request } from '../../utils/request'
 import { AiRecommendResult, ClothesItem } from '../../types/models'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -14,8 +15,24 @@ Page({
     result: null as AiRecommendResult | null,
     clothes: [] as ClothesItem[],
     generating: false,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+    // v2 玻璃弹层
+    confirmVisible: false,
+    confirmButtons: [
+      { text: '取消', value: '' },
+      { text: '开始生成', value: 'ok', type: 'main' },
+    ],
+    limitVisible: false,
+    limitButtons: [
+      { text: '取消', value: '' },
+      { text: '去购买', value: 'ok', type: 'main' },
+    ],
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
   noop() {},
 
   selectDaily() {
@@ -42,16 +59,20 @@ Page({
 
   startGenerate(sceneType: number, scene: string) {
     if (this.data.generating) return
-    wx.showModal({
-      title: 'AI 穿搭推荐',
-      content: '本次将消耗 1 次 AI 推荐额度，生成后可保存到我的穿搭',
-      confirmText: '开始生成',
-      cancelText: '取消',
-      success: (res) => {
-        if (res.confirm) this.doGenerate(sceneType, scene)
-      },
-      fail: (e) => logger.debug(LOG, '取消生成确认, err=', e && e.errMsg),
-    })
+    // 待生成的场景参数暂存到实例，确认后再发起
+    ;(this as any).pendingScene = { sceneType, scene }
+    this.setData({ confirmVisible: true })
+  },
+
+  onConfirmCancel() {
+    this.setData({ confirmVisible: false })
+  },
+
+  onConfirmGenerate(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ confirmVisible: false })
+    if (e.detail.value !== 'ok') return
+    const pending = (this as any).pendingScene || { sceneType: 1, scene: '' }
+    this.doGenerate(pending.sceneType, pending.scene)
   },
 
   doGenerate(sceneType: number, scene: string) {
@@ -82,7 +103,8 @@ Page({
         logger.warn(LOG, 'AI 推荐生成失败, code=', code)
         if (code === 90400) {
           this.setData({ state: 'empty' })
-        } else if (code === 90401) {
+        } else if (code === 90401 || code === 80000) {
+          // 90401=AI 推荐次数上限；80000=额度不足兜底，统一弹窗引导购买
           this.setData({ state: 'scene', showSceneSheet: true })
           this.showLimitModal()
         } else if (code === 10003) {
@@ -95,20 +117,19 @@ Page({
   },
 
   showLimitModal() {
-    wx.showModal({
-      title: 'AI 推荐额度不足',
-      content: '购买额度包后可继续生成 AI 穿搭推荐',
-      confirmText: '去购买',
-      cancelText: '取消',
-      success: (res) => {
-        if (res.confirm) {
-          wx.navigateTo({
-            url: '/pages/mall/mall',
-            fail: (e) => logger.warn(LOG, 'navigateTo 商城失败, err=', e && e.errMsg),
-          })
-        }
-      },
-      fail: (e) => logger.warn(LOG, '额度弹窗失败, err=', e && e.errMsg),
+    this.setData({ limitVisible: true })
+  },
+
+  onLimitCancel() {
+    this.setData({ limitVisible: false })
+  },
+
+  onLimitConfirm(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ limitVisible: 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/ai-recommend/ai-recommend.wxml

@@ -1,14 +1,25 @@
-<view class="page rec-page">
-  <navigation-bar title="AI 穿搭推荐" />
+<wxs module="cl">
+function cls(n) {
+  if (n >= 4) return ''
+  if (n === 3) return 'collage--3'
+  if (n === 2) return 'collage--2'
+  return 'collage--1'
+}
+module.exports = { cls: cls }
+</wxs>
 
-  <!-- 生成中 -->
-  <view wx:if="{{state === 'generating'}}" class="generating">
-    <view class="gen-ani">
-      <view class="icon icon-shirt gen-icon"></view>
-      <view class="gen-ring"></view>
+<view class="page page-flex">
+  <navigation-bar title="AI 穿搭推荐" scrolled="{{navScrolled}}" />
+
+  <!-- 生成中：呼吸感细描边圆环 + 衬线文案 -->
+  <view wx:if="{{state === 'generating'}}" class="ai-gen">
+    <view class="ai-ring">
+      <view class="ai-ring-core">
+        <view class="icon icon-sparkles"></view>
+      </view>
     </view>
-    <view class="gen-title">AI 正在为你搭配…</view>
-    <view class="gen-desc">结合今日运势与你的衣橱</view>
+    <view class="ai-gen-t">AI 正在为你搭配…</view>
+    <view class="ai-gen-d">结合今日运势与你的衣橱</view>
   </view>
 
   <!-- 衣橱为空 -->
@@ -22,69 +33,121 @@
   />
 
   <!-- 结果页 -->
-  <scroll-view wx:elif="{{state === 'result'}}" scroll-y class="scroll-body">
-    <view class="card result-cover">
-      <view class="rc-item rc-{{index}}" wx:for="{{clothes}}" wx:key="clothes_uuid" wx:if="{{index < 5}}">
-        <image wx:if="{{item.processed_image}}" class="rc-img" src="{{item.processed_image}}" mode="aspectFit" />
-        <view wx:else class="icon icon-hanger rc-placeholder"></view>
+  <scroll-view wx:elif="{{state === 'result'}}" scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
+    <view class="head">
+      <view class="eyebrow">AI Stylist</view>
+      <view class="display">今日推荐</view>
+    </view>
+
+    <!-- 无缝拼图封面 -->
+    <view class="ai-cover">
+      <view class="collage {{cl.cls(clothes.length)}}">
+        <view class="cg" wx:for="{{clothes}}" wx:key="clothes_uuid" wx:if="{{index < 4}}">
+          <image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" />
+          <view wx:else class="ph icon icon-hanger"></view>
+        </view>
+        <view wx:if="{{clothes.length > 4}}" class="cg-more">+{{clothes.length - 4}}</view>
+        <text class="cg-badge num">{{clothes.length}} 件</text>
       </view>
     </view>
 
-    <view class="card result-info">
-      <view class="ri-title">{{result.outfit_name}}</view>
-      <view class="ri-desc">{{result.outfit_desc}}</view>
-      <view class="tag-row">
-        <text wx:if="{{result.scene}}" class="tag tag-gray">{{result.scene}}</text>
-        <text class="tag tag-indigo">AI 推荐</text>
+    <!-- 信息区 -->
+    <view class="ai-info">
+      <view class="t-xl">{{result.outfit_name}}</view>
+      <view class="ai-tags">
+        <text wx:if="{{result.scene}}" class="pill pill--line">{{result.scene}}</text>
+        <text class="pill pill--ink">AI 推荐</text>
       </view>
+      <view class="t-bd ai-desc">{{result.outfit_desc}}</view>
+    </view>
 
-      <view class="items-title">推荐单品</view>
-      <scroll-view scroll-x class="items-scroll" show-scrollbar="{{false}}">
-        <view class="items-row">
-          <view class="item-chip" wx:for="{{clothes}}" wx:key="clothes_uuid">
-            <image wx:if="{{item.processed_image}}" class="item-img" src="{{item.processed_image}}" mode="aspectFill" />
-            <view wx:else class="item-img item-img-empty"><view class="icon icon-hanger"></view></view>
-            <text class="item-name">{{item.name || '未命名'}}</text>
+    <!-- 推荐单品：横滑 -->
+    <view class="ai-items">
+      <view class="grp-hd">
+        <text class="gh-cn">推荐单品</text>
+        <text class="gh-en">Items</text>
+      </view>
+      <scroll-view scroll-x class="ai-items-scroll" show-scrollbar="{{false}}">
+        <view class="ai-items-row">
+          <view class="ai-chip" wx:for="{{clothes}}" wx:key="clothes_uuid">
+            <view class="ai-thumb">
+              <image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" />
+              <view wx:else class="ph icon icon-hanger"></view>
+            </view>
+            <text class="ai-chip-n">{{item.name || '未命名'}}</text>
           </view>
         </view>
       </scroll-view>
     </view>
 
-    <view class="footer">
-      <view class="btn btn-primary" bindtap="onSave">保存到我的穿搭</view>
-      <view class="btn btn-outline reroll" bindtap="onReroll">换一套</view>
-      <view class="reroll-tip">换一套将再消耗 1 次推荐额度</view>
-    </view>
+    <view class="gap-64"></view>
   </scroll-view>
 
-  <!-- 场景选择弹窗 -->
-  <view wx:if="{{showSceneSheet}}" class="mask" bindtap="onSkipScene">
-    <view class="sheet" catchtap="noop">
-      <view class="sheet-grabber"></view>
-      <view class="sheet-title">选择推荐场景</view>
-
-      <view class="scene-card {{sceneType === 1 ? 'active' : ''}}" bindtap="selectDaily">
-        <view class="scene-name">每日推荐</view>
-        <view class="scene-desc">按今日运势与衣橱自动搭配</view>
-        <view wx:if="{{sceneType === 1}}" class="icon icon-check scene-check"></view>
-      </view>
-
-      <view class="scene-card {{sceneType === 2 ? 'active' : ''}}" bindtap="selectCustom">
-        <view class="scene-name">自定义场景</view>
-        <view class="scene-desc">描述你想去的场合</view>
-        <view wx:if="{{sceneType === 2}}" class="icon icon-check scene-check"></view>
-      </view>
-
-      <input
-        wx:if="{{sceneType === 2}}"
-        class="input scene-input"
-        value="{{scene}}"
-        bindinput="onSceneInput"
-        placeholder="例如：海边度假、周一例会、初次约会"
-      />
-
-      <view class="btn btn-primary sheet-btn" bindtap="onStartGenerate">开始生成（消耗 1 次推荐额度）</view>
-      <view class="sheet-skip" bindtap="onSkipScene">跳过，使用每日推荐</view>
+  <!-- 悬浮底部操作条 -->
+  <view class="dock" wx:if="{{state === 'result'}}">
+    <view class="ai-reroll-tip">换一套将再消耗 1 次推荐额度</view>
+    <view class="dock-row">
+      <view class="btn btn--ghost" bindtap="onReroll">换一套</view>
+      <view class="btn btn--ink" bindtap="onSave">保存到我的穿搭</view>
     </view>
   </view>
+
+  <!-- 场景选择抽屉 -->
+  <view wx:if="{{showSceneSheet}}" class="scrim" bindtap="onSkipScene"></view>
+  <view wx:if="{{showSceneSheet}}" class="sheet-wrap">
+    <view class="sheet" catchtap="noop">
+      <view class="sheet-grab"></view>
+      <view class="sheet-hd">
+        <text class="sheet-t">选择推荐场景</text>
+        <text class="sheet-x" bindtap="onSkipScene">跳过</text>
+      </view>
+      <view class="sheet-body">
+        <view class="scene-card {{sceneType === 1 ? 'is-on' : ''}}" bindtap="selectDaily">
+          <view class="scene-name">每日推荐</view>
+          <view class="scene-desc">按今日运势与衣橱自动搭配</view>
+          <view wx:if="{{sceneType === 1}}" class="icon icon-check scene-check"></view>
+        </view>
+
+        <view class="scene-card {{sceneType === 2 ? 'is-on' : ''}}" bindtap="selectCustom">
+          <view class="scene-name">自定义场景</view>
+          <view class="scene-desc">描述你想去的场合</view>
+          <view wx:if="{{sceneType === 2}}" class="icon icon-check scene-check"></view>
+        </view>
+
+        <input
+          wx:if="{{sceneType === 2}}"
+          class="input scene-input"
+          value="{{scene}}"
+          bindinput="onSceneInput"
+          placeholder="例如：海边度假、周一例会、初次约会"
+          placeholder-class="input-ph"
+        />
+      </view>
+      <view class="sheet-foot">
+        <view class="btn btn--ink btn--block" bindtap="onStartGenerate">开始生成（消耗 1 次推荐额度）</view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 生成确认 -->
+  <v2-overlay
+    visible="{{confirmVisible}}"
+    type="modal"
+    title="AI 穿搭推荐"
+    content="本次将消耗 1 次 AI 推荐额度，生成后可保存到我的穿搭"
+    buttons="{{confirmButtons}}"
+    bind:confirm="onConfirmGenerate"
+    bind:cancel="onConfirmCancel"
+  />
+
+  <!-- 额度不足 -->
+  <v2-overlay
+    visible="{{limitVisible}}"
+    type="modal"
+    title="AI 推荐额度不足"
+    content="购买额度包后可继续生成 AI 穿搭推荐"
+    buttons="{{limitButtons}}"
+    bind:confirm="onLimitConfirm"
+    bind:cancel="onLimitCancel"
+  />
 </view>

miniprogram/pages/ai-recommend/ai-recommend.wxss

@@ -1,7 +1,9 @@
-.rec-page {
+/** AI 推荐：呼吸感圆环生成态 + 拼图结果卡 + 悬浮玻璃操作条 **/
+.page-flex {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .scroll-body {
@@ -10,272 +12,181 @@
 }
 
 /* 生成中 */
-.generating {
+.ai-gen {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 64rpx;
+  padding: 0 var(--pad) 120rpx;
 }
 
-.gen-ani {
-  position: relative;
-  width: 160rpx;
-  height: 160rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gen-icon {
-  width: 72rpx;
-  height: 72rpx;
-  color: #007AFF;
-}
-
-.gen-ring {
-  position: absolute;
-  width: 160rpx;
-  height: 160rpx;
+.ai-ring {
+  width: 216rpx;
+  height: 216rpx;
   border-radius: 50%;
-  border: 4rpx solid #E5E5EA;
-  border-top-color: #007AFF;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.gen-title {
-  margin-top: 48rpx;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #000;
-}
-
-.gen-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 12rpx;
-}
-
-/* 结果封面 */
-.result-cover {
-  margin: 24rpx;
-  height: 420rpx;
-  position: relative;
-  overflow: hidden;
-}
-
-.rc-item {
-  position: absolute;
-  width: 180rpx;
-  height: 240rpx;
-  background: #F8F8FA;
-  border-radius: 20rpx;
-  border: 1rpx solid #E5E5EA;
+  box-shadow: inset 0 0 0 1rpx var(--hairline-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  animation: aiBreath 2.4s var(--ease) infinite;
 }
 
-.rc-0 { left: 30rpx; top: 70rpx; transform: rotate(-5deg); }
-.rc-1 { left: 130rpx; top: 130rpx; transform: rotate(3deg); }
-.rc-2 { left: 240rpx; top: 60rpx; transform: rotate(6deg); }
-.rc-3 { left: 350rpx; top: 140rpx; transform: rotate(-3deg); }
-.rc-4 { left: 460rpx; top: 80rpx; transform: rotate(8deg); }
-
-.rc-img {
-  width: 100%;
-  height: 100%;
-}
-
-.rc-placeholder {
-  width: 64rpx;
-  height: 64rpx;
-  color: #C7C7CC;
-}
-
-/* 结果信息 */
-.result-info {
-  margin: 0 24rpx 24rpx;
-}
-
-.ri-title {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #000;
-}
-
-.ri-desc {
-  font-size: 28rpx;
-  color: #3C3C43;
-  margin-top: 16rpx;
-  line-height: 1.6;
-}
-
-.tag-row {
-  display: flex;
-  gap: 12rpx;
-  margin-top: 20rpx;
-}
-
-.items-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #000;
-  margin-top: 32rpx;
-}
-
-.items-scroll {
-  margin-top: 20rpx;
-  white-space: nowrap;
-}
-
-.items-row {
-  display: inline-flex;
-}
-
-.item-chip {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 140rpx;
-  margin-right: 20rpx;
-}
-
-.item-img {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 20rpx;
-  background: #F2F2F7;
-}
-
-.item-img-empty {
+.ai-ring-core {
+  width: 152rpx;
+  height: 152rpx;
+  border-radius: 50%;
+  background: var(--paper-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #C7C7CC;
+  color: var(--ink-2);
 }
 
-.item-img-empty .icon {
+.ai-ring-core .icon {
   width: 56rpx;
   height: 56rpx;
 }
 
-.item-name {
-  font-size: 20rpx;
-  color: #8E8E93;
-  margin-top: 8rpx;
-  max-width: 140rpx;
+@keyframes aiBreath {
+  0%, 100% { transform: scale(.96); opacity: .6; }
+  50% { transform: scale(1); opacity: 1; }
+}
+
+.ai-gen-t {
+  margin-top: 64rpx;
+  font-family: var(--serif);
+  font-size: 42rpx;
+  font-weight: 500;
+  letter-spacing: -.005em;
+}
+
+.ai-gen-d {
+  margin-top: 18rpx;
+  font-size: 25rpx;
+  color: var(--ink-2);
+}
+
+/* 结果 */
+.ai-cover {
+  padding: 40rpx var(--pad) 0;
+}
+
+.ai-info {
+  padding: 48rpx var(--pad) 0;
+}
+
+.ai-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 26rpx;
+}
+
+.ai-desc {
+  margin-top: 28rpx;
+}
+
+.ai-items {
+  margin-top: 64rpx;
+}
+
+.ai-items-scroll {
+  white-space: nowrap;
+}
+
+.ai-items-row {
+  display: inline-flex;
+  gap: 28rpx;
+  padding: 0 var(--pad);
+}
+
+.ai-chip {
+  display: flex;
+  flex-direction: column;
+  width: 160rpx;
+}
+
+.ai-thumb {
+  width: 160rpx;
+  height: 160rpx;
+  background: var(--paper-2);
+  border-radius: var(--r-img);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ai-thumb .ph {
+  width: 52%;
+  height: 52%;
+  color: var(--art);
+}
+
+.ai-thumb .pic {
+  width: 100%;
+  height: 100%;
+}
+
+.ai-chip-n {
+  margin-top: 14rpx;
+  font-size: 22rpx;
+  color: var(--ink-3);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.footer {
-  padding: 16rpx 24rpx;
-  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
-}
-
-.reroll {
-  margin-top: 20rpx;
-}
-
-.reroll-tip {
+.ai-reroll-tip {
+  padding-bottom: 20rpx;
   text-align: center;
   font-size: 22rpx;
-  color: #8E8E93;
-  margin-top: 16rpx;
+  color: var(--ink-3);
 }
 
-/* 场景弹窗 */
-.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));
-}
-
-.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;
+.dock-row .btn {
+  flex: 1;
 }
 
+/* 场景抽屉 */
 .scene-card {
   position: relative;
-  border: 2rpx solid #E5E5EA;
-  border-radius: 24rpx;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
+  margin: 0 var(--pad) 20rpx;
+  padding: 32rpx;
+  border-radius: var(--r-ctrl);
+  background: var(--fill);
+  transition: background .18s var(--ease);
 }
 
-.scene-card.active {
-  border-color: #007AFF;
-  background: rgba(0, 122, 255, 0.04);
+.scene-card.is-on {
+  background: var(--paper);
+  box-shadow: inset 0 0 0 1rpx var(--ink);
 }
 
 .scene-name {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #000;
+  font-family: var(--serif);
+  font-size: 32rpx;
+  font-weight: 500;
 }
 
 .scene-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 8rpx;
+  margin-top: 10rpx;
+  font-size: 23rpx;
+  color: var(--ink-2);
 }
 
 .scene-check {
   position: absolute;
-  top: 28rpx;
-  right: 28rpx;
-  width: 36rpx;
-  height: 36rpx;
-  color: #007AFF;
+  top: 32rpx;
+  right: 32rpx;
+  width: 34rpx;
+  height: 34rpx;
+  color: var(--ink);
 }
 
 .scene-input {
-  margin-bottom: 20rpx;
-}
-
-.sheet-btn {
-  width: 100%;
-}
-
-.sheet-skip {
-  text-align: center;
-  font-size: 26rpx;
-  color: #8E8E93;
-  margin-top: 20rpx;
-  padding: 12rpx;
+  margin: 0 var(--pad) 20rpx;
+  width: auto;
+  display: block;
 }