feat: ui update

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

@@ -2,8 +2,9 @@ import { request, redirectToLogin } from '../../utils/request'
 import * as auth from '../../utils/auth'
 import { PagedResult, ClosetShareItem, OutfitShareItem } from '../../types/models'
 import { ShareStatus, ShareType } from '../../utils/config'
-import { normalizePaged, mergePaged, hasMorePaged } from '../../utils/paged'
+import { normalizePaged } from '../../utils/paged'
 import { setTabBarSelected } from '../../utils/tabbar'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -37,8 +38,13 @@ Page({
     page: 1,
     pageSize: 20,
     hasMore: true,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
   onShow() {
     this.syncTabBar()
     // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
@@ -82,30 +88,36 @@ Page({
     return this.fetchMine(page)
   },
 
-  // 我的分享：仅衣柜分享
+  // 我的分享：衣柜分享 + 穿搭分享并行拉取后按时间倒序合并
   fetchMine(page: number) {
     // 请求序号：切 tab 时旧响应可能后到，序号不匹配直接丢弃
     const seq = ((this as any).reqSeq || 0) + 1
     ;(this as any).reqSeq = seq
     if (page > 1) this.setData({ loadingMore: true })
 
-    request<PagedResult<ClosetShareItem>>({
-      url: '/closet-share',
-      data: { page, page_size: this.data.pageSize },
-    })
-      .then((res) => {
+    Promise.all([
+      request<PagedResult<ClosetShareItem>>({
+        url: '/closet-share',
+        data: { page, page_size: this.data.pageSize },
+      }),
+      request<PagedResult<OutfitShareItem>>({
+        url: '/outfit-share',
+        data: { page, page_size: this.data.pageSize },
+      }),
+    ])
+      .then(([closetRes, outfitRes]) => {
         if ((this as any).reqSeq !== seq) return
-        const { list: raw, total } = normalizePaged<ClosetShareItem>(res)
-        logger.debug(LOG, '我的分享加载成功, page=', page, '条数=', raw && raw.length)
-        const list = raw.map((it) => this.decorateCloset(it))
-        const merged = mergePaged(this.data.list, list, page === 1)
-        this.setData({
-          list: merged,
-          hasMore: hasMorePaged(merged, total, this.data.pageSize),
-          loading: false,
-          loadingMore: false,
-          page,
-        })
+        const closetList = normalizePaged<ClosetShareItem>(closetRes).list.map((it) => this.decorateCloset(it))
+        const outfitList = normalizePaged<OutfitShareItem>(outfitRes).list.map((it) => this.decorateOutfit(it))
+        logger.debug(LOG, '我的分享加载成功, page=', page, '衣柜=', closetList.length, '穿搭=', outfitList.length)
+        const prev = page === 1 ? [] : this.data.list
+        const merged = prev
+          .concat(closetList, outfitList)
+          .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
+        // 任一侧仍返回满页则认为还有更多
+        const hasMore =
+          closetList.length >= this.data.pageSize || outfitList.length >= this.data.pageSize
+        this.setData({ list: merged, hasMore, loading: false, loadingMore: false, page })
       })
       .catch((e: any) => {
         if ((this as any).reqSeq !== seq) return

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

@@ -1,67 +1,79 @@
 <view class="page page-flex">
-  <navigation-bar title="分享" back="{{false}}" />
+  <navigation-bar title="分享" back="{{false}}" scrolled="{{navScrolled}}">
+    <view slot="right" class="nav-action nav-action--ink" bindtap="onCreate">新建</view>
+  </navigation-bar>
 
-  <!-- 分段切换 -->
-  <view class="seg-wrap">
-    <view class="seg-control">
-      <view
-        wx:for="{{tabs}}"
-        wx:key="name"
-        class="seg-item {{activeTab === index ? 'active' : ''}}"
-        data-index="{{index}}"
-        bindtap="onTabTap"
-      >{{item.name}}</view>
+  <scroll-view scroll-y class="scroll-body pb-tab" bindscrolltolower="onReachBottom" bindscroll="onNavScroll">
+    <!-- 大标题页头 -->
+    <view class="head">
+      <view class="eyebrow">Sharing</view>
+      <view class="display">分享</view>
     </view>
-  </view>
 
-  <scroll-view scroll-y class="scroll-body" bindscrolltolower="onReachBottom">
-    <view wx:if="{{activeTab === 0}}" class="new-btn btn btn-outline" bindtap="onCreate">+ 新建分享</view>
+    <!-- 下划线式文字分段 -->
+    <view class="segbar">
+      <view class="seg">
+        <view
+          wx:for="{{tabs}}"
+          wx:key="name"
+          class="seg-item {{activeTab === index ? 'is-on' : ''}}"
+          data-index="{{index}}"
+          bindtap="onTabTap"
+        >{{item.name}}</view>
+      </view>
+    </view>
 
     <empty-state
       wx:if="{{!loading && !list.length}}"
       icon="icon-share"
       title="{{activeTab === 0 ? '还没有分享' : '还没有收到分享'}}"
-      desc="{{activeTab === 0 ? '把衣橱或精选衣物分享给好友' : '好友分享给你的衣橱或穿搭会出现在这里'}}"
+      desc="{{activeTab === 0 ? '把衣橱、精选衣物或穿搭分享给好友' : '好友分享给你的衣橱或穿搭会出现在这里'}}"
       buttonText="{{activeTab === 0 ? '新建分享' : ''}}"
       bind:action="onCreate"
     />
 
-    <view class="list">
+    <!-- 横向条目卡：左缩略图 + 右标题/有效期 -->
+    <view class="cs-list">
       <view
-        class="share-card card {{item._invalid ? 'invalid' : ''}}"
+        class="cs-card {{item._invalid ? 'is-dead' : ''}}"
         wx:for="{{list}}"
         wx:key="share_uuid"
         data-uuid="{{item.share_uuid}}"
         data-kind="{{item.kind}}"
         bindtap="onItemTap"
       >
-        <!-- 衣柜分享：四宫格占位 -->
-        <view class="preview-grid" wx:if="{{item.kind === 'closet'}}">
-          <view class="pg-cell"><view class="icon icon-hanger"></view></view>
-          <view class="pg-cell"><view class="icon icon-hanger"></view></view>
-          <view class="pg-cell"><view class="icon icon-hanger"></view></view>
-          <view class="pg-cell"><view class="icon icon-hanger"></view></view>
+        <!-- 衣柜分享：无缝四宫格 -->
+        <view class="cs-thumb" wx:if="{{item.kind === 'closet'}}">
+          <view class="c"><view class="icon icon-hanger"></view></view>
+          <view class="c"><view class="icon icon-hanger"></view></view>
+          <view class="c"><view class="icon icon-hanger"></view></view>
+          <view class="c"><view class="icon icon-hanger"></view></view>
         </view>
         <!-- 穿搭分享：封面 -->
-        <view class="preview-cover" wx:else>
-          <image wx:if="{{item.cover}}" class="preview-cover-img" src="{{item.cover}}" mode="aspectFill" />
-          <view wx:else class="icon icon-hanger preview-cover-ph"></view>
+        <view class="cs-thumb is-photo" wx:else>
+          <image wx:if="{{item.cover}}" class="pic" src="{{item.cover}}" mode="aspectFill" />
+          <view wx:else class="ph icon icon-hanger"></view>
         </view>
 
-        <view class="share-info">
-          <view wx:if="{{activeTab === 1}}" class="owner-row">
-            <image wx:if="{{item.owner_avatar}}" class="owner-avatar" src="{{item.owner_avatar}}" mode="aspectFill" />
-            <view wx:else class="owner-avatar owner-avatar-placeholder">
-              <view class="icon icon-user owner-avatar-icon"></view>
+        <view class="cs-body">
+          <view class="cs-owner" wx:if="{{activeTab === 1}}">
+            <image wx:if="{{item.owner_avatar}}" class="oav" src="{{item.owner_avatar}}" mode="aspectFill" />
+            <view wx:else class="oav">
+              <view class="icon icon-user"></view>
             </view>
-            <text class="owner-name">{{item.owner_name || '好友'}}</text>
+            <text class="onm">{{item.owner_name || '好友'}}</text>
+          </view>
+          <view class="cs-t">{{item.title}}</view>
+          <view class="cs-tags">
+            <text class="pill">{{item.typeText}}</text>
+            <text wx:if="{{item._invalid}}" class="pill pill--line">{{item.expireText}}</text>
+            <text wx:else class="cs-exp">{{item.expireText}}</text>
           </view>
-          <view class="share-title">{{item.title}}</view>
-          <view class="tag tag-gray share-type">{{item.typeText}}</view>
-          <view class="share-expire">{{item.expireText}}</view>
         </view>
-        <view wx:if="{{item._invalid}}" class="share-badge">{{item.status === 2 ? '已取消' : '已失效'}}</view>
       </view>
     </view>
+
+    <view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
+    <view class="gap-64"></view>
   </scroll-view>
 </view>

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

@@ -1,3 +1,4 @@
+/** 分享列表：下划线分段 + 横向条目卡（失效项降透明） **/
 .page-flex {
   height: 100vh;
   display: flex;
@@ -10,166 +11,142 @@
   height: 0;
 }
 
-.seg-wrap {
-  background: #fff;
-  padding: 20rpx 24rpx;
+.segbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  margin-top: 36rpx;
+  background: var(--glass);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1rpx solid var(--hairline);
 }
 
-.seg-control {
+.cs-list {
+  padding: 28rpx var(--pad) 0;
   display: flex;
-  background: #F2F2F7;
-  border-radius: 16rpx;
-  padding: 4rpx;
+  flex-direction: column;
 }
 
-.seg-item {
-  flex: 1;
-  height: 64rpx;
-  line-height: 64rpx;
-  text-align: center;
-  border-radius: 12rpx;
-  font-size: 28rpx;
-  color: #3C3C43;
-  transition: all 0.2s;
-}
-
-.seg-item.active {
-  background: #007AFF;
-  color: #fff;
-  font-weight: 600;
-}
-
-.new-btn {
-  margin: 24rpx;
-  width: calc(100% - 48rpx);
-}
-
-.list {
-  padding: 0 24rpx 24rpx;
-}
-
-.share-card {
-  position: relative;
+.cs-card {
   display: flex;
-  align-items: center;
-  margin-bottom: 20rpx;
-  padding: 24rpx;
+  gap: 26rpx;
+  padding: 32rpx 0;
+  border-bottom: 1rpx solid var(--hairline);
+  width: 100%;
+  align-items: flex-start;
+  transition: opacity .2s var(--ease), transform .2s var(--ease);
 }
 
-.share-card.invalid {
-  opacity: 0.5;
+.cs-card:active {
+  transform: scale(.985);
 }
 
-.preview-grid {
-  display: flex;
-  flex-wrap: wrap;
-  width: 160rpx;
-  height: 160rpx;
-  gap: 8rpx;
+.cs-card.is-dead {
+  opacity: .38;
+}
+
+.cs-thumb {
+  width: 144rpx;
+  height: 144rpx;
   flex-shrink: 0;
+  border-radius: var(--r-img);
+  background: var(--paper-2);
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 2rpx;
 }
 
-.pg-cell {
-  width: 76rpx;
-  height: 76rpx;
-  background: #F2F2F7;
-  border-radius: 12rpx;
+.cs-thumb .c {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #C7C7CC;
+  background: var(--paper-2);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.pg-cell .icon {
+.cs-thumb .c .icon {
   width: 40rpx;
   height: 40rpx;
+  flex-shrink: 0;
+  color: var(--art);
 }
 
-/* 穿搭分享封面 */
-.preview-cover {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 16rpx;
-  background: #F2F2F7;
+.cs-thumb.is-photo {
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
-  flex-shrink: 0;
-  color: #C7C7CC;
 }
 
-.preview-cover-img {
+.cs-thumb.is-photo .ph {
+  width: 52%;
+  height: 52%;
+  color: var(--art);
+}
+
+.cs-thumb .pic {
   width: 100%;
   height: 100%;
 }
 
-.preview-cover-ph {
-  width: 64rpx;
-  height: 64rpx;
+.cs-body {
+  flex: 1;
+  min-width: 0;
 }
 
-.owner-row {
+.cs-owner {
   display: flex;
   align-items: center;
-  margin-bottom: 10rpx;
+  gap: 12rpx;
+  margin-bottom: 14rpx;
 }
 
-.owner-avatar {
-  width: 40rpx;
-  height: 40rpx;
+.cs-owner .oav {
+  width: 36rpx;
+  height: 36rpx;
   border-radius: 50%;
-  margin-right: 12rpx;
-  flex-shrink: 0;
-  background: #F2F2F7;
-  overflow: hidden;
-}
-
-.owner-avatar-placeholder {
+  background: var(--paper-3);
+  color: var(--ink-3);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #C7C7CC;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
-.owner-avatar-icon {
-  width: 24rpx;
-  height: 24rpx;
+.cs-owner .oav .icon {
+  width: 20rpx;
+  height: 20rpx;
 }
 
-.owner-name {
-  font-size: 24rpx;
-  color: #8E8E93;
+.cs-owner .onm {
+  font-size: 23rpx;
+  color: var(--ink-2);
 }
 
-.share-info {
-  flex: 1;
-  margin-left: 24rpx;
-}
-
-.share-title {
+.cs-t {
+  font-family: var(--serif);
   font-size: 30rpx;
-  font-weight: 600;
-  color: #000;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.share-type {
-  margin-top: 12rpx;
+.cs-tags {
+  display: flex;
+  align-items: center;
+  gap: 14rpx;
+  margin-top: 18rpx;
+  flex-wrap: wrap;
 }
 
-.share-expire {
+.cs-exp {
   font-size: 22rpx;
-  color: #8E8E93;
-  margin-top: 8rpx;
-}
-
-.share-badge {
-  position: absolute;
-  top: 16rpx;
-  right: 16rpx;
-  font-size: 20rpx;
-  color: #8E8E93;
-  background: #F2F2F7;
-  padding: 4rpx 16rpx;
-  border-radius: 8rpx;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
 }