From ee13e1bdfe6bb0777bbbfe5d8edda2b8134f8b39 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Fri, 25 Sep 2026 11:50:35 +0000
Subject: [PATCH] =?UTF-8?q?feat(view):=20=E5=95=86=E5=93=81=E5=8D=A1?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E8=A7=86=E8=A7=89=E5=8D=87=E7=BA=A7=EF=BC=8C?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=BC=80=E5=85=B3=E7=A7=BB=E8=87=B3=E5=9B=BE?=
 =?UTF-8?q?=E9=9D=A2=E5=8F=B3=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 extend/base/admin/view/mall/goods/index.html | 159 ++++++++++++-------
 1 file changed, 100 insertions(+), 59 deletions(-)

diff --git a/extend/base/admin/view/mall/goods/index.html b/extend/base/admin/view/mall/goods/index.html
index 2d336b0..afdafa5 100644
--- a/extend/base/admin/view/mall/goods/index.html
+++ b/extend/base/admin/view/mall/goods/index.html
@@ -23,7 +23,9 @@
        {{ }} 原生插值（自动转义）；处理函数内不得修改渲染上下文数据（冻结契约）
      - 事件无需自行绑定：操作按钮与 switch 经页面级委托和 form 事件天然生效
      取值通道（对齐官方范例契约）：
-     - status 开关走 _cells（switch 渲染器产物）+ v-html，切换由页面级委托承接
+     - status 开关走 _cells（switch 渲染器产物）+ v-html，悬浮于图面右上角
+       （absolute 半透明白底小容器），不占正文行；切换由页面级委托承接
+       （.layui-form-switch 美化层在豁免名单内），容器只调外间距不改 DOM 结构
      - logo 大图绕开渲染器直绑原始字段（渲染器内联缩略图样式不适合大图）；
        占位图标层常驻其下，img 加载失败时 @error 仅隐藏 img 露出占位（只操作
        DOM，不改模板数据），无 logo 时同样显示占位
@@ -36,61 +38,73 @@
              :data-id="d.id"
              :data-table-id="list.tableId"
              :class="{'ua-data-card-checked': d._checked, 'ua-data-card-disabled': d._disabled}">
-            <!-- 头部：商品大图（宽度撑满、固定高裁切不变形），无图或 404 时
-                 降级为占位图标；右上勾位图标按行选中态显示 -->
+            <!-- 图区：4:3 商品大图（撑满裁切不变形、圆角随卡片），无图或 404 时
+                 降级为占位图标；右上角悬浮状态开关（半透明白底小容器），
+                 左上角勾位图标按行选中态显示 -->
             <div class="goodscard-cover">
                 <span class="goodscard-img-empty" title="未设置图片"><i class="layui-icon layui-icon-picture"></i></span>
                 <img v-if="d.logo" :src="d.logo" :alt="d.title" class="goodscard-img"
                      @error="$event.target.style.display = 'none'">
+                <div class="goodscard-status" v-html="d._cells.status"></div>
                 <i v-if="d._checked" class="layui-icon layui-icon-ok-circle goodscard-check"></i>
             </div>
-            <!-- 主体：名称加粗 + 分类 + 价格层级（折扣价红大字、市场价灰删除线）
-                 + 库存徽标（stock<20 红"缺货"，否则绿"库存 N"）+ 销量小字
-                 + 状态开关（_cells.status 为 switch 渲染器输出的原生 checkbox） -->
+            <!-- 主体：名称（600 字重、最多两行截断）+ 分类徽标与销量同排 + 价格
+                 层级（折扣价红大字、市场价灰删除线）+ 库存徽标（stock<20 红
+                 "缺货"，否则绿"库存 N"） -->
             <div class="goodscard-body">
                 <div class="goodscard-title" :title="d.title">{{ d.title }}</div>
-                <div class="goodscard-cate">
-                    <i class="layui-icon layui-icon-tags"></i>
-                    {{ d.cate && d.cate.title ? d.cate.title : '未分类' }}
-                </div>
-                <div class="goodscard-price-row">
-                    <span class="goodscard-price">￥{{ d.discount_price }}</span>
-                    <span v-if="parseFloat(d.market_price) > 0" class="goodscard-market-price">￥{{ d.market_price }}</span>
-                </div>
-                <div class="goodscard-flag-row">
-                    <span v-if="d.stock < 20" class="goodscard-stock goodscard-stock-out">缺货</span>
-                    <span v-else class="goodscard-stock goodscard-stock-in">库存 {{ d.stock }}</span>
+                <div class="goodscard-meta">
+                    <span class="goodscard-cate">{{ d.cate && d.cate.title ? d.cate.title : '未分类' }}</span>
                     <span class="goodscard-sales">销量 {{ d.sales }}</span>
                 </div>
-                <div class="goodscard-status" v-html="d._cells.status"></div>
+                <div class="goodscard-price-row">
+                    <span class="goodscard-price"><em>￥</em>{{ d.discount_price }}</span>
+                    <span v-if="parseFloat(d.market_price) > 0" class="goodscard-market-price">￥{{ d.market_price }}</span>
+                </div>
+                <div class="goodscard-stock-row">
+                    <span v-if="d.stock < 20" class="goodscard-stock goodscard-stock-out">缺货</span>
+                    <span v-else class="goodscard-stock goodscard-stock-in">库存 {{ d.stock }}</span>
+                </div>
             </div>
             <!-- 底部：创建时间 + 操作按钮组（_operatHtml 为操作列渲染产物：
                  编辑/入库/详情/删除，已按 data-auth-* 裁剪权限），点击行为由
                  框架页面级委托承接 -->
             <div class="ua-data-card-footer goodscard-footer">
