From 1d14ade6b5b75b7f7e37958d95f8bb6a6dcc036d Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期一, 10 四月 2023 18:33:40 +0800
Subject: [PATCH] 优化避免鼠标移出时无法隐藏滚动条的问题

---
 src/components/TopNav/index.vue |   68 +++++++++++++++++-----------------
 1 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index aa139d4..c2d1a74 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -3,6 +3,7 @@
     :default-active="activeMenu"
     mode="horizontal"
     @select="handleSelect"
+    :ellipsis="false"
   >
     <template v-for="(item, index) in topMenus">
       <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
@@ -30,21 +31,27 @@
 <script setup>
 import { constantRoutes } from "@/router"
 import { isHttp } from '@/utils/validate'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
 
 // 椤堕儴鏍忓垵濮嬫暟
 const visibleNumber = ref(null);
-// 鏄惁涓洪娆″姞杞�
-const isFrist = ref(null);
 // 褰撳墠婵�娲昏彍鍗曠殑 index
 const currentIndex = ref(null);
+// 闅愯棌渚ц竟鏍忚矾鐢�
+const hideList = ['/index', '/user/profile'];
 
-const store = useStore();
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
 const route = useRoute();
+const router = useRouter();
 
 // 涓婚棰滆壊
-const theme = computed(() => store.state.settings.theme);
+const theme = computed(() => settingsStore.theme);
 // 鎵�鏈夌殑璺敱淇℃伅
-const routers = computed(() => store.state.permission.topbarRouters);
+const routers = computed(() => permissionStore.topbarRouters);
 
 // 椤堕儴鏄剧ず鑿滃崟
 const topMenus = computed(() => {
@@ -69,7 +76,7 @@
     for (let item in router.children) {
       if (router.children[item].parentPath === undefined) {
         if(router.path === "/") {
-          router.children[item].path = "/redirect/" + router.children[item].path;
+          router.children[item].path = "/" + router.children[item].path;
         } else {
           if(!isHttp(router.children[item].path)) {
             router.children[item].path = router.path + "/" + router.children[item].path;
@@ -86,52 +93,43 @@
 // 榛樿婵�娲荤殑鑿滃崟
 const activeMenu = computed(() => {
   const path = route.path;
-  let activePath = defaultRouter.value;
-  if (path !== undefined && path.lastIndexOf("/") > 0) {
+  let activePath = path;
+  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
     const tmpPath = path.substring(1, path.length);
     activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
-  } else if ("/index" == path || "" == path) {
-    if (!isFrist.value) {
-      isFrist.value = true;
-    } else {
-      activePath = "index";
+    if (!route.meta.link) {
+        appStore.toggleSideBarHide(false);
     }
+  } else if(!route.children) {
+    activePath = path;
+    appStore.toggleSideBarHide(true);
   }
-  let routes = activeRoutes(activePath);
-  if (routes.length === 0) {
-    activePath = currentIndex.value || defaultRouter.value
-    activeRoutes(activePath);
-  }
+  activeRoutes(activePath);
   return activePath;
 })
-// 榛樿婵�娲荤殑璺敱
-const defaultRouter = computed(() => {
-  let router;
-  Object.keys(routers.value).some((key) => {
-    if (!routers.value[key].hidden) {
-      router = routers.value[key].path;
-      return true;
-    }
-  });
-  return router;
-})
+
 function setVisibleNumber() {
   const width = document.body.getBoundingClientRect().width / 3;
   visibleNumber.value = parseInt(width / 85);
 }
+
 function handleSelect(key, keyPath) {
   currentIndex.value = key;
+  const route = routers.value.find(item => item.path === key);
   if (isHttp(key)) {
     // http(s):// 璺緞鏂扮獥鍙ｆ墦寮�
     window.open(key, "_blank");
-  } else if (key.indexOf("/redirect") !== -1) {
-    // /redirect 璺緞鍐呴儴鎵撳紑
-    router.push({ path: key.replace("/redirect", "") });
+  } else if (!route || !route.children) {
+    // 娌℃湁瀛愯矾鐢辫矾寰勫唴閮ㄦ墦寮�
+    router.push({ path: key });
+    appStore.toggleSideBarHide(true);
   } else {
     // 鏄剧ず宸︿晶鑱斿姩鑿滃崟
     activeRoutes(key);
+    appStore.toggleSideBarHide(false);
   }
 }
+
 function activeRoutes(key) {
   let routes = [];
   if (childrenMenus.value && childrenMenus.value.length > 0) {
@@ -142,7 +140,9 @@
     });
   }
   if(routes.length > 0) {
-    store.commit("SET_SIDEBAR_ROUTERS", routes);
+    permissionStore.setSidebarRouters(routes);
+  } else {
+    appStore.toggleSideBarHide(true);
   }
   return routes;
 }
@@ -175,7 +175,7 @@
 }
 
 /* sub-menu item */
-.topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {
+.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
   float: left;
   height: 50px !important;
   line-height: 50px !important;

--
Gitblit v1.9.3