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

src/components/Notification/index.vue

@@ -86,14 +86,14 @@ const noticeList = ref<NoticePageVO[]>([]);
 const noticeDialogVisible = ref(false);
 const noticeDetail = ref<NoticeDetailVO | null>(null);
 
-import { useStomp } from "@/composables/useStomp";
+import { useStomp } from "@/composables/websocket/useStomp";
 const { subscribe, unsubscribe, isConnected } = useStomp();
 
 watch(
   () => isConnected.value,
   (connected) => {
     if (connected) {
-      subscribe("/user/queue/message", (message) => {
+      subscribe("/user/queue/message", (message: any) => {
         console.log("收到通知消息：", message);
         const data = JSON.parse(message.body);
         const id = data.id;

src/composables/index.ts

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

src/composables/layout/useLayoutResponsive.ts

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

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 { useLayout, useLayoutResponsive } from "@/composables";
-import { useLayoutResponsive } from "../composables/useLayoutResponsive";
 
 // 布局相关
 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 { useLayout } from "@/composables/layout/useLayout";
-import { useLayoutMenu } from "../composables/useLayoutMenu";
+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 { useLayout, useLayoutMenu } from "@/composables";
-import { useLayoutMenu } from "../composables/useLayoutMenu";
 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 { useLayout } from "@/composables/layout/useLayout";
-import { useLayoutMenu } from "../composables/useLayoutMenu";
+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";

src/plugins/websocket.ts

@@ -1,4 +1,4 @@
-import { useDictSync } from "@/composables/useDictSync";
+import { useDictSync } from "@/composables";
 import { AuthStorage } from "@/utils/auth";
 // 不直接导入 store 或 userStore
 
@@ -63,7 +63,7 @@ export function setupWebSocket() {
       console.log("[WebSocketPlugin] 字典WebSocket初始化完成");
 
       // 初始化在线用户计数WebSocket
-      import("@/composables/useOnlineCount").then(({ useOnlineCount }) => {
+      import("@/composables").then(({ useOnlineCount }) => {
         const onlineCountInstance = useOnlineCount({ autoInit: false });
         onlineCountInstance.initWebSocket();
         console.log("[WebSocketPlugin] 在线用户计数WebSocket初始化完成");

src/views/dashboard/index.vue

@@ -359,7 +359,7 @@ import { useUserStore } from "@/store/modules/user-store";
 import { formatGrowthRate } from "@/utils";
 import { useTransition, useDateFormat } from "@vueuse/core";
 import { Connection, Failed } from "@element-plus/icons-vue";
-import { useOnlineCount } from "@/composables/useOnlineCount";
+import { useOnlineCount } from "@/composables";
 
 // 在线用户数量组件相关
 const { onlineUserCount, lastUpdateTime, isConnected } = useOnlineCount();

src/views/demo/dict-sync.vue

@@ -142,7 +142,7 @@
 import { useDictStoreHook } from "@/store/modules/dict-store";
 import { useDateFormat } from "@vueuse/core";
 import DictAPI, { DictItemForm } from "@/api/system/dict-api";
-import { useDictSync, DictMessage } from "@/composables/useDictSync";
+import { useDictSync, DictMessage } from "@/composables";
 
 // 性别字典编码
 const DICT_CODE = "gender";

src/views/demo/websocket.vue

@@ -97,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { useStomp } from "@/composables/useStomp";
+import { useStomp } from "@/composables/websocket/useStomp";
 import { useUserStoreHook } from "@/store/modules/user-store";
 
 const userStore = useUserStoreHook();