-                <span class="ua-data-card-time"><i class="layui-icon layui-icon-time"></i> {{ d.create_time }}</span>
+                <span class="ua-data-card-time goodscard-time">{{ d.create_time }}</span>
                 <div class="ua-data-card-operat" v-html="d._operatHtml"></div>
             </div>
         </div>
     </div>
 </script>
 
-<!-- 商品卡片形态页面级样式（示例边界：网格布局、大图封面、价格/徽标为本页
-     自建，卡片基础观感——边框/白底/hover/选中描边/禁用/操作按钮排布——复用
-     public.css 的 .ua-data-card 族，不修改公共样式） -->
+<!-- 商品卡片形态页面级样式（示例边界：网格布局、大图封面、悬浮开关、价格/
+     徽标为本页自建，卡片基础观感按统一设计语言在本页覆盖——圆角 8px、边框
+     #eee、hover 投影、选中主题蓝描边浅蓝底；操作按钮排布仍复用 public.css
+     的 .ua-data-card 族，不修改公共样式） -->
 <style>
     .goodscard-list {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
         gap: 12px;
     }
     .goodscard {
         padding: 0;
         overflow: hidden;
+        border: 1px solid #eee;
+        border-radius: 8px;
+    }
+    .goodscard:hover {
+        border-color: #eee;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
+    }
+    .goodscard.ua-data-card-checked {
+        border-color: #1e9fff;
+        box-shadow: inset 0 0 0 1px #1e9fff;
+        background-color: rgba(30, 159, 255, 0.05);
     }
     .goodscard-cover {
         position: relative;
-        height: 140px;
+        aspect-ratio: 4 / 3;
         background-color: #f6f6f6;
         border-bottom: 1px solid #f2f2f2;
     }
@@ -103,8 +117,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #c2c2c2;
-        font-size: 32px;
+        color: #d5d5d5;
+        font-size: 36px;
     }
     .goodscard-img {
         position: relative;
@@ -113,85 +127,112 @@
         height: 100%;
         object-fit: cover;
     }
+    .goodscard-status {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        z-index: 2;
+        padding: 2px 6px;
+        background-color: rgba(255, 255, 255, 0.85);
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+    }
+    .goodscard-status .layui-form-switch {
+        margin: 0;
+    }
     .goodscard-check {
         position: absolute;
-        top: 6px;
-        right: 6px;
-        color: rgb(22, 183, 119);
+        top: 8px;
+        left: 8px;
+        color: #1e9fff;
         font-size: 22px;
         background-color: #fff;
         border-radius: 50%;
     }
     .goodscard-body {
         flex: 1;
-        padding: 8px 12px 0;
+        padding: 10px 12px 12px;
     }
     .goodscard-title {
+        display: -webkit-box;
+        overflow: hidden;
+        min-height: 40px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+    }
+    .goodscard-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 6px;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-weight: bold;
-        line-height: 22px;
     }
     .goodscard-cate {
-        margin-top: 2px;
+        flex: none;
+        max-width: 70%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: #999;
+        padding: 2px 8px;
+        background-color: #f5f5f5;
+        border-radius: 10px;
+        color: #666;
         font-size: 12px;
-        line-height: 18px;
+        line-height: 16px;
     }
-    .goodscard-cate .layui-icon {
+    .goodscard-sales {
+        flex: none;
+        color: #999;
         font-size: 12px;
     }
     .goodscard-price-row {
         display: flex;
         align-items: baseline;
-        margin-top: 6px;
+        margin-top: 8px;
     }
     .goodscard-price {
         color: #ff5722;
         font-size: 18px;
-        font-weight: bold;
+        font-weight: 600;
+    }
+    .goodscard-price em {
+        font-style: normal;
+        font-size: 14px;
     }
     .goodscard-market-price {
         margin-left: 8px;
-        color: #c2c2c2;
+        color: #999;
         font-size: 12px;
         text-decoration: line-through;
     }
-    .goodscard-flag-row {
+    .goodscard-stock-row {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        margin-top: 6px;
+        margin-top: 8px;
     }
     .goodscard-stock {
-        padding: 0 6px;
-        border-radius: 2px;
+        padding: 2px 8px;
+        border-radius: 10px;
         font-size: 12px;
-        line-height: 18px;
+        line-height: 16px;
     }
     .goodscard-stock-out {
         color: #ff5722;
-        background-color: rgba(255, 87, 34, 0.1);
+        background-color: rgba(255, 87, 34, 0.08);
     }
     .goodscard-stock-in {
         color: rgb(22, 183, 119);
-        background-color: rgba(22, 183, 119, 0.1);
-    }
-    .goodscard-sales {
-        color: #999;
-        font-size: 12px;
-    }
-    .goodscard-status {
-        margin-top: 6px;
-        text-align: right;
+        background-color: rgba(22, 183, 119, 0.08);
     }
     .goodscard-footer {
-        margin-top: 8px;
-        padding: 8px 12px 10px;
+        margin-top: 0;
+        padding: 8px 12px;
+    }
+    .goodscard-time .layui-icon {
+        font-size: 12px;
     }
     @media (max-width: 768px) {
         .goodscard-list {