refactor: ♻️ 布局代码目录结构重构

src/layouts/components/AppMain/index.vue

@@ -9,6 +9,11 @@
         </transition>
       </template>
     </router-view>
+
+    <!-- 返回顶部按钮 -->
+    <el-backtop target=".app-main">
+      <div class="i-svg:backtop w-6 h-6" />
+    </el-backtop>
   </section>
 </template>
 

src/layouts/index.vue

@@ -1,48 +1,36 @@
 <template>
-  <div class="layout-wrapper">
-    <component :is="currentLayoutComponent" />
+  <div class="layout" :class="layoutClass">
+    <!-- 移动端遮罩层 -->
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
 
-    <!-- 设置面板 - 独立于布局组件 -->
-    <Settings v-if="isShowSettings" />
+    <!-- 布局内容插槽 -->
+    <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import { useLayout } from "@/composables/layout/useLayout";
-import LeftLayout from "./views/LeftLayout.vue";
-import TopLayout from "./views/TopLayout.vue";
-import MixLayout from "./views/MixLayout.vue";
-import Settings from "./components/Settings/index.vue";
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { defaultSettings } from "@/settings";
+import { useLayout, useLayoutResponsive } from "@/composables";
 
-const { currentLayout } = useLayout();
-const route = useRoute();
+// 布局相关
+const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
 
-// 根据当前布局模式选择对应的组件
-const currentLayoutComponent = computed(() => {
-  const override = route.meta?.layout as LayoutMode | undefined;
-  const layoutToUse = override ?? currentLayout.value;
-  switch (layoutToUse) {
-    case LayoutMode.TOP:
-      return TopLayout;
-    case LayoutMode.MIX:
-      return MixLayout;
-    case LayoutMode.LEFT:
-    default:
-      return LeftLayout;
-  }
-});
-
-// 是否显示设置面板
-const isShowSettings = computed(() => defaultSettings.showSettings);
+// 响应式布局
+const { isMobile } = useLayoutResponsive();
 </script>
 
 <style lang="scss" scoped>
-.layout-wrapper {
+.layout {
   width: 100%;
   height: 100%;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
 }
 </style>

src/layouts/layouts/BaseLayout.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="layout" :class="layoutClass">
-    <!-- 移动端遮罩层 -->
-    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
-
-    <!-- 布局内容插槽 -->
-    <slot></slot>
-
-    <!-- 返回顶部按钮 -->
-    <el-backtop target=".app-main">
-      <div class="i-svg:backtop w-6 h-6" />
-    </el-backtop>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useLayout, useLayoutResponsive } from "@/composables";
-
-// 布局相关
-const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
-
-// 响应式布局
-const { isMobile } = useLayoutResponsive();
-</script>
-
-<style lang="scss" scoped>
-.layout {
-  width: 100%;
-  height: 100%;
-
-  &__overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-}
-</style>

src/layouts/modes/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="layout-wrapper">
+    <component :is="currentLayoutComponent" />
+
+    <!-- 设置面板 - 独立于布局组件 -->
+    <Settings v-if="isShowSettings" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { useLayout } from "@/composables/layout/useLayout";
+import LeftLayout from "@/layouts/modes/left/index.vue";
+import TopLayout from "@/layouts/modes/top/index.vue";
+import MixLayout from "@/layouts/modes/mix/index.vue";
+import Settings from "../components/Settings/index.vue";
+import { LayoutMode } from "@/enums/settings/layout.enum";
+import { defaultSettings } from "@/settings";
+
+const { currentLayout } = useLayout();
+const route = useRoute();
+
+// 根据当前布局模式选择对应的组件
+const currentLayoutComponent = computed(() => {
+  const override = route.meta?.layout as LayoutMode | undefined;
+  const layoutToUse = override ?? currentLayout.value;
+  switch (layoutToUse) {
+    case LayoutMode.TOP:
+      return TopLayout;
+    case LayoutMode.MIX:
+      return MixLayout;
+    case LayoutMode.LEFT:
+    default:
+      return LeftLayout;
+  }
+});
+
+// 是否显示设置面板
+const isShowSettings = computed(() => defaultSettings.showSettings);
+</script>
+
+<style lang="scss" scoped>
+.layout-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/layouts/modes/left/index.vue

@@ -30,12 +30,12 @@
 <script setup lang="ts">
 import { useLayout } from "@/composables/layout/useLayout";
 import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
-import BaseLayout from "./BaseLayout.vue";
-import AppLogo from "../components/AppLogo/index.vue";
-import NavBar from "../components/NavBar/index.vue";
-import TagsView from "../components/TagsView/index.vue";
-import AppMain from "../components/AppMain/index.vue";
-import BasicMenu from "../components/Menu/BasicMenu.vue";
+import BaseLayout from "@/layouts/index.vue";
+import AppLogo from "../../components/AppLogo/index.vue";
+import NavBar from "../../components/NavBar/index.vue";
+import TagsView from "../../components/TagsView/index.vue";
+import AppMain from "../../components/AppMain/index.vue";
+import BasicMenu from "../../components/Menu/BasicMenu.vue";
 
 // 布局相关参数
 const { isShowTagsView, isShowLogo, isSidebarOpen } = useLayout();

src/layouts/modes/mix/index.vue

@@ -58,16 +58,17 @@
 </template>
 
 <script setup lang="ts">
+import { computed, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useWindowSize } from "@vueuse/core";
 import { useLayout, useLayoutMenu } from "@/composables";
-import BaseLayout from "./BaseLayout.vue";
-import AppLogo from "../components/AppLogo/index.vue";
-import MixTopMenu from "../components/Menu/MixTopMenu.vue";
-import NavbarActions from "../components/NavBar/components/NavbarActions.vue";
-import TagsView from "../components/TagsView/index.vue";
-import AppMain from "../components/AppMain/index.vue";
-import MenuItem from "../components/Menu/components/MenuItem.vue";
+import BaseLayout from "@/layouts/index.vue";
+import AppLogo from "../../components/AppLogo/index.vue";
+import MixTopMenu from "../../components/Menu/MixTopMenu.vue";
+import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";
+import TagsView from "../../components/TagsView/index.vue";
+import AppMain from "../../components/AppMain/index.vue";
+import MenuItem from "../../components/Menu/components/MenuItem.vue";
 import Hamburger from "@/components/Hamburger/index.vue";
 import variables from "@/styles/variables.module.scss";
 import { isExternal } from "@/utils/index";
@@ -91,8 +92,8 @@ const isLogoCollapsed = computed(() => width.value < 768);
 const activeLeftMenuPath = computed(() => {
   const { meta, path } = route;
   // 如果设置了activeMenu，则使用
-  if (meta?.activeMenu && typeof meta.activeMenu === "string") {
-    return meta.activeMenu;
+  if ((meta?.activeMenu as unknown as string) && typeof meta.activeMenu === "string") {
+    return meta.activeMenu as unknown as string;
   }
   return path;
 });
@@ -116,26 +117,16 @@ function resolvePath(routePath: string) {
 watch(
   () => route.path,
   (newPath) => {
-    console.log("📍 Route changed in MixLayout:", newPath);
-
     // 获取顶级路径
     const topMenuPath =
       newPath.split("/").filter(Boolean).length > 1 ? newPath.match(/^\/[^/]+/)?.[0] || "/" : "/";
 
     // 如果当前路径属于当前激活的顶部菜单
     if (newPath.startsWith(activeTopMenuPath.value)) {
-      console.log("📍 Route is under active top menu, ensuring menu item is activated");
+      // no-op
     }
     // 如果路径改变了顶级菜单，确保顶部菜单和左侧菜单都更新
     else if (topMenuPath !== activeTopMenuPath.value) {
-      console.log(
-        "📍 Top menu changed, updating active menu from:",
-        activeTopMenuPath.value,
-        "to:",
-        topMenuPath
-      );
-
-      // 主动更新顶部菜单和左侧菜单
       const appStore = useAppStore();
       const permissionStore = usePermissionStore();
 
@@ -283,7 +274,6 @@ watch(
     }
   }
 }
-
 :deep(.hasTagsView) {
   .app-main {
     height: calc(100vh - $navbar-height - $tags-view-height) !important;

src/layouts/modes/top/index.vue

@@ -23,16 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "@/composables/layout/useLayout";
 import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
-import BaseLayout from "./BaseLayout.vue";
-import AppLogo from "../components/AppLogo/index.vue";
-import BasicMenu from "../components/Menu/BasicMenu.vue";
-import NavbarActions from "../components/NavBar/components/NavbarActions.vue";
-import TagsView from "../components/TagsView/index.vue";
-import AppMain from "../components/AppMain/index.vue";
+import BaseLayout from "@/layouts/index.vue";
+import AppLogo from "../../components/AppLogo/index.vue";
+import BasicMenu from "../../components/Menu/BasicMenu.vue";
+import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";
+import TagsView from "../../components/TagsView/index.vue";
+import AppMain from "../../components/AppMain/index.vue";
 
 // 布局相关参数
 const { isShowTagsView, isShowLogo } = useLayout();

src/router/index.ts

@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 
-export const Layout = () => import("@/layouts/index.vue");
+export const Layout = () => import("@/layouts/modes/index.vue");
 
 // 静态路由
 export const constantRoutes: RouteRecordRaw[] = [

src/store/modules/permission-store.ts

@@ -5,7 +5,7 @@ import router from "@/router";
 
 import MenuAPI, { type RouteVO } from "@/api/system/menu-api";
 const modules = import.meta.glob("../../views/**/**.vue");
-const Layout = () => import("@/layouts/index.vue");
+const Layout = () => import("@/layouts/modes/index.vue");
 
 export const usePermissionStore = defineStore("permission", () => {
   // 所有路由（静态路由 + 动态路由）