version: 4.6.3

CHANGELOG.md

@@ -1,5 +1,57 @@
 # CHANGE LOG
 
+## 4.6.3
+
+## Feats
+
+- `GlobalSearch` 相关
+  - 取消递归查找，使用 `getRoutes` 方法替代查找，提高查找速度
+  - 现在是用快捷键激活搜索框的时候，如果再次按下快捷键并且搜索框已经是激活状态，则不会重新渲染搜索框
+- 补充 `resolveOption` 方法注释。在使用该方法的时候，需要开发者自己手动补充当前项的 `fullPath` 字段。因为该方法在处理的时候，并不能准确的感知到当前项的 `fullPath` 字段，所以需要手动补充
+
+```ts
+import { useMenuActions } from '@/store'
+
+const { resolveOption } = useMenuActions()
+
+resolveOption({
+  // ...your option
+  fullPath: '/your path',
+})
+```
+
+- 优化 `GlobalSearch` 组件样式
+- `addStyle` 方法相关
+  - 方法重写并且更名为 `setStyle`
+  - 支持自动补全内核前缀
+  - 支持识别样式变量（css var）方式插入
+  - 支持字符串数组形式插入样式
+- `queryElements` 方法支持默认值配置项
+- `addClass` 相关
+  - 方法更名为 `setClass`
+  - 支持数组传参
+- `hasClass`, `removeClass` 方法支持数组传参
+- 补充 `pick`, `omit` 方法类型重载
+- `menu store` 相关
+  - 新增 `depthSearchAppMenu` 方法，用于深度搜索菜单，并且该方法会缓存上一次的搜索结果
+- 新增 `isAsyncFunction` 方法，用于判断是否为 `async` 函数
+
+```ts
+import { depthSearchAppMenu } from '@/store'
+
+const result = depthSearchAppMenu(appMenuOptions, 'target fullPath')
+```
+
+- `useBadge` 相关
+  - 使用 `depthSearchAppMenu` 方法替代原查找方法
+  - 将 `equal` 方法提取到 `utils` 包中，并且更名为 `equalRouterPath`，用于判断两个路径是否相等
+
+## Fixes
+
+- 修复 `SettingDrawer` 组件某些开关不能正确同步状态问题
+- 修复 `usePrint` 方法在 `unrefElement` 方法获取失败后不执行的问题。在 `print-js` 逻辑中，如果未获取到 `dom`，会视为其他的打印方式，不符合 `print-js` 的设计
+- `isPromise` 方法修正，现在会正确的识别 `async` 标记d的函数
+
 ## 4.6.2
 
 ## Feats

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.6.2",
+  "version": "4.6.3",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",

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

@@ -11,9 +11,9 @@
 
 import { get } from 'lodash-es'
 import {
-  addClass,
+  setClass,
   removeClass,
-  addStyle,
+  setStyle,
   colorToRgba,
   getStorage,
 } from '@/utils'
