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

src/composables/index.ts

@@ -1,11 +1,7 @@
-/**
- * 全局组合式函数入口文件
- * 导出所有可用的组合式函数
- */
+export { useStomp } from "./websocket/useStomp";
+export { useDictSync } from "./websocket/useDictSync";
+export { useOnlineCount } from "./websocket/useOnlineCount";
 
-// 导出核心组合式函数
-export { useStomp } from "./useStomp";
-
-// 导出业务服务组合式函数
-export { useDictSync } from "./useDictSync";
-export { useOnlineCount } from "./useOnlineCount";
+export { useLayout } from "./layout/useLayout";
+export { useLayoutMenu } from "./layout/useLayoutMenu";
+export { useLayoutResponsive } from "./layout/useLayoutResponsive";

src/composables/layout/useLayout.ts

@@ -0,0 +1,62 @@
+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/composables/layout/useLayoutMenu.ts

@@ -0,0 +1,39 @@
+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/composables/layout/useLayoutResponsive.ts

@@ -0,0 +1,40 @@
+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 DESKTOP_BREAKPOINT = 992;
+
+  // 计算设备类型
+  const isDesktop = computed(() => width.value >= DESKTOP_BREAKPOINT);
+  const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+
+  // 监听屏幕尺寸变化，自动调整设备类型和侧边栏状态
+  watchEffect(() => {
+    const deviceType = isDesktop.value ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE;
+
+    // 更新设备类型
+    appStore.toggleDevice(deviceType);
+
+    // 根据设备类型调整侧边栏状态
+    if (isDesktop.value) {
+      appStore.openSideBar();
+    } else {
+      appStore.closeSideBar();
+    }
+  });
+
+  return {
+    isDesktop,
+    isMobile,
+  };
+}

src/composables/websocket/useDictSync.ts

@@ -1,7 +1,7 @@
+import { ref } from "vue";
 import { useDictStoreHook } from "@/store/modules/dict-store";
 import { useStomp } from "./useStomp";
 import type { IMessage } from "@stomp/stompjs";
-import { ref } from "vue";
 
 // 字典消息类型
 export interface DictMessage {

src/composables/websocket/useOnlineCount.ts

@@ -1,7 +1,8 @@
-import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
+import { ref, watch, onMounted, onUnmounted, getCurrentInstance } from "vue";
 import { useStomp } from "./useStomp";
 import { registerWebSocketInstance } from "@/plugins/websocket";
 import { AuthStorage } from "@/utils/auth";
+import { ElMessage } from "element-plus";
 
 // 全局单例实例
 let globalInstance: ReturnType<typeof createOnlineCountHook> | null = null;