update: v4.0.2的一些更新，更新内容请见更新日志

.eslintignore

@@ -8,7 +8,6 @@ public
 yarn.*
 vite-env.*
 .prettierrc.*
-.eslintrc
 visualizer.*
 visualizer.html
 .env.*

CHANGELOG.md

@@ -8,11 +8,17 @@
 - 修改路由菜单显示、隐藏逻辑，现在仅会针对权限的验证匹配选择是否加入菜单列表中
 - 更新 setupAppMenu 方法触发时机（Layout => menu store），现在将在 pinia menu store 初始化时触发 App Menu 更新
 - 更新了 utils 包中的一些方法，进行了一些重写和重命名
+- GlobalSearch 组件支持上下按键切换、回车键选择
+- 整合 router 模块的一些包，让它看起来更合理一点
+- 剔除 styles 包中一些不合理的样式模块
+- 补充了一些注释与说明文档
 
 ### Fixes
 
 - 修复不能正确渲染浏览器标题问题
 - 修复初始化模板菜单函数与菜单更新函数重复执行一些方法的问题
+- 修复指令示例变量绑定错误导致示例错误问题
+- 修复路由白名单失效 bug
 
 ## 4.0.1
 

cfg.ts

@@ -74,7 +74,6 @@ const config: AppConfigExport = {
   mixinCSS: mixinCSSPlugin([
     './src/styles/mixins.scss',
     './src/styles/setting.scss',
-    './src/styles/theme.scss',
   ]),
   /**
    *

src/App.tsx

@@ -27,21 +27,23 @@ const App = defineComponent({
       const primaryColorOverride = getStorage<SettingState>(
         'piniaSettingStore',
         'localStorage',
-        primaryColor,
       )
-      const _p = get(
-        primaryColorOverride as SettingState,
-        'primaryColorOverride.common.primaryColor',
-        primaryColor,
-      )
-      const _fp = colorToRgba(_p, 0.3)
 
-      /** 设置全局主题色 css 变量 */
-      body.style.setProperty('--ray-theme-primary-color', _p)
-      body.style.setProperty(
-        '--ray-theme-primary-fade-color',
-        _fp || primaryFadeColor,
-      )
+      if (primaryColorOverride) {
+        const _p = get(
+          primaryColorOverride,
+          'primaryColorOverride.common.primaryColor',
+          primaryColor,
+        )
+        const _fp = colorToRgba(_p, 0.3)
+
+        /** 设置全局主题色 css 变量 */
+        body.style.setProperty('--ray-theme-primary-color', _p)
+        body.style.setProperty(
+          '--ray-theme-primary-fade-color',
+          _fp || primaryFadeColor,
+        )
+      }
     }
 
     /** 隐藏加载动画 */

src/appConfig/routerConfig.ts

@@ -17,6 +17,16 @@ import type { LayoutInst } from 'naive-ui'
  *
  * 内容区域 ref 注册
  * 可以控制内容区域当前滚动位置
+ * 如果你需要在切换路由时候配置自定义滚动到某个视图区域时, 可以使用该属性提供的方法(scrollTo)
+ *
+ * 请注意
+ * 如果你动态的添加了某个属性后, 希望控制滚动条滚动到某个区域时, 应该注意 dom 挂载后再执行该方法
+ * @example
+ * ```ts
+ * nextTick().then(() => {
+ *  LAYOUT_CONTENT_REF.value?.scrollTo()
+ * })
+ * ```
  */
 export const LAYOUT_CONTENT_REF = ref<LayoutInst>()
 
@@ -33,15 +43,9 @@ export const SETUP_ROUTER_GUARD = true
  * 路由表单白名单
  *
  * 如果需要启用该功能, 则需要配置路由 name 属性, 并且需要一一对应(对大小写敏感)
- * 如果未设置, 则不会生效
- *
- * 配置该路由白名单列表后, 则不会对配置中的路由列表进行鉴权处理(配合 basic.ts 中的方法进行使用)
- *
- * 配置动态路由菜单
- * 可以根据权限与白名单进行过滤, 但是 meta hidden 属性拥有最高的控制权限
- * 如果 mete hidden 设置为 false 则永远不会显示菜单选项
+ * 并且在配置 route name 属性时, 如果 name 类型为 symbol 的话, 会认为该路由永远不与白名单列表进行匹配
  */
