version: v4.7.2

CHANGELOG.md

@@ -1,5 +1,67 @@
 # CHANGE LOG
 
+## 4.7.2
+
+新增 `vitest` 测试框架。
+
+重写了一些 `utils`, `hooks` 包的方法，并且编写了对应的单测模块。
+
+## Feats
+
+- 集成 `vitest` 测试框架，并且对于 `utils`, `hooks` 包方法编写了对应的单测模块
+
+> 使用方法请查看 [vitest](https://cn.vitest.dev/)。
+
+```sh
+# 新增测试单元模块
+1. 在 `__test__` 目录下创建测试文件
+2. 添加对应的单测模块
+3. 编写对应的单测逻辑
+
+# 值得注意的是
+1. 测试文件必须在 `__test__` 目录下
+2. 测试文件必须以 `xxx.spec.ts` 或者 `xxx.spec.tsx` 结尾，否则不生效
+3. 必须手动补全导入待测试方法或者组件，可以查看现有的测试文件
+
+# 运行测试
+pnpm test
+
+# 运行测试 ui 界面
+pnpm test:ui
+
+# 最重要需要值得注意的地方
+一旦被导入方法或者组件文件中，有报错，那么会导致整个文件的测试方法在执行 `pnpm test`, `pnpm test:ui` 时都报错。
+
+但是单独测试该文件时，不会报错，只有在执行 `pnpm test`, `pnpm test:ui` 时才会报错。
+
+# 最后
+未来会逐步完善测试用例，以及编写更多的测试单元模块，包括全局组件。
+```
+
+- `basic` 包相关
+  - 重构 `equalRouterPath` 方法，现在允许忽略带参数的路径比较
+  - `omit`, `pick` 方法不在对 `null`, `undefined` 传参抛出警告；该方法现在支持多参数传递
+- `hooks` 包相关
+  - `useDayjs`
+    - 优化注释
+    - `getStartAndEndOfDay` 方法新增 `formatEndOfDay`
+- `element` 包相关
+  - `colorToRgba`
+    - 现在支持解析 `#fff`, `#ffffff`, `#ffffffaa` 格式的颜色
+    - 重写该方法
+  - `precision` 包相关
+    - `Options` 类型重构为 `CurrencyOptions`
+    - `format` 方法新增 `currency` 配置项，移除第二个参数，合并在配置项中配置输出格式
+    - `distribute` 方法新增配置项（CurrencyOptions）
+- 现在 `@/hooks` 包下方法都将构建在一个包中输出，不在做拆分
+
+## Fixes
+
+- `utils` 包相关
+  - 修复 `arrayBufferToBase64Image` 方法总是返回 `null` 的问题
+  - 修复 `queryElements` 方法 `defaultElement` 配置项不能正确的返回默认值问题
+  - 修复 `autoPrefixStyle` 方法不能返回样式本身问题
+
 ## 4.7.1
 
 ## Feats
@@ -275,7 +337,7 @@ remove('your key', 'all')
   - 新增 `extra` 配置项，用于配置标记
 
 ```ts
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

__test__/app/prefixCacheKey.spec.ts

@@ -0,0 +1,16 @@
+import { prefixCacheKey } from '../../src/utils/app/prefixCacheKey'
+
+describe('prefixCacheKey', () => {
+  it('should return the key with the default prefix', () => {
+    const key = 'signing'
+
+    expect(prefixCacheKey(key)).toBe(key)
+  })
+
+  it('should return the key with the custom prefix', () => {
+    const key = 'signing'
+    const customPrefix = 'ray-'
+
+    expect(prefixCacheKey(key, { customPrefix })).toBe(customPrefix + key)
+  })
+})

__test__/basic/arrayBufferToBase64Image.spec.ts

@@ -0,0 +1,18 @@
+import { arrayBufferToBase64Image } from '../../src/utils/basic'
+
+describe('arrayBufferToBase64Image', () => {
+  const arrayBuffer = new ArrayBuffer(8)
+  const base64ImagePrefix = 'data:image/png;base64,'
+
+  it('should convert array buffer to base64 image', () => {
+    const base64Image = arrayBufferToBase64Image(arrayBuffer)
+
+    expect(base64Image).toBe(`${base64ImagePrefix}AAAAAAAAAAA=`)
+  })
+
+  it('should convert array buffer to base64 image with prefix', () => {
+    const base64Image = arrayBufferToBase64Image(arrayBuffer)
+
+    expect(base64Image.startsWith(base64ImagePrefix)).toBe(true)
+  })
+})

__test__/basic/callWithAsyncErrorHandling.spec.ts

@@ -0,0 +1,25 @@
+import { callWithAsyncErrorHandling } from '../../src/utils/basic'
+
+describe('callWithAsyncErrorHandling', () => {
+  it('should call the function and return the result', () => {
+    const fn = (x: number) => x
+    const callbackFn = () => {}
+
+    expect(callWithAsyncErrorHandling(fn, callbackFn, [1])).resolves.toBe(1)
+  })
+
+  it('should call the callback function when the function throws an error', () => {
+    let callbackFnExecuted = 1
+
+    const fn = () => {
+      throw new Error('test error')
+    }
+    const callbackFn = () => {
+      callbackFnExecuted = 2
+    }
+
+    callWithAsyncErrorHandling(fn, callbackFn)
+
+    expect(callbackFnExecuted).toBe(2)
+  })
+})

__test__/basic/callWithErrorHandling.spec.ts

@@ -0,0 +1,25 @@
+import { callWithErrorHandling } from '../../src/utils/basic'
+
+describe('callWithErrorHandling', () => {
+  it('should call the function and return the result', () => {
+    const fn = (x: number) => x
+    const callbackFn = () => {}
+
+    expect(callWithErrorHandling(fn, callbackFn, [1])).toBe(1)
+  })
+
+  it('should call the callback function when the function throws an error', () => {
+    let callbackFnExecuted = 1
+
+    const fn = () => {
+      throw new Error('test error')
+    }
+    const callbackFn = () => {
+      callbackFnExecuted = 2
+    }
+
+    callWithErrorHandling(fn, callbackFn)
+
+    expect(callbackFnExecuted).toBe(2)
+  })
+})

__test__/basic/detectOperatingSystem.spec.ts

@@ -0,0 +1,7 @@
+import { detectOperatingSystem } from '../../src/utils/basic'
+
+describe('detectOperatingSystem', () => {
+  it('should return Unknown', () => {
+    expect(detectOperatingSystem()).toBe('Unknown')
+  })
+})

__test__/basic/downloadAnyFile.spec.ts

@@ -0,0 +1,33 @@
+import { downloadAnyFile } from '../../src/utils/basic'
+
+describe('downloadAnyFile', () => {
+  it('should download data when data is a string', () => {
+    const data = 'test data'
+    const fileName = 'test.txt'
+
+    expect(downloadAnyFile(data, fileName)).resolves.toBeUndefined()
+  })
+
+  // it('should download data when data is a ArrayBuffer', () => {
+  //   const data = new ArrayBuffer(8)
+  //   const fileName = 'test.txt'
+
+  //   expect(downloadAnyFile(data, fileName)).resolves.toBeUndefined()
+  // })
+
+  // it('should download data when data is a Blob', () => {
+  //   const data = new Blob(['hello', 'world'], {
+  //     type: 'text/plain',
+  //   })
+  //   const fileName = 'test.txt'
+
+  //   expect(downloadAnyFile(data, fileName)).resolves.toBeUndefined()
+  // })
+
+  // it('should download data when data is a File', () => {
+  //   const data = new File(['hello', 'world'], 'test.txt')
+  //   const fileName = 'test.txt'
+
+  //   expect(downloadAnyFile(data, fileName)).resolves.toBeUndefined()
+  // })
+})

__test__/basic/downloadBase64File.spec.ts

@@ -0,0 +1,12 @@
+import { downloadBase64File } from '../../src/utils/basic'
+
+describe('downloadBase64File', () => {
+  const base64 =
+    'data:image/png;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAE'
+
+  it('download base64 to file', () => {
+    const result = downloadBase64File(base64, 'test.png')
+
+    expect(result).toBe(void 0)
+  })
+})

__test__/basic/equalRouterPath.spec.ts

@@ -0,0 +1,17 @@
+import { equalRouterPath } from '../../src/utils/basic'
+
+describe('equalRouterPath', () => {
+  it('compare paths with parameters', () => {
+    const p1 = '/a?b=1'
+    const p2 = '/a?b=2'
+
+    expect(equalRouterPath(p1, p2)).toBe(true)
+  })
+
+  it('compare paths', () => {
+    const p1 = '/a'
+    const p2 = '/a/'
+
+    expect(equalRouterPath(p1, p2)).toBe(true)
+  })
+})

__test__/basic/getAppEnvironment.spec.ts

@@ -0,0 +1,21 @@
+import { getAppEnvironment } from '../../src/utils/basic'
+
+describe('getAppEnvironment', () => {
+  it('should return MODE is test', () => {
+    const { MODE } = getAppEnvironment()
+
+    expect(MODE).toBe('test')
+  })
+
+  it('SSR should be false', () => {
+    const { SSR } = getAppEnvironment()
+
+    expect(SSR).toBe(false)
+  })
+
+  it('deconstruction value should be undefined', () => {
+    const { UNDEFINED_MODE } = getAppEnvironment()
+
+    expect(UNDEFINED_MODE).toBe(void 0)
+  })
+})

__test__/basic/isAsyncFunction.spec.ts

@@ -0,0 +1,33 @@
+import { isAsyncFunction } from '../../src/utils/basic'
+
+describe('isAsyncFunction', () => {
+  it('should return true if the function is async', () => {
+    const asyncFn = async () => {}
+
+    expect(isAsyncFunction(asyncFn)).toBe(true)
+  })
+
+  it('should return false if the function is not async', () => {
+    const syncFn = () => {}
+
+    expect(isAsyncFunction(syncFn)).toBe(false)
+  })
+
+  it('should return false if the function is not a function', () => {
+    const notFn = 'not a function'
+
+    expect(isAsyncFunction(notFn)).toBe(false)
+  })
+
+  it('should return false if the function is a class', () => {
+    class MyClass {}
+
+    expect(isAsyncFunction(MyClass)).toBe(false)
+  })
+
+  it('should return false if the function is a Promise', () => {
+    const promise = Promise.resolve('')
+
+    expect(isAsyncFunction(promise)).toBe(false)
+  })
+})

__test__/basic/isPromise.spec.ts

@@ -0,0 +1,33 @@
+import { isPromise } from '../../src/utils/basic'
+
+describe('isPromise', () => {
+  it('should return true if the value is a Promise', () => {
+    const promise = Promise.resolve('')
+
+    expect(isPromise(promise)).toBe(true)
+  })
+
+  it('should return false if the value is not a Promise', () => {
+    const notPromise = 'not a Promise'
+
+    expect(isPromise(notPromise)).toBe(false)
+  })
+
+  it('should return false if the value is a class', () => {
+    class MyClass {}
+
+    expect(isPromise(MyClass)).toBe(false)
+  })
+
+  it('should return false if the value is a function', () => {
+    const fn = () => {}
+
+    expect(isPromise(fn)).toBe(false)
+  })
+
+  it('should return true if the value is an async function', () => {
+    const asyncFn = async () => {}
+
+    expect(isPromise(asyncFn)).toBe(true)
+  })
+})

__test__/basic/isValueType.spec.ts

@@ -0,0 +1,47 @@
+import { isValueType } from '../../src/utils/basic'
+
+describe('isValueType', () => {
+  it('should return true for string', () => {
+    expect(isValueType<string>('string', 'String')).toBe(true)
+  })
+
+  it('should return true for number', () => {
+    expect(isValueType<number>(123, 'Number')).toBe(true)
+  })
+
+  it('should return true for array', () => {
+    expect(isValueType<unknown[]>([], 'Array')).toBe(true)
+  })
+
+  it('should return true for null', () => {
+    expect(isValueType<null>(null, 'Null')).toBe(true)
+  })
+
+  it('should return true for undefined', () => {
+    expect(isValueType<undefined>(void 0, 'Undefined')).toBe(true)
+  })
+
+  it('should return true for object', () => {
+    expect(isValueType<object>({}, 'Object')).toBe(true)
+  })
+
+  it('should return true for Map', () => {
+    expect(isValueType<Map<unknown, unknown>>(new Map(), 'Map')).toBe(true)
+  })
+
+  it('should return true for Set', () => {
+    expect(isValueType<Set<unknown>>(new Set(), 'Set')).toBe(true)
+  })
+
+  it('should return true for Date', () => {
+    expect(isValueType<Date>(new Date(), 'Date')).toBe(true)
+  })
+
+  it('should return true for RegExp', () => {
+    expect(isValueType<RegExp>(/a/i, 'RegExp')).toBe(true)
+  })
+
+  it('should return false for Function', () => {
+    expect(isValueType<Function>(/a/i, 'Function')).toBe(false)
+  })
+})

__test__/basic/omit.spec.ts

@@ -0,0 +1,39 @@
+import { omit } from '../../src/utils/basic'
+
+describe('omit', () => {
+  it('should omit key from object', () => {
+    const obj = { a: 1, b: 2, c: 3 }
+    const result = omit(obj, 'b')
+
+    expect(result).toEqual({ a: 1, c: 3 })
+  })
+
+  it('should omit key from the array argument', () => {
+    const obj = { a: 1, b: 2, c: 3 }
+    const result = omit(obj, ['a', 'c'])
+
+    expect(result).toEqual({ b: 2 })
+  })
+
+  it('should return empty object if no keys are provided', () => {
+    const obj = { a: 1, b: 2, c: 3 }
+    const result = omit(obj, Object.keys(obj))
+
+    expect(result).toEqual({})
+  })
+
+  it('should return empty object if object is empty', () => {
+    const obj = {}
+    const result = omit(obj, 'a', 'b')
+
+    expect(result).toEqual({})
+  })
+
+  it('an empty object should be returned if null or undefined is passed', () => {
+    const result1 = omit(null)
+    const result2 = omit(void 0)
+
+    expect(result1).toEqual({})
+    expect(result2).toEqual({})
+  })
+})

__test__/basic/pick.spec.ts

@@ -0,0 +1,25 @@
+import { pick } from '../../src/utils/basic'
+
+describe('pick', () => {
+  it('should pick keys from object', () => {
+    const obj = { a: 1, b: 2, c: 3 }
+    const result = pick(obj, 'a', 'c')
+
+    expect(result).toEqual({ a: 1, c: 3 })
+  })
+
+  it('should pick keys from the array argument', () => {
+    const obj = { a: 1, b: 2, c: 3 }
+    const result = pick(obj, ['a', 'c'])
+
+    expect(result).toEqual({ a: 1, c: 3 })
+  })
+
+  it('an empty object should be returned if null or undefined is passed', () => {
+    const result1 = pick(null)
+    const result2 = pick(void 0)
+
+    expect(result1).toEqual({})
+    expect(result2).toEqual({})
+  })
+})

__test__/basic/uuid.spec.ts

@@ -0,0 +1,19 @@
+import { uuid } from '../../src/utils/basic'
+
+describe('uuid', () => {
+  it('should return String', () => {
+    expectTypeOf(uuid()).toEqualTypeOf<string>()
+  })
+
+  it('the return value should be unique', () => {
+    const uuid1 = uuid()
+    const uuid2 = uuid()
+
+    expect(uuid1).not.toBe(uuid2)
+  })
+
+  it('should return a string with length 36', () => {
+    const uid = uuid(36)
+    expect(uid.length).toBe(36)
+  })
+})

__test__/cache/index.spec.ts

@@ -0,0 +1,117 @@
+import {
+  hasStorage,
+  setStorage,
+  getStorage,
+  removeStorage,
+} from '../../src/utils/cache'
+
+describe('cache utils', () => {
+  const __DEMO__KEY = '__DEMO__KEY'
+  const __DEMO__VALUE = '__DEMO__VALUE'
+  const __PRE__KEY = '__PRE__KEY'
+
+  it('use setStorage set cache in localStorage and sessionStorage', () => {
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'sessionStorage')
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'localStorage')
+
+    expect(hasStorage(__DEMO__KEY, 'sessionStorage')).toBe(true)
+    expect(hasStorage(__DEMO__KEY, 'localStorage')).toBe(true)
+  })
+
+  it('use getStorage get cache', () => {
+    expect(getStorage(__DEMO__KEY, 'sessionStorage')).toBe(__DEMO__VALUE)
+    expect(getStorage(__DEMO__KEY, 'localStorage')).toBe(__DEMO__VALUE)
+  })
+
+  it('use removeStorage remove cache', () => {
+    removeStorage(__DEMO__KEY, 'sessionStorage')
+    removeStorage(__DEMO__KEY, 'localStorage')
+
+    expect(hasStorage(__DEMO__KEY, 'sessionStorage')).toBe(false)
+    expect(hasStorage(__DEMO__KEY, 'localStorage')).toBe(false)
+  })
+
+  it('use removeStorage remove all localStorage and sessionStorage cache', () => {
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'sessionStorage')
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'localStorage')
+
+    removeStorage('__all_sessionStorage__', 'sessionStorage')
+    removeStorage('__all_localStorage__', 'localStorage')
+
+    expect(hasStorage(__DEMO__KEY, 'sessionStorage')).toBe(false)
+    expect(hasStorage(__DEMO__KEY, 'localStorage')).toBe(false)
+  })
+
+  it('use removeStorage remove all cache', () => {
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'sessionStorage')
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'localStorage')
+
+    removeStorage('__all__', 'all')
+
+    expect(hasStorage(__DEMO__KEY, 'sessionStorage')).toBe(false)
+    expect(hasStorage(__DEMO__KEY, 'localStorage')).toBe(false)
+  })
+
+  it('setStorage with prefix', () => {
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'sessionStorage', {
+      prefix: true,
+      prefixKey: __PRE__KEY,
+    })
+    setStorage(__DEMO__KEY, __DEMO__VALUE, 'localStorage', {
+      prefix: true,
+      prefixKey: __PRE__KEY,
+    })
+
+    expect(
+      hasStorage(__DEMO__KEY, 'sessionStorage', {
+        prefix: true,
+        prefixKey: __PRE__KEY,
+      }),
+    ).toBe(true)
+    expect(
+      hasStorage(__DEMO__KEY, 'localStorage', {
+        prefix: true,
+        prefixKey: __PRE__KEY,
+      }),
+    ).toBe(true)
+  })
+
+  it('getStorage with prefix', () => {
+    expect(
+      getStorage(__DEMO__KEY, 'sessionStorage', {
+        prefix: true,
+        prefixKey: __PRE__KEY,
+      }),
+    ).toBe(__DEMO__VALUE)
+    expect(
+      getStorage(__DEMO__KEY, 'localStorage', {
+        prefix: true,
+        prefixKey: __PRE__KEY,
+      }),
+    ).toBe(__DEMO__VALUE)
+  })
+
+  it('removeStorage with prefix', () => {
+    removeStorage(__DEMO__KEY, 'sessionStorage', {
+      prefix: true,
+      prefixKey: __PRE__KEY,
+    })
+    removeStorage(__DEMO__KEY, 'localStorage', {
+      prefix: true,
+      prefixKey: __PRE__KEY,
+    })
+
+    expect(
+      hasStorage(__DEMO__KEY, 'sessionStorage', {
+        prefix: true,
+        prefixKey: __PRE__KEY,
+      }),
+    ).toBe(false)
+    expect(
+      hasStorage(__DEMO__KEY, 'localStorage', {
+        prefix: true,
+        prefixKey: __PRE__KEY,
+      }),
+    ).toBe(false)
+  })
+})

__test__/dom/printDom.spec.tsx

@@ -0,0 +1,49 @@
+import { printDom } from '../../src/utils/dom'
+import { mount } from '@vue/test-utils'
+import renderHook from '../utils/renderHook'
+
+// happy-dom 官方有一个 bug，无法使用 canvas.toDataURL 方法。所以该模块单测暂时无法通过
+describe('printDom', () => {
+  // let count = 1
+  // const domRef = ref<HTMLElement>()
+  // const canvas = document.createElement('canvas')
+  // canvas.width = 100
+  // canvas.height = 100
+  // console.log('canvas.toDataURL result', canvas.toDataURL)
+  // const wrapper = mount(
+  //   defineComponent({
+  //     setup() {
+  //       const print = () => {
+  //         count = 2
+  //         printDom(canvas, {
+  //           domToImageOptions: {
+  //             created: () => {
+  //               count = 2
+  //             },
+  //           },
+  //         })
+  //       }
+  //       return {
+  //         domRef,
+  //         print,
+  //       }
+  //     },
+  //     render() {
+  //       const { print } = this
+  //       return (
+  //         <>
+  //           <div ref="domRef">print html</div>
+  //           <button onClick={print.bind(this)}>print</button>
+  //         </>
+  //       )
+  //     },
+  //   }),
+  // )
+  // it('print dom', () => {
+  //   const button = wrapper.find('button')
+  //   button.trigger('click')
+  //   expect(count).toBe(2)
+  // })
+
+  it('print dom', () => {})
+})

__test__/element/autoPrefixStyle.spec.ts

@@ -0,0 +1,19 @@
+import { autoPrefixStyle } from '../../src/utils/element'
+
+describe('autoPrefixStyle', () => {
+  it('should be defined', () => {
+    expect(autoPrefixStyle).toBeDefined()
+  })
+
+  it('should complete css prefix', () => {
+    const result = autoPrefixStyle('transform')
+
+    expect(result).toEqual({
+      webkitTransform: 'transform',
+      mozTransform: 'transform',
+      msTransform: 'transform',
+      oTransform: 'transform',
+      transform: 'transform',
+    })
+  })
+})

__test__/element/classMethods.spec.tsx

@@ -0,0 +1,68 @@
+import { setClass, hasClass, removeClass } from '../../src/utils/element'
+import createRefElement from '../utils/createRefElement'
+
+describe('setClass', () => {
+  const wrapper = createRefElement()
+  const CLASS_NAME = 'test'
+  const CLASS_NAME_2 = 'test2'
+
+  it('set ref element class', () => {
+    setClass(wrapper.element, CLASS_NAME)
+
+    const classList = Array.from(wrapper.element.classList)
+
+    expect(classList.includes(CLASS_NAME)).toBe(true)
+  })
+
+  it('set ref element class with multiple class names', () => {
+    setClass(wrapper.element, `${CLASS_NAME} ${CLASS_NAME_2}`)
+
+    const classList = Array.from(wrapper.element.classList)
+
+    expect(classList.includes(CLASS_NAME)).toBe(true)
+    expect(classList.includes(CLASS_NAME_2)).toBe(true)
+  })
+
+  it('set ref element class with multiple class names use array params', () => {
+    setClass(wrapper.element, [CLASS_NAME, CLASS_NAME_2])
+
+    const classList = Array.from(wrapper.element.classList)
+
+    expect(classList.includes(CLASS_NAME)).toBe(true)
+    expect(classList.includes(CLASS_NAME_2)).toBe(true)
+  })
+
+  it('get ref element class', () => {
+    setClass(wrapper.element, CLASS_NAME)
+
+    const hasClassResult = hasClass(wrapper.element, CLASS_NAME)
+
+    expect(hasClassResult.value).toBe(true)
+  })
+
+  it('get ref element class with multiple class names', () => {
+    setClass(wrapper.element, `${CLASS_NAME} ${CLASS_NAME_2}`)
+
+    const hasClassResult = hasClass(wrapper.element, CLASS_NAME)
+
+    expect(hasClassResult.value).toBe(true)
+  })
+
+  it('get ref element class with multiple class names use array params', () => {
+    setClass(wrapper.element, [CLASS_NAME, CLASS_NAME_2])
+
+    const hasClassResult = hasClass(wrapper.element, CLASS_NAME)
+
+    expect(hasClassResult.value).toBe(true)
+  })
+
+  it('remove ref element class', () => {
+    setClass(wrapper.element, CLASS_NAME)
+
+    removeClass(wrapper.element, CLASS_NAME)
+
+    const classList = Array.from(wrapper.element.classList)
+
+    expect(classList.includes(CLASS_NAME)).toBe(false)
+  })
+})

__test__/element/colorToRgba.spec.ts

@@ -0,0 +1,23 @@
+import { colorToRgba } from '../../src/utils/element'
+
+describe('colorToRgba', () => {
+  it('should be defined', () => {
+    expect(colorToRgba).toBeDefined()
+  })
+
+  it('should return rgba color', () => {
+    expect(colorToRgba('rgb(255, 255, 255)', 0.5)).toBe(
+      'rgba(255, 255, 255, 0.5)',
+    )
+    expect(colorToRgba('rgba(255, 255, 255, 0.5)', 0.5)).toBe(
+      'rgba(255, 255, 255, 0.5)',
+    )
+    expect(colorToRgba('#fff', 0.1)).toBe('rgba(255, 255, 255, 0.1)')
+    expect(colorToRgba('#000000', 0.1)).toBe('rgba(0, 0, 0, 0.1)')
+    expect(colorToRgba('#fffffafa', 0.1)).toBe('rgba(255, 255, 250, 0.98)')
+  })
+
+  it('should return input color', () => {
+    expect(colorToRgba('hi')).toBe('hi')
+  })
+})

__test__/element/completeSize.spec.ts

@@ -0,0 +1,17 @@
+import { completeSize } from '../../src/utils/element'
+
+describe('completeSize', () => {
+  it('should be defined', () => {
+    expect(completeSize).toBeDefined()
+  })
+
+  it('should return size', () => {
+    expect(completeSize('100px')).toBe('100px')
+    expect(completeSize('100%')).toBe('100%')
+    expect(completeSize('100vw')).toBe('100vw')
+  })
+
+  it('should return default size', () => {
+    expect(completeSize(0)).toBe('0px')
+  })
+})

__test__/element/queryElements.spec.ts

@@ -0,0 +1,52 @@
+import { queryElements } from '../../src/utils/element'
+
+describe('queryElements', () => {
+  const div = document.createElement('div')
+  const CLASS_NAME = 'demo'
+  const ATTR_KEY = 'attr_key'
+  const ATTR_VALUE = 'attr_value'
+
+  it('should be defined', () => {
+    expect(queryElements).toBeDefined()
+  })
+
+  it('should return empty array', () => {
+    const el = queryElements('.demo')
+
+    expect(el?.length).toBe(0)
+  })
+
+  it('should return element list', () => {
+    div.parentNode?.removeChild(div)
+
+    div.classList.add(CLASS_NAME)
+    document.body.appendChild(div)
+
+    const el = queryElements('.demo')
+
+    expect(el?.length).toBe(1)
+  })
+
+  it('should return default element', () => {
+    div.parentNode?.removeChild(div)
+
+    const el = queryElements('.demo', {
+      defaultElement: document.body,
+    })
+
+    expect(el?.length).toBe(1)
+  })
+
+  it('should return element list by attr', () => {
+    div.parentNode?.removeChild(div)
+
+    div.setAttribute(ATTR_KEY, ATTR_VALUE)
+    document.body.appendChild(div)
+
+    const el = queryElements(`attr:${ATTR_KEY}`)
+    const el2 = queryElements(`attr:${ATTR_KEY}=${ATTR_VALUE}`)
+
+    expect(el?.length).toBe(1)
+    expect(el2?.length).toBe(1)
+  })
+})

__test__/element/styleMethods.spec.ts

@@ -0,0 +1,71 @@
+import { setStyle, removeStyle } from '../../src/utils/element'
+import createRefElement from '../utils/createRefElement'
+
+describe('setStyle', () => {
+  const div = document.createElement('div')
+  const removeKeys = ['width', 'height']
+  const wrapper = createRefElement()
+
+  document.body.appendChild(div)
+
+  it('should be defined', () => {
+    expect(setStyle).toBeDefined()
+  })
+
+  it('should set style', () => {
+    removeStyle(div, removeKeys)
+
+    setStyle(div, {
+      width: '100px',
+      height: '100px',
+    })
+
+    expect(div.style.width).toBe('100px')
+    expect(div.style.height).toBe('100px')
+  })
+
+  it('should set style with string', () => {
+    removeStyle(div, removeKeys)
+
+    setStyle(div, 'width: 100px; height: 100px;')
+
+    expect(div.style.width).toBe('100px')
+    expect(div.style.height).toBe('100px')
+  })
+
+  it('should set style with string array', () => {
+    removeStyle(div, removeKeys)
+
+    setStyle(div, ['width: 100px', 'height: 100px'])
+
+    expect(div.style.width).toBe('100px')
+    expect(div.style.height).toBe('100px')
+  })
+
+  it('should set style with css variable', () => {
+    removeStyle(div, ['--width', '--height'])
+
+    setStyle(div, {
+      '--width': '100px',
+      '--height': '100px',
+    })
+
+    expect(div.style.getPropertyValue('--width')).toBe('100px')
+    expect(div.style.getPropertyValue('--height')).toBe('100px')
+  })
+
+  it('should set style to ref element', () => {
+    const element = wrapper.vm.domRef as HTMLElement
+    const style = element.style
+
+    removeStyle(element, removeKeys)
+
+    setStyle(element, {
+      width: '100px',
+      height: '100px',
+    })
+
+    expect(style.width).toBe('100px')
+    expect(style.height).toBe('100px')
+  })
+})

__test__/hooks/useContextmenuCoordinate.spec.tsx

@@ -0,0 +1,49 @@
+import { useContextmenuCoordinate } from '../../src/hooks/components/useContextmenuCoordinate'
+import renderHook from '../utils/renderHook'
+import createRefElement from '../utils/createRefElement'
+
+describe('useContextmenuCoordinate', () => {
+  const wrapperRef = createRefElement()
+  const [result] = renderHook(() =>
+    useContextmenuCoordinate(wrapperRef.element),
+  )
+
+  it('should be defined', () => {
+    expect(useContextmenuCoordinate).toBeDefined()
+  })
+
+  it('should update show value to true when contextmenu event is triggered', async () => {
+    wrapperRef.element.dispatchEvent(new MouseEvent('contextmenu'))
+
+    await nextTick()
+
+    expect(result.show.value).toBe(true)
+  })
+
+  it('should update show value when calling updateShow method', async () => {
+    result.updateShow(false)
+
+    await nextTick()
+
+    expect(result.show.value).toBe(false)
+
+    result.updateShow(true)
+
+    await nextTick()
+
+    expect(result.show.value).toBe(true)
+  })
+
+  it('should get the clientX and clientY value when contextmenu event is triggered', async () => {
+    const event = new MouseEvent('contextmenu', {
+      clientX: 100,
+      clientY: 200,
+    })
+    wrapperRef.element.dispatchEvent(event)
+
+    await nextTick()
+
+    expect(result.x.value).toBe(100)
+    expect(result.y.value).toBe(200)
+  })
+})

__test__/hooks/useDayjs.spec.ts

@@ -0,0 +1,100 @@
+import { useDayjs } from '../../src/hooks/web/useDayjs'
+
+describe('useDayjs', () => {
+  const {
+    locale,
+    getStartAndEndOfDay,
+    format,
+    isDayjs,
+    daysDiff,
+    isDateInRange,
+  } = useDayjs()
+
+  it('check whether the locale method runs properly', () => {
+    const m = {
+      locale,
+    }
+    const localSpy = vi.spyOn(m, 'locale')
+
+    m.locale('en')
+    m.locale('zh-cn')
+
+    expect(localSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('gets Returns the current date, start time, and end time of the current date ', () => {
+    const formatOptions = {
+      format: 'YYYY/M/DD HH:mm:ss',
+    }
+    const formatOptions2 = {
+      format: 'YYYY/M/DD',
+    }
+    const {
+      today,
+      startOfDay,
+      endOfDay,
+      formatToday,
+      formatStartOfDay,
+      formatEndOfDay,
+    } = getStartAndEndOfDay(formatOptions)
+    const _today = new Date().toLocaleDateString()
+    const _startOfDay = new Date(
+      new Date().setHours(0, 0, 0, 0),
+    ).toLocaleString()
+    const _endOfDay = new Date(
+      new Date().setHours(23, 59, 59, 999),
+    ).toLocaleString()
+
+    expect(format(today, formatOptions2)).toBe(_today)
+    expect(format(startOfDay, formatOptions)).toBe(_startOfDay)
+    expect(format(endOfDay, formatOptions)).toBe(_endOfDay)
+    expect(format(formatToday, formatOptions2)).toBe(_today)
+    expect(formatStartOfDay).toBe(_startOfDay)
+    expect(formatEndOfDay).toBe(_endOfDay)
+  })
+
+  it('check format method', () => {
+    const formatOptions1 = {
+      format: 'YYYY/M/DD HH:mm:ss',
+    }
+    const formatOptions2 = {
+      format: 'YYYY/M/DD',
+    }
+    const formatOptions3 = {
+      format: 'YYYY-MM-DD HH:mm:ss',
+    }
+    const formatOptions4 = {
+      format: 'YYYY-MM-DD',
+    }
+    const date = new Date('2022-01-11 00:00:00')
+
+    expect(format(date, formatOptions1)).toBe('2022/1/11 00:00:00')
+    expect(format(date, formatOptions2)).toBe('2022/1/11')
+    expect(format(date, formatOptions3)).toBe('2022-01-11 00:00:00')
+    expect(format(date, formatOptions4)).toBe('2022-01-11')
+  })
+
+  it('check isDayjs object', () => {
+    const { today } = getStartAndEndOfDay()
+
+    expect(isDayjs(new Date())).toBe(false)
+    expect(isDayjs(today)).toBe(true)
+  })
+
+  it('check daysDiff method', () => {
+    expect(daysDiff('2022-01-11', '2022-01-12')).toBe(1)
+    expect(daysDiff('2021-01-11', '2022-01-12')).toBe(366)
+    expect(daysDiff('2023-01-11', '2022-01-12')).toBe(-364)
+  })
+
+  it('check isDateInRange method', () => {
+    const range = {
+      start: '2023-01-15',
+      end: '2023-01-20',
+    }
+
+    expect(isDateInRange('2023-01-16', range)).toBe(true)
+    expect(isDateInRange('2023-01-15', range)).toBe(false)
+    expect(isDateInRange('2023-01-20', range)).toBe(false)
+  })
+})

__test__/hooks/useDevice.spec.ts

@@ -0,0 +1,116 @@
+import { useDevice } from '../../src/hooks/web/useDevice'
+
+describe('useDevice', () => {
+  const addEventListenerSpy = vi.spyOn(window, 'addEventListener')
+  const matchMediaSpy = vi
+    .spyOn(window, 'matchMedia')
+    .mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }))
+
+  beforeEach(() => {
+    addEventListenerSpy.mockClear()
+    matchMediaSpy.mockClear()
+  })
+
+  afterAll(() => {
+    addEventListenerSpy.mockRestore()
+    matchMediaSpy.mockRestore()
+  })
+
+  it('should be defined', () => {
+    expect(useDevice).toBeDefined()
+  })
+
+  it('should work', () => {
+    const { width, height } = useDevice({
+      initialWidth: 100,
+      initialHeight: 200,
+    })
+
+    expect(width.value).toBe(window.innerWidth)
+    expect(height.value).toBe(window.innerHeight)
+  })
+
+  it('should exclude scrollbar', () => {
+    const { width, height } = useDevice({
+      initialWidth: 100,
+      initialHeight: 200,
+      includeScrollbar: false,
+    })
+
+    expect(width.value).toBe(window.document.documentElement.clientWidth)
+    expect(height.value).toBe(window.document.documentElement.clientHeight)
+  })
+
+  it('sets handler for window resize event', async () => {
+    useDevice({
+      initialWidth: 100,
+      initialHeight: 200,
+      listenOrientation: false,
+    })
+
+    await nextTick()
+
+    expect(addEventListenerSpy).toHaveBeenCalledOnce()
+
+    const call = addEventListenerSpy.mock.calls[0]
+
+    expect(call[0]).toEqual('resize')
+    expect(call[2]).toEqual({
+      passive: true,
+    })
+  })
+
+  it('sets handler for window.matchMedia("(orientation: portrait)") change event', async () => {
+    useDevice({
+      initialWidth: 100,
+      initialHeight: 200,
+    })
+
+    await nextTick()
+
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
+    expect(matchMediaSpy).toHaveBeenCalledTimes(1)
+
+    const call = matchMediaSpy.mock.calls[0]
+
+    expect(call[0]).toEqual('(orientation: portrait)')
+  })
+
+  it('should update width and height on window resize', async () => {
+    const { width, height } = useDevice({
+      initialWidth: 100,
+      initialHeight: 200,
+    })
+
+    window.innerWidth = 300
+    window.innerHeight = 400
+
+    window.dispatchEvent(new Event('resize'))
+
+    await nextTick()
+
+    expect(width.value).toBe(300)
+    expect(height.value).toBe(400)
+  })
+
+  it('should update isTabletOrSmaller on window resize', async () => {
+    const { isTabletOrSmaller } = useDevice()
+
+    window.innerWidth = 300
+
+    window.dispatchEvent(new Event('resize'))
+
+    await nextTick()
+
+    expect(isTabletOrSmaller.value).toBe(true)
+  })
+})

__test__/precision/index.spec.ts

@@ -0,0 +1,82 @@
+import {
+  isCurrency,
+  format,
+  add,
+  subtract,
+  multiply,
+  divide,
+  distribute,
+} from '../../src/utils/precision'
+
+describe('precision', () => {
+  it('check value is currency object', () => {
+    expect(isCurrency(1)).toBeFalsy()
+    expect(isCurrency('1')).toBeFalsy()
+    expect(isCurrency({})).toBeFalsy()
+    expect(isCurrency({ s: 1 })).toBeFalsy()
+    expect(isCurrency(add(1, 1))).toBeTruthy()
+  })
+
+  it('format value', () => {
+    expect(format(1)).toBe(1)
+    expect(
+      format(1.1, {
+        type: 'number',
+      }),
+    ).toBe(1.1)
+    expect(
+      format(1.11, {
+        type: 'string',
+        precision: 2,
+      }),
+    ).toBe('1.11')
+    expect(format(add(1, 1))).toBe(2)
+    expect(format(add(0.1, 0.2))).toBe(0.3)
+  })
+
+  it('add value', () => {
+    expect(format(add(1, 1))).toBe(2)
+    expect(format(add(0.1, 0.2))).toBe(0.3)
+    expect(format(add(0.1, 0.2, 0.3))).toBe(0.6)
+    expect(format(add(0.1, 0.2, 0.3, 0.4))).toBe(1)
+    expect(format(add(0.1, 0.2, 0.3, 0.4, 0.5))).toBe(1.5)
+  })
+
+  it('subtract value', () => {
+    expect(format(subtract(1, 1))).toBe(0)
+    expect(format(subtract(0.3, 0.2))).toBe(0.1)
+    expect(format(subtract(0.6, 0.3, 0.2))).toBe(0.1)
+    expect(format(subtract(1, 0.5, 0.4, 0.3, 0.2))).toBe(-0.4)
+  })
+
+  it('multiply value', () => {
+    expect(format(multiply(1, 1))).toBe(1)
+    expect(format(multiply(0.1, 0.2))).toBe(0.02)
+    expect(format(multiply(0.1, 0.2, 0.3))).toBe(0.006)
+    expect(format(multiply(0.1, 0.2, 0.3, 0.4))).toBe(0.0024)
+    expect(format(multiply(0.1, 0.2, 0.3, 0.4, 0.5))).toBe(0.0012)
+  })
+
+  it('divide value', () => {
+    expect(format(divide(1, 1))).toBe(1)
+    expect(format(divide(0.1, 0.2))).toBe(0.5)
+    expect(
+      format(divide(0.1, 0.2, 0.3), {
+        precision: 2,
+      }),
+    ).toBe(1.67)
+  })
+
+  it('distribute value', () => {
+    expect(distribute(1, 1)).toEqual([1])
+    expect(distribute(1, 0)).toEqual([1])
+    expect(distribute(0, 3)).toEqual([0, 0, 0])
+    expect(distribute(10, 3)).toEqual([3.33333334, 3.33333333, 3.33333333])
+    expect(
+      distribute(20, 3, {
+        precision: 4,
+      }),
+    ).toEqual([6.6667, 6.6667, 6.6666])
+    expect(distribute(add(20, 1), 3)).toEqual([7, 7, 7])
+  })
+})

__test__/utils/canUseDom.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ * @description
+ * 判断是否可以操作 DOM。
+ *
+ * 如果可以操作 DOM，则返回 true，否则返回 false。
+ */
+const canUseDom = () => {
+  return !!(
+    typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement
+  )
+}
+export default canUseDom

__test__/utils/createRefElement.tsx

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+
+import type { Slot } from 'vue'
+
+const createRefElement = (slots?: Record<string, Function>) => {
+  const wrapper = mount(
+    defineComponent({
+      setup() {
+        const domRef = ref<HTMLElement>()
+
+        return {
+          domRef,
+        }
+      },
+      render() {
+        return <div ref="domRef">{{ ...slots }}</div>
+      },
+    }),
+  )
+
+  return wrapper
+}
+
+export default createRefElement

__test__/utils/isBrowser.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * @description
+ * 获取当前环境是否为浏览器环境。
+ *
+ * 如果是浏览器环境，则返回 true，否则返回 false。
+ */
+const isBrowser = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+export default isBrowser

__test__/utils/renderHook.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createApp, defineComponent } from 'vue'
+
+import type { App } from 'vue'
+
+export default function renderHook<R = any>(
+  renderFC: () => R,
+): [
+  R,
+  App<Element>,
+  {
+    act?: (fn: () => void) => void
+  },
+] {
+  let result: any
+  let act: ((fn: () => void) => void) | undefined
+  const app = createApp(
+    defineComponent({
+      setup() {
+        result = renderFC()
+
+        act = (fn: () => void) => {
+          fn()
+        }
+
+        return () => {}
+      },
+    }),
+  )
+
+  app.mount(document.createElement('div'))
+
+  return [result, app, { act }]
+}

__test__/utils/sleep.ts

@@ -0,0 +1,17 @@
+/**
+ *
+ * @param timer 等待时间
+ *
+ * @description
+ * 等待一段时间，模拟睡眠。
+ *
+ * @example
+ * await sleep(1000)
+ */
+const sleep = (timer: number) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timer)
+  })
+}
+
+export default sleep

__test__/vue/call.spec.ts

@@ -0,0 +1,25 @@
+import { call } from '../../src/utils/vue/call'
+
+describe('call', () => {
+  it('should be executed once', () => {
+    const fn = vi.fn()
+    call(() => fn())
+
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('should be executed with an argument', () => {
+    const fn = vi.fn()
+    call((a: number) => fn(a), 1)
+
+    expect(fn).toHaveBeenCalledWith(1)
+  })
+
+  it('should be executed with multiple arguments', () => {
+    const fn = vi.fn()
+
+    call((a: number, b: number) => fn(a, b), 1, 2)
+
+    expect(fn).toHaveBeenCalledWith(1, 2)
+  })
+})

__test__/vue/effectDispose.spec.ts

@@ -0,0 +1,7 @@
+import { effectDispose } from '../../src/utils/vue/effectDispose'
+
+describe('effectDispose', () => {
+  it('should return false if getCurrentScope is null', () => {
+    expect(effectDispose(() => {})).toBe(false)
+  })
+})

__test__/vue/renderNode.spec.tsx

@@ -0,0 +1,13 @@
+import { renderNode } from '../../src/utils/vue/renderNode'
+import createRefElement from '../utils/createRefElement'
+
+describe('renderNode', () => {
+  it('should render string', () => {
+    const wrapper = createRefElement({
+      default: renderNode('hello world') as Function,
+    })
+    const text = wrapper.text()
+
+    expect(text).toBe('hello world')
+  })
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.7.1",
+  "version": "4.7.2",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -11,10 +11,11 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "test": "vue-tsc --noEmit && vite build --mode test",
     "dev-build": "vue-tsc --noEmit && vite build --mode development",
     "report": "vite build --mode report",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "husky": {
     "hooks": {
@@ -69,9 +70,11 @@
     "@typescript-eslint/parser": "^6.5.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitest/ui": "1.4.0",
     "@vue-hooks-plus/resolvers": "1.2.4",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "2.4.3",
     "autoprefixer": "^10.4.15",
     "depcheck": "^1.4.5",
     "eslint": "^8.56.0",
@@ -82,6 +85,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.18.1",
+    "happy-dom": "14.3.1",
     "husky": "8.0.3",
     "lint-staged": "^15.1.0",
     "postcss": "^8.4.31",
@@ -103,6 +107,8 @@
     "vite-plugin-mock-dev-server": "1.4.7",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-svg-loader": "^4.0.0",
+    "vite-tsconfig-paths": "4.3.2",
+    "vitest": "1.4.0",
     "vue-tsc": "^1.8.27"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",

src/__ray-template/README.md

@@ -9,6 +9,6 @@
 
 当你需要在做一些定制化操作的时候，可以尝试在这个包里做一些事情。
 
-租后在 `main.ts` 中导入并且调用即可。
+最后在 `main.ts` 中导入并且调用即可。
 
 > 出于一些考虑，并没有做自动化导入调用，所以需要自己手动来。（好吧，其实就是我懒-，-）

src/hooks/web/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-09-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 export * from './useI18n'
 export * from './useVueRouter'
 export * from './useDayjs'

src/hooks/web/useDayjs.ts

@@ -6,7 +6,8 @@
  *
  * @workspace ray-template
  *
- * @remark 今天也是元气满满撸代码的一天
+ * @description
+ * 今天也是元气满满撸代码的一天。
  */
 
 import dayjs from 'dayjs'
@@ -27,7 +28,8 @@ const defaultDayjsFormat = 'YYYY-MM-DD HH:mm:ss'
 
 /**
  *
- * dayjs hook
+ * @description
+ * dayjs hook。
  *
  * 说明:
  *   - locale: 切换 dayjs 语言配置
@@ -37,7 +39,12 @@ export const useDayjs = () => {
    *
    * @param key 当前语言
    *
-   * 手动配置 dayjs 语言（国际化）
+   * @description
+   * 手动配置 dayjs 语言（国际化）。
+   *
+   * @example
+   * locale('en')
+   * locale('zh-cn')
    */
   const locale = (key: LocalKey) => {
     const locale = DAYJS_LOCAL_MAP[key]
@@ -49,12 +56,13 @@ export const useDayjs = () => {
    *
    * @param d 待校验参数
    *
-   * @remark 校验是否为 dayjs 对象
+   * @description
+   * 校验是否为 dayjs 对象。
    *
    * @example
-   * isDayjs('2022-11-11') => false
+   * isDayjs('2022-11-11') // false
-   * isDayjs('1699687245973) => false
+   * isDayjs('1699687245973) // false
-   * isDayjs(dayjs()) => true
+   * isDayjs(dayjs()) // true
    */
   const isDayjs = (d: unknown) => {
     return dayjs.isDayjs(d)
@@ -65,12 +73,13 @@ export const useDayjs = () => {
    * @param date 待格式化参数
    * @param formatOption 格式化配置项
    *
-   * @remark 格式化日期
+   * @description
+   * 格式化日期。
    *
    * @example
-   * dayjs().format() => '2020-04-02T08:02:17-05:00'
+   * dayjs().format() // '2020-04-02T08:02:17-05:00'
-   * dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') => 'YYYYescape 2019-01-25T00:00:00-02:00Z'
+   * dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') // 'YYYYescape 2019-01-25T00:00:00-02:00Z'
-   * dayjs('2019-01-25').format('DD/MM/YYYY') => '25/01/2019'
+   * dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'
    */
   const format = (date: dayjs.ConfigType, formatOption?: FormatOption) => {
     const { format = defaultDayjsFormat } = formatOption ?? {}
@@ -82,9 +91,10 @@ export const useDayjs = () => {
    *
    * @param formatOption 格式化配置项
    *
-   * @remark 获取当前日期的开始和结束时间
+   * @description
+   * 获取当前日期的开始和结束时间。
    *
-   * 会返回当前日期、当前日期的开始时间和结束时间（未格式化与格式化后的）
+   * 会返回当前日期、当前日期的开始时间和结束时间（未格式化与格式化后的）。
    */
   const getStartAndEndOfDay = (formatOption?: FormatOption) => {
     const { format = defaultDayjsFormat } = formatOption ?? {}
@@ -93,6 +103,7 @@ export const useDayjs = () => {
     const endOfDay = today.endOf('day')
     const formatToday = today.format(format)
     const formatStartOfDay = startOfDay.format(format)
+    const formatEndOfDay = endOfDay.format(format)
 
     return {
       today,
@@ -100,6 +111,7 @@ export const useDayjs = () => {
       endOfDay,
       formatToday,
       formatStartOfDay,
+      formatEndOfDay,
     } as const
   }
 
@@ -108,16 +120,17 @@ export const useDayjs = () => {
    * @param date1 待计算日期
    * @param date2 待计算日期
    *
-   * @remark 计算两天日期天数差异
+   * @description
+   * 计算两天日期天数差异。
    *
-   * 返回正数: date2 比 date1 晚
+   * 返回正数: date2 比 date1 晚。
-   * 返回负数: date2 比 date1 早
+   * 返回负数: date2 比 date1 早。
-   * 返回零（0）: date2 等于 date1
+   * 返回零（0）: date2 等于 date1。
    *
    * @example
-   * daysDiff('2022-01-11', '2022-01-12') => 1
+   * daysDiff('2022-01-11', '2022-01-12') // 1
-   * daysDiff('2021-01-11', '2022-01-12') => 366
+   * daysDiff('2021-01-11', '2022-01-12') // 366
-   * daysDiff('2023-01-11', '2022-01-12') => -364
+   * daysDiff('2023-01-11', '2022-01-12') // -364
    */
   const daysDiff = (date1: dayjs.ConfigType, date2: dayjs.ConfigType) => {
     const start = dayjs(date1)
@@ -131,13 +144,14 @@ export const useDayjs = () => {
    * @param date 待比较时间
    * @param range 待比较开始与结束时间
    *
-   * 判断一个时间是否在 start date 与 end date 之间
+   * @description
-   * 如果刚还是等于开始、结束时间，也会返回 false
+   * 判断一个时间是否在 start date 与 end date 之间。
+   * 如果刚还是等于开始、结束时间，也会返回 false。
    *
    * @example
-   * isDateInRange('2023-01-16', { start: '2023-01-15', end: '2023-01-20' }) => true
+   * isDateInRange('2023-01-16', { start: '2023-01-15', end: '2023-01-20' }) // true
-   * isDateInRange('2023-01-15', { start: '2023-01-15', end: '2023-01-20' }) => false
+   * isDateInRange('2023-01-15', { start: '2023-01-15', end: '2023-01-20' }) // false
-   * isDateInRange('2023-01-20', { start: '2023-01-15', end: '2023-01-20' }) => false
+   * isDateInRange('2023-01-20', { start: '2023-01-15', end: '2023-01-20' }) // false
    */
   const isDateInRange = (date: dayjs.ConfigType, range: DateRange): boolean => {
     const { start, end } = range

src/router/README.md

@@ -5,7 +5,7 @@
 > router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。
 
 ```ts
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/dashboard.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'
@@ -6,7 +6,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
 const dashboard: AppRouteRecordRaw = {
   path: '/dashboard',
   name: 'RDashboard',
-  component: () => import('@/views/dashboard/index'),
+  component: () => import('@/views/dashboard'),
   meta: {
     i18nKey: t('menu.Dashboard'),
     icon: 'dashboard',

src/router/modules/demo/axios.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 
 import type { AppRouteRecordRaw } from '@/router/types'
 

src/router/modules/demo/directive.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/doc.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/echart.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/iframe.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 
 import type { AppRouteRecordRaw } from '@/router/types'
 

src/router/modules/demo/mock.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/modal.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/precision.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/qrcode.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/rely.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -4,7 +4,7 @@
  * 所以暂时隐藏该页面
  */
 
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/demo/table.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

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

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/router/modules/error404.ts

@@ -1,4 +1,4 @@
-import { t } from '@/hooks'
+import { t } from '@/hooks/web/useI18n'
 import { LAYOUT } from '@/router/constant'
 
 import type { AppRouteRecordRaw } from '@/router/types'

src/utils/app/index.ts

@@ -1 +1,4 @@
-export * from './prefixCacheKey'
+// export * from './prefixCacheKey'
+import { prefixCacheKey } from './prefixCacheKey'
+
+export { prefixCacheKey }

src/utils/basic.ts

@@ -46,11 +46,7 @@ export const getAppEnvironment = () => {
  * @example
  * const Image = arrayBufferToBase64Image('base64')
  */
-export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
+export const arrayBufferToBase64Image = (data: ArrayBuffer) => {
-  if (!data || data.byteLength) {
-    return null
-  }
-
   const base64 =
     'data:image/png;base64,' +
     window.btoa(
@@ -97,6 +93,8 @@ export const downloadBase64File = (base64: string, fileName: string) => {
  * isValueType<object>({}, 'Object') // true
  * isValueType<number>([], 'Array') // true
  * isValueType<number>([], 'Object') // false
+ * isValueType<undefined>(undefined, 'Undefined') // true
+ * isValueType<null>(null, 'Null') // true
  */
 export const isValueType = <T extends BasicTypes>(
   value: unknown,
@@ -237,16 +235,15 @@ export function omit<T extends object>(
 export function omit<T extends Recordable, K extends keyof T>(
   targetObject: T,
   targetKeys: K | K[],
+  ...rest: K[]
 ) {
   if (!targetObject) {
-    console.warn(
-      `[omit]: The targetObject is expected to be an object, but got ${targetObject}.`,
-    )
-
     return {}
   }
 
-  const keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys]
+  let keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys]
+
+  keys = [...keys, ...rest]
 
   if (!keys.length) {
     return targetObject
@@ -282,12 +279,9 @@ export function pick<T extends object>(
 export function pick<T extends object, K extends keyof T>(
   targetObject: T,
   targetKeys: K | K[],
+  ...rest: K[]
 ) {
   if (!targetObject) {
-    console.warn(
-      `[pick]: The targetObject is expected to be an object, but got ${targetObject}.`,
-    )
-
     return {}
   }
 
@@ -297,7 +291,7 @@ export function pick<T extends object, K extends keyof T>(
     return targetObject
   }
 
-  const result = keys.reduce(
+  const result = [...keys, ...rest].reduce(
     (pre, curr) => {
       if (Reflect.has(targetObject, curr)) {
         pre[curr] = targetObject[curr]
@@ -426,7 +420,7 @@ export const callWithAsyncErrorHandling = async <
  * 如果无法识别，则返回 Unknown。
  *
  * @example
- * detectOperatingSystem() => 'Windows' | 'MacOS' | 'Linux' | 'Android' | 'IOS' | 'Unknown'
+ * detectOperatingSystem() // 'Windows' | 'MacOS' | 'Linux' | 'Android' | 'IOS' | 'Unknown'
  */
 export const detectOperatingSystem = () => {
   const userAgent = navigator.userAgent
@@ -469,20 +463,9 @@ export const detectOperatingSystem = () => {
  * equal('/a', '/a') // true
  */
 export const equalRouterPath = (path1: string, path2: string) => {
-  const path1End = path1.endsWith('/')
+  const p1 = path1.split('?').filter(Boolean)[0]
-  const path2End = path2.endsWith('/')
+  const p2 = path2.split('?').filter(Boolean)[0]
+  const regex = /\/$/
 
-  if (path1End && path2End) {
+  return p1.replace(regex, '') === p2.replace(regex, '')
-    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

@@ -53,15 +53,15 @@ export const printDom = <T extends HTMLElement>(
     ...domToImageOptions,
     beforeCreate: (element) => {
       domToImageOptions?.beforeCreate?.(element)
-      window?.$loadingBar.start()
+      window.$loadingBar?.start()
     },
     created(result, element) {
       domToImageOptions?.created?.(result, element)
-      window?.$loadingBar.finish()
+      window.$loadingBar?.finish()
     },
     createdError(error) {
       domToImageOptions?.createdError?.(error)
-      window?.$loadingBar.error()
+      window.$loadingBar?.error()
     },
   })
 

src/utils/element.ts

@@ -14,7 +14,7 @@ import type { CSSProperties } from 'vue'
  * @param classNames 所需添加类名
  *
  * @description
- * 为目标元素添加类名
+ * 为目标元素添加类名。
  *
  * @example
  * // targetDom 当前 class: a-class b-class
@@ -55,7 +55,7 @@ export const setClass = (
  * @param className 所需删除类名
  *
  * @description
- * 为目标元素删除类名
+ * 为目标元素删除类名。
  *
  * @example
  * // targetDom 当前 class: a-class b-class
@@ -103,7 +103,7 @@ export const removeClass = (
  * @param className 查询元素是否含有此类名
  *
  * @description
- * 查询元素是否含有此类名
+ * 查询元素是否含有此类名。
  *
  * @example
  * hasClass(targetDom, 'matchClassName') // Ref<true> | Ref<false>
@@ -153,10 +153,10 @@ export const hasClass = (
  * @returns 添加前缀后的样式
  *
  * @description
- * 为样式添加浏览器前缀，返回一个对象
+ * 为样式添加浏览器前缀，返回一个对象。
  *
  * @example
- * autoPrefixStyle('transform') => {webkitTransform: 'transform', mozTransform: 'transform', msTransform: 'transform', oTransform: 'transform'}
+ * autoPrefixStyle('transform') // {webkitTransform: 'transform', mozTransform: 'transform', msTransform: 'transform', oTransform: 'transform'}
  */
 export const autoPrefixStyle = (style: string) => {
   const prefixes = ['webkit', 'moz', 'ms', 'o']
@@ -168,6 +168,8 @@ export const autoPrefixStyle = (style: string) => {
     ] = style
   })
 
+  styleWithPrefixes[style] = style
+
   return styleWithPrefixes
 }
 
@@ -177,7 +179,7 @@ export const autoPrefixStyle = (style: string) => {
  * @param styles 所需绑定样式(如果为字符串, 则必须以分号结尾每个行内样式描述)
  *
  * @description
- * 为目标元素添加样式
+ * 为目标元素添加样式。
  *
  * @example
  * style of string
@@ -262,9 +264,9 @@ export const setStyle = <Style extends CSSProperties>(
  * @param styles 所需卸载样式
  *
  * @description
- * 为目标元素卸载样式
+ * 为目标元素卸载样式。
  *
- * 当你发现不能正常的移除某些样式的时候，应该考虑是否是样式表兼容问题
+ * 当你发现不能正常的移除某些样式的时候，应该考虑是否是样式表兼容问题。
  *
  * @example
  * removeStyle(['zIndex', 'z-index'])
@@ -298,45 +300,43 @@ export const removeStyle = (
  * @param alpha 透明度
  *
  * @description
- * 将任意颜色值转为 rgba，如果本身为 rgba, rgb 或者其它非法颜色值则直接返回
+ * 将任意颜色值转为 rgba，如果本身为 rgba 或者其它非法颜色值则直接返回。
  *
  * @example
  * 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) // rgba(18, 54, 50, 0.8)
  * 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('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
+  if (color.includes('rgba')) {
-  const rgbPattern = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i
-  const rgbaPattern =
-    /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/i
-
-  let result: string
-
-  if (hexPattern.test(color)) {
-    const hex = color.substring(1)
-    const rgb = [
-      parseInt(hex.substring(0, 2), 16),
-      parseInt(hex.substring(2, 4), 16),
-      parseInt(hex.substring(4, 6), 16),
-    ]
-
-    result = 'rgb(' + rgb.join(', ') + ')'
-  } else if (rgbPattern.test(color)) {
-    return color
-  } else if (rgbaPattern.test(color)) {
-    return color
-  } else {
     return color
   }
 
-  if (result && !result.startsWith('rgba')) {
+  if (color.includes('rgb')) {
-    result = result.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
+    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
   }
 
-  return result
+  if (color.includes('#')) {
+    const hex = color.replace('#', '')
+
+    switch (hex.length) {
+      case 3:
+        return `rgba(${parseInt(hex[0] + hex[0], 16)}, ${parseInt(hex[1] + hex[1], 16)}, ${parseInt(hex[2] + hex[2], 16)}, ${alpha})`
+
+      case 6:
+        return `rgba(${parseInt(hex.slice(0, 2), 16)}, ${parseInt(hex.slice(2, 4), 16)}, ${parseInt(hex.slice(4, 6), 16)}, ${alpha})`
+
+      case 8:
+        return `rgba(${parseInt(hex.slice(0, 2), 16)}, ${parseInt(hex.slice(2, 4), 16)}, ${parseInt(hex.slice(4, 6), 16)}, ${(parseInt(hex.slice(6, 8), 16) / 255).toFixed(2)})`
+
+      default:
+        return color
+    }
+  }
+
+  return color
 }
 
 /**
@@ -347,7 +347,7 @@ export const colorToRgba = (color: string, alpha = 1) => {
  * @description
  * 使用 querySelectorAll 作为检索方法。
  *
- * 如果希望按照 attribute 匹配, 仅需要 'attr:xxx'传递参数即可
+ * 如果希望按照 attribute 匹配, 仅需要 'attr:xxx'传递参数即可。
  *
  * @example
  * // class:
@@ -378,6 +378,10 @@ export const queryElements = <T extends Element = Element>(
   try {
     const elements = Array.from(document.querySelectorAll<T>(queryParam))
 
+    if (!elements.length && defaultElement) {
+      return [defaultElement]
+    }
+
     return elements
   } catch (error) {
     console.error(
@@ -395,7 +399,7 @@ export const queryElements = <T extends Element = Element>(
  * @param unit 自动填充 css 尺寸单位
  *
  * @description
- * 自动补全尺寸
+ * 自动补全尺寸。
  */
 export const completeSize = (size: number | string, unit = 'px') => {
   if (typeof size === 'number') {

src/utils/index.ts

@@ -1,7 +1,98 @@
-export * from './basic'
+// export * from './basic'
-export * from './cache'
+// export * from './cache'
-export * from './dom'
+// export * from './dom'
-export * from './element'
+// export * from './element'
-export * from './precision'
+// export * from './precision'
-export * from './vue'
+// export * from './vue'
-export * from './app'
+// export * from './app'
+
+import {
+  getAppEnvironment,
+  arrayBufferToBase64Image,
+  downloadBase64File,
+  isValueType,
+  uuid,
+  downloadAnyFile,
+  omit,
+  pick,
+  isAsyncFunction,
+  isPromise,
+  callWithErrorHandling,
+  callWithAsyncErrorHandling,
+  detectOperatingSystem,
+  equalRouterPath,
+} from './basic'
+import { hasStorage, getStorage, setStorage, removeStorage } from './cache'
+import { printDom } from './dom'
+import {
+  setClass,
+  removeClass,
+  hasClass,
+  autoPrefixStyle,
+  setStyle,
+  removeStyle,
+  colorToRgba,
+  queryElements,
+  completeSize,
+} from './element'
+import {
+  isCurrency,
+  format,
+  add,
+  subtract,
+  multiply,
+  divide,
+  distribute,
+} from './precision'
+import {
+  call,
+  unrefElement,
+  renderNode,
+  effectDispose,
+  watchEffectWithTarget,
+} from './vue'
+import { prefixCacheKey } from './app'
+
+export {
+  getAppEnvironment,
+  arrayBufferToBase64Image,
+  downloadBase64File,
+  isValueType,
+  uuid,
+  downloadAnyFile,
+  omit,
+  pick,
+  isAsyncFunction,
+  isPromise,
+  callWithErrorHandling,
+  callWithAsyncErrorHandling,
+  detectOperatingSystem,
+  equalRouterPath,
+  hasStorage,
+  getStorage,
+  setStorage,
+  removeStorage,
+  printDom,
+  setClass,
+  removeClass,
+  hasClass,
+  autoPrefixStyle,
+  setStyle,
+  removeStyle,
+  colorToRgba,
+  queryElements,
+  completeSize,
+  isCurrency,
+  format,
+  add,
+  subtract,
+  multiply,
+  divide,
+  distribute,
+  call,
+  unrefElement,
+  renderNode,
+  effectDispose,
+  watchEffectWithTarget,
+  prefixCacheKey,
+}

src/utils/precision.ts

@@ -38,8 +38,12 @@ export type CurrencyArguments = string | number | currency
 
 export type OriginalValueType = 'string' | 'number'
 
+export interface CurrencyOptions extends Options {
+  type?: OriginalValueType
+}
+
 // currency.js 默认配置
-const defaultOptions: Partial<Options> = {
+const defaultOptions: Partial<CurrencyOptions> = {
   precision: 8,
   decimal: '.',
 }
@@ -130,13 +134,10 @@ export const isCurrency = (value: unknown) => {
  * format(0.1) // 0.1
  * format(0.1, { symbol: '¥' }) // ¥0.1
  */
-export const format = (
+export const format = (value: CurrencyArguments, options?: CurrencyOptions) => {
-  value: CurrencyArguments,
-  options?: Options,
-  type: OriginalValueType = 'number',
-) => {
   const assignOptions = Object.assign({}, defaultOptions, options)
   const v = currency(value, assignOptions)
+  const { type = 'number' } = assignOptions
 
   return type === 'number' ? v.value : v.toString()
 }
@@ -249,7 +250,11 @@ export const divide = (...args: CurrencyArguments[]) => {
  * distribute(0, 1) // [0]
  * distribute(0, 3) // [0, 0, 0]
  */
-export const distribute = (value: CurrencyArguments, length: number) => {
+export const distribute = (
+  value: CurrencyArguments,
+  length: number,
+  options?: CurrencyOptions,
+) => {
   if (length <= 1) {
     return [value ? value : 0]
   } else {
@@ -258,10 +263,12 @@ export const distribute = (value: CurrencyArguments, length: number) => {
     }
   }
 
-  const result = currency(value, defaultOptions)
+  const assignOptions = Object.assign({}, defaultOptions, options)
+
+  const result = currency(value, assignOptions)
     .distribute(length)
     .map((curr) => {
-      return format(curr)
+      return format(curr, assignOptions)
     })
 
   return result

src/utils/vue/effectDispose.ts

@@ -18,7 +18,7 @@ import type { AnyFC } from '@/types'
  * @param fc effect 作用域卸载时需执行函数
  *
  * @description
- * 返回 true 表示获取到 effect 作用域并且卸载；false 表示未存在 effect 作用域
+ * 返回 true 表示获取到 effect 作用域并且卸载；false 表示未存在 effect 作用域。
  *
  * @example
  * const watchStop = watch(() => {}, () => {})

src/utils/vue/unrefElement.ts

@@ -25,8 +25,8 @@ import type { ComponentPublicInstance } from 'vue'
  * const refDom = ref<HTMLElement | null>(null)
  * const computedDom = computed(() => refDom.value)
  *
- * unrefElement(refDom) => div
+ * unrefElement(refDom) // div
- * unrefElement(computedDom) => div
+ * unrefElement(computedDom) // div
  */
 function unrefElement<T extends TargetType>(
   target: BasicTarget<T>,

src/utils/vue/watchEffectWithTarget.ts

@@ -19,8 +19,9 @@ import type { AnyFC } from '@/types'
  * @param fc 副作用函数
  * @param watchOptions watchEffect 配置项
  *
- * 该方法使用 watchEffect 实现副作用函数的执行
+ * @description
- * 并且能够在 effect 作用域卸载时，自动停止监听
+ * 该方法使用 watchEffect 实现副作用函数的执行，
+ * 并且能够在 effect 作用域卸载时，自动停止监听。
  *
  * @example
  * const ref = ref(0)

tsconfig.json

@@ -15,7 +15,6 @@
     "skipLibCheck": true,
     "jsxImportSource": "vue",
     "baseUrl": "./",
-    "rootDir": "./",
     "paths": {
       "@": ["src"],
       "@/*": ["src/*"],
@@ -28,8 +27,7 @@
       "@mock": ["mock/*"]
     },
     "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": ["./src/types/app.d.ts", "./src/types/global.d.ts"],
+    "types": ["vite/client", "vitest/globals"],
-    "types": ["vite/client"],
     "ignoreDeprecations": "5.0"
   },
   "include": [
@@ -41,6 +39,7 @@
     "vite-env.d.ts",
     "./unplugin/**/*",
     "src/**/*",
-    "mock/**/*"
+    "mock/**/*",
+    "__test__/**/*"
   ]
 }

vite.config.ts

@@ -68,10 +68,9 @@ export default defineConfig(({ mode }) => {
         output: {
           manualChunks: (id) => {
             const isUtils = () => id.includes('src/utils/')
-            const isHooks = () =>
+            const isHooks = () => id.includes('src/hooks/')
-              id.includes('src/hooks/template') || id.includes('src/hooks/web')
             const isNodeModules = () => id.includes('node_modules')
-            const index = id.includes('pnpm') ? 1 : 0
+            const index = id.includes('pnpm') ? 1 : 0 // 兼容 pnpm, yarn, npm 包管理器差异
 
             if (isUtils()) {
               return 'utils'
@@ -89,6 +88,9 @@ export default defineConfig(({ mode }) => {
                 [index].toString()
             }
           },
+          assetFileNames: '[ext]/[name]-[hash][extname]',
+          chunkFileNames: 'js/[name]-[hash].js',
+          entryFileNames: 'js/[name]-[hash].js',
         },
       },
     },

vite.custom.config.ts

@@ -60,7 +60,6 @@ const config: AppConfigExport = {
    * 预设:
    *   - ./src/styles/mixins.scss
    *   - ./src/styles/setting.scss
-   *   - ./src/styles/theme.scss
    *
    * 如果需要删除或者修改, 需要同步修改目录下的 css 文件
    */
@@ -141,28 +140,17 @@ const config: AppConfigExport = {
   /**
    *
    * 预设别名
-   * - `@`: `src` 根目录
+   * - @: src 根目录
-   * - `@api`: `src/axios/api` 根目录
+   * - @api: src/axios/api 根目录
-   * - `@images`: `src/assets/images` 根目录
+   * - @images: src/assets/images 根目录
+   * - @mock: mock 根目录
    */
-  alias: [
+  alias: {
-    {
+    '@': path.resolve(__dirname, './src'),
-      find: '@',
+    '@api': path.resolve(__dirname, './src/axios/api'),
-      replacement: path.resolve(__dirname, './src'),
+    '@images': path.resolve(__dirname, './src/assets/images'),
+    '@mock': path.resolve(__dirname, './mock'),
   },
-    {
-      find: '@api',
-      replacement: path.resolve(__dirname, './src/axios/api'),
-    },
-    {
-      find: '@images',
-      replacement: path.resolve(__dirname, './src/assets/images'),
-    },
-    {
-      find: '@mock',
-      replacement: path.resolve(__dirname, './mock'),
-    },
-  ],
 }
 
 export default config

vitest.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, mergeConfig, configDefaults } from 'vitest/config'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import viteConfig from './vite.config'
+
+export default defineConfig((configEnv) =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      plugins: [tsconfigPaths()],
+      test: {
+        include: ['**/__test__/**/*'],
+        exclude: [
+          ...configDefaults.exclude,
+          '**/src/**',
+          '**/__test__/utils/**/*',
+        ],
+        environment: 'happy-dom',
+        globals: true,
+        poolOptions: {
+          threads: {
+            maxThreads: 1,
+            minThreads: 0,
+          },
+        },
+      },
+    }),
+  ),
+)