version: v4.7.0

.vscode/settings.json

@@ -25,6 +25,7 @@
     "domtoimage",
     "EDITMSG",
     "iife",
+    "linebreak",
     "macarons",
     "menutag",
     "ndata",
@@ -32,6 +33,7 @@
     "Popselect",
     "precommit",
     "siderbar",
+    "stylelint",
     "WUJIE",
     "zlevel"
   ]

CHANGELOG.md

@@ -1,5 +1,48 @@
 # CHANGE LOG
 
+## 4.7.0
+
+做了一些核心依赖的升级操作。
+
+并且规范了整个模板的包命名，这个一直算是遗留问题，有些包名不够语意化与有点混乱，现在终于统一了。
+
+## Feats
+
+- `useDomToImage` 相关
+  - 优化 `ts` 类型提示
+- `usePrint` 相关
+  - 现在会强制剔除 `printable` 配置项
+- 移除 `rollup-plugin-visualizer` 体积分析插件，使用 `vite-bundle-analyzer` 替换
+
+```sh
+# 执行
+pnpm report
+
+# 等待构建后，会自动打开浏览器。
+```
+
+- 移除 `report` 模式的 `eslint` 检查
+- `axios` 相关
+  - `BeforeFetchFunction` 类型更名为 `FetchFunction`
+  - `AppRawRequestConfig` 类型新增 `__CANCELER_TAG_RAY_TEMPLATE__` 标记，用于标记是否需要可以被取消
+  - 优化 `ts` 类型标注
+- 将所有 `type.ts` 包重命名为 `types.ts` 符合语义
+- 更新 `vueuse` 版本至 `10.9.0`
+- 更新 `vite` 版本至 `5.1.5`
+- 更新 `vue` 版本至 `3.4.21`
+- 将所有 `helper.ts, helper file` 统一更改为 `utils.ts`, `utils file` 方式管理
+- 重构 `app/prefixCacheKey` 方法，现在支持自定义前缀
+- 优化 `GlobalSearch` 搜索待选项样式
+- `__ray-template` 包现在只会在 `__DEV__` 环境下才会做检查
+- 新增 `ellipsis` 指令，并且补充所有自定义指令的注释
+- `router` 包相关
+  - 修改 `router` 注册形式，改为同步注册
+  - 修改 `routes` 包导出形式，改为导出一个数组
+
+## Fixes
+
+- 修复 `useVueRouter` 方法 `HMR` 时可能会报错的问题
+
 ## 4.6.4
 
 稳定了 `4.6.4` 版本。
