version: v4.4.4发布

.vscode/settings.json

@@ -20,11 +20,14 @@
   "alias-skip.rootpath": "package.json",
   "cSpell.words": [
     "Clickoutside",
+    "commitmsg",
+    "EDITMSG",
     "macarons",
     "menutag",
     "ndata",
     "persistedstate",
     "Popselect",
+    "precommit",
     "siderbar",
     "WUJIE",
     "zlevel"

CHANGELOG.md

@@ -1,5 +1,36 @@
 # CHANGE LOG
 
+## 4.4.4
+
+升级 `vite` 版本至 `5.0.8`。提升构建速度，并且消除了烦人的 `terser` 警告（未配置该项都会被警告，确实很烦）。
+
+现在能自动的根据 `main` 分支更新构建发布了。
+
+新增 `pre-commit` 检查。现在在提交代码前，会自动检查代码规范，如果不符合规范则会阻止提交。
+
+## Feats
+
+- 更新 `vite` 版本至 `5.0.8`
+- `tsconfig` 文件 `compilerOptions.moduleResolution` 选项由 `Node` 改为 `bundler`
+- `utils` 包相关改动
+  - 统一导出、导入行为，现在统一使用 `import { xxx } from '@/utils'` 导入
+  - 剔除 `basic 包 print` 方法，现在使用 `utils/dom` 包中的 `usePrint` 替代
+  - `utils/dom` 包相关细节
+    - 新增 `printDom` 方法，取代直接调用 `print-js` 方法调用打印。该方法会先将 dom 转换为 `base64` 再调用 `print-js` 方法，避免一些诡异问题。`RTable` 组件打印功能已经由该方法重写。并且可以配置 `printDom` 方法的所有参数，细节请查看 `PrintDomOptions` 类型
+  - `utils/element` 包中一些方法，改为 `effectDispose` 方法注销 `effect`
+- `husky` 相关
+  - 新增 `commit-msg`, `common.sh` 文件，用于检查 `commit` 信息
+  - 新增工作流程，自动构建发布
+- `alias` 别名相关
+  - 移除 `@use-utils` 别名
+  - `@use-images` 更改为 `@images`
+  - `@use-api` 更改为 `@api`
+- `hooks` 包相关
+  - 新增 `usePrint` 方法，允许 ref dom 直接调用打印
+  - 新增 `useDomToImage` 方法，用于直接输出 dom 为 `base64`, `blob` 等
+- `components` 包相关
+  - `RTable` 打印时，如果未手动配置 `documentTitle` 属性，则会自动获取 `title`，如果 `title` 属性为 `string` 类型，则会默认使用该值作为 `documentTitle` 属性。但是如果未获取到 `title` 并且未配置 `documentTitle` 属性，则会默认的将 `documentTitle` 赋值为 `''`，也就是说默认输出浏览器标题
+
 ## 4.4.3
 
 更新 `vue` 版本至 `3.3.10`。

cfg.ts

@@ -142,9 +142,8 @@ const config: AppConfigExport = {
    *
    * 预设别名
    * - `@`: `src` 根目录
-   * - `@use-utils`: `src/utils` 根目录
+   * - `@api`: `src/axios/api` 根目录
-   * - `@use-api`: `src/axios/api` 根目录
+   * - `@images`: `src/assets/images` 根目录
-   * - `@use-images`: `src/assets/images` 根目录
    */
   alias: [
     {
@@ -152,15 +151,11 @@ const config: AppConfigExport = {
       replacement: path.resolve(__dirname, './src'),
     },
     {
-      find: '@use-utils',
+      find: '@api',
-      replacement: path.resolve(__dirname, './src/utils'),
-    },
-    {
-      find: '@use-api',
       replacement: path.resolve(__dirname, './src/axios/api'),
     },
     {
-      find: '@use-images',
+      find: '@images',
       replacement: path.resolve(__dirname, './src/assets/images'),
     },
     {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.4.3",
+  "version": "4.4.4",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -16,11 +16,19 @@
     "report": "vue-tsc --noEmit && vite build --mode report",
     "prepare": "husky install"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
   "lint-staged": {
-    "src/**/*.{vue,jsx,ts,tsx,json}": [
+    "*.{js,json}": [
-      "prettier --write",
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
       "eslint src",
-      "git add"
+      "prettier --parser=typescript --write"
     ]
   },
   "dependencies": {
@@ -31,6 +39,7 @@
     "crypto-js": "^4.1.1",
     "currency.js": "^2.0.4",
     "dayjs": "^1.11.10",
+    "dom-to-image": "2.6.0",
     "echarts": "^5.4.3",
     "interactjs": "1.10.21",
     "lodash-es": "^4.17.21",
@@ -53,6 +62,7 @@
     "@interactjs/types": "1.10.21",
     "@intlify/unplugin-vue-i18n": "^1.5.0",
     "@types/crypto-js": "^4.1.1",
+    "@types/dom-to-image": "2.6.7",
     "@types/lodash-es": "^4.17.11",
     "@types/mockjs": "1.0.7",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
@@ -72,7 +82,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.18.1",
-    "husky": "^8.0.3",
+    "husky": "8.0.3",
     "lint-staged": "^15.1.0",
     "postcss": "^8.4.31",
     "postcss-px-to-viewport-8-plugin": "1.2.2",
@@ -83,7 +93,7 @@
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^5.0.4",
+    "vite": "^5.0.8",
     "vite-plugin-cdn2": "0.15.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ dependencies:
   dayjs:
     specifier: ^1.11.10
     version: 1.11.10
+  dom-to-image:
+    specifier: 2.6.0
+    version: 2.6.0
   echarts:
     specifier: ^5.4.3
     version: 5.4.3
@@ -88,6 +91,9 @@ devDependencies:
   '@types/crypto-js':
     specifier: ^4.1.1
     version: 4.1.1
+  '@types/dom-to-image':
+    specifier: 2.6.7
+    version: 2.6.7
   '@types/lodash-es':
     specifier: ^4.17.11
     version: 4.17.11
@@ -102,10 +108,10 @@ devDependencies:
     version: 6.5.0(eslint@8.52.0)(typescript@5.2.2)
   '@vitejs/plugin-vue':
     specifier: ^4.4.1
-    version: 4.4.1(vite@5.0.4)(vue@3.3.10)
+    version: 4.4.1(vite@5.0.8)(vue@3.3.10)
   '@vitejs/plugin-vue-jsx':
     specifier: ^3.0.2
-    version: 3.0.2(vite@5.0.4)(vue@3.3.10)
+    version: 3.0.2(vite@5.0.8)(vue@3.3.10)
   '@vue-hooks-plus/resolvers':
     specifier: 1.2.4
     version: 1.2.4(vue-hooks-plus@1.8.5)
@@ -146,7 +152,7 @@ devDependencies:
     specifier: ^9.18.1
     version: 9.18.1(eslint@8.52.0)
   husky:
-    specifier: ^8.0.3
+    specifier: 8.0.3
     version: 8.0.3
   lint-staged:
     specifier: ^15.1.0
@@ -179,32 +185,32 @@ devDependencies:
     specifier: ^0.25.2
     version: 0.25.2(vue@3.3.10)
   vite:
-    specifier: ^5.0.4
+    specifier: ^5.0.8
-    version: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+    version: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
   vite-plugin-cdn2:
     specifier: 0.15.2
     version: 0.15.2
   vite-plugin-compression:
     specifier: ^0.5.1
-    version: 0.5.1(vite@5.0.4)
+    version: 0.5.1(vite@5.0.8)
   vite-plugin-ejs:
     specifier: ^1.7.0
-    version: 1.7.0(vite@5.0.4)
+    version: 1.7.0(vite@5.0.8)
   vite-plugin-eslint:
     specifier: 1.8.1
-    version: 1.8.1(eslint@8.52.0)(vite@5.0.4)
+    version: 1.8.1(eslint@8.52.0)(vite@5.0.8)
   vite-plugin-imp:
     specifier: ^2.4.0
-    version: 2.4.0(vite@5.0.4)
+    version: 2.4.0(vite@5.0.8)
   vite-plugin-inspect:
     specifier: ^0.7.38
-    version: 0.7.38(vite@5.0.4)
+    version: 0.7.38(vite@5.0.8)
   vite-plugin-mock-dev-server:
     specifier: 1.3.4
-    version: 1.3.4(vite@5.0.4)
+    version: 1.3.4(vite@5.0.8)
   vite-plugin-svg-icons:
     specifier: ^2.0.1
-    version: 2.0.1(vite@5.0.4)
+    version: 2.0.1(vite@5.0.8)
   vite-svg-loader:
     specifier: ^4.0.0
     version: 4.0.0
@@ -1614,6 +1620,10 @@ packages:
     resolution: {integrity: sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==}
     dev: true
 
+  /@types/dom-to-image@2.6.7:
+    resolution: {integrity: sha512-me5VbCv+fcXozblWwG13krNBvuEOm6kA5xoa4RrjDJCNFOZSWR3/QLtOXimBHk1Fisq69Gx3JtOoXtg1N1tijg==}
+    dev: true
+
   /@types/eslint@8.44.2:
     resolution: {integrity: sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==}
     dependencies:
@@ -1954,7 +1964,7 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-vue-jsx@3.0.2(vite@5.0.4)(vue@3.3.10):
+  /@vitejs/plugin-vue-jsx@3.0.2(vite@5.0.8)(vue@3.3.10):
     resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -1964,20 +1974,20 @@ packages:
       '@babel/core': 7.23.2
       '@babel/plugin-transform-typescript': 7.22.15(@babel/core@7.23.2)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.2)
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
       vue: 3.3.10(typescript@5.2.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@4.4.1(vite@5.0.4)(vue@3.3.10):
+  /@vitejs/plugin-vue@4.4.1(vite@5.0.8)(vue@3.3.10):
     resolution: {integrity: sha512-HCQG8VDFDM7YDAdcj5QI5DvUi+r6xvo9LgvYdk7LSkUNwdpempdB5horkMSZsbdey9Ywsf5aaU8kEPw9M5kREA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
       vue: 3.3.10(typescript@5.2.2)
     dev: true
 
@@ -3512,6 +3522,10 @@ packages:
       entities: 4.5.0
     dev: true
 
+  /dom-to-image@2.6.0:
+    resolution: {integrity: sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==}
+    dev: false
+
   /domelementtype@1.3.1:
     resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
     dev: true
@@ -7619,7 +7633,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-compression@0.5.1(vite@5.0.4):
+  /vite-plugin-compression@0.5.1(vite@5.0.8):
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -7627,21 +7641,21 @@ packages:
       chalk: 4.1.2
       debug: 4.3.4
       fs-extra: 10.1.0
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-ejs@1.7.0(vite@5.0.4):
+  /vite-plugin-ejs@1.7.0(vite@5.0.8):
     resolution: {integrity: sha512-JNP3zQDC4mSbfoJ3G73s5mmZITD8NGjUmLkq4swxyahy/W0xuokK9U9IJGXw7KCggq6UucT6hJ0p+tQrNtqTZw==}
     peerDependencies:
       vite: '>=5.0.0'
     dependencies:
       ejs: 3.1.9
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
     dev: true
 
-  /vite-plugin-eslint@1.8.1(eslint@8.52.0)(vite@5.0.4):
+  /vite-plugin-eslint@1.8.1(eslint@8.52.0)(vite@5.0.8):
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:
       eslint: '>=7'
@@ -7651,10 +7665,10 @@ packages:
       '@types/eslint': 8.44.2
       eslint: 8.52.0
       rollup: 2.79.1
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
     dev: true
 
-  /vite-plugin-imp@2.4.0(vite@5.0.4):
+  /vite-plugin-imp@2.4.0(vite@5.0.8):
     resolution: {integrity: sha512-L/6/nvOw+MyNh4UxAlCZHsmKd5MitmHamqqAWB15sbUgVIEz/OQ8jpKr6kkQU0eA/AIe8fkCVbQBlP81ajrqWg==}
     peerDependencies:
       vite: '>= 2.0.0-beta.5'
@@ -7666,12 +7680,12 @@ packages:
       chalk: 4.1.2
       param-case: 3.0.4
       pascal-case: 3.1.2
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-inspect@0.7.38(vite@5.0.4):
+  /vite-plugin-inspect@0.7.38(vite@5.0.8):
     resolution: {integrity: sha512-+p6pJVtBOLGv+RBrcKAFUdx+euizg0bjL35HhPyM0MjtKlqoC5V9xkCmO9Ctc8JrTyXqODbHqiLWJKumu5zJ7g==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -7689,13 +7703,13 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-mock-dev-server@1.3.4(vite@5.0.4):
+  /vite-plugin-mock-dev-server@1.3.4(vite@5.0.8):
     resolution: {integrity: sha512-50biXarRPdKYxR/q9an4vHMh2cbwFlEWHfLJdXg6gpS63CMMrCo9XQWYIkdytZNSEs/5AwykGB5Xo0ORMMttgQ==}
     engines: {node: ^14.18.0 || >=16}
     peerDependencies:
@@ -7716,7 +7730,7 @@ packages:
       mime-types: 2.1.35
       path-to-regexp: 6.2.1
       picocolors: 1.0.0
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
       ws: 8.13.0
     transitivePeerDependencies:
       - bufferutil
@@ -7724,7 +7738,7 @@ packages:
       - utf-8-validate
     dev: true
 
-  /vite-plugin-svg-icons@2.0.1(vite@5.0.4):
+  /vite-plugin-svg-icons@2.0.1(vite@5.0.8):
     resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -7737,7 +7751,7 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 5.0.4(@types/node@20.4.7)(sass@1.69.5)
+      vite: 5.0.8(@types/node@20.4.7)(sass@1.69.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7749,8 +7763,8 @@ packages:
       svgo: 3.0.2
     dev: true
 
-  /vite@5.0.4(@types/node@20.4.7)(sass@1.69.5):
+  /vite@5.0.8(@types/node@20.4.7)(sass@1.69.5):
-    resolution: {integrity: sha512-RzAr8LSvM8lmhB4tQ5OPcBhpjOZRZjuxv9zO5UcxeoY2bd3kP3Ticd40Qma9/BqZ8JS96Ll/jeBX9u+LJZrhVg==}
+    resolution: {integrity: sha512-jYMALd8aeqR3yS9xlHd0OzQJndS9fH5ylVgWdB+pxTwxLKdO1pgC5Dlb398BUxpfaBxa4M9oT7j1g503Gaj5IQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -7779,7 +7793,7 @@ packages:
     dependencies:
       '@types/node': 20.4.7
       esbuild: 0.19.7
-      postcss: 8.4.31
+      postcss: 8.4.32
       rollup: 4.5.2
       sass: 1.69.5
     optionalDependencies:

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

@@ -23,7 +23,7 @@ import { NAvatar, NSpace } from 'naive-ui'
 
 import { avatarProps, spaceProps } from 'naive-ui'
 import { APP_CATCH_KEY } from '@/app-config/appConfig'
-import { getStorage } from '@/utils/cache'
+import { getStorage } from '@/utils'
 
 import type { PropType } from 'vue'
 import type { AvatarProps, SpaceProps } from 'naive-ui'

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

@@ -11,9 +11,14 @@
 
 import './index.scss'
 
-import { getStorage } from '@/utils/cache'
 import { get } from 'lodash-es'
-import { addClass, removeClass, addStyle, colorToRgba } from '@/utils/element'
+import {
+  addClass,
+  removeClass,
+  addStyle,
+  colorToRgba,
+  getStorage,
+} from '@/utils'
 import { useSettingGetters } from '@/store'
 
 import type { SettingState } from '@/store/modules/setting/type'

src/axios/helper/interceptor.ts

@@ -21,7 +21,7 @@
  */
 
 import RequestCanceler from '@/axios/helper/RequestCanceler'
-import { getAppEnvironment } from '@/utils/basic'
+import { getAppEnvironment } from '@/utils'
 
 import type {
   RequestInterceptorConfig,

src/axios/inject/request/provider.ts

@@ -23,7 +23,7 @@
 import { axiosCanceler } from '@/axios/helper/interceptor'
 import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
 import { APP_CATCH_KEY } from '@/app-config/appConfig'
-import { getStorage } from '@/utils/cache'
+import { getStorage } from '@/utils'
 
 import type {
   RequestInterceptorConfig,

src/components/RChart/src/index.tsx

@@ -41,14 +41,11 @@ import { NCard } from 'naive-ui'
 
 import props from './props'
 import { throttle } from 'lodash-es'
-import { completeSize } from '@/utils/element'
+import { completeSize, downloadBase64File, call, renderNode } from '@/utils'
-import { call } from '@/utils/vue'
 import { setupChartTheme } from './helper'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useResizeObserver } from '@vueuse/core'
 import { RMoreDropdown } from '@/components'
-import { renderNode } from '@use-utils/vue'
-import { downloadBase64File } from '@use-utils/basic'
 import { useSettingGetters } from '@/store'
 
 import type { WatchStopHandle } from 'vue'

src/components/RCollapseGrid/src/index.tsx

@@ -24,7 +24,7 @@ import './index.scss'
 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import { RIcon } from '@/components'
 
-import { call } from '@/utils/vue'
+import { call } from '@/utils'
 import props from './props'
 
 export default defineComponent({

src/components/RIcon/src/index.tsx

@@ -11,8 +11,7 @@
 
 import './index.scss'
 
-import { call } from '@/utils/vue'
+import { completeSize, call } from '@/utils'
-import { completeSize } from '@/utils/element'
 import props from './props'
 
 export default defineComponent({

src/components/RIframe/src/index.tsx

@@ -13,8 +13,7 @@ import './index.scss'
 
 import { NSpin } from 'naive-ui'
 
-import { completeSize } from '@use-utils/element'
+import { call, completeSize } from '@/utils'
-import { call } from '@/utils/vue'
 import props from './props'
 import { useEventListener } from '@vueuse/core'
 

src/components/RModal/src/Modal.tsx

@@ -14,9 +14,8 @@ import './index.scss'
 import { NModal } from 'naive-ui'
 
 import props from './props'
-import { completeSize } from '@/utils/element'
+import { completeSize, uuid } from '@/utils'
 import { useWindowSize } from '@vueuse/core'
-import { uuid } from '@/utils/basic'
 import { setupDraggable } from './utils'
 
 import type interact from 'interactjs'

src/components/RMoreDropdown/src/index.tsx

@@ -13,7 +13,7 @@ import { NDropdown } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import props from './props'
-import { renderNode } from '@use-utils/vue'
+import { renderNode } from '@/utils'
 
 export default defineComponent({
   name: 'RMoreDropdown',

src/components/RQRCode/src/index.tsx

@@ -16,8 +16,7 @@ import { RIcon } from '@/components'
 
 import props from './props'
 import { AwesomeQR } from 'awesome-qr'
-import { isValueType, downloadAnyFile } from '@/utils/basic'
+import { isValueType, downloadAnyFile, call } from '@/utils'
-import { call } from '@/utils/vue'
 
 import type {
   QRCodeRenderResponse,

src/components/RTable/src/Table.tsx

@@ -18,8 +18,7 @@ import C from './components/C'
 import Print from './components/Print'
 
 import props from './props'
-import { call, renderNode } from '@/utils/vue'
+import { call, renderNode, uuid } from '@/utils'
-import { uuid } from '@/utils/basic'
 import config from './config'
 
 import type { DropdownOption, DataTableInst } from 'naive-ui'
@@ -32,8 +31,8 @@ export default defineComponent({
   setup(props, ctx) {
     const { expose } = ctx
 
-    const rTableInst = ref<DataTableInst | null>(null)
+    const rTableInst = ref<DataTableInst>()
-    const wrapperRef = ref<HTMLElement | null>(null)
+    const wrapperRef = ref<HTMLElement>()
 
     const uuidWrapper = uuid(16) // wrapper id
     const uuidTable = uuid(16) // table id
@@ -176,6 +175,7 @@ export default defineComponent({
       uuidTable,
       uuidWrapper,
       wrapperRef,
+      tableRef: rTableInst,
     })
     expose({
       rTableInst,

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

@@ -23,7 +23,7 @@ import { RIcon } from '@/components'
 
 import config from '../config'
 import props from '../props'
-import { call } from '@/utils/vue'
+import { call } from '@/utils'
 
 import type { TreeOption, TreeDropInfo } from 'naive-ui'
 import type { C } from '../type'

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

@@ -14,7 +14,7 @@ import { RIcon } from '@/components'
 
 import config from '../config'
 import props from '../props'
-import { print } from '@/utils/basic'
+import { printDom } from '@/utils/dom'
 
 import type { TableProvider } from '../type'
 
@@ -22,24 +22,29 @@ export default defineComponent({
   name: 'TablePrint',
   props,
   setup(props) {
-    const { uuidTable } = inject<TableProvider>(
+    const { tableRef } = inject<TableProvider>(
       config.tableKey,
       {} as TableProvider,
     )
 
     const printTableClick = () => {
-      const { printTableOptions } = props
+      const {
-      const { type = 'html', printOptions = {} } = printTableOptions ?? {}
+        printTableOptions: { printOptions = {}, domToImageOptions } = {},
+        title,
+      } = props
 
-      const options = Object.assign(printOptions, {
+      if (
-        printable: uuidTable,
+        printOptions.documentTitle === '' ||
-        type: type,
+        printOptions.documentTitle === void 0 ||
-        documentTitle: printOptions.documentTitle
+        printOptions.documentTitle === null
-          ? printOptions.documentTitle
+      ) {
-          : '表格',
+        printOptions.documentTitle = typeof title === 'string' ? title : ''
+      }
+
+      printDom(tableRef, {
+        printOptions,
+        domToImageOptions,
       })
-
-      print(document.getElementById(uuidTable), options)
     }
 
     return {

src/components/RTable/src/components/Size.tsx

@@ -12,7 +12,7 @@
 import { NPopover, NPopselect } from 'naive-ui'
 import { RIcon } from '@/components'
 
-import { call } from '@/utils/vue'
+import { call } from '@/utils'
 import props from '../props'
 import config from '../config'
 

src/components/RTable/src/type.ts

@@ -7,9 +7,9 @@ import type {
   DataTableColumn,
   DataTableBaseColumn,
 } from 'naive-ui'
-import type { VNode, VNodeChild } from 'vue'
+import type { VNode } from 'vue'
-import type PrintConfiguration from 'print-js'
 import type { Recordable } from '@/types/modules/helper'
+import type { PrintDomOptions } from '@/utils'
 
 export type TableActionIcon = string | (() => VNode)
 
@@ -23,15 +23,13 @@ export interface DownloadTableOptions {
   fileName?: string
 }
 
-export interface PrintTableOptions {
+export interface PrintTableOptions extends PrintDomOptions {}
-  printOptions?: Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
-  type?: PrintConfiguration.PrintTypes
-}
 
 export interface TableProvider {
   uuidWrapper: string
   uuidTable: string
-  wrapperRef: Ref<HTMLElement | null>
+  wrapperRef: Ref<HTMLElement | undefined>
+  tableRef: Ref<HTMLElement | undefined>
 }
 
 export interface C extends DataTableBaseColumn {

src/directives/modules/disabled/index.ts

@@ -14,7 +14,7 @@
  * directive name: disabled
  */
 
-import { addClass, removeClass } from '@/utils/element'
+import { addClass, removeClass } from '@/utils'
 
 import type { CustomDirectiveFC } from '@/directives/type'
 

src/hooks/template/useMaximize.ts

@@ -11,7 +11,7 @@
 
 import { setVariable, getVariableToRefs } from '@/global-variable'
 import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
-import { unrefElement } from '@/utils/vue'
+import { unrefElement } from '@/utils'
 import { useElementFullscreen } from '../web'
 
 import type { UseElementFullscreenOptions } from '../web'

src/hooks/web/index.ts

@@ -14,3 +14,5 @@ export * from './useVueRouter'
 export * from './useDayjs'
 export * from './useDevice'
 export * from './useElementFullscreen'
+export * from './useDomToImage'
+export * from './usePrint'

src/hooks/web/useDevice.ts

@@ -15,7 +15,7 @@
  */
 
 import { useWindowSize } from '@vueuse/core'
-import { watchEffectWithTarget } from '@/utils/vue'
+import { watchEffectWithTarget } from '@/utils'
 
 /**
  *

src/hooks/web/useDomToImage.ts

@@ -0,0 +1,132 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-12-14
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import domToImage from 'dom-to-image'
+import { unrefElement } from '@/utils'
+
+import type { Options as ReDomToImageOptions } from 'dom-to-image'
+import type { BasicTarget, TargetType } from '@/types/modules/vue'
+
+export type ImageType = keyof typeof domToImageMethods
+
+export interface UseDomToImageOptions extends ReDomToImageOptions {
+  /**
+   *
+   *
+   * 指定图片类型，允许传递 imageType 参数，用于指定图片类型
+   *
+   * @default jpeg
+   */
+  imageType: ImageType
+  /**
+   *
+   *
+   * 在 dom 转换为图片之前执行
+   *
+   * @param element current dom
+   */
+  beforeCreate?: <T extends TargetType = Element>(
+    element: T | null | undefined,
+  ) => void
+  /**
+   *
+   * @param element current dom
+   * @param result dom to image result
+   *
+   * 在 dom 转换为图片之后执行
+   */
+  created?: <T extends TargetType = Element>(
+    element: T,
+    result: string | Blob | Uint8ClampedArray | undefined,
+  ) => void
+  /**
+   *
+   * @param element current dom
+   * @param error dom to image error
+   *
+   * 在 dom 转换为图片失败时执行
+   */
+  createdError?: <T extends TargetType = Element>(
+    element: T,
+    error: Error,
+  ) => void
+  /**
+   *
+   * @param element current dom
+   *
+   * 无论 dom 转换为图片成功或失败，都会执行
+   */
+  finally?: <T extends TargetType = Element>(element: T) => void
+}
+
+const domToImageMethods = {
+  svg: domToImage.toSvg,
+  png: domToImage.toPng,
+  jpeg: domToImage.toJpeg,
+  blob: domToImage.toBlob,
+  pixelData: domToImage.toPixelData,
+}
+
+/**
+ *
+ * @param target ref dom
+ * @param options dom-to-image options
+ *
+ * 使用 dom-to-image 将 dom 转换为图片，基于 dom-to-image v2.6.0
+ * 拓展了 imageType 参数，用于指定图片类型
+ *
+ * create 方法支持在执行时传递 imageType 参数，用于指定图片类型。并且优先级大于 options.imageType
+ * 当然，你也可以不传递 imageType 参数，此时会使用 options.imageType
+ * 如果都未传递，则默认使用 jpeg
+ *
+ * @example
+ * const refDom = ref<HTMLElement>()
+ * const { create, stop } = useDomToImage(refDom, {
+ *   beforeCreate: (element) => { ... },
+ *   created: (element, result) => { ... },
+ *   createdError: (element, error) => { ... },
+ * })
+ */
+export const useDomToImage = <T extends HTMLElement>(
+  target: BasicTarget<T>,
+  options?: UseDomToImageOptions,
+) => {
+  const { beforeCreate, created, createdError } = options ?? {}
+
+  const run = (imageType: UseDomToImageOptions['imageType'] = 'jpeg') => {
+    const element = unrefElement(target)
+
+    beforeCreate?.(element)
+
+    if (element) {
+      const type = imageType ?? options?.imageType
+      const matchFc = domToImageMethods[type] || domToImageMethods['jpeg']
+
+      return matchFc(element, options)
+        .then((res) => {
+          created?.(element, res)
+
+          return Promise.resolve(res)
+        })
+        .catch((error) => {
+          createdError?.(element, error as Error)
+
+          return Promise.reject(error as Error)
+        })
+    }
+  }
+
+  return {
+    create: run,
+  }
+}
+
+export type UseDomToImageReturnType = ReturnType<typeof useDomToImage>

src/hooks/web/useElementFullscreen.ts

@@ -9,9 +9,8 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { unrefElement, effectDispose } from '@/utils/vue'
+import { unrefElement, effectDispose, isValueType } from '@/utils'
 import { useWindowSize } from '@vueuse/core'
-import { isValueType } from '@/utils/basic'
 
 import type { BasicTarget } from '@/types/modules/vue'
 

src/hooks/web/usePrint.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import print from 'print-js'
+import { unrefElement } from '@/utils'
+
+import type { BasicTarget } from '@/types/modules/vue'
+
+export interface UsePrintOptions
+  extends Omit<print.Configuration, 'printable'> {}
+
+export type UsePrintTarget<T = any> =
+  | BasicTarget
+  | string
+  | Blob
+  | Uint8ClampedArray
+  | T[]
+
+/**
+ *
+ * @param target ref dom
+ * @param options print-js options
+ *
+ * 拓展 print-js 的 usePrint 方法，允许 ref Dom 直接调用打印，其余的不变
+ *
+ * @example
+ * const refDom = ref<HTMLElement>()
+ *
+ * const { print } = usePrint(refDom, {})
+ * @example
+ * const { print } = usePrint('#id', {})
+ * const { print } = usePrint('base64', {})
+ * const { print } = usePrint('https://xxx.com/xxx.png', {})
+ * const { print } = usePrint(new Blob(), {})
+ */
+export const usePrint = (target: UsePrintTarget, options?: UsePrintOptions) => {
+  const run = () => {
+    const element = unrefElement(target as BasicTarget)
+
+    if (element) {
+      print({
+        ...options,
+        printable: element,
+      })
+    }
+  }
+
+  return {
+    print: run,
+  }
+}
+
+export type UsePrintReturnType = ReturnType<typeof usePrint>

src/layout/components/MenuTag/index.tsx

@@ -45,9 +45,7 @@ import CloseRight from '@/icons/close_right.svg?component'
 import CloseLeft from '@/icons/close_left.svg?component'
 
 import { useMenuGetters, useMenuActions } from '@/store'
-import { uuid } from '@/utils/basic'
+import { hasClass, uuid, queryElements } from '@/utils'
-import { hasClass } from '@/utils/element'
-import { queryElements } from '@use-utils/element'
 import { useMaximize, useSpinning } from '@/hooks/template'
 import { useSiderBar } from '@/hooks/template'
 import { throttle } from 'lodash-es'

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

@@ -23,7 +23,7 @@ import './index.scss'
 import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
 import { RIcon } from '@/components'
 
-import { queryElements, addClass, removeClass } from '@/utils/element'
+import { queryElements, addClass, removeClass } from '@/utils'
 import { debounce } from 'lodash-es'
 import { useMenuGetters, useMenuActions } from '@/store'
 import { validMenuItemShow } from '@/router/helper/routerCopilot'

src/locales/helper.ts

@@ -18,7 +18,7 @@
 
 import { set } from 'lodash-es'
 import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
-import { getStorage } from '@use-utils/cache'
+import { getStorage } from '@/utils'
 import { SYSTEM_DEFAULT_LOCAL } from '@/app-config/localConfig'
 import { APP_CATCH_KEY } from '@/app-config/appConfig'
 

src/router/helper/permission.ts

@@ -20,12 +20,11 @@
  * 当然, 你可以指定一个超级管理员角色, 默认获取全部路由
  */
 
-import { getStorage } from '@/utils/cache'
 import { APP_CATCH_KEY } from '@/app-config/appConfig'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
 import { WHITE_ROUTES } from '@/app-config/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
-import { isValueType } from '@/utils/basic'
+import { isValueType, getStorage } from '@/utils'
 import { useAppRoot } from '@/hooks/template'
 
 import type { Router, RouteLocationNormalized } from 'vue-router'

src/router/helper/routerCopilot.ts

@@ -12,8 +12,7 @@
 import { permissionRouter } from './permission'
 import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
 import { useVueRouter } from '@/hooks/web'
-import { setStorage } from '@/utils/cache'
+import { getAppEnvironment, setStorage } from '@/utils'
-import { getAppEnvironment } from '@/utils/basic'
 import { useSigningGetters } from '@/store'
 import { useAppRoot } from '@/hooks/template'
 
@@ -91,15 +90,15 @@ export const validMenuItemShow = (option: AppMenuOption) => {
  */
 export const setupRouterLoadingBar = (router: Router) => {
   router.beforeEach(() => {
-    window?.$loadingBar?.start()
+    window?.$loadingBar.start()
   })
 
   router.afterEach(() => {
-    window?.$loadingBar?.finish()
+    window?.$loadingBar.finish()
   })
 
   router.onError(() => {
-    window?.$loadingBar?.error()
+    window?.$loadingBar.error()
   })
 }
 

src/store/modules/menu/helper.ts

@@ -13,8 +13,7 @@
 
 import { APP_MENU_CONFIG } from '@/app-config/appConfig'
 import { RIcon } from '@/components'
-import { isValueType } from '@/utils/basic'
+import { getStorage, isValueType } from '@/utils'
-import { getStorage } from '@/utils/cache'
 import { useAppRoot } from '@/hooks/template'
 
 import type {

src/store/modules/menu/index.ts

@@ -25,7 +25,7 @@
 
 import { NEllipsis } from 'naive-ui'
 
-import { setStorage } from '@/utils/cache'
+import { setStorage } from '@/utils'
 import { validRole, validMenuItemShow } from '@/router/helper/routerCopilot'
 import {
   parseAndFindMatchingNodes,

src/store/modules/setting/index.ts

@@ -1,7 +1,6 @@
 import { getAppDefaultLanguage } from '@/locales/helper'
-import { setStorage } from '@use-utils/cache'
 import { set } from 'lodash-es'
-import { colorToRgba } from '@/utils/element'
+import { colorToRgba, setStorage } from '@/utils'
 import { useI18n } from '@/hooks/web'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useDayjs } from '@/hooks/web'

src/store/modules/signing/index.ts

@@ -20,7 +20,7 @@
  */
 
 import { isEmpty } from 'lodash-es'
-import { removeStorage } from '@/utils/cache'
+import { removeStorage } from '@/utils'
 
 import type {
   SigningForm,

src/styles/base.scss

@@ -1,6 +1,6 @@
-@import "@/styles/animate.scss";
+@import '@/styles/animate.scss';
-@import "@/styles/root.scss";
+@import '@/styles/root.scss';
-@import "@/styles/naive.scss";
+@import '@/styles/naive.scss';
 
 body,
 h1,
@@ -77,20 +77,21 @@ body {
     Inter,
     -apple-system,
     BlinkMacSystemFont,
-    "Segoe UI",
+    'Segoe UI',
     Roboto,
     Oxygen,
     Ubuntu,
     Cantarell,
-    "Fira Sans",
+    'Fira Sans',
-    "Droid Sans",
+    'Droid Sans',
-    "Helvetica Neue",
+    'Helvetica Neue',
     sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+// 配合 v-disabled 指令使用
 body .ray-template__directive--disabled {
   opacity: 0.3 !important;
   pointer-events: none !important;

src/utils/basic.ts

@@ -1,14 +1,10 @@
-import printJs from 'print-js'
-import { unrefElement } from '@/utils/vue'
-import { watchEffectWithTarget } from '@/utils/vue'
-
 import type {
   ValidateValueType,
   DownloadAnyFileDataType,
   BasicTypes,
   AnyFC,
 } from '@/types/modules/utils'
-import type { BasicTarget, TargetValue } from '@/types/modules/vue'
+import type { Recordable } from '@/types/modules/helper'
 
 /**
  *
@@ -201,56 +197,32 @@ export const downloadAnyFile = (
   })
 }
 
-/**
- *
- * @param target Ref Dom、Dom、Dom id
- * @param options print 配置项
- *
- * 基于 print-js 封装，允许 Ref 注册 Dom 直接调用打印
- *
- * @example
- * print(refDom, { printJs.Configuration })
- * print(Dom id, { printJs.Configuration })
- * print(Dom, { printJs.Configuration })
- */
-export function print<T extends BasicTarget<HTMLElement>>(
-  target: T,
-  options?: printJs.Configuration,
-) {
-  const element = computed(() => unrefElement(target))
-  const { printable, ...args } = options ?? {}
-
-  const $print = <T extends HTMLElement>(element: TargetValue<T>) => {
-    printJs({
-      ...args,
-      printable: element,
-    })
-  }
-
-  const watcher = watch(element, (ndata) => $print(ndata), {
-    immediate: true,
-  })
-
-  watchEffectWithTarget(watcher)
-}
-
 /**
  *
  * @param targetObject 对象
  * @param targetKeys 待删除的 key
  *
  * 删除对象中的指定 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']) => { c: 3 }
  */
-export const omit = <T extends Record<string, unknown>, K extends keyof T>(
+export const omit = <T extends Recordable, K extends keyof T>(
   targetObject: T,
   targetKeys: K | K[],
 ): Omit<T, K> => {
+  if (!targetObject) {
+    return {} as Omit<T, K>
+  }
+
   const keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys]
 
+  if (!keys.length) {
+    return targetObject
+  }
+
   keys.forEach((key) => {
     delete targetObject[key]
   })
@@ -258,6 +230,41 @@ export const omit = <T extends Record<string, unknown>, K extends keyof T>(
   return targetObject
 }
 
+/**
+ *
+ * @param targetObject target object
+ * @param targetKeys target keys
+ *
+ * 从对象中提取指定的 key
+ * 如果传递的 targetObject 为 null 或者 undefined，则返回空对象
+ *
+ * @example
+ * 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 }, []) => {}
+ */
+export const pick = <T extends Recordable, K extends keyof T>(
+  targetObject: T,
+  targetKeys: K | K[],
+): Pick<T, K> => {
+  if (!targetObject) {
+    return {} as Pick<T, K>
+  }
+
+  const keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys]
+  const result = {} as Pick<T, K>
+
+  if (!keys.length) {
+    return result
+  }
+
+  keys.forEach((key) => {
+    result[key] = targetObject[key]
+  })
+
+  return result
+}
+
 /**
  *
  * @param value 待判断的值
@@ -325,7 +332,7 @@ export const callWithAsyncErrorHandling = async <
   fc: T,
   errorCallback: (error: E) => void,
   args?: Parameters<T>,
-) => {
+): Promise<ReturnType<T> | undefined> => {
   try {
     if (!isPromise(fc)) {
       return Promise.resolve(callWithErrorHandling(fc, errorCallback, args))

src/utils/dom.ts

@@ -0,0 +1,73 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-12-14
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { omit } from './basic'
+import { useDomToImage, usePrint } from '@/hooks/web'
+
+import type { UsePrintOptions, UseDomToImageOptions } from '@/hooks/web'
+import type { BasicTarget } from '@/types/modules/vue'
+
+export interface PrintDomOptions {
+  printOptions?: Omit<UsePrintOptions, 'printable' | 'type'>
+  domToImageOptions?: Omit<UseDomToImageOptions, 'imageType'>
+}
+
+/**
+ *
+ * @param target ref dom
+ * @param options print-dom options, dom-to-image options
+ *
+ * 基于 useDomToImage 和 print-js 封装，允许 Ref 注册 Dom 直接调用打印
+ * 避免直接打印 dom 时出现一些诡异的问题
+ *
+ * 该方法会强制剔除 printOptions 中的 printable 和 type 属性，即使忽略了 ts 的类型检查
+ * 并且在绘制图片的时候，强制使用 jpeg 格式，即使是指定了其他格式
+ *
+ * 支持 useDomToImage 方法的所有配置项，除了 imageType
+ * 支持 print-js 的所有配置项，除了 printable 和 type
+ *
+ * @example
+ * const refDom = ref<HTMLElement>()
+ *
+ * printDom(refDom, {
+ *  printOptions: { title: 'Demo Print', ... },
+ *  domToImageOptions: { ... }
+ * })
+ */
+export const printDom = <T extends HTMLElement>(
+  target: BasicTarget<T>,
+  options?: PrintDomOptions,
+) => {
+  const { domToImageOptions, printOptions } = options ?? {}
+
+  const { create } = useDomToImage(
+    target,
+    domToImageOptions as UseDomToImageOptions,
+  )
+
+  window?.$loadingBar.start()
+
+  create('jpeg')
+    ?.then((res) => {
+      const { print } = usePrint(res, {
+        type: 'image',
+        ...omit(printOptions as UsePrintOptions, ['type']),
+      })
+
+      print()
+    })
+    .catch(() => {
+      window?.$loadingBar.error()
+    })
+    .finally(() => {
+      window?.$loadingBar.finish()
+    })
+}

src/utils/element.ts

@@ -1,14 +1,11 @@
-import { isValueType } from '@/utils/basic'
 import { APP_REGEX } from '@/app-config/regexConfig'
-import { unrefElement } from '@/utils/vue'
+import { effectDispose, unrefElement, isValueType } from '@/utils'
-import { watchEffectWithTarget } from '@/utils/vue'
-import { useCurrentElement } from '@vueuse/core'
 
 import type {
   PartialCSSStyleDeclaration,
   ElementSelector,
 } from '@/types/modules/utils'
-import type { BasicTarget, TargetValue } from '@/types/modules/vue'
+import type { BasicTarget } from '@/types/modules/vue'
 
 /**
  *
@@ -25,11 +22,9 @@ export const addClass = (
   target: BasicTarget<Element | HTMLElement | SVGAElement>,
   className: string,
 ) => {
-  const targetElement = computed(() => unrefElement(target))
+  const update = () => {
+    const element = unrefElement(target)
 
-  const update = (
-    element: TargetValue<Element | HTMLElement | SVGAElement>,
-  ) => {
     if (element) {
       const classes = className.trim().split(' ')
 
@@ -41,11 +36,11 @@ export const addClass = (
     }
   }
 
-  const watcher = watch(targetElement, (ndata) => update(ndata), {
+  const watcher = watch(() => unrefElement(target), update, {
     immediate: true,
   })
 
-  watchEffectWithTarget(watcher)
+  effectDispose(watcher)
 }
 
 /**
@@ -64,11 +59,9 @@ export const removeClass = (
   target: BasicTarget<Element | HTMLElement | SVGAElement>,
   className: string | 'removeAllClass',
 ) => {
-  const targetElement = computed(() => unrefElement(target))
+  const update = () => {
+    const element = unrefElement(target)
 
-  const update = (
-    element: TargetValue<Element | HTMLElement | SVGAElement>,
-  ) => {
     if (element) {
       if (className === 'removeAllClass') {
         const classList = element.classList
@@ -86,11 +79,11 @@ export const removeClass = (
     }
   }
 
-  const watcher = watch(targetElement, (ndata) => update(ndata), {
+  const watcher = watch(() => unrefElement(target), update, {
     immediate: true,
   })
 
-  watchEffectWithTarget(watcher)
+  effectDispose(watcher)
 }
 
 /**
@@ -104,10 +97,11 @@ export const removeClass = (
  * hasClass(targetDom, 'matchClassName') => Ref<true> | Ref<false>
  */
 export const hasClass = (target: BasicTarget<Element>, className: string) => {
-  const targetElement = computed(() => unrefElement(target))
   const hasClassRef = ref(false)
 
-  const update = <E extends TargetValue<Element>>(element: E) => {
+  const update = () => {
+    const element = unrefElement(target)
+
     if (!element) {
       hasClassRef.value = false
     } else {
@@ -122,11 +116,11 @@ export const hasClass = (target: BasicTarget<Element>, className: string) => {
     }
   }
 
-  const watcher = watch(targetElement, (ndata) => update(ndata), {
+  const watcher = watch(() => unrefElement(target), update, {
     immediate: true,
   })
 
-  watchEffectWithTarget(watcher)
+  effectDispose(watcher)
 
   return hasClassRef
 }
@@ -157,10 +151,11 @@ export const addStyle = (
   target: BasicTarget<HTMLElement | SVGAElement>,
   styles: PartialCSSStyleDeclaration | string,
 ) => {
-  const targetElement = computed(() => unrefElement(target))
   let styleObj: PartialCSSStyleDeclaration
 
-  const update = (element: TargetValue<HTMLElement | SVGAElement>) => {
+  const update = () => {
+    const element = unrefElement(target)
+
     if (!element) {
       return
     }
@@ -188,11 +183,11 @@ export const addStyle = (
     })
   }
 
-  const watcher = watch(targetElement, (ndata) => update(ndata), {
+  const watcher = watch(() => unrefElement(target), update, {
     immediate: true,
   })
 
-  watchEffectWithTarget(watcher)
+  effectDispose(watcher)
 }
 
 /**
@@ -209,9 +204,9 @@ export const removeStyle = (
   target: BasicTarget<HTMLElement | SVGAElement>,
   styles: ((keyof CSSStyleDeclaration & string) | string)[],
 ) => {
-  const targetElement = computed(() => unrefElement(target))
+  const update = () => {
+    const element = unrefElement(target)
 
-  const update = (element: TargetValue<HTMLElement | SVGAElement>) => {
     if (!element) {
       return
     }
@@ -221,11 +216,11 @@ export const removeStyle = (
     })
   }
 
-  const watcher = watch(targetElement, (ndata) => update(ndata), {
+  const watcher = watch(() => unrefElement(target), update, {
     immediate: true,
   })
 
-  watchEffectWithTarget(watcher)
+  effectDispose(watcher)
 }
 
 /**

src/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './basic'
+export * from './cache'
+export * from './dom'
+export * from './element'
+export * from './precision'
+export * from './xlsx'
+export * from './vue'

src/utils/precision.ts

@@ -29,7 +29,7 @@
 
 import currency from 'currency.js'
 import { cloneDeep } from 'lodash-es'
-import { isValueType } from '@/utils/basic'
+import { isValueType } from '@/utils'
 
 import type { Options } from 'currency.js'
 import type { AnyFC } from '@/types/modules/utils'

src/utils/vue/renderNode.ts

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { isValueType } from '@/utils/basic'
+import { isValueType } from '@/utils'
 
 import type { VNode, Slot } from 'vue'
 

src/views/demo/precision/index.tsx

@@ -11,14 +11,7 @@
 
 import { NLayout, NCard, NDynamicTags, NSpace, NInputNumber } from 'naive-ui'
 
-import {
+import { add, subtract, multiply, divide, distribute, format } from '@/utils'
-  add,
-  subtract,
-  multiply,
-  divide,
-  distribute,
-  format,
-} from '@use-utils/precision'
 
 const CalculatePrecision = defineComponent({
   name: 'CalculatePrecision',

src/views/login/components/Signing/index.tsx

@@ -1,6 +1,6 @@
 import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
 
-import { setStorage } from '@/utils/cache'
+import { setStorage } from '@/utils'
 import { useI18n } from '@/hooks/web'
 import { APP_CATCH_KEY } from '@/app-config/appConfig'
 import { setVariable, getVariableToRefs } from '@/global-variable'

src/vite-env.d.ts

@@ -9,3 +9,44 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+/**
+ *
+ * 由于 vite-plugin-eslint 库有点落后，导致 vite 高版本不能正确的识别 cjs 模块
+ * 所以这里手动定义
+ *
+ * 已经向该库提交了相关的 PR，等待作者合并
+ * @see https://github.com/gxmari007/vite-plugin-eslint/pull/87
+ *
+ * 并且该问题也在其他用户中出现
+ * @see https://github.com/gxmari007/vite-plugin-eslint/issues/86
+ */
+declare module 'vite-plugin-eslint' {
+  import { Plugin } from 'vite'
+  import { ESLint } from 'eslint'
+
+  /** Plugin options, extending from ESlint options */
+  interface Options extends ESLint.Options {
+    /** Path to ESLint instance that will be used for linting */
+    eslintPath?: string
+    /** Check all matching files on project startup */
+    lintOnStart?: boolean
+    /** A single file, or array of files, to include when linting */
+    include?: string | string[]
+    /** A single file, or array of files, to exclude when linting */
+    exclude?: string | string[]
+    /** Custom error formatter or the name of a built-in formatter */
+    formatter?: string | ESLint.Formatter['format']
+    /** The waring found will be printed */
+    emitWarning?: boolean
+    /** The errors found will be printed */
+    emitError?: boolean
+    /** Will cause the module build to fail if there are any warnings, based on emitWarning */
+    failOnWarning?: boolean
+    /** Will cause the module build to fail if there are any errors, based on emitError */
+    failOnError?: boolean
+  }
+
+  const content: (rawOptions?: Options) => Plugin
+  export default content
+}

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
@@ -17,12 +17,10 @@
     "paths": {
       "@": ["src"],
       "@/*": ["src/*"],
-      "@use-utils": ["src/utils"],
+      "@api": ["src/api"],
-      "@use-utils/*": ["src/utils/*"],
+      "@api/*": ["src/api/*"],
-      "@use-api": ["src/api"],
+      "@images": ["src/assets/images"],
-      "@use-api/*": ["src/api/*"],
+      "@images/*": ["src/assets/images"],
-      "@use-images": ["src/assets/images"],
-      "@use-images/*": ["src/assets/images"],
       "@use-micro/*": ["src/micro/*"],
       "@mock/*": ["mock/*"],
       "@mock": ["mock/*"]