feat: ui update

miniprogram/pages/outfit-edit/outfit-edit.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
     "navigation-bar": "/components/navigation-bar/navigation-bar",
-    "clothes-card": "/components/clothes-card/clothes-card"
+    "clothes-card": "/components/clothes-card/clothes-card",
+    "v2-overlay": "/components/v2-overlay/index"
   }
 }

miniprogram/pages/outfit-edit/outfit-edit.ts

@@ -1,6 +1,7 @@
 import { request } from '../../utils/request'
 import { OutfitItem, ClothesItem, PagedResult } from '../../types/models'
 import { normalizePaged, hasMorePaged } from '../../utils/paged'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -36,8 +37,19 @@ Page({
     hasMore: true,
     page: 1,
     saving: false,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+    // 删除确认：v2 玻璃弹窗
+    delVisible: false,
+    delButtons: [
+      { text: '取消', value: '' },
+      { text: '确认删除', value: 'ok', type: 'main' },
+    ],
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
   onLoad(query: Record<string, string>) {
     const uuid = query.uuid || ''
     logger.debug(LOG, 'onLoad, uuid=', uuid, '编辑态=', !!uuid)
@@ -233,28 +245,28 @@ Page({
   },
 
   onDelete() {
-    wx.showModal({
-      title: '确认删除这套穿搭？',
-      content: '删除后不可恢复，但不会影响衣橱内的单品。',
-      confirmText: '确认删除',
-      confirmColor: '#FF3B30',
-      success: (res) => {
-        if (!res.confirm) return
-        request({ url: `/outfit/${this.data.uuid}`, method: 'DELETE' })
-          .then(() => {
-            logger.info(LOG, '穿搭删除成功')
-            wx.showToast({ title: '已删除', icon: 'success' })
-            setTimeout(
-              () =>
-                wx.navigateBack({
-                  fail: (e) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg),
-                }),
-              500,
-            )
-          })
-          .catch((e: any) => logger.warn(LOG, '穿搭删除失败, code=', e && e.code))
-      },
-      fail: (e) => logger.warn(LOG, '删除弹窗失败, err=', e && e.errMsg),
-    })
+    this.setData({ delVisible: true })
+  },
+
+  onDelCancel() {
+    this.setData({ delVisible: false })
+  },
+
+  onDelConfirm(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ delVisible: false })
+    if (e.detail.value !== 'ok') return
+    request({ url: `/outfit/${this.data.uuid}`, method: 'DELETE' })
+      .then(() => {
+        logger.info(LOG, '穿搭删除成功')
+        wx.showToast({ title: '已删除', icon: 'success' })
+        setTimeout(
+          () =>
+            wx.navigateBack({
+              fail: (e2) => logger.warn(LOG, 'navigateBack 失败, err=', e2 && e2.errMsg),
+            }),
+          500,
+        )
+      })
+      .catch((e2: any) => logger.warn(LOG, '穿搭删除失败, code=', e2 && e2.code))
   },
 })

miniprogram/pages/outfit-edit/outfit-edit.wxml

@@ -1,114 +1,170 @@
-<view class="page edit-page">
-  <navigation-bar title="{{view === 'select' ? '选择衣橱单品' : (isEdit ? '编辑穿搭' : '创建穿搭')}}">
-    <view wx:if="{{view === 'select'}}" slot="right" class="nav-cancel" bindtap="backToForm">取消</view>
+<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="{{view === 'select' ? '选择衣橱单品' : (isEdit ? '编辑穿搭' : '创建穿搭')}}"
+    scrolled="{{navScrolled}}"
+  >
+    <view wx:if="{{view === 'select'}}" slot="right" class="nav-action" bindtap="backToForm">取消</view>
   </navigation-bar>
 
   <!-- 表单视图 -->
