From d4edf3393ae5d3492dc4f7afcdeb91d7d20da04f Mon Sep 17 00:00:00 2001
From: lijun <lijun.lj@foxmail.com>
Date: Sun, 3 May 2026 23:25:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=8C=E7=BA=A7=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/Layout.vue | 172 +++++++++++++++++++++++++++---------------
 1 file changed, 111 insertions(+), 61 deletions(-)

diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 952e707..4577362 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -13,11 +13,19 @@
         text-color="#bfcbd9"
         active-text-color="#409eff"
       >
-        <template v-for="(item, index) in menuList" :key="index">
-          <el-menu-item v-if="item.show" :index="item.path">
-            <el-icon><component :is="item.icon" /></el-icon>
-            <template #title>{{ item.title }}</template>
-          </el-menu-item>
+        <template v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
+          <el-sub-menu v-if="group.show && group.children && group.children.length > 0" :index="groupIndex.toString()">
+            <template #title>
+              <el-icon><component :is="group.icon" /></el-icon>
+              <span>{{ group.title }}</span>
+            </template>
+            <template v-for="(item, itemIndex) in group.children" :key="itemIndex">
+              <el-menu-item v-if="item.show" :index="item.path">
+                <el-icon><component :is="item.icon" /></el-icon>
+                <template #title>{{ item.title }}</template>
+              </el-menu-item>
+            </template>
+          </el-sub-menu>
         </template>
       </el-menu>
     </el-aside>
@@ -81,84 +89,126 @@ const username = ref(localStorage.getItem("username") || "用户");
 
 const activeMenu = computed(() => route.path);
 
-const menuList = ref([
+const menuGroups = ref([
   {
-    path: "/videoList",
-    title: "视频列表",
+    title: "视频设备",
     icon: VideoCamera,
-    show: localStorage.getItem("video_func") === "true",
+    show: localStorage.getItem("video_func") === "true" || localStorage.getItem("device_func") === "true",
+    children: [
+      {
+        path: "/videoList",
+        title: "视频列表",
+        icon: VideoCamera,
+        show: localStorage.getItem("video_func") === "true",
+      },
+      {
+        path: "/device",
+        title: "设备管理",
+        icon: Monitor,
+        show: localStorage.getItem("device_func") === "true",
+      },
+    ]
   },
   {
-    path: "/device",
-    title: "设备管理",
-    icon: Monitor,
-    show: localStorage.getItem("device_func") === "true",
-  },
-  {
-    path: "/cid",
     title: "集成部署",
     icon: Setting,
     show: localStorage.getItem("cid_func") === "true",
+    children: [
+      {
+        path: "/cid",
+        title: "集成部署",
+        icon: Setting,
+        show: localStorage.getItem("cid_func") === "true",
+      },
+      {
+        path: "/cidlog",
+        title: "部署日志",
+        icon: Document,
+        show: localStorage.getItem("cid_func") === "true",
+      },
+    ]
   },
   {
-    path: "/cidlog",
-    title: "部署日志",
-    icon: Document,
-    show: localStorage.getItem("cid_func") === "true",
-  },
-  {
-    path: "/file",
-    title: "文件",
-    icon: Document,
+    title: "系统工具",
+    icon: Tools,
     show: localStorage.getItem("role") === "admin",
+    children: [
+      {
+        path: "/file",
+        title: "文件管理",
+        icon: Document,
+        show: localStorage.getItem("role") === "admin",
+      },
+      {
+        path: "/shell",
+        title: "执行命令",
+        icon: Tools,
+        show: localStorage.getItem("role") === "admin",
+      },
+    ]
   },
   {
-      path: "/shell",
-      title: "执行命令",
-      icon: Tools,
-      show: localStorage.getItem("role") === "admin",
-    },
-  {
-    path: "/user",
-    title: "用户",
+    title: "用户管理",
     icon: UserFilled,
     show: true,
+    children: [
+      {
+        path: "/user",
+        title: "用户列表",
+        icon: UserFilled,
+        show: true,
+      },
+      {
+        path: "/group",
+        title: "群组管理",
+        icon: OfficeBuilding,
+        show: true,
+      },
+    ]
   },
   {
-    path: "/chat",
-    title: "聊天",
+    title: "即时通讯",
     icon: ChatDotRound,
     show: true,
+    children: [
+      {
+        path: "/chat",
+        title: "聊天",
+        icon: ChatDotRound,
+        show: true,
+      },
+      {
+        path: "/im",
+        title: "即时通讯",
+        icon: Connection,
+        show: true,
+      },
+    ]
   },
   {
-    path: "/group",
-    title: "群组",
-    icon: OfficeBuilding,
-    show: true,
-  },
-  {
-    path: "/im",
-    title: "即时通讯",
-    icon: Connection,
-    show: true,
-  },
-  {
-    path: "/dnsServer",
-    title: "DNS服务器配置",
+    title: "DNS管理",
     icon: ServerIcon,
     show: true,
-  },
-  {
-    path: "/dnsZone",
-    title: "DNS区域管理",
-    icon: ZoneIcon,
-    show: true,
-  },
-  {
-    path: "/dnsRecord",
-    title: "DNS记录管理",
-    icon: RecordIcon,
-    show: true,
+    children: [
+      {
+        path: "/dnsServer",
+        title: "DNS服务器配置",
+        icon: ServerIcon,
+        show: true,
+      },
+      {
+        path: "/dnsZone",
+        title: "DNS区域管理",
+        icon: ZoneIcon,
+        show: true,
+      },
+      {
+        path: "/dnsRecord",
+        title: "DNS记录管理",
+        icon: RecordIcon,
+        show: true,
+      },
+    ]
   },
 ]);