diff --git a/.vscode/settings.json b/.vscode/settings.json index 133d1347..65764d0e 100644 --- a/.vscode/settings.json +++ b/.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" diff --git a/CHANGELOG.md b/CHANGELOG.md index 25130593..d1dc61cb 100644 --- a/CHANGELOG.md +++ b/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`。 diff --git a/cfg.ts b/cfg.ts index 6e18a501..35ddd233 100644 --- a/cfg.ts +++ b/cfg.ts @@ -142,9 +142,8 @@ const config: AppConfigExport = { * * 预设别名 * - `@`: `src` 根目录 - * - `@use-utils`: `src/utils` 根目录 - * - `@use-api`: `src/axios/api` 根目录 - * - `@use-images`: `src/assets/images` 根目录 + * - `@api`: `src/axios/api` 根目录 + * - `@images`: `src/assets/images` 根目录 */ alias: [ { @@ -152,15 +151,11 @@ const config: AppConfigExport = { replacement: path.resolve(__dirname, './src'), }, { - find: '@use-utils', - replacement: path.resolve(__dirname, './src/utils'), - }, - { - find: '@use-api', + find: '@api', replacement: path.resolve(__dirname, './src/axios/api'), }, { - find: '@use-images', + find: '@images', replacement: path.resolve(__dirname, './src/assets/images'), }, { diff --git a/package.json b/package.json index 55412dea..13c669c9 100755 --- a/package.json +++ b/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}": [ - "prettier --write", + "*.{js,json}": [ + "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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 187c6154..1ea7bbd8 100644 --- a/pnpm-lock.yaml +++ b/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 - version: 5.0.4(@types/node@20.4.7)(sass@1.69.5) + specifier: ^5.0.8 + 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): - resolution: {integrity: sha512-RzAr8LSvM8lmhB4tQ5OPcBhpjOZRZjuxv9zO5UcxeoY2bd3kP3Ticd40Qma9/BqZ8JS96Ll/jeBX9u+LJZrhVg==} + /vite@5.0.8(@types/node@20.4.7)(sass@1.69.5): + 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: diff --git a/src/app-components/app/AppAvatar/index.tsx b/src/app-components/app/AppAvatar/index.tsx index 98e52a40..75843752 100644 --- a/src/app-components/app/AppAvatar/index.tsx +++ b/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' diff --git a/src/app-components/provider/AppStyleProvider/index.tsx b/src/app-components/provider/AppStyleProvider/index.tsx index f6341a96..5379d392 100644 --- a/src/app-components/provider/AppStyleProvider/index.tsx +++ b/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' diff --git a/src/axios/helper/interceptor.ts b/src/axios/helper/interceptor.ts index 4630c527..2b9e0f17 100644 --- a/src/axios/helper/interceptor.ts +++ b/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, diff --git a/src/axios/inject/request/provider.ts b/src/axios/inject/request/provider.ts index 449af2c5..9decae3a 100644 --- a/src/axios/inject/request/provider.ts +++ b/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, diff --git a/src/components/RChart/src/index.tsx b/src/components/RChart/src/index.tsx index fb3054da..30b06bf4 100644 --- a/src/components/RChart/src/index.tsx +++ b/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 { call } from '@/utils/vue' +import { completeSize, downloadBase64File, call, renderNode } from '@/utils' 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' diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx index eec92e09..9c4babe1 100644 --- a/src/components/RCollapseGrid/src/index.tsx +++ b/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({ diff --git a/src/components/RIcon/src/index.tsx b/src/components/RIcon/src/index.tsx index d82b3c61..a4ef236f 100644 --- a/src/components/RIcon/src/index.tsx +++ b/src/components/RIcon/src/index.tsx @@ -11,8 +11,7 @@ import './index.scss' -import { call } from '@/utils/vue' -import { completeSize } from '@/utils/element' +import { completeSize, call } from '@/utils' import props from './props' export default defineComponent({ diff --git a/src/components/RIframe/src/index.tsx b/src/components/RIframe/src/index.tsx index a268ece6..8d6c2583 100644 --- a/src/components/RIframe/src/index.tsx +++ b/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 } from '@/utils/vue' +import { call, completeSize } from '@/utils' import props from './props' import { useEventListener } from '@vueuse/core' diff --git a/src/components/RModal/src/Modal.tsx b/src/components/RModal/src/Modal.tsx index f5e3053c..ccec2433 100644 --- a/src/components/RModal/src/Modal.tsx +++ b/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' diff --git a/src/components/RMoreDropdown/src/index.tsx b/src/components/RMoreDropdown/src/index.tsx index 5f7b972a..58c3e69f 100644 --- a/src/components/RMoreDropdown/src/index.tsx +++ b/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', diff --git a/src/components/RQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx index 4023b6cd..fcc7fcd8 100644 --- a/src/components/RQRCode/src/index.tsx +++ b/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 { call } from '@/utils/vue' +import { isValueType, downloadAnyFile, call } from '@/utils' import type { QRCodeRenderResponse, diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 75f36ea4..4fa32509 100644 --- a/src/components/RTable/src/Table.tsx +++ b/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 { uuid } from '@/utils/basic' +import { call, renderNode, uuid } from '@/utils' 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(null) - const wrapperRef = ref(null) + const rTableInst = ref() + const wrapperRef = ref() 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, diff --git a/src/components/RTable/src/components/C.tsx b/src/components/RTable/src/components/C.tsx index 0f808896..411f56e4 100644 --- a/src/components/RTable/src/components/C.tsx +++ b/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' diff --git a/src/components/RTable/src/components/Print.tsx b/src/components/RTable/src/components/Print.tsx index c7d0f5a0..a4b893b9 100644 --- a/src/components/RTable/src/components/Print.tsx +++ b/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( + const { tableRef } = inject( config.tableKey, {} as TableProvider, ) const printTableClick = () => { - const { printTableOptions } = props - const { type = 'html', printOptions = {} } = printTableOptions ?? {} + const { + printTableOptions: { printOptions = {}, domToImageOptions } = {}, + title, + } = props - const options = Object.assign(printOptions, { - printable: uuidTable, - type: type, - documentTitle: printOptions.documentTitle - ? printOptions.documentTitle - : '表格', + if ( + printOptions.documentTitle === '' || + printOptions.documentTitle === void 0 || + printOptions.documentTitle === null + ) { + printOptions.documentTitle = typeof title === 'string' ? title : '' + } + + printDom(tableRef, { + printOptions, + domToImageOptions, }) - - print(document.getElementById(uuidTable), options) } return { diff --git a/src/components/RTable/src/components/Size.tsx b/src/components/RTable/src/components/Size.tsx index 76688ccd..e5eb820f 100644 --- a/src/components/RTable/src/components/Size.tsx +++ b/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' diff --git a/src/components/RTable/src/type.ts b/src/components/RTable/src/type.ts index 6acb9298..6c290f93 100644 --- a/src/components/RTable/src/type.ts +++ b/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 PrintConfiguration from 'print-js' +import type { VNode } from 'vue' 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 { - printOptions?: Omit - type?: PrintConfiguration.PrintTypes -} +export interface PrintTableOptions extends PrintDomOptions {} export interface TableProvider { uuidWrapper: string uuidTable: string - wrapperRef: Ref + wrapperRef: Ref + tableRef: Ref } export interface C extends DataTableBaseColumn { diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts index 68a6599a..f5e9ba2a 100644 --- a/src/directives/modules/disabled/index.ts +++ b/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' diff --git a/src/hooks/template/useMaximize.ts b/src/hooks/template/useMaximize.ts index de150857..3ab8688e 100644 --- a/src/hooks/template/useMaximize.ts +++ b/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' diff --git a/src/hooks/web/index.ts b/src/hooks/web/index.ts index cac56b0c..086843fb 100644 --- a/src/hooks/web/index.ts +++ b/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' diff --git a/src/hooks/web/useDevice.ts b/src/hooks/web/useDevice.ts index 597baed8..905c8bbd 100644 --- a/src/hooks/web/useDevice.ts +++ b/src/hooks/web/useDevice.ts @@ -15,7 +15,7 @@ */ import { useWindowSize } from '@vueuse/core' -import { watchEffectWithTarget } from '@/utils/vue' +import { watchEffectWithTarget } from '@/utils' /** * diff --git a/src/hooks/web/useDomToImage.ts b/src/hooks/web/useDomToImage.ts new file mode 100644 index 00000000..d68ae6fc --- /dev/null +++ b/src/hooks/web/useDomToImage.ts @@ -0,0 +1,132 @@ +/** + * + * @author 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?: ( + element: T | null | undefined, + ) => void + /** + * + * @param element current dom + * @param result dom to image result + * + * 在 dom 转换为图片之后执行 + */ + created?: ( + element: T, + result: string | Blob | Uint8ClampedArray | undefined, + ) => void + /** + * + * @param element current dom + * @param error dom to image error + * + * 在 dom 转换为图片失败时执行 + */ + createdError?: ( + element: T, + error: Error, + ) => void + /** + * + * @param element current dom + * + * 无论 dom 转换为图片成功或失败，都会执行 + */ + finally?: (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() + * const { create, stop } = useDomToImage(refDom, { + * beforeCreate: (element) => { ... }, + * created: (element, result) => { ... }, + * createdError: (element, error) => { ... }, + * }) + */ +export const useDomToImage = ( + target: BasicTarget, + 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 diff --git a/src/hooks/web/useElementFullscreen.ts b/src/hooks/web/useElementFullscreen.ts index ac19ed5b..03b54b81 100644 --- a/src/hooks/web/useElementFullscreen.ts +++ b/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' diff --git a/src/hooks/web/usePrint.ts b/src/hooks/web/usePrint.ts new file mode 100644 index 00000000..423d9e62 --- /dev/null +++ b/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 {} + +export type UsePrintTarget = + | BasicTarget + | string + | Blob + | Uint8ClampedArray + | T[] + +/** + * + * @param target ref dom + * @param options print-js options + * + * 拓展 print-js 的 usePrint 方法，允许 ref Dom 直接调用打印，其余的不变 + * + * @example + * const refDom = ref() + * + * 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 diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 3f929c0d..81050eed 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/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 } from '@/utils/element' -import { queryElements } from '@use-utils/element' +import { hasClass, uuid, queryElements } from '@/utils' import { useMaximize, useSpinning } from '@/hooks/template' import { useSiderBar } from '@/hooks/template' import { throttle } from 'lodash-es' diff --git a/src/layout/components/SiderBar/components/GlobalSearch/index.tsx b/src/layout/components/SiderBar/components/GlobalSearch/index.tsx index 30c6ba75..37e2bc2f 100644 --- a/src/layout/components/SiderBar/components/GlobalSearch/index.tsx +++ b/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' diff --git a/src/locales/helper.ts b/src/locales/helper.ts index 0c19ea42..79eed9fb 100644 --- a/src/locales/helper.ts +++ b/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' diff --git a/src/router/helper/permission.ts b/src/router/helper/permission.ts index f56bf05c..fb6a8e08 100644 --- a/src/router/helper/permission.ts +++ b/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' diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index 54fb836b..f7fccdea 100644 --- a/src/router/helper/routerCopilot.ts +++ b/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 } from '@/utils/basic' +import { getAppEnvironment, setStorage } from '@/utils' 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() }) } diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts index ebff5166..b8bb3969 100644 --- a/src/store/modules/menu/helper.ts +++ b/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 } from '@/utils/cache' +import { getStorage, isValueType } from '@/utils' import { useAppRoot } from '@/hooks/template' import type { diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index ad3a3928..5f6d2b71 100644 --- a/src/store/modules/menu/index.ts +++ b/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, diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index 6c4304ce..797378cb 100644 --- a/src/store/modules/setting/index.ts +++ b/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' diff --git a/src/store/modules/signing/index.ts b/src/store/modules/signing/index.ts index 458c6e0b..48bde307 100644 --- a/src/store/modules/signing/index.ts +++ b/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, diff --git a/src/styles/base.scss b/src/styles/base.scss index 87788813..811363bd 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -1,6 +1,6 @@ -@import "@/styles/animate.scss"; -@import "@/styles/root.scss"; -@import "@/styles/naive.scss"; +@import '@/styles/animate.scss'; +@import '@/styles/root.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", - "Droid Sans", - "Helvetica Neue", + 'Fira Sans', + 'Droid Sans', + '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; diff --git a/src/utils/basic.ts b/src/utils/basic.ts index d4948f07..df31126b 100644 --- a/src/utils/basic.ts +++ b/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>( - target: T, - options?: printJs.Configuration, -) { - const element = computed(() => unrefElement(target)) - const { printable, ...args } = options ?? {} - - const $print = (element: TargetValue) => { - 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 = , K extends keyof T>( +export const omit = ( targetObject: T, targetKeys: K | K[], ): Omit => { + if (!targetObject) { + return {} as Omit + } + 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 = , 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 = ( + targetObject: T, + targetKeys: K | K[], +): Pick => { + if (!targetObject) { + return {} as Pick + } + + const keys = Array.isArray(targetKeys) ? targetKeys : [targetKeys] + const result = {} as Pick + + 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, -) => { +): Promise | undefined> => { try { if (!isPromise(fc)) { return Promise.resolve(callWithErrorHandling(fc, errorCallback, args)) diff --git a/src/utils/dom.ts b/src/utils/dom.ts new file mode 100644 index 00000000..a40c6a0f --- /dev/null +++ b/src/utils/dom.ts @@ -0,0 +1,73 @@ +/** + * + * @author 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 + domToImageOptions?: Omit +} + +/** + * + * @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() + * + * printDom(refDom, { + * printOptions: { title: 'Demo Print', ... }, + * domToImageOptions: { ... } + * }) + */ +export const printDom = ( + target: BasicTarget, + 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() + }) +} diff --git a/src/utils/element.ts b/src/utils/element.ts index 8576a377..08cb7702 100644 --- a/src/utils/element.ts +++ b/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 { watchEffectWithTarget } from '@/utils/vue' -import { useCurrentElement } from '@vueuse/core' +import { effectDispose, unrefElement, isValueType } from '@/utils' 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, className: string, ) => { - const targetElement = computed(() => unrefElement(target)) + const update = () => { + const element = unrefElement(target) - const update = ( - element: TargetValue, - ) => { 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, className: string | 'removeAllClass', ) => { - const targetElement = computed(() => unrefElement(target)) + const update = () => { + const element = unrefElement(target) - const update = ( - element: TargetValue, - ) => { 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 | Ref */ export const hasClass = (target: BasicTarget, className: string) => { - const targetElement = computed(() => unrefElement(target)) const hasClassRef = ref(false) - const update = >(element: E) => { + const update = () => { + const element = unrefElement(target) + if (!element) { hasClassRef.value = false } else { @@ -122,11 +116,11 @@ export const hasClass = (target: BasicTarget, 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, styles: PartialCSSStyleDeclaration | string, ) => { - const targetElement = computed(() => unrefElement(target)) let styleObj: PartialCSSStyleDeclaration - const update = (element: TargetValue) => { + 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, styles: ((keyof CSSStyleDeclaration & string) | string)[], ) => { - const targetElement = computed(() => unrefElement(target)) + const update = () => { + const element = unrefElement(target) - const update = (element: TargetValue) => { 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) } /** diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 00000000..974d8544 --- /dev/null +++ b/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' diff --git a/src/utils/precision.ts b/src/utils/precision.ts index f069b753..b4381478 100644 --- a/src/utils/precision.ts +++ b/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' diff --git a/src/utils/vue/renderNode.ts b/src/utils/vue/renderNode.ts index ee7339bb..0241b925 100644 --- a/src/utils/vue/renderNode.ts +++ b/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' diff --git a/src/views/demo/precision/index.tsx b/src/views/demo/precision/index.tsx index 30ae6955..f9fd6457 100644 --- a/src/views/demo/precision/index.tsx +++ b/src/views/demo/precision/index.tsx @@ -11,14 +11,7 @@ import { NLayout, NCard, NDynamicTags, NSpace, NInputNumber } from 'naive-ui' -import { - add, - subtract, - multiply, - divide, - distribute, - format, -} from '@use-utils/precision' +import { add, subtract, multiply, divide, distribute, format } from '@/utils' const CalculatePrecision = defineComponent({ name: 'CalculatePrecision', diff --git a/src/views/login/components/Signing/index.tsx b/src/views/login/components/Signing/index.tsx index 0b1f914a..e09b5b4b 100644 --- a/src/views/login/components/Signing/index.tsx +++ b/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' diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 0f7192c3..f140b267 100644 --- a/src/vite-env.d.ts +++ b/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 +} diff --git a/tsconfig.json b/tsconfig.json index db3f56a3..2c609dc6 100644 --- a/tsconfig.json +++ b/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"], - "@use-utils/*": ["src/utils/*"], - "@use-api": ["src/api"], - "@use-api/*": ["src/api/*"], - "@use-images": ["src/assets/images"], - "@use-images/*": ["src/assets/images"], + "@api": ["src/api"], + "@api/*": ["src/api/*"], + "@images": ["src/assets/images"], + "@images/*": ["src/assets/images"], "@use-micro/*": ["src/micro/*"], "@mock/*": ["mock/*"], "@mock": ["mock/*"]