-  <scroll-view wx:if="{{view === 'form'}}" scroll-y class="scroll-body">
+  <scroll-view wx:if="{{view === 'form'}}" scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
+    <view class="head">
+      <view class="eyebrow">{{isEdit ? 'Edit Look' : 'New Look'}}</view>
+      <view class="display">{{isEdit ? '编辑穿搭' : '创建穿搭'}}</view>
+    </view>
+
     <!-- 拼图预览 -->
-    <view class="card preview">
-      <view wx:if="{{selectedItems.length}}" class="preview-items">
-        <view
-          class="preview-item preview-{{index}}"
-          wx:for="{{selectedItems}}"
-          wx:key="clothes_uuid"
-          wx:if="{{index < 5}}"
-        >
-          <image wx:if="{{item.processed_image}}" class="preview-img" src="{{item.processed_image}}" mode="aspectFit" />
-          <view wx:else class="icon icon-hanger preview-placeholder"></view>
+    <view class="oe-preview">
+      <view wx:if="{{selectedItems.length}}" class="collage {{cl.cls(selectedItems.length)}}">
+        <view class="cg" wx:for="{{selectedItems}}" 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="{{selectedItems.length > 5}}" class="preview-more">+{{selectedItems.length - 5}}</view>
+        <view wx:if="{{selectedItems.length > 4}}" class="cg-more">+{{selectedItems.length - 4}}</view>
+        <text class="cg-badge num">{{selectedItems.length}} 件</text>
       </view>
-      <view wx:else class="preview-empty">
+      <view wx:else class="oe-empty">
         <view class="icon icon-hanger"></view>
-        <text class="pe-title">还没有选择衣物</text>
-        <text class="pe-desc">点击下方「选择衣物」添加你的单品</text>
+        <text class="oe-empty-t">还没有选择衣物</text>
+        <text class="oe-empty-d">点击下方「选择衣橱单品」添加你的单品</text>
       </view>
     </view>
 
     <!-- 表单 -->
-    <view class="card form-card">
-      <view class="field">
-        <view class="field-label">
-          <text>穿搭名称 <text class="req">*</text></text>
-          <text class="count">{{outfitName.length}}/32</text>
+    <view class="oe-form">
+      <view class="oe-field">
+        <view class="oe-label">
+          <text>穿搭名称 <text class="oe-req">*</text></text>
+          <text class="oe-count num">{{outfitName.length}}/32</text>
         </view>
-        <input class="input" value="{{outfitName}}" bindinput="onNameInput" placeholder="给这套穿搭起个名字" maxlength="32" />
+        <input
+          class="input"
+          value="{{outfitName}}"
+          bindinput="onNameInput"
+          placeholder="给这套穿搭起个名字"
+          placeholder-class="input-ph"
+          maxlength="32"
+        />
       </view>
-      <view class="field">
-        <view class="field-label">
+
+      <view class="oe-field">
+        <view class="oe-label">
           <text>穿搭描述</text>
-          <text class="count">{{outfitDesc.length}}/500</text>
+          <text class="oe-count num">{{outfitDesc.length}}/500</text>
         </view>
-        <textarea class="textarea" value="{{outfitDesc}}" bindinput="onDescInput" placeholder="简单描述这套穿搭的灵感或亮点" maxlength="500" />
+        <textarea
+          class="textarea"
+          value="{{outfitDesc}}"
+          bindinput="onDescInput"
+          placeholder="简单描述这套穿搭的灵感或亮点"
+          placeholder-class="input-ph"
+          maxlength="500"
+        />
       </view>
-      <view class="field">
-        <view class="field-label">
+
+      <view class="oe-field">
+        <view class="oe-label">
           <text>适合场景</text>
-          <text class="count">{{scene.length}}/100</text>
+          <text class="oe-count num">{{scene.length}}/100</text>
         </view>
