From 1e79005440fc41a10c00b293ffae0268552d8e7a Mon Sep 17 00:00:00 2001
From: 2256907009 <2256907009@qq.com>
Date: Tue, 20 Jan 2026 18:25:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/AdminLayout.vue     | 219 ++++++++++++++++++----
 src/components/layout/SidebarMenuItem.vue |  61 +++---
 src/views/user/UserDetail.vue             |  30 ---
 src/views/user/UserList.vue               |   7 +-
 4 files changed, 223 insertions(+), 94 deletions(-)

diff --git a/src/components/layout/AdminLayout.vue b/src/components/layout/AdminLayout.vue
index 7eeec0b..fbf3f94 100644
--- a/src/components/layout/AdminLayout.vue
+++ b/src/components/layout/AdminLayout.vue
@@ -542,77 +542,232 @@ onUnmounted(() => {
 /* Element Plus 菜单项样式优化 */
 :deep(.el-menu) {
   border-right: none;
+  padding: 8px 0;
 }
 
+/* 一级菜单标题（有子菜单） */
 :deep(.el-sub-menu__title) {
-  height: 50px;
-  line-height: 50px;
-  margin: 0;
-  padding: 0 20px;
-  transition: background-color 0.2s ease;
+  height: 48px;
+  line-height: 48px;
+  margin: 2px 8px;
+  padding: 0 16px !important;
+  border-radius: 6px;
+  transition: all 0.2s ease;
   color: #34495e !important;
+  font-weight: 500;
+  font-size: 14px;
 }
 
 :deep(.el-sub-menu__title:hover) {
-  background-color: #f8f9fa !important;
+  background-color: #f5f7fa !important;
   color: #2c3e50 !important;
 }
 
-:deep(.el-menu-item) {
-  height: 50px;
-  line-height: 50px;
-  margin: 0;
-  padding: 0 20px;
-  transition: background-color 0.2s ease;
+/* 一级菜单项（无子菜单） */
+:deep(.sidebar-menu > .el-menu-item) {
+  height: 48px;
+  line-height: 48px;
+  margin: 2px 8px;
+  padding: 0 16px !important;
+  border-radius: 6px;
+  transition: all 0.2s ease;
   color: #34495e !important;
+  font-weight: 500;
+  font-size: 14px;
 }
 
-:deep(.el-menu-item:hover) {
-  background-color: #f8f9fa !important;
+:deep(.sidebar-menu > .el-menu-item:hover) {
+  background-color: #f5f7fa !important;
   color: #2c3e50 !important;
 }
 
-:deep(.el-menu-item.is-active) {
-  background-color: rgba(44, 62, 80, 0.1) !important;
+:deep(.sidebar-menu > .el-menu-item.is-active) {
+  background-color: rgba(44, 62, 80, 0.08) !important;
   color: #2c3e50 !important;
   font-weight: 600;
-  position: relative;
 }
 
-:deep(.el-menu-item.is-active::before) {
+:deep(.sidebar-menu > .el-menu-item.is-active::before) {
   content: '';
   position: absolute;
   left: 0;
-  top: 0;
+  top: 50%;
+  transform: translateY(-50%);
   width: 3px;
-  height: 100%;
+  height: 24px;
+  background-color: #2c3e50;
+  border-radius: 0 2px 2px 0;
+}
+
+/* 展开的一级菜单标题 */
+:deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
+  color: #2c3e50 !important;
+  font-weight: 600;
+  background-color: #f5f7fa !important;
+}
+
+/* 二级菜单容器 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu) {
+  background-color: transparent !important;
+  padding: 4px 0 8px 0;
+}
+
+/* 二级菜单项 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item) {
+  height: 40px;
+  line-height: 40px;
+  margin: 2px 8px 2px 16px;
+  padding: 0 16px 0 28px !important;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #606266 !important;
+  background-color: transparent !important;
+  position: relative;
+  font-weight: 400;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item::before) {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 4px;
+  background-color: #c0c4cc;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item:hover) {
+  background-color: #f5f7fa !important;
+  color: #2c3e50 !important;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item:hover::before) {
+  background-color: #7f8c8d;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active) {
+  background-color: rgba(44, 62, 80, 0.08) !important;
+  color: #2c3e50 !important;
+  font-weight: 500;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active::before) {
+  width: 6px;
+  height: 6px;
   background-color: #2c3e50;
 }
 
-:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+/* 二级菜单中的子菜单标题（三级菜单父级） */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title) {
+  height: 40px;
+  line-height: 40px;
+  margin: 2px 8px 2px 16px;
+  padding: 0 16px 0 28px !important;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #606266 !important;
+  font-weight: 400;
+  position: relative;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title::before) {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 4px;
+  background-color: #c0c4cc;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title:hover) {
+  background-color: #f5f7fa !important;
   color: #2c3e50 !important;
-  background-color: #f8f9fa !important;
 }
 
-:deep(.el-sub-menu .el-menu) {
-  background-color: #fafbfc !important;
-  margin: 0;
-  padding: 0;
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-sub-menu__title:hover::before) {
+  background-color: #7f8c8d;
 }
 
-:deep(.el-sub-menu .el-menu-item) {
-  margin: 0;
-  padding-left: 48px !important;
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu.is-opened > .el-sub-menu__title) {
+  color: #2c3e50 !important;
+  font-weight: 500;
+  background-color: #f5f7fa !important;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu.is-opened > .el-sub-menu__title::before) {
+  width: 6px;
+  height: 6px;
+  background-color: #2c3e50;
+}
+
+/* 三级菜单容器 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu) {
   background-color: transparent !important;
+  padding: 4px 0;
 }
 
-:deep(.el-sub-menu .el-menu-item.is-active) {
-  background-color: rgba(44, 62, 80, 0.12) !important;
+/* 三级菜单项 */
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item) {
+  height: 36px;
+  line-height: 36px;
+  margin: 2px 8px 2px 28px;
+  padding: 0 16px 0 24px !important;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #909399 !important;
+  background-color: transparent !important;
+  position: relative;
+  font-weight: 400;
 }
 
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item::before) {
+  content: '-';
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #c0c4cc;
+  font-size: 12px;
+  transition: all 0.2s ease;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item:hover) {
+  background-color: #f5f7fa !important;
+  color: #606266 !important;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item:hover::before) {
+  color: #7f8c8d;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active) {
+  background-color: rgba(44, 62, 80, 0.08) !important;
+  color: #2c3e50 !important;
+  font-weight: 500;
+}
+
+:deep(.sidebar-menu > .el-sub-menu > .el-menu > .el-sub-menu > .el-menu > .el-menu-item.is-active::before) {
+  content: '•';
+  color: #2c3e50;
+  font-size: 14px;
+}
+
+/* 子菜单箭头图标 */
 :deep(.el-sub-menu__icon-arrow) {
+  color: #909399 !important;
+  transition: all 0.2s ease;
+  font-size: 12px;
+}
+
+:deep(.el-sub-menu:hover > .el-sub-menu__title .el-sub-menu__icon-arrow) {
   color: #7f8c8d !important;
-  transition: transform 0.2s ease;
 }
 
 :deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
diff --git a/src/components/layout/SidebarMenuItem.vue b/src/components/layout/SidebarMenuItem.vue
index b990087..d45652f 100644
--- a/src/components/layout/SidebarMenuItem.vue
+++ b/src/components/layout/SidebarMenuItem.vue
@@ -1,22 +1,25 @@
 <template>
   <el-sub-menu v-if="hasChildren" :index="menu.path">
     <template #title>
-      <el-icon v-if="menu.icon || menu.meta?.icon">
+      <el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
         <component :is="menu.icon || menu.meta?.icon" />
       </el-icon>
-      <span>{{ menu.title || menu.meta?.title }}</span>
+      <span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
     </template>
     <sidebar-menu-item 
       v-for="child in menu.children" 
       :key="child.path" 
-      :menu="child" 
+      :menu="child"
+      :level="level + 1"
     />
   </el-sub-menu>
   <el-menu-item v-else :index="menu.path">
-    <el-icon v-if="menu.icon || menu.meta?.icon">
+    <el-icon v-if="menu.icon || menu.meta?.icon" class="menu-icon">
       <component :is="menu.icon || menu.meta?.icon" />
     </el-icon>
-    <template #title>{{ menu.title || menu.meta?.title }}</template>
+    <template #title>
+      <span class="menu-title">{{ menu.title || menu.meta?.title }}</span>
+    </template>
   </el-menu-item>
 </template>
 
@@ -29,6 +32,10 @@ const props = defineProps({
   menu: {
     type: Object,
     required: true
+  },
+  level: {
+    type: Number,
+    default: 1
   }
 })
 
@@ -39,49 +46,45 @@ const hasChildren = computed(() => {
 </script>
 
 <style scoped>
-.el-icon {
-  margin-right: 12px;
+/* 菜单图标样式 */
+.menu-icon {
+  margin-right: 10px;
   width: 20px;
   height: 20px;
   text-align: center;
   color: #7f8c8d;
   transition: color 0.2s ease;
   font-size: 18px;
+  flex-shrink: 0;
 }
 
-.el-menu-item .el-icon, :deep(.el-sub-menu__title .el-icon) {
+/* 菜单标题 */
+.menu-title {
+  font-size: inherit;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 图标交互状态 */
+.el-menu-item .menu-icon, 
+:deep(.el-sub-menu__title .menu-icon) {
   color: #7f8c8d !important;
   transition: color 0.2s ease;
 }
 
-.el-menu-item:hover .el-icon, 
-:deep(.el-sub-menu__title:hover .el-icon) {
+.el-menu-item:hover .menu-icon, 
+:deep(.el-sub-menu__title:hover .menu-icon) {
   color: #34495e !important;
 }
 
 /* 激活菜单项图标 */
-.el-menu-item.is-active .el-icon {
+.el-menu-item.is-active .menu-icon {
   color: #2c3e50 !important;
 }
 
-:deep(.el-sub-menu.is-active > .el-sub-menu__title .el-icon) {
+:deep(.el-sub-menu.is-opened > .el-sub-menu__title .menu-icon) {
   color: #2c3e50 !important;
 }
-
-/* 菜单文字样式 */
-.el-menu-item span, :deep(.el-sub-menu__title span) {
-  font-size: 14px;
-  letter-spacing: 0.2px;
-}
-
-/* 子菜单项样式优化 */
-:deep(.el-sub-menu .el-menu-item) {
-  font-size: 13px;
-  padding-left: 48px !important;
-}
-
-:deep(.el-sub-menu .el-menu-item .el-icon) {
-  font-size: 16px;
-  margin-right: 10px;
-}
 </style> 
\ No newline at end of file
diff --git a/src/views/user/UserDetail.vue b/src/views/user/UserDetail.vue
index a9afbab..fb386d7 100644
--- a/src/views/user/UserDetail.vue
+++ b/src/views/user/UserDetail.vue
@@ -251,37 +251,7 @@
         </div>
       </div>
 
-      <!-- 余额管理区域 -->
-      <el-card class="balance-card" shadow="never" style="margin-top: 24px;">
-        <template #header>
-          <div class="card-header">
-            <span class="title"><el-icon><Wallet /></el-icon> 余额管理</span>
-            <el-button type="primary" size="small" @click="handleBalanceManage">前往余额管理</el-button>
-          </div>
-        </template>
-        <div class="balance-content">
-          <div class="balance-overview">
-            <div class="balance-item">
-              <div class="balance-label">账户余额</div>
-              <div class="balance-value primary">¥{{ (userBalance.balance / 100).toFixed(2) }}</div>
-            </div>
-            <div class="balance-item">
-              <div class="balance-label">冻结余额</div>
-              <div class="balance-value warning">¥{{ (userBalance.frozen_balance / 100).toFixed(2) }}</div>
-            </div>
-            <div class="balance-item">
-              <div class="balance-label">累计充值</div>
-              <div class="balance-value success">¥{{ (userBalance.total_recharge / 100).toFixed(2) }}</div>
-            </div>
-            <div class="balance-item">
-              <div class="balance-label">累计消费</div>
-              <div class="balance-value danger">¥{{ (userBalance.total_consume / 100).toFixed(2) }}</div>
-            </div>
-          </div>
-         
       
-        </div>
-      </el-card>
     </div>
 
     <!-- 编辑用户对话框 -->
diff --git a/src/views/user/UserList.vue b/src/views/user/UserList.vue
index a716223..d252b2d 100644
--- a/src/views/user/UserList.vue
+++ b/src/views/user/UserList.vue
@@ -26,6 +26,9 @@
             />
           </div>
           <div class="search-buttons">
+            <el-button type="warning" @click="handleJumpToUser">
+              <el-icon><Position /></el-icon><span class="btn-text">跳转</span>
+            </el-button>
             <el-button type="primary" @click="handleQuery">
               <el-icon><Search /></el-icon><span class="btn-text">查询</span>
             </el-button>
@@ -35,9 +38,7 @@
             <el-button type="success" @click="fetchUserList">
               <el-icon><Refresh /></el-icon><span class="btn-text">刷新</span>
             </el-button>
-            <el-button type="warning" @click="handleJumpToUser">
-              <el-icon><Position /></el-icon><span class="btn-text">跳转</span>
-            </el-button>
+        
           </div>
         </div>
         <!-- 第二行：操作栏 -->