feat: ui update

2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
@@ -40,17 +40,21 @@ function tags(v) {
 module.exports = { hex: hex, tags: tags }
 </wxs>

-<view class="page detail-page">
-  <navigation-bar title="衣物详情">
+<view class="page page-flex">
+  <navigation-bar title="衣物详情" scrolled="{{navScrolled}}">
    <view
      wx:if="{{!readonly && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
      slot="right"
-      class="nav-action"
+      class="nav-action nav-action--ink"
      bindtap="onToggleEdit"
    >{{editMode ? '取消' : '编辑'}}</view>
  </navigation-bar>

-  <scroll-view scroll-y class="scroll-body">
+  <scroll-view
+    scroll-y
+    class="scroll-body {{editMode ? 'pb-dock' : 'pb-safe'}}"
+    bindscroll="onNavScroll"
+  >
    <!-- 缺少衣物标识 -->
    <empty-state
      wx:if="{{notFound}}"
@@ -61,229 +65,254 @@ module.exports = { hex: hex, tags: tags }
      bind:action="onBackWardrobe"
    />

-    <!-- 处理中：显示步骤进度 -->
+    <!-- 处理中：三步发丝线进度轨 -->
    <block wx:elif="{{imageStatus === 1 || imageStatus === 2 || imageStatus === 3}}">
-      <view class="card processing-card">
-        <view class="proc-icon"><view class="icon icon-hanger"></view></view>
-        <view class="steps">
-          <view class="step">
-            <view class="step-dot {{step >= 0 ? 'active' : ''}}"></view>
-            <text class="step-text {{step >= 0 ? 'active-text' : ''}}">排队中</text>
-          </view>
-          <view class="step-line {{step >= 1 ? 'active' : ''}}"></view>
-          <view class="step">
-            <view class="step-dot {{step >= 1 ? 'active' : ''}}"></view>
-            <text class="step-text {{step >= 1 ? 'active-text' : ''}}">AI 抠图</text>
-          </view>
-          <view class="step-line {{step >= 2 ? 'active' : ''}}"></view>
-          <view class="step">
-            <view class="step-dot {{step >= 2 ? 'active' : ''}}"></view>
-            <text class="step-text {{step >= 2 ? 'active-text' : ''}}">智能分类</text>
-          </view>
+      <view class="head">
+        <view class="eyebrow">Processing</view>
+        <view class="display">AI 正在识别你的衣物…</view>
+        <view class="cd-note">通常需要 10 秒左右，请稍候</view>
+      </view>
+      <view class="up-preview">
+        <view class="ph icon icon-hanger"></view>
+      </view>
+      <view class="up-steps">
+        <view class="up-step {{step > 0 ? 'is-done' : ''}} {{step === 0 ? 'is-on' : ''}}">
+          <view class="up-dot"></view>
+          <text class="up-lb">排队中</text>
+        </view>
+        <view class="up-step {{step > 1 ? 'is-done' : ''}} {{step === 1 ? 'is-on' : ''}}">
+          <view class="up-dot"></view>
+          <text class="up-lb">AI 抠图</text>
+        </view>
+        <view class="up-step {{step === 2 ? 'is-on' : ''}}">
+          <view class="up-dot"></view>
+          <text class="up-lb">智能分类</text>
        </view>
-        <view class="proc-text">AI 正在识别你的衣物…</view>
-        <view class="proc-desc">通常需要 10 秒左右，请稍候</view>
      </view>
    </block>

    <!-- 识别失败 -->
    <block wx:elif="{{imageStatus === 5}}">
-      <view class="img-box failed-box">
-        <view class="fail-big-icon">!</view>
+      <view class="up-preview">
+        <view class="up-bang">!</view>
      </view>
-      <view class="card name-card">
-        <view class="name-text">{{detail.name || '未命名衣物'}}</view>
+      <view class="head">
+        <view class="display">识别失败</view>
+        <view class="cd-note">{{failReason || '未知原因'}} · 本次上传额度已自动退回，你可以删除或重新上传</view>
      </view>
-      <view class="card fail-card">
-        <view class="fail-title">识别失败：{{failReason || '未知原因'}}</view>
-        <view class="fail-desc">本次上传额度已自动退回，你可以删除或重新上传</view>
+      <view class="up-duo">
+        <view class="btn btn--ghost" bindtap="onDelete">删除</view>
+        <view class="btn btn--ink" bindtap="onBackWardrobe">重新上传</view>
      </view>
    </block>

    <!-- 正常详情 -->
    <block wx:else>
-      <!-- 大图区 -->
-      <view class="img-box">
+      <!-- 大图：买手店目录式线稿/实拍 -->
+      <view class="cd-photo">
        <image
          wx:if="{{detail.processed_image}}"
-          class="img"
+          class="pic"
          src="{{detail.processed_image}}"
          mode="aspectFit"
        />
-        <view wx:else class="img-placeholder"><view class="icon icon-hanger"></view></view>
+        <view wx:else class="ph icon icon-hanger"></view>
      </view>

      <!-- 名称 -->
-      <view class="card name-card">
+      <view class="cd-name">
        <input
          wx:if="{{editMode}}"
-          class="input"
+          class="cd-input"
          value="{{formData.name}}"
          bindinput="onNameInput"
          placeholder="衣物名称"
+          placeholder-class="input-ph"
        />
-        <view wx:else class="name-text">{{detail.name || '未命名衣物'}}</view>
+        <view wx:else class="t-lg">{{detail.name || '未命名衣物'}}</view>
      </view>

-      <!-- 属性分组（基础属性 / 版型与材质 / 智能量化评估） -->
-      <view class="card attr-card" wx:for="{{attrGroups}}" wx:key="title" wx:for-item="group">
-        <view class="group-title">{{group.title}}</view>
-        <view
-          class="attr-row hairline {{editMode ? 'edit' : ''}}"
-          wx:for="{{group.attrs}}"
-          wx:key="key"
-          data-key="{{item.key}}"
-          bindtap="onAttrTap"
-        >
-          <view class="attr-label">{{item.label}}</view>
-          <view class="attr-value">
-            <!-- 评分：5 段圆条 + 分值 -->
-            <block wx:if="{{item.type === 'score'}}">
-              <view class="score-dots">
+      <!-- 属性规格表 -->
+      <view class="cd-group" wx:for="{{attrGroups}}" wx:key="title" wx:for-item="group">
+        <view class="grp-hd">
+          <text class="gh-cn">{{group.title}}</text>
+        </view>
+        <view class="rows">
+          <view
+            class="spec {{editMode ? 'is-edit' : ''}}"
+            wx:for="{{group.attrs}}"
+            wx:key="key"
+            data-key="{{item.key}}"
+            bindtap="onAttrTap"
+          >
+            <text class="spec-k">{{item.label}}</text>
+            <view class="spec-v">
+              <!-- 量化评分：细描边方点 -->
+              <block wx:if="{{item.type === 'score'}}">
+                <view class="dots">
+                  <view
+                    class="d {{dotIdx < ((editMode ? formData[item.key] : detail[item.key]) || 0) ? 'on' : ''}}"
+                    wx:for="{{[1, 2, 3, 4, 5]}}"
+                    wx:for-item="dot"
+                    wx:for-index="dotIdx"
+                    wx:key="*this"
+                  ></view>
+                </view>
+                <text class="cd-score num">{{(editMode ? formData[item.key] : detail[item.key]) || 0}}/5</text>
+              </block>
+              <!-- 适用场合：无底色描边胶囊 -->
+              <block wx:elif="{{item.type === 'multi'}}">
+                <view class="cd-tags" wx:if="{{fmt.tags(editMode ? formData.occasions : detail.occasions).length}}">
+                  <text
+                    class="pill pill--line"
+                    wx:for="{{fmt.tags(editMode ? formData.occasions : detail.occasions)}}"
+                    wx:for-item="scene"
+                    wx:key="*this"
+                  >{{scene}}</text>
+                </view>
+                <text wx:else class="c-3">—</text>
+              </block>
+              <!-- 普通文本 / 主色 -->
+              <block wx:else>
+                <text class="spec-t">{{(editMode ? formData[item.key] : detail[item.key]) || '—'}}</text>
                <view
-                  class="score-dot {{dotIdx < ((editMode ? formData[item.key] : detail[item.key]) || 0) ? 'on' : ''}} {{item.key === 'visual_impact' ? 'violet' : ''}}"
-                  wx:for="{{[1, 2, 3, 4, 5]}}"
-                  wx:for-item="dot"
-                  wx:for-index="dotIdx"
-                  wx:key="*this"
+                  wx:if="{{item.key === 'color_main' && fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
+                  class="dot"
+                  style="background: {{fmt.hex(editMode ? formData.color_main : detail.color_main)}};"
                ></view>
-              </view>
-              <text class="score-num">{{(editMode ? formData[item.key] : detail[item.key]) || 0}}/5</text>
-            </block>
-            <!-- 适用场合：胶囊标签 -->
-            <block wx:elif="{{item.type === 'multi'}}">
-              <view
-                class="scene-list"
-                wx:if="{{fmt.tags(editMode ? formData.occasions : detail.occasions).length}}"
-              >
-                <text
-                  class="tag tag-blue scene-tag"
-                  wx:for="{{fmt.tags(editMode ? formData.occasions : detail.occasions)}}"
-                  wx:for-item="scene"
-                  wx:key="*this"
-                >{{scene}}</text>
-              </view>
-              <text wx:else class="attr-text weak">—</text>
-            </block>
-            <!-- 普通文本 / 主色 -->
-            <block wx:else>
-              <text class="attr-text">{{(editMode ? formData[item.key] : detail[item.key]) || '—'}}</text>
-              <view
-                wx:if="{{item.key === 'color_main' && fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
-                class="color-dot"
-                style="background: {{fmt.hex(editMode ? formData.color_main : detail.color_main)}}"
-              ></view>
-            </block>
+              </block>
+            </view>
+            <view wx:if="{{editMode}}" class="icon icon-chevron-right cd-arrow"></view>
          </view>
-          <view wx:if="{{editMode}}" class="icon icon-chevron-right edit-arrow"></view>
        </view>
      </view>

      <!-- 备注 -->
-      <view class="card remark-card">
-        <view class="group-title">备注信息</view>
-        <view class="remark-body">
+      <view class="cd-group">
+        <view class="grp-hd">
+          <text class="gh-cn">备注信息</text>
+          <text class="gh-en">Note</text>
+        </view>
+        <view class="cd-remark">
          <textarea
            wx:if="{{editMode}}"
            class="textarea"
            value="{{formData.remark}}"
            bindinput="onRemarkInput"
            placeholder="添加备注…"
+            placeholder-class="input-ph"
          />
-          <view wx:elif="{{detail.remark}}" class="remark-text">{{detail.remark}}</view>
-          <view wx:else class="remark-text weak">暂无备注</view>
+          <view wx:elif="{{detail.remark}}" class="t-bd">{{detail.remark}}</view>
+          <view wx:else class="c-3">暂无备注</view>
        </view>
      </view>
    </block>
-
-    <!-- 底部操作：处理中隐藏，其他显示 -->
-    <view
-      wx:if="{{!readonly && !notFound && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
-      class="footer"
-    >
-      <block wx:if="{{editMode}}">
-        <view class="btn btn-primary" bindtap="onSave">保存</view>
-      </block>
-      <block wx:else>
-        <view class="btn-danger-text delete-btn" bindtap="onDelete">删除这件衣物</view>
-      </block>
-    </view>
  </scroll-view>

-  <!-- 底部属性选择面板 -->
-  <view class="sheet-mask" wx:if="{{sheetVisible}}" bindtap="onSheetClose"></view>
-  <view class="sheet" wx:if="{{sheetVisible}}">
-    <view class="sheet-head">
-      <text class="sheet-title">{{sheetLabel}}</text>
-      <view class="sheet-done" bindtap="onSheetConfirm">完成</view>
-    </view>
-    <scroll-view scroll-y class="sheet-body">
-      <!-- 评分：大号点选圆点 -->
-      <block wx:if="{{sheetType === 'score'}}">
-        <view class="sheet-score">
-          <view
-            class="sheet-score-dot {{index < (sheetValue * 1) ? 'on' : ''}}"
-            wx:for="{{[1, 2, 3, 4, 5]}}"
-            wx:key="*this"
-            data-value="{{item}}"
-            bindtap="onSheetScoreTap"
-          >{{item}}</view>
-        </view>
-      </block>
-
-      <!-- 多选（适用场合） -->
-      <block wx:elif="{{sheetType === 'multi'}}">
-        <view class="sheet-tags">
-          <view
-            class="sheet-tag {{sheetValues.indexOf(item) >= 0 ? 'on' : ''}}"
-            wx:for="{{sheetOptions}}"
-            wx:key="*this"
-            data-value="{{item}}"
-            bindtap="onSheetValueTap"
-          >{{item}}</view>
-        </view>
-      </block>
-
-      <!-- 主色：色板 + 自定义 -->
-      <block wx:elif="{{sheetType === 'color'}}">
-        <view class="sheet-colors">
-          <view
-            class="sheet-color {{sheetValue === item.name || sheetValue === item.value ? 'on' : ''}}"
-            wx:for="{{colorPresets}}"
-            wx:key="name"
-            data-name="{{item.name}}"
-            bindtap="onSheetColorTap"
-          >
-            <view class="sheet-color-dot" style="background: {{item.value}}"></view>
-          </view>
-        </view>
-        <input
-          class="input sheet-input"
-          value="{{sheetValue}}"
-          bindinput="onSheetInput"
-          placeholder="也可输入色值，如 #FFFFFF"
-        />
-      </block>
-
-      <!-- 文本：快捷选项 + 自定义输入 -->
-      <block wx:else>
-        <view class="sheet-tags" wx:if="{{sheetOptions.length}}">
-          <view
-            class="sheet-tag {{sheetValue === item ? 'on' : ''}}"
-            wx:for="{{sheetOptions}}"
-            wx:key="*this"
-            data-value="{{item}}"
-            bindtap="onSheetOptionTap"
-          >{{item}}</view>
-        </view>
-        <input
-          class="input sheet-input"
-          value="{{sheetValue}}"
-          bindinput="onSheetInput"
-          placeholder="请输入{{sheetLabel}}"
-        />
-      </block>
-    </scroll-view>
-    <view class="safe-bottom"></view>
+  <!-- 底部悬浮操作条 -->
+  <view
+    wx:if="{{!readonly && !notFound && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3 && imageStatus !== 5}}"
+    class="dock"
+  >
+    <block wx:if="{{editMode}}">
+      <view class="btn btn--ink btn--block" bindtap="onSave">保存</view>
+    </block>
+    <block wx:else>
+      <view class="dock-row">
+        <view class="btn--text" bindtap="onDelete">删除这件衣物</view>
+      </view>
+    </block>
  </view>
+
+  <!-- 底部属性选择面板 -->
+  <view wx:if="{{sheetVisible}}" class="scrim" bindtap="onSheetClose"></view>
+  <view wx:if="{{sheetVisible}}" class="sheet-wrap">
+    <view class="sheet" catchtap="noop">
+      <view class="sheet-grab"></view>
+      <view class="sheet-hd">
+        <text class="sheet-t">{{sheetLabel}}</text>
+        <text class="sheet-x" bindtap="onSheetConfirm">完成</text>
+      </view>
+      <scroll-view scroll-y class="sheet-body">
+        <!-- 评分：大号点选圆点 -->
+        <block wx:if="{{sheetType === 'score'}}">
+          <view class="sheet-score">
+            <view
+              class="sheet-score-dot {{index < (sheetValue * 1) ? 'on' : ''}}"
+              wx:for="{{[1, 2, 3, 4, 5]}}"
+              wx:key="*this"
+              data-value="{{item}}"
+              bindtap="onSheetScoreTap"
+            >{{item}}</view>
+          </view>
+        </block>
+
+        <!-- 多选（适用场合） -->
+        <block wx:elif="{{sheetType === 'multi'}}">
+          <view class="sheet-tags">
+            <view
+              class="sheet-tag {{sheetValues.indexOf(item) >= 0 ? 'on' : ''}}"
+              wx:for="{{sheetOptions}}"
+              wx:key="*this"
+              data-value="{{item}}"
+              bindtap="onSheetValueTap"
+            >{{item}}</view>
+          </view>
+        </block>
+
+        <!-- 主色：色板 + 自定义 -->
+        <block wx:elif="{{sheetType === 'color'}}">
+          <view class="sheet-colors">
+            <view
+              class="sheet-color {{sheetValue === item.name || sheetValue === item.value ? 'on' : ''}}"
+              wx:for="{{colorPresets}}"
+              wx:key="name"
+              data-name="{{item.name}}"
+              bindtap="onSheetColorTap"
+            >
+              <view class="sheet-color-dot" style="background: {{item.value}};"></view>
+            </view>
+          </view>
+          <input
+            class="input sheet-input"
+            value="{{sheetValue}}"
+            bindinput="onSheetInput"
+            placeholder="也可输入色值，如 #FFFFFF"
+            placeholder-class="input-ph"
+          />
+        </block>
+
+        <!-- 文本：快捷选项 + 自定义输入 -->
+        <block wx:else>
+          <view class="sheet-tags" wx:if="{{sheetOptions.length}}">
+            <view
+              class="sheet-tag {{sheetValue === item ? 'on' : ''}}"
+              wx:for="{{sheetOptions}}"
+              wx:key="*this"
+              data-value="{{item}}"
+              bindtap="onSheetOptionTap"
+            >{{item}}</view>
+          </view>
+          <input
+            class="input sheet-input"
+            value="{{sheetValue}}"
+            bindinput="onSheetInput"
+            placeholder="请输入{{sheetLabel}}"
+            placeholder-class="input-ph"
+          />
+        </block>
+      </scroll-view>
+    </view>
+  </view>
+
+  <!-- 删除确认：v2 玻璃弹窗 -->
+  <v2-overlay
+    visible="{{delVisible}}"
+    type="modal"
+    title="删除这件衣物"
+    content="{{delText}}"
+    buttons="{{delButtons}}"
+    bind:confirm="onDelConfirm"
+    bind:cancel="onDelCancel"
+  />
 </view>