-        <input class="input" value="{{scene}}" bindinput="onSceneInput" placeholder="例如：通勤、约会、旅行" maxlength="100" />
+        <input
+          class="input"
+          value="{{scene}}"
+          bindinput="onSceneInput"
+          placeholder="例如：通勤、约会、旅行"
+          placeholder-class="input-ph"
+          maxlength="100"
+        />
       </view>
     </view>
 
     <!-- 选择衣物入口 -->
-    <view class="card select-entry" bindtap="openSelect">
-      <view class="entry-left">
-        <view class="entry-icon"><view class="icon icon-shirt"></view></view>
-        <view>
-          <view class="entry-title">选择衣橱单品</view>
-          <view class="entry-desc">{{selectedUuids.length ? '点击调整当前穿搭包含的衣物' : '选择 1~10 件衣物合成画报'}}</view>
+    <view class="grp-hd oe-grp"><text class="gh-cn">单品</text><text class="gh-en">Items</text></view>
+    <view class="rows">
+      <view class="row" bindtap="openSelect">
+        <view class="icon row-ic icon-shirt"></view>
+        <view class="row-lb">
+          <view>选择衣橱单品</view>
+          <view class="oe-entry-d">{{selectedUuids.length ? '点击调整当前穿搭包含的衣物' : '选择 1~10 件衣物合成画报'}}</view>
         </view>
-      </view>
-      <view class="entry-right">
-        <text class="entry-count {{selectedUuids.length ? 'on' : ''}}">{{selectedUuids.length ? '已选 ' + selectedUuids.length + ' 件' : '未选择'}}</text>
-        <view class="icon icon-chevron-right"></view>
+        <text class="row-vl">{{selectedUuids.length ? '已选 ' + selectedUuids.length + ' 件' : '未选择'}}</text>
+        <view class="icon row-ch icon-chevron-right"></view>
       </view>
     </view>
 
-    <!-- 底部按钮 -->
-    <view class="footer">
-      <view wx:if="{{isEdit}}" class="btn-danger-text delete-link" bindtap="onDelete">删除穿搭</view>
-      <view
-        class="btn btn-primary {{(!outfitName || !selectedUuids.length) ? 'disabled' : ''}}"
-        bindtap="onSave"
-      >{{isEdit ? '保存修改' : '保存'}}</view>
-    </view>
+    <view class="gap-64"></view>
   </scroll-view>
 
   <!-- 多选视图 -->
-  <view wx:else class="select-view">
-    <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>
+  <block wx:else>
+    <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>
 
-    <scroll-view scroll-y class="select-body">
-      <view wx:if="{{selectLoading}}" class="grid">
-        <view class="grid-item" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this">
-          <view class="skeleton sk-card"></view>
+    <scroll-view scroll-y class="select-body pb-dock" bindscroll="onNavScroll">
+      <view wx:if="{{selectLoading}}" class="oe-grid">
+        <view class="oe-skel" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this">
+          <view class="sk sk-img"></view>
+          <view class="sk sk-ln" style="width: 62%;"></view>
         </view>
       </view>
-      <view wx:else class="grid">
-        <view class="grid-item" wx:for="{{allClothes}}" wx:key="clothes_uuid">
+      <view wx:else class="oe-grid">
+        <view class="oe-tile" wx:for="{{allClothes}}" wx:key="clothes_uuid">
           <clothes-card item="{{item}}" selectable selected="{{item._selected}}" bind:select="onToggleSelect" />
         </view>
       </view>
+      <view class="gap-32"></view>
     </scroll-view>
+  </block>
 
