feat: ui update

miniprogram/pages/wardrobe/wardrobe.ts

@@ -4,6 +4,7 @@ import { PagedResult, ClothesItem, QuotaItem } from '../../types/models'
 import { QuotaType } from '../../utils/config'
 import { normalizePaged, mergePaged, hasMorePaged } from '../../utils/paged'
 import { setTabBarSelected } from '../../utils/tabbar'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -32,8 +33,13 @@ Page({
     page: 1,
     pageSize: 20,
     hasMore: true,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
   onShow() {
     this.syncTabBar()
     // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求
@@ -93,7 +99,7 @@ Page({
         const list = raw.map((it) => ({
           ...it,
           _statusText: !it.category_main && !it.processed_image ? 'AI 处理中' : '',
-          _statusType: 'blue',
+          _statusType: 'plain',
         }))
         const merged = mergePaged(this.data.list, list, page === 1)
         this.setData({

miniprogram/pages/wardrobe/wardrobe.wxml

@@ -1,35 +1,43 @@
 <view class="page page-flex">
-  <navigation-bar title="我的衣橱" back="{{false}}" />
+  <navigation-bar title="我的衣橱" back="{{false}}" scrolled="{{navScrolled}}" />
 
   <scroll-view
     scroll-y
-    class="scroll-body"
+    class="scroll-body pb-tab"
     refresher-enabled
     refresher-triggered="{{refreshing}}"
     bindrefresherrefresh="onRefresh"
     bindscrolltolower="onReachBottom"
+    bindscroll="onNavScroll"
   >
-    <!-- 分类筛选 -->
-    <scroll-view scroll-x class="cat-scroll" show-scrollbar="{{false}}">
-      <view class="cat-row">
-        <view
-          wx:for="{{categories}}"
-          wx:key="name"
-          class="cat-item {{activeCategory === index ? 'active' : ''}}"
-          data-index="{{index}}"
-          bindtap="onCategoryTap"
-        >{{item.name}}</view>
-      </view>
-    </scroll-view>
+    <!-- 大标题页头 -->
+    <view class="head">
+      <view class="eyebrow">Wardrobe</view>
+      <view class="display">我的衣橱</view>
+      <view class="wd-stat num">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
+    </view>
 
-    <!-- 统计 -->
-    <view class="stat">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
+    <!-- 下划线式极简分类条 -->
+    <view class="segbar">
+      <scroll-view scroll-x class="seg-scroll" show-scrollbar="{{false}}">
+        <view class="seg">
+          <view
+            wx:for="{{categories}}"
+            wx:key="name"
+            class="seg-item {{activeCategory === index ? 'is-on' : ''}}"
+            data-index="{{index}}"
+            bindtap="onCategoryTap"
+          >{{item.name}}</view>
+        </view>
+      </scroll-view>
+    </view>
 
     <!-- 骨架屏 -->
-    <view wx:if="{{loading}}" class="grid">
-      <view class="grid-item" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
-        <view class="skeleton sk-card"></view>
-        <view class="skeleton sk-line"></view>
+    <view wx:if="{{loading}}" class="wd-grid">
+      <view class="wd-skel" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
+        <view class="sk sk-img"></view>
+        <view class="sk sk-ln" style="width: 70%;"></view>
+        <view class="sk sk-ln" style="width: 46%;"></view>
       </view>
     </view>
 
@@ -44,8 +52,8 @@
     />
 
     <!-- 衣物网格 -->
-    <view wx:else class="grid">
-      <view class="grid-item" wx:for="{{list}}" wx:key="clothes_uuid">
+    <view wx:else class="wd-grid">
+      <view class="wd-tile" wx:for="{{list}}" wx:key="clothes_uuid">
         <clothes-card
           item="{{item}}"
           statusText="{{item._statusText}}"
@@ -55,7 +63,8 @@
       </view>
     </view>
 
-    <view wx:if="{{list.length && !hasMore}}" class="no-more">没有更多了</view>
+    <view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
+    <view class="gap-64"></view>
   </scroll-view>
 
   <view class="fab" bindtap="onUpload">

miniprogram/pages/wardrobe/wardrobe.wxss

@@ -1,3 +1,4 @@
+/** 衣橱：衬线大标题 + 下划线分类条 + 无容器网格 **/
 .page-flex {
   height: 100vh;
   display: flex;
@@ -10,65 +11,44 @@
   height: 0;
 }
 
-.cat-scroll {
-  background: #fff;
-  white-space: nowrap;
+.wd-stat {
+  margin-top: 22rpx;
+  font-size: 23rpx;
+  color: var(--ink-3);
+  letter-spacing: .02em;
 }
 
-.cat-row {
-  display: inline-flex;
-  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);
 }
 
-.cat-item {
-  flex-shrink: 0;
-  padding: 0 32rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  border-radius: 30rpx;
-  font-size: 26rpx;
-  color: #3C3C43;
-  background: #F2F2F7;
-  margin-right: 16rpx;
+.wd-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 44rpx 26rpx;
+  padding: 40rpx var(--pad) 0;
 }
 
-.cat-item.active {
-  background: #007AFF;
-  color: #fff;
-}
-
-.stat {
-  padding: 8rpx 32rpx 0;
-  font-size: 22rpx;
-  color: #8E8E93;
-}
-
-.grid {
+.wd-skel {
   display: flex;
-  flex-wrap: wrap;
-  padding: 24rpx;
-  gap: 24rpx;
+  flex-direction: column;
+  gap: 18rpx;
 }
 
-.grid-item {
-  width: calc(50% - 12rpx);
-  box-sizing: border-box;
+.wd-tile {
+  display: block;
+  width: 100%;
+  transition: transform .2s var(--ease);
 }
 
-.sk-card {
-  height: 320rpx;
-  border-radius: 32rpx;
-}
-
-.sk-line {
-  height: 40rpx;
-  margin-top: 16rpx;
-  border-radius: 12rpx;
-}
-
-.no-more {
-  text-align: center;
-  font-size: 24rpx;
-  color: #C7C7CC;
-  padding: 24rpx 0 40rpx;
+.wd-tile:active {
+  transform: scale(.975);
 }