优化消息通知

src/App.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted, onUnmounted, ref } from 'vue';
-  import { ElConfigProvider,ElNotification } from 'element-plus';
+  import { ElConfigProvider, ElNotification } from 'element-plus';
   import { LockScreen } from '@/components/Lockscreen';
   import { AppProvider } from '@/components/Application';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
@@ -20,18 +20,21 @@
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import Watermark from '@/utils/wartermark';
 
+  /**
+   * 定义参数
+   */
   const route = useRoute();
   const useLockscreen = useLockscreenStore();
-
   const isLock = computed(() => useLockscreen.isLock);
   const lockTime = computed(() => useLockscreen.lockTime);
-
   const zIndex = ref(3000);
   const { getIsWaterMark } = useProjectSetting();
   const LoginName = PageEnum.BASE_LOGIN_NAME;
-
   let timer;
 
+  /**
+   * 定义锁屏
+   */
   const timekeeping = () => {
     clearInterval(timer);
     if (route.name === LoginName || isLock.value) return;
@@ -49,6 +52,10 @@
       }
     }, 1000);
   };
+
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
     if (getIsWaterMark.value) {
       const waterText = import.meta.env.VITE_GLOB_APP_TITLE;

src/layout/index.vue

@@ -55,7 +55,7 @@
         <div class="admin-layout-content-main">
           <div class="main-view" ref="adminBodyRef">
             <MainView />
-            <PageFooter/>
+            <PageFooter />
           </div>
         </div>
         <!-- <el-back-top :right="100" /> -->
@@ -74,11 +74,12 @@
       </el-icon>
     </div>
   </template>
-  <global-websocket :uri="'/api/websocket/'+userInfo.id" @rollback="rollback" />
+  <!-- 全局WebSocket通讯组件 -->
+  <global-websocket :uri="'/api/websocket/' + userInfo.id" @rollback="rollback" />
 </template>
 
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted, watch, provide,h,defineAsyncComponent  } 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';
@@ -95,9 +96,11 @@
   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 GlobalWebsocket = defineAsyncComponent(() => import('@/components/Websocket/index.vue'));
   const { getDarkTheme } = useDesignSetting();
   const {
     getNavMode,
@@ -109,16 +112,12 @@
     getMultiTabsSetting,
     getIsProjectSetting,
   } = useProjectSetting();
-
   const settingStore = useProjectSettingStore();
   const designStore = useDesignSettingStore();
-
   const navMode = getNavMode;
-
   const drawerSetting = ref();
   const collapsed = ref<boolean>(false);
   const adminBodyRef = ref<HTMLElement | null>(null);
-
   const { isFullscreen, toggle } = useFullscreen(adminBodyRef);
   const userStore = useUserStore();
   const userInfo: object = userStore.getUserInfo || {};
@@ -127,6 +126,9 @@
   provide('collapsed', collapsed);
   provide('openSetting', openSetting);
 
+  /**
+   * 侦听器
+   */
   watch(
     () => collapsed.value,
     (to) => {
@@ -230,14 +232,23 @@
       collapsed.value = true;
     }
   };
-  const rollback = (msg)=>{
+
+  /**
+   * 消息通知回调
+   * @param msg 消息
+   */
+  const rollback = (msg) => {
     ElNotification({
       type: 'info',
       title: '通知',
       message: h('div', msg),
       duration: 5000,
     });
-  }
+  };
+
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
     const { themeColorChange } = drawerSetting.value;
     themeColorChange('#165DFF');
@@ -436,7 +447,7 @@
       .el-menu {
         --el-menu-bg-color: #fff;
         --el-menu-text-color: rgb(51, 54, 57);
-        --el-menu-hover-bg-color: #165DFF;
+        --el-menu-hover-bg-color: #165dff;
         --el-menu-hover-text-color: #fff;
       }
     }