feat(仓库管理): 优化仓库鸟瞰图布局并添加图例

- 在仓库鸟瞰图中添加占用状态图例
- 调整网格布局为两栏显示，优化空间利用率
- 减少网格行数从50到40
- 缩小网格单元格尺寸并移除冗余编码显示
- 添加按钮加载状态控制

klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue

@@ -22,11 +22,22 @@
       </el-card>
     </div>
 
+    <!-- 图例 -->
+    <div class="legend-container">
+      <div class="legend-item">
+        <div class="legend-color normal"></div>
+        <span class="legend-text">正常未占用</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color occupied"></div>
+        <span class="legend-text">已占用</span>
+      </div>
+    </div>
+
     <!-- 分层库位容器 -->
     <div class="layers-container">
       <!-- 遍历每层，渲染 Grid 组件 -->
       <div v-for="(layerData, layer) in layers" :key="layer" class="layer-section">
-        <el-divider content-position="left">第{{ layer }}层库位</el-divider>
         <WarehouseGrid :layer="layer" :layer-data="layerData" />
       </div>
 
@@ -198,9 +209,53 @@ export default {
   }
 }
 
+// 图例样式
+.legend-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin-right: 24px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .legend-color {
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
+      margin-right: 8px;
+      border: 1px solid #e6e6e6;
+    }
+
+    .normal {
+      background-color: #ffffff;
+    }
+
+    .occupied {
+      background-color: #c0c4cc;
+    }
+
+    .legend-text {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+}
+
 // 分层容器样式
 .layers-container {
+  display: flex;
   .layer-section {
+    flex: 1;
+    max-width: 50%;
     margin-bottom: 24px;
   }