-    <view class="select-footer">
-      <view>
-        <view class="sf-count">已选 <text class="t-primary">{{selectedUuids.length}}</text> 件</view>
-        <view class="sf-desc">最多可选择 10 件单品</view>
+  <!-- 悬浮底部操作条 -->
+  <view class="dock">
+    <block wx:if="{{view === 'form'}}">
+      <view wx:if="{{isEdit}}" class="btn--text oe-del" bindtap="onDelete">删除穿搭</view>
+      <view
+        class="btn btn--ink btn--block {{(!outfitName || !selectedUuids.length || saving) ? 'is-off' : ''}}"
+        bindtap="onSave"
+      >{{saving ? '保存中…' : (isEdit ? '保存修改' : '保存')}}</view>
+    </block>
+    <block wx:else>
+      <view class="dock-row">
+        <view class="oe-count-wrap">
+          <view class="oe-count-t num">已选 {{selectedUuids.length}} 件</view>
+          <view class="oe-count-d">最多可选择 10 件单品</view>
+        </view>
+        <view class="btn btn--ink btn--sm oe-confirm" bindtap="confirmSelect">确定</view>
       </view>
-      <view class="sf-confirm btn btn-primary" bindtap="confirmSelect">确定</view>
-    </view>
+    </block>
   </view>
+
+  <!-- 删除确认 -->
+  <v2-overlay
+    visible="{{delVisible}}"
+    type="modal"
+    title="确认删除这套穿搭？"
+    content="删除后不可恢复，但不会影响衣橱内的单品。"
+    buttons="{{delButtons}}"
+    bind:confirm="onDelConfirm"
+    bind:cancel="onDelCancel"
+  />
 </view>

miniprogram/pages/outfit-edit/outfit-edit.wxss

