feat(租用柜格): 添加不同尺寸格口的SVG图标并更新显示逻辑

替换原有单一格口图标为不同尺寸的专用图标
添加格口类型判断函数switchCellImage
更新搜索框提示文本和不可租用状态的显示

src/pages/index/components/renting-cabinet-container.vue

@@ -99,6 +99,15 @@ function handleCheckout() {
 function showCartDetail() {
   showCartPopup.value = true;
 }
+function switchCellImage(cellType: number) {
+  switch (cellType) {
+    case 1: return '/static/svg/product-image-small.svg';
+    case 2: return '/static/svg/product-image-medium.svg';
+    case 3: return '/static/svg/product-image-large.svg';
+    case 4: return '/static/svg/product-image-super-large.svg';
+    default: return '/static/svg/product-image-unknow.svg';
+  }
+}
 </script>
 
 <template>
@@ -116,13 +125,13 @@ function showCartDetail() {
     <!-- 右侧可租用格口列表 -->
     <view class="product-list">
       <view class="search-wrapper">
-        <input v-model="searchQuery" placeholder="搜索格口号或柜机名称" class="search-box" />
+        <input v-model="searchQuery" placeholder="搜索格口号" class="search-box" />
       </view>
       <scroll-view scroll-y class="category-section">
         <view v-for="cell in filteredRentingCells" :key="cell.cellId" class="product-item">
           <view class="product-info-wrapper">
             <view class="product-image-wrapper">
-              <image :src="PLACEHOLDER_IMAGE_URL" class="product-image">
+              <image :src="switchCellImage(cell.cellType)" class="product-image">
                 <!-- 已被占用或故障的格口显示 '不可租用' -->
                 <view v-if="cell.isRented === 1 || cell.usageStatus === 2 || cell.availableStatus === 2" class="sold-out-overlay">
                   <text class="sold-out-text">不可租用</text>
@@ -140,7 +149,10 @@ function showCartDetail() {
                 <view v-if="cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1" class="stock-count">
                   可租用
                 </view>
-                <view class="cart-actions">
+                <view v-else class="stock-count">
+                  不可租用
+                </view>
+                <view v-if="cell.isRented === 0 && cell.usageStatus === 1 && cell.availableStatus === 1" class="cart-actions">
                   <!-- 数量减按钮：如果已在购物车，则显示 -->
                   <button v-if="getRentingCartItemCount(cell.cellId) > 0" size="mini" class="cart-btn minus-btn" @click.stop="handleRemoveFromCart(cell.cellId)">-</button>
                   <!-- 数量显示：0或1 -->
@@ -239,7 +251,6 @@ function showCartDetail() {
 }
 
 .search-box {
-  width: 100%;
   padding: 8px 12px;
   background: #f5f5f5;
   border-radius: 20px;

src/static/svg/product-image-large.svg

@@ -0,0 +1,10 @@
+<svg 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">大格</text>
+</svg>

src/static/svg/product-image-medium.svg

@@ -0,0 +1,10 @@
+<svg 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">中格</text>
+</svg>

src/static/svg/product-image-small.svg

@@ -0,0 +1,10 @@
+<svg 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">小格</text>
+</svg>

src/static/svg/product-image-super-large.svg

@@ -0,0 +1,10 @@
+<svg 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">超大格</text>
+</svg>

src/static/svg/product-image-unknow.svg

@@ -0,0 +1,10 @@
+<svg 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"></text>
+</svg>

src/static/svg/product-image.svg

@@ -1,6 +0,0 @@
-<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"
-                                fill="#2E7D32" text-anchor="middle">空闲</text>
-                        </svg>