feat: ui update

miniprogram/pages/outfit-share-detail/outfit-share-detail.wxml

@@ -1,5 +1,15 @@
-<view class="page detail-page">
-  <navigation-bar title="穿搭分享" />
+<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 class="page page-flex">
+  <navigation-bar title="穿搭分享" scrolled="{{navScrolled}}" />
 
   <empty-state
     wx:if="{{invalid && needLogin}}"
@@ -19,69 +29,86 @@
     bind:action="onBackHome"
   />
 
-  <scroll-view wx:else scroll-y class="scroll-body">
-    <!-- 分享者信息 -->
-    <view class="card owner-card">
-      <view class="avatar">
-        <image wx:if="{{detail.owner_avatar}}" class="avatar-img" src="{{detail.owner_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">Shared Look</view>
+      <view class="display">{{outfit.outfit_name}}</view>
+    </view>
+
+    <view class="osd-owner">
+      <view class="osd-av">
+        <image wx:if="{{detail.owner_avatar}}" class="pic" src="{{detail.owner_avatar}}" mode="aspectFill" />
+        <view wx:else class="icon icon-user"></view>
       </view>
-      <view class="owner-info">
-        <view class="owner-name">{{detail.owner_name || '好友'}} 分享了穿搭</view>
-        <view class="owner-expire">共 {{outfit.items.length}} 件单品</view>
+      <view class="osd-owner-body">
+        <view class="osd-owner-n">{{detail.owner_name || '好友'}} 分享了穿搭</view>
+        <view class="osd-owner-e num">共 {{outfit.items.length}} 件单品</view>
       </view>
     </view>
 
-    <!-- 拼图封面 -->
-    <view class="cover">
-      <view
-        class="cover-item cover-{{index}}"
-        wx:for="{{outfit.items}}"
-        wx:key="clothes_uuid"
-        wx:if="{{index < 5}}"
-      >
-        <image wx:if="{{item.processed_image}}" class="cover-img" src="{{item.processed_image}}" mode="aspectFit" />
-        <view wx:else class="icon icon-hanger cover-placeholder"></view>
-      </view>
-      <view wx:if="{{!outfit.items.length}}" class="cover-empty">
-        <view class="icon icon-hanger"></view>
+    <!-- 无缝拼图封面 -->
+    <view class="osd-cover">
+      <view class="collage {{cl.cls(outfit.items.length)}}">
+        <view class="cg" wx:for="{{outfit.items}}" 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="{{outfit.items.length > 4}}" class="cg-more">+{{outfit.items.length - 4}}</view>
+        <text class="cg-badge num">{{outfit.items.length}} 件</text>
       </view>
     </view>
 
-    <!-- 信息卡片 -->
-    <view class="card info-card">
-      <view class="title-row">
-        <text class="title">{{outfit.outfit_name}}</text>
+    <!-- 信息区 -->
+    <view class="osd-info">
+      <view class="osd-tags">
+        <text wx:if="{{outfit.scene}}" class="pill pill--line">{{outfit.scene}}</text>
+        <text class="pill {{outfit.source === 2 ? 'pill--ink' : ''}}">{{outfit.source === 2 ? 'AI 推荐' : '自建'}}</text>
       </view>
-      <view class="tag-row">
-        <text wx:if="{{outfit.scene}}" class="tag tag-gray">{{outfit.scene}}</text>
-        <text class="tag {{outfit.source === 2 ? 'tag-indigo' : 'tag-gray'}}">{{outfit.source === 2 ? 'AI 推荐' : '自建'}}</text>
-      </view>
-      <view class="desc" wx:if="{{outfit.outfit_desc}}">{{outfit.outfit_desc}}</view>
+      <view class="t-bd osd-desc" wx:if="{{outfit.outfit_desc}}">{{outfit.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="osd-items">
+      <view class="grp-hd">
+        <text class="gh-cn">包含衣物</text>
+        <text class="gh-en">Items</text>
+      </view>
+      <scroll-view scroll-x class="osd-items-scroll" show-scrollbar="{{false}}">
+        <view class="osd-items-row">
           <view
-            class="item-chip"
+            class="osd-chip"
             wx:for="{{outfit.items}}"
             wx:key="clothes_uuid"
             data-uuid="{{item.clothes_uuid}}"
             bindtap="onItemTap"
           >
-            <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>
+            <view class="osd-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>
           </view>
         </view>
       </scroll-view>
     </view>
 
-    <!-- 转发出口 -->
-    <button class="share-btn" open-type="share">分享给好友</button>
-
-    <!-- 属主取消 -->
-    <view wx:if="{{detail.is_owner}}" class="cancel-btn btn-danger-text" bindtap="onCancel">取消分享</view>
-    <view class="footer-space"></view>
+    <view class="gap-64"></view>
   </scroll-view>
+
+  <!-- 悬浮玻璃操作条 -->
+  <view class="dock" wx:if="{{!invalid}}">
+    <view wx:if="{{detail.is_owner}}" class="btn--text osd-cancel" bindtap="onCancel">取消分享</view>
+    <button class="btn btn--ink btn--block" open-type="share">分享给好友</button>
+  </view>
+
+  <!-- 取消分享确认 -->
+  <v2-overlay
+    visible="{{cancelVisible}}"
+    type="modal"
+    title="取消分享"
+    content="{{cancelContent}}"
+    buttons="{{cancelButtons}}"
+    bind:confirm="onCancelConfirm"
+    bind:cancel="onCancelCancel"
+  />
 </view>