增加cms模块

pc/src/components/CommonAside.vue

@@ -13,6 +13,7 @@
       :active-text-color="activeColor"
       :active-background-color="activeBgColor"
       class="el-menu-vertical-demo"
+      :unique-opened="true"
       @select="handleMenuSelect"
       :default-active="route.path"
     >
@@ -47,7 +48,7 @@ const loading = computed(() => menuStore.loading);
 
 const store = useAllDataStore();
 const isCollapse = computed(() => store.state.isCollapse);
-const width = computed(() => (store.state.isCollapse ? "64px" : "180px"));
+const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
 // 使用 Element Plus 的颜色变量，主题切换时会自动适配
 // 这些值会被 el-menu 组件使用，el-menu 会自动适配主题
 // 计算是否为暗色主题（响应式）
@@ -155,12 +156,13 @@ const transformMenuData = (menus) => {
     });
   };
 
-  // 首先映射字段格式，只保留页面菜单（menu_type=1），并过滤掉功能页面和需要隐藏的子菜单
+  // 首先映射字段格式，只保留目录（menu_type=1）和页面（menu_type=2），并过滤掉功能页面和需要隐藏的子菜单
+  // 按钮类型(menu_type=3)用于权限控制，不在菜单中显示
   const allMenus = menus
     .filter((menu) => {
-      // 只显示页面菜单，不显示API权限菜单
-      if (menu.menuType !== 1 && menu.menuType !== undefined) {
-        // console.log('过滤掉非页面菜单:', menu);
+      // 显示目录和页面，不显示按钮
+      if (menu.menuType !== 1 && menu.menuType !== 2 && menu.menuType !== undefined) {
+        // console.log('过滤掉非目录和非页面:', menu);
         return false;
       }
       // 过滤掉功能页面（详情、新增、编辑、删除等）
@@ -188,7 +190,7 @@ const transformMenuData = (menus) => {
 
   // console.log('过滤后的菜单数据:', allMenus);
 
-  // 构建菜单映射表（只包含有效的页面菜单）
+  // 构建菜单映射表（只包含有效的目录和页面）
   const menuMap = new Map();
   allMenus.forEach((menu) => {
     menuMap.set(menu.id, menu);
@@ -202,7 +204,7 @@ const transformMenuData = (menus) => {
       // 顶级菜单直接加入
       rootMenus.push(menu);
     } else {
-      // 检查父菜单是否存在（必须是有效的页面菜单）
+      // 检查父菜单是否存在（必须是有效的目录）
       const parent = menuMap.get(menu.parentId);
       if (parent) {
         // 父菜单存在，添加到父菜单的children中
@@ -285,30 +287,34 @@ const handleMenuRefresh = () => {
   fetchMenus();
 };
 
-// 组件挂载时初始化主题监听和获取菜单
-onMounted(() => {
-  // 初始化主题监听
-  themeObserver = new MutationObserver(() => {
+  // 组件挂载时初始化主题监听和获取菜单
+  onMounted(() => {
+    // 初始化主题监听
+    themeObserver = new MutationObserver(() => {
+      updateTheme();
+    });
+
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    // 初始化时检查一次主题
     updateTheme();
+
+    // 检查菜单是否已加载，如果未加载则获取菜单
+    // 这样可以避免在路由初始化后重复请求
+    if (!menuStore.menus || menuStore.menus.length === 0) {
+      // 延迟一点获取菜单，确保主题已初始化
+      setTimeout(() => {
+        fetchMenus();
+      }, 100);
+    }
+
+    // 监听菜单缓存刷新事件
+    window.addEventListener("menu-cache-refreshed", handleMenuRefresh);
   });
 
-  themeObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class"],
-  });
-
-  // 初始化时检查一次主题
-  updateTheme();
-
-  // 延迟一点获取菜单，确保主题已初始化
-  setTimeout(() => {
-    fetchMenus();
-  }, 100);
-
-  // 监听菜单缓存刷新事件
-  window.addEventListener("menu-cache-refreshed", handleMenuRefresh);
-});
-
 // 组件卸载时清理事件监听
 onUnmounted(() => {
   if (themeObserver) {

pc/src/components/MenuTreeItem.vue

@@ -11,6 +11,7 @@
   <el-sub-menu
     v-else
     :index="menu.path"
+    :unique-opened="true"
   >
     <template #title>
       <i :class="['icons', 'fa', menu.icon || 'fa-circle']"></i>