-export const WHITE_ROUTES = ['RLogin', 'ErrorPage', 'RayTemplateDoc']
+export const WHITE_ROUTES: string[] = ['RLogin', 'ErrorPage', 'RayTemplateDoc']
 
 /**
  *

src/axios/instance.ts

@@ -22,11 +22,11 @@ import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
 import {
   setupResponseInterceptor,
   setupResponseErrorInterceptor,
-} from '@/axios/inject/responseInject'
+} from '@/axios/inject/response/provide'
 import {
   setupRequestInterceptor,
   setupRequestErrorInterceptor,
-} from '@/axios/inject/requestInject'
+} from '@/axios/inject/request/provide'
 
 import type { AxiosInstanceExpand } from './type'
 

src/components/RayTable/src/components/TableSetting/index.scss

@@ -47,7 +47,7 @@
 
     & .draggable-item__d--icon,
     & .draggable-item__icon {
-      padding: $iconSpace;
+      padding: 5px;
       outline: none;
       border: none;
     }

src/layout/components/MenuTag/index.tsx

@@ -33,7 +33,7 @@ import { uuid } from '@/utils/hook'
 import { hasClass } from '@/utils/element'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
 import { ROOT_ROUTE } from '@/appConfig/appConfig'
-import { getElements } from '@use-utils/element'
+import { queryElements } from '@use-utils/element'
 
 import type { MenuOption, ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app'
@@ -381,7 +381,7 @@ const MenuTag = defineComponent({
     /** 动态更新 menu tag 所在位置 */
     const positionMenuTag = () => {
       nextTick().then(() => {
-        const tags = getElements<HTMLElement>(
+        const tags = queryElements<HTMLElement>(
           `attr:${MENU_TAG_DATA}="${menuKey.value}"`,
         )
 

src/layout/components/SiderBar/Components/GlobalSeach/index.scss

@@ -75,6 +75,7 @@ $globalSearchWidth: 650px;
       & .global-seach__card-content .content-item {
         background-color: #2f2f2f;
 
+        &.content-item--active,
         &:hover {
           background-color: var(--ray-theme-primary-fade-color);
         }
@@ -91,6 +92,7 @@ $globalSearchWidth: 650px;
       & .global-seach__card-content .content-item {
         background-color: #ffffff;
 
+        &.content-item--active,
         &:hover {
           background-color: var(--ray-theme-primary-fade-color);
         }

src/layout/components/SiderBar/Components/GlobalSeach/index.tsx

@@ -14,12 +14,11 @@ import './index.scss'
 import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
-import { on, off } from '@/utils/element'
+import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
 import { debounce } from 'lodash-es'
 import { useMenu } from '@/store'
 import { validMenuItemShow } from '@/router/helper/routerCopilot'
 
-import type { MenuOption } from 'naive-ui'
 import type { AppRouteMeta } from '@/router/type'
 import type { AppMenuOption } from '@/types/modules/app'
 
@@ -42,8 +41,7 @@ const GlobalSeach = defineComponent({
         emit('update:show', val)
 
         if (!val) {
-          state.searchOptions = []
-          state.searchValue = null
+          resetSearchSomeValue()
         }
       },
     })
@@ -52,27 +50,44 @@ const GlobalSeach = defineComponent({
       searchValue: null,
       searchOptions: [] as AppMenuOption[],
     })
-
     const tiptextOptions = [
       {
         icon: 'cmd / ctrl + k',
         label: '唤起',
         plain: true,
       },
+      {
+        icon: '↑ ↓',
+        label: '切换',
+        plain: true,
+      },
       {
         icon: 'esc',
         label: '关闭',
         plain: true,
       },
     ]
+    /** 初始化索引 */
+    let searchElementIndex = 0
+    /** 缓存索引 */
+    let preSearchElementIndex = searchElementIndex
+
+    /** 初始化一些值 */
+    const resetSearchSomeValue = () => {
+      state.searchOptions = []
+      state.searchValue = null
+      searchElementIndex = 0
+      preSearchElementIndex = searchElementIndex
+    }
 
     /** 按下 ctrl + k 或者 command + k 激活搜索栏 */
-    const registerKeyboard = (e: Event) => {
-      const _e = e as KeyboardEvent
+    const registerArouseKeyboard = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault()
+        e.stopPropagation()
+        resetSearchSomeValue()
 
-      if ((_e.ctrlKey || _e.metaKey) && _e.key === 'k') {
         modelShow.value = true
-        console.log(modelMenuOptions.value)
       }
     }
 
@@ -107,18 +122,53 @@ const GlobalSeach = defineComponent({
       } else {
         state.searchOptions = []
       }
+
+      nextTick().then(() => {
+        autoFouceSearchItem()
+      })
     }
 
     const handleSearchItemClick = (option: AppMenuOption) => {
-      const meta = option.meta as AppRouteMeta
+      if (option) {
+        const { meta } = option
 
-      /** 如果配置站外跳转则不会关闭搜索框 */
-      if (meta.windowOpen) {
-        window.open(meta.windowOpen)
-      } else {
-        modelShow.value = false
+        /** 如果配置站外跳转则不会关闭搜索框 */
+        if (meta.windowOpen) {
+          window.open(meta.windowOpen)
+        } else {
+          modelShow.value = false
 
-        changeMenuModelValue(option.key, option)
+          changeMenuModelValue(option.key, option)
+        }
+      }
+    }
+
+    /** 自动聚焦检索项 */
+    const autoFouceSearchItem = () => {
+      const currentOption = state.searchOptions[searchElementIndex]
+      const preOption = state.searchOptions[preSearchElementIndex]
+
+      if (currentOption) {
+        nextTick().then(() => {
+          const searchElementOptions = queryElements<HTMLElement>(
+            `attr:data_path="${currentOption.path}"`,
+          )
+          const preSearchElementOptions = preOption
+            ? queryElements<HTMLElement>(`attr:data_path="${preOption?.path}"`)
+            : null
+
+          if (preSearchElementOptions?.length) {
+            const [el] = preSearchElementOptions
+
+            removeClass(el, 'content-item--active')
+          }
+
+          if (searchElementOptions?.length) {
+            const [el] = searchElementOptions
+
+            addClass(el, 'content-item--active')
+          }
+        })
       }
     }
 
@@ -135,12 +185,68 @@ const GlobalSeach = defineComponent({
       }
     }
 
+    /** 注册按键: 上、下、回车 */
+    const registerChangeSearchElementIndex = (e: KeyboardEvent) => {
+      const keyCode = e.key
+
+      if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+
+      preSearchElementIndex = searchElementIndex <= 0 ? 0 : searchElementIndex
+
+      /** 更新索引 */
+      const updateIndex = (type: 'up' | 'down') => {
+        if (type === 'up') {
+          searchElementIndex =
+            searchElementIndex - 1 < 0 ? 0 : searchElementIndex - 1
+        } else if (type === 'down') {
+          searchElementIndex =
+            searchElementIndex + 1 >= state.searchOptions.length
+              ? state.searchOptions.length - 1
+              : searchElementIndex + 1
+        }
+      }
+
+      switch (keyCode) {
+        case 'ArrowUp':
+          updateIndex('up')
+
+          break
+        case 'ArrowDown':
+          updateIndex('down')
+
+          break
+        case 'Enter':
+          // eslint-disable-next-line no-case-declarations
+          const option = state.searchOptions[searchElementIndex]
+
+          if (option) {
+            handleSearchItemClick(option)
+          }
+
+          break
+
+        default:
+          break
+      }
+
+      autoFouceSearchItem()
+    }
+
     onMounted(() => {
-      on(window, 'keydown', registerKeyboard)
+      on(window, 'keydown', (e: Event) => {
+        registerArouseKeyboard(e as KeyboardEvent)
+        registerChangeSearchElementIndex(e as KeyboardEvent)
+      })
     })
 
     onBeforeUnmount(() => {
-      off(window, 'keydown', registerKeyboard)
+      off(window, 'keydown', (e: Event) => {
+        registerArouseKeyboard(e as KeyboardEvent)
+        registerChangeSearchElementIndex(e as KeyboardEvent)
+      })
     })
 
     return {
@@ -180,6 +286,7 @@ const GlobalSeach = defineComponent({
                         class="content-item"
                         {...{
                           onClick: this.handleSearchItemClick.bind(this, curr),
+                          data_path: curr.path,
                         }}
                       >
                         <div class="content-item-icon">

src/locales/helper.ts

@@ -132,5 +132,5 @@ export const getAppDefaultLanguage = () => {
     SYSTEM_DEFAULT_LOCAL,
   )
 
-  return language || SYSTEM_DEFAULT_LOCAL
+  return language
 }

src/locales/index.ts

@@ -25,9 +25,7 @@
 
 import { createI18n } from 'vue-i18n'
 import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
-import { getAppDefaultLanguage } from '@/locales/helper'
-
-import { getAppLocalMessages } from '@/locales/helper'
+import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
 
 import type { App } from 'vue'
 import type { I18n, I18nOptions } from 'vue-i18n'

src/locales/lang/zh-CN/menu.json

@@ -16,5 +16,5 @@
   "Office_Spreadsheet": "表格",
   "CalculatePrecision": "数字精度",
   "Directive": "指令",
-  "RouterDemo": "平层路由详情"
+  "RouterDemo": "页面详情模式"
 }

src/main.ts

@@ -1,17 +1,17 @@
-import type { App as AppType } from 'vue'
+import App from './App'
 
 import '@/styles/base.scss'
 
 import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可
 
-import App from './App'
-
 import { setupRouter } from './router/index'
 import { setupStore } from './store/index'
 import { setupI18n } from './locales/index'
 import { setupDayjs } from './dayjs/index'
 import { setupDirective } from './directives/index'
 
+import type { App as AppType } from 'vue'
+
 /**
  *
  * 普通应用注册方法

src/router/README.md

@@ -1,5 +1,37 @@
 ## router 拓展
 
+## 类型
+
+```ts
+interface RouteMeta {
+  order?: number
+  i18nKey: string
+  icon?: string
+  windowOpen?: string
+  role?: string[]
+  hidden?: boolean
+  noLocalTitle?: string | number
+  ignoreAutoResetScroll?: boolean
+  keepAlive?: boolean
+  sameLevel?: boolean
+}
+```
+
+## 说明
+
+```
+order: 菜单顺序，值越大越靠后。仅对顶层有效，子菜单该值无效
+i18nKey: i18n 国际化 key, 会优先使用该字段
+icon: icon 图标， 用于 Menu 菜单(依赖 RayIcon 组件实现)
+windowOpen: 超链接打开（新开窗口打开）
+role: 权限表
+hidden: 是否显示
+noLocalTitle: 不使用国际化渲染 Menu Titile
+ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置
+keepAlive: 是否缓存该页面（需要配置 APP_KEEP_ALIVE setupKeepAlive 属性为 true 启用才有效）
+sameLevel: 是否标记该路由为平级模式，如果标记为平级模式，会使路由菜单项隐藏。如果在含有子节点处，设置了该属性，会导致子节点全部被隐藏。并且该模块，在后续的使用 url 地址导航跳转时，如果在非当前路由层级层面跳转的该路由，会在当前的面包屑后面追加该模块的信息，触发跳转时，不会修改面包屑、标签页
+```
+
 ### routerCopilot
 
 > 该文件提供了一些辅助方法，让你更方便的做一些事情。系统其他地方引用了该方法，所以删除需谨慎。
@@ -85,35 +117,3 @@ const transform = [
   },
 ]
 ```
-
-## 类型
-
-```ts
-interface RouteMeta {
-  order?: number
-  i18nKey: string
-  icon?: string
-  windowOpen?: string
-  role?: string[]
-  hidden?: boolean
-  noLocalTitle?: string | number
-  ignoreAutoResetScroll?: boolean
-  keepAlive?: boolean
-  sameLevel?: boolean
-}
-```
-
-## 说明
-
-```
-order: 菜单顺序，值越大越靠后。仅对顶层有效，子菜单该值无效
-i18nKey: i18n 国际化 key, 会优先使用该字段
-icon: icon 图标， 用于 Menu 菜单(依赖 RayIcon 组件实现)
-windowOpen: 超链接打开（新开窗口打开）
-role: 权限表
-hidden: 是否显示
-noLocalTitle: 不使用国际化渲染 Menu Titile
-ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置
-keepAlive: 是否缓存该页面（需要配置 APP_KEEP_ALIVE setupKeepAlive 属性为 true 启用才有效）
-sameLevel: 是否标记该路由为平级模式，如果标记为平级模式，会使路由菜单项隐藏。如果在含有子节点处，设置了该属性，会导致子节点全部被隐藏
-```

src/router/constant/index.ts

@@ -4,6 +4,7 @@
  *
  * 默认布局, 统一使用该组件管理右侧现实内容区域展示
  *
+ * @example
  * 使用示例:
  * ```
  * {

src/router/helper/combine.ts

@@ -1,40 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-01
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import type { AppRouteRecordRaw, RouteModules } from '@/router/type'
-
-/**
- *
- * @returns 所有路由模块
- *
- * @remark 自动合并所有路由模块, 每一个 ts 文件都视为一个 route module 与 views 一一对应
- */
-export const combineRawRouteModules = () => {
-  const modulesFiles: RouteModules = import.meta.glob('../modules/**/*.ts', {
-    eager: true,
-  })
-
-  const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => {
-    const route = modulesFiles[modulePath].default
-
-    if (route) {
-      modules.push(route)
-    } else {
-      throw new Error(
-        'router helper combine: an exception occurred while parsing the routing file!',
-      )
-    }
-
-    return modules
-  }, [] as AppRouteRecordRaw[])
-
-  return modules
-}

src/router/helper/helper.ts

@@ -0,0 +1,104 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-07-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * helper 包入口
+ *
+ * 该包一般是用于该模块一些处理的辅助方法
+ * 通常不会用于其他地方
+ * 如果有需要查看 router 模块的全局通用辅助方法可以查看 routerCopilot 包
+ */
+
+import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
+
+import type { RouteLocationNormalized } from 'vue-router'
+import type { AppRouteRecordRaw, RouteModules } from '@/router/type'
+
+/**
+ *
+ * @returns 所有路由模块
+ *
+ * @remark 自动合并所有路由模块, 每一个 ts 文件都视为一个 route module 与 views 一一对应
+ */
+export const combineRawRouteModules = () => {
+  const modulesFiles: RouteModules = import.meta.glob('../modules/**/*.ts', {
+    eager: true,
+  })
+
+  const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => {
+    const route = modulesFiles[modulePath].default
+
+    if (route) {
+      modules.push(route)
+    } else {
+      throw new Error(
+        'router helper combine: an exception occurred while parsing the routing file!',
+      )
+    }
+
+    return modules
+  }, [] as AppRouteRecordRaw[])
+
+  return modules
+}
+
+/**
+ *
+ * @param routes 路由模块表(route 表)
+ * @returns 排序后的新路由表
+ *
+ * @remark 必须配置 meta 属性, order 属性会影响页面菜单排序
+ *
+ * 如果为配置 order 属性, 则会自动按照前合并路由的顺序前后排序
+ * 如果 order 属性值相同, 则会按照路由名称进行排序
+ */
+export const orderRoutes = (routes: AppRouteRecordRaw[]) => {
+  return routes.sort((curr, next) => {
+    const currOrder = curr.meta?.order ?? 1
+    const nextOrder = next.meta?.order ?? 0
+
+    if (typeof currOrder !== 'number' || typeof nextOrder !== 'number') {
+      throw new Error('orderRoutes error: order must be a number!')
+    }
+
+    if (currOrder === nextOrder) {
+      // 如果两个路由的 order 值相同，则按照路由名进行排序
+      return curr.name
+        ? next.name
+          ? curr.name.localeCompare(next.name)
+          : -1
+        : 1
+    }
+
+    return currOrder - nextOrder
+  })
+}
+
+/**
+ *
+ * 切换路由时, 手动将容器区域回归默认值
+ *
+ * 由于官方不支持这个方法了, 所以自己手写了一个
+ * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreAutoResetScroll 属性即可
+ */
+export const scrollViewToTop = (route: RouteLocationNormalized) => {
+  const { meta } = route
+
+  /** 这个 id 是注入在 layout 中 */
+  if (!meta?.ignoreAutoResetScroll) {
+    LAYOUT_CONTENT_REF.value?.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    })
+  }
+}

src/router/helper/orderRoutes.ts

@@ -1,36 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-01
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import type { AppRouteRecordRaw } from '@/router/type'
-
-/**
- *
- * @param routes 路由模块表(route 表)
- * @returns 排序后的新路由表
- *
- * @remark 必须配置 meta 属性, order 属性会影响页面菜单排序
- */
-export const orderRoutes = (routes: AppRouteRecordRaw[]) => {
-  return routes.sort((curr, next) => {
-    try {
-      const {
-        meta: { order: currOrder = 1 },
-      } = curr
-      const {
-        meta: { order: nextOrder = 0 },
-      } = next
-
-      return currOrder - nextOrder
-    } catch (e) {
-      throw new Error('orderRoutes error: order must be number!')
-    }
-  })
-}

src/router/helper/permission.ts

@@ -23,7 +23,9 @@
 import { getStorage } from '@/utils/cache'
 import { APP_CATCH_KEY, ROOT_ROUTE } from '@/appConfig/appConfig'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
+import { WHITE_ROUTES } from '@/appConfig/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
+import { isValueType } from '@/utils/hook'
 
 import type {
   Router,
@@ -33,34 +35,58 @@ import type {
 import type { AppMenuOption } from '@/types/modules/app'
 import type { AppRouteMeta } from '@/router/type'
 
+/** 路由守卫 */
 export const permissionRouter = (router: Router) => {
   const { beforeEach } = router
 
+  const isToLogin = (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+  ) => to.path === '/' || from.path === '/login'
+
   beforeEach((to, from, next) => {
     const token = getStorage<string>(APP_CATCH_KEY.token)
-    const route = getStorage<string>(
+    const catchRoutePath = getStorage<string>(
       'menuKey',
       'sessionStorage',
       ROOT_ROUTE.path,
-    ) as string
-    const { meta } = to
+    )
+    const { meta, name } = to
 
+    /** 是否含有 token */
     if (token !== null) {
-      if (validRole(meta as AppRouteMeta)) {
-        if (to.path === '/' || from.path === '/login') {
-          if (route !== 'no') {
-            next(route)
+      /** 是否在有 token 时去到登陆页 */
+      if (isToLogin(to, from)) {
+        redirectRouterToDashboard(true)
+      } else {
+        /** 是否为白名单 */
+        if (
+          !isValueType<symbol>(name, 'Symbol') &&
+          name &&
+          WHITE_ROUTES.includes(name)
+        ) {
+          next()
+        } else {
+          /** 是否有权限 */
+          if (validRole(meta as AppRouteMeta)) {
+            /** 是否在有权限时去到登陆页 */
+            if (isToLogin(to, from)) {
+              /** 容错处理, 如果没有预设地址与获取到缓存地址, 则重定向到首页去 */
+              if (catchRoutePath) {
+                next(catchRoutePath)
+              } else {
+                redirectRouterToDashboard(true)
+              }
+            } else {
+              next()
+            }
           } else {
             redirectRouterToDashboard(true)
           }
-        } else {
-          next()
         }
-      } else {
-        redirectRouterToDashboard(true)
       }
     } else {
-      if (to.path === '/' || from.path === '/login') {
+      if (isToLogin(to, from)) {
         next()
       } else {
         next('/')

src/router/helper/routerCopilot.ts

@@ -14,7 +14,6 @@ import { permissionRouter } from './permission'
 import {
   SETUP_ROUTER_LOADING_BAR,
   SETUP_ROUTER_GUARD,
-  WHITE_ROUTES,
   SUPER_ADMIN,
 } from '@/appConfig/routerConfig'
 import { useSignin } from '@/store'
@@ -35,11 +34,10 @@ import type { AppMenuOption } from '@/types/modules/app'
  */
 export const validRole = (meta: AppRouteMeta) => {
   const { signinCallback } = storeToRefs(useSignin())
-  const role = computed(() => signinCallback.value.role)
-
+  const modelRole = computed(() => signinCallback.value.role)
   const { role: metaRole } = meta
 
-  if (SUPER_ADMIN?.length && SUPER_ADMIN.includes(role.value)) {
+  if (SUPER_ADMIN?.length && SUPER_ADMIN.includes(modelRole.value)) {
     return true
   } else {
     // 如果 role 为 undefind 或者空数组, 则认为该路由不做权限过滤
@@ -49,7 +47,7 @@ export const validRole = (meta: AppRouteMeta) => {
 
     // 判断是否含有该权限
     if (metaRole) {
-      return metaRole.includes(role.value)
+      return metaRole.includes(modelRole.value)
     }
 
     return true

src/router/helper/useVueRouter.ts

@@ -16,6 +16,9 @@ import { router } from '@/router/index'
  * @returns vue router instance
  *
  * @remark 使用 vue router instance, 可以在 setup 环境外使用
+ *
+ * 使用该方法时候, 可能会出现热更新错误的问题... 所以遇到的时候不要紧张, 刷新一下就好
+ * 如果确定使用环境就在 setup 中, 还是建议使用官方的 useRouter useRoute 方法, 避免热更新报错的问题
  */
 export const useVueRouter = () => {
   try {

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import scrollViewToTop from '@/router/utils/viewScrollTop'
+import { scrollViewToTop } from '@/router/helper/helper'
 import { vueRouterRegister } from '@/router/helper/routerCopilot'
 import { useVueRouter } from '@/router/helper/useVueRouter'
 

src/router/modules/multi-menu.ts

@@ -31,14 +31,25 @@ const multiMenu: AppRouteRecordRaw = {
       },
       children: [
         {
-          path: 'sub-menu',
-          name: 'SubMenu',
+          path: 'sub-menu-other',
+          name: 'SubMenuOther',
           component: () =>
-            import('@/views/multi/views/multi-menu-two/views/sub-menu/index'),
+            import(
+              '@/views/multi/views/multi-menu-two/views/sub-menu-other/index'
+            ),
           meta: {
             noLocalTitle: '多级菜单-2-1',
             keepAlive: true,
           },
+        },
+        {
+          path: 'sub-menu',
+          name: 'SubMenu',
+          component: LAYOUT,
+          meta: {
+            noLocalTitle: '多级菜单-2-2',
+            keepAlive: true,
+          },
           children: [
             {
               path: 'sub-menu-one',
@@ -48,7 +59,7 @@ const multiMenu: AppRouteRecordRaw = {
                   '@/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index'
                 ),
               meta: {
-                noLocalTitle: '多级菜单-2-1-1',
+                noLocalTitle: '多级菜单-2-2-1',
                 keepAlive: true,
               },
             },

src/router/modules/router-demo.ts

@@ -18,7 +18,7 @@ const routerDemo: AppRouteRecordRaw = {
       name: 'RouterDemoHome',
       component: () => import('@/views/router-demo/router-demo-home/index'),
       meta: {
-        noLocalTitle: '人员信息',
+        noLocalTitle: '人员信息(平级模式)',
       },
     },
     {

src/router/modules/scroll-reveal.ts

@@ -1,3 +1,9 @@
+/**
+ *
+ * 由于还未找到如何解决 scrollReveal 插件问题
+ * 所以暂时隐藏该页面
+ */
+
 import { t } from '@/locales/useI18n'
 import { LAYOUT } from '@/router/constant/index'
 

src/router/routeModules.ts

@@ -20,8 +20,8 @@
  * 如果不设置 order 属性, 则会默认排在前面
  */
 
-import { combineRawRouteModules } from '@/router/helper/combine'
-import { orderRoutes } from '@/router/helper/orderRoutes'
+import { combineRawRouteModules } from '@/router/helper/helper'
+import { orderRoutes } from '@/router/helper/helper'
 
 /** 获取所有被合并与排序的路由 */
 export const getAppRawRoutes = () => orderRoutes(combineRawRouteModules())

src/router/routes.ts

@@ -18,10 +18,10 @@ export default () => [
     component: Layout,
     children: expandRoutes(getAppRawRoutes()),
   },
-  // {
-  //   path: '/:catchAll(.*)',
-  //   name: 'errorPage',
-  //   component: Layout,
-  //   redirect: '/error',
-  // },
+  {
+    path: '/:catchAll(.*)',
+    name: 'errorPage',
+    component: Layout,
+    redirect: '/error',
+  },
 ]

src/router/type.ts

@@ -13,7 +13,7 @@ export interface AppRouteMeta {
   i18nKey?: string
   icon?: string | VNode
   windowOpen?: string
-  role?: string[]
+  role?: (string | number)[]
   hidden?: boolean
   noLocalTitle?: string | number
   ignoreAutoResetScroll?: boolean

src/router/utils/viewScrollTop.ts

@@ -1,25 +0,0 @@
-import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
-
-import type { RouteLocationNormalized } from 'vue-router'
-
-/**
- *
- * 切换路由时, 手动将容器区域回归默认值
- *
- * 由于官方不支持这个方法了, 所以自己手写了一个
- * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreAutoResetScroll 属性即可
- */
-const scrollViewToTop = (route: RouteLocationNormalized) => {
-  const { meta } = route
-
-  /** 这个 id 是注入在 layout 中 */
-  if (!meta?.ignoreAutoResetScroll) {
-    LAYOUT_CONTENT_REF.value?.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: 'smooth',
-    })
-  }
-}
-
-export default scrollViewToTop

src/store/modules/keep-alive/index.ts

@@ -49,11 +49,18 @@ export const useKeepAlive = defineStore(
       } = option
 
       if (keepAlive) {
+        if (
+          length < maxKeepAliveLength &&
+          !state.keepAliveInclude.includes(name)
+        ) {
+          state.keepAliveInclude.push(name)
+
+          return
+        }
+
         if (length >= maxKeepAliveLength) {
           state.keepAliveInclude.splice(0, 1)
           state.keepAliveInclude.push(name)
-        } else {
-          state.keepAliveInclude.push(name)
         }
       }
     }

src/styles/theme.scss

@@ -1,8 +0,0 @@
-/**
- * 明暗主题变量
- *
- * 全局自定义组件使用变量
- */
-
-$iconSpace: 5px;
-$width: 140px;

src/types/global.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { AppConfig } from './cfg'
+import type { AppConfig } from './modules/cfg'
 import type {
   MessageApi,
   DialogApi,
@@ -7,7 +7,7 @@ import type {
   NotificationApi,
 } from 'naive-ui'
 
-declare global {
+export declare global {
   declare interface UnknownObjectKey {
     [propName: string]: any
   }

src/utils/cache.ts

@@ -18,11 +18,11 @@ import type { CacheType } from '@/types/modules/utils'
  * @param key 需要设置的key
  * @param value 需要缓存的值
  */
-export const setStorage = <T = unknown>(
+export function setStorage<T = unknown>(
   key: string,
   value: T,
   type: CacheType = 'sessionStorage',
-) => {
+) {
   if (!key) {
     console.error('Failed to set stored data: key is empty or undefined')
 
@@ -40,16 +40,30 @@ export const setStorage = <T = unknown>(
   }
 }
 
+/** 重载函数 getStorage */
+export function getStorage<T>(
+  key: string,
+  storageType: CacheType,
+  defaultValue: T,
+): T
+
+/** 重载函数 getStorage */
+export function getStorage<T>(
+  key: string,
+  storageType?: CacheType,
+  defaultValue?: T,
+): T | null
+
 /**
  *
  * @param key 需要获取目标缓存的key
  * @returns 获取缓存值
  */
-export const getStorage = <T>(
+export function getStorage<T>(
   key: string,
   storageType: CacheType = 'sessionStorage',
   defaultValue?: T,
-): T | null => {
+): T | null {
   try {
     const data =
       storageType === 'localStorage'
@@ -77,10 +91,10 @@ export const getStorage = <T>(
  *   - all-sessionStorage: 删除所有 sessionStorage 缓存值
  *   - all-localStorage: 删除所有 localStorage 缓存值
  */
-export const removeStorage = (
+export function removeStorage(
   key: string | 'all' | 'all-sessionStorage' | 'all-localStorage',
   type: CacheType = 'sessionStorage',
-) => {
+) {
   switch (key) {
     case 'all':
       window.window.localStorage.clear()

src/utils/element.ts

@@ -1,5 +1,5 @@
 import { isValueType } from '@use-utils/hook'
-import { APP_REGEX } from '@/appConfig/regConfig'
+import { APP_REGEX } from '@/appConfig/regexConfig'
 
 import type {
   EventListenerOrEventListenerObject,
@@ -240,15 +240,15 @@ export const colorToRgba = (color: string, alpha = 1) => {
  * 示例:
  *
  * class:
- * const el = getElements('.demo')
+ * const el = queryElements('.demo')
  * id:
- * const el = getElements('#demo')
+ * const el = queryElements('#demo')
  * attribute:
- * const el = getElements('attr:type=button')
+ * const el = queryElements('attr:type=button')
  * 或者可以这样写
- * const el = getElements('attr:type')
+ * const el = queryElements('attr:type')
  */
-export const getElements = <T extends Element = Element>(
+export const queryElements = <T extends Element = Element>(
   selector: ElementSelector,
 ) => {
   if (!selector) {

src/views/directive/index.tsx

@@ -64,7 +64,7 @@ const RDirective = defineComponent({
           <NSpace wrapItem={true} vertical>
             <NButton
               v-throttle={{
-                func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
+                func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'),
                 trigger: 'click',
                 wait: 1000,
                 options: {},

src/views/multi/views/multi-menu-two/views/sub-menu-other/index.tsx

@@ -11,8 +11,8 @@
 
 import { NInput } from 'naive-ui'
 
-const SubMenu = defineComponent({
-  name: 'SubMenu',
+const SubMenuOther = defineComponent({
+  name: 'SubMenuOther',
   setup() {
     const inputValue = ref(null)
 
@@ -30,4 +30,4 @@ const SubMenu = defineComponent({
   },
 })
 
-export default SubMenu
+export default SubMenuOther

src/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index.tsx

@@ -23,7 +23,7 @@ const MultiMenuTwoOne = defineComponent({
   render() {
     return (
       <div>
-        多级菜单2-1-1
+        多级菜单2-2-1
         <NInput v-model={this.inputValue} />
       </div>
     )

src/views/router-demo/router-demo-detail/index.tsx

@@ -18,6 +18,7 @@ const RouterDemoDetail = defineComponent({
     return (
       <NSpace wrapItem={false}>
         <NCard title="平层路由详情页面">我是平层路由详情页面</NCard>
+        <NCard title="TIP">可以点击面包屑或者菜单返回到主页面</NCard>
       </NSpace>
     )
   },

src/vite-env.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="./types/global.d.ts" />
 /// <reference types="vite/client" />
 /// <reference types="vue/macros-global" />
 /// <reference types="vite-svg-loader" />

tsconfig.json

@@ -26,7 +26,12 @@
       "@use-micro/*": ["src/micro/*"]
     },
     "suppressImplicitAnyIndexErrors": true,
-    "types": ["@intlify/unplugin-vue-i18n/messages", "naive-ui/volar"],
+    "types": [
+      "@intlify/unplugin-vue-i18n/messages",
+      "naive-ui/volar",
+      "vite/client",
+      "src/types/global.d.ts"
+    ],
     "ignoreDeprecations": "5.0"
   },
   "include": [
@@ -36,15 +41,8 @@
     "cfg.ts",
     "package.json",
     "vite-env.d.ts",
-    "src/appConfig/*.ts",
-    "src/types/cfg.ts",
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.ts",
-    "src/**/*.vue",
     "components.d.ts",
     "auto-imports.d.ts",
-    "src/types/global.d.ts"
+    "src/**/*"
   ]
 }

vite.config.ts

@@ -108,6 +108,11 @@ export default defineConfig(async ({ mode }) => {
             libDirectory: '',
             camel2DashComponentName: false,
           },
+          {
+            libName: 'lodash',
+            libDirectory: '',
+            camel2DashComponentName: false,
+          },
         ],
       }),
       {