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

2026-06-09 22:08:38 +08:00
parent 6a227ad1c7
commit 830651c0d7
4 changed files with 248 additions and 273 deletions
--- a/src/layouts/MixLayout.vue
+++ b/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>
--- a/src/layouts/components/LayoutTagsView.vue
+++ b/src/layouts/components/LayoutTagsView.vue
@@ -379,7 +379,35 @@ const closeSelectedTag = (tag: TagView | null) => {
  });
 };

-// 关闭当前激活标签以外的其他标签
+/* ------------------------------------------------------------------ */
+/*  批量关闭标签（左/右/其它方向）                                     */
+/* ------------------------------------------------------------------ */
+
+/**
+ * 按方向批量关闭标签的通用执行器。
+ *
+ * closeLeftTagsForActive / closeRightTagsForActive / closeLeftTags /
+ * closeRightTags 四个公开函数均委托此函数，仅 source（标签来源 ref）
+ * 和 batchFn（调用的 store 方法）不同。
+ *
+ * 关闭后若当前路由对应的标签已被移除，自动跳转到最后一个剩余标签。
+ */
+function closeDirectional(
+  source: Ref<TagView | null>,
+  batchFn: (tag: TagView) => Promise<{ visitedViews: TagView[] }>
+) {
+  const tag = source.value;
+  if (!tag) return;
+
+  batchFn(tag).then(({ visitedViews }) => {
+    const stillVisible = visitedViews.some((v) => v.path === route.path);
+    if (!stillVisible) {
+      tagsViewStore.toLastView(visitedViews);
+    }
+  });
+}
+
+/** 关闭当前激活标签之外的其它标签 */
 const closeOtherTagsForActive = () => {
  if (!currentTag.value) return;
  tagsViewStore.delOtherViews(currentTag.value).then(() => {
@@ -387,49 +415,14 @@ const closeOtherTagsForActive = () => {
  });
 };

-// 关闭当前激活标签左侧的所有标签
-const closeLeftTagsForActive = () => {
-  if (!currentTag.value) return;
-  tagsViewStore.delLeftViews(currentTag.value).then((result: any) => {
-    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
-    if (!hasCurrentRoute) {
-      tagsViewStore.toLastView(result.visitedViews);
-    }
-  });
-};
-
-// 关闭当前激活标签右侧的所有标签
-const closeRightTagsForActive = () => {
-  if (!currentTag.value) return;
-  tagsViewStore.delRightViews(currentTag.value).then((result: any) => {
-    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
-    if (!hasCurrentRoute) {
-      tagsViewStore.toLastView(result.visitedViews);
-    }
-  });
-};
-
-// 关闭右键选中标签左侧的所有标签
-const closeLeftTags = () => {
-  if (!selectedTag.value) return;
-  tagsViewStore.delLeftViews(selectedTag.value).then((result: any) => {
-    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
-    if (!hasCurrentRoute) {
-      tagsViewStore.toLastView(result.visitedViews);
-    }
-  });
-};
-
-// 关闭右键选中标签右侧的所有标签
-const closeRightTags = () => {
-  if (!selectedTag.value) return;
-  tagsViewStore.delRightViews(selectedTag.value).then((result: any) => {
-    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
-    if (!hasCurrentRoute) {
-      tagsViewStore.toLastView(result.visitedViews);
-    }
-  });
-};
+// 关闭左侧（当前激活标签）
+const closeLeftTagsForActive = () => closeDirectional(currentTag, tagsViewStore.delLeftViews);
+// 关闭右侧（当前激活标签）
+const closeRightTagsForActive = () => closeDirectional(currentTag, tagsViewStore.delRightViews);
+// 关闭左侧（右键选中标签）
+const closeLeftTags = () => closeDirectional(selectedTag, tagsViewStore.delLeftViews);
+// 关闭右侧（右键选中标签）
+const closeRightTags = () => closeDirectional(selectedTag, tagsViewStore.delRightViews);

 // 关闭右键选中标签以外的其他标签
 const closeOtherTags = () => {
--- a/src/layouts/composables/useMixMenu.ts
+++ b/src/layouts/composables/useMixMenu.ts
@@ -0,0 +1,192 @@
+/**
+ * 混合布局菜单逻辑
+ *
+ * 从 MixLayout.vue 提取，负责：
+ *   - 顶部菜单项扁平化（单子菜单向上合并 title/icon）
+ *   - 侧边菜单路径解析与激活判定
+ *   - 菜单切换导航（自动跳转到第一个可访问子菜单）
+ *   - 路由变化时同步顶部菜单激活态与侧边菜单数据
+ *
+ * 模板只绑定返回值，无需关心内部实现。
+ */
+import type { LocationQueryRaw, RouteRecordRaw } from "vue-router";
+import { useLayout } from "../useLayout";
+import { useAppStore, usePermissionStore, useSettingsStore } from "@/stores";
+import { isExternal } from "@/utils/index";
+import { ElIcon } from "element-plus";
+
+/* ------------------------------------------------------------------ */
+/*  MenuIcon — 菜单图标渲染组件（Element Plus / SVG 双模式）           */
+/* ------------------------------------------------------------------ */
+
+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" });
+      }
+
+      if (isElIcon.value) {
+        return h(ElIcon, null, () => h(resolveComponent(iconName.value!)));
+      }
+
+      return h("div", { class: `i-svg:${props.icon}` });
+    };
+  },
+});
+
+/* ------------------------------------------------------------------ */
+/*  useMixMenu                                                         */
+/* ------------------------------------------------------------------ */
+
+export function useMixMenu() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const appStore = useAppStore();
+  const permissionStore = usePermissionStore();
+  const settingsStore = useSettingsStore();
+
+  const { activeTopMenuPath, sideMenuRoutes } = useLayout();
+
+  /* ------ 顶部菜单 ------------------------------------------------- */
+
+  /**
+   * 顶部菜单项。
+   *
+   * 过滤隐藏路由，并将仅有一个可见子菜单的父级菜单向上合并
+   * —— 把子菜单的 title / icon 提升到父级，让顶栏直接显示为叶子节点。
+   */
+  const topMenuItems = computed(() => {
+    const routes = permissionStore.routes.filter((item) => !item.meta?.hidden);
+
+    return routes.map((route) => {
+      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;
+    });
+  });
+
+  /* ------ 侧边菜单 ------------------------------------------------- */
+
+  /** 当前路由对应的侧边菜单激活路径（优先取 meta.activeMenu） */
+  const activeSideMenuPath = computed(() => {
+    const { meta, path } = route;
+    return typeof meta?.activeMenu === "string" ? meta.activeMenu : path;
+  });
+
+  /**
+   * 将侧边菜单项的相对路径解析为完整路径。
+   *
+   *   - 外部链接原样返回
+   *   - 以 "/" 开头：拼在顶部菜单路径之后
+   *   - 否则：拼在当前顶部路径后
+   */
+  function resolvePath(routePath: string): string {
+    if (isExternal(routePath)) return routePath;
+    if (routePath.startsWith("/")) return activeTopMenuPath.value + routePath;
+    return `${activeTopMenuPath.value}/${routePath}`;
+  }
+
+  /* ------ 路径工具 ------------------------------------------------- */
+
+  /**
+   * 从完整路径中提取第一段作为顶级菜单路径。
+   *
+   *   "/system/user" → "/system"
+   *   "/dashboard"   → "/"
+   */
+  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);
+  }
+
+  /**
+   * 递归查找并跳转到第一个可访问的叶子路由。
+   *
+   * 有子路由时继续深入，无子路由时按 name 跳转，
+   * 同时携带 meta.params 作为 query 参数。
+   */
+  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,
+      });
+    }
+  }
+
+  /* ------ 路由同步 ------------------------------------------------- */
+
+  /**
+   * 监听路由变化，保持顶部菜单激活态和侧边菜单数据同步。
+   *
+   * 场景覆盖：
+   *   1. 普通页面跳转 —— 自动切换顶部菜单
+   *   2. 布局切换（如左侧→混合）—— 已缓存正确 activeTopMenuPath
+   *      但 mixLayoutSideMenus 可能为空，需要补初始化
+   */
+  watch(
+    () => route.path,
+    (newPath) => {
+      const topMenuPath = extractTopMenuPath(newPath);
+      const isTopMenuChanged = topMenuPath !== activeTopMenuPath.value;
+
+      if (isTopMenuChanged) {
+        appStore.setActiveTopMenuPath(topMenuPath);
+      }
+
+      if (isTopMenuChanged || permissionStore.mixLayoutSideMenus.length === 0) {
+        permissionStore.setMixLayoutSideMenus(topMenuPath);
+      }
+    },
+    { immediate: true }
+  );
+
+  return {
+    MenuIcon,
+    topMenuItems,
+    activeSideMenuPath,
+    activeTopMenuPath,
+    sideMenuRoutes,
+    resolvePath,
+    handleTopMenuSelect,
+  };
+}
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -178,50 +178,6 @@
      </div>
    </section>

