消息推送

src/App.vue

@@ -5,24 +5,20 @@
       <transition v-if="isLock && $route.name !== LoginName" name="slide-up">
         <LockScreen />
       </transition>
-      <global-websocket :uri="'/api/websocket/'+userInfo.id" @rollback="rollback" />
     </AppProvider>
   </el-config-provider>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref,defineAsyncComponent,h } from 'vue';
+  import { computed, onMounted, onUnmounted, ref } from 'vue';
   import { ElConfigProvider,ElNotification } from 'element-plus';
   import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useRoute } from 'vue-router';
   import { PageEnum } from '@/enums/pageEnum';
-  import { useUserStore } from '@/store/modules/user';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import Watermark from '@/utils/wartermark';
-  import { initWebSocket,sendWebSocket } from '@/components/Websocket/index';
-  const GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
 
   const route = useRoute();
   const useLockscreen = useLockscreenStore();
@@ -34,9 +30,6 @@
   const { getIsWaterMark } = useProjectSetting();
   const LoginName = PageEnum.BASE_LOGIN_NAME;
 
-  const userStore = useUserStore();
-  const userInfo: object = userStore.getUserInfo || {};
-
   let timer;
 
   const timekeeping = () => {
@@ -56,15 +49,6 @@
       }
     }, 1000);
   };
-
-  const rollback = (msg)=>{
-    ElNotification({
-      type: 'info',
-      title: '通知',
-      message: h('div', msg),
-      duration: 5000,
-    });
-  }
   onMounted(() => {
     if (getIsWaterMark.value) {
       const waterText = import.meta.env.VITE_GLOB_APP_TITLE;

src/layout/index.vue

@@ -74,10 +74,12 @@
       </el-icon>
     </div>
   </template>
+  <global-websocket :uri="'/api/websocket/'+userInfo.id" @rollback="rollback" />
 </template>
 
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted, watch, provide } from 'vue';
+  import { ref, unref, computed, onMounted, watch, provide,h,defineAsyncComponent  } from 'vue';
+  import { ElNotification } from 'element-plus';
   import { Logo } from './components/Logo';
   import { TabsView } from './components/TagsView';
   import { MainView } from './components/Main';
@@ -86,12 +88,15 @@
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
   import { useRoute } from 'vue-router';
+  import { useUserStore } from '@/store/modules/user';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
   import ProjectSetting from './components/Header/ProjectSetting.vue';
   import { useFullscreen } from '@vueuse/core';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { SettingOutlined } from '@vicons/antd';
   import Sider from './components/Sider/Sider.vue';
+  import { initWebSocket,sendWebSocket } from '@/components/Websocket/index';
+  const GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
 
   const { getDarkTheme } = useDesignSetting();
   const {
@@ -115,6 +120,8 @@
   const adminBodyRef = ref<HTMLElement | null>(null);
 
   const { isFullscreen, toggle } = useFullscreen(adminBodyRef);
+  const userStore = useUserStore();
+  const userInfo: object = userStore.getUserInfo || {};
 
   provide('isPageFullScreen', isFullscreen);
   provide('collapsed', collapsed);
@@ -223,7 +230,14 @@
       collapsed.value = true;
     }
   };
-
+  const rollback = (msg)=>{
+    ElNotification({
+      type: 'info',
+      title: '通知',
+      message: h('div', msg),
+      duration: 5000,
+    });
+  }
   onMounted(() => {
     const { themeColorChange } = drawerSetting.value;
     themeColorChange('#165DFF');