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,20 +1,19 @@
-<view class="clothes-card {{selected ? 'selected' : ''}}" bindtap="onTap">
-  <view class="clothes-img">
+<!-- v2 衣物瓦片：无卡片容器，图下两行（衬线品名 + 灰色属性行） -->
+<view class="tile {{selected ? 'is-picked' : ''}}" bindtap="onTap">
+  <view class="tile-img">
    <image
      wx:if="{{item.processed_image}}"
-      class="clothes-img-img"
+      class="pic"
      src="{{item.processed_image}}"
      mode="aspectFill"
      lazy-load
    />
-    <view wx:else class="clothes-placeholder">
-      <view class="icon icon-hanger"></view>
+    <view wx:else class="ph icon icon-hanger"></view>
+    <view wx:if="{{statusText}}" class="tile-flag {{statusType === 'ink' ? 'is-ink' : ''}}">{{statusText}}</view>
+    <view wx:if="{{selectable}}" class="tile-check">
+      <view class="icon icon-check"></view>
    </view>
-    <view wx:if="{{statusText}}" class="clothes-status tag tag-{{statusType}}">{{statusText}}</view>
-  </view>
-  <view class="clothes-name">{{item.name || '未命名衣物'}}</view>
-  <view class="clothes-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}{{item.color_main ? ' · ' + item.color_main : ''}}</view>
-  <view wx:if="{{selectable}}" class="clothes-check {{selected ? 'on' : ''}}">
-    <view wx:if="{{selected}}" class="icon icon-check"></view>
  </view>
+  <view class="tile-name">{{item.name || '未命名衣物'}}</view>
+  <view class="tile-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}{{item.color_main ? ' · ' + item.color_main : ''}}</view>
 </view>
@@ -1,91 +1,5 @@
-.clothes-card {
+/** 衣物瓦片：视觉全部来自全局令牌与 .tile-* 通用类，此处只做定位兜底 **/
+.tile {
  position: relative;
-  background: #fff;
-  border-radius: 32rpx;
-  padding: 20rpx;
-  box-sizing: border-box;
-  border: 2rpx solid transparent;
-}
-
-.clothes-card.selected {
-  border-color: #007AFF;
-}
-
-.clothes-img {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
-  background: #F2F2F7;
-  border-radius: 24rpx;
-  overflow: hidden;
-  margin-bottom: 16rpx;
-}
-
-.clothes-img-img {
-  width: 100%;
-  height: 100%;
-}
-
-.clothes-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #C7C7CC;
-}
-
-.clothes-placeholder .icon {
-  width: 72rpx;
-  height: 72rpx;
-}
-
-.clothes-status {
-  position: absolute;
-  top: 12rpx;
-  right: 12rpx;
-}
-
-.clothes-name {
-  font-size: 26rpx;
-  font-weight: 500;
-  color: #1C1C1E;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.clothes-sub {
-  font-size: 22rpx;
-  color: #8E8E93;
-  margin-top: 4rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.clothes-check {
-  position: absolute;
-  top: 32rpx;
-  right: 32rpx;
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 50%;
-  border: 2rpx solid #C7C7CC;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
-.clothes-check.on {
-  background: #007AFF;
-  border-color: #007AFF;
-  color: #fff;
-}
-
-.clothes-check .icon {
-  width: 28rpx;
-  height: 28rpx;
+  display: block;
 }