feat: ui update

miniprogram/pages/clothes-detail/clothes-detail.json

@@ -1,5 +1,7 @@
 {
   "usingComponents": {
-    "navigation-bar": "/components/navigation-bar/navigation-bar"
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "empty-state": "/components/empty-state/empty-state",
+    "v2-overlay": "/components/v2-overlay/index"
   }
 }

miniprogram/pages/clothes-detail/clothes-detail.ts

@@ -1,6 +1,7 @@
 import { request } from '../../utils/request'
 import { ClothesItem } from '../../types/models'
 import { ProcessStatus } from '../../utils/config'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -122,8 +123,23 @@ Page({
     sheetOptions: [] as string[],
     sheetValue: '',
     sheetValues: [] as string[],
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+    // 删除确认：v2 玻璃弹窗
+    delVisible: false,
+    delText: '',
+    delButtons: [
+      { text: '取消', value: '' },
+      { text: '确认删除', value: 'ok', type: 'main' },
+    ],
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
+  // 抽屉内容点击不穿透到遮罩
+  noop() {},
+
   onLoad(query: Record<string, string>) {
     const uuid = query.uuid || ''
     const shareUUID = query.share_uuid || ''
@@ -155,7 +171,7 @@ Page({
       : `/clothes/${this.data.uuid}`
     return request<ClothesItem>({ url })
       .then((detail) => {
-        logger.debug(LOG, '详情加载成功, 处理状态=', detail && detail.image_process_status)
+        logger.debug(LOG, '详情加载成功, name=', detail && detail.name)
         this.setData({ detail, loading: false })
       })
       .catch((e: any) => {
@@ -320,31 +336,34 @@ Page({
       .catch((e: any) => logger.warn(LOG, '衣物信息保存失败, code=', e && e.code))
   },
 
+  // 删除入口：打开 v2 玻璃确认弹窗
   onDelete() {
     const canRefund = this.data.imageStatus !== ProcessStatus.FAILED
-    const content = canRefund ? '删除后将退回 1 次上传额度，确认删除？' : '确认删除？'
-    wx.showModal({
-      title: '删除这件衣物',
-      content,
-      confirmText: '确认删除',
-      confirmColor: '#FF3B30',
-      success: (res) => {
-        if (!res.confirm) return
-        request({ url: `/clothes/${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,
+      delText: canRefund ? '删除后将退回 1 次上传额度，确认删除？' : '确认删除？',
     })
   },
+
+  onDelCancel() {
+    this.setData({ delVisible: false })
+  },
+
+  onDelConfirm(e: WechatMiniprogram.CustomEvent) {
+    this.setData({ delVisible: false })
+    if (e.detail.value !== 'ok') return
+    request({ url: `/clothes/${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/clothes-detail/clothes-detail.wxml

@@ -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>

miniprogram/pages/clothes-detail/clothes-detail.wxss

@@ -1,7 +1,9 @@
-.detail-page {
+/** 衣物详情：买手店目录式大图 + 规格表 + 悬浮底部操作条 **/
+.page-flex {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .scroll-body {
@@ -9,474 +11,159 @@
   height: 0;
 }
 
-.nav-action {
-  font-size: 30rpx;
-  color: #007AFF;
-  padding: 0 8rpx;
+.cd-note {
+  margin-top: 20rpx;
+  font-size: 25rpx;
+  color: var(--ink-2);
+  line-height: 1.7;
 }
 
-.img-box {
-  margin: 24rpx;
-  height: 640rpx;
-  background: #fff;
-  border-radius: 32rpx;
+.cd-photo {
+  margin: 32rpx var(--pad) 0;
+  aspect-ratio: 4 / 5;
+  background: var(--paper-2);
+  border-radius: var(--r-img);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 
-.img {
+.cd-photo .ph {
+  width: 46%;
+  height: 46%;
+  color: var(--art);
+}
+
+.cd-photo .pic {
   width: 100%;
   height: 100%;
 }
 
-.img-placeholder {
-  color: #C7C7CC;
+.cd-name {
+  padding: 48rpx var(--pad) 0;
 }
 
-.img-placeholder .icon {
-  width: 120rpx;
-  height: 120rpx;
-}
-
-.name-card {
-  margin: 0 24rpx 24rpx;
-}
-
-.name-text {
+.cd-input {
+  font-family: var(--serif);
   font-size: 40rpx;
-  font-weight: 700;
-  color: #000;
+  width: 100%;
+  padding-bottom: 12rpx;
+  border-bottom: 1rpx solid var(--hairline-2);
 }
 
-/* ===== 属性分组卡片 ===== */
-.card.attr-card {
-  margin: 0 24rpx 24rpx;
-  padding: 0;
-  overflow: hidden;
+.cd-group {
+  margin-top: 64rpx;
 }
 
-.group-title {
-  padding: 14rpx 32rpx;
-  font-size: 24rpx;
-  font-weight: 600;
-  color: #8E8E93;
-  background: rgba(242, 242, 247, 0.6);
-  border-bottom: 1rpx solid #E5E5EA;
+.cd-group .grp-hd {
+  padding-bottom: 22rpx;
 }
 
-.attr-row {
-  display: flex;
-  align-items: center;
-  min-height: 92rpx;
-  padding: 0 32rpx;
-  box-sizing: border-box;
+.spec.is-edit:active {
+  background: var(--fill);
 }
 
-.attr-row:last-child {
-  border-bottom: none;
+.spec-t {
+  font-size: 29rpx;
 }
 
-.attr-row.edit:active {
-  background: #F2F2F7;
-}
-
-.attr-label {
-  width: 200rpx;
-  font-size: 28rpx;
-  color: #000;
-  flex-shrink: 0;
-}
-
-.attr-value {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 0;
-}
-
-.attr-text {
-  font-size: 28rpx;
-  color: #3C3C43;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.attr-text.weak {
-  color: #C7C7CC;
-}
-
-.color-dot {
-  width: 32rpx;
-  height: 32rpx;
-  border-radius: 50%;
+.cd-score {
   margin-left: 16rpx;
-  border: 1rpx solid #E5E5EA;
-  flex-shrink: 0;
+  font-size: 25rpx;
+  color: var(--ink-3);
 }
 
-/* ===== 评分：5 段圆条 ===== */
-.score-dots {
-  display: flex;
-  align-items: center;
-}
-
-.score-dot {
-  width: 28rpx;
-  height: 12rpx;
-  border-radius: 6rpx;
-  background: #E5E5EA;
-  margin-left: 8rpx;
-}
-
-.score-dot:first-child {
-  margin-left: 0;
-}
-
-.score-dot.on {
-  background: #007AFF;
-}
-
-.score-dot.violet.on {
-  background: #5856D6;
-}
-
-.score-num {
-  font-size: 26rpx;
-  color: #8E8E93;
-  margin-left: 16rpx;
-  min-width: 60rpx;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* ===== 适用场合标签 ===== */
-.scene-list {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+.cd-tags {
+  display: inline-flex;
   flex-wrap: wrap;
+  gap: 12rpx;
+  justify-content: flex-end;
 }
 
-.scene-tag {
-  margin-left: 8rpx;
-}
-
-.scene-tag:first-child {
-  margin-left: 0;
-}
-
-.edit-arrow {
-  width: 28rpx;
-  height: 28rpx;
-  color: #C7C7CC;
+.cd-arrow {
+  width: 26rpx;
+  height: 26rpx;
+  color: var(--ink-4);
   margin-left: 12rpx;
-  flex-shrink: 0;
 }
 
-/* ===== 备注卡片 ===== */
-.card.remark-card {
-  margin: 0 24rpx 24rpx;
-  padding: 0;
-  overflow: hidden;
+.cd-remark {
+  padding: 0 var(--pad);
 }
 
-.remark-body {
-  padding: 24rpx 32rpx;
-}
-
-.remark-text {
-  font-size: 28rpx;
-  color: #3C3C43;
-  line-height: 1.6;
-}
-
-.remark-text.weak {
-  color: #C7C7CC;
-}
-
-/* ===== 底部属性选择面板 ===== */
-.sheet-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 99;
-  animation: mask-in 0.2s ease;
-}
-
-.sheet {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100;
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
-  max-height: 72vh;
-  display: flex;
-  flex-direction: column;
-  animation: sheet-up 0.25s ease;
-}
-
-.sheet-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 28rpx 32rpx 12rpx;
-}
-
-.sheet-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #000;
-}
-
-.sheet-done {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #007AFF;
-  padding: 8rpx 0 8rpx 32rpx;
-}
-
-.sheet-done:active {
-  opacity: 0.6;
-}
-
-.sheet-body {
-  padding: 12rpx 32rpx 32rpx;
-  max-height: 56vh;
-  box-sizing: border-box;
-}
-
-/* 选项胶囊 */
-.sheet-tags {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.sheet-tag {
-  padding: 16rpx 30rpx;
-  margin: 0 16rpx 16rpx 0;
-  border-radius: 18rpx;
-  background: #F2F2F7;
-  color: #3C3C43;
-  font-size: 28rpx;
-  line-height: 1;
-}
-
-.sheet-tag.on {
-  background: #007AFF;
-  color: #fff;
-  font-weight: 500;
-}
-
-.sheet-tag:active {
-  opacity: 0.8;
-}
-
-.sheet-input {
-  margin-top: 12rpx;
-}
-
-/* 色板 */
-.sheet-colors {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.sheet-color {
-  width: 96rpx;
-  height: 96rpx;
-  margin: 0 20rpx 20rpx 0;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 4rpx solid transparent;
-  box-sizing: border-box;
-}
-
-.sheet-color.on {
-  border-color: #007AFF;
-}
-
-.sheet-color-dot {
-  width: 68rpx;
-  height: 68rpx;
-  border-radius: 50%;
-  border: 1rpx solid #E5E5EA;
-}
-
-/* 评分点选 */
+/* ===== 属性选择面板 ===== */
 .sheet-score {
   display: flex;
-  justify-content: space-between;
-  padding: 20rpx 0 8rpx;
+  gap: 20rpx;
+  padding: 32rpx var(--pad);
 }
 
 .sheet-score-dot {
-  width: 96rpx;
-  height: 96rpx;
-  border-radius: 50%;
-  background: #F2F2F7;
-  color: #8E8E93;
-  font-size: 34rpx;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  flex: 1;
+  height: 108rpx;
+  line-height: 108rpx;
+  text-align: center;
+  border-radius: var(--r-ctrl);
+  background: var(--fill);
+  font-size: 32rpx;
+  color: var(--ink-2);
+  transition: background .18s var(--ease), color .18s var(--ease);
 }
 
 .sheet-score-dot.on {
-  background: #007AFF;
+  background: var(--ink);
   color: #fff;
 }
 
-.sheet-score-dot:active {
-  opacity: 0.8;
-}
-
-@keyframes sheet-up {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes mask-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.footer {
-  padding: 16rpx 24rpx 48rpx;
-}
-
-.delete-btn {
-  text-align: center;
-  padding: 24rpx 0;
-}
-
-/* 处理中 */
-.processing-card {
-  margin: 24rpx;
-  padding: 64rpx 32rpx;
+.sheet-tags {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  padding: 32rpx var(--pad);
 }
 
-.proc-icon {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 50%;
-  background: #F2F2F7;
-  color: #C7C7CC;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 48rpx;
+.sheet-tag {
+  padding: 16rpx 32rpx;
+  border-radius: var(--r-pill);
+  background: var(--fill);
+  font-size: 27rpx;
+  color: var(--ink-2);
+  transition: background .18s var(--ease), color .18s var(--ease);
 }
 
-.proc-icon .icon {
-  width: 96rpx;
-  height: 96rpx;
-}
-
-.steps {
-  display: flex;
-  align-items: center;
-}
-
-.step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: 22rpx;
-  color: #C7C7CC;
-}
-
-.step-text {
-  font-size: 22rpx;
-  color: #C7C7CC;
-}
-
-.step-text.active-text {
-  color: #007AFF;
-}
-
-.step-dot {
-  width: 20rpx;
-  height: 20rpx;
-  border-radius: 50%;
-  background: #E5E5EA;
-  margin-bottom: 12rpx;
-}
-
-.step-dot.active {
-  background: #007AFF;
-}
-
-.step-line {
-  width: 100rpx;
-  height: 2rpx;
-  background: #E5E5EA;
-  margin: 0 16rpx 34rpx;
-}
-
-.step-line.active {
-  background: #007AFF;
-}
-
-.proc-text {
-  margin-top: 48rpx;
-  font-size: 30rpx;
-  font-weight: 500;
-  color: #000;
-}
-
-.proc-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 12rpx;
-}
-
-/* 识别失败 */
-.failed-box {
-  background: #FFF3F3;
-}
-
-.fail-big-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background: #FF3B30;
+.sheet-tag.on {
+  background: var(--ink);
   color: #fff;
-  font-size: 72rpx;
-  font-weight: 700;
+}
+
+.sheet-colors {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-wrap: wrap;
+  gap: 24rpx;
+  padding: 32rpx var(--pad) 8rpx;
 }
 
-.fail-card {
-  margin: 0 24rpx 24rpx;
-  padding: 24rpx 32rpx;
+.sheet-color {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1rpx rgba(0, 0, 0, .12);
 }
 
-.fail-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #000;
+.sheet-color.on {
+  box-shadow: 0 0 0 4rpx var(--ink);
 }
 
-.fail-desc {
-  font-size: 24rpx;
-  color: #8E8E93;
-  margin-top: 12rpx;
-  line-height: 1.5;
+.sheet-color-dot {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.sheet-input {
+  margin: 24rpx var(--pad);
+  width: auto;
+  display: block;
 }