-    <!-- ============================================================
-    Recent visits: collapsible history (like Alibaba Cloud)
-    ============================================================ -->
-    <section v-if="recentMenus.length" class="dash-recent">
-      <div class="card">
-        <div class="card__head">
-          <h3 class="card__title">最近访问</h3>
-          <div class="card__head-actions">
-            <el-button type="primary" link size="small" @click="clearRecentMenus">清空</el-button>
-            <el-button type="primary" link size="small" @click="recentExpanded = !recentExpanded">
-              {{ recentExpanded ? "收起" : "展开" }}
-              <el-icon :size="12">
-                <ArrowUp v-if="recentExpanded" />
-                <ArrowDown v-else />
-              </el-icon>
-            </el-button>
-          </div>
-        </div>
-        <div class="card__body">
-          <div class="recent-grid" :class="{ 'recent-grid--fold': !recentExpanded }">
-            <div
-              v-for="item in recentMenus"
-              :key="item.path"
-              class="recent-grid__item"
-              @click="router.push(item.path)"
-            >
-              <div class="recent-grid__icon">
-                <el-icon v-if="item.icon?.startsWith('el-icon-')" :size="15">
-                  <component :is="item.icon.replace('el-icon-', '')" />
-                </el-icon>
-                <span
-                  v-else-if="item.icon"
-                  :class="`i-svg:${item.icon}`"
-                  class="recent-grid__svg"
-                />
-                <el-icon v-else :size="15"><Menu /></el-icon>
-              </div>
-              <span class="recent-grid__name">{{ item.title }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
    <!-- ============================================================
    Chart
    ============================================================ -->
@@ -950,66 +906,6 @@ $radius: 10px;
  }
 }

-// ============================================================
-// Recent visits grid (collapsible)
-// ============================================================
-
-.card__head-actions {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.recent-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 2px;
-
-  &--fold {
-    max-height: 42px;
-    overflow: hidden;
-  }
-
-  &__item {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    padding: 8px 10px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: background-color 0.15s;
-
-    &:hover {
-      background: var(--el-fill-color);
-    }
-  }
-
-  &__icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    color: var(--el-text-color-secondary);
-    background: var(--el-fill-color-lighter);
-    border-radius: 5px;
-  }
-
-  &__svg {
-    width: 14px;
-    height: 14px;
-  }
-
-  &__name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 12px;
-    color: var(--el-text-color-regular);
-    white-space: nowrap;
-  }
-}
-
 // ============================================================
 // Responsive
 // ============================================================