version: v4.8.2

.eslintrc.cjs

@@ -209,5 +209,78 @@ module.exports = {
         message: 'Using deprecated API is not allowed.',
       },
     ],
+    'padding-line-between-statements': [
+      'error',
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'return',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'function',
+      },
+      {
+        blankLine: 'always',
+        prev: ['const', 'let', 'var'],
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: ['const', 'let', 'var'],
+        next: ['const', 'let', 'var'],
+      },
+      {
+        blankLine: 'always',
+        prev: 'directive',
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: 'directive',
+        next: 'directive',
+      },
+      {
+        blankLine: 'always',
+        prev: ['case', 'default'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: ['break'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: ['import'],
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: 'import',
+        next: 'import',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'export',
+      },
+      {
+        blankLine: 'any',
+        prev: 'export',
+        next: 'export',
+      },
+      {
+        blankLine: 'always',
+        prev: ['function'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: ['class'],
+        next: '*',
+      },
+    ],
   },
 }

.nvmrc

@@ -1 +1 @@
-v18.18.2
+v20.12.0

CHANGELOG.md

@@ -1,5 +1,65 @@
 # CHANGE LOG
 
+## 4.8.2
+
+破坏性更新！请仔细阅读更新日志！
+
+更新默认 `node` 版本为 `v20.12.0`。
+
+并且对于历史一些模块的分包进行了优化，现在更加语意化与清晰。
+
+重构 `axios` 拦截器，使用插件式设计思想，更加强大的拓展性、可维护性！
+
+## Feats
+
+- 更新默认 `node` 版本为 `v20.12.0`
+- `RBarcode` 相关
+  - 新增 `onSuccess`, `onError`, `onFinally` 三个渲染回调
+  - 新增 `watchText` 配置项，当 `text` 内容变化后，主动更新条形码，默认不启用
+- 更新 `vue-tsc` 版本至 `2.0.11`
+- `hooks` 包
+  - `template` 包
+    - 新增 `useContentScroll` 方法，用于滚动 `LayoutContent` 内容区域
+    - 新增 `useSiderScroll` 方法，用于滚动 `LayoutSider` 侧边栏区域，也就是菜单区域
+  - `web` 包
+    - `usePagination` 类型修复，所有 `get` 方法都会准确的返回对应的类型
+- `SiderBarLogo` 组件
+  - 支持未配置 `icon` 时，允许截取 `title` 第一个字符作为占位
+- `router` 包
+  - `router types` 包，补充类型，获得更好的类型提示与配置提示
+  - `combine-raw-route-modules` 方法现在会检查路由配置的 `name`, `path` 属性是否出现重复，如果重复，会直接抛出异常中断流程
+  - 移除 `name` 配置项作为必选项
+  - 标记 `components` 配置项为 `deprecated` 描述项
+  - 增强 `AppRouteRecordRaw` 类型，现在当你显式配置了 `meta.keepAlive` 为 `true` 的时候，会提示你 `name` 必填
+- `app-config` 包
+  - 提供 `MessageProver` 配置
+    - 限制最大消息数量为 5 条
+    - 默认不启用手动关闭消息功能
+- `RTable` 新增 `cardProps` 配置项，配置外层容器。
+- 更新 `vue` 版本至 `3.4.25`
+- 更新 `vite` 版本至 `5.2.10`
+- 更新 `vite-bundle-analyzer` 版本至 `0.9.4`，新增汇总模式
+- 移除 `naive-ui` 自动导入 `hooks`
+- `Search` 组件
+  - 优化分包逻辑
+  - 现在允许在搜索菜单初始位置进行上下键切换
+  - 优化搜索菜单样式
+- 新增 `positionSelectedMenuItem` 方法，用于定位选中菜单项
+- `hooks` 包
+  - `template`
+    - 新增 `useContentScroll` 方法，用于滚动 `LayoutContent` 内容区域
+    - 新增 `useSiderScroll` 方法，用于滚动 `LayoutSider` 侧边栏区域，也就是菜单区域
+- 重写 `AppAvatar` 组件
+- `axios` 包
+  - `inject` 包重命名为 `axios-interceptor`，并且拆分分包逻辑，现在以插件形式管理拦截器逻辑与注入逻辑
+- 新增 `padding-line-between-statements` 规范，强制语句之间的空行
+
+## Fixes
+
+- 修复 `SIDE_BAR_LOGO` 未配置 `icon` 时，侧边栏不显示的问题
+- 修复 `RTable` 在配置 `style.height` 时，样式会错乱的问题
+- 修复 `MenuTag` 在初始化位置时不能准确滚动到当前标签页的问题
+
 ## 4.8.1
 
 ## Feats

README.md

@@ -48,7 +48,7 @@ A `completely free`, `efficient`, `feature complete` and based on vite5. x & ts(
 - `Multi-terminal adaptation:` support pc, phone, pad
 - `Documentation:` complete documentation
 - `Mock data:` built-in Mock data solution
-- `Axios request:` secondary encapsulation of axios library, support: cancel, jitter, automatic repeat cancellation and other functions
+- `Axios request:` the plug-in design is used to encapsulate the axios library interceptor twice, which makes the interceptor more flexible
 - `SVG:` built-in svg icon solution
 - `Hooks:` based on the template characteristics of the encapsulated hooks to make it easier to use some functions of the template
 - `TypeScript:` provide a complete type
@@ -57,12 +57,10 @@ A `completely free`, `efficient`, `feature complete` and based on vite5. x & ts(
 ## 👀 Preview
 
 - [Preview](https://xiaodaigua-ray.github.io/ray-template/#/)
-- [Preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
 
 ## 📌 Documentation
 
 - [Documentation](https://xiaodaigua-ray.github.io/ray-template-doc/)
-- [Documentation(Acceleration address)](https://ray-template.yunkuangao.com/ray-template-doc/)
 
 ## 🔋 Change Log
 
@@ -90,9 +88,6 @@ A `completely free`, `efficient`, `feature complete` and based on vite5. x & ts(
 ```sh
 # github
 git clone https://github.com/XiaoDaiGua-Ray/ray-template.git
-
-# If your download speed is very slow, you can switch to the proxy address below
-git clone https://mirror.ghproxy.com/https://github.com/XiaoDaiGua-Ray/ray-template.git
 ```
 
 ### Pull dependencies

README.zh-CN.md

@@ -48,7 +48,7 @@
 - `多端适配：`支持 pc, phone, pad
 - `文档：`完善的文档
 - `Mock 数据：`内置 Mock 数据方案
-- `Axios 请求：`二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
+- `Axios 请求：`采用插件式设计二次封装 axios 库拦截器，让拦截器更加灵活
 - `SVG：`内置 svg icon 解决方案
 - `Hooks：`基于模板特性封装的 hooks 让你更加方便的使用模板一些功能
 - `TypeScript：`提供完整的类型
@@ -57,12 +57,10 @@
 ## 👀 预览地址
 
 - [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
-- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
 
 ## 📌 文档地址
 
 - [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
-- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
 
 ## 🔋 更新日志
 
@@ -90,9 +88,6 @@
 ```sh
 # github
 git clone https://github.com/XiaoDaiGua-Ray/ray-template.git
-
-# 如果你的下载速度很慢，可以切换到下面的代理地址
-git clone https://mirror.ghproxy.com/https://github.com/XiaoDaiGua-Ray/ray-template.git
 ```
 
 ### 拉取依赖

__test__/hooks/usePagination.spec.ts

@@ -63,12 +63,4 @@ describe('usePagination', () => {
 
     expect(count).toBe(2)
   })
-
-  it('should get callback', () => {
-    count = 0
-
-    getCallback()
-
-    expect(count).toBe(1)
-  })
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.8.1",
+  "version": "4.8.2",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -49,9 +49,9 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
-    "vue": "^3.4.21",
+    "vue": "^3.4.25",
     "vue-demi": "0.14.6",
-    "vue-hooks-plus": "1.8.8",
+    "vue-hooks-plus": "1.9.0",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.3.0"
   },
@@ -80,7 +80,7 @@
     "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.18.1",
+    "eslint-plugin-vue": "^9.25.0",
     "happy-dom": "14.3.1",
     "husky": "8.0.3",
     "lint-staged": "^15.1.0",
@@ -92,8 +92,8 @@
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.8",
+    "vite": "^5.2.10",
-    "vite-bundle-analyzer": "0.8.1",
+    "vite-bundle-analyzer": "0.9.4",
     "vite-plugin-cdn2": "1.1.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",
@@ -104,8 +104,8 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "4.3.2",
-    "vitest": "1.4.0",
+    "vitest": "1.5.2",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.11"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
   "main": "index.ts",

src/app-components/app/AppAvatar/index.tsx

@@ -19,27 +19,26 @@
 
 import './index.scss'
 
-import { NAvatar, NFlex } from 'naive-ui'
+import { NAvatar, NButton, NFlex } from 'naive-ui'
 
-import { avatarProps, flexProps } from 'naive-ui'
+import { avatarProps } from 'naive-ui'
 import { APP_CATCH_KEY } from '@/app-config'
 import { getStorage } from '@/utils'
 
 import type { PropType } from 'vue'
-import type { AvatarProps, SpaceProps } from 'naive-ui'
+import type { AvatarProps, FlexProps } from 'naive-ui'
 import type { SigningCallback } from '@/store/modules/signing/types'
 
 const AppAvatar = defineComponent({
   name: 'AppAvatar',
   props: {
     ...avatarProps,
-    ...flexProps,
     cursor: {
       type: String,
       default: 'auto',
     },
     spaceSize: {
-      type: [String, Number] as PropType<SpaceProps['size']>,
+      type: [String, Number, Array] as PropType<FlexProps['size']>,
       default: 'medium',
     },
     avatarSize: {
@@ -49,39 +48,27 @@ const AppAvatar = defineComponent({
   },
   setup(props) {
     const signing = getStorage<SigningCallback>(APP_CATCH_KEY.signing)
-    const cssVars = computed(() => {
-      const vars = {
-        '--app-avatar-cursor': props.cursor,
-      }
-
-      return vars
-    })
 
     return {
       signing,
-      cssVars,
     }
   },
   render() {
-    const { signing, cssVars, spaceSize, avatarSize, $props } = this
+    const { signing, avatarSize, spaceSize, $props } = this
 
     return (
-      <NFlex
+      <NButton quaternary strong>
-        class="app-avatar"
+        <NFlex align="center" size={spaceSize}>
-        {...this.$props}
+          <NAvatar
-        style={cssVars}
+            {...($props as AvatarProps)}
-        size={spaceSize}
+            src={signing?.avatar}
-      >
+            objectFit="cover"
-        <NAvatar
+            round
-          // eslint-disable-next-line prettier/prettier, @typescript-eslint/no-explicit-any
+            size={avatarSize}
-          {...($props as any)}
+          />
-          src={signing?.avatar}
+          {signing?.name}
-          objectFit="cover"
+        </NFlex>
-          round
+      </NButton>
-          size={avatarSize}
-        />
-        <div class="app-avatar__name">{signing?.name}</div>
-      </NFlex>
     )
   },
 })

src/app-components/app/AppLockScreen/components/LockScreen/index.tsx

@@ -12,7 +12,6 @@
 /** 锁屏界面 */
 
 import { NInput, NForm, NFormItem, NButton } from 'naive-ui'
-import AppAvatar from '@/app-components/app/AppAvatar'
 
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
@@ -61,7 +60,6 @@ const LockScreen = defineComponent({
   render() {
     return (
       <div class="app-lock-screen__input">
-        <AppAvatar vertical align="center" avatarSize={52} />
         <NForm
           ref="formInstRef"
           model={this.lockCondition}

src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx

@@ -120,7 +120,7 @@ export default defineComponent({
             </div>
           </div>
           <div class="app-lock-screen__unlock__content-avatar">
-            <AppAvatar vertical align="center" avatarSize={52} />
+            <AppAvatar avatarSize={52} style="pointer-events: none;" />
           </div>
           <div class="app-lock-screen__unlock__content-input">
             <NForm ref="formRef" model={this.lockCondition} rules={rules}>

src/app-components/provider/AppNaiveGlobalProvider/index.tsx

@@ -31,6 +31,7 @@ import {
 
 import { getNaiveLocales } from '@/locales/utils'
 import { useSettingGetters } from '@/store'
+import { MESSAGE_PROVIDER } from '@/app-config'
 
 export default defineComponent({
   name: 'GlobalProvider',
@@ -92,7 +93,7 @@ export default defineComponent({
         dateLocale={localePackage.dateLocal}
       >
         <NLoadingBarProvider>
-          <NMessageProvider>
+          <NMessageProvider {...MESSAGE_PROVIDER}>
             <NDialogProvider>
               <NModalProvider>
                 <NNotificationProvider>

src/app-config/app-config.ts

@@ -13,6 +13,20 @@
 
 import type { LayoutSideBarLogo, PreloadingConfig } from '@/types'
 import type { AppMenuConfig, AppKeepAlive } from '@/types'
+import type { MessageProviderProps } from 'naive-ui'
+
+/**
+ *
+ * @description
+ * 配置 MessageProver 组件。
+ * 该配置项会影响到全局 Message 组件的默认配置。
+ *
+ * @see https://www.naiveui.com/zh-CN/dark/components/message#MessageProvider-Props
+ */
+export const MESSAGE_PROVIDER: MessageProviderProps = {
+  max: 5,
+  closable: false,
+}
 
 /**
  *
@@ -57,12 +71,12 @@ export const PRE_LOADING_CONFIG: PreloadingConfig = {
 
 /**
  *
- * icon: LOGO 图标, 依赖 `RIcon` 实现(如果为空则不会渲染图标)
+ * icon: LOGO 图标， 依赖 `RIcon` 实现(如果为空则不会渲染图标)；4.8.2 版本后支持 VNode
  * title: LOGO 标题
- * url: 点击跳转地址, 如果不配置该属性, 则不会触发跳转
+ * url: 点击跳转地址， 如果不配置该属性， 则不会触发跳转
- * jumpType: 跳转类型(station: 项目内跳转, outsideStation: 新页面打开)
+ * jumpType: 跳转类型(station: 项目内跳转， outsideStation: 新页面打开)
  *
- * 如果不设置该属性或者为空, 则不会渲染 LOGO
+ * 如果不设置该属性或者为空， 则不会渲染 LOGO
  */
 export const SIDE_BAR_LOGO: LayoutSideBarLogo | undefined = {
   icon: 'ray',

src/app-config/router-config.ts

@@ -12,9 +12,11 @@
 /** vue-router 相关配置入口 */
 
 import type { LayoutInst } from 'naive-ui'
+import type { Ref } from 'vue'
 
 /**
  *
+ * @description
  * 内容区域 ref 注册
  * 可以控制内容区域当前滚动位置
  * 如果你需要在切换路由时候配置自定义滚动到某个视图区域时, 可以使用该属性提供的方法(scrollTo)
@@ -22,13 +24,27 @@ import type { LayoutInst } from 'naive-ui'
  * 请注意
  * 如果你动态的添加了某个属性后, 希望控制滚动条滚动到某个区域时, 应该注意 dom 挂载后再执行该方法
  * @example
- * ```ts
  * nextTick().then(() => {
  *  LAYOUT_CONTENT_REF.value?.scrollTo()
  * })
- * ```
  */
-export const LAYOUT_CONTENT_REF = ref<LayoutInst | null>(null)
+export const LAYOUT_CONTENT_REF: Readonly<Ref<LayoutInst | null>> =
+  ref<LayoutInst | null>(null)
+
+/**
+ *
+ * @description
+ * 侧边滚动栏滚动 ref 注册。
+ * 可以控制侧边滚动栏滚动位置。
+ *
+ * 请注意使用时机。建议使用 nextTick() 等待 dom 挂载后再执行该方法。
+ * @example
+ * nextTick().then(() => {
+ *   LAYOUT_SIDER_REF.value?.scrollTo({ top: 0 })
+ * })
+ */
+export const LAYOUT_SIDER_REF: Readonly<Ref<LayoutInst | null>> =
+  ref<LayoutInst | null>(null)
 
 export const SETUP_ROUTER_ACTION = {
   /** 是否启用路由切换时顶部加载条 */
@@ -39,6 +55,7 @@ export const SETUP_ROUTER_ACTION = {
 
 /**
  *
+ * @description
  * 路由白名单(不进行权限校验路由)
  *
  * 路由表单白名单
@@ -50,6 +67,7 @@ export const WHITE_ROUTES: string[] = ['RLogin', 'ErrorPage', 'RayTemplateDoc']
 
 /**
  *
+ * @description
  * 超级管理员
  * 配置默认超级管理员, 默认拥有全部最高权限
  */

src/axios/axios-interceptor/request/plugins/cancel.ts

@@ -0,0 +1,30 @@
+import { axiosCanceler } from '@/axios/utils/interceptor'
+
+import type { FetchFunction, FetchErrorFunction } from '@/axios/types'
+
+/**
+ *
+ * @param ins 当前请求实例
+ * @param mode 当前环境
+ *
+ * @description
+ * 移除请求拦截器与注入请求拦截器。
+ */
+const injectRequestCanceler: FetchFunction = (ins, mode) => {
+  axiosCanceler.removePendingRequest(ins) // 检查是否存在重复请求, 若存在则取消已发的请求
+  axiosCanceler.addPendingRequest(ins) // 把当前的请求信息添加到 pendingRequest 表中
+}
+
+/**
+ *
+ * @param error 请求错误信息
+ * @param mode 当前环境
+ *
+ * @description
+ * 请求错误时候，移除请求拦截器。
+ */
+const requestErrorCanceler: FetchErrorFunction = (error, mode) => {
+  axiosCanceler.removePendingRequest(error) // 移除请求拦截器
+}
+
+export { injectRequestCanceler, requestErrorCanceler }

src/axios/axios-interceptor/request/plugins/request-headers.ts

@@ -0,0 +1,39 @@
+import { appendRequestHeaders } from '@/axios/utils/append-request-headers'
+import { APP_CATCH_KEY } from '@/app-config'
+import { getStorage } from '@/utils'
+
+import type { RequestInterceptorConfig, FetchFunction } from '@/axios/types'
+
+/**
+ *
+ * 这里只是示例如何获取到系统缓存的 token 并且返回请求头 token 的 key 和 value
+ * 尽可能的拆分每个拦截器的功能函数
+ * 这是这个包存在的意义
+ *
+ * 当然你也可以根据 request instance 来特殊处理, 这里暂时不做演示
+ */
+const requestHeaderToken = (ins: RequestInterceptorConfig, mode: string) => {
+  const token = getStorage<string>(APP_CATCH_KEY.token)
+
+  if (ins.url) {
+    // TODO: 根据 url 不同是否设置 token
+  }
+
+  return {
+    key: 'X-TOKEN',
+    value: token,
+  }
+}
+
+/** 注入请求头信息 */
+const injectRequestHeaders: FetchFunction = (ins, mode) => {
+  appendRequestHeaders(ins, [
+    requestHeaderToken(ins, mode),
+    {
+      key: 'Demo-Header-Key',
+      value: 'Demo Header Value',
+    },
+  ])
+}
+
+export { injectRequestHeaders }

src/axios/axios-interceptor/request/provider.ts

@@ -0,0 +1,39 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-06
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 请求拦截器入口
+ * 被注册方法执行时其实例能够保证获取到, 所以不需要做额外空判断
+ * 在内部执行方法中, 已经做了边界处理
+ *
+ * 提供两个工具方法, 方便类型推导
+ *
+ * 其中 injectRequestCanceler requestErrorCanceler 方法为 axios request interceptor 方法
+ */
+
+import { injectRequestCanceler, requestErrorCanceler } from './plugins/cancel'
+import { injectRequestHeaders } from './plugins/request-headers'
+
+/**
+ *
+ * 注册请求拦截器
+ * 请注意执行顺序
+ */
+export default {
+  // 请求正常
+  implementRequestInterceptorArray: [
+    injectRequestHeaders,
+    injectRequestCanceler,
+  ],
+  // 请求错误
+  implementRequestInterceptorErrorArray: [requestErrorCanceler],
+}

src/axios/axios-interceptor/response/plugins/cancel.ts

@@ -0,0 +1,29 @@
+import { axiosCanceler } from '@/axios/utils/interceptor'
+
+import type { FetchFunction, FetchErrorFunction } from '@/axios/types'
+
+/**
+ *
+ * @param ins 当前响应实例
+ * @param mode 当前环境
+ *
+ * @description
+ * 响应成功后注销请求取消器。
+ */
+const injectResponseCanceler: FetchFunction = (ins, mode) => {
+  axiosCanceler.removePendingRequest(ins)
+}
+
+/**
+ *
+ * @param error 错误信息
+ * @param mode 当前环境
+ *
+ * @description
+ * 注销失败请求取消器。
+ */
+const responseErrorCanceler: FetchErrorFunction = (error, mode) => {
+  axiosCanceler.removePendingRequest(error)
+}
+
+export { injectResponseCanceler, responseErrorCanceler }

src/axios/axios-interceptor/response/provider.ts

@@ -20,38 +20,7 @@
  * 其中 injectResponseCanceler responseErrorCanceler 方法是注入的 axios response interceptor 方法
  */
 
-import { axiosCanceler } from '@/axios/utils/interceptor'
+import { injectResponseCanceler, responseErrorCanceler } from './plugins/cancel'
-
-import type {
-  ResponseInterceptorConfig,
-  FetchFunction,
-  FetchErrorFunction,
-} from '@/axios/types'
-import type { Recordable } from '@/types'
-
-/**
- *
- * @param ins 当前响应实例
- * @param mode 当前环境
- *
- * @description
- * 响应成功后注销请求取消器。
- */
-const injectResponseCanceler: FetchFunction = (ins, mode) => {
-  axiosCanceler.removePendingRequest(ins)
-}
-
-/**
- *
- * @param error 错误信息
- * @param mode 当前环境
- *
- * @description
- * 注销失败请求取消器。
- */
-const responseErrorCanceler: FetchErrorFunction = (error, mode) => {
-  axiosCanceler.removePendingRequest(error)
-}
 
 /**
  *

src/axios/inject/request/provider.ts

@@ -1,105 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-06
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * 请求拦截器入口
- * 被注册方法执行时其实例能够保证获取到, 所以不需要做额外空判断
- * 在内部执行方法中, 已经做了边界处理
- *
- * 提供两个工具方法, 方便类型推导
- *
- * 其中 injectRequestCanceler requestErrorCanceler 方法为 axios request interceptor 方法
- */
-
-import { axiosCanceler } from '@/axios/utils/interceptor'
-import { appendRequestHeaders } from '@/axios/utils/axios-copilot'
-import { APP_CATCH_KEY } from '@/app-config'
-import { getStorage } from '@/utils'
-
-import type {
-  RequestInterceptorConfig,
-  FetchFunction,
-  FetchErrorFunction,
-} from '@/axios/types'
-import type { Recordable } from '@/types'
-
-/**
- *
- * 这里只是示例如何获取到系统缓存的 token 并且返回请求头 token 的 key 和 value
- * 尽可能的拆分每个拦截器的功能函数
- * 这是这个包存在的意义
- *
- * 当然你也可以根据 request instance 来特殊处理, 这里暂时不做演示
- */
-const requestHeaderToken = (ins: RequestInterceptorConfig, mode: string) => {
-  const token = getStorage<string>(APP_CATCH_KEY.token)
-
-  if (ins.url) {
-    // TODO: 根据 url 不同是否设置 token
-  }
-
-  return {
-    key: 'X-TOKEN',
-    value: token,
-  }
-}
-
-/** 注入请求头信息 */
-const injectRequestHeaders: FetchFunction = (ins, mode) => {
-  appendRequestHeaders(ins, [
-    requestHeaderToken(ins, mode),
-    {
-      key: 'Demo-Header-Key',
-      value: 'Demo Header Value',
-    },
-  ])
-}
-
-/**
- *
- * @param ins 当前请求实例
- * @param mode 当前环境
- *
- * @description
- * 移除请求拦截器与注入请求拦截器。
- */
-const injectRequestCanceler: FetchFunction = (ins, mode) => {
-  axiosCanceler.removePendingRequest(ins) // 检查是否存在重复请求, 若存在则取消已发的请求
-  axiosCanceler.addPendingRequest(ins) // 把当前的请求信息添加到 pendingRequest 表中
-}
-
-/**
- *
- * @param error 请求错误信息
- * @param mode 当前环境
- *
- * @description
- * 请求错误时候，移除请求拦截器。
- */
-const requestErrorCanceler: FetchErrorFunction = (error, mode) => {
-  axiosCanceler.removePendingRequest(error) // 移除请求拦截器
-}
-
-/**
- *
- * 注册请求拦截器
- * 请注意执行顺序
- */
-export default {
-  // 请求正常
-  implementRequestInterceptorArray: [
-    injectRequestHeaders,
-    injectRequestCanceler,
-  ],
-  // 请求错误
-  implementRequestInterceptorErrorArray: [requestErrorCanceler],
-}

src/axios/instance.ts

@@ -22,11 +22,11 @@ import { useAxiosInterceptor } from '@/axios/utils/interceptor'
 import {
   setupResponseInterceptor,
   setupResponseErrorInterceptor,
-} from '@/axios/inject/response'
+} from '@/axios/axios-interceptor/response'
 import {
   setupRequestInterceptor,
   setupRequestErrorInterceptor,
-} from '@/axios/inject/request'
+} from '@/axios/axios-interceptor/request'
 
 import type { AxiosInstanceExpand } from './types'
 

src/axios/types.ts

@@ -24,11 +24,26 @@ export interface RequestHeaderOptions {
 }
 
 export interface CancelConfig {
+  /**
+   *
+   * @description
+   * 是否需要取消该请求。
+   */
   cancel?: boolean
 }
 
 export interface AppRawRequestConfig<T = any> extends AxiosRequestConfig<T> {
+  /**
+   *
+   * @description
+   * 取消请求配置。
+   */
   cancelConfig?: CancelConfig
+  /**
+   *
+   * @description
+   * 标记该请求的配置项是否被标记了取消。
+   */
   __CANCELER_TAG_RAY_TEMPLATE__?: '__CANCELER_TAG_RAY_TEMPLATE__'
 }
 

src/axios/utils/RequestCanceler.ts

@@ -18,6 +18,17 @@
 
 import type { AppRawRequestConfig, CancelerParams } from '@/axios/types'
 
+/**
+ *
+ * @class RequestCanceler
+ *
+ * @description
+ * 用于取消重复请求，会在请求前添加 signal 属性，用于取消请求。
+ * 通过 generateRequestKey 方法生成请求 key，用于标识请求。
+ *
+ * 如果需要取消请求，则需要在请求前添加 cancelConfig.cancel 为 true；
+ * 并且会在请求前添加 __CANCELER_TAG_RAY_TEMPLATE__ 属性，用于标识是否需要取消。
+ */
 export default class RequestCanceler {
   private pendingRequest: Map<string, AbortController>
 
@@ -25,7 +36,19 @@ export default class RequestCanceler {
     this.pendingRequest = new Map<string, AbortController>()
   }
 
-  /** 是否需要加入取消请求表中 */
+  /**
+   *
+   * @param config 请求体 config
+   *
+   * @description
+   * 判断是否需要添加 signal 属性。
+   *
+   * 如果 cancelConfig 为 false，则不添加 signal 属性；
+   * 如果 cancelConfig 为 true，则添加 signal 属性。
+   *
+   * @example
+   * const bool = isAppending(config) // true or false
+   */
   private isAppending(config: AppRawRequestConfig | CancelerParams) {
     return config.cancelConfig?.cancel ?? true
   }
@@ -33,9 +56,12 @@ export default class RequestCanceler {
   /**
    *
    * @param config 请求体 config
-   * @returns 返回当前请求拼接 key
    *
-   * @remark 将当前请求 config 生成 request key
+   * @description
+   * 根据当前请求生成 key。
+   *
+   * @example
+   * const key = generateRequestKey(config) // string
    */
   private generateRequestKey(config: AppRawRequestConfig | CancelerParams) {
     const { method, url } = config
@@ -52,7 +78,15 @@ export default class RequestCanceler {
    *
    * @param config axios request config
    *
-   * @remark 给请求体添加 signal 属性, 用于取消请求
+   * @description
+   * 添加请求到 pendingRequest map 中，用于取消请求。
+   * 并且如果已经存在该请求，则会取消上次请求，并且重新挂载 signal。
+   *
+   * 如果不需要该请求被挂载，则需要在请求前添加 cancelConfig.cancel 为 false。
+   * 如果该请求需要被取消，则会添加 __CANCELER_TAG_RAY_TEMPLATE__ 属性，标记是否需要取消。
+   *
+   * @example
+   * addPendingRequest(config)
    */
   addPendingRequest(config: AppRawRequestConfig | CancelerParams) {
     if (this.isAppending(config)) {
@@ -77,7 +111,11 @@ export default class RequestCanceler {
    *
    * @param config axios request config
    *
-   * @remark 取消该请求, 并且清除 map 中对应 generateRequestKey value
+   * @description
+   * 移除 pendingRequest map 中的请求，如果存在的话。
+   *
+   * @example
+   * removePendingRequest(config)
    */
   removePendingRequest(config: AppRawRequestConfig | CancelerParams) {
     const requestKey = this.generateRequestKey(config)
@@ -88,7 +126,17 @@ export default class RequestCanceler {
     }
   }
 
-  /** 取消所有请求 */
+  /**
+   *
+   * @description
+   * 移除所有 pendingRequest map 中的请求。
+   *
+   * 值得注意的是，该方法会一次性移除所有的请求，所以需要注意是否有需要在后台挂载的请求；
+   * 如果有需要在后台挂载的请求，则需要在请求前添加 cancelConfig.cancel 为 false。
+   *
+   * @example
+   * cancelAllRequest()
+   */
   cancelAllRequest() {
     this.pendingRequest.forEach((curr) => {
       curr.abort()

src/axios/utils/append-request-headers.ts

@@ -0,0 +1,31 @@
+import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios'
+import type { RequestHeaderOptions } from '../types'
+
+/**
+ *
+ * @param instance axios instance
+ * @param options axios headers options
+ *
+ * @description
+ * 自定义配置 axios 请求头。
+ *
+ * @example
+ * appendRequestHeaders(inst, [
+ *   {
+ *     key: 'Demo-Header-Key',
+ *     value: 'Demo Header Value',
+ *   }
+ * ])
+ */
+export const appendRequestHeaders = <T = unknown>(
+  instance: AxiosRequestConfig<T>,
+  options: RequestHeaderOptions[],
+) => {
+  if (instance) {
+    const requestHeaders = instance.headers as RawAxiosRequestHeaders
+
+    options.forEach((curr) => {
+      requestHeaders[curr.key] = curr.value
+    })
+  }
+}

src/axios/utils/interceptor.ts

@@ -54,6 +54,7 @@ const errorImplement: ErrorImplementQueue = {
   implementRequestInterceptorErrorArray: [],
   implementResponseInterceptorErrorArray: [],
 }
+
 /** 取消器实例 */
 export const axiosCanceler = new RequestCanceler()
 

src/components/RBarcode/src/Barcode.tsx

@@ -15,7 +15,9 @@ import { NSpin } from 'naive-ui'
 
 import barcode from 'jsbarcode'
 import props from './props'
-import { completeSize } from '@/utils'
+import { completeSize, call } from '@/utils'
+
+import type { WatchStopHandle } from 'vue'
 
 export default defineComponent({
   name: 'RBarcode',
@@ -30,20 +32,54 @@ export default defineComponent({
 
       return cssVar
     })
+    let watchStop: WatchStopHandle
 
     const barcodeRender = () => {
-      const { format, text = '', options } = props
+      try {
+        const { format, text, options, onSuccess } = props
 
-      const assignOptions = Object.assign({}, options, {
+        const assignOptions = Object.assign({}, options, {
-        format,
+          format,
-      })
+        })
 
-      barcode(barcodeRef.value, text, assignOptions)
+        barcode(
+          barcodeRef.value,
+          text !== void 0 && text !== null ? text.toString() : '',
+          assignOptions,
+        )
+
+        if (onSuccess) {
+          call(onSuccess, text, format, options)
+        }
+      } catch (e) {
+        const { onError } = props
+
+        if (onError) {
+          call(onError, e as Error)
+        }
+      } finally {
+        const { onFinally } = props
+
+        if (onFinally) {
+          call(onFinally)
+        }
+      }
     }
 
+    watchEffect(() => {
+      if (props.watchText) {
+        watchStop = watch(() => props.text, barcodeRender)
+      } else {
+        watchStop?.()
+      }
+    })
+
     onMounted(() => {
       barcodeRender()
     })
+    onBeforeUnmount(() => {
+      watchStop?.()
+    })
 
     return {
       barcodeRef,

src/components/RBarcode/src/props.ts

@@ -1,5 +1,6 @@
 import type { RBarcodeRender, RBarcodeOptions, RBarcodeFormat } from './types'
 import type { PropType } from 'vue'
+import type { MaybeArray } from '@/types'
 
 const props = {
   /**
@@ -82,6 +83,57 @@ const props = {
     type: String as PropType<RBarcodeFormat>,
     default: () => 'CODE128',
   },
+  /**
+   *
+   * @description
+   * 是否监听 text 变化，当 text 变化时，会重新生成条形码。
+   *
+   * 但是，在条形码的使用场景中，text 变化的频率应该是比较低的，所以默认不开启。如果有需要，可以手动开启。
+   *
+   * @default false
+   */
+  watchText: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   *
+   * @description
+   * 条形码渲染成功时的回调函数。
+   *
+   * @default undefined
+   */
+  onSuccess: {
+    type: [Function, Array] as PropType<
+      MaybeArray<
+        (
+          currentText: string | undefined,
+          format: RBarcodeFormat,
+          option: RBarcodeOptions,
+        ) => void
+      >
+    >,
+  },
+  /**
+   *
+   * @description
+   * 条形码渲染失败时的回调函数。
+   *
+   * @default undefined
+   */
+  onError: {
+    type: [Function, Array] as PropType<MaybeArray<(err: Error) => void>>,
+  },
+  /**
+   *
+   * @description
+   * 条形码渲染结束后的回调函数，无论成功或失败都会触发。
+   *
+   * @default undefined
+   */
+  onFinally: {
+    type: [Function, Array] as PropType<MaybeArray<() => void>>,
+  },
 } as const
 
 export default props

src/components/RChart/src/index.tsx

@@ -437,6 +437,7 @@ export default defineComponent({
               props.setChartOptions,
               defaultChartOptions,
             )
+
             // 如果 options 发生变动更新 echarts
             echartInst?.setOption(options, setOpt)
           },

src/components/RChart/src/props.ts

@@ -161,7 +161,7 @@ const props = {
    * @default 100%
    */
   width: {
-    type: String,
+    type: [String, Number] as PropType<string | number>,
     default: '100%',
   },
   /**
@@ -174,7 +174,7 @@ const props = {
    * @default 100%
    */
   height: {
-    type: String,
+    type: [String, Number] as PropType<string | number>,
     default: '100%',
   },
   /**

src/components/RForm/src/hooks/useForm.ts

@@ -6,6 +6,7 @@ import type {
   ShouldRuleBeApplied,
   RFormRules,
 } from '../types'
+import type { Recordable } from '@/types'
 
 /**
  *
@@ -35,7 +36,7 @@ import type {
  *   },
  * })
  */
-const useForm = <T extends Record<string, unknown>, R extends RFormRules>(
+const useForm = <T extends Recordable, R extends RFormRules>(
   model?: T,
   rules?: R,
 ) => {

src/components/RQRCode/src/index.tsx

@@ -53,7 +53,7 @@ const readGIFAsArrayBuffer = (url: string): Promise<GIFBuffer> => {
 }
 
 export default defineComponent({
-  name: 'RayQRcode',
+  name: 'RQrcode',
   props,
   setup(props, ctx) {
     const { expose } = ctx

src/components/RSegment/src/Segment.tsx

@@ -75,6 +75,7 @@ export default defineComponent({
           segmentWidthVar = '100%'
 
           break
+
         case 'fitContent':
           segmentWidthVar = 'fit-content'
 

src/components/RTable/src/Table.tsx

@@ -28,6 +28,7 @@ import type { C as CType, PropsComponentPopselectKeys } from './types'
 
 export default defineComponent({
   name: 'RTable',
+  inheritAttrs: false,
   props,
   setup(props, ctx) {
     const { expose, emit } = ctx
@@ -241,15 +242,18 @@ export default defineComponent({
       $slots,
       propsPopselectValue,
     } = this
+    const { class: className } = $attrs
     const { tool, combineRowProps, contextMenuSelect } = this
 
     return (
       <NCard
-        ref="wrapperRef"
+        {...$props.cardProps}
-        bordered={wrapperBordered}
         {...{
           id: uuidWrapper,
         }}
+        ref="wrapperRef"
+        bordered={wrapperBordered}
+        class={className}
       >
         {{
           default: () => (

src/components/RTable/src/props.ts

@@ -18,11 +18,21 @@ import type {
   DownloadCsvTableOptions,
   PrintTableOptions,
   RTableInst,
+  RTableCardProps,
 } from './types'
 import type { Recordable } from '@/types'
 
 const props = {
   ...dataTableProps,
+  /**
+   *
+   * @description
+   * 配置表格外层容器 props，也就是 NCard 的配置项。
+   */
+  cardProps: {
+    type: Object as PropType<RTableCardProps>,
+    default: () => ({}),
+  },
   /**
    *
    * @description

src/components/RTable/src/types.ts

@@ -6,11 +6,16 @@ import type {
   DataTableInst,
   DataTableColumn,
   DataTableBaseColumn,
+  CardProps,
 } from 'naive-ui'
-import type { VNode } from 'vue'
+import type { VNode, CSSProperties } from 'vue'
 import type { Recordable } from '@/types'
 import type { PrintDomOptions } from '@/utils/dom'
 
+export interface RTableCardProps extends CardProps {
+  style?: CSSProperties
+}
+
 export type TableActionIcon = string | (() => VNode)
 
 export type DropdownMixedOption =

src/hooks/template/index.ts

@@ -6,3 +6,5 @@ export * from './useSiderBar'
 export * from './useAppNavigation'
 export * from './useAppRoot'
 export * from './useBadge'
+export * from './useSiderScroll'
+export * from './useContentScroll'

src/hooks/template/useContentScroll.ts

@@ -0,0 +1,28 @@
+import { LAYOUT_CONTENT_REF } from '@/app-config'
+
+/**
+ *
+ * @description
+ * 滚动侧边栏、内容区域。
+ *
+ * @see https://www.naiveui.com/zh-CN/dark/components/layout#scroll-to.vue
+ *
+ * @example
+ * const contentScrollTo = useContentScroll()
+ *
+ * contentScrollTo({ top: 0, left: 0, behavior: 'smooth' }) // 滚动内容区域
+ * contentScrollTo(10, 10) // x, y 方向滚动到 10 位置
+ */
+export const useContentScroll = () => {
+  const contentInst = LAYOUT_CONTENT_REF.value
+
+  const { scrollTo: contentScrollTo } = contentInst || {}
+
+  if (!contentScrollTo) {
+    throw new Error(
+      `[useContentScroll]: LAYOUT_CONTENT_REF is not ready yet. please wait component mounted!`,
+    )
+  }
+
+  return contentScrollTo
+}

src/hooks/template/useSiderScroll.ts

@@ -0,0 +1,27 @@
+import { LAYOUT_SIDER_REF } from '@/app-config'
+
+/**
+ *
+ * @description
+ * 滚动侧边栏。
+ *
+ * @see https://www.naiveui.com/zh-CN/dark/components/layout#scroll-to.vue
+ *
+ * @example
+ * const siderScrollTo = useSiderScroll()
+ *
+ * siderScrollTo({ top: 0, behavior: 'smooth' }) // y 方向侧边栏滚动
+ * siderScrollTo(0, 0) // x, y 方向滚动到 0 位置
+ */
+export const useSiderScroll = () => {
+  const siderInst = LAYOUT_SIDER_REF.value
+  const { scrollTo: siderScrollTo } = siderInst || {}
+
+  if (!siderScrollTo) {
+    throw new Error(
+      `[useSiderScroll]: LAYOUT_SIDER_REF is not ready yet. please wait component mounted!`,
+    )
+  }
+
+  return siderScrollTo
+}

src/hooks/web/usePagination.ts

@@ -1,4 +1,5 @@
 import { omit } from 'lodash-es'
+import { effectDispose } from '@/utils'
 
 import type { AnyFC } from '@/types'
 import type { PaginationProps } from 'naive-ui'
@@ -32,16 +33,10 @@ const defaultOptions: UsePaginationOptions = {
  * 便捷分页 hook。
  */
 export const usePagination = <T extends AnyFC>(
-  callback: T,
+  callback?: T,
   options?: UsePaginationOptions,
 ) => {
-  if (typeof callback !== 'function') {
+  const callbackRef = ref(callback)
-    throw new Error(
-      '[usePagination]: callback expected a function, but got ' +
-        typeof callback,
-    )
-  }
-
   const omitOptions = omit(options, [
     'on-update:page',
     'on-update:page-size',
@@ -54,13 +49,13 @@ export const usePagination = <T extends AnyFC>(
     onUpdatePage: (page: number) => {
       paginationRef.value.page = page
 
-      callback()
+      callbackRef.value?.()
     },
     onUpdatePageSize: (pageSize: number) => {
       paginationRef.value.pageSize = pageSize
       paginationRef.value.page = 1
 
-      callback()
+      callbackRef.value?.()
     },
   }
   const paginationRef = ref<PaginationProps>(
@@ -77,7 +72,7 @@ export const usePagination = <T extends AnyFC>(
    * @description
    * 获取总条数。
    */
-  const getItemCount = () => paginationRef.value.itemCount
+  const getItemCount = () => paginationRef.value.itemCount as number
 
   /**
    *
@@ -95,7 +90,7 @@ export const usePagination = <T extends AnyFC>(
    * @description
    * 获取当前页页码。
    */
-  const getPage = () => paginationRef.value.page
+  const getPage = () => paginationRef.value.page as number
 
   /**
    *
@@ -115,7 +110,7 @@ export const usePagination = <T extends AnyFC>(
    * @description
    * 获取每页条数。
    */
-  const getPageSize = () => paginationRef.value.pageSize
+  const getPageSize = () => paginationRef.value.pageSize as number
 
   /**
    *
@@ -144,6 +139,25 @@ export const usePagination = <T extends AnyFC>(
    */
   const getCallback = callback
 
+  /**
+   *
+   * @param callback 页码、页条数更新时的回调函数
+   *
+   * @description
+   * 手动设置回调函数。
+   *
+   * @example
+   * setCallback(() => {})
+   */
+  const setCallback = (callback: T) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    callbackRef.value = callback as any
+  }
+
+  effectDispose(() => {
+    callbackRef.value = void 0
+  })
+
   return [
     paginationRef as Ref<UsePaginationOptions>,
     {
@@ -157,6 +171,7 @@ export const usePagination = <T extends AnyFC>(
       setPageSize,
       getPagination,
       getCallback,
+      setCallback,
     },
   ] as const
 }

src/layout/components/Menu/components/SiderBarLogo/index.tsx

@@ -11,9 +11,18 @@
 
 import './index.scss'
 
-import { NEllipsis, NPopover } from 'naive-ui'
+import { NEllipsis, NTooltip } from 'naive-ui'
 import { RIcon } from '@/components'
 
+import { isValueType } from '@/utils'
+
+/**
+ *
+ * @description
+ * 侧边栏菜单 Logo 元素 ref。
+ */
+export const SIDER_BAR_LOGO = ref<HTMLElement>()
+
 export default defineComponent({
   name: 'SiderBarLogo',
   props: {
@@ -36,7 +45,7 @@ export default defineComponent({
      *   - station: 模板内跳转
      *   - outsideStation: 新开页面跳转
      */
-    const handleSideBarLogoClick = () => {
+    const sideBarLogoClick = () => {
       if (sideBarLogo && sideBarLogo.url) {
         sideBarLogo.jumpType === 'station'
           ? router.push(sideBarLogo.url)
@@ -44,44 +53,72 @@ export default defineComponent({
       }
     }
 
-    const TemplateLogo = ({ cursor }: { cursor: string }) => (
+    const TemplateLogo = ({ cursor }: { cursor: string }) => {
-      <RIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
+      if (typeof sideBarLogo.icon === 'string') {
-    )
+        return (
+          <RIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
+        )
+      }
+
+      if (isValueType<object>(sideBarLogo.icon, 'Object')) {
+        return <sideBarLogo.icon />
+      }
+    }
 
     return {
       sideBarLogo,
-      handleSideBarLogoClick,
+      sideBarLogoClick,
       TemplateLogo,
     }
   },
   render() {
-    return this.sideBarLogo?.icon && this.sideBarLogo?.title ? (
+    const { sideBarLogo, collapsed, TemplateLogo, sideBarLogoClick } = this
+
+    return sideBarLogo?.title ? (
       <div
         class={[
           'ray-menu__logo',
-          this.sideBarLogo?.url ? 'ray-menu__logo-url' : null,
+          sideBarLogo?.url ? 'ray-menu__logo-url' : null,
         ]}
-        onClick={this.handleSideBarLogoClick.bind(this)}
+        onClick={sideBarLogoClick.bind(this)}
+        ref={SIDER_BAR_LOGO}
       >
-        {this.sideBarLogo?.icon ? (
+        {sideBarLogo?.icon ? (
-          this.collapsed ? (
+          collapsed ? (
-            <NPopover placement="right">
+            <NTooltip placement="right">
               {{
-                trigger: () => <this.TemplateLogo cursor="pointer" />,
+                trigger: () =>
-                default: () => this.sideBarLogo?.title,
+                  TemplateLogo({
+                    cursor: 'pointer',
+                  }),
+                default: () => sideBarLogo.title,
               }}
-            </NPopover>
+            </NTooltip>
           ) : (
-            <this.TemplateLogo cursor="pointer" />
+            TemplateLogo({
+              cursor: 'pointer',
+            })
           )
+        ) : collapsed ? (
+          <NTooltip placement="right">
+            {{
+              trigger: () => (
+                <h1 class="n-menu-item-content">
+                  {sideBarLogo.title[0] || null}
+                </h1>
+              ),
+              default: () => sideBarLogo.title,
+            }}
+          </NTooltip>
         ) : null}
         <h1
           class={[
-            !this.collapsed ? 'ray-menu__logo-title--open' : null,
+            !collapsed ? 'ray-menu__logo-title--open' : null,
             'ray-menu__logo-title',
+            'class="n-menu-item-content"',
           ]}
         >
-          <NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
+          <NEllipsis>{sideBarLogo.title}</NEllipsis>
         </h1>
       </div>
     ) : null

src/layout/components/Menu/index.tsx

@@ -14,7 +14,7 @@ import './index.scss'
 import { NMenu, NLayoutSider, NDrawer } from 'naive-ui'
 import SiderBarLogo from './components/SiderBarLogo'
 
-import { APP_MENU_CONFIG } from '@/app-config'
+import { APP_MENU_CONFIG, LAYOUT_SIDER_REF } from '@/app-config'
 import { useDevice } from '@/hooks'
 import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useMenuGetters, useMenuActions } from '@/store'
@@ -33,7 +33,16 @@ export default defineComponent({
 
     const modelMenuKey = computed({
       get: () => {
+        // eslint-disable-next-line vue/no-async-in-computed-properties
         nextTick().then(() => {
+          /**
+           *
+           * @description
+           * 禁用该 eslint 规则，因为在 computed 中使用了异步操作。
+           * 该规则只是为了避免异步的 computed get 获取值出现问题；
+           * 但是，在这里获取值的操作是同步行为，只是为了在获取值以后将对应菜单项展开；
+           * 所以，这里不会出现异步获取值的问题，所以可以禁用该规则。
+           */
           showMenuOption()
         })
 
@@ -55,14 +64,15 @@ export default defineComponent({
 
     /**
      *
-     * 手动展开当前激活菜单项
+     * @description
+     * 手动展开当前激活菜单项。
      */
     const showMenuOption = () => {
-      const key = modelMenuKey.value as string
+      const key = modelMenuKey.value
 
-      nextTick().then(() => {
+      if (key !== void 0 && key !== null) {
-        menuRef.value?.showOption?.(key)
+        nextTick(() => menuRef.value?.showOption?.(key))
-      })
+      }
     }
 
     const BasicMenu = () => (
@@ -73,6 +83,7 @@ export default defineComponent({
         collapsedWidth={APP_MENU_CONFIG.menuCollapsedWidth}
         onUpdateCollapsed={collapsedMenu.bind(this)}
         nativeScrollbar={false}
+        ref={LAYOUT_SIDER_REF}
       >
         <SiderBarLogo collapsed={getCollapsed.value} />
         <NMenu

src/layout/components/MenuTag/index.tsx

@@ -381,6 +381,11 @@ export default defineComponent({
             positionMenuTag()
           }
         }
+
+        // 初始化时，滚动到当前激活标签页
+        if (odata === void 0) {
+          positionMenuTag()
+        }
       },
       {
         immediate: true,

src/layout/components/Search/GlobalSearch/index.tsx

@@ -28,10 +28,16 @@ import {
   NFlex,
   NSpin,
   NCard,
+  NText,
 } from 'naive-ui'
 import { RIcon } from '@/components'
 
-import { queryElements, setClass, removeClass } from '@/utils'
+import {
+  queryElements,
+  setClass,
+  removeClass,
+  positionSelectedMenuItem,
+} from '@/utils'
 import { throttle, pick } from 'lodash-es'
 import { useMenuActions } from '@/store'
 import { validMenuItemShow } from '@/router/utils'
@@ -91,6 +97,7 @@ export default defineComponent({
     let preSearchElementIndex = searchElementIndex
     const { isTabletOrSmaller } = useDevice()
     const loading = ref(false)
+    const ACTIVE_CLASS = 'content-item--active' // 激活样式 class name
 
     /** 初始化一些值 */
     const resetSearchSomeValue = () => {
@@ -175,6 +182,7 @@ export default defineComponent({
           modelShow.value = false
 
           changeMenuModelValue(option.fullPath, option)
+          setTimeout(positionSelectedMenuItem, 300)
         }
       }
     }
@@ -183,7 +191,6 @@ export default defineComponent({
     const autoFocusingSearchItem = () => {
       const currentOption = state.searchOptions[searchElementIndex] // 获取当前搜索项
       const preOption = state.searchOptions[preSearchElementIndex] // 获取上一搜索项
-      const activeClass = 'content-item--active' // 激活样式 class name
 
       if (currentOption) {
         nextTick().then(() => {
@@ -197,13 +204,13 @@ export default defineComponent({
           if (preSearchElementOptions?.length) {
             const [el] = preSearchElementOptions
 
-            removeClass(el, activeClass)
+            removeClass(el, ACTIVE_CLASS)
           }
 
           if (searchElementOptions?.length) {
             const [el] = searchElementOptions
 
-            setClass(el, activeClass)
+            setClass(el, ACTIVE_CLASS)
           }
         })
       }
@@ -225,13 +232,19 @@ export default defineComponent({
     /** 更新索引 */
     const updateIndex = (type: 'up' | 'down') => {
       if (type === 'up') {
-        searchElementIndex =
+        searchElementIndex -= 1
-          searchElementIndex - 1 < 0 ? 0 : searchElementIndex - 1
+
-      } else if (type === 'down') {
+        if (searchElementIndex < 0) {
-        searchElementIndex =
+          searchElementIndex = state.searchOptions.length - 1
-          searchElementIndex + 1 >= state.searchOptions.length
+        }
-            ? state.searchOptions.length - 1
+      }
-            : searchElementIndex + 1
+
+      if (type === 'down') {
+        searchElementIndex += 1
+
+        if (searchElementIndex >= state.searchOptions.length) {
+          searchElementIndex = 0
+        }
       }
     }
 
@@ -256,10 +269,12 @@ export default defineComponent({
           updateIndex('up')
 
           break
+
         case 'ArrowDown':
           updateIndex('down')
 
           break
+
         case 'Enter':
           // eslint-disable-next-line no-case-declarations
           const option = state.searchOptions[searchElementIndex]
@@ -386,7 +401,7 @@ export default defineComponent({
                                 justify="center"
                                 class="global-search__empty-content"
                               >
-                                没有搜索结果
+                                <NText>没有搜索结果</NText>
                               </NFlex>
                             ),
                           }}

src/layout/components/SiderBar/components/index.ts

@@ -1,8 +1,8 @@
 import TooltipIcon from './TooltipIcon'
 import SettingDrawer from './SettingDrawer'
 import Breadcrumb from './Breadcrumb'
-import GlobalSearch from './GlobalSearch'
+import GlobalSearch from '../../Search/GlobalSearch'
-import GlobalSearchButton from './GlobalSearchButton'
+import GlobalSearchButton from '../../Search/GlobalSearchButton'
 
 export {
   TooltipIcon,

src/layout/components/SiderBar/index.scss

@@ -16,3 +16,7 @@
 .ray-template--dark .layout-header {
   box-shadow: 0 1px 2px $layoutShadowColorDark;
 }
+
+.override-button__layout {
+  padding: 0 9px;
+}

src/layout/components/SiderBar/index.tsx

@@ -19,7 +19,7 @@
 
 import './index.scss'
 
-import { NLayoutHeader, NFlex, NDropdown } from 'naive-ui'
+import { NLayoutHeader, NFlex, NDropdown, NButton, NScrollbar } from 'naive-ui'
 import { RIcon } from '@/components'
 import {
   TooltipIcon,
@@ -146,8 +146,9 @@ export default defineComponent({
           class="layout-header__method"
           align="center"
           justify="space-between"
+          wrap={false}
         >
-          <NFlex align="center">
+          <NFlex align="center" wrap={false}>
             {leftIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -161,7 +162,7 @@ export default defineComponent({
             ))}
             {getBreadcrumbSwitch ? <Breadcrumb /> : null}
           </NFlex>
-          <NFlex align="center" size={[16, 0]}>
+          <NFlex justify="end" align="center" size={[0, 0]} wrap={false}>
             {isRenderVNode(
               <GlobalSearchButton
                 onClick={(e) => {
@@ -172,34 +173,40 @@ export default defineComponent({
               />,
             )}
             {rightTooltipIconOptions.map((curr) => (
-              <TooltipIcon
+              <NButton
+                class="override-button__layout"
+                quaternary
+                size="medium"
                 key={curr.name}
-                iconName={curr.name}
-                tooltipText={
-                  isRef(curr.tooltip) ? curr.tooltip.value : curr.tooltip
-                }
-                customClassName={curr.iconClass}
                 onClick={toolIconClick.bind(this, curr.name)}
-              />
+              >
+                <RIcon name={curr.name} size={18} cursor="pointer" />
+              </NButton>
             ))}
             <NDropdown
               options={LOCAL_OPTIONS}
               onSelect={(key: string | number) => updateLocale(String(key))}
               trigger="click"
             >
-              <RIcon
+              <NButton quaternary class="override-button__layout">
-                customClassName="layout-header__method--icon"
+                <RIcon
-                name="language"
+                  customClassName="layout-header__method--icon"
-                size="18"
+                  name="language"
-                cursor="pointer"
+                  size="18"
-              />
+                  cursor="pointer"
+                />
+              </NButton>
             </NDropdown>
             <NDropdown
               options={createAvatarOptions()}
               onSelect={avatarDropdownClick.bind(this)}
               trigger="click"
             >
-              <AppAvatar avatarSize="small" align="center" cursor="pointer" />
+              <AppAvatar
+                avatarSize={24}
+                spaceSize={[8, 0]}
+                class="override-button__layout"
+              />
             </NDropdown>
           </NFlex>
         </NFlex>

src/layout/default/ContentWrapper/index.tsx

@@ -74,15 +74,18 @@ export default defineComponent({
       globalMainLayoutLoad,
       layoutContentMaximize,
       layoutContentSpinning,
+      maximize,
+      spinning,
+      themeOverridesSpin,
+      getContentTransition,
     } = this
-    const { maximize } = this
 
     return (
       <NSpin
-        show={this.spinning || !globalMainLayoutLoad || layoutContentSpinning}
+        show={spinning || !globalMainLayoutLoad || layoutContentSpinning}
         description="loading..."
         size="large"
-        themeOverrides={this.themeOverridesSpin}
+        themeOverrides={themeOverridesSpin}
         class={[
           layoutContentMaximize
             ? 'r-layout-full__viewer-content--maximize'
@@ -105,7 +108,7 @@ export default defineComponent({
         {globalMainLayoutLoad ? (
           <RTransitionComponent
             class="content-wrapper"
-            transitionPropName={this.getContentTransition + '-transform'}
+            transitionPropName={getContentTransition + '-transform'}
           />
         ) : null}
       </NSpin>

src/layout/index.tsx

@@ -55,7 +55,7 @@ export default defineComponent({
     const { getLockAppScreen } = this
 
     return !getLockAppScreen() ? (
-      <NLayout class="r-layout-full" style={[cssVarsRef]} hasSider>
+      <NLayout class="r-layout-full" style={[cssVarsRef]} hasSider embedded>
         <Menu />
         <NLayoutContent class="r-layout-full__viewer">
           <HeaderWrapper ref="layoutSiderBarRef" />

src/router/modules/dashboard.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const dashboard: AppRouteRecordRaw = {
   path: '/dashboard',
-  name: 'RDashboard',
   component: () => import('@/views/dashboard'),
   meta: {
     i18nKey: t('menu.Dashboard'),

src/router/modules/demo/barcode.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const barcode: AppRouteRecordRaw = {
   path: 'barcode',
-  name: 'Barcode',
   component: () => import('@/views/demo/BarcodeDemo'),
   meta: {
     i18nKey: t('menu.Barcode'),

src/router/modules/demo/cache-demo.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const cacheDemo: AppRouteRecordRaw = {
   path: '/cache-demo',
-  name: 'CacheDemo',
   component: () => import('@/views/demo/cache-demo/index'),
   meta: {
     i18nKey: t('menu.CacheDemo'),

src/router/modules/demo/context-menu.ts

@@ -4,7 +4,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const contextMenu: AppRouteRecordRaw = {
   path: '/context-menu',
-  name: 'ContextMenuDemo',
   component: () => import('@/views/demo/context-menu/index'),
   meta: {
     i18nKey: t('menu.ContextMenu'),

src/router/modules/demo/directive.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const directive: AppRouteRecordRaw = {
   path: '/directive',
-  name: 'RDirective',
   component: () => import('@/views/demo/directive/index'),
   meta: {
     i18nKey: t('menu.Directive'),

src/router/modules/demo/echart.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const echart: AppRouteRecordRaw = {
   path: '/echart',
-  name: 'REchart',
   component: () => import('@/views/demo/echart/index'),
   meta: {
     i18nKey: t('menu.Echart'),

src/router/modules/demo/form.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const form: AppRouteRecordRaw = {
   path: '/form',
-  name: 'FormView',
   component: () => import('@/views/demo/form'),
   meta: {
     i18nKey: t('menu.Form'),

src/router/modules/demo/iframe.ts

@@ -4,7 +4,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const iframe: AppRouteRecordRaw = {
   path: '/iframe',
-  name: 'IframeDemo',
   component: () => import('@/views/demo/iframe/index'),
   meta: {
     icon: 'other',

src/router/modules/demo/mock.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const mockDemo: AppRouteRecordRaw = {
   path: '/mock-demo',
-  name: 'MockDemo',
   component: () => import('@/views/demo/mock-demo/index'),
   meta: {
     i18nKey: t('menu.Mock'),

src/router/modules/demo/modal.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const mockDemo: AppRouteRecordRaw = {
   path: '/modal-demo',
-  name: 'ModalDemo',
   component: () => import('@/views/demo/modal-demo/index'),
   meta: {
     i18nKey: t('menu.Modal'),

src/router/modules/demo/multi-menu.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const multiMenu: AppRouteRecordRaw = {
   path: '/multi',
-  name: 'MultiMenu',
   component: LAYOUT,
   meta: {
     i18nKey: t('menu.MultiMenu'),

src/router/modules/demo/precision.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const precision: AppRouteRecordRaw = {
   path: '/precision',
-  name: 'CalculatePrecision',
   component: () => import('@/views/demo/precision/index'),
   meta: {
     i18nKey: t('menu.CalculatePrecision'),

src/router/modules/demo/qrcode.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const qrcode: AppRouteRecordRaw = {
   path: '/qrcode',
-  name: 'RQRCode',
   component: () => import('@/views/demo/qrcode/index'),
   meta: {
     i18nKey: t('menu.QRCode'),

src/router/modules/demo/rely.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const rely: AppRouteRecordRaw = {
   path: 'rely-about',
-  name: 'RelyAbout',
   component: () => import('@/views/demo/rely/views/rely-about/index'),
   meta: {
     i18nKey: t('menu.RelyAbout'),

src/router/modules/demo/router-demo.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const routerDemo: AppRouteRecordRaw = {
   path: '/router-demo',
-  name: 'RouterDemoRoot',
   component: LAYOUT,
   meta: {
     i18nKey: t('menu.RouterDemo'),
@@ -15,7 +14,6 @@ const routerDemo: AppRouteRecordRaw = {
   children: [
     {
       path: 'router-demo-home',
-      name: 'RouterDemoHome',
       component: () =>
         import('@/views/demo/router-demo/router-demo-home/index'),
       meta: {
@@ -24,7 +22,6 @@ const routerDemo: AppRouteRecordRaw = {
     },
     {
       path: 'router-demo-detail',
-      name: 'RouterDemoDetail',
       component: () =>
         import('@/views/demo/router-demo/router-demo-detail/index'),
       meta: {

src/router/modules/demo/scroll-reveal.ts

@@ -11,7 +11,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const scrollReveal: AppRouteRecordRaw = {
   path: '/scroll-reveal',
-  name: 'ScrollReveal',
   component: () => import('@/views/demo/scroll-reveal/index'),
   meta: {
     i18nKey: t('menu.scrollReveal'),

src/router/modules/demo/segment.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const segment: AppRouteRecordRaw = {
   path: '/segment',
-  name: 'RAxios',
   component: () => import('@/views/demo/segment'),
   meta: {
     i18nKey: t('menu.Segment'),

src/router/modules/demo/svg-icons.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const previewSVGIcons: AppRouteRecordRaw = {
   path: '/svg-icons',
-  name: 'PreviewSVGIcons',
   component: () => import('@/views/demo/svg-icons/index'),
   meta: {
     i18nKey: t('menu.SvgIcon'),

src/router/modules/demo/table.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const table: AppRouteRecordRaw = {
   path: '/table',
-  name: 'TableView',
   component: () => import('@/views/demo/table/index'),
   meta: {
     i18nKey: t('menu.Table'),

src/router/modules/demo/template-hooks.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const axios: AppRouteRecordRaw = {
   path: '/template-hooks',
-  name: 'TemplateHooks',
   component: () => import('@/views/demo/template-hooks/index'),
   meta: {
     i18nKey: t('menu.TemplateHooks'),

src/router/modules/error-404.ts

@@ -5,7 +5,6 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const error404: AppRouteRecordRaw = {
   path: '/:catchAll(.*)',
-  name: 'ErrorPage',
   component: () => import('@/views/error/views/Error404'),
   meta: {
     i18nKey: t('menu.Error'),

src/router/types.ts

@@ -11,39 +11,202 @@ export type Component<T = any> =
   | (() => Promise<T>)
 
 export interface AppMenuExtraOptions {
+  /**
+   *
+   * @description
+   * 标签标题。
+   */
   label?: string | number
+  /**
+   *
+   * @description
+   * 标签图标。
+   */
   icon?: VNode
+  /**
+   *
+   * @description
+   * 标签渲染类型。
+   */
   type?: TagProps['type']
+  /**
+   *
+   * @description
+   * 是否显示。
+   */
   show?: boolean
+  /**
+   *
+   * @description
+   * 标签标题，带有 i18n 国际化切换效果。
+   */
   i18nLabel?: string
 }
 
 export interface AppRouteMeta {
+  /**
+   *
+   * @description
+   * 菜单 i18n 国际化 标题
+   */
   i18nKey?: string
+  /**
+   *
+   * @description
+   * 菜单图标。
+   * 如果配置为 string，则会自动使用 RIcon 尝试获取 icons 包下的图标。
+   * VNode 类型，会直接使用传递图标渲染。
+   */
   icon?: string | VNode
+  /**
+   *
+   * @description
+   * 是否以新窗口打开该菜单。
+   */
   windowOpen?: string
+  /**
+   *
+   * @description
+   * 权限表，启用则会验证该菜单项是否权限匹配。
+   * 并且，该配置项优先级最高。
+   */
   role?: (string | number)[]
+  /**
+   *
+   * @description
+   * 配置菜单项是否隐藏。
+   * 但是，允许被跳转，例如 404, 500 类似页面。
+   */
   hidden?: boolean
+  /**
+   *
+   * @description
+   * 菜单标题，无需国际化。
+   */
   noLocalTitle?: string | number
+  /**
+   *
+   * @description
+   * 是否需要在切换菜单的时候，该页面的内容区域置顶。
+   * 默认都需要。
+   */
   ignoreAutoResetScroll?: boolean
+  /**
+   *
+   * @description
+   * 菜单项排序。
+   */
   order?: number
+  /**
+   *
+   * @description
+   * 页面缓存。
+   *
+   * 如果缓存会出现失败的情况，请查看该文档排查。
+   * @see https://xiaodaigua-ray.github.io/ray-template-doc/ray-template-docs/common-problem/keep-alive.html
+   */
   keepAlive?: boolean
+  /**
+   *
+   * @description
+   * 配置该页面是否为平级模式。
+   * 当配置为 true 的时候，会在跳转至该页面的时候，追加面包屑后再跳转，不会追加 MenuTag。
+   */
   sameLevel?: boolean
+  /**
+   *
+   * @description
+   * 配置当前菜单项的在什么环境下才会显示。
+   * 优先级最低。
+   */
   env?: string | string[]
+  /**
+   *
+   * @description
+   * 菜单项的额外标签项。
+   */
   extra?: AppMenuExtraOptions
 }
 
 // @ts-ignore
-export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+interface BaseAppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
-  name: string
+  /**
+   *
+   * @description
+   * 请注意 name 在新版本的 vue-router 中不再推荐被使用为导航。
+   *
+   * 但是，如果你需要缓存该页面，那么该配置项就一定要配置！
+   * 否则，缓存将会失效。
+   */
+  name?: string
+  /**
+   *
+   * @description
+   * 配置当前页面额外信息，用于菜单渲染。
+   */
   meta: AppRouteMeta
+  /**
+   *
+   * @description
+   * 路由依赖渲染组件。
+   * 如果需要嵌套路由，可以考虑使用 LAYOUT 作为父路由组件。
+   *
+   * @example
+   * {
+   *   path: '/dashboard',
+   *   component: LAYOUT,
+   *   children: [ ... ]
+   * }
+   */
   component?: Component | string
+  /**
+   *
+   * @description
+   * 路由依赖渲染组件。
+   *
+   * @deprecated
+   * 不推荐使用。
+   */
   components?: Component
+  /**
+   *
+   * @description
+   * 嵌套路由。
+   */
   children?: AppRouteRecordRaw[]
+  /**
+   *
+   * @description
+   * 需要传递给组件的 props。
+   */
   props?: Recordable
+  /**
+   *
+   * @description
+   * 包括 search 和 hash 在内的完整地址。
+   * 该字符串是经过百分号编码的。
+   */
   fullPath?: string
 }
 
+interface KeepAliveAppRouteRecordRaw extends BaseAppRouteRecordRaw {
+  meta: AppRouteMeta & {
+    keepAlive: true
+  }
+  name: string
+}
+
+interface NonKeepAliveAppRouteRecordRaw extends BaseAppRouteRecordRaw {
+  meta: AppRouteMeta & {
+    keepAlive?: false
+  }
+  name?: string
+}
+
+export type AppRouteRecordRaw =
+  | KeepAliveAppRouteRecordRaw
+  | NonKeepAliveAppRouteRecordRaw
+
 export interface RouteModules {
   [propName: string]: {
     default: AppRouteRecordRaw

src/router/utils/combine-raw-route-modules.ts

@@ -4,12 +4,14 @@ import type { AppRouteRecordRaw, RouteModules } from '@/router/types'
  *
  * @returns 所有路由模块
  *
- * @remark 自动合并所有路由模块, 每一个 ts 文件都视为一个 route module 与 views 一一对应
+ * @description
+ * 自动合并所有路由模块，每一个 ts 文件都视为一个 route module 与 views 一一对应。
+ * 会将 modules 中每一个 ts 文件当作一个路由模块，即使你以分包的形式创建了路由模块。
  *
- * 请注意, 如果更改了 modules 的目录位置或者该方法的位置, 需要同步更改 import.meta.glob 方法的路径
+ * 请注意，如果更改了 modules 的目录位置或者该方法的位置，需要同步更改 import.meta.glob 方法的路径。
- * 该方法会以本文件为起始位置去查找对应 URL 目录的资源
+ * 该方法会以本文件为起始位置去查找对应 URL 目录的资源。
  *
- * 会将 modules 中每一个 ts 文件当作一个路由模块, 即使你以分包的形式创建了路由模块
+ * 如果组件的 name 属性出现重复或者冲突，会导致一些意想不到的情况。
  */
 export const combineRawRouteModules = () => {
   const modulesFiles: RouteModules = import.meta.glob(
@@ -19,18 +21,18 @@ export const combineRawRouteModules = () => {
     },
   )
 
-  const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => {
+  const modules = Object.keys(modulesFiles).reduce((pre, curr) => {
-    const route = modulesFiles[modulePath].default
+    const module = modulesFiles[curr].default
 
-    if (route) {
+    if (module) {
-      modules.push(route)
+      pre.push(module)
     } else {
       throw new Error(
-        'router helper combine: an exception occurred while parsing the routing file!',
+        `[combineRawRouteModules]: ${curr} module must export default.`,
       )
     }
 
-    return modules
+    return pre
   }, [] as AppRouteRecordRaw[])
 
   return modules

src/store/modules/menu/index.ts

@@ -332,6 +332,7 @@ export const piniaMenuStore = defineStore(
             let fullPath = `${
               parentPath.endsWith('/') ? parentPath : parentPath + '/'
             }${curr.path}`
+
             // 使用正则表达式替换重复的 '/'
             fullPath = fullPath.replace(/\/+/g, '/')
 

src/types/modules/app.ts

@@ -1,9 +1,9 @@
 import type { VNode } from 'vue'
-import type { AppRouteRecordRaw, AppRouteMeta } from '@/router/types'
+import type { AppRouteMeta } from '@/router/types'
 
 export type Key = string | number
 
-export interface AppMenuOption extends AppRouteRecordRaw {
+export interface AppMenuOption {
   name: string
   key: Key
   path: string

src/types/modules/vite-custom-config.ts

@@ -7,9 +7,10 @@ import type {
 } from 'vite'
 import type { Recordable } from '@/types'
 import type { GlobalThemeOverrides } from 'naive-ui'
+import type { VNode } from 'vue'
 
 export interface LayoutSideBarLogo {
-  icon?: string
+  icon?: string | VNode
   title?: string
   url?: string
   jumpType?: 'station' | 'outsideStation'

src/utils/basic.ts

@@ -162,6 +162,7 @@ export const downloadAnyFile = (
     try {
       if (typeof data === 'string') {
         downloadBase64File(data, fileName)
+
         return resolve()
       }
 
@@ -200,6 +201,8 @@ export const downloadAnyFile = (
 
       document.body.appendChild(link)
       link.click()
+
+      return resolve()
     } catch (error) {
       return reject(error)
     }

src/utils/cache.ts

@@ -171,6 +171,7 @@ const removeStorage: RemoveStorageFC = (key, storageType, options) => {
     console.error(
       `[removeStorage]: Failed to remove stored data: key ${key} is empty or undefined`,
     )
+
     return
   }
 
@@ -185,6 +186,7 @@ const removeStorage: RemoveStorageFC = (key, storageType, options) => {
       : removeType === 'localStorage'
         ? localStorageKeys
         : sessionStorageKeys
+
     keys.forEach((curr) => {
       if (key === '__all__') {
         window.sessionStorage.removeItem(_prefix + curr)

src/utils/index.ts

@@ -1,3 +1,5 @@
+import { positionSelectedMenuItem } from './position-selected-menu-item'
+
 export * from './basic'
 export * from './cache'
 export * from './dom'
@@ -5,3 +7,4 @@ export * from './element'
 export * from './precision'
 export * from './vue'
 export * from './app'
+export { positionSelectedMenuItem }

src/utils/position-selected-menu-item.ts

@@ -0,0 +1,55 @@
+import { LAYOUT_SIDER_REF } from '@/app-config'
+import { useSiderScroll } from '@/hooks'
+import { unrefElement } from '@/utils'
+import { SIDER_BAR_LOGO } from '@/layout/components/Menu/components/SiderBarLogo'
+
+const MENU_ITEM_SELECTED = '.n-menu-item-content--selected' // 菜单激活样式 class name
+const MENU_ITEM = 'n-menu-item'
+
+/**
+ *
+ * @description
+ * 将 Sider 滚动条滚动到当前激活菜单项的位置。
+ *
+ * 但是，该方法目前存在一个问题，由于 NMenu 的渲染机制，默认不会渲染子菜单；
+ * 所以导致一个问题，则是不能准确的获取到激活菜单项的元素。
+ *
+ * 有考虑过使用 setTimeout 来延迟执行，但是该渲染受到机器配置的影响，不是一个稳定的解决方案。
+ *
+ * @example
+ * positionSelectedMenuItem() // 滚动到当前激活菜单项的位置
+ */
+export const positionSelectedMenuItem = () => {
+  const siderEl = unrefElement(LAYOUT_SIDER_REF as Ref<HTMLElement>)
+  const selectedEl = siderEl?.querySelector<HTMLElement>(MENU_ITEM_SELECTED)
+  const siderBarLogoEl = unrefElement(SIDER_BAR_LOGO)
+  let siderBarLogoHeight: number = 0
+  const menuItemEl = siderEl?.querySelector<HTMLElement>(MENU_ITEM)
+
+  if (siderBarLogoEl) {
+    const { height } = siderBarLogoEl.getBoundingClientRect()
+
+    siderBarLogoHeight = height
+  }
+
+  if (selectedEl && siderEl) {
+    const siderScroll = useSiderScroll()
+    const { top: siderTop } = siderEl.getBoundingClientRect()
+    const { top: selectedTop } = selectedEl.getBoundingClientRect()
+    const siderScrollTop = siderEl.scrollTop
+    const menuItemMarginTop = menuItemEl
+      ? parseInt(window.getComputedStyle(menuItemEl).marginTop)
+      : 6
+
+    siderScroll({
+      top:
+        selectedTop -
+        siderTop +
+        siderScrollTop -
+        siderBarLogoHeight -
+        menuItemMarginTop,
+      left: 0,
+      behavior: 'smooth',
+    })
+  }
+}

src/views/demo/BarcodeDemo.tsx

@@ -10,7 +10,15 @@
  */
 
 import { RBarcode } from '@/components'
-import { NAlert, NCard, NFlex, NGrid, NGridItem, NSwitch } from 'naive-ui'
+import {
+  NAlert,
+  NCard,
+  NFlex,
+  NGrid,
+  NGridItem,
+  NInput,
+  NSwitch,
+} from 'naive-ui'
 
 export default defineComponent({
   name: 'BarcodeDemo',
@@ -19,10 +27,12 @@ export default defineComponent({
       width: 4,
     }
     const loading = ref(false)
+    const text = ref('RayTemplate')
 
     return {
       baseOptions,
       loading,
+      text,
     }
   },
   render() {
@@ -119,6 +129,14 @@ export default defineComponent({
             </NFlex>
           </NCard>
         </NGridItem>
+        <NGridItem span={1}>
+          <NCard title="watchText 主动监听 text 变化">
+            <NFlex vertical>
+              <NInput v-model:value={this.text} />
+              <RBarcode text={this.text} watchText />
+            </NFlex>
+          </NCard>
+        </NGridItem>
       </NGrid>
     )
   },

src/views/demo/form/index.tsx

@@ -22,7 +22,7 @@ import {
   NRadioGroup,
 } from 'naive-ui'
 
-import { useForm } from '@/components'
+import { useForm, useModal } from '@/components'
 
 import type { RFormRules } from '@/components'
 
@@ -138,6 +138,8 @@ export default defineComponent({
                 type="info"
                 onClick={() => {
                   this.condition = formModel()
+
+                  restoreValidation()
                 }}
               >
                 重置表单为初始状态

src/views/demo/mock-demo/index.tsx

@@ -158,7 +158,7 @@ const MockDemo = defineComponent({
                 </>
               ),
               action: () => (
-                <NButton type="primary" onClick={this.getCallback.bind(this)}>
+                <NButton type="primary" onClick={this.getCallback?.bind(this)}>
                   搜索
                 </NButton>
               ),

src/views/demo/precision/index.tsx

@@ -47,6 +47,7 @@ const CalculatePrecision = defineComponent({
         )
       })
     }
+
     updateDistributeValue()
 
     return {

unplugin/.eslintrc-auto-import.json

@@ -69,11 +69,7 @@
     "useAttrs": true,
     "useCssModule": true,
     "useCssVars": true,
-    "useDialog": true,
     "useLink": true,
-    "useLoadingBar": true,
-    "useMessage": true,
-    "useNotification": true,
     "useRoute": true,
     "useRouter": true,
     "useSlots": true,
@@ -81,7 +77,6 @@
     "watchEffect": true,
     "watchPostEffect": true,
     "watchSyncEffect": true,
-    "NEllipsis": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true

unplugin/auto-imports.d.ts

@@ -6,7 +6,6 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
@@ -67,11 +66,7 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
-  const useDialog: typeof import('naive-ui')['useDialog']
   const useLink: typeof import('vue-router')['useLink']
-  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
-  const useMessage: typeof import('naive-ui')['useMessage']
-  const useNotification: typeof import('naive-ui')['useNotification']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']

vite.custom.config.ts

@@ -47,7 +47,7 @@ import type { BuildOptions } from 'vite'
 
 const config: AppConfigExport = {
   /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
-  base: '/ray-template/',
+  // base: '/ray-template/',
   /** 配置首屏加载信息 */
   preloadingConfig: PRE_LOADING_CONFIG,
   /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */

vite.plugin.config.ts

@@ -17,7 +17,7 @@ import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import viteInspect from 'vite-plugin-inspect'
 import viteSvgLoader from 'vite-svg-loader'
 import vitePluginImp from 'vite-plugin-imp'
-import { analyzer } from 'vite-bundle-analyzer'
+import { analyzer, adapter } from 'vite-bundle-analyzer'
 import viteCompression from 'vite-plugin-compression'
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
 import viteAutoImport from 'unplugin-auto-import/vite'
@@ -25,15 +25,19 @@ import viteEslint from 'vite-plugin-eslint'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import unpluginViteComponents from 'unplugin-vue-components/vite'
-import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
 
-import { cdnResolve, svgIconResolve } from './vite-helper'
+import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
+import { cdnResolve, svgIconResolve } from './vite-helper'
 import config from './vite.custom.config'
 
 import type { PluginOption } from 'vite'
 
+function pathResolve(dir: string) {
+  return path.resolve(__dirname, dir)
+}
+
 // 仅适用于报告模式（report）
 function onlyReportOptions(mode: string): PluginOption[] {
   if (mode !== 'report') {
@@ -41,10 +45,12 @@ function onlyReportOptions(mode: string): PluginOption[] {
   }
 
   return [
-    analyzer({
+    adapter(
-      analyzerMode: 'server', // 以默认服务器代理打开文件
+      analyzer({
-      openAnalyzer: true, // 以默认服务器代理打开文件
+        analyzerMode: 'server', // 以默认服务器代理打开文件
-    }),
+        openAnalyzer: true, // 以默认服务器代理打开文件
+      }),
+    ),
   ]
 }
 
@@ -107,7 +113,7 @@ function onlyBuildOptions(mode: string): PluginOption[] {
 
 // 仅适用于开发模式
 function onlyDevOptions(mode: string): PluginOption[] {
-  if (mode === 'development') {
+  if (mode !== 'development') {
     return []
   }
 
@@ -127,7 +133,7 @@ function baseOptions(mode: string): PluginOption[] {
       compositionOnly: true,
       forceStringify: true,
       defaultSFCLang: 'json',
-      include: [path.resolve(__dirname, '../locales/**')],
+      include: [pathResolve('../locales/**')],
     }),
     viteAutoImport({
       eslintrc: {
@@ -141,19 +147,7 @@ function baseOptions(mode: string): PluginOption[] {
         /\.md$/, // .md
       ],
       dts: './unplugin/auto-imports.d.ts',
-      imports: [
+      imports: ['vue', 'vue-router', 'pinia'],
-        'vue',
-        'vue-router',
-        'pinia',
-        {
-          'naive-ui': [
-            'useDialog',
-            'useMessage',
-            'useNotification',
-            'useLoadingBar',
-          ],
-        },
-      ],
       resolvers: [NaiveUiResolver()],
     }),
     unpluginViteComponents({

vitest.config.ts

@@ -9,11 +9,11 @@ export default defineConfig((configEnv) =>
     defineConfig({
       plugins: [tsconfigPaths()],
       test: {
-        include: ['**/__test__/**/*.(spec).(ts|tsx)'],
+        include: ['./__test__/**/*.(spec).(ts|tsx)'],
         exclude: [
           ...configDefaults.exclude,
           '**/src/**',
-          '**/__test__/utils/**/*',
+          './__test__/utils/**/*',
         ],
         environment: 'happy-dom',
         globals: true,