修改菜单，添加二级目录

src/layout/Layout.vue

@@ -13,12 +13,20 @@
         text-color="#bfcbd9"
         active-text-color="#409eff"
       >
-        <template v-for="(item, index) in menuList" :key="index">
+        <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>
     <el-container class="main-container">
@@ -81,7 +89,12 @@ const username = ref(localStorage.getItem("username") || "用户");
 
 const activeMenu = computed(() => route.path);
 
-const menuList = ref([
+const menuGroups = ref([
+  {
+    title: "视频设备",
+    icon: VideoCamera,
+    show: localStorage.getItem("video_func") === "true" || localStorage.getItem("device_func") === "true",
+    children: [
       {
         path: "/videoList",
         title: "视频列表",
@@ -94,6 +107,13 @@ const menuList = ref([
         icon: Monitor,
         show: localStorage.getItem("device_func") === "true",
       },
+    ]
+  },
+  {
+    title: "集成部署",
+    icon: Setting,
+    show: localStorage.getItem("cid_func") === "true",
+    children: [
       {
         path: "/cid",
         title: "集成部署",
@@ -106,9 +126,16 @@ const menuList = ref([
         icon: Document,
         show: localStorage.getItem("cid_func") === "true",
       },
+    ]
+  },
+  {
+    title: "系统工具",
+    icon: Tools,
+    show: localStorage.getItem("role") === "admin",
+    children: [
       {
         path: "/file",
-    title: "文件",
+        title: "文件管理",
         icon: Document,
         show: localStorage.getItem("role") === "admin",
       },
@@ -118,30 +145,51 @@ const menuList = ref([
         icon: Tools,
         show: localStorage.getItem("role") === "admin",
       },
+    ]
+  },
+  {
+    title: "用户管理",
+    icon: UserFilled,
+    show: true,
+    children: [
       {
         path: "/user",
-    title: "用户",
+        title: "用户列表",
         icon: UserFilled,
         show: true,
       },
+      {
+        path: "/group",
+        title: "群组管理",
+        icon: OfficeBuilding,
+        show: true,
+      },
+    ]
+  },
+  {
+    title: "即时通讯",
+    icon: ChatDotRound,
+    show: true,
+    children: [
       {
         path: "/chat",
         title: "聊天",
         icon: ChatDotRound,
         show: true,
       },
-  {
-    path: "/group",
-    title: "群组",
-    icon: OfficeBuilding,
-    show: true,
-  },
       {
         path: "/im",
         title: "即时通讯",
         icon: Connection,
         show: true,
       },
+    ]
+  },
+  {
+    title: "DNS管理",
+    icon: ServerIcon,
+    show: true,
+    children: [
       {
         path: "/dnsServer",
         title: "DNS服务器配置",
@@ -160,6 +208,8 @@ const menuList = ref([
         icon: RecordIcon,
         show: true,
       },
+    ]
+  },
 ]);
 
 const toggleCollapse = () => {