9/20

src/layout/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar" :class="'nav' + navType">
+  <div :class="'nav' + navType" class="navbar">
     <hamburger
       v-show="Showhamburger"
       id="hamburger-container"
@@ -13,9 +13,9 @@
       <template v-if="appStore.device !== 'mobile'">
         <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
           <div>
-            <el-popover placement="bottom-end" trigger="click" transition="el-zoom-in-top" :width="400" :persistent="false">
+            <el-popover :persistent="false" :width="400" placement="bottom-end" transition="el-zoom-in-top" trigger="click">
               <template #reference>
-                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
+                <el-badge :max="99" :value="newNotice > 0 ? newNotice : ''">
                   <div class="right-menu-item hover-effect" style="display: block"><svg-icon icon-class="message" /></div>
                 </el-badge>
               </template>
@@ -29,15 +29,15 @@
       <div class="avatar-container">
         <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
           <div class="avatar-wrapper">
-            <img alt="头像" :src="userStore.avatar" class="user-avatar" />
+            <img :src="userStore.avatar" alt="头像" class="user-avatar" />
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item divided command="changecommunity" v-if="isShow">
+              <el-dropdown-item v-if="isShow" command="changecommunity" divided>
                 <span>{{ proxy.$t('navbar.community') }}</span>
               </el-dropdown-item>
-              <router-link to="/system/user/profile" v-if="isShow" v-has-permi="['system:user:profile']">
+              <router-link v-if="isShow" v-has-permi="['system:user:profile']" to="/system/user/profile">
                 <el-dropdown-item>{{ proxy.$t('navbar.personalCenter') }}</el-dropdown-item>
               </router-link>
               <el-dropdown-item :divided="isShow" command="logout">
@@ -51,7 +51,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import hamburger from '@/components/Hamburger/index.vue';
 import { useAppStore } from '@/store/modules/app';
 import { useUserStore } from '@/store/modules/user';
@@ -61,7 +61,8 @@ import notice from './notice/index.vue';
 import router from '@/router';
 import { ElMessageBoxOptions } from 'element-plus/es/components/message-box/src/message-box.type';
 import { CaretBottom } from '@element-plus/icons-vue';
-
+import { closeWebSocket } from '@/utils/websocket';
+import { closeSSE } from '@/utils/sse';
 const props = defineProps({
   Showhamburger: {
     type: Boolean,
@@ -93,6 +94,9 @@ const logout = async () => {
     type: 'warning'
   } as ElMessageBoxOptions);
   userStore.logout().then(() => {
+    // 关闭长连接
+    closeWebSocket();
+    closeSSE();
     router.replace({
       path: '/login',
       query: {

src/layout/components/Sidebar/index.vue

@@ -4,24 +4,25 @@
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
         <el-menu
-          :default-active="activeMenu"
-          :collapse="isCollapse"
+          :active-text-color="theme"
           :background-color="bgColor"
+          :collapse="isCollapse"
+          :collapse-transition="false"
+          :default-active="activeMenu"
+          :popper-offset="12"
           :text-color="textColor"
           :unique-opened="true"
-          :active-text-color="theme"
-          :collapse-transition="false"
-          :popper-offset="12"
           mode="vertical"
+          @select="handleMenuSelect"
         >
-          <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
+          <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :base-path="r.path" :item="r" />
         </el-menu>
       </transition>
     </el-scrollbar>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import Logo from './Logo.vue';
 import SidebarItem from './SidebarItem.vue';
 import variables from '@/assets/styles/variables.module.scss';
@@ -54,4 +55,22 @@ const activeMenu = computed(() => {
 const bgColor = '#dfedff';
 // const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
 const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
+
+const router = useRouter();
+// UI层菜单点击锁
+const menuLoading = ref(false);
+
+const handleMenuSelect = async (path: string) => {
+  if (menuLoading.value) return;
+  if (router.currentRoute.value.path === path) return;
+
+  try {
+    menuLoading.value = true;
+    await router.push(path);
+  } catch (e) {
+    // 捕获导航取消异常
+  } finally {
+    menuLoading.value = false;
+  }
+};
 </script>