feat(智能柜卡片): 优化智能柜卡片及单元格展示样式

- 在商品图片SVG中添加"小格"文字标识
- 将柜体名称从描述项移至详情按钮文本
- 优化单元格卡片布局，添加虚线分隔线和格口号显示
- 调整单元格操作按钮样式为链接样式并显示商品名称
- 改进单元格信息区域的间距和排版

public/img/product-image.svg

@@ -1,6 +1,8 @@
 <svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784"
         stroke-width="2" />
-                            <text x="50" y="60" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
+    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
         fill="#2E7D32" text-anchor="middle">空闲</text>
+    <text x="50" y="75" font-family="Arial, sans-serif" font-size="12"
+        fill="#2E7D32" text-anchor="middle">小格</text>
 </svg>

src/views/cabinet/smart-cabinet-card/detail.vue

@@ -331,24 +331,37 @@ onMounted(() => {
             <el-col v-for="(item, index) in cellList" :key="item.cellId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
               <el-card class="cell-card" :body-style="{ padding: '8px 10px' }">
                 <div class="card-content">
-                  <el-image :src="item.coverImg || `${IMG_PATH}img/product-image.svg`" class="cell-image"
-                    fit="contain" />
+                  <el-image v-if="item.coverImg" :src="item.coverImg" class="cell-image" fit="contain" />
+                  <svg v-if="!item.coverImg" width="80" height="80" viewBox="0 0 100 100"
+                    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+                    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
+                    <!-- 添加在矩形和文本之间的虚线 -->
+                    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
+                    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+                      text-anchor="middle">空闲</text>
+                    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
+                      text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
+                  </svg>
                   <div class="cell-info">
                     <div class="cell-no">格口号: {{ item.cellNo }}</div>
-                    <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div>
                     <div class="price">价格: {{ item.price }}</div>
                     <div class="stock">库存: {{ item.stock }}</div>
-                    <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div>
+                    <!-- <div class="cell-type">类型: {{ switchCellType(item.cellType) }}</div> -->
                   </div>
+                  <!-- <div class="goods-name">{{ item.goodsId ? item.goodsName : '未配置商品' }}</div> -->
+                </div>
+                <div class="line-num">
+                  <el-divider direction="horizontal" class="vertical-divider"/>
+                  <span class="line-number">{{ item.cellNo }}</span>
                 </div>
                 <div class="action-buttons">
-                  <el-button v-if="cabinetInfo.belongType === 0 && !item.goodsId" type="success"
+                  <el-button v-if="cabinetInfo.belongType === 0 && !item.goodsId" link type="success"
                     @click="handleConfigure(item)" class="cell-btn">
                     商品配置
                   </el-button>
-                  <el-button v-if="cabinetInfo.belongType === 1 || item.goodsId" type="primary"
+                  <el-button v-if="cabinetInfo.belongType === 1 || item.goodsId" link type="primary"
                     @click="handleEditCell(item)" class="cell-btn">
-                    编辑格口
+                    {{ item.goodsName }}
                   </el-button>
                   <!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
                     @click="handleStockConfig(item)">
@@ -441,7 +454,7 @@ onMounted(() => {
     }
 
     .cell-info {
-      padding: 8px 8px 0 8px;
+      padding: 18px 8px 0 8px;
 
       div {
         font-size: 13px;
@@ -460,12 +473,29 @@ onMounted(() => {
     }
   }
 
+  .line-num {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .vertical-divider {
+      margin: 0 0 0 0;
+      width: 85%;
+    }
+
+    .line-number {
+      font-size: 14px;
+      color: #606266;
+      font-weight: 600;
+    }
+  }
+
   .action-buttons {
     display: flex;
     justify-content: center;
     margin-top: auto;
     padding: 8px 0 0 0;
-    border-top: 1px solid var(--el-border-color-light);
+    /* border-top: 1px solid var(--el-border-color-light); */
 
     .cell-btn {
       margin-right: 8px;

src/views/cabinet/smart-cabinet-card/index.vue

@@ -129,8 +129,6 @@ onMounted(() => {
                 <img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
                   class="cabinet-image" />
                 <el-descriptions class="cabinet-info" :column="1">
-                  <el-descriptions-item class="name">名称：{{ item.cabinetName }}
-                  </el-descriptions-item>
                   <el-descriptions-item class="name">模式：{{ getModeText(item.mode) }}
                   </el-descriptions-item>
                   <!-- <div class="type">柜体类型：{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
@@ -145,7 +143,9 @@ onMounted(() => {
                 </el-descriptions>
               </div>
               <el-divider class="divider" />
-              <el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
+              <el-button class="detail-btn" link @click="handleViewDetail(item)">
+                {{ item.cabinetName }}
+              </el-button>
             </el-card>
           </el-col>
         </el-row>
@@ -229,6 +229,10 @@ onMounted(() => {
     border: 0;
     margin-top: auto;
     padding: 8px 0;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
   }
 }