refactor(布局): 拆分 MixMenu composable，消除 TagsView 重复逻辑，修复仪表盘报错

src/layouts/MixLayout.vue

@@ -75,14 +75,12 @@
 </template>
 
 <script setup lang="ts">
-import type { LocationQueryRaw, RouteRecordRaw } from "vue-router";
 import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "./useLayout";
-import { useAppStore, usePermissionStore, useSettingsStore } from "@/stores";
-import { isExternal } from "@/utils/index";
+import { useMixMenu } from "./composables/useMixMenu";
+import { useAppStore, useSettingsStore } from "@/stores";
 import { translateRouteTitle } from "@/lang/utils";
 import { SidebarColor, ThemeMode } from "@/enums/settings";
-import { ElIcon } from "element-plus";
 import BaseLayout from "./BaseLayout.vue";
 import LayoutLogo from "./components/LayoutLogo.vue";
 import LayoutToolbar from "./components/LayoutToolbar.vue";
@@ -92,140 +90,36 @@ import LayoutSidebarItem from "./components/LayoutSidebarItem.vue";
 import Hamburger from "@/components/Hamburger/index.vue";
 import variables from "@/styles/variables.module.scss";
 
-// 菜单图标渲染组件
-const MenuIcon = defineComponent({
-  props: { icon: String },
-  setup(props) {
-    const isElIcon = computed(() => props.icon?.startsWith("el-icon"));
-    const iconName = computed(() => props.icon?.replace("el-icon-", ""));
-
-    return () => {
-      if (!props.icon) {
-        return h("div", { class: "i-svg:menu" });
-      }
-
-      // Element Plus 图标
-      if (isElIcon.value) {
-        return h(ElIcon, null, () => h(resolveComponent(iconName.value!)));
-      }
-
-      // SVG 图标
-      return h("div", { class: `i-svg:${props.icon}` });
-    };
-  },
-});
-
-const route = useRoute();
-const router = useRouter();
 const { width } = useWindowSize();
 
 const appStore = useAppStore();
-const permissionStore = usePermissionStore();
 const settingsStore = useSettingsStore();
 
-const { showTagsView, showLogo, isSidebarOpen, toggleSidebar, sideMenuRoutes, activeTopMenuPath } =
-  useLayout();
+const { showTagsView, showLogo, isSidebarOpen, toggleSidebar } = useLayout();
+
+const {
+  MenuIcon,
+  topMenuItems,
+  activeSideMenuPath,
+  activeTopMenuPath,
+  sideMenuRoutes,
+  resolvePath,
+  handleTopMenuSelect,
+} = useMixMenu();
 
 const isLogoCollapsed = computed(() => width.value < 768);
 
-// 是否使用深色菜单配色（暗色主题或经典蓝侧边栏）
+/**
+ * 深色菜单配色。
+ *
+ * 暗色主题或经典蓝侧边栏时菜单区域使用深色背景与浅色文字，
+ * 其他情况使用 Element Plus 默认配色。
+ */
 const useMenuColors = computed(
   () =>
     settingsStore.resolvedTheme === ThemeMode.DARK ||
     settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
 );
-
-// 顶部菜单项（处理单子菜单显示优化）
-const topMenuItems = computed(() => {
-  const routes = permissionStore.routes.filter((item) => !item.meta?.hidden);
-
-  return routes.map((route) => {
-    // alwaysShow 或无子菜单，直接返回
-    if (route.meta?.alwaysShow || !route.children?.length) return route;
-
-    // 过滤可见子菜单
-    const visibleChildren = route.children.filter((child) => !child.meta?.hidden);
-
-    // 仅一个可见子菜单时，显示子菜单信息
-    if (visibleChildren.length === 1) {
-      const child = visibleChildren[0];
-      return {
-        ...route,
-        meta: {
-          ...route.meta,
-          title: child.meta?.title || route.meta?.title,
-          icon: child.meta?.icon || route.meta?.icon,
-        },
-      };
-    }
-    return route;
-  });
-});
-
-// 左侧菜单激活路径
-const activeSideMenuPath = computed(() => {
-  const { meta, path } = route;
-  return typeof meta?.activeMenu === "string" ? meta.activeMenu : path;
-});
-
-// 解析左侧菜单路径
-function resolvePath(routePath: string) {
-  if (isExternal(routePath)) return routePath;
-  if (routePath.startsWith("/")) return activeTopMenuPath.value + routePath;
-  return `${activeTopMenuPath.value}/${routePath}`;
-}
-
-// 从路径提取顶级菜单路径
-function extractTopMenuPath(path: string): string {
-  return path.split("/").filter(Boolean).length > 1 ? path.match(/^\/[^/]+/)?.[0] || "/" : "/";
-}
-
-// 顶部菜单点击
-function handleTopMenuSelect(menuPath: string) {
-  if (menuPath === activeTopMenuPath.value) return;
-
-  appStore.setActiveTopMenuPath(menuPath);
-  permissionStore.setMixLayoutSideMenus(menuPath);
-  navigateToFirstMenu(permissionStore.mixLayoutSideMenus);
-}
-
-// 导航到第一个可访问菜单
-function navigateToFirstMenu(menus: RouteRecordRaw[]) {
-  if (!menus.length) return;
-
-  const [first] = menus;
-  if (first.children?.length) {
-    navigateToFirstMenu(first.children as RouteRecordRaw[]);
-  } else if (first.name) {
-    router.push({
-      name: first.name,
-      query:
-        typeof first.meta?.params === "object"
-          ? (first.meta.params as LocationQueryRaw)
-          : undefined,
-    });
-  }
-}
-
-// 监听路由变化，同步顶部菜单状态
-watch(
-  () => route.path,
-  (newPath) => {
-    const topMenuPath = extractTopMenuPath(newPath);
-    const isTopMenuChanged = topMenuPath !== activeTopMenuPath.value;
-
-    if (isTopMenuChanged) {
-      appStore.setActiveTopMenuPath(topMenuPath);
-    }
-
-    // 切换布局（如左侧 -> 混合）时，activeTopMenuPath 可能已是正确值，
-    // 但 mixLayoutSideMenus 仍为空，需要补一次初始化。
-    if (isTopMenuChanged || permissionStore.mixLayoutSideMenus.length === 0) {
-      permissionStore.setMixLayoutSideMenus(topMenuPath);
-    }
-  },
-  { immediate: true }
-);
 </script>
 
 <style lang="scss" scoped>