feat: 优化menu store路由刷新、跳转功能

CHANGELOG.md

@@ -14,6 +14,9 @@
 - `changeMenuModelValue`
   - 现在方法支持第三个参数配置跳转时，是否携带参数
   - 避免递归查找的时候，一些不必要的操作，优化性能
+- 核心模块 `Menu` 的优化细节
+  - 使用 `router.getRoutes` 方法替代以前的递归查找（`updateMenuKeyWhenRouteUpdate` 方法）
+  - 优化当菜单更新时、url 地址更新时都会重复检查的问题，现在检查是惰性的
 
 ## Fixes
 

src/components/RTable/src/components/C.tsx

@@ -33,7 +33,7 @@ import type { MaybeArray } from '@/types/modules/utils'
 type FixedClick = (type: 'left' | 'right', option: C, index: number) => void
 
 const renderSwitcherIcon = () => (
-  <RIcon name="draggable" size={config.tableIconSize} />
+  <RIcon name="draggable" size={config.tableIconSize} cursor="all-scroll" />
 )
 
 const RowIconRender = ({

src/router/appRouteModules.ts

@@ -28,4 +28,4 @@ import { expandRoutes } from '@/router/helper/expandRoutes'
 export const getAppRawRoutes = () => orderRoutes(combineRawRouteModules())
 
 /** 获取所有平铺展开的路由 */
-export const appExpandRoutes = expandRoutes(getAppRawRoutes())
+export const appExpandRoutes = () => expandRoutes(getAppRawRoutes())

src/router/routes.ts

@@ -25,7 +25,7 @@ export default async () => {
       name: 'layout',
       redirect: getRootPath.value,
       component: Layout,
-      children: appExpandRoutes,
+      children: appExpandRoutes(),
     },
   ]
 }

src/store/modules/menu/index.ts

@@ -35,7 +35,6 @@ import {
 } from './helper'
 import { useI18n } from '@/hooks/web'
 import { getAppRawRoutes } from '@/router/appRouteModules'
-import { useVueRouter } from '@/hooks/web'
 import { throttle } from 'lodash-es'
 import { useKeepAliveActions } from '@/store'
 