@@ -62,7 +62,7 @@ export default defineComponent({
       const el = document.getElementById('pre-loading-animation')
 
       if (el) {
-        addStyle(el, {
+        setStyle(el, {
           display: 'none',
         })
       }
@@ -84,7 +84,7 @@ export default defineComponent({
         ? removeClass(body, lightClassName)
         : removeClass(body, darkClassName)
 
-      addClass(body, bool ? darkClassName : lightClassName)
+      setClass(body, bool ? darkClassName : lightClassName)
     }
 
     syncPrimaryColorToBody()

src/app-config/appConfig.ts

@@ -120,6 +120,7 @@ export const APP_CATCH_KEY = {
   appPiniaSigningStore: 'piniaSigningStore',
   appVersionProvider: 'appVersionProvider',
   isAppLockScreen: 'isAppLockScreen',
+  appGlobalSearchOptions: 'appGlobalSearchOptions',
 } as const
 
 /**

src/axios/index.ts

@@ -29,12 +29,14 @@ import type { AppRawRequestConfig } from '@/axios/type'
 
 /**
  *
+ * @param fetchOption axios 请求配置
+ * @param option useRequest 配置项
+ *
+ * @description
  * 该方法有一定的局限性，仅可在 effect 作用域中使用
  * 如果在非 vue effect scope 中使用，会抛出一些警告
  *
- * 非 vue effect 中使用
  * @example
- *
  * // 请求函数
  * const getUser = () => request({ url: 'http://localhost:3000/user' })
  *

src/components/RChart/src/index.tsx

@@ -298,7 +298,7 @@ export default defineComponent({
       // 避免重复渲染
       if (echartInst?.getDom()) {
         console.warn(
-          'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted.',
+          '[RChart mount]: There is a chart instance already initialized on the dom. Execution was interrupted.',
         )
 
         return

src/directives/modules/disabled/index.ts

@@ -14,7 +14,7 @@
  * directive name: disabled
  */
 
-import { addClass, removeClass } from '@/utils'
+import { setClass, removeClass } from '@/utils'
 
 import type { CustomDirectiveFC } from '@/directives/type'
 
@@ -25,7 +25,7 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
     if (value) {
       el.setAttribute('disabled', 'disabled')
 
-      addClass(el, classes)
+      setClass(el, classes)
     } else {
       el.removeAttribute('disabled')
 

src/hooks/template/useBadge.ts

@@ -1,4 +1,4 @@
-import { useMenuGetters } from '@/store'
+import { useMenuGetters, depthSearchAppMenu } from '@/store'
 import { isValueType } from '@/utils'
 import { createMenuExtra } from '@/store/modules/menu/helper'
 
@@ -25,64 +25,16 @@ const renderExtra = (
   cachePreNormal = option
 }
 
-/**
+// 根据匹配的菜单项渲染 extra
- *
+const renderExtraWithNormalMenuOption = (
- * @param path1 待比较的路径1
- * @param path2 待比较的路径2
- *
- * @description
- * 判断两个路径是否相等，忽略最后的斜杠
- *
- * @example
- * equal('/a/', '/a') // true
- * equal('/a', '/a') // true
- */
-const equal = (path1: string, path2: string) => {
-  const path1End = path1.endsWith('/')
-  const path2End = path2.endsWith('/')
-
-  if (path1End && path2End) {
-    return path1.slice(0, -1) === path2.slice(0, -1)
-  }
-
-  if (!path1End && !path2End) {
-    return path1 === path2
-  }
-
-  return (
-    path1 === path2 ||
-    path1.slice(0, -1) === path2 ||
-    path1 === path2.slice(0, -1)
-  )
-}
-
-// 递归查找匹配的菜单项，缓存上一次的匹配项
-const deep = (
   options: AppMenuOption[],
   target: string,
-  fn: string,
   assignExtra: AppMenuExtraOptions,
 ) => {
-  if (cachePreNormal && equal(cachePreNormal.fullPath, target)) {
+  const menuOption = depthSearchAppMenu(options, target)
-    renderExtra(cachePreNormal, assignExtra)
 
-    return cachePreNormal
+  if (menuOption) {
-  }
+    renderExtra(menuOption, assignExtra)
-
-  for (const curr of options) {
-    if (equal(curr.fullPath, target)) {
-      renderExtra(curr, assignExtra)
-
-      cachePreNormal = curr
-
-      return curr
-    }
-
-    if (curr.children?.length) {
-      deep(curr.children, target, fn, assignExtra)
-
-      continue
-    }
   }
 }
 
@@ -95,11 +47,11 @@ const normalOption = (
   const { getMenuOptions } = useMenuGetters()
 
   if (typeof target === 'string') {
-    deep(getMenuOptions.value, target, fn, assignExtra)
+    renderExtraWithNormalMenuOption(getMenuOptions.value, target, assignExtra)
   } else if (isValueType<'object'>(target, 'Object')) {
     const { fullPath } = target
 
-    deep(getMenuOptions.value, fullPath, fn, assignExtra)
+    renderExtraWithNormalMenuOption(getMenuOptions.value, fullPath, assignExtra)
   } else {
     console.warn(`[useBadge ${fn}]: target expect string or object.`)
   }

src/hooks/template/useSiderBar.ts

@@ -212,13 +212,14 @@ export function useSiderBar() {
         'path',
         'name',
         'redirect',
-      ]) as unknown as AppMenuOption
+      ])
+      const res = resolveOption(pickOption as unknown as AppMenuOption)
 
       changeMenuModelValue(
-        pickOption.path,
+        res.path,
         resolveOption({
-          ...pickOption,
+          ...res,
-          fullPath: pickOption.path,
+          fullPath: res.path,
         }),
       )
     }

src/hooks/web/useDomToImage.ts

@@ -34,6 +34,8 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    * 在 dom 转换为图片之前执行
    *
    * @param element current dom
+   *
+   * @default undefined
    */
   beforeCreate?: <T extends TargetType = Element>(
     element: T | null | undefined,
@@ -44,6 +46,8 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    * @param result dom to image result
    *
    * 在 dom 转换为图片之后执行
+   *
+   * @default undefined
    */
   created?: <T extends TargetType = Element>(
     result: DomToImageResult,
@@ -54,6 +58,8 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    * @param error dom to image error
    *
    * 在 dom 转换为图片失败时执行
+   *
+   * @default undefined
    */
   createdError?: (error?: Error) => void
   /**
@@ -61,6 +67,8 @@ export interface UseDomToImageOptions extends ReDomToImageOptions {
    * @param element current dom
    *
    * 无论 dom 转换为图片成功或失败，都会执行
+   *
+   * @default undefined
    */
   finally?: () => void
 }
@@ -78,12 +86,15 @@ const domToImageMethods = {
  * @param target ref dom
  * @param options dom-to-image options
  *
- * 使用 dom-to-image 将 dom 转换为图片，基于 dom-to-image v2.6.0
+ * @see https://github.com/tsayen/dom-to-image
- * 拓展了 imageType 参数，用于指定图片类型
  *
- * create 方法支持在执行时传递 imageType 参数，用于指定图片类型。并且优先级大于 options.imageType
+ * @description
- * 当然，你也可以不传递 imageType 参数，此时会使用 options.imageType
+ * 使用 dom-to-image 将 dom 转换为图片，基于 dom-to-image v2.6.0。
- * 如果都未传递，则默认使用 jpeg
+ * 拓展了 imageType 参数，用于指定图片类型。
+ *
+ * create 方法支持在执行时传递 imageType 参数，用于指定图片类型。并且优先级大于 options.imageType；
+ * 当然，你也可以不传递 imageType 参数，此时会使用 options.imageType，
+ * 如果都未传递，则默认使用 jpeg。
  *
  * @example
  * const refDom = ref<HTMLElement>()

src/hooks/web/usePrint.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import print from 'print-js'
 import { unrefElement } from '@/utils'
 
@@ -7,7 +6,7 @@ import type { BasicTarget } from '@/types'
 export interface UsePrintOptions
   extends Omit<print.Configuration, 'printable'> {}
 
-export type UsePrintTarget<T = any> =
+export type UsePrintTarget<T = unknown> =
   | BasicTarget
   | string
   | Blob
@@ -19,12 +18,16 @@ export type UsePrintTarget<T = any> =
  * @param target ref dom
  * @param options print-js options
  *
- * 拓展 print-js 的 usePrint 方法，允许 ref Dom 直接调用打印，其余的不变
+ * @see https://printjs.crabbly.com/
+ *
+ * @description
+ * 拓展 print-js 的 usePrint 方法，允许 ref Dom 直接调用打印，其余的不变。
  *
  * @example
  * const refDom = ref<HTMLElement>()
  *
  * const { print } = usePrint(refDom, {})
+ *
  * @example
  * const { print } = usePrint('#id', {})
  * const { print } = usePrint('base64', {}) // 设置为 base64 时，一定要设置配置项 base64 为 true
@@ -33,14 +36,13 @@ export type UsePrintTarget<T = any> =
  */
 export const usePrint = (target: UsePrintTarget, options?: UsePrintOptions) => {
   const run = () => {
-    const element = unrefElement(target as BasicTarget)
+    // 为了兼容 ref 注册的 dom；如果未获取到 dom，则会视为其他的输出方式，交由 print-js 处理
+    const _target = unrefElement(target as BasicTarget) || target
 
-    if (element) {
+    print({
-      print({
+      ...options,
-        ...options,
+      printable: _target,
-        printable: element,
+    })
-      })
-    }
   }
 
   return {

src/hooks/web/useVueRouter.ts

@@ -30,7 +30,9 @@ export const useVueRouter = () => {
       throw new Error()
     }
   } catch (e) {
-    throw new Error('router is not defined')
+    throw new Error(
+      `[useVueRouter]: An error occurred during registration of vue-router. ${e}`,
+    )
   }
 }
 

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

@@ -12,7 +12,7 @@ $globalSearchWidth: 650px;
 
     & .global-search__card {
       border-radius: 6px;
-      min-width: 800px;
+      min-width: 560px;
 
       & .ray-icon {
         color: var(--ray-theme-primary-color);
@@ -22,8 +22,9 @@ $globalSearchWidth: 650px;
         padding: 16px 12px 12px 12px;
       }
 
-      & .n-card__content {
+      & .n-card__content,
-        min-height: 115px;
+      & .n-spin-content {
+        min-height: 90px;
       }
 
       & .content-item {

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

@@ -31,9 +31,9 @@ import {
 } from 'naive-ui'
 import { RIcon } from '@/components'
 
-import { queryElements, addClass, removeClass } from '@/utils'
+import { queryElements, setClass, removeClass, pick } from '@/utils'
 import { debounce } from 'lodash-es'
-import { useMenuGetters, useMenuActions } from '@/store'
+import { useMenuActions } from '@/store'
 import { validMenuItemShow } from '@/router/helper/routerCopilot'
 import { useDevice } from '@/hooks'
 import { useEventListener } from '@vueuse/core'
@@ -51,7 +51,9 @@ export default defineComponent({
   },
   emits: ['update:show'],
   setup(props, { emit }) {
-    const { changeMenuModelValue } = useMenuActions()
+    const { changeMenuModelValue, resolveOption } = useMenuActions()
+    const { getRoutes } = useRouter()
+
     const modelShow = computed({
       get: () => props.show,
       set: (val) => {
@@ -62,8 +64,6 @@ export default defineComponent({
         }
       },
     })
-    const { getMenuOptions } = useMenuGetters()
-
     const state = reactive({
       searchValue: null,
       searchOptions: [] as AppMenuOption[],
@@ -102,6 +102,10 @@ export default defineComponent({
 
     /** 按下 ctrl + k 或者 command + k 激活搜索栏 */
     const registerArouseKeyboard = (e: KeyboardEvent) => {
+      if (modelShow.value) {
+        return
+      }
+
       if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
         e.preventDefault()
         e.stopPropagation()
@@ -113,8 +117,6 @@ export default defineComponent({
 
     /** 根据输入值模糊检索菜单 */
     const fuzzySearchMenuOptions = (value: string) => {
-      const arr: AppMenuOption[] = []
-
       if (value) {
         loading.value = true
       } else {
@@ -124,37 +126,35 @@ export default defineComponent({
         return
       }
 
-      const filterArr = (options: AppMenuOption[]) => {
+      const arr = getRoutes().reduce((pre, curr) => {
-        for (const curr of options) {
+        const pickOption = pick(curr, [
-          if (curr.children?.length && validMenuItemShow(curr)) {
+          'children',
-            filterArr(curr.children)
+          'meta',
+          'path',
+          'name',
+        ]) as unknown as AppMenuOption
 
-            continue
+        const res = resolveOption({
-          }
+          ...pickOption,
+          fullPath: curr.path,
+        })
+        const { breadcrumbLabel } = res
 
-          /** 处理菜单名与输入值, 不区分大小写 */
+        // 是否模糊匹配字符、满足展示条件
-          const $breadcrumbLabel = curr.breadcrumbLabel?.toLocaleLowerCase()
+        if (
-          const $value = String(value).toLocaleLowerCase()
+          breadcrumbLabel
-
+            ?.toLocaleLowerCase()
-          // 是否模糊匹配字符、满足展示条件
+            ?.includes(value.toLocaleLowerCase()) &&
-          if (
+          validMenuItemShow(res)
-            $breadcrumbLabel?.includes($value) &&
+        ) {
-            validMenuItemShow(curr) &&
+          pre.push(res)
-            !curr.children?.length
-          ) {
-            arr.push(curr)
-          }
         }
-      }
+
+        return pre
+      }, [] as AppMenuOption[])
 
       setTimeout(() => {
-        if (value) {
+        state.searchOptions = arr
-          filterArr(getMenuOptions.value)
-
-          state.searchOptions = arr
-        } else {
-          state.searchOptions = []
-        }
 
         nextTick().then(() => {
           autoFocusingSearchItem()
@@ -203,7 +203,7 @@ export default defineComponent({
           if (searchElementOptions?.length) {
             const [el] = searchElementOptions
 
-            addClass(el, activeClass)
+            setClass(el, activeClass)
           }
         })
       }
@@ -218,7 +218,7 @@ export default defineComponent({
       } else if (typeof icon === 'function') {
         return () => icon
       } else {
-        return <RIcon name="table" size="24" />
+        return <RIcon name="search" size="24" />
       }
     }
 
@@ -381,8 +381,7 @@ export default defineComponent({
                                 justify="center"
                                 class="global-search__empty-content"
                               >
-                                <RIcon name="empty" size="24" />
+                                没有搜索结果
-                                暂无搜索结果
                               </NFlex>
                             ),
                           }}

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

@@ -30,7 +30,7 @@ export default defineComponent({
       const operatingSystem = detectOperatingSystem()
 
       if (operatingSystem === 'MacOS') {
-        return '⌘ K'
+        return '⌘ + K'
       }
 
       if (operatingSystem === 'Windows') {

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

@@ -64,12 +64,18 @@ export default defineComponent({
         emit('update:show', bool)
       },
     })
-    const modelSwitchReactive = reactive({
+    // 为了方便管理多个 computed，因为 computed 不能被逆向修改
-      getMenuTagSwitch: getMenuTagSwitch.value,
+    const modelSwitchReactive = computed({
-      getBreadcrumbSwitch: getBreadcrumbSwitch.value,
+      get: () => {
-      getCopyrightSwitch: getCopyrightSwitch.value,
+        return {
-      getContentTransition: getContentTransition.value,
+          getMenuTagSwitch: getMenuTagSwitch.value,
-      getWatermarkSwitch: getWatermarkSwitch.value,
+          getBreadcrumbSwitch: getBreadcrumbSwitch.value,
+          getCopyrightSwitch: getCopyrightSwitch.value,
+          getContentTransition: getContentTransition.value,
+          getWatermarkSwitch: getWatermarkSwitch.value,
+        }
+      },
+      set: (value) => {},
     })
 
     return {

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

@@ -11,6 +11,9 @@ const multiMenu: AppRouteRecordRaw = {
     i18nKey: t('menu.MultiMenu'),
     icon: 'other',
     order: 4,
+    extra: {
+      label: 'cache',
+    },
   },
   children: [
     {

src/router/routes.ts

@@ -13,8 +13,8 @@ export default async () => {
      */
     {
       path: '/',
-      name: 'login',
+      name: 'RLogin',
-      component: () => import('@/views/login/index'),
+      component: () => import('@/views/login'),
     },
     /**
      *
@@ -22,7 +22,7 @@ export default async () => {
      */
     {
       path: '/',
-      name: 'layout',
+      name: 'RLayout',
       redirect: getRootPath.value,
       component: Layout,
       children: appExpandRoutes(),

src/store/modules/menu/index.ts

@@ -25,7 +25,7 @@
 
 import { NEllipsis } from 'naive-ui'
 
-import { setStorage, pick } from '@/utils'
+import { setStorage, pick, equalRouterPath } from '@/utils'
 import { validRole, validMenuItemShow } from '@/router/helper/routerCopilot'
 import {
   parseAndFindMatchingNodes,
@@ -43,6 +43,47 @@ import type { AppMenuOption, MenuTagOptions } from '@/types'
 import type { MenuState } from '@/store/modules/menu/type'
 import type { LocationQuery } from 'vue-router'
 
+let cachePreNormal: AppMenuOption | undefined = void 0
+
+/**
+ *
+ * @param options 菜单列表或者类似菜单列表的数据结构
+ * @param target 目标路径
+ *
+ * @returns 匹配的菜单项
+ *
+ * @description
+ * 递归查找匹配的菜单项，缓存上一次的匹配项。
+ * 并且该方法一旦匹配成功就会立即返回。
+ *
+ * 通过 fullPath 进行匹配。
+ *
+ * @example
+ * depthSearchAppMenu([{ path: '/dashboard', name: 'Dashboard', meta: { i18nKey: 'menu.Dashboard' } }], '/dashboard')
+ */
+export const depthSearchAppMenu = (
+  options: AppMenuOption[],
+  target: string,
+) => {
+  if (cachePreNormal && equalRouterPath(cachePreNormal.fullPath, target)) {
+    return cachePreNormal
+  }
+
+  for (const curr of options) {
+    if (equalRouterPath(curr.fullPath, target)) {
+      cachePreNormal = curr
+
+      return curr
+    }
+
+    if (curr.children?.length) {
+      depthSearchAppMenu(curr.children, target)
+
+      continue
+    }
+  }
+}
+
 export const piniaMenuStore = defineStore(
   'menu',
   () => {
@@ -64,9 +105,13 @@ export const piniaMenuStore = defineStore(
     /**
      *
      * @param option 菜单项（类似于菜单项的数据结构也可以）
+     *
      * @returns 转换后的菜单项
      *
-     * 将路由项或者类似于菜单项的数据结构转换为菜单项（AppMenu）
+     * @description
+     * 将路由项或者类似于菜单项的数据结构转换为菜单项（AppMenu）。
+     * 但是，该方法有一个地方需要注意，那就是需要手动设置一下准确的 fullPath，
+     * 其实这是一个设计的失误，因为该方法不能准确的感知到 fullPath 应该是什么。
      *
      * @example
      * resolveOption({ path: '/dashboard', name: 'Dashboard', meta: { i18nKey: 'menu.Dashboard' } })

src/types/modules/utils.ts

@@ -115,3 +115,11 @@ export interface StorageOptions<T = any> {
   prefixKey?: string
   defaultValue?: T
 }
+
+export interface QueryElementsOptions<T extends Element = Element> {
+  defaultElement?: T
+}
+
+export type PropertyName = string | number | symbol
+
+export type Many<T> = T | ReadonlyArray<T>

src/utils/basic.ts

@@ -5,23 +5,30 @@ import type {
   DownloadAnyFileDataType,
   BasicTypes,
   AnyFC,
+  PropertyName,
+  Recordable,
+  Many,
 } from '@/types'
-import type { Recordable } from '@/types'
 
 /**
  *
- * 获取当前项目环境
+ * @description
+ * 获取当前项目环境。
  *
- * 如果你只是想单纯的判断是否为开发环境，可以直接使用: __DEV__
+ * 如果你只是想单纯的判断是否为开发环境，可以直接使用: __DEV__。
  *
  * @example
  * 是否为开发环境: __DEV__
  *
  * @example
- * const { BASE_URL } = getAppEnvironment() 获取 BASE_URL
+ * // 获取 BASE_URL
- * const { MODE } = getAppEnvironment() 获取 MODE，当前环境
+ * const { BASE_URL } = getAppEnvironment()
- * const { SSR } = getAppEnvironment() 是否启用 SSR
+ * // 获取 MODE，当前环境
- * const { your config } = getAppEnvironment() 获取你自定义的配置项
+ * const { MODE } = getAppEnvironment()
+ * // 是否启用 SSR
+ * const { SSR } = getAppEnvironment()
+ * // 获取你自定义的配置项
+ * const { your config } = getAppEnvironment()
  */
 export const getAppEnvironment = () => {
   const env = import.meta.env
@@ -33,10 +40,11 @@ export const getAppEnvironment = () => {
  *
  * @param data 二进制流数据
  *
- * 将 base64 格式文件转换为图片
+ * @description
+ * 将二进制流数据转换为 base64 图片。
  *
  * @example
- * arrayBufferToBase64Image('base64') => Image
+ * const Image = arrayBufferToBase64Image('base64')
  */
 export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
   if (!data || data.byteLength) {
@@ -60,7 +68,8 @@ export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
  * @param base64 base64
  * @param fileName file name
  *
- * 该方法仅能下载 base64 文件，如果有其他的文件类型需要下载，请看 downloadAnyFile 方法
+ * @description
+ * 该方法仅能下载 base64 文件，如果有其他的文件类型需要下载，请看 downloadAnyFile 方法。
  *
  * @example
  * downloadBase64File('base64', 'file name')
@@ -84,8 +93,10 @@ export const downloadBase64File = (base64: string, fileName: string) => {
  * @param type 类型
  *
  * @example
- * isValueType<string>('123', 'String') => true
+ * isValueType<string>('123', 'String') // true
- * isValueType<object>({}, 'Object') => true
+ * isValueType<object>({}, 'Object') // true
+ * isValueType<number>([], 'Array') // true
+ * isValueType<number>([], 'Object') // false
  */
 export const isValueType = <T extends BasicTypes>(
   value: unknown,
@@ -101,6 +112,9 @@ export const isValueType = <T extends BasicTypes>(
  * @param length uuid 长度
  * @param radix uuid 基数
  *
+ * @description
+ * 生成指定长度的 uuid。
+ *
  * @example
  * uuid(8) => 'B8tGcl0FCKJkpO0V'
  */
@@ -136,7 +150,8 @@ export const uuid = (length = 16, radix = 62) => {
  * @param data base64, Blob, ArrayBuffer type
  * @param fileName file name
  *
- * 支持下载任意类型的文件，包括 base64, Blob, ArrayBuffer
+ * @description
+ * 支持下载任意类型的文件，包括 base64, Blob, ArrayBuffer。
  *
  * @example
  * downloadAnyFile('base64', 'file name')
@@ -195,24 +210,40 @@ export const downloadAnyFile = (
   })
 }
 
+export function omit<T extends Recordable, K extends PropertyName[]>(
+  targetObject: T,
+  ...paths: K
+): Pick<T, Exclude<keyof T, K[number]>>
+
+export function omit<T extends object>(
+  object: T | null | undefined,
+  ...paths: Array<Many<PropertyName>>
+): Partial<T>
+
 /**
  *
  * @param targetObject 对象
  * @param targetKeys 待删除的 key
  *
- * 删除对象中的指定 key
+ * @description
- * 如果传递的 targetObject 为 null 或者 undefined，则返回空对象
+ * 删除对象中的指定 key，
+ * 如果传递的 targetObject 为 null 或者 undefined，则返回空对象。
  *
  * @example
- * omit({ a: 1, b: 2, c: 3 }, 'a') => { b: 2, c: 3 }
+ * omit({ a: 1, b: 2, c: 3 }, 'a') // { b: 2, c: 3 }
- * omit({ a: 1, b: 2, c: 3 }, ['a', 'b']) => { c: 3 }
+ * omit({ a: 1, b: 2, c: 3 }, ['a', 'b']) // { c: 3 }
+ * omit(null) // {}
  */
-export const omit = <T extends Recordable, K extends keyof T>(
+export function omit<T extends Recordable, K extends keyof T>(
   targetObject: T,
   targetKeys: K | K[],
-): Omit<T, K> => {
+) {
   if (!targetObject) {
-    return {} as Omit<T, K>
+    console.warn(
+      `[omit]: The targetObject is expected to be an object, but got ${targetObject}.`,
+    )
+
+    return {}
   }
 
   const keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys]
@@ -228,53 +259,94 @@ export const omit = <T extends Recordable, K extends keyof T>(
   return targetObject
 }
 
+export function pick<T extends object>(
+  object: T | null | undefined,
+  ...paths: Array<Many<PropertyName>>
+): Partial<T>
+
 /**
  *
  * @param targetObject target object
  * @param targetKeys target keys
  *
- * 从对象中提取指定的 key
+ * @description
- * 如果传递的 targetObject 为 null 或者 undefined，则返回空对象
+ * 从对象中提取指定的 key，
+ * 如果传递的 targetObject 为 null 或者 undefined，则返回空对象。
  *
  * @example
- * pick({ a: 1, b: 2, c: 3 }, 'a') => { a: 1 }
+ * pick({ a: 1, b: 2, c: 3 }, 'a') // { a: 1 }
- * pick({ a: 1, b: 2, c: 3 }, ['a', 'b']) => { a: 1, b: 2 }
+ * pick({ a: 1, b: 2, c: 3 }, ['a', 'b']) // { a: 1, b: 2 }
- * pick({ a: 1, b: 2, c: 3 }, []) => {}
+ * pick({ a: 1, b: 2, c: 3 }, []) // {}
+ * pick(null) // {}
  */
-export const pick = <T extends Recordable, K extends keyof T>(
+export function pick<T extends object, K extends keyof T>(
   targetObject: T,
   targetKeys: K | K[],
-): Pick<T, K> => {
+) {
   if (!targetObject) {
-    return {} as Pick<T, K>
+    console.warn(
+      `[pick]: The targetObject is expected to be an object, but got ${targetObject}.`,
+    )
+
+    return {}
   }
 
   const keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys]
-  const result = {} as Pick<T, K>
 
   if (!keys.length) {
-    return result
+    return targetObject
   }
 
-  keys.forEach((key) => {
+  const result = keys.reduce(
-    result[key] = targetObject[key]
+    (pre, curr) => {
-  })
+      if (Reflect.has(targetObject, curr)) {
+        pre[curr] = targetObject[curr]
+      }
+
+      return pre
+    },
+    {} as Pick<T, K>,
+  )
 
   return result
 }
 
 /**
  *
- * @param value 待判断的值
+ * @param func 待判断的函数
+ * @returns 是否为 async 函数
  *
- * 判断是否为 Promise 函数
+ * @description
+ * 判断是否为 async 函数。
  *
  * @example
- * isPromise(Promise.resolve(123)) => true
+ * isAsyncFunction(() => {}) // false
- * isPromise(() => {}) => false
+ * isAsyncFunction(async () => {}) // true
- * isPromise(123) => false
+ * isAsyncFunction(function() {}) // false
+ * isAsyncFunction(async function() {}) // true
+ */
+export const isAsyncFunction = <T>(func: T) => {
+  return func instanceof Function && func.constructor.name === 'AsyncFunction'
+}
+
+/**
+ *
+ * @param value 待判断的值
+ *
+ * @description
+ * 判断是否为 Promise 函数。
+ *
+ * @example
+ * isPromise(Promise.resolve(123)) // true
+ * isPromise(() => {}) // false
+ * isPromise(123) // false
+ * isPromise(async () => {}) // true
  */
 export const isPromise = <T>(value: unknown): value is Promise<T> => {
+  if (isAsyncFunction(value)) {
+    return true
+  }
+
   return (
     !!value &&
     (typeof value === 'object' || typeof value === 'function') &&
@@ -288,7 +360,8 @@ export const isPromise = <T>(value: unknown): value is Promise<T> => {
  * @param errorCallback 错误回调
  * @param args 当前传递函数参数
  *
- * 用于捕获函数执行时的错误，如果有错误，则执行错误回调
+ * @description
+ * 用于捕获函数执行时的错误，如果有错误，则执行错误回调。
  *
  * @example
  * callWithErrorHandling((x: number) => { return x }, () => {}, [123]) => 123
@@ -316,7 +389,8 @@ export const callWithErrorHandling = <T extends AnyFC, E extends Error>(
  * @param errorCallback 错误回调
  * @param args 当前传递函数参数
  *
- * 用于捕获异步函数执行时的错误，如果有错误，则执行错误回调
+ * @description
+ * 用于捕获异步函数执行时的错误，如果有错误，则执行错误回调。
  *
  * @example
  * callWithAsyncErrorHandling(async () => { console.log('A') }, () => {}, []) => Promise { undefined }
@@ -346,8 +420,10 @@ export const callWithAsyncErrorHandling = async <
 
 /**
  *
- * 获取当前操作系统
+ * @description
- * 如果无法识别，则返回 Unknown
+ * 获取当前操作系统。
+ *
+ * 如果无法识别，则返回 Unknown。
  *
  * @example
  * detectOperatingSystem() => 'Windows' | 'MacOS' | 'Linux' | 'Android' | 'IOS' | 'Unknown'
@@ -377,3 +453,36 @@ export const detectOperatingSystem = () => {
 
   return OperatingSystem.Unknown
 }
+
+/**
+ *
+ * @param path1 待比较的路径1
+ * @param path2 待比较的路径2
+ *
+ * @returns 比较两个路径是否相等
+ *
+ * @description
+ * 判断两个路径是否相等，忽略最后的斜杠。
+ *
+ * @example
+ * equal('/a/', '/a') // true
+ * equal('/a', '/a') // true
+ */
+export const equalRouterPath = (path1: string, path2: string) => {
+  const path1End = path1.endsWith('/')
+  const path2End = path2.endsWith('/')
+
+  if (path1End && path2End) {
+    return path1.slice(0, -1) === path2.slice(0, -1)
+  }
+
+  if (!path1End && !path2End) {
+    return path1 === path2
+  }
+
+  return (
+    path1 === path2 ||
+    path1.slice(0, -1) === path2 ||
+    path1 === path2.slice(0, -1)
+  )
+}

src/utils/dom.ts

@@ -25,14 +25,15 @@ export interface PrintDomOptions {
  * @param target ref dom
  * @param options print-dom options, dom-to-image options
  *
- * 基于 useDomToImage 和 print-js 封装，允许 Ref 注册 Dom 直接调用打印
+ * @description
- * 避免直接打印 dom 时出现一些诡异的问题
+ * 基于 useDomToImage 和 print-js 封装，允许 Ref 注册 Dom 直接调用打印。
+ * 避免直接打印 dom 时出现一些诡异的问题。
  *
- * 该方法会强制剔除 printOptions 中的 printable, type, base64 属性，即使忽略了 ts 的类型检查
+ * 该方法会强制剔除 printOptions 中的 printable, type, base64 属性，即使忽略了 ts 的类型检查。
- * 并且在绘制图片的时候，强制使用 jpeg 格式，即使是指定了其他格式
+ * 并且在绘制图片的时候，强制使用 jpeg 格式，即使是指定了其他格式。
  *
- * 支持 useDomToImage 方法的所有配置项，除了 imageType
+ * 支持 useDomToImage 方法的所有配置项，除了 imageType。
- * 支持 print-js 的所有配置项，除了 printable 和 type
+ * 支持 print-js 的所有配置项，除了 printable 和 type。
  *
  * @example
  * const refDom = ref<HTMLElement>()

src/utils/element.ts

@@ -1,29 +1,37 @@
 import { APP_REGEX } from '@/app-config'
 import { effectDispose, unrefElement, isValueType } from '@/utils'
 
-import type { PartialCSSStyleDeclaration, ElementSelector } from '@/types'
+import type {
-import type { BasicTarget } from '@/types'
+  BasicTarget,
+  QueryElementsOptions,
+  ElementSelector,
+} from '@/types'
 
 /**
  *
- * @param target Target element dom
+ * @param target 目标元素或 ref 注册元素
- * @param className 所需添加className，可: 'xxx xxx' | 'xxx' 格式添加(参考向元素绑定 css 语法)
+ * @param classNames 所需添加类名
  *
- * 添加元素className(可: 'xxx xxx' | 'xxx'格式添加)
+ * @description
+ * 为目标元素添加类名
  *
  * @example
- * targetDom 当前 class: a-class b-class
+ * // targetDom 当前 class: a-class b-class
- * addClass(targetDom, 'c-class') => a-class b-class c-class
+ * setClass(targetDom, 'c-class') // a-class b-class c-class
+ * setClass(targetDom, ['c-class', 'c-class']) // a-class b-class c-class
  */
-export const addClass = (
+export const setClass = (
   target: BasicTarget<Element | HTMLElement | SVGAElement>,
-  className: string,
+  classNames: string | string[],
 ) => {
   const update = () => {
     const element = unrefElement(target)
 
     if (element) {
-      const classes = className.trim().split(' ')
+      const classes =
+        typeof classNames === 'string'
+          ? classNames.trim().split(' ')
+          : classNames
 
       classes.forEach((item) => {
         if (item) {
@@ -42,30 +50,35 @@ export const addClass = (
 
 /**
  *
- * @param target Target element dom
+ * @param target 目标元素或 ref 注册元素
- * @param className 所需删除className，可: 'xxx xxx' | 'xxx' 格式删除(参考向元素绑定 css 语法)
+ * @param className 所需删除类名
  *
- * 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
+ * @description
- * 如果输入值为 removeAllClass 则会删除该元素所有 class name
+ * 为目标元素删除类名
  *
  * @example
- * targetDom 当前 class: a-class b-class
+ * // targetDom 当前 class: a-class b-class
- * removeClass(targetDom, 'a-class') => b-class
+ * removeClass(targetDom, 'a-class') // b-class
+ * removeClass(targetDom, ['a-class', 'b-class']) // null
+ * removeClass(targetDom, 'removeAllClass') // null
  */
 export const removeClass = (
   target: BasicTarget<Element | HTMLElement | SVGAElement>,
-  className: string | 'removeAllClass',
+  classNames: string | 'removeAllClass' | string[],
 ) => {
   const update = () => {
     const element = unrefElement(target)
 
     if (element) {
-      if (className === 'removeAllClass') {
+      if (classNames === 'removeAllClass') {
         const classList = element.classList
 
         classList.forEach((curr) => classList.remove(curr))
       } else {
-        const classes = className.trim().split(' ')
+        const classes =
+          typeof classNames === 'string'
+            ? classNames.trim().split(' ')
+            : classNames
 
         classes.forEach((item) => {
           if (item) {
@@ -85,15 +98,20 @@ export const removeClass = (
 
 /**
  *
- * @param target Target element dom
+ * @param target 目标元素或 ref 注册元素
- * @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx' 格式查询(参考向元素绑定 css 语法)
+ * @param className 查询元素是否含有此类名
  *
- * 元素是否含有某个className(可: 'xxx xxx' | 'xxx' 格式查询)
+ * @description
+ * 查询元素是否含有此类名
  *
  * @example
- * hasClass(targetDom, 'matchClassName') => Ref<true> | Ref<false>
+ * hasClass(targetDom, 'matchClassName') // Ref<true> | Ref<false>
+ * hasClass(targetDom, ['matchClassName', 'matchClassName']) // Ref<true> | Ref<false>
  */
-export const hasClass = (target: BasicTarget<Element>, className: string) => {
+export const hasClass = (
+  target: BasicTarget<Element>,
+  classNames: string | string[],
+) => {
   const hasClassRef = ref(false)
 
   const update = () => {
@@ -104,12 +122,17 @@ export const hasClass = (target: BasicTarget<Element>, className: string) => {
     } else {
       const elementClassName = element.className
 
-      const classes = className
+      const classes =
-        .trim()
+        typeof classNames === 'string'
-        .split(' ')
+          ? classNames
-        .filter((item: string) => item !== '')
+              .trim()
+              .split(' ')
+              .filter((curr: string) => curr !== '')
+          : classNames
 
-      hasClassRef.value = elementClassName.includes(classes.join(' '))
+      hasClassRef.value = classes.some((curr) =>
+        elementClassName.includes(curr),
+      )
     }
   }
 
@@ -122,17 +145,45 @@ export const hasClass = (target: BasicTarget<Element>, className: string) => {
   return hasClassRef
 }
 
+/**
+ *
+ * @param style 所需添加样式
+ *
+ * @returns 添加前缀后的样式
+ *
+ * @description
+ * 为样式添加浏览器前缀，返回一个对象
+ *
+ * @example
+ * autoPrefixStyle('transform') => {webkitTransform: 'transform', mozTransform: 'transform', msTransform: 'transform', oTransform: 'transform'}
+ */
+export const autoPrefixStyle = (style: string) => {
+  const prefixes = ['webkit', 'moz', 'ms', 'o']
+  const styleWithPrefixes = {}
+
+  prefixes.forEach((prefix) => {
+    styleWithPrefixes[
+      `${prefix}${style.charAt(0).toUpperCase()}${style.slice(1)}`
+    ] = style
+  })
+
+  return styleWithPrefixes
+}
+
 /**
  *
  * @param target Target element dom
  * @param styles 所需绑定样式(如果为字符串, 则必须以分号结尾每个行内样式描述)
  *
+ * @description
+ * 为目标元素添加样式
+ *
  * @example
  * style of string
  * ```
  * const styles = 'width: 100px; height: 100px; background: red;'
  *
- * addStyle(styles)
+ * setStyle(styles)
  * ```
  * style of object
  * ```
@@ -141,14 +192,37 @@ export const hasClass = (target: BasicTarget<Element>, className: string) => {
  *   height: '100px',
  * }
  *
- * addStyle(styles)
+ * setStyle(styles)
  * ```
  */
-export const addStyle = (
+export const setStyle = (
   target: BasicTarget<HTMLElement | SVGAElement>,
-  styles: PartialCSSStyleDeclaration | string,
+  styles: Partial<CSSStyleDeclaration> | string | string[],
 ) => {
-  let styleObj: PartialCSSStyleDeclaration
+  const set = (styleStr: string, element: HTMLElement | SVGAElement) => {
+    styleStr.split(';').forEach((curr) => {
+      const [key, value] = curr.split(':')
+
+      if (key && value) {
+        const trimKey = key.trim()
+        const trimValue = value.trim()
+
+        // 是否为 css variable
+        if (key.startsWith('--')) {
+          element.style.setProperty(trimKey, trimValue)
+        } else {
+          // 兼容浏览器前缀
+          const kitFix = autoPrefixStyle(trimKey)
+
+          Object.keys(kitFix).forEach((key) => {
+            element.style[key] = kitFix[key]
+          })
+          // 设置默认需要添加样式
+          element.style[trimKey] = trimValue
+        }
+      }
+    })
+  }
 
   const update = () => {
     const element = unrefElement(target)
@@ -158,26 +232,18 @@ export const addStyle = (
     }
 
     if (isValueType<string>(styles, 'String')) {
-      styleObj = styles.split(';').reduce((pre, curr) => {
+      set(styles, element)
-        const [key, value] = curr.split(':').map((s) => s.trim())
+    } else if (isValueType<string[]>(styles, 'Array')) {
-
+      styles.forEach((curr) => {
-        if (key && value) {
+        set(curr, element)
-          pre[key] = value
+      })
-        }
-
-        return pre
-      }, {} as PartialCSSStyleDeclaration)
     } else {
-      styleObj = styles
+      const keys = Object.keys(styles)
+
+      keys.forEach((curr) => {
+        set(`${curr}: ${styles[curr]}`, element)
+      })
     }
-
-    Object.keys(styleObj).forEach((key) => {
-      const value = styleObj[key]
-
-      if (key in element!.style) {
-        element!.style[key] = value
-      }
-    })
   }
 
   const watcher = watch(() => unrefElement(target), update, {
@@ -192,6 +258,9 @@ export const addStyle = (
  * @param el Target element dom
  * @param styles 所需卸载样式
  *
+ * @description
+ * 为目标元素卸载样式
+ *
  * 当你发现不能正常的移除某些样式的时候，应该考虑是否是样式表兼容问题
  *
  * @example
@@ -225,14 +294,15 @@ export const removeStyle = (
  * @param color 颜色格式
  * @param alpha 透明度
  *
+ * @description
  * 将任意颜色值转为 rgba，如果本身为 rgba, rgb 或者其它非法颜色值则直接返回
  *
  * @example
- * colorToRgba('#123632', 0.8) => rgba(18, 54, 50, 0.8)
+ * colorToRgba('#123632', 0.8) // rgba(18, 54, 50, 0.8)
- * colorToRgba('rgb(18, 54, 50)', 0.8) => rgb(18, 54, 50)
+ * colorToRgba('rgb(18, 54, 50)', 0.8) // rgb(18, 54, 50)
- * colorToRgba('#ee4f12', 0.3) => rgba(238, 79, 18, 0.3)
+ * colorToRgba('#ee4f12', 0.3) // rgba(238, 79, 18, 0.3)
- * colorToRgba('rgba(238, 79, 18, 0.3)', 0.3) => rgba(238, 79, 18, 0.3)
+ * colorToRgba('rgba(238, 79, 18, 0.3)', 0.3) // rgba(238, 79, 18, 0.3)
- * colorToRgba('not a color', 0.3) => not a color
+ * colorToRgba('not a color', 0.3) // not a color
  */
 export const colorToRgba = (color: string, alpha = 1) => {
   const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
@@ -271,24 +341,31 @@ export const colorToRgba = (color: string, alpha = 1) => {
  * @param element 需要匹配元素参数名称
  * @returns 匹配元素列表
  *
- * @remark 使用 querySelectorAll 作为检索方法
+ * @description
- * @remark 如果希望按照 attribute 匹配, 仅需要 'attr:xxx'传递参数即可
+ * 使用 querySelectorAll 作为检索方法。
+ *
+ * 如果希望按照 attribute 匹配, 仅需要 'attr:xxx'传递参数即可
  *
  * @example
- * class:
+ * // class:
  * const el = queryElements('.demo')
- * id:
+ * // id:
  * const el = queryElements('#demo')
- * attribute:
+ * // attribute:
  * const el = queryElements('attr:type=button')
- * 或者可以这样写
+ * // 或者可以这样写
  * const el = queryElements('attr:type')
+ * // 默认元素
+ * const el = queryElements('.demo', { defaultElement: document.body })
  */
 export const queryElements = <T extends Element = Element>(
   selector: ElementSelector,
+  options?: QueryElementsOptions<T>,
 ) => {
+  const { defaultElement } = options || {}
+
   if (!selector) {
-    return null
+    return defaultElement ? [defaultElement] : null
   }
 
   const queryParam = selector.startsWith('attr:')
@@ -300,9 +377,12 @@ export const queryElements = <T extends Element = Element>(
 
     return elements
   } catch (error) {
-    console.error(`Failed to get elements for selector '${selector}'`, error)
+    console.error(
+      `[queryElements]: Failed to get elements for selector '${selector}'`,
+      error,
+    )
 
-    return null
+    return defaultElement ? [defaultElement] : null
   }
 }
 
@@ -311,7 +391,8 @@ export const queryElements = <T extends Element = Element>(
  * @param size css size
  * @param unit 自动填充 css 尺寸单位
  *
- * @remark 自动补全尺寸
+ * @description
+ * 自动补全尺寸
  */
 export const completeSize = (size: number | string, unit = 'px') => {
   if (typeof size === 'number') {

src/utils/precision.ts

@@ -67,7 +67,8 @@ const currencyPrototypeKeys = [
  * @param dividend 初始值
  * @param cb 回调方法
  *
- * @remark 计算基础方法, 仅限于该处使用
+ * @description
+ * 计算基础方法, 仅限于该处使用。
  */
 const basic = (
   valueOptions: CurrencyArguments[],
@@ -99,10 +100,10 @@ const basic = (
  * 当该对象含有 s, intValue, p, value... 属性时, 则认为该对象为 currency.js 的对象
  *
  * @example
- * isCurrency(1.23) => false
+ * isCurrency(1.23) // false
- * isCurrency('1.23') => false
+ * isCurrency('1.23') // false
- * isCurrency({ s: 1, intValue: 1, p: 1, value: 1 }) => false
+ * isCurrency({ s: 1, intValue: 1, p: 1, value: 1 }) // false
- * isCurrency(currency(1)) => true
+ * isCurrency(currency(1)) // true
  */
 export const isCurrency = (value: unknown) => {
   if (typeof value === 'string' || typeof value === 'number') {
@@ -118,10 +119,16 @@ export const isCurrency = (value: unknown) => {
 
 /**
  *
- * 格式化一个数据值, 并且返回其原始值
+ * @description
- * 默认以 number 格式返回
+ * 格式化一个数据值, 并且返回其原始值。
  *
- * 如果需要格式化为其他格式(如: 货币单位、分组、分隔符等), 请使用 currency format 方法格式
+ * 默认以 number 格式返回。
+ *
+ * 如果需要格式化为其他格式(如: 货币单位、分组、分隔符等), 请使用 currency format 方法格式。
+ *
+ * @example
+ * format(0.1) // 0.1
+ * format(0.1, { symbol: '¥' }) // ¥0.1
  */
 export const format = (
   value: CurrencyArguments,
@@ -136,11 +143,12 @@ export const format = (
 
 /**
  *
- * 加法
+ * @description
+ * 加法。
  *
  * @example
- * format(add(0.1, 0.2)) => 0.3
+ * format(add(0.1, 0.2)) // 0.3
- * format(add(0.2, 0.33)) => 0.53
+ * format(add(0.2, 0.33)) // 0.53
  */
 export const add = (...args: CurrencyArguments[]) => {
   if (args.length === 1) {
@@ -154,11 +162,12 @@ export const add = (...args: CurrencyArguments[]) => {
 
 /**
  *
- * 减法
+ * @description
+ * 减法。
  *
  * @example
- * format(subtract(0.1, 0.12312)) => -0.02
+ * format(subtract(0.1, 0.12312)) // -0.02
- * format(subtract(0.2, 0.33)) => -0.13
+ * format(subtract(0.2, 0.33)) // -0.13
  */
 export const subtract = (...args: CurrencyArguments[]) => {
   if (args.length === 1) {
@@ -185,11 +194,12 @@ export const subtract = (...args: CurrencyArguments[]) => {
 
 /**
  *
- * 乘法
+ * @description
+ * 乘法。
  *
  * @example
- * format(multiply(1, 0.2)) => 0.2
+ * format(multiply(1, 0.2)) // 0.2
- * format(multiply(0.2, 0.33)) => 0.07
+ * format(multiply(0.2, 0.33)) // 0.07
  */
 export const multiply = (...args: CurrencyArguments[]) => {
   if (args.length === 1) {
@@ -203,11 +213,12 @@ export const multiply = (...args: CurrencyArguments[]) => {
 
 /**
  *
- * 除法
+ * @description
+ * 除法。
  *
  * @example
- * format(divide(1, 0.2)) => 5
+ * format(divide(1, 0.2)) // 5
- * format(divide(0.2, 0.33)) => 0.61
+ * format(divide(0.2, 0.33)) // 0.61
  */
 export const divide = (...args: CurrencyArguments[]) => {
   if (args.length === 1) {
@@ -230,12 +241,13 @@ export const divide = (...args: CurrencyArguments[]) => {
 
 /**
  *
- * 平分(将一个数值平均分配到一个数组中)
+ * @description
+ * 平分(将一个数值平均分配到一个数组中)，
  * 如果值为 undefined null 会自动转换为 0
  *
  * @example
- * distribute(0, 1) => [0]
+ * distribute(0, 1) // [0]
- * distribute(0, 3) => [0, 0, 0]
+ * distribute(0, 3) // [0, 0, 0]
  */
 export const distribute = (value: CurrencyArguments, length: number) => {
   if (length <= 1) {

src/utils/vue/effectDispose.ts

@@ -17,7 +17,15 @@ import type { AnyFC } from '@/types'
  *
  * @param fc effect 作用域卸载时需执行函数
  *
- * @remark 返回 true 表示获取到 effect 作用域并且卸载；false 表示未存在 effect 作用域
+ * @description
+ * 返回 true 表示获取到 effect 作用域并且卸载；false 表示未存在 effect 作用域
+ *
+ * @example
+ * const watchStop = watch(() => {}, () => {})
+ * const watchEffectStop = watchEffect(() => {})
+ *
+ * effectDispose(watchStop)
+ * effectDispose(watchEffectStop)
  */
 export function effectDispose<T extends AnyFC>(fc: T) {
   if (getCurrentScope()) {

src/views/demo/directive/index.tsx

@@ -70,14 +70,14 @@ const RDirective = defineComponent({
               v-throttle={{
                 func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'),
                 trigger: 'click',
-                wait: 1000,
+                wait: 3000,
                 options: {},
               }}
             >
               点击执行
             </NButton>
             <p>我执行了{this.throttleBtnClickCount}次</p>
-            <p>该方法 1s 内仅会执行一次</p>
+            <p>该方法 3s 内仅会执行一次</p>
           </NFlex>
         </NCard>
         <NCard title="防抖">
@@ -86,14 +86,14 @@ const RDirective = defineComponent({
               v-debounce={{
                 func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
                 trigger: 'click',
-                wait: 1000,
+                wait: 3000,
                 options: {},
               }}
             >
               点击执行
             </NButton>
             <p>我执行了{this.debounceBtnClickCount}次</p>
-            <p>该方法将延迟 1s 执行</p>
+            <p>该方法将延迟 3s 执行</p>
           </NFlex>
         </NCard>
         <NCard title="禁用">

src/views/login/index.scss

@@ -4,6 +4,7 @@ $positionY: 24px;
 .login {
   width: 100%;
   display: flex;
+  overflow: hidden;
 
   & .login-wrapper {
     position: relative;

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "strict": true,
+    "newLine": "LF",
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,