优化

src/assets/styles/sidebar.scss

@@ -91,11 +91,12 @@
 
     // 暗色主题样式
     & .theme-dark {
-      .is-active > .el-sub-menu__title {
+      // 父菜单在子菜单选中时不高亮（只高亮子菜单项）
+      .el-sub-menu.is-active > .el-sub-menu__title {
         color: vars.$base-menu-color-active !important;
-        background-color: rgba(255, 255, 255, 0.25) !important;
+        background-color: transparent !important;
-        font-weight: 600;
+        font-weight: normal !important;
-        box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
+        box-shadow: none !important;
       }
 
       .el-menu-item.is-active {
@@ -155,11 +156,12 @@
         }
       }
 
-      .is-active > .el-sub-menu__title {
+      // 父菜单在子菜单选中时不高亮（只高亮子菜单项）
-        color: vars.$menuLightActiveText !important;
+      .el-sub-menu.is-active > .el-sub-menu__title {
-        background-color: vars.$menuLightActiveBg !important;
+        color: vars.$menuLightText !important;
-        font-weight: 700;
+        background-color: transparent !important;
-        box-shadow: inset 0 0 10px rgba(22, 119, 255, 0.08);
+        font-weight: normal !important;
+        box-shadow: none !important;
       }
 
       // 嵌套菜单项样式
@@ -229,6 +231,14 @@
         box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
       }
     }
+
+    // 暗色主题：父菜单在子菜单选中时不高亮
+    & .theme-dark .el-sub-menu.is-active > .el-sub-menu__title {
+      color: vars.$base-menu-color !important;
+      background-color: transparent !important;
+      font-weight: normal !important;
+      box-shadow: none !important;
+    }
   }
 
   .hideSidebar {

src/views/index.vue

@@ -16,15 +16,18 @@
                     <span class="title-line highlight">短信发送管理系统</span>
                 </h1>
 
-                <!-- 装饰性图标 -->
+                <!-- 功能图标 -->
                 <div class="decorative-icons">
                     <div
                         class="icon-item"
-                        v-for="(icon, index) in icons"
+                        v-for="(item, index) in iconItems"
                         :key="index"
                         :style="{ animationDelay: `${index * 0.2}s` }"
+                        @click="handleIconClick(item.path)"
+                        :title="item.title"
                     >
-                        <el-icon :size="24"><component :is="icon" /></el-icon>
+                        <el-icon :size="24"><component :is="item.icon" /></el-icon>
+                        <span class="icon-label">{{ item.title }}</span>
                     </div>
                 </div>
             </div>
@@ -35,19 +38,56 @@
 <script setup name="Index">
 import { ref, markRaw } from 'vue'
 import { useRouter } from 'vue-router'
-import { Message, Bell, Document, Setting, DataAnalysis, Connection } from '@element-plus/icons-vue'
+import {
+    User,
+    Lock,
+    OfficeBuilding,
+    UserFilled,
+    Collection,
+    RefreshRight,
+    Message,
+} from '@element-plus/icons-vue'
 
 const router = useRouter()
 
-// 装饰性图标列表 - 使用 markRaw 避免组件被响应式化
+// 功能图标列表 - 使用 markRaw 避免组件被响应式化
-const icons = ref([
+const iconItems = ref([
-    markRaw(Message),
+    {
-    markRaw(Bell),
+        icon: markRaw(User),
-    markRaw(Document),
+        title: '用户管理',
-    markRaw(Setting),
+        path: '/system/user',
-    markRaw(DataAnalysis),
+    },
-    markRaw(Connection),
+    {
+        icon: markRaw(Lock),
+        title: '角色管理',
+        path: '/system/role',
+    },
+    {
+        icon: markRaw(OfficeBuilding),
+        title: '部门管理',
+        path: '/system/dept',
+    },
+    {
+        icon: markRaw(UserFilled),
+        title: '人员管理',
+        path: '/basicManage/personManage',
+    },
+    {
+        icon: markRaw(Collection),
+        title: '分组管理',
+        path: '/basicManage/groupManage',
+    },
+    {
+        icon: markRaw(Message),
+        title: '短信任务',
+        path: '/sMsSendManage/loopSend',
+    },
 ])
+
+// 处理图标点击
+function handleIconClick(path) {
+    router.push(path)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -216,21 +256,27 @@ const icons = ref([
     }
 }
 
-// 装饰性图标
+// 功能图标
 .decorative-icons {
     display: flex;
     justify-content: center;
-    gap: 24px;
+    gap: 20px;
     flex-wrap: wrap;
     margin-top: 40px;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .icon-item {
-    width: 56px;
+    width: 100px;
-    height: 56px;
+    min-height: 80px;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 8px;
+    padding: 12px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(22, 119, 255, 0.15);
@@ -244,12 +290,20 @@ const icons = ref([
     &:hover {
         background: rgba(22, 119, 255, 0.1);
         border-color: rgba(22, 119, 255, 0.3);
-        transform: translateY(-5px) scale(1.1);
+        transform: translateY(-5px) scale(1.05);
         box-shadow: 0 6px 16px rgba(22, 119, 255, 0.2);
         color: #0958d9;
     }
 }
 
+.icon-label {
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 1.2;
+    color: inherit;
+}
+
 @keyframes float {
     0%,
     100% {
@@ -284,8 +338,13 @@ const icons = ref([
     }
 
     .icon-item {
-        width: 48px;
+        width: 90px;
-        height: 48px;
+        min-height: 70px;
+        padding: 10px;
+    }
+
+    .icon-label {
+        font-size: 11px;
     }
 }
 
@@ -306,8 +365,13 @@ const icons = ref([
     }
 
     .icon-item {
-        width: 44px;
+        width: 80px;
-        height: 44px;
+        min-height: 65px;
+        padding: 8px;
+    }
+
+    .icon-label {
+        font-size: 10px;
     }
 }
 </style>