@@ -1,7 +1,9 @@
-.edit-page {
+/** 穿搭编辑：无缝拼图预览 + 发丝线表单 + 悬浮底部操作条 **/
+.page-flex {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .scroll-body {
@@ -9,288 +11,142 @@
   height: 0;
 }
 
-.nav-cancel {
-  font-size: 30rpx;
-  color: #007AFF;
-  padding: 0 8rpx;
-}
-
 /* 预览区 */
-.preview {
-  margin: 24rpx;
-  height: 320rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
+.oe-preview {
+  margin: 40rpx var(--pad) 0;
 }
 
-.preview-empty {
+.oe-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #C7C7CC;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+  background: var(--paper-2);
+  border-radius: var(--r-img);
+  color: var(--ink-4);
 }
 
-.preview-empty .icon {
+.oe-empty .icon {
   width: 96rpx;
   height: 96rpx;
 }
 
-.pe-title {
-  font-size: 26rpx;
-  color: #8E8E93;
-  margin-top: 16rpx;
+.oe-empty-t {
+  margin-top: 24rpx;
+  font-family: var(--serif);
+  font-size: 32rpx;
+  color: var(--ink-2);
 }
 
-.pe-desc {
-  font-size: 22rpx;
-  color: #C7C7CC;
-  margin-top: 8rpx;
-}
-
-.preview-items {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.preview-item {
-  position: absolute;
-  width: 140rpx;
-  height: 180rpx;
-  background: #F8F8FA;
-  border-radius: 16rpx;
-  border: 1rpx solid #E5E5EA;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.preview-0 { left: 30rpx; top: 60rpx; transform: rotate(-5deg); }
-.preview-1 { left: 120rpx; top: 100rpx; transform: rotate(3deg); }
-.preview-2 { left: 210rpx; top: 50rpx; transform: rotate(6deg); }
-.preview-3 { left: 300rpx; top: 110rpx; transform: rotate(-3deg); }
-.preview-4 { left: 390rpx; top: 70rpx; transform: rotate(8deg); }
-
-.preview-img {
-  width: 100%;
-  height: 100%;
-}
-
-.preview-placeholder {
-  width: 56rpx;
-  height: 56rpx;
-  color: #C7C7CC;
-}
-
-.preview-more {
-  position: absolute;
-  right: 24rpx;
-  top: 24rpx;
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 50%;
-  background: #007AFF;
-  color: #fff;
-  font-size: 24rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.oe-empty-d {
+  margin-top: 10rpx;
+  font-size: 23rpx;
+  color: var(--ink-3);
 }
 
 /* 表单 */
-.form-card {
-  margin: 0 24rpx 24rpx;
+.oe-form {
+  padding: 64rpx var(--pad) 0;
 }
 
-.field {
-  margin-bottom: 32rpx;
+.oe-field {
+  margin-bottom: 40rpx;
 }
 
-.field:last-child {
+.oe-field:last-child {
   margin-bottom: 0;
 }
 
-.field-label {
+.oe-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 26rpx;
-  font-weight: 600;
-  color: #1C1C1E;
+  color: var(--ink-2);
   margin-bottom: 16rpx;
 }
 
-.req {
-  color: #FF3B30;
+.oe-req {
+  color: var(--ink);
 }
 
-.count {
+.oe-count {
   font-size: 22rpx;
-  color: #8E8E93;
-  font-weight: 400;
+  color: var(--ink-3);
 }
 
-/* 选择衣物入口 */
-.select-entry {
-  margin: 0 24rpx 24rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.oe-grp {
+  margin-top: 64rpx;
 }
 
-.entry-left {
-  display: flex;
-  align-items: center;
-}
-
-.entry-icon {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 24rpx;
-  background: rgba(0, 122, 255, 0.1);
-  color: #007AFF;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 24rpx;
-}
-
-.entry-icon .icon {
-  width: 40rpx;
-  height: 40rpx;
-}
-
-.entry-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1C1C1E;
-}
-
-.entry-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 4rpx;
-}
-
-.entry-right {
-  display: flex;
-  align-items: center;
-  color: #8E8E93;
-}
-
-.entry-count {
-  font-size: 26rpx;
-  margin-right: 8rpx;
-}
-
-.entry-count.on {
-  color: #007AFF;
-}
-
-.entry-right .icon {
-  width: 28rpx;
-  height: 28rpx;
-  color: #C7C7CC;
-}
-
-/* 底部按钮 */
-.footer {
-  padding: 16rpx 24rpx;
-  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
-}
-
-.delete-link {
-  text-align: center;
-  padding: 16rpx 0 24rpx;
+.oe-entry-d {
+  margin-top: 6rpx;
+  font-size: 23rpx;
+  color: var(--ink-3);
 }
 
 /* 多选视图 */
-.select-view {
-  flex: 1;
-  height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.cat-scroll {
-  background: #fff;
-  white-space: nowrap;
+.segbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--glass);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1rpx solid var(--hairline);
   flex-shrink: 0;
 }
 
-.cat-row {
-  display: inline-flex;
-  padding: 20rpx 24rpx;
-}
-
-.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;
-}
-
-.cat-item.active {
-  background: #007AFF;
-  color: #fff;
-}
-
 .select-body {
   flex: 1;
   height: 0;
 }
 
-.grid {
+.oe-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 44rpx 26rpx;
+  padding: 40rpx var(--pad) 0;
+}
+
+.oe-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;
+.oe-tile {
+  display: block;
+  width: 100%;
 }
 
-.sk-card {
-  height: 360rpx;
-  border-radius: 32rpx;
+/* 底部操作条 */
+.oe-del {
+  display: block;
+  text-align: center;
+  padding: 8rpx 0 28rpx;
 }
 
-.select-footer {
-  flex-shrink: 0;
-  background: #fff;
-  border-top: 1rpx solid #E5E5EA;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20rpx 32rpx;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+.oe-count-wrap {
+  flex: 1;
+  min-width: 0;
 }
 
-.sf-count {
+.oe-count-t {
   font-size: 30rpx;
   font-weight: 600;
-  color: #1C1C1E;
+  color: var(--ink);
 }
 
-.sf-desc {
-  font-size: 22rpx;
-  color: #8E8E93;
+.oe-count-d {
   margin-top: 4rpx;
+  font-size: 22rpx;
+  color: var(--ink-3);
 }
 
-.sf-confirm {
-  width: 200rpx;
-  height: 80rpx;
+.oe-confirm {
+  width: 240rpx;
+  height: 88rpx;
   font-size: 28rpx;
 }