From 6730608920c9d538d47ab703de557b80a4e10db5 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Fri, 12 Sep 2025 18:00:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=84=E5=90=88=E5=BC=8F?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Notification/index.vue         |  4 ++--
 src/composables/index.ts                      | 16 +++++---------
 .../layout}/useLayout.ts                      |  0
 .../layout}/useLayoutMenu.ts                  |  0
 .../layout}/useLayoutResponsive.ts            | 22 +++++++++++--------
 .../{ => websocket}/useDictSync.ts            |  2 +-
 .../{ => websocket}/useOnlineCount.ts         |  3 ++-
 src/composables/{ => websocket}/useStomp.ts   |  0
 src/layouts/index.vue                         |  8 +++++--
 src/layouts/{views => layouts}/BaseLayout.vue |  5 ++---
 src/layouts/{views => layouts}/LeftLayout.vue |  4 ++--
 src/layouts/{views => layouts}/MixLayout.vue  |  4 +---
 src/layouts/{views => layouts}/TopLayout.vue  |  4 ++--
 src/plugins/websocket.ts                      |  4 ++--
 src/views/dashboard/index.vue                 |  2 +-
 src/views/demo/dict-sync.vue                  |  2 +-
 src/views/demo/websocket.vue                  |  2 +-
 17 files changed, 42 insertions(+), 40 deletions(-)
 rename src/{layouts/composables => composables/layout}/useLayout.ts (100%)
 rename src/{layouts/composables => composables/layout}/useLayoutMenu.ts (100%)
 rename src/{layouts/composables => composables/layout}/useLayoutResponsive.ts (50%)
 rename src/composables/{ => websocket}/useDictSync.ts (100%)
 rename src/composables/{ => websocket}/useOnlineCount.ts (98%)
 rename src/composables/{ => websocket}/useStomp.ts (100%)
 rename src/layouts/{views => layouts}/BaseLayout.vue (84%)
 rename src/layouts/{views => layouts}/LeftLayout.vue (95%)
 rename src/layouts/{views => layouts}/MixLayout.vue (98%)
 rename src/layouts/{views => layouts}/TopLayout.vue (96%)

diff --git a/src/components/Notification/index.vue b/src/components/Notification/index.vue
index 8d6ab2be..8d3babaf 100644
--- a/src/components/Notification/index.vue
+++ b/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;
diff --git a/src/composables/index.ts b/src/composables/index.ts
index c848f9ef..2a2a9a8f 100644
--- a/src/composables/index.ts
+++ b/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";
diff --git a/src/layouts/composables/useLayout.ts b/src/composables/layout/useLayout.ts
similarity index 100%
rename from src/layouts/composables/useLayout.ts
rename to src/composables/layout/useLayout.ts
diff --git a/src/layouts/composables/useLayoutMenu.ts b/src/composables/layout/useLayoutMenu.ts
similarity index 100%
rename from src/layouts/composables/useLayoutMenu.ts
rename to src/composables/layout/useLayoutMenu.ts
diff --git a/src/layouts/composables/useLayoutResponsive.ts b/src/composables/layout/useLayoutResponsive.ts
similarity index 50%
rename from src/layouts/composables/useLayoutResponsive.ts
rename to src/composables/layout/useLayoutResponsive.ts
index b8dd9ada..83554505 100644
--- a/src/layouts/composables/useLayoutResponsive.ts
+++ b/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 ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE;
+    const deviceType = isDesktop.value ? 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),
-    isMobile: computed(() => appStore.device === DeviceEnum.MOBILE),
+    isDesktop,
+    isMobile,
   };
 }
diff --git a/src/composables/useDictSync.ts b/src/composables/websocket/useDictSync.ts
similarity index 100%
rename from src/composables/useDictSync.ts
rename to src/composables/websocket/useDictSync.ts
index c84c7297..d1efb85d 100644
--- a/src/composables/useDictSync.ts
+++ b/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 {
diff --git a/src/composables/useOnlineCount.ts b/src/composables/websocket/useOnlineCount.ts
similarity index 98%
rename from src/composables/useOnlineCount.ts
rename to src/composables/websocket/useOnlineCount.ts
index 119c2290..ae4e46bb 100644
--- a/src/composables/useOnlineCount.ts
+++ b/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;
diff --git a/src/composables/useStomp.ts b/src/composables/websocket/useStomp.ts
similarity index 100%
rename from src/composables/useStomp.ts
rename to src/composables/websocket/useStomp.ts
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 9b9a0706..d5e28f63 100644
--- a/src/layouts/index.vue
+++ b/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:
diff --git a/src/layouts/views/BaseLayout.vue b/src/layouts/layouts/BaseLayout.vue
similarity index 84%
rename from src/layouts/views/BaseLayout.vue
rename to src/layouts/layouts/BaseLayout.vue
index 3e305016..ca96d927 100644
--- a/src/layouts/views/BaseLayout.vue
+++ b/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>
 
diff --git a/src/layouts/views/LeftLayout.vue b/src/layouts/layouts/LeftLayout.vue
similarity index 95%
rename from src/layouts/views/LeftLayout.vue
rename to src/layouts/layouts/LeftLayout.vue
index aa62b317..9fa94cee 100644
--- a/src/layouts/views/LeftLayout.vue
+++ b/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";
diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/layouts/MixLayout.vue
similarity index 98%
rename from src/layouts/views/MixLayout.vue
rename to src/layouts/layouts/MixLayout.vue
index 7f9c111f..6ca8f664 100644
--- a/src/layouts/views/MixLayout.vue
+++ b/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();
diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/layouts/TopLayout.vue
similarity index 96%
rename from src/layouts/views/TopLayout.vue
rename to src/layouts/layouts/TopLayout.vue
index 0359eb86..485c41fc 100644
--- a/src/layouts/views/TopLayout.vue
+++ b/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";
diff --git a/src/plugins/websocket.ts b/src/plugins/websocket.ts
index a2017999..ef39248b 100644
--- a/src/plugins/websocket.ts
+++ b/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初始化完成");
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 8125bcf4..679962ef 100644
--- a/src/views/dashboard/index.vue
+++ b/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();
diff --git a/src/views/demo/dict-sync.vue b/src/views/demo/dict-sync.vue
index dd3d8738..ddb915f2 100644
--- a/src/views/demo/dict-sync.vue
+++ b/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";
diff --git a/src/views/demo/websocket.vue b/src/views/demo/websocket.vue
index 5ae54bb8..56e9cc61 100644
--- a/src/views/demo/websocket.vue
+++ b/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();