From 1adaa388932582478b49f6e06963a7999c82244b Mon Sep 17 00:00:00 2001
From: DXC <duxingchen@iris-rs.cn>
Date: Fri, 6 Mar 2026 17:07:38 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=BA=93=E4=BD=8D?=
 =?UTF-8?q?=E6=A0=91=E6=8A=98=E5=8F=A0=E7=8A=B6=E6=80=81=E5=8F=8A=E4=B8=8B?=
 =?UTF-8?q?=E9=92=BB=E9=80=89=E6=8B=A9=E5=99=A8=E7=82=B9=E5=87=BB=E7=83=AD?=
 =?UTF-8?q?=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/WarehouseSelector.vue      | 79 +++++++++++++++----
 inventory-web/src/views/dashboard/index.vue   |  2 +-
 2 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/inventory-web/src/components/WarehouseSelector.vue b/inventory-web/src/components/WarehouseSelector.vue
index 1a1bea6..609ba34 100644
--- a/inventory-web/src/components/WarehouseSelector.vue
+++ b/inventory-web/src/components/WarehouseSelector.vue
@@ -64,24 +64,33 @@
               v-for="item in currentList"
               :key="item.id"
               class="location-item"
-              @click="handleSelect(item)"
             >
-              <div class="item-left">
-                <el-icon><Location /></el-icon>
+              <!-- 左侧热区：点击进入下级或选中 -->
+              <div
+                class="item-main"
+                :class="{ 'has-children': item.children && item.children.length > 0 }"
+                @click="handleItemClick(item)"
+              >
+                <el-icon class="item-icon"><Location /></el-icon>
                 <span class="item-name">{{ item.name }}</span>
+                <el-icon v-if="item.children && item.children.length > 0" class="item-arrow">
+                  <ArrowRight />
+                </el-icon>
               </div>
-              <div class="item-right">
+              <!-- 右侧操作区 -->
+              <div class="item-actions">
+                <el-tag v-if="!item.children || item.children.length === 0" type="info" size="small">
+                  末级
+                </el-tag>
                 <el-button
-                  v-if="item.children && item.children.length > 0"
+                  v-else
                   type="primary"
-                  link
                   size="small"
                   @click.stop="handleDrillDown(item)"
                 >
                   进入下级
                   <el-icon><ArrowRight /></el-icon>
                 </el-button>
-                <el-tag v-else type="info" size="small">末级</el-tag>
               </div>
             </li>
           </ul>
@@ -92,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { ArrowDown, ArrowLeft, ArrowRight, Location } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 
@@ -173,6 +182,17 @@ const handleDrillDown = (item: WarehouseItem) => {
   currentPath.value.push(item)
 }
 
+// 点击列表项 - 左侧热区逻辑
+const handleItemClick = (item: WarehouseItem) => {
+  if (item.children && item.children.length > 0) {
+    // 有子节点：进入下一级
+    handleDrillDown(item)
+  } else {
+    // 末级：直接选中
+    handleSelect(item)
+  }
+}
+
 // 选择当前项
 const handleSelect = (item: WarehouseItem) => {
   emit('update:modelValue', item.full_path)
@@ -234,7 +254,7 @@ const handleSelect = (item: WarehouseItem) => {
 }
 
 .selector-body {
-  max-height: 300px;
+  max-height: 320px;
   overflow-y: auto;
 }
 
@@ -254,33 +274,62 @@ const handleSelect = (item: WarehouseItem) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  cursor: pointer;
+  border-bottom: 1px solid #f0f0f0;
   transition: background 0.2s;
 }
 
+.location-item:last-child {
+  border-bottom: none;
+}
+
 .location-item:hover {
   background: #f5f7fa;
 }
 
-.item-left {
+/* 左侧主热区 - 占80%宽度 */
+.item-main {
+  flex: 1;
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 14px 12px;
+  cursor: pointer;
+  min-width: 0;
 }
 
-.item-left .el-icon {
+.item-main.has-children {
+  cursor: pointer;
+}
+
+.item-main:hover {
+  background: rgba(64, 158, 255, 0.08);
+}
+
+.item-icon {
   color: #409eff;
+  flex-shrink: 0;
 }
 
 .item-name {
   font-size: 14px;
   color: #303133;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.item-right {
+.item-arrow {
+  color: #c0c4cc;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+/* 右侧操作区 */
+.item-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  padding-right: 12px;
+  flex-shrink: 0;
 }
 </style>
diff --git a/inventory-web/src/views/dashboard/index.vue b/inventory-web/src/views/dashboard/index.vue
index 0c13d0b..0cbd20a 100644
--- a/inventory-web/src/views/dashboard/index.vue
+++ b/inventory-web/src/views/dashboard/index.vue
@@ -78,7 +78,7 @@
             node-key="id"
             :props="treeProps"
             :expand-on-click-node="false"
-            :default-expand-all="true"
+            :default-expand-all="false"
           >
             <template #default="{ node, data }">
               <div class="tree-node">