refactor: 组合式函数目录结构调整

src/layouts/composables/useLayout.ts

@@ -1,62 +0,0 @@
-import { useAppStore, useSettingsStore } from "@/store";
-import { defaultSettings } from "@/settings";
-
-/**
- * 布局相关的通用逻辑
- */
-export function useLayout() {
-  const appStore = useAppStore();
-  const settingsStore = useSettingsStore();
-
-  // 计算当前布局模式
-  const currentLayout = computed(() => settingsStore.layout);
-
-  // 侧边栏展开状态
-  const isSidebarOpen = computed(() => appStore.sidebar.opened);
-
-  // 是否显示标签视图
-  const isShowTagsView = computed(() => settingsStore.showTagsView);
-
-  // 是否显示设置面板
-  const isShowSettings = computed(() => defaultSettings.showSettings);
-
-  // 是否显示Logo
-  const isShowLogo = computed(() => settingsStore.showAppLogo);
-
-  // 是否移动设备
-  const isMobile = computed(() => appStore.device === "mobile");
-
-  // 布局CSS类
-  const layoutClass = computed(() => ({
-    hideSidebar: !appStore.sidebar.opened,
-    openSidebar: appStore.sidebar.opened,
-    mobile: appStore.device === "mobile",
-    [`layout-${settingsStore.layout}`]: true,
-  }));
-
-  /**
-   * 处理切换侧边栏的展开/收起状态
-   */
-  function toggleSidebar() {
-    appStore.toggleSidebar();
-  }
-
-  /**
-   * 关闭侧边栏（移动端）
-   */
-  function closeSidebar() {
-    appStore.closeSideBar();
-  }
-
-  return {
-    currentLayout,
-    isSidebarOpen,
-    isShowTagsView,
-    isShowSettings,
-    isShowLogo,
-    isMobile,
-    layoutClass,
-    toggleSidebar,
-    closeSidebar,
-  };
-}

src/layouts/composables/useLayoutMenu.ts

@@ -1,39 +0,0 @@
-import { useRoute } from "vue-router";
-import { useAppStore, usePermissionStore } from "@/store";
-
-/**
- * 布局菜单处理逻辑
- */
-export function useLayoutMenu() {
-  const route = useRoute();
-  const appStore = useAppStore();
-  const permissionStore = usePermissionStore();
-
-  // 顶部菜单激活路径
-  const activeTopMenuPath = computed(() => appStore.activeTopMenuPath);
-
-  // 常规路由（左侧菜单或顶部菜单）
-  const routes = computed(() => permissionStore.routes);
-
-  // 混合布局左侧菜单路由
-  const sideMenuRoutes = computed(() => permissionStore.mixLayoutSideMenus);
-
-  // 当前激活的菜单
-  const activeMenu = computed(() => {
-    const { meta, path } = route;
-
-    // 如果设置了activeMenu，则使用
-    if (meta?.activeMenu) {
-      return meta.activeMenu;
-    }
-
-    return path;
-  });
-
-  return {
-    routes,
-    sideMenuRoutes,
-    activeMenu,
-    activeTopMenuPath,
-  };
-}

src/layouts/composables/useLayoutResponsive.ts

@@ -1,36 +0,0 @@
-import { watchEffect, computed } from "vue";
-import { useWindowSize } from "@vueuse/core";
-import { useAppStore } from "@/store";
-import { DeviceEnum } from "@/enums/settings/device.enum";
-
-/**
- * 布局响应式处理逻辑
- */
-export function useLayoutResponsive() {
-  const appStore = useAppStore();
-  const { width } = useWindowSize();
-
-  // 定义响应式断点
-  const WIDTH_DESKTOP = 992; // 桌面设备断点 (>=992px)
-
-  // 设置当前设备类型并调整侧边栏状态
-  watchEffect(() => {
-    const isDesktop = width.value >= WIDTH_DESKTOP;
-    const deviceType = isDesktop ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE;
-
-    // 更新设备类型
-    appStore.toggleDevice(deviceType);
-
-    // 根据设备类型调整侧边栏状态
-    if (isDesktop) {
-      appStore.openSideBar();
-    } else {
-      appStore.closeSideBar();
-    }
-  });
-
-  return {
-    isDesktop: computed(() => width.value >= WIDTH_DESKTOP),
-    isMobile: computed(() => appStore.device === DeviceEnum.MOBILE),
-  };
-}

src/layouts/index.vue

@@ -9,7 +9,8 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { useLayout } from "./composables/useLayout";
+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";
@@ -18,10 +19,13 @@ import { LayoutMode } from "@/enums/settings/layout.enum";
 import { defaultSettings } from "@/settings";
 
 const { currentLayout } = useLayout();
+const route = useRoute();
 
 // 根据当前布局模式选择对应的组件
 const currentLayoutComponent = computed(() => {
-  switch (currentLayout.value) {
+  const override = route.meta?.layout as LayoutMode | undefined;
+  const layoutToUse = override ?? currentLayout.value;
+  switch (layoutToUse) {
     case LayoutMode.TOP:
       return TopLayout;
     case LayoutMode.MIX:

src/layouts/layouts/BaseLayout.vue

@@ -14,13 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import { useLayout } from "../composables/useLayout";
-import { useLayoutResponsive } from "../composables/useLayoutResponsive";
+import { useLayout, useLayoutResponsive } from "@/composables";
 
 // 布局相关
 const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
 
-// 响应式处理
+// 响应式布局
 const { isMobile } = useLayoutResponsive();
 </script>
 

src/layouts/layouts/LeftLayout.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import { useLayout } from "../composables/useLayout";
-import { useLayoutMenu } from "../composables/useLayoutMenu";
+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";

src/layouts/layouts/MixLayout.vue

@@ -60,8 +60,7 @@
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 import { useWindowSize } from "@vueuse/core";
-import { useLayout } from "../composables/useLayout";
-import { useLayoutMenu } from "../composables/useLayoutMenu";
+import { useLayout, useLayoutMenu } from "@/composables";
 import BaseLayout from "./BaseLayout.vue";
 import AppLogo from "../components/AppLogo/index.vue";
 import MixTopMenu from "../components/Menu/MixTopMenu.vue";
@@ -72,7 +71,6 @@ 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";
-import { computed, watch } from "vue";
 import { useAppStore, usePermissionStore } from "@/store";
 
 const route = useRoute();

src/layouts/layouts/TopLayout.vue

@@ -25,8 +25,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { useLayout } from "../composables/useLayout";
-import { useLayoutMenu } from "../composables/useLayoutMenu";
+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";