feat: ui update

2026-09-15 16:01:59 +08:00
parent 1a11816839
commit 26c392d612
89 changed files with 10377 additions and 4861 deletions
@@ -1,48 +1,93 @@
-<view class="page upload-page">
-  <navigation-bar title="上传衣物" />
+<view class="page up-page">
+  <navigation-bar title="上传衣物" scrolled="{{navScrolled}}" />

-  <!-- 初始态 -->
-  <view wx:if="{{state === 'idle'}}" class="idle">
-    <view class="upload-zone" bindtap="onChoose">
-      <view class="icon icon-camera upload-camera"></view>
-      <view class="upload-title">拍照或从相册选择</view>
-      <view class="upload-desc">支持 JPG / PNG，单张不超过 20MB</view>
-      <view class="upload-desc">上传消耗 1 次上传额度</view>
+  <!-- 初始态：巨大虚线发丝线方框 + 细描边相机 -->
+  <view wx:if="{{state === 'idle'}}">
+    <view class="head">
+      <view class="eyebrow">Upload</view>
+      <view class="display">上传衣物</view>
    </view>
-    <view class="upload-tip">AI 将自动抠图并识别 15 项属性</view>
+
+    <view class="up-drop" hover-class="up-drop-press" bindtap="onChoose">
+      <view class="icon icon-camera up-drop-ic"></view>
+      <view class="up-drop-t">拍照或从相册选择</view>
+      <view class="up-drop-d">支持 JPG / PNG，单张不超过 20MB</view>
+      <view class="up-drop-d">上传消耗 1 次上传额度</view>
+    </view>
+
+    <view class="up-note">AI 将自动抠图并识别 15 项属性</view>
  </view>

-  <!-- 处理中 -->
-  <view wx:elif="{{state === 'processing'}}" class="processing">
-    <image class="proc-img" src="{{imagePath}}" mode="aspectFit" />
-    <view class="steps">
-      <view class="step">
-        <view class="step-dot {{step >= 0 ? 'active' : ''}}"></view>
-        <text class="{{step >= 0 ? 'active-text' : ''}}">排队中</text>
+  <!-- 处理中：实际图片 + 三段发丝线进度轨（排队中 / AI 抠图 / 智能分类） -->
+  <view wx:elif="{{state === 'processing'}}">
+    <view class="head">
+      <view class="eyebrow">Processing</view>
+      <view class="display">AI 正在识别你的衣物…</view>
+      <view class="up-note-left">通常需要 10 秒左右，请稍候</view>
+    </view>
+
+    <view class="up-preview">
+      <image wx:if="{{imagePath}}" class="pic" src="{{imagePath}}" mode="aspectFit" />
+      <view wx:else 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="step-line {{step >= 1 ? 'active' : ''}}"></view>
-      <view class="step">
-        <view class="step-dot {{step >= 1 ? 'active' : ''}}"></view>
-        <text class="{{step >= 1 ? 'active-text' : ''}}">AI 抠图</text>
+      <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="step-line {{step >= 2 ? 'active' : ''}}"></view>
-      <view class="step">
-        <view class="step-dot {{step >= 2 ? 'active' : ''}}"></view>
-        <text class="{{step >= 2 ? 'active-text' : ''}}">智能分类</text>
+      <view class="up-step {{step === 2 ? 'is-on' : ''}}">
+        <view class="up-dot"></view>
+        <text class="up-lb">智能分类</text>
      </view>
    </view>
-    <view class="proc-text">AI 正在识别你的衣物…</view>
-    <view class="proc-desc">通常需要 10 秒左右，请稍候</view>
  </view>

-  <!-- 失败态 -->
-  <view wx:else class="failed">
-    <view class="fail-icon">!</view>
-    <view class="fail-title">识别失败：{{failReason}}</view>
-    <view class="fail-desc">本次上传额度已自动退回</view>
-    <view class="fail-btns">
-      <view class="btn btn-primary" bindtap="onRetry">重新上传</view>
-      <view class="btn btn-outline" bindtap="onManualEdit">手动填写信息</view>
+  <!-- 失败态：极简「！」+ 衬线标题 + 双按钮 -->
+  <view wx:else class="up-failed">
+    <view class="up-bang">!</view>
+    <view class="head">
+      <view class="display">识别失败</view>
+      <view class="up-note-left">{{failReason || '未知原因'}} · 本次上传额度已自动退回</view>
+    </view>
+    <view class="up-duo">
+      <view class="btn btn--ghost" bindtap="onRetry">重新上传</view>
+      <view class="btn btn--ink" bindtap="onManualEdit">手动填写信息</view>
    </view>
  </view>
+
+  <!-- 图片来源选择 -->
+  <v2-overlay
+    visible="{{srcVisible}}"
+    type="actionsheet"
+    items="{{srcItems}}"
+    bind:select="onSourceSelect"
+    bind:cancel="onSourceCancel"
+  />
+
+  <!-- 上传完成 -->
+  <v2-overlay
+    visible="{{doneVisible}}"
+    type="modal"
+    title="衣物已上传"
+    content="AI 正在识别中，可在衣橱查看进度"
+    buttons="{{doneButtons}}"
+    bind:confirm="onDoneConfirm"
+    bind:cancel="onDoneCancel"
+  />
+
+  <!-- 额度不足 -->
+  <v2-overlay
+    visible="{{quotaVisible}}"
+    type="modal"
+    title="上传额度不足"
+    content="当前剩余 0 次，购买额度包后可继续上传"
+    buttons="{{quotaButtons}}"
+    bind:confirm="onQuotaConfirm"
+    bind:cancel="onQuotaCancel"
+  />
 </view>