fix(ui,router): 🐛 修复移动端底部遮挡并消除路由导航警告

调整登录页滚动容器与底部安全区留白，避免小屏下底部 UI 被遮挡

为“我的”页面增加底部留白，防止“退出登录”被悬浮导航覆盖

将全局路由守卫改为 Vue Router 返回值写法，移除 next() 过时用法

在悬浮导航中避免重复跳转当前路由，消除 redundant navigation 告警

src/layout/components/FloatingNavBar.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useDark } from '@vueuse/core'
-import { useRoute, useRouter } from 'vue-router'
+import { NavigationFailureType, isNavigationFailure, useRoute, useRouter } from 'vue-router'
 import { useDesignSettingStore } from '@/store/modules/designSetting'
 
 interface NavItem {
@@ -188,8 +188,20 @@ function bindResizeObserver() {
   }
 }
 
+function normalizePath(path: string) {
+  return path.replace(/\/+$/, '') || '/'
+}
+
 function goNav(path: string) {
-  router.push(path)
+  // Avoid redundant navigation warnings when clicking current tab.
+  if (normalizePath(currentRoute.path) === normalizePath(path)) {
+    return
+  }
+  router.push(path).catch((err) => {
+    if (!isNavigationFailure(err, NavigationFailureType.duplicated)) {
+      throw err
+    }
+  })
 }
 
 function handleNavClick(index: number, path: string) {

src/router/router-guards.ts

@@ -15,29 +15,26 @@ const LOGIN_PATH = PageEnum.BASE_LOGIN
 const whitePathList = [LOGIN_PATH] // no redirect whitelist
 
 export function createRouterGuards(router: Router) {
-  router.beforeEach(async (to, from, next) => {
+  router.beforeEach(async (to, from) => {
     // to: 即将要进入的目标
     // from: 当前导航正要离开的路由
     NProgress.start()
     const userStore = useUserStoreWithOut()
 
     if (from.path === LOGIN_PATH && to.name === PageEnum.ERROR_PAGE_NAME) {
-      next(PageEnum.BASE_HOME)
+      return PageEnum.BASE_HOME
-      return
     }
 
     // Whitelist can be directly entered
     if (whitePathList.includes(to.path as PageEnum)) {
-      next()
+      return true
-      return
     }
 
     const token = storage.get(ACCESS_TOKEN)
 
     if (!token) {
       // redirect login page
-      next(LOGIN_PATH)
+      return LOGIN_PATH
-      return
     }
 
     // 当上次更新时间为空时获取用户信息
@@ -46,12 +43,11 @@ export function createRouterGuards(router: Router) {
         await userStore.GetUserInfo()
       }
       catch (err) {
-        next()
+        return true
-        return
       }
     }
 
-    next()
+    return true
   })
 
   // 进入某个路由之后触发的钩子

src/views/my/index.vue

@@ -88,6 +88,11 @@ const getUserCoverBg = computed(() => {
 </script>
 
 <style lang="less" scoped>
+.my-page {
+  min-height: 100%;
+  padding-bottom: calc(110px + env(safe-area-inset-bottom));
+}
+
 .my-bg {
   clip-path: inset(0 -55% 0 -55% round 0 0 100% 100%);
   background-size: cover;