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,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>