feat: ui update

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

@@ -1,5 +1,5 @@
-<view class="page detail-page">
-  <navigation-bar title="分享详情" />
+<view class="page page-flex">
+  <navigation-bar title="分享详情" scrolled="{{navScrolled}}" />
 
   <empty-state
     wx:if="{{invalid && needLogin}}"
@@ -19,36 +19,53 @@
     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 Closet</view>
+      <view class="display">{{detail.owner_name}} 的衣橱</view>
+    </view>
+
+    <view class="csd-owner">
+      <view class="csd-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}} 分享了 {{detail.clothes.length}} 件衣物</view>
-        <view class="owner-expire">{{expireText}}</view>
+      <view class="csd-owner-body">
+        <view class="csd-owner-n">{{detail.owner_name}} 分享了 {{detail.clothes.length}} 件衣物</view>
+        <view class="csd-owner-e num">{{expireText}}</view>
       </view>
     </view>
 
-    <!-- 衣物网格 -->
-    <view class="grid">
-      <view class="grid-item" wx:for="{{detail.clothes}}" wx:key="clothes_uuid">
-        <view class="clothes-card">
-          <image wx:if="{{item.processed_image}}" class="clothes-img" src="{{item.processed_image}}" mode="aspectFill" />
-          <view wx:else class="clothes-placeholder"><view class="icon icon-hanger"></view></view>
-          <view class="clothes-name">{{item.name || '未命名'}}</view>
-          <view class="clothes-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}</view>
+    <!-- 只读网格 -->
+    <view class="csd-grid">
+      <view class="csd-tile" wx:for="{{detail.clothes}}" wx:key="clothes_uuid">
+        <view class="tile-img">
+          <image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" lazy-load />
+          <view wx:else class="ph icon icon-hanger"></view>
         </view>
+        <view class="tile-name">{{item.name || '未命名'}}</view>
+        <view class="tile-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}</view>
       </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 csd-cancel" bindtap="onCancel">取消分享</view>
+    <button class="btn btn--ink btn--block" open-type="share">分享给好友</button>
+  </view>
+
+  <!-- 取消分享确认 -->
+  <v2-overlay
+    visible="{{cancelVisible}}"
+    type="modal"
+    title="取消分享"
+    content="取消后该分享链接将失效，且不返还衣柜分享额度"
+    buttons="{{cancelButtons}}"
+    bind:confirm="onCancelConfirm"
+    bind:cancel="onCancelCancel"
+  />
 </view>