@@ -47,7 +46,7 @@ import type { LocationQuery } from 'vue-router'
 export const piniaMenuStore = defineStore(
   'menu',
   () => {
-    const { router } = useVueRouter()
+    const router = useRouter()
     const route = useRoute()
     const { t } = useI18n()
     const { setKeepAliveInclude } = useKeepAliveActions()
@@ -61,6 +60,40 @@ export const piniaMenuStore = defineStore(
       currentMenuOption: null, // 当前激活菜单项
     })
     const isSetupAppMenuLock = ref(true)
+    const isRootPathReg = new RegExp('/', 'g')
+
+    const resolveOption = (option: AppMenuOption) => {
+      const { meta } = option
+
+      /** 设置 label, i18nKey 优先级最高 */
+      const label = computed(() =>
+        meta?.i18nKey ? t(`${meta!.i18nKey}`) : meta?.noLocalTitle,
+      )
+      /** 拼装菜单项 */
+      const route = {
+        ...option,
+        key: option.path,
+        label: () =>
+          h(NEllipsis, null, {
+            default: () => label.value,
+          }),
+        breadcrumbLabel: label.value,
+        /** 检查该菜单项是否展示 */
+      } as AppMenuOption
+      /** 合并 icon */
+      const attr: AppMenuOption = Object.assign({}, route, {
+        icon: hasMenuIcon(option),
+      })
+
+      if (option.path === getCatchMenuKey()) {
+        /** 设置标签页(初始化时执行设置一次, 避免含有平级路由模式情况时出现不能正确设置标签页的情况) */
+        setMenuTagOptionsWhenMenuValueChange(option.path, attr)
+      }
+
+      attr.show = validMenuItemShow(attr)
+
+      return attr
+    }
 
     /**
      *
@@ -138,9 +171,21 @@ export const piniaMenuStore = defineStore(
      *
      * @param key 菜单更新后的 key
      * @param option 菜单当前 option 项
+     * @param query 路由参数
      *
      * @remark 修改 `menu key` 后的回调函数
      * @remark 修改后, 缓存当前选择 key 并且存储标签页与跳转页面(router push 操作)
+     *
+     * 如果 windowOpen 存在, 则直接打开新窗口，不会更新当前菜单状态，也不会做其他的操作
+     * 如果 sameLevel 存在，则会追加一层面包屑，并不会触发菜单更新与标签页更新
+     *
+     * 在执行更新操作后会做一些缓存操作
+     *
+     * 该方法是整个模板的核心驱动: 菜单、标签页、面包屑、浏览器标题等等的更新方法
+     *
+     * @example
+     * changeMenuModelValue('/dashboard',{ dashboard option  }) // 跳转页面至 dashboard，并且更新菜单状态、标签页、面包屑、浏览器标题等等
+     * changeMenuModelValue('/dashboard', { dashboard option }, { id: 1 }) // 执行更新操作，并且传递参数
      */
     const changeMenuModelValue = (
       key: string | number,
@@ -178,7 +223,7 @@ export const piniaMenuStore = defineStore(
         }
 
         /** 检查是否为根路由 */
-        const count = (path.match(new RegExp('/', 'g')) || []).length
+        const count = (path.match(isRootPathReg) || []).length
 
         /** 更新缓存队列 */
         setKeepAliveInclude(option as unknown as AppMenuOption)
@@ -225,23 +270,24 @@ export const piniaMenuStore = defineStore(
         combinePath = splitPath[splitPath.length - 1]
       }
 
-      const findMenuOption = (pathKey: string, options: AppMenuOption[]) => {
-        for (const curr of options) {
-          if (curr.children?.length) {
-            findMenuOption(pathKey, curr.children)
-
-            continue
-          }
-
-          if (pathKey === curr.key && !curr?.children?.length) {
-            changeMenuModelValue(pathKey, curr, query)
-
-            break
-          }
-        }
+      // 如果当前菜单 key 与路由地址相同，说明不是手动更新 url， 则不会触发更新
+      if (combinePath === menuState.menuKey) {
+        return
       }
 
-      findMenuOption(combinePath, menuState.options)
+      const findMenuOption = router
+        .getRoutes()
+        .find((curr) =>
+          count > 1 ? path === curr.path : combinePath === curr.path,
+        )
+
+      if (findMenuOption) {
+        changeMenuModelValue(
+          count > 1 ? combinePath : path,
+          resolveOption(findMenuOption as unknown as AppMenuOption),
+          query,
+        )
+      }
     }
 
     /**
@@ -251,39 +297,6 @@ export const piniaMenuStore = defineStore(
      */
     const setupAppMenu = () => {
       return new Promise<void>((resolve) => {
-        const resolveOption = (option: AppMenuOption) => {
-          const { meta } = option
-
-          /** 设置 label, i18nKey 优先级最高 */
-          const label = computed(() =>
-            meta?.i18nKey ? t(`${meta!.i18nKey}`) : meta?.noLocalTitle,
-          )
-          /** 拼装菜单项 */
-          const route = {
-            ...option,
-            key: option.path,
-            label: () =>
-              h(NEllipsis, null, {
-                default: () => label.value,
-              }),
-            breadcrumbLabel: label.value,
-            /** 检查该菜单项是否展示 */
-          } as AppMenuOption
-          /** 合并 icon */
-          const attr: AppMenuOption = Object.assign({}, route, {
-            icon: hasMenuIcon(option),
-          })
-
-          if (option.path === getCatchMenuKey()) {
-            /** 设置标签页(初始化时执行设置一次, 避免含有平级路由模式情况时出现不能正确设置标签页的情况) */
-            setMenuTagOptionsWhenMenuValueChange(option.path, attr)
-          }
-
-          attr.show = validMenuItemShow(attr)
-
-          return attr
-        }
-
         const resolveRoutes = (routes: AppMenuOption[], index: number) => {
           const catchArr: AppMenuOption[] = []
 

src/utils/basic.ts

@@ -6,6 +6,7 @@ import type {
   ValidateValueType,
   DownloadAnyFileDataType,
   BasicTypes,
+  AnyFC,
 } from '@/types/modules/utils'
 import type { BasicTarget, TargetValue } from '@/types/modules/vue'
 
@@ -256,3 +257,84 @@ export const omit = <T extends Record<string, unknown>, K extends keyof T>(
 
   return targetObject
 }
+
+/**
+ *
+ * @param value 待判断的值
+ *
+ * 判断是否为 Promise 函数
+ *
+ * @example
+ * isPromise(Promise.resolve(123)) => true
+ * isPromise(() => {}) => false
+ * isPromise(123) => false
+ */
+export const isPromise = <T>(value: unknown): value is Promise<T> => {
+  return (
+    !!value &&
+    (typeof value === 'object' || typeof value === 'function') &&
+    typeof (value as Promise<T>).then === 'function'
+  )
+}
+
+/**
+ *
+ * @param fc 正常执行的函数
+ * @param errorCallback 错误回调
+ * @param args 当前传递函数参数
+ *
+ * 用于捕获函数执行时的错误，如果有错误，则执行错误回调
+ *
+ * @example
+ * callWithErrorHandling((x: number) => { return x }, () => {}, [123]) => 123
+ * callWithErrorHandling((x: number) => { throw new Error('error') }, (error) => { console.log(error) }, [123]) => undefined
+ */
+export const callWithErrorHandling = <T extends AnyFC, E extends Error>(
+  fc: T,
+  errorCallback: AnyFC<E, void>,
+  args?: Parameters<T>,
+) => {
+  let result: ReturnType<T> | undefined
+
+  try {
+    result = args ? fc(...args) : fc()
+  } catch (error) {
+    errorCallback(error as E)
+  }
+
+  return result
+}
+
+/**
+ *
+ * @param fn 正常执行的函数
+ * @param errorCallback 错误回调
+ * @param args 当前传递函数参数
+ *
+ * 用于捕获异步函数执行时的错误，如果有错误，则执行错误回调
+ *
+ * @example
+ * callWithAsyncErrorHandling(async () => { console.log('A') }, () => {}, []) => Promise { undefined }
+ * callWithAsyncErrorHandling(() => { throw new Error('error') }, (error) => { console.log(error) }, []) => undefined
+ * callWithAsyncErrorHandling(async () => { return Promise.resolve('hello') }, () => {}, []) => Promise { 'hello' }
+ */
+export const callWithAsyncErrorHandling = async <
+  T extends AnyFC,
+  E extends Error,
+>(
+  fc: T,
+  errorCallback: (error: E) => void,
+  args?: Parameters<T>,
+) => {
+  try {
+    if (!isPromise(fc)) {
+      return Promise.resolve(callWithErrorHandling(fc, errorCallback, args))
+    }
+
+    return await fc(...(args as Parameters<T>))
+  } catch (error) {
+    errorCallback(error as E)
+
+    return void 0
+  }
+}