src/App.vue

@@ -27,29 +27,34 @@
       :y-offset="60"
       :rotate="-15"
     />
+    <global-websocket :uri="'/api/websocket/' + userInfo.id" @rollback="rollback" />
   </NConfigProvider>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted } from 'vue';
+  import { computed, onMounted, onUnmounted, defineAsyncComponent, h } from 'vue';
   import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
   import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useRoute } from 'vue-router';
+  import { useUserStore } from '@/store/modules/user';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { initWebSocket, sendWebSocket } from '@/components/Websocket/index';
+  const GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
   import { lighten } from '@/utils';
 
-  /**
-   * 定义参数
-   */
   const route = useRoute();
   const useLockscreen = useLockscreenStore();
   const designStore = useDesignSettingStore();
+  const userStore = useUserStore();
+  const userInfo: object = userStore.getUserInfo || {};
   const isLock = computed(() => useLockscreen.isLock);
   const lockTime = computed(() => useLockscreen.lockTime);
+
   const proName = import.meta.env.VITE_GLOB_APP_TITLE;
+
   const { getIsWaterMark } = useProjectSetting();
 
   /**
@@ -95,10 +100,14 @@
       }
     }, 1000);
   };
+  const rollback = (msg) => {
+    $notification.info({
+      title: '通知',
+      content: () => h('div', msg),
+      duration: 5000,
+    });
+  };
 
-  /**
-   * 钩子函数
-   */
   onMounted(() => {
     // document.addEventListener('mousedown', timekeeping);
   });

src/layout/index.vue

@@ -71,22 +71,18 @@
       </n-icon>
     </div>
   </template>
-  <!-- 全局WebSocket通讯组件 -->
-  <global-websocket :uri="'/api/websocket/' + userInfo.id" @rollback="rollback" />
 </template>
 
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted, watch, provide, defineAsyncComponent, h } from 'vue';
+  import { ref, unref, computed, onMounted, watch, provide } from 'vue';
   import { Logo } from './components/Logo';
   import { TabsView } from './components/TagsView';
   import { MainView } from './components/Main';
   import { AsideMenu } from './components/Menu';
   import { PageHeader } from './components/Header';
   import { PageFooter } from './components/Footer';
-  import { useUserStore } from '@/store/modules/user';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { useNotification } from 'naive-ui';
   import { useRoute } from 'vue-router';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
   import ProjectSetting from './components/Header/ProjectSetting.vue';
@@ -94,12 +90,7 @@
   import { SettingOutlined } from '@vicons/antd';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
 
-  /**
-   * 定义参数
-   */
-  const GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
   const { getDarkTheme } = useDesignSetting();
-  const notification = useNotification();
   const {
     getNavMode,
     getNavTheme,
@@ -108,23 +99,22 @@
     getMultiTabsSetting,
     getIsProjectSetting,
   } = useProjectSetting();
+
   const settingStore = useProjectSettingStore();
   const designStore = useDesignSettingStore();
-  const userStore = useUserStore();
-  const userInfo: object = userStore.getUserInfo || {};
+
   const navMode = getNavMode;
+
   const drawerSetting = ref();
   const collapsed = ref<boolean>(false);
   const adminBodyRef = ref<MaybeElement>();
+
   const { isFullscreen, toggle } = useFullscreen(adminBodyRef);
 
   provide('isPageFullScreen', isFullscreen);
   provide('collapsed', collapsed);
   provide('openSetting', openSetting);
 
-  /**
-   * 侦听器
-   */
   watch(
     () => collapsed.value,
     (to) => {
@@ -217,21 +207,6 @@
     }
   };
 
-  /**
-   * 消息通知回调
-   * @param msg 消息
-   */
-  const rollback = (msg) => {
-    notification.info({
-      title: '通知',
-      content: () => h('div', msg),
-      duration: 5000,
-    });
-  };
-
-  /**
-   * 钩子函数
-   */
   onMounted(() => {
     window.addEventListener('resize', watchWidth);
   });