@@ -208,7 +251,7 @@ remove('your key', 'all')
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const cacheDemo: AppRouteRecordRaw = {
   // ...your route config,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.6.4",
+  "version": "4.7.0",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^10.7.1",
+    "@vueuse/core": "^10.9.0",
     "awesome-qr": "2.1.5-rc.0",
     "axios": "^1.6.7",
     "clipboard": "^2.0.11",
@@ -48,7 +48,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "print-js": "^1.6.0",
-    "vue": "^3.4.20",
+    "vue": "^3.4.21",
     "vue-demi": "0.14.6",
     "vue-hooks-plus": "1.8.8",
     "vue-i18n": "^9.9.0",
@@ -87,13 +87,13 @@
     "postcss": "^8.4.31",
     "postcss-px-to-viewport-8-plugin": "1.2.3",
     "prettier": "^3.2.5",
-    "rollup-plugin-visualizer": "^5.12.0",
     "sass": "1.71.1",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
+    "vite-bundle-analyzer": "0.8.1",
     "vite-plugin-cdn2": "0.15.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",

src/__ray-template/README.md

@@ -4,3 +4,11 @@
 
 - validAppRootPath: 检查模板 `appRootPath` 是否配置正确
 - validLocal: 检查模板 `localConfig` 是否配置正确
+
+## 拓展
+
+当你需要在做一些定制化操作的时候，可以尝试在这个包里做一些事情。
+
+租后在 `main.ts` 中导入并且调用即可。
+
+> 出于一些考虑，并没有做自动化导入调用，所以需要自己手动来。（好吧，其实就是我懒-，-）

src/__ray-template/valid/validAppRootPath.ts

@@ -11,6 +11,10 @@ import { useVueRouter } from '@/hooks'
  * 该方法会通过调用 getRoutes 方法获取所有路由，也就意味着检查的路由格式是铺开之后的格式。当你的路由是嵌套路由时，需要注意检查完整的路径。
  */
 export const validAppRootPath = async () => {
+  if (!__DEV__) {
+    return
+  }
+
   const { getAppRootRoute } = useSettingGetters()
   const {
     router: { getRoutes },

src/__ray-template/valid/validLocal.ts

@@ -92,6 +92,10 @@ const validDefaultDayjsLocal = () => {
  * 验证所有的 localConfig 相关的配置。
  */
 export const validLocal = async () => {
+  if (!__DEV__) {
+    return
+  }
+
   validSystemDefaultLocal()
   validSystemFallbackLocale()
   validDayjsLocalMap()

src/api/demo/test.ts

@@ -48,7 +48,7 @@ export const getWeather = (city: string) => {
   })
 }
 
-export const getTypicode = () => {
+export const getTypicCode = () => {
   return request<JSONPlaceholder>({
     url: 'https://jsonplaceholder.typicode.com/todos/1',
     method: 'get',

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

@@ -29,7 +29,7 @@ import {
   NModalProvider,
 } from 'naive-ui'
 
-import { naiveLocales } from '@/locales/helper'
+import { getNaiveLocales } from '@/locales/utils'
 import { useSettingGetters } from '@/store'
 
 export default defineComponent({
@@ -41,7 +41,7 @@ export default defineComponent({
     const localePackage = computed(() => {
       const key = getLocaleLanguage.value
 
-      return naiveLocales(key)
+      return getNaiveLocales(key)
     })
 
     /**

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

@@ -17,7 +17,7 @@
  * beforeRouteUpdate -> cancelAllRequest -> routeUpdate
  */
 
-import { axiosCanceler } from '@/axios/helper/interceptor'
+import { axiosCanceler } from '@/axios/utils/interceptor'
 
 const AppRequestCancelerProvider = defineComponent({
   name: 'AppRequestCancelerProvider',

src/axios/README.md

@@ -5,7 +5,7 @@
 
 ## 工具函数
 
-- BeforeFetchFunction
+- FetchFunction
 - FetchErrorFunction
 
 > 两个工具函数方便类型推导。
@@ -28,13 +28,14 @@ import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
 
 import type {
   RequestInterceptorConfig,
-  BeforeFetchFunction,
+  FetchFunction,
   FetchErrorFunction,
-} from '@/axios/type'
+} from '@/axios/types'
 
-const injectRequestHeaderOfEnv: BeforeFetchFunction<
+const injectRequestHeaderOfEnv: FetchFunction<RequestInterceptorConfig> = (
-  RequestInterceptorConfig
+  ins,
-> = (ins, mode) => {
+  mode,
+) => {
   if (mode === 'development') {
     appendRequestHeaders(ins, [
       {

src/axios/index.ts

@@ -25,7 +25,7 @@ import useHookPlusRequest from 'vue-hooks-plus/es/useRequest'
 import request from '@/axios/instance'
 
 import type { UseRequestOptions } from 'vue-hooks-plus/es/useRequest/types'
-import type { AppRawRequestConfig } from '@/axios/type'
+import type { AppRawRequestConfig } from '@/axios/types'
 
 /**
  *
@@ -48,11 +48,11 @@ function useRequest<
   HookPlusParams extends unknown[] = unknown[],
   HookPlusPlugin = unknown,
 >(
-  fetchOption: AppRawRequestConfig<Response>,
+  fetchOptions: AppRawRequestConfig<Response>,
   option?: UseRequestOptions<Response, HookPlusParams, HookPlusPlugin>,
 ) {
   const fc = () => {
-    const cb = request<Response>(fetchOption)
+    const cb = request<Response>(fetchOptions)
 
     return cb
   }

src/axios/inject/request/index.ts

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { useAxiosInterceptor } from '@/axios/helper/interceptor'
+import { useAxiosInterceptor } from '@/axios/utils/interceptor'
 import implement from './provider'
 
 const { setImplement } = useAxiosInterceptor()

src/axios/inject/request/provider.ts

@@ -20,16 +20,16 @@
  * 其中 injectRequestCanceler requestErrorCanceler 方法为 axios request interceptor 方法
  */
 
-import { axiosCanceler } from '@/axios/helper/interceptor'
+import { axiosCanceler } from '@/axios/utils/interceptor'
-import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
+import { appendRequestHeaders } from '@/axios/utils/axiosCopilot'
 import { APP_CATCH_KEY } from '@/app-config'
 import { getStorage } from '@/utils'
 
 import type {
   RequestInterceptorConfig,
-  BeforeFetchFunction,
+  FetchFunction,
   FetchErrorFunction,
-} from '@/axios/type'
+} from '@/axios/types'
 import type { Recordable } from '@/types'
 
 /**
@@ -54,10 +54,7 @@ const requestHeaderToken = (ins: RequestInterceptorConfig, mode: string) => {
 }
 
 /** 注入请求头信息 */
-const injectRequestHeaders: BeforeFetchFunction<RequestInterceptorConfig> = (
+const injectRequestHeaders: FetchFunction = (ins, mode) => {
-  ins,
-  mode,
-) => {
   appendRequestHeaders(ins, [
     requestHeaderToken(ins, mode),
     {
@@ -72,12 +69,10 @@ const injectRequestHeaders: BeforeFetchFunction<RequestInterceptorConfig> = (
  * @param ins 当前请求实例
  * @param mode 当前环境
  *
- * 移除请求拦截器与注入请求拦截器
+ * @description
+ * 移除请求拦截器与注入请求拦截器。
  */
-const injectRequestCanceler: BeforeFetchFunction<RequestInterceptorConfig> = (
+const injectRequestCanceler: FetchFunction = (ins, mode) => {
-  ins,
-  mode,
-) => {
   axiosCanceler.removePendingRequest(ins) // 检查是否存在重复请求, 若存在则取消已发的请求
   axiosCanceler.addPendingRequest(ins) // 把当前的请求信息添加到 pendingRequest 表中
 }
@@ -87,10 +82,11 @@ const injectRequestCanceler: BeforeFetchFunction<RequestInterceptorConfig> = (
  * @param error 请求错误信息
  * @param mode 当前环境
  *
- * 请求错误时候，移除请求拦截器
+ * @description
+ * 请求错误时候，移除请求拦截器。
  */
-const requestErrorCanceler: FetchErrorFunction<Recordable> = (error, mode) => {
+const requestErrorCanceler: FetchErrorFunction = (error, mode) => {
-  axiosCanceler.removePendingRequest(error)
+  axiosCanceler.removePendingRequest(error) // 移除请求拦截器
 }
 
 /**

src/axios/inject/response/index.ts

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { useAxiosInterceptor } from '@/axios/helper/interceptor'
+import { useAxiosInterceptor } from '@/axios/utils/interceptor'
 import implement from './provider'
 
 const { setImplement } = useAxiosInterceptor()

src/axios/inject/response/provider.ts

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

src/axios/instance.ts

@@ -18,7 +18,7 @@
 
 import axios from 'axios'
 import { AXIOS_CONFIG } from '@/app-config'
-import { useAxiosInterceptor } from '@/axios/helper/interceptor'
+import { useAxiosInterceptor } from '@/axios/utils/interceptor'
 import {
   setupResponseInterceptor,
   setupResponseErrorInterceptor,
@@ -28,7 +28,7 @@ import {
   setupRequestErrorInterceptor,
 } from '@/axios/inject/request'
 
-import type { AxiosInstanceExpand } from './type'
+import type { AxiosInstanceExpand } from './types'
 
 const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
 const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor()

src/axios/types.ts

@@ -6,6 +6,7 @@ import type {
   AxiosDefaults,
   Axios,
   AxiosResponse,
+  AxiosError,
 } from 'axios'
 import type { AnyFC } from '@/types'
 
@@ -28,8 +29,13 @@ export interface CancelConfig {
 
 export interface AppRawRequestConfig<T = any> extends AxiosRequestConfig<T> {
   cancelConfig?: CancelConfig
+  __CANCELER_TAG_RAY_TEMPLATE__?: '__CANCELER_TAG_RAY_TEMPLATE__'
 }
 
+export interface CancelerParams<T = any, D = any>
+  extends AppRawRequestConfig<T>,
+    AxiosError<T, D> {}
+
 export interface AxiosInstanceExpand extends Axios {
   <T = any, D = any>(config: AppRawRequestConfig<D>): Promise<T>
   <T = any, D = any>(url: string, config?: AppRawRequestConfig<D>): Promise<T>
@@ -104,14 +110,15 @@ export interface ErrorImplementQueue {
   implementResponseInterceptorErrorArray: AnyFC[]
 }
 
-export type BeforeFetchFunction<
+export type FetchFunction = <T = any, K = any>(
-  T = RequestInterceptorConfig | ResponseInterceptorConfig,
+  ins: RequestInterceptorConfig<T> & ResponseInterceptorConfig<T, K>,
-> = <K extends T>(ins: K, mode: string) => void
+  mode: string,
+) => void
 
 export type FetchType = 'ok' | 'error'
 
-export type FetchErrorFunction<T = any> = <K extends T>(
+export type FetchErrorFunction<T = any, D = any> = (
-  error: K,
+  error: AxiosError<T, D>,
   mode: string,
 ) => void
 
@@ -120,7 +127,7 @@ export interface AxiosFetchInstance {
   responseInstance: ResponseInterceptorConfig | null
 }
 
-export interface AxiosFetchError<T = unknown> {
+export interface AxiosFetchError<T = any> {
   requestError: T | null
   responseError: T | null
 }

src/axios/utils/RequestCanceler.ts

@@ -16,7 +16,7 @@
  * 可以根据自己项目进行定制化配置
  */
 
-import type { AppRawRequestConfig } from '@/axios/type'
+import type { AppRawRequestConfig, CancelerParams } from '@/axios/types'
 
 export default class RequestCanceler {
   private pendingRequest: Map<string, AbortController>
@@ -26,7 +26,7 @@ export default class RequestCanceler {
   }
 
   /** 是否需要加入取消请求表中 */
-  private isAppending(config: AppRawRequestConfig) {
+  private isAppending(config: AppRawRequestConfig | CancelerParams) {
     return config.cancelConfig?.cancel ?? true
   }
 
@@ -37,7 +37,7 @@ export default class RequestCanceler {
    *
    * @remark 将当前请求 config 生成 request key
    */
-  private generateRequestKey(config: AppRawRequestConfig) {
+  private generateRequestKey(config: AppRawRequestConfig | CancelerParams) {
     const { method, url } = config
 
     return [
@@ -54,8 +54,10 @@ export default class RequestCanceler {
    *
    * @remark 给请求体添加 signal 属性, 用于取消请求
    */
-  addPendingRequest(config: AppRawRequestConfig) {
+  addPendingRequest(config: AppRawRequestConfig | CancelerParams) {
     if (this.isAppending(config)) {
+      config.__CANCELER_TAG_RAY_TEMPLATE__ = '__CANCELER_TAG_RAY_TEMPLATE__'
+
       const requestKey = this.generateRequestKey(config)
 
       if (!this.pendingRequest.has(requestKey)) {
@@ -77,7 +79,7 @@ export default class RequestCanceler {
    *
    * @remark 取消该请求, 并且清除 map 中对应 generateRequestKey value
    */
-  removePendingRequest(config: AppRawRequestConfig) {
+  removePendingRequest(config: AppRawRequestConfig | CancelerParams) {
     const requestKey = this.generateRequestKey(config)
 
     if (this.pendingRequest.has(requestKey)) {

src/axios/utils/axiosCopilot.ts

@@ -12,7 +12,7 @@
 /** axios 拦截器工具 */
 
 import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios'
-import type { RequestHeaderOptions } from '../type'
+import type { RequestHeaderOptions } from '../types'
 
 /**
  *

src/axios/utils/interceptor.ts

@@ -20,7 +20,7 @@
  * 所以在使用的时候, 需要按照约定格式进行参数传递
  */
 
-import RequestCanceler from '@/axios/helper/RequestCanceler'
+import RequestCanceler from '@/axios/utils/RequestCanceler'
 import { getAppEnvironment } from '@/utils'
 
 import type {
@@ -31,8 +31,9 @@ import type {
   FetchType,
   AxiosFetchInstance,
   AxiosFetchError,
-} from '@/axios/type'
+} from '@/axios/types'
 import type { AnyFC } from '@/types'
+import type { AxiosError } from 'axios'
 
 /** 当前请求的实例 */
 const axiosFetchInstance: AxiosFetchInstance = {
@@ -40,7 +41,7 @@ const axiosFetchInstance: AxiosFetchInstance = {
   responseInstance: null,
 }
 /** 请求失败返回值 */
-const axiosFetchError: AxiosFetchError = {
+const axiosFetchError: AxiosFetchError<AxiosError<unknown, unknown>> = {
   requestError: null,
   responseError: null,
 }
@@ -94,7 +95,7 @@ export const useAxiosInterceptor = () => {
   /** 队列执行器 */
   const implementer = (funcs: AnyFC[], ...args: any[]) => {
     if (Array.isArray(funcs)) {
-      funcs?.forEach((curr) => {
+      funcs.forEach((curr) => {
         if (typeof curr === 'function') {
           curr(...args)
         }
@@ -123,7 +124,7 @@ export const useAxiosInterceptor = () => {
   /** 请求、响应错误时执行队列中所有方法 */
   const fetchError = (
     key: keyof AxiosFetchError,
-    error: unknown,
+    error: AxiosError<unknown, unknown>,
     errorImplementKey: keyof ErrorImplementQueue,
   ) => {
     axiosFetchError[key] = error
@@ -143,3 +144,5 @@ export const useAxiosInterceptor = () => {
     fetchError,
   }
 }
+
+export type UseAxiosInterceptor = ReturnType<typeof useAxiosInterceptor>

src/components/RChart/index.ts

@@ -3,7 +3,7 @@ import chartProps from './src/props'
 
 import type { ExtractPublicPropTypes } from 'vue'
 
-import type * as RChartType from './src/type'
+import type * as RChartType from './src/types'
 
 export type ChartProps = ExtractPublicPropTypes<typeof chartProps>
 export type { RChartType }

src/components/RChart/src/index.tsx

@@ -26,7 +26,7 @@ import { NCard } from 'naive-ui'
 import props from './props'
 import { throttle } from 'lodash-es'
 import { completeSize, downloadBase64File, call, renderNode } from '@/utils'
-import { setupChartTheme } from './helper'
+import { setupChartTheme } from './utils'
 import { APP_THEME } from '@/app-config'
 import { useResizeObserver } from '@vueuse/core'
 import { RMoreDropdown } from '@/components'

src/components/RChart/src/props.ts

@@ -1,21 +1,19 @@
 import type * as echarts from 'echarts/core' // `echarts` 核心模块
 import type { PropType, VNode } from 'vue'
 import type { MaybeArray } from '@/types'
+import type { ECharts, SetOptionOpts } from 'echarts/core'
+import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'
 import type {
   LoadingOptions,
   AutoResize,
   ChartTheme,
-} from '@/components/RChart/src/type'
-import type { ECharts, SetOptionOpts } from 'echarts/core'
-import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'
-import type {
   EChartsExtensionInstallRegisters,
   RChartPresetType,
   RChartDownloadOptions,
-} from './type'
+} from './types'
 import type { CardProps, DropdownProps, DropdownOption } from 'naive-ui'
 
-import { loadingOptions } from './helper'
+import { loadingOptions } from './utils'
 
 const props = {
   bordered: {

src/components/RChart/src/utils.ts

@@ -13,7 +13,7 @@ import type {
   ChartThemeRawArray,
   ChartThemeRawModules,
   LoadingOptions,
-} from '@/components/RChart/src/type'
+} from '@/components/RChart/src/types'
 
 /**
  *

src/components/RCollapseGrid/index.ts

@@ -1,7 +1,7 @@
 import RCollapseGrid from './src'
 import collapseGridProps from './src/props'
 
-import type * as RCollapseGridType from './src/type'
+import type * as RCollapseGridType from './src/types'
 import type { ExtractPublicPropTypes } from 'vue'
 
 export type CollapseGridProps = ExtractPublicPropTypes<typeof collapseGridProps>

src/components/RCollapseGrid/src/props.ts

@@ -1,7 +1,7 @@
 import { gridProps } from 'naive-ui'
 
 import type { PropType } from 'vue'
-import type { CollapseToggleText } from './type'
+import type { CollapseToggleText } from './types'
 import type { AnyFC, MaybeArray } from '@/types'
 
 const props = {

src/components/RIframe/index.ts

@@ -1,7 +1,7 @@
 import RIframe from './src'
 import iframeProps from './src/props'
 
-import type * as RIframeType from './src/type'
+import type * as RIframeType from './src/types'
 import type { ExtractPublicPropTypes } from 'vue'
 
 export type IframeProps = ExtractPublicPropTypes<typeof iframeProps>

src/components/RQRCode/index.ts

@@ -1,7 +1,7 @@
 import RQRCode from './src'
 import qrcodeProps from './src/props'
 
-import type * as RQRCodeType from './src/type'
+import type * as RQRCodeType from './src/types'
 import type { ExtractPublicPropTypes } from 'vue'
 
 export type QRCodeProps = ExtractPublicPropTypes<typeof qrcodeProps>

src/components/RQRCode/src/index.tsx

@@ -22,7 +22,7 @@ import type {
   QRCodeRenderResponse,
   GIFBuffer,
   DownloadFilenameType,
-} from './type'
+} from './types'
 import type { WatchStopHandle } from 'vue'
 
 const readGIFAsArrayBuffer = (url: string): Promise<GIFBuffer> => {

src/components/RQRCode/src/props.ts

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import type { QRCodeStatus, QRCodeLevel } from './type'
+import type { QRCodeStatus, QRCodeLevel } from './types'
 import type { PropType, VNode } from 'vue'
 import type { MaybeArray } from '@/types'
 import type { Options } from 'awesome-qr'

src/components/RTable/index.ts

@@ -1,7 +1,7 @@
 import RTable from './src/Table'
 import tableProps from './src/props'
 
-import type * as RTableType from './src/type'
+import type * as RTableType from './src/types'
 import type { ExtractPublicPropTypes } from 'vue'
 
 export type TableProps = ExtractPublicPropTypes<typeof tableProps>

src/components/RTable/src/Table.tsx

@@ -24,7 +24,7 @@ import { config } from './shared'
 
 import type { DropdownOption, DataTableInst } from 'naive-ui'
 import type { ComponentSize } from '@/types'
-import type { C as CType, PropsComponentPopselectKeys } from './type'
+import type { C as CType, PropsComponentPopselectKeys } from './types'
 
 export default defineComponent({
   name: 'RTable',

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

@@ -26,7 +26,7 @@ import props from '../props'
 import { call } from '@/utils'
 
 import type { TreeOption, TreeDropInfo } from 'naive-ui'
-import type { C } from '../type'
+import type { C } from '../types'
 import type { AnyFC } from '@/types'
 import type { MaybeArray } from '@/types'
 

src/components/RTable/src/components/Fullscreen.tsx

@@ -14,7 +14,7 @@ import { RIcon } from '@/components'
 import { config } from '../shared'
 import { useFullscreen } from 'vue-hooks-plus'
 
-import type { TableProvider } from '../type'
+import type { TableProvider } from '../types'
 
 export default defineComponent({
   name: 'TableFullscreen',

src/components/RTable/src/components/Print.tsx

@@ -15,7 +15,7 @@ import { config } from '../shared'
 import props from '../props'
 import { printDom } from '@/utils/dom'
 
-import type { TableProvider } from '../type'
+import type { TableProvider } from '../types'
 
 export default defineComponent({
   name: 'TablePrint',

src/components/RTable/src/components/Props.tsx

@@ -17,7 +17,7 @@ import { config } from '../shared'
 import props from '../props'
 
 import type { MaybeArray } from '@/types'
-import type { PropsComponentPopselectKeys } from '../type'
+import type { PropsComponentPopselectKeys } from '../types'
 
 export default defineComponent({
   name: 'TablePropsSelect',

src/components/RTable/src/props.ts

@@ -14,7 +14,7 @@ import { dataTableProps } from 'naive-ui'
 import type { PropType, VNode } from 'vue'
 import type { MaybeArray } from '@/types'
 import type { DropdownOption, DataTableColumn } from 'naive-ui'
-import type { DownloadCsvTableOptions, PrintTableOptions } from './type'
+import type { DownloadCsvTableOptions, PrintTableOptions } from './types'
 import type { Recordable } from '@/types'
 
 const props = {

src/components/RTransitionComponent/index.ts

@@ -1,7 +1,7 @@
 import RTransitionComponent from './src/index.vue'
 import transitionComponentProps from './src/props'
 
-import type * as RTransitionComponentType from './src/type'
+import type * as RTransitionComponentType from './src/types'
 import type { ExtractPublicPropTypes } from 'vue'
 
 export type TransitionComponentProps = ExtractPublicPropTypes<

src/components/RTransitionComponent/src/index.vue

@@ -27,7 +27,7 @@ import { useKeepAliveGetters } from '@/store'
 import { APP_KEEP_ALIVE } from '@/app-config'
 import props from './props'
 
-import type { TransitionProps } from './type'
+import type { TransitionProps } from './types'
 
 /**
  *
@@ -42,3 +42,4 @@ withDefaults(defineProps<TransitionProps>(), props)
 const { getKeepAliveInclude } = useKeepAliveGetters()
 const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
 </script>
+./types

src/components/RTransitionComponent/src/props.ts

@@ -1,4 +1,4 @@
-import type { TransitionProps } from './type'
+import type { TransitionProps } from './types'
 
 const props: TransitionProps = {
   transitionPropName: 'fade',

src/components/index.ts

@@ -10,9 +10,9 @@ export * from './RTable'
 export * from './RTransitionComponent'
 
 // 导出自定义组件类型
-export type * from './RChart/src/type'
+export type * from './RChart/src/types'
-export type * from './RCollapseGrid/src/type'
+export type * from './RCollapseGrid/src/types'
-export type * from './RIframe/src/type'
+export type * from './RIframe/src/types'
-export type * from './RQRCode/src/type'
+export type * from './RQRCode/src/types'
-export type * from './RTable/src/type'
+export type * from './RTable/src/types'
-export type * from './RTransitionComponent/src/type'
+export type * from './RTransitionComponent/src/types'

src/directives/index.ts

@@ -9,11 +9,11 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { combineDirective } from './helper/combine'
+import { combineDirective } from './utils/combine'
 import { forIn } from 'lodash-es'
 
 import type { App } from 'vue'
-import type { DirectiveModules } from '@/directives/type'
+import type { DirectiveModules } from '@/directives/types'
 
 /**
  *

src/directives/modules/copy/index.ts

@@ -12,12 +12,22 @@
 /**
  *
  * directive name: copy
+ *
+ * 该指令用于处理复制，使用的时候必须传递正确的 value 值。
+ *
+ * 指令基于 clipboard.js 实现。
+ *
+ * 使用方式：
+ * @example
+ * <template>
+ *  <button v-copy="copyText">复制</button>
+ * </template>
  */
 
 import ClipboardJS from 'clipboard'
 
-import type { CopyElement } from './type'
+import type { CopyElement } from './types'
-import type { CustomDirectiveFC } from '@/directives/type'
+import type { CustomDirectiveFC } from '@/directives/types'
 
 const createClipboard = (el: CopyElement, value: string) => {
   const clipboard = new ClipboardJS(el, {

src/directives/modules/debounce/index.ts

@@ -12,15 +12,28 @@
 /**
  *
  * directive name: debounce
+ *
+ * 该指令用于处理防抖，使用的时候必须传递正确的 func 值。
+ *
+ * 其中 trigger 和 wait 是可选的，trigger 默认为 click，wait 默认为 500。
+ *
+ * 使用方式：
+ * @example
+ * <template>
+ *  <div v-debounce="{ func: () => console.log('debounce') }">这是一个防抖指令</div>
+ * </template>
+ * <template>
+ *  <div v-debounce="{ func: () => console.log('debounce'), trigger: 'click', wait: 500 }">这是一个防抖指令</div>
+ * </template>
  */
 
 import { debounce } from 'lodash-es'
 import { useEventListener } from '@vueuse/core'
 
-import type { DebounceBindingOptions } from './type'
+import type { DebounceBindingOptions } from './types'
 import type { AnyFC } from '@/types'
 import type { DebouncedFunc } from 'lodash-es'
-import type { CustomDirectiveFC } from '@/directives/type'
+import type { CustomDirectiveFC } from '@/directives/types'
 
 const debounceDirective: CustomDirectiveFC<
   HTMLElement,

src/directives/modules/disabled/index.ts

@@ -12,11 +12,22 @@
 /**
  *
  * directive name: disabled
+ *
+ * 该指令用于处理元素的禁用状态，使用的时候必须传递正确的 value 值。
+ *
+ * 该方法依赖 ray-template__directive--disabled 样式类，需要在全局样式中定义，
+ * 并且该指令仅仅是做了 css 样式层面的禁用效果，如果有需要，还需要在业务逻辑中做相应的处理。
+ *
+ * 使用方式：
+ * @example
+ * <template>
+ *  <button v-disabled="true">这是一个禁用按钮</button>
+ * </template>
  */
 
 import { setClass, removeClass } from '@/utils'
 
-import type { CustomDirectiveFC } from '@/directives/type'
+import type { CustomDirectiveFC } from '@/directives/types'
 
 const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
   if (el) {

src/directives/modules/ellipsis/index.ts

@@ -0,0 +1,80 @@
+/**
+ *
+ * directive name: ellipsis
+ *
+ * 该指令用于处理文本溢出省略，使用的时候必须传递正确的 width 值。
+ *
+ * 其中 line 和 type 是可选的，line 默认为 1，type 默认为 block。
+ *
+ * 使用方式：
+ * @example
+ * <template>
+ *  <div v-ellipsis="{ line: 2, width: 200 }">这是一段需要省略的文字</div>
+ * </template>
+ * <template>
+ *  <div v-ellipsis="{ type: 'block', width: 200 }">这是一段需要省略的文字</div>
+ * </template>
+ */
+
+import { setStyle, completeSize } from '@/utils'
+
+import type { CustomDirectiveFC } from '@/directives/types'
+import type { EllipsisBindingValue } from './types'
+
+/**
+ *
+ * @param el 待绑定的元素
+ * @param options 配置项
+ *
+ * @description
+ * 绑定省略样式。
+ *
+ * @example
+ * bindEllipsis(el, { line: 2, width: 200 })
+ */
+const bindEllipsis = (el: HTMLElement, options: EllipsisBindingValue) => {
+  const { line = 1, type = 'block', width, popoverText } = options
+
+  if (width === void 0 || width === null) {
+    console.error(`[v-ellipsis]: Expected width, but got ${width}!`)
+
+    return
+  }
+
+  if (popoverText) {
+    el.setAttribute('title', el.textContent || '')
+  }
+
+  if (type === 'line') {
+    setStyle(el, {
+      display: '-webkit-box',
+      '-webkit-box-orient': 'vertical',
+      '-webkit-line-clamp': line,
+      overflow: 'hidden',
+      width: completeSize(width),
+    })
+  } else {
+    setStyle(el, {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      width: completeSize(width),
+    })
+  }
+}
+
+const ellipsisDirective: CustomDirectiveFC<
+  HTMLElement,
+  EllipsisBindingValue
+> = () => {
+  return {
+    mounted: (el, { value }) => {
+      bindEllipsis(el, value)
+    },
+    updated: (el, { value }) => {
+      bindEllipsis(el, value)
+    },
+  }
+}
+
+export default ellipsisDirective

src/directives/modules/ellipsis/types.ts

@@ -0,0 +1,26 @@
+export interface EllipsisBindingValue {
+  /**
+   * @description
+   * 省略行数。
+   */
+  line: number
+  /**
+   * @description
+   * 省略方式。
+   *
+   * line: 多行省略
+   * block: 单行省略
+   */
+  type: 'line' | 'block'
+  /**
+   * @description
+   * 宽度。
+   */
+  width: string | number
+  /**
+   *
+   * @description
+   * 是否需要注入 title 属性。
+   */
+  popoverText?: boolean
+}

src/directives/modules/throttle/index.ts

@@ -12,15 +12,28 @@
 /**
  *
  * directive name: throttle
+ *
+ * 该指令用于处理节流，使用的时候必须传递正确的 func 值。
+ *
+ * 其中 trigger 和 wait 是可选的，trigger 默认为 click，wait 默认为 500。
+ *
+ * 使用方式：
+ * @example
+ * <template>
+ *  <div v-throttle="{ func: () => console.log('throttle') }">这是一个节流指令</div>
+ * </template>
+ * <template>
+ *  <div v-throttle="{ func: () => console.log('throttle'), trigger: 'click', wait: 500 }">这是一个节流指令</div>
+ * </template>
  */
 
 import { throttle } from 'lodash-es'
 import { useEventListener } from '@vueuse/core'
 
-import type { ThrottleBindingOptions } from './type'
+import type { ThrottleBindingOptions } from './types'
 import type { AnyFC } from '@/types'
 import type { DebouncedFunc } from 'lodash-es'
-import type { CustomDirectiveFC } from '@/directives/type'
+import type { CustomDirectiveFC } from '@/directives/types'
 
 const throttleDirective: CustomDirectiveFC<
   HTMLElement,

src/directives/types.ts

@@ -1,8 +1,8 @@
 import type { Directive } from 'vue'
 import type { App } from 'vue'
 
-export type { DebounceBindingOptions } from './modules/debounce/type'
+export type { DebounceBindingOptions } from './modules/debounce/types'
-export type { ThrottleBindingOptions } from './modules/throttle/type'
+export type { ThrottleBindingOptions } from './modules/throttle/types'
 
 export type CustomDirectiveFC<T, K> = () => Directive<T, K>
 

src/directives/utils/combine.ts

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import type { DirectiveModules, CustomDirectiveFC } from '@/directives/type'
+import type { DirectiveModules, CustomDirectiveFC } from '@/directives/types'
 
 export const combineDirective = <
   T extends Record<string, DirectiveModules>,

src/error/PageResult/index.tsx

@@ -21,7 +21,7 @@ import './index.scss'
 
 import { NResult, NButton } from 'naive-ui'
 
-import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
+import { redirectRouterToDashboard } from '@/router/utils/routerCopilot'
 import { resultProps } from 'naive-ui'
 
 const PageResult = defineComponent({

src/hooks/template/useBadge.ts

@@ -1,9 +1,9 @@
 import { useMenuGetters, depthSearchAppMenu } from '@/store'
 import { isValueType } from '@/utils'
-import { createMenuExtra } from '@/store/modules/menu/helper'
+import { createMenuExtra } from '@/store/modules/menu/utils'
 
 import type { AppMenuOption } from '@/types'
-import type { AppMenuExtraOptions } from '@/router/type'
+import type { AppMenuExtraOptions } from '@/router/types'
 
 export type BadgeKey = string | AppMenuOption
 

src/hooks/web/useDevice.ts

@@ -23,6 +23,9 @@ export interface UseDeviceOptions extends UseWindowSizeOptions {}
 
 /**
  *
+ * @param options 配置项
+ *
+ * @description
  * 检测当前尺寸是否为平板或者更小
  * 默认主流平板尺寸为 768px
  *

src/hooks/web/useDomToImage.ts

@@ -19,7 +19,8 @@ export type ImageType = keyof typeof domToImageMethods
 
 export type DomToImageResult = string | Blob | Uint8ClampedArray | undefined
 
-export interface UseDomToImageOptions extends ReDomToImageOptions {
+export interface UseDomToImageOptions<T extends TargetType = Element>
+  extends ReDomToImageOptions {
   /**
    *
    *
@@ -37,9 +38,7 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    *
    * @default undefined
    */
-  beforeCreate?: <T extends TargetType = Element>(
+  beforeCreate?: (element: T | null | undefined) => void
-    element: T | null | undefined,
-  ) => void
   /**
    *
    * @param element current dom
@@ -49,10 +48,7 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    *
    * @default undefined
    */
-  created?: <T extends TargetType = Element>(
+  created?: (result: DomToImageResult, element: T) => void
-    result: DomToImageResult,
-    element: T,
-  ) => void
   /**
    *
    * @param error dom to image error

src/hooks/web/useElementFullscreen.ts

@@ -13,6 +13,7 @@ import { unrefElement, effectDispose, isValueType } from '@/utils'
 import { useWindowSize } from '@vueuse/core'
 
 import type { BasicTarget } from '@/types'
+import type { CSSProperties } from 'vue'
 
 export interface UseElementFullscreenOptions {
   /**
@@ -92,7 +93,7 @@ export const useElementFullscreen = (
     backgroundColor,
     zIndex,
   } = options ?? {}
-  const cacheStyle: Partial<CSSStyleDeclaration> = {} // 缓存一些需要被覆盖的样式，例如: transition
+  const cacheStyle: Partial<CSSProperties> = {} // 缓存一些需要被覆盖的样式，例如: transition
   let isSetup = false
 
   const updateStyle = () => {

src/hooks/web/useI18n.ts

@@ -36,6 +36,9 @@ export const useI18n = (namespace?: string) => {
    *
    * 避免 HMR 时 i18n 未初始化导致报错。
    * 但是在开发环境下，i18n 始终会被初始化，所以不会影响其正常使用。
+   *
+   * 但是，其实这是一种很不友好的做好，并且在顶层做修改的时候，依旧可能会有 HMR 报错；
+   * 现在还未找到更好的解决方案，所以只能先这样。
    */
   if (!i18n) {
     return {

src/hooks/web/usePrint.ts

@@ -1,5 +1,5 @@
 import print from 'print-js'
-import { unrefElement } from '@/utils'
+import { unrefElement, omit } from '@/utils'
 
 import type { BasicTarget } from '@/types'
 
@@ -40,7 +40,7 @@ export const usePrint = (target: UsePrintTarget, options?: UsePrintOptions) => {
     const _target = unrefElement(target as BasicTarget) || target
 
     print({
-      ...options,
+      ...omit(options, ['printable']),
       printable: _target,
     })
   }

src/hooks/web/useVueRouter.ts

@@ -11,28 +11,47 @@
 
 import { router } from '@/router'
 
+import type { Router } from 'vue-router'
+
 /**
  *
- * @returns vue router instance
+ * @description
+ * 获取 vue-router 实例，允许你在非 setup 环境中使用。
  *
- * @remark 使用 vue router instance, 可以在 setup 环境外使用
+ * 可能考虑后期会加一些新的东西，所以与 vue-router useRouter 有点差异，需要解构使用 router，
+ * 但是，其余的所有使用方法都与 useRouter 一致。
  *
- * 使用该方法时候, 可能会出现热更新错误的问题... 所以遇到的时候不要紧张, 刷新一下就好
+ * 如果需要使用类似于 useRoute 的方法，可以使用 useVueRouter().router.currentRoute 获取。
- * 如果确定使用环境就在 setup 中, 还是建议使用官方的 useRouter useRoute 方法, 避免热更新报错的问题
+ *
+ * @example
+ * const { router } = useVueRouter()
+ *
+ * // 使用 router
+ * router.push('/path')
+ * router.replace('/path')
+ *
+ * // 使用类似于 useRoute 的方法
+ * const { router: { currentRouter } } = useVueRouter()
+ *
+ * console.log(route.fullPath)
  */
 export const useVueRouter = () => {
-  try {
+  /**
-    if (router) {
+   *
-      return {
+   * 该写法无实际意义，仅是为了避免 HMR 报错，导致开发流程中断。
-        router,
+   * 在实际业务中，router 始终是有值状态，所以不用担心。
-      }
+   *
-    } else {
+   * 但是，其实这是一种很不友好的做好，并且在顶层做修改的时候，依旧可能会有 HMR 报错；
-      throw new Error()
+   * 现在还未找到更好的解决方案，所以只能先这样。
+   */
+  if (!router) {
+    return {
+      router: {} as Router,
     }
-  } catch (e) {
+  }
-    throw new Error(
+
-      `[useVueRouter]: An error occurred during registration of vue-router. ${e}`,
+  return {
-    )
+    router,
   }
 }
 

src/icons/enter.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20">
+  <g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round"
+    stroke-linejoin="round">
+    <path d="M18 3v4c0 2-2 4-4 4H2"></path>
+    <path d="M8 17l-6-6 6-6"></path>
+  </g>
+</svg>

src/layout/components/MenuTag/index.tsx

@@ -80,7 +80,7 @@ export default defineComponent({
       'closeOther',
       'closeCurrentPage',
     ] // 哪些下拉框允许禁用
-    let currentContextmenuIndex = -1 // 当前右键标签页索引位置
+    let currentContextmenuIndex = Infinity // 当前右键标签页索引位置
     const iconConfig = {
       size: 16,
     }
@@ -154,6 +154,7 @@ export default defineComponent({
     })
     const MENU_TAG_DATA = 'menu_tag_data' // 注入 tag 前缀
     const globalMainLayoutLoad = getVariableToRefs('globalMainLayoutLoad')
+    const naiveScrollbarContainerClass = 'n-scrollbar-container' // naive scrollbar 容器 class
 
     /**
      *
@@ -200,7 +201,7 @@ export default defineComponent({
           scroll.childNodes,
         ) as HTMLElement[]
         const findElement = scrollContentElement.find((el) => {
-          const has = hasClass(el, 'n-scrollbar-container')
+          const has = hasClass(el, naiveScrollbarContainerClass)
 
           return has.value
         })
@@ -241,7 +242,11 @@ export default defineComponent({
     const actionDropdownSelect = (key: string | number) => {
       actionState.actionDropdownShow = false
 
-      actionMap[key]?.()
+      const fn = actionMap[key as keyof typeof actionMap]
+
+      if (fn) {
+        fn()
+      }
     }
 
     /**

src/layout/components/SiderBar/components/GlobalSearch/index.scss

@@ -52,13 +52,33 @@ $globalSearchWidth: 650px;
         transform: scale(0.75);
         font-weight: bolder;
       }
-
+    }
-      & .global-search__card-content .content-item {
+  }
-        &.content-item--active,
+}
-        &:hover {
+
-          background-color: var(--ray-theme-primary-fade-color);
+.n-flex.global-search__card-content {
-        }
+  & .content-item.content-item--active,
-      }
+  & .content-item:hover {
+    background-color: var(--ray-theme-primary-fade-color);
+  }
+
+  & .content-item {
+    position: relative;
+    transition: var(--r-bezier);
+
+    & .content-item-icon__enter {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      right: 16px;
+      opacity: 0;
+    }
+  }
+
+  & .content-item.content-item--active,
+  & .content-item:hover {
+    & .content-item-icon__enter {
+      opacity: 1;
     }
   }
 }

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

@@ -32,13 +32,13 @@ import {
 import { RIcon } from '@/components'
 
 import { queryElements, setClass, removeClass, pick } from '@/utils'
-import { debounce } from 'lodash-es'
+import { throttle } from 'lodash-es'
 import { useMenuActions } from '@/store'
-import { validMenuItemShow } from '@/router/helper/routerCopilot'
+import { validMenuItemShow } from '@/router/utils/routerCopilot'
 import { useDevice } from '@/hooks'
 import { useEventListener } from '@vueuse/core'
 
-import type { AppRouteMeta } from '@/router/type'
+import type { AppRouteMeta } from '@/router/types'
 import type { AppMenuOption } from '@/types'
 
 export default defineComponent({
@@ -288,6 +288,11 @@ export default defineComponent({
       >
         <div class="content-item-icon">{RenderPreIcon(menuOption.meta)}</div>
         <div class="content-item-label">{menuOption.breadcrumbLabel}</div>
+        <RIcon
+          name="enter"
+          size="18"
+          customClassName="content-item-icon__enter"
+        />
       </NFlex>
     )
 
@@ -312,7 +317,7 @@ export default defineComponent({
       ...toRefs(state),
       modelShow,
       helperTipOptions,
-      fuzzySearchMenuOptions: debounce(fuzzySearchMenuOptions, 300),
+      fuzzySearchMenuOptions: throttle(fuzzySearchMenuOptions, 300),
       searchItemClick,
       RenderPreIcon,
       isTabletOrSmaller,
@@ -322,7 +327,7 @@ export default defineComponent({
   },
   render() {
     const { isTabletOrSmaller, searchOptions, loading } = this
-    const { SearchItem, fuzzySearchMenuOptions, $t } = this
+    const { SearchItem, fuzzySearchMenuOptions } = this
 
     return isTabletOrSmaller ? (
       <div style="display: none;"></div>
@@ -368,7 +373,7 @@ export default defineComponent({
                           size={[0, 6]}
                           class="global-search__card-content"
                         >
-                          {searchOptions.map((curr) => (
+                          {searchOptions.map((curr, idx) => (
                             <SearchItem menuOption={curr} key={curr.fullPath} />
                           ))}
                         </NFlex>

src/layout/layoutResize.ts

@@ -22,7 +22,11 @@ import type { Ref } from 'vue'
  * 不建议滥用该方法, 对页面渲染有一定的影响
  */
 export const layoutHeaderCssVars = (
-  element: Ref<HTMLElement | undefined>[],
+  element: [
+    Ref<HTMLElement | undefined>,
+    Ref<HTMLElement | undefined>,
+    Ref<HTMLElement | undefined>,
+  ],
 ) => {
   const siderBar = useElementBounding(element[0])
   const menuTag = useElementBounding(element[1])

src/locales/helper.ts

@@ -1,133 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-19
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * 国际化辅助方法:
- *   - combineI18nMessages: 合并对应文件下语言包
- *   - getAppLocalMessages: 获取所有语言
- */
-
-import { set } from 'lodash-es'
-import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
-import { getStorage } from '@/utils'
-import { APP_CATCH_KEY, SYSTEM_DEFAULT_LOCAL } from '@/app-config'
-
-import type { Recordable } from '@/types'
-import type {
-  AppLocalesModules,
-  AppLocalesDropdownMixedOption,
-  AppCurrentAppMessages,
-  I18nModules,
-} from '@/locales/type'
-
-/**
- *
- * @param langs 语言包
- * @param prefix 语言包前缀
- *
- * @remark 合并处理语言包内容, prefix 必填
- */
-export const combineI18nMessages = (langs: I18nModules, prefix: string) => {
-  if (typeof prefix !== 'string' || !prefix.trim()) {
-    throw new TypeError('Expected prefix to be a non-empty string')
-  }
-
-  const langsGather: Record<string, Recordable> = {}
-
-  Object.keys(langs).forEach((key) => {
-    const langFileModule = langs[key].default
-
-    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
-    const lastIndex = fileName.lastIndexOf('.')
-
-    fileName = fileName.substring(0, lastIndex)
-
-    const keyList = fileName.split('/')
-    const moduleName = keyList.shift()
-    const objKey = keyList.join('.')
-
-    if (moduleName) {
-      if (objKey) {
-        set(langsGather, moduleName, langsGather[moduleName] || {})
-        set(langsGather[moduleName], objKey, langFileModule)
-      } else {
-        set(langsGather, moduleName, langFileModule || {})
-      }
-    }
-  })
-
-  return langsGather
-}
-
-/** 获取所有语言 */
-export const getAppLocalMessages = async (
-  localOptions: AppLocalesDropdownMixedOption[],
-) => {
-  const message = {} as AppCurrentAppMessages
-
-  for (const curr of localOptions) {
-    const msg: AppLocalesModules = await import(`@/locales/lang/${curr.key}.ts`)
-    const key = curr.key
-
-    if (key) {
-      message[key] = msg?.default?.message ?? {}
-    }
-  }
-
-  return message
-}
-
-/**
- *
- * @param key 切换对应语言
- * @returns 组件库对应语言包
- *
- * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
- * @remark naive ui 默认为英文
- *
- * 该方法的比对 key 必须与 LOCAL_OPTIONS 一一对应
- */
-export const naiveLocales = (key: string) => {
-  switch (key) {
-    case 'zh-CN':
-      return {
-        locale: zhCN,
-        dateLocal: dateZhCN,
-      }
-
-    case 'en-US':
-      return {
-        locale: null,
-        dateLocal: null,
-      }
-
-    default:
-      return {
-        locale: zhCN,
-        dateLocal: dateZhCN,
-      }
-  }
-}
-
-/**
- *
- * @returns 获取当前环境默认语言
- *
- * @remark 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
- */
-export const getAppDefaultLanguage = () => {
-  const language = getStorage(APP_CATCH_KEY.localeLanguage, 'localStorage', {
-    defaultValue: SYSTEM_DEFAULT_LOCAL,
-  })
-
-  return language as keyof AppCurrentAppMessages
-}

src/locales/index.ts

@@ -24,7 +24,7 @@
  */
 
 import { createI18n } from 'vue-i18n'
-import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
+import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/utils'
 import { SYSTEM_FALLBACK_LOCALE, LOCAL_OPTIONS } from '@/app-config'
 
 import type { App } from 'vue'

src/locales/lang/en-US.ts

@@ -1,6 +1,6 @@
-import { combineI18nMessages } from '@/locales/helper'
+import { combineI18nMessages } from '@/locales/utils'
 
-import type { I18nModules } from '@/locales/type'
+import type { I18nModules } from '@/locales/types'
 
 const modules: I18nModules = import.meta.glob('./en-US/**/*.json', {
   eager: true,

src/locales/lang/zh-CN.ts

@@ -1,6 +1,6 @@
-import { combineI18nMessages } from '@/locales/helper'
+import { combineI18nMessages } from '@/locales/utils'
 
-import type { I18nModules } from '@/locales/type'
+import type { I18nModules } from '@/locales/types'
 
 const modules: I18nModules = import.meta.glob('./zh-CN/**/*.json', {
   eager: true,

src/locales/utils/combineI18nMessages.ts

@@ -0,0 +1,47 @@
+import { set } from 'lodash-es'
+
+import type { Recordable } from '@/types'
+import type { I18nModules } from '@/locales/types'
+
+/**
+ *
+ * @param langs 语言包
+ * @param prefix 语言包前缀
+ *
+ * @description
+ * 合并处理 lang 下指定的语言包。
+ *
+ * @example
+ * const messages = combineI18nMessages(modules, 'zh-CN')
+ */
+export const combineI18nMessages = (langs: I18nModules, prefix: string) => {
+  if (typeof prefix !== 'string' || !prefix.trim()) {
+    throw new TypeError('Expected prefix to be a non-empty string')
+  }
+
+  const langsGather: Record<string, Recordable> = {}
+
+  Object.keys(langs).forEach((key) => {
+    const langFileModule = langs[key].default
+
+    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
+    const lastIndex = fileName.lastIndexOf('.')
+
+    fileName = fileName.substring(0, lastIndex)
+
+    const keyList = fileName.split('/')
+    const moduleName = keyList.shift()
+    const objKey = keyList.join('.')
+
+    if (moduleName) {
+      if (objKey) {
+        set(langsGather, moduleName, langsGather[moduleName] || {})
+        set(langsGather[moduleName], objKey, langFileModule)
+      } else {
+        set(langsGather, moduleName, langFileModule || {})
+      }
+    }
+  })
+
+  return langsGather
+}

src/locales/utils/getAppDefaultLanguage.ts

@@ -0,0 +1,20 @@
+import { getStorage } from '@/utils'
+import { APP_CATCH_KEY, SYSTEM_DEFAULT_LOCAL } from '@/app-config'
+
+import type { AppCurrentAppMessages } from '@/locales/types'
+
+/**
+ *
+ * @description
+ * 获取当前应用的默认语言。
+ *
+ * @example
+ * const language = getAppDefaultLanguage() // zh-CN | en-US | ...
+ */
+export const getAppDefaultLanguage = () => {
+  const language = getStorage(APP_CATCH_KEY.localeLanguage, 'localStorage', {
+    defaultValue: SYSTEM_DEFAULT_LOCAL,
+  })
+
+  return language as keyof AppCurrentAppMessages
+}

src/locales/utils/getAppLocalMessages.ts

@@ -0,0 +1,32 @@
+import type {
+  AppLocalesModules,
+  AppLocalesDropdownMixedOption,
+  AppCurrentAppMessages,
+} from '@/locales/types'
+
+/**
+ *
+ * @param localOptions 语言包下拉配置项
+ *
+ * @description
+ * 获取当前应用的所有语言包。
+ *
+ * @example
+ * const messages = await getAppLocalMessages(localOptions)
+ */
+export const getAppLocalMessages = async (
+  localOptions: AppLocalesDropdownMixedOption[],
+) => {
+  const message = {} as AppCurrentAppMessages
+
+  for (const curr of localOptions) {
+    const msg: AppLocalesModules = await import(`@/locales/lang/${curr.key}.ts`)
+    const key = curr.key
+
+    if (key) {
+      message[key] = msg?.default?.message ?? {}
+    }
+  }
+
+  return message
+}

src/locales/utils/getNaiveLocales.ts

@@ -0,0 +1,35 @@
+import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
+
+/**
+ *
+ * @param key 切换对应语言
+ *
+ * @description
+ * 通过 key 获取对应 naive ui 语言包。
+ *
+ * key 必须与 LOCAL_OPTIONS key 一一对应。
+ *
+ * @example
+ * const { locale, dateLocal } = naiveLocales('zh-CN')
+ */
+export const getNaiveLocales = (key: string) => {
+  switch (key) {
+    case 'zh-CN':
+      return {
+        locale: zhCN,
+        dateLocal: dateZhCN,
+      }
+
+    case 'en-US':
+      return {
+        locale: null,
+        dateLocal: null,
+      }
+
+    default:
+      return {
+        locale: zhCN,
+        dateLocal: dateZhCN,
+      }
+  }
+}

src/locales/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './combineI18nMessages'
+export * from './getAppLocalMessages'
+export * from './getNaiveLocales'
+export * from './getAppDefaultLanguage'

src/main.ts

@@ -34,9 +34,9 @@ const setupRayTemplateCore = async () => {
  * 注册时应该注意每个插件的加载顺序。
  */
 const setupPlugins = async (inst: AppType<Element>) => {
+  setupStore(inst)
   await setupI18n(inst)
-  await setupStore(inst)
+  setupRouter(inst)
-  await setupRouter(inst)
   setupDayjs()
   setupDirectives(inst)
 }

src/router/README.md

@@ -8,7 +8,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const demo: AppRouteRecordRaw = {
   /** 路由路径，如果为根菜单且无有菜单的时候可以配置为空字符串 */

src/router/appRouteModules.ts

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

src/router/index.ts

@@ -1,35 +1,31 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { scrollViewToTop } from '@/router/helper/setupHelper'
+import { scrollViewToTop } from '@/router/utils/setupHelper'
-import { vueRouterRegister } from '@/router/helper/routerCopilot'
+import { vueRouterRegister } from '@/router/utils/routerCopilot'
 import { useVueRouter } from '@/hooks'
 
 import constantRoutes from './routes'
 
 import type { App } from 'vue'
-import type { RouteRecordRaw, Router } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
-export let router: Router
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: constantRoutes as unknown as RouteRecordRaw[],
+  scrollBehavior: (to) => {
+    scrollViewToTop(to)
+  },
+})
 
 /**
  *
- * 创建 vue router 实例
+ * @param app vue instance
- * 注册 scrollBehavior 方法
+ *
+ * @description
+ * 该方法用于注册 vue-router，并且初始化一些配置方法。
  */
-const createVueRouter = async () => {
+export const setupRouter = (app: App<Element>) => {
-  return createRouter({
-    history: createWebHashHistory(),
-    routes: (await constantRoutes()) as unknown as RouteRecordRaw[],
-    scrollBehavior: (to) => {
-      scrollViewToTop(to)
-    },
-  })
-}
-
-// setup router
-export const setupRouter = async (app: App<Element>) => {
-  router = await createVueRouter()
-
   app.use(router)
+
   // 等待 router 挂载后，初始化 useRouter 方法
   useVueRouter()
   vueRouterRegister(router)

src/router/modules/dashboard.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const dashboard: AppRouteRecordRaw = {
   path: '/dashboard',

src/router/modules/demo/axios.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const axios: AppRouteRecordRaw = {
   path: '/axios',

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

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const cacheDemo: AppRouteRecordRaw = {
   path: '/cache-demo',

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

@@ -1,6 +1,6 @@
 import { t } from '@/hooks'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const contextMenu: AppRouteRecordRaw = {
   path: '/context-menu',

src/router/modules/demo/directive.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const directive: AppRouteRecordRaw = {
   path: '/directive',
@@ -11,6 +11,9 @@ const directive: AppRouteRecordRaw = {
     i18nKey: t('menu.Directive'),
     icon: 'other',
     order: 2,
+    extra: {
+      label: 'ellipsis',
+    },
   },
 }
 

src/router/modules/demo/doc.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const doc: AppRouteRecordRaw = {
   path: '/doc',

src/router/modules/demo/echart.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const echart: AppRouteRecordRaw = {
   path: '/echart',

src/router/modules/demo/iframe.ts

@@ -1,6 +1,6 @@
 import { t } from '@/hooks'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const iframe: AppRouteRecordRaw = {
   path: '/iframe',

src/router/modules/demo/mock.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const mockDemo: AppRouteRecordRaw = {
   path: '/mock-demo',

src/router/modules/demo/modal.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const mockDemo: AppRouteRecordRaw = {
   path: '/modal-demo',

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

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const multiMenu: AppRouteRecordRaw = {
   path: '/multi',

src/router/modules/demo/precision.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const precision: AppRouteRecordRaw = {
   path: '/precision',

src/router/modules/demo/qrcode.ts

@@ -1,7 +1,7 @@
 import { t } from '@/hooks'
 import { LAYOUT } from '@/router/constant'
 
-import type { AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/types'
 
 const qrcode: AppRouteRecordRaw = {
   path: '/qrcode',