feat(储物柜): 添加库存显示功能

在储物柜列表中新增库存显示功能，当库存为0时，图片会变为灰度显示，并在图片右下角显示库存数量。此功能帮助用户更直观地了解储物柜的库存情况。

src/common/apis/cabinet/type.ts

@@ -8,6 +8,7 @@ export interface CabinetDetailDTO {
 export interface CellInfoDTO {
   cellId: number
   pinNo: number
+  stock: number
   product?: ProductInfoDTO
 }
 

src/pages/cabinet/index.vue

@@ -7,10 +7,15 @@
         <div class="product-list">
             <van-cell v-for="locker in lockerList" :key="locker.lockerId" class="product-item">
                 <template #icon>
+                    <div class="image-container">
                         <van-image width="80" height="80"
                             :src="locker.coverImg ? locker.coverImg : `${publicPath}` + 'img/product-image.svg'" fit="cover"
-                        radius="4" class="product-image">
+                            radius="4" class="product-image" :style="{ filter: locker.stock === 0 ? 'grayscale(100%)' : 'none' }">
                         </van-image>
+                        <div v-if="locker.stock >= 0" class="stock-overlay">
+                            库存: {{ locker.stock }}
+                        </div>
+                    </div>
                     <!-- <div v-else class="status-overlay">
                         <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"
@@ -77,6 +82,7 @@ interface CabinetItem {
 interface LockerItem {
     lockerId: number
     lockerNumber: number
+    stock: number
     status: 0 | 1
     statusClass: 'available' | 'occupied'
     goodsName?: string
@@ -109,6 +115,7 @@ const updateLockerList = (cabinet: CabinetDetailDTO) => {
     lockerList.value = cabinet.cells.map(cell => ({
         lockerId: cell.cellId,
         lockerNumber: cell.pinNo,
+        stock: cell.stock,
         status: cell.product ? 1 : 0,
         statusClass: cell.product ? 'occupied' : 'available',
         goodsName: cell.product?.goodsName,
@@ -152,6 +159,24 @@ loadCabinetDetail()
 </script>
 
 <style lang="scss" scoped>
+.image-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stock-overlay {
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
 .cabinet-container {
     display: flex;
     height: calc(100vh - var(--van-tabbar-height));