diff --git a/build/plugins.ts b/build/plugins.ts index 96ec394..21a0087 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -56,7 +56,7 @@ export function getPluginsList(command, VITE_LEGACY) { import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `, - logger: true + logger: false }), // 是否为打包后的文件提供传统浏览器兼容性支持 VITE_LEGACY diff --git a/package.json b/package.json index 56ea3b6..18ec91c 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,10 @@ "@vueuse/motion": "^2.0.0-beta.12", "@vueuse/shared": "^8.3.1", "animate.css": "^4.1.1", - "axios": "^0.26.1", + "axios": "^0.27.2", "css-color-function": "^1.3.3", "dayjs": "^1.11.0", - "element-plus": "^2.1.10", + "element-plus": "^2.1.11", "element-resize-detector": "^1.2.3", "js-cookie": "^3.0.1", "lodash": "^4.17.21", @@ -46,6 +46,7 @@ "nprogress": "^0.2.0", "path": "^0.12.7", "pinia": "^2.0.13", + "qrcode": "^1.5.0", "qs": "^6.10.2", "resize-observer-polyfill": "^1.5.1", "responsive-storage": "^1.0.11", @@ -70,6 +71,7 @@ "@types/mockjs": "1.0.3", "@types/node": "14.14.14", "@types/nprogress": "0.2.0", + "@types/qrcode": "^1.4.2", "@types/qs": "^6.9.7", "@typescript-eslint/eslint-plugin": "^5.10.2", "@typescript-eslint/parser": "^5.10.2", @@ -103,7 +105,7 @@ "stylelint-config-standard": "^24.0.0", "stylelint-order": "^5.0.0", "typescript": "^4.6.3", - "vite": "^2.9.5", + "vite": "^2.9.6", "vite-plugin-mock": "^2.9.6", "vite-plugin-remove-console": "^0.0.7", "vite-plugin-windicss": "^1.8.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 657aaf5..4cde39f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,7 @@ specifiers: "@types/mockjs": 1.0.3 "@types/node": 14.14.14 "@types/nprogress": 0.2.0 + "@types/qrcode": ^1.4.2 "@types/qs": ^6.9.7 "@typescript-eslint/eslint-plugin": ^5.10.2 "@typescript-eslint/parser": ^5.10.2 @@ -30,11 +31,11 @@ specifiers: "@vueuse/shared": ^8.3.1 animate.css: ^4.1.1 autoprefixer: ^10.4.5 - axios: ^0.26.1 + axios: ^0.27.2 cross-env: 7.0.3 css-color-function: ^1.3.3 dayjs: ^1.11.0 - element-plus: ^2.1.10 + element-plus: ^2.1.11 element-resize-detector: ^1.2.3 eslint: ^8.8.0 eslint-plugin-prettier: ^4.0.0 @@ -57,6 +58,7 @@ specifiers: postcss-scss: ^4.0.3 prettier: ^2.5.1 pretty-quick: 3.1.1 + qrcode: ^1.5.0 qs: ^6.10.2 resize-observer-polyfill: ^1.5.1 responsive-storage: ^1.0.11 @@ -72,7 +74,7 @@ specifiers: stylelint-config-standard: ^24.0.0 stylelint-order: ^5.0.0 typescript: ^4.6.3 - vite: ^2.9.5 + vite: ^2.9.6 vite-plugin-mock: ^2.9.6 vite-plugin-remove-console: ^0.0.7 vite-plugin-windicss: ^1.8.4 @@ -91,10 +93,10 @@ dependencies: "@vueuse/motion": 2.0.0-beta.12_vue@3.2.33 "@vueuse/shared": 8.3.1_vue@3.2.33 animate.css: 4.1.1 - axios: 0.26.1 + axios: 0.27.2 css-color-function: 1.3.3 dayjs: 1.11.0 - element-plus: 2.1.10_vue@3.2.33 + element-plus: 2.1.11_vue@3.2.33 element-resize-detector: 1.2.4 js-cookie: 3.0.1 lodash: 4.17.21 @@ -105,6 +107,7 @@ dependencies: nprogress: 0.2.0 path: 0.12.7 pinia: 2.0.13_typescript@4.6.3+vue@3.2.33 + qrcode: 1.5.0 qs: 6.10.3 resize-observer-polyfill: 1.5.1 responsive-storage: 1.0.11_vue@3.2.33 @@ -120,7 +123,7 @@ devDependencies: "@iconify-icons/ep": 1.2.4 "@iconify-icons/ri": 1.2.1 "@iconify/vue": 3.2.0_vue@3.2.33 - "@intlify/vite-plugin-vue-i18n": 3.4.0_3d08e1d9025840888da5ae870455a383 + "@intlify/vite-plugin-vue-i18n": 3.4.0_95de83a8f1aaeaa2a723e5fbfab1aab7 "@pureadmin/theme": 1.1.0 "@types/element-resize-detector": 1.1.3 "@types/js-cookie": 3.0.1 @@ -129,11 +132,12 @@ devDependencies: "@types/mockjs": 1.0.3 "@types/node": 14.14.14 "@types/nprogress": 0.2.0 + "@types/qrcode": 1.4.2 "@types/qs": 6.9.7 "@typescript-eslint/eslint-plugin": 5.15.0_8deb5df5f68df203b82d505eb95b6b75 "@typescript-eslint/parser": 5.15.0_eslint@8.11.0+typescript@4.6.3 - "@vitejs/plugin-legacy": 1.8.1_vite@2.9.5 - "@vitejs/plugin-vue": 2.3.1_vite@2.9.5+vue@3.2.33 + "@vitejs/plugin-legacy": 1.8.1_vite@2.9.6 + "@vitejs/plugin-vue": 2.3.1_vite@2.9.6+vue@3.2.33 "@vitejs/plugin-vue-jsx": 1.3.10 "@vue/eslint-config-prettier": 7.0.0_eslint@8.11.0+prettier@2.6.0 "@vue/eslint-config-typescript": 10.0.0_67e26bb50fed2173443e3fe1262a69b2 @@ -162,10 +166,10 @@ devDependencies: stylelint-config-standard: 24.0.0_stylelint@14.6.0 stylelint-order: 5.0.0_stylelint@14.6.0 typescript: 4.6.3 - vite: 2.9.5_sass@1.50.1 - vite-plugin-mock: 2.9.6_9bee6d01fd796cb52b526d4503041d36 + vite: 2.9.6_sass@1.50.1 + vite-plugin-mock: 2.9.6_394b88c4f118c1b7768fcf99c99028ca vite-plugin-remove-console: 0.0.7 - vite-plugin-windicss: 1.8.4_vite@2.9.5 + vite-plugin-windicss: 1.8.4_vite@2.9.6 vite-svg-loader: 2.2.0 vue-eslint-parser: 8.3.0_eslint@8.11.0 windicss: 3.5.1 @@ -1040,7 +1044,7 @@ packages: engines: { node: ">= 12" } dev: false - /@intlify/vite-plugin-vue-i18n/3.4.0_3d08e1d9025840888da5ae870455a383: + /@intlify/vite-plugin-vue-i18n/3.4.0_95de83a8f1aaeaa2a723e5fbfab1aab7: resolution: { integrity: sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA== @@ -1062,7 +1066,7 @@ packages: debug: 4.3.4 fast-glob: 3.2.11 source-map: 0.6.1 - vite: 2.9.5_sass@1.50.1 + vite: 2.9.6_sass@1.50.1 vue-i18n: 9.2.0-beta.35_vue@3.2.33 transitivePeerDependencies: - supports-color @@ -1134,13 +1138,6 @@ packages: fastq: 1.13.0 dev: true - /@popperjs/core/2.11.5: - resolution: - { - integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== - } - dev: false - /@pureadmin/components/1.0.6_vue@3.2.33: resolution: { @@ -1209,6 +1206,13 @@ packages: picomatch: 2.3.1 dev: true + /@sxzz/popperjs-es/2.11.7: + resolution: + { + integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ== + } + dev: false + /@trysound/sax/0.2.0: resolution: { @@ -1322,6 +1326,15 @@ packages: } dev: true + /@types/qrcode/1.4.2: + resolution: + { + integrity: sha512-7uNT9L4WQTNJejHTSTdaJhfBSCN73xtXaHFyBJ8TSwiLhe4PRuTue7Iph0s2nG9R/ifUaSnGhLUOZavlBEqDWQ== + } + dependencies: + "@types/node": 14.14.14 + dev: true + /@types/qs/6.9.7: resolution: { @@ -1488,7 +1501,7 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@vitejs/plugin-legacy/1.8.1_vite@2.9.5: + /@vitejs/plugin-legacy/1.8.1_vite@2.9.6: resolution: { integrity: sha512-kmBWKq7EeNvzS4AqPBqUKdoWG/NYQXh7StUFMWR3D21aN5Mfmar7CTO2a7K+bBxJH/vAL9gnnueA0wb7cycCmQ== @@ -1502,7 +1515,7 @@ packages: magic-string: 0.26.1 regenerator-runtime: 0.13.9 systemjs: 6.12.1 - vite: 2.9.5_sass@1.50.1 + vite: 2.9.6_sass@1.50.1 dev: true /@vitejs/plugin-vue-jsx/1.3.10: @@ -1522,7 +1535,7 @@ packages: - supports-color dev: true - /@vitejs/plugin-vue/2.3.1_vite@2.9.5+vue@3.2.33: + /@vitejs/plugin-vue/2.3.1_vite@2.9.6+vue@3.2.33: resolution: { integrity: sha512-YNzBt8+jt6bSwpt7LP890U1UcTOIZZxfpE5WOJ638PNxSEKOqAi0+FSKS0nVeukfdZ0Ai/H7AFd6k3hayfGZqQ== @@ -1532,7 +1545,7 @@ packages: vite: ^2.5.10 vue: ^3.2.25 dependencies: - vite: 2.9.5_sass@1.50.1 + vite: 2.9.6_sass@1.50.1 vue: 3.2.33 dev: true @@ -2026,7 +2039,6 @@ packages: integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== } engines: { node: ">=8" } - dev: true /ansi-styles/3.2.1: resolution: @@ -2046,7 +2058,6 @@ packages: engines: { node: ">=8" } dependencies: color-convert: 2.0.1 - dev: true /anymatch/3.1.2: resolution: @@ -2114,13 +2125,17 @@ packages: engines: { node: ">=8" } dev: true - /async-validator/4.0.8: + /async-validator/4.1.1: resolution: { - integrity: sha512-vx1kyOCuSJqB5IVatlybUkV/e22sdx+V0XohCWbBfbbzbiLFt6fHxfWg6UEBhFw0gVgZtaSLTJtugmP4rdGQAQ== + integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA== } dev: false + /asynckit/0.4.0: + resolution: { integrity: sha1-x57Zf380y48robyXkLzDZkdLS3k= } + dev: false + /autoprefixer/10.4.5_postcss@8.4.12: resolution: { @@ -2140,13 +2155,14 @@ packages: postcss-value-parser: 4.2.0 dev: true - /axios/0.26.1: + /axios/0.27.2: resolution: { - integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA== + integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== } dependencies: follow-redirects: 1.14.9 + form-data: 4.0.0 transitivePeerDependencies: - debug dev: false @@ -2279,7 +2295,6 @@ packages: integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== } engines: { node: ">=6" } - dev: true /camelcase/6.3.0: resolution: @@ -2389,6 +2404,17 @@ packages: string-width: 4.2.3 dev: true + /cliui/6.0.0: + resolution: + { + integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ== + } + dependencies: + string-width: 4.2.3 + strip-ansi: 6.0.1 + wrap-ansi: 6.2.0 + dev: false + /cliui/7.0.4: resolution: { @@ -2431,7 +2457,6 @@ packages: engines: { node: ">=7.0.0" } dependencies: color-name: 1.1.4 - dev: true /color-name/1.1.3: resolution: { integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= } @@ -2491,6 +2516,16 @@ packages: } dev: true + /combined-stream/1.0.8: + resolution: + { + integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + } + engines: { node: ">= 0.8" } + dependencies: + delayed-stream: 1.0.0 + dev: false + /commander/7.2.0: resolution: { @@ -2820,6 +2855,13 @@ packages: } dev: false + /dayjs/1.11.1: + resolution: + { + integrity: sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA== + } + dev: false + /debug/2.6.9: resolution: { @@ -2879,7 +2921,6 @@ packages: /decamelize/1.2.0: resolution: { integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= } engines: { node: ">=0.10.0" } - dev: true /deep-is/0.1.4: resolution: @@ -2904,6 +2945,11 @@ packages: engines: { node: ">=8" } dev: true + /delayed-stream/1.0.0: + resolution: { integrity: sha1-3zrhmayt+31ECqrgsp4icrJOxhk= } + engines: { node: ">=0.4.0" } + dev: false + /diff/4.0.2: resolution: { @@ -2912,6 +2958,13 @@ packages: engines: { node: ">=0.3.1" } dev: true + /dijkstrajs/1.0.2: + resolution: + { + integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg== + } + dev: false + /dir-glob/3.0.1: resolution: { @@ -2992,10 +3045,10 @@ packages: } dev: true - /element-plus/2.1.10_vue@3.2.33: + /element-plus/2.1.11_vue@3.2.33: resolution: { - integrity: sha512-sS9OMgP20dlYipmzHlEEgCJU+ID7+03YpRpoJWNQEH736C6ArmDMLnGFe8DUjPvwbUEXRA2d0Eo5d0apFgkSqg== + integrity: sha512-s4X0I8s787tv+9UdekBC1g7v42Fj4bucPAmu03EjbgrGrV7BJvkoBGuK52lNfu4yC76bl6Uyjesd5Fu8CMakSw== } peerDependencies: vue: ^3.2.0 @@ -3003,12 +3056,12 @@ packages: "@ctrl/tinycolor": 3.4.1 "@element-plus/icons-vue": 1.1.4_vue@3.2.33 "@floating-ui/dom": 0.4.5 - "@popperjs/core": 2.11.5 + "@popperjs/core": /@sxzz/popperjs-es/2.11.7 "@types/lodash": 4.14.182 "@types/lodash-es": 4.17.6 "@vueuse/core": 8.3.1_vue@3.2.33 - async-validator: 4.0.8 - dayjs: 1.11.0 + async-validator: 4.1.1 + dayjs: 1.11.1 escape-html: 1.0.3 lodash: 4.17.21 lodash-es: 4.17.21 @@ -3034,7 +3087,13 @@ packages: { integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== } - dev: true + + /encode-utf8/1.0.3: + resolution: + { + integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw== + } + dev: false /encodeurl/1.0.2: resolution: { integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= } @@ -3084,10 +3143,10 @@ packages: is-arrayish: 0.2.1 dev: true - /esbuild-android-64/0.14.36: + /esbuild-android-64/0.14.38: resolution: { - integrity: sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw== + integrity: sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw== } engines: { node: ">=12" } cpu: [x64] @@ -3096,10 +3155,10 @@ packages: dev: true optional: true - /esbuild-android-arm64/0.14.36: + /esbuild-android-arm64/0.14.38: resolution: { - integrity: sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg== + integrity: sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA== } engines: { node: ">=12" } cpu: [arm64] @@ -3108,10 +3167,10 @@ packages: dev: true optional: true - /esbuild-darwin-64/0.14.36: + /esbuild-darwin-64/0.14.38: resolution: { - integrity: sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ== + integrity: sha512-5JJvgXkX87Pd1Og0u/NJuO7TSqAikAcQQ74gyJ87bqWRVeouky84ICoV4sN6VV53aTW+NE87qLdGY4QA2S7KNA== } engines: { node: ">=12" } cpu: [x64] @@ -3120,10 +3179,10 @@ packages: dev: true optional: true - /esbuild-darwin-arm64/0.14.36: + /esbuild-darwin-arm64/0.14.38: resolution: { - integrity: sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw== + integrity: sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ== } engines: { node: ">=12" } cpu: [arm64] @@ -3132,10 +3191,10 @@ packages: dev: true optional: true - /esbuild-freebsd-64/0.14.36: + /esbuild-freebsd-64/0.14.38: resolution: { - integrity: sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww== + integrity: sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig== } engines: { node: ">=12" } cpu: [x64] @@ -3144,10 +3203,10 @@ packages: dev: true optional: true - /esbuild-freebsd-arm64/0.14.36: + /esbuild-freebsd-arm64/0.14.38: resolution: { - integrity: sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA== + integrity: sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ== } engines: { node: ">=12" } cpu: [arm64] @@ -3156,10 +3215,10 @@ packages: dev: true optional: true - /esbuild-linux-32/0.14.36: + /esbuild-linux-32/0.14.38: resolution: { - integrity: sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw== + integrity: sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g== } engines: { node: ">=12" } cpu: [ia32] @@ -3168,10 +3227,10 @@ packages: dev: true optional: true - /esbuild-linux-64/0.14.36: + /esbuild-linux-64/0.14.38: resolution: { - integrity: sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg== + integrity: sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q== } engines: { node: ">=12" } cpu: [x64] @@ -3180,10 +3239,10 @@ packages: dev: true optional: true - /esbuild-linux-arm/0.14.36: + /esbuild-linux-arm/0.14.38: resolution: { - integrity: sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg== + integrity: sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA== } engines: { node: ">=12" } cpu: [arm] @@ -3192,10 +3251,10 @@ packages: dev: true optional: true - /esbuild-linux-arm64/0.14.36: + /esbuild-linux-arm64/0.14.38: resolution: { - integrity: sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw== + integrity: sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA== } engines: { node: ">=12" } cpu: [arm64] @@ -3204,10 +3263,10 @@ packages: dev: true optional: true - /esbuild-linux-mips64le/0.14.36: + /esbuild-linux-mips64le/0.14.38: resolution: { - integrity: sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA== + integrity: sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ== } engines: { node: ">=12" } cpu: [mips64el] @@ -3216,10 +3275,10 @@ packages: dev: true optional: true - /esbuild-linux-ppc64le/0.14.36: + /esbuild-linux-ppc64le/0.14.38: resolution: { - integrity: sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg== + integrity: sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q== } engines: { node: ">=12" } cpu: [ppc64] @@ -3228,10 +3287,10 @@ packages: dev: true optional: true - /esbuild-linux-riscv64/0.14.36: + /esbuild-linux-riscv64/0.14.38: resolution: { - integrity: sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A== + integrity: sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ== } engines: { node: ">=12" } cpu: [riscv64] @@ -3240,10 +3299,10 @@ packages: dev: true optional: true - /esbuild-linux-s390x/0.14.36: + /esbuild-linux-s390x/0.14.38: resolution: { - integrity: sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg== + integrity: sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ== } engines: { node: ">=12" } cpu: [s390x] @@ -3252,10 +3311,10 @@ packages: dev: true optional: true - /esbuild-netbsd-64/0.14.36: + /esbuild-netbsd-64/0.14.38: resolution: { - integrity: sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A== + integrity: sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q== } engines: { node: ">=12" } cpu: [x64] @@ -3264,10 +3323,10 @@ packages: dev: true optional: true - /esbuild-openbsd-64/0.14.36: + /esbuild-openbsd-64/0.14.38: resolution: { - integrity: sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg== + integrity: sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ== } engines: { node: ">=12" } cpu: [x64] @@ -3276,10 +3335,10 @@ packages: dev: true optional: true - /esbuild-sunos-64/0.14.36: + /esbuild-sunos-64/0.14.38: resolution: { - integrity: sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ== + integrity: sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA== } engines: { node: ">=12" } cpu: [x64] @@ -3288,10 +3347,10 @@ packages: dev: true optional: true - /esbuild-windows-32/0.14.36: + /esbuild-windows-32/0.14.38: resolution: { - integrity: sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w== + integrity: sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw== } engines: { node: ">=12" } cpu: [ia32] @@ -3300,10 +3359,10 @@ packages: dev: true optional: true - /esbuild-windows-64/0.14.36: + /esbuild-windows-64/0.14.38: resolution: { - integrity: sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ== + integrity: sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw== } engines: { node: ">=12" } cpu: [x64] @@ -3312,10 +3371,10 @@ packages: dev: true optional: true - /esbuild-windows-arm64/0.14.36: + /esbuild-windows-arm64/0.14.38: resolution: { - integrity: sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q== + integrity: sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw== } engines: { node: ">=12" } cpu: [arm64] @@ -3333,35 +3392,35 @@ packages: requiresBuild: true dev: true - /esbuild/0.14.36: + /esbuild/0.14.38: resolution: { - integrity: sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw== + integrity: sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA== } engines: { node: ">=12" } hasBin: true requiresBuild: true optionalDependencies: - esbuild-android-64: 0.14.36 - esbuild-android-arm64: 0.14.36 - esbuild-darwin-64: 0.14.36 - esbuild-darwin-arm64: 0.14.36 - esbuild-freebsd-64: 0.14.36 - esbuild-freebsd-arm64: 0.14.36 - esbuild-linux-32: 0.14.36 - esbuild-linux-64: 0.14.36 - esbuild-linux-arm: 0.14.36 - esbuild-linux-arm64: 0.14.36 - esbuild-linux-mips64le: 0.14.36 - esbuild-linux-ppc64le: 0.14.36 - esbuild-linux-riscv64: 0.14.36 - esbuild-linux-s390x: 0.14.36 - esbuild-netbsd-64: 0.14.36 - esbuild-openbsd-64: 0.14.36 - esbuild-sunos-64: 0.14.36 - esbuild-windows-32: 0.14.36 - esbuild-windows-64: 0.14.36 - esbuild-windows-arm64: 0.14.36 + esbuild-android-64: 0.14.38 + esbuild-android-arm64: 0.14.38 + esbuild-darwin-64: 0.14.38 + esbuild-darwin-arm64: 0.14.38 + esbuild-freebsd-64: 0.14.38 + esbuild-freebsd-arm64: 0.14.38 + esbuild-linux-32: 0.14.38 + esbuild-linux-64: 0.14.38 + esbuild-linux-arm: 0.14.38 + esbuild-linux-arm64: 0.14.38 + esbuild-linux-mips64le: 0.14.38 + esbuild-linux-ppc64le: 0.14.38 + esbuild-linux-riscv64: 0.14.38 + esbuild-linux-s390x: 0.14.38 + esbuild-netbsd-64: 0.14.38 + esbuild-openbsd-64: 0.14.38 + esbuild-sunos-64: 0.14.38 + esbuild-windows-32: 0.14.38 + esbuild-windows-64: 0.14.38 + esbuild-windows-arm64: 0.14.38 dev: true /escalade/3.1.1: @@ -3800,7 +3859,6 @@ packages: dependencies: locate-path: 5.0.0 path-exists: 4.0.0 - dev: true /find-up/5.0.0: resolution: @@ -3844,6 +3902,18 @@ packages: optional: true dev: false + /form-data/4.0.0: + resolution: + { + integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + } + engines: { node: ">= 6" } + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + dev: false + /fraction.js/4.2.0: resolution: { @@ -3932,7 +4002,6 @@ packages: integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== } engines: { node: 6.* || 8.* || >= 10.* } - dev: true /get-intrinsic/1.1.1: resolution: @@ -4336,7 +4405,6 @@ packages: integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== } engines: { node: ">=8" } - dev: true /is-glob/4.0.3: resolution: @@ -4645,7 +4713,6 @@ packages: engines: { node: ">=8" } dependencies: p-locate: 4.1.0 - dev: true /locate-path/6.0.0: resolution: @@ -4879,6 +4946,24 @@ packages: picomatch: 2.3.1 dev: true + /mime-db/1.52.0: + resolution: + { + integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + } + engines: { node: ">= 0.6" } + dev: false + + /mime-types/2.1.35: + resolution: + { + integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + } + engines: { node: ">= 0.6" } + dependencies: + mime-db: 1.52.0 + dev: false + /mimic-fn/2.1.0: resolution: { @@ -5137,7 +5222,6 @@ packages: engines: { node: ">=6" } dependencies: p-try: 2.2.0 - dev: true /p-limit/3.1.0: resolution: @@ -5157,7 +5241,6 @@ packages: engines: { node: ">=8" } dependencies: p-limit: 2.3.0 - dev: true /p-locate/5.0.0: resolution: @@ -5185,7 +5268,6 @@ packages: integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== } engines: { node: ">=6" } - dev: true /parent-module/1.0.1: resolution: @@ -5224,7 +5306,6 @@ packages: integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== } engines: { node: ">=8" } - dev: true /path-is-absolute/1.0.1: resolution: { integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18= } @@ -5317,6 +5398,14 @@ packages: semver-compare: 1.0.0 dev: true + /pngjs/5.0.0: + resolution: + { + integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw== + } + engines: { node: ">=10.13.0" } + dev: false + /popmotion/11.0.3: resolution: { @@ -5864,6 +5953,20 @@ packages: engines: { node: ">=0.6.0", teleport: ">=0.2.0" } dev: true + /qrcode/1.5.0: + resolution: + { + integrity: sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ== + } + engines: { node: ">=10.13.0" } + hasBin: true + dependencies: + dijkstrajs: 1.0.2 + encode-utf8: 1.0.3 + pngjs: 5.0.0 + yargs: 15.4.1 + dev: false + /qs/6.10.3: resolution: { @@ -5971,7 +6074,6 @@ packages: /require-directory/2.1.1: resolution: { integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I= } engines: { node: ">=0.10.0" } - dev: true /require-from-string/2.0.2: resolution: @@ -5981,6 +6083,13 @@ packages: engines: { node: ">=0.10.0" } dev: true + /require-main-filename/2.0.0: + resolution: + { + integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg== + } + dev: false + /resize-observer-polyfill/1.5.1: resolution: { @@ -6190,6 +6299,10 @@ packages: lru-cache: 6.0.0 dev: true + /set-blocking/2.0.0: + resolution: { integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc= } + dev: false + /shebang-command/2.0.0: resolution: { @@ -6392,7 +6505,6 @@ packages: emoji-regex: 8.0.0 is-fullwidth-code-point: 3.0.0 strip-ansi: 6.0.1 - dev: true /string_decoder/1.3.0: resolution: @@ -6423,7 +6535,6 @@ packages: engines: { node: ">=8" } dependencies: ansi-regex: 5.0.1 - dev: true /strip-final-newline/2.0.0: resolution: @@ -6903,7 +7014,7 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite-plugin-mock/2.9.6_9bee6d01fd796cb52b526d4503041d36: + /vite-plugin-mock/2.9.6_394b88c4f118c1b7768fcf99c99028ca: resolution: { integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg== @@ -6923,7 +7034,7 @@ packages: fast-glob: 3.2.11 mockjs: 1.1.0 path-to-regexp: 6.2.0 - vite: 2.9.5_sass@1.50.1 + vite: 2.9.6_sass@1.50.1 transitivePeerDependencies: - rollup - supports-color @@ -6936,7 +7047,7 @@ packages: } dev: true - /vite-plugin-windicss/1.8.4_vite@2.9.5: + /vite-plugin-windicss/1.8.4_vite@2.9.6: resolution: { integrity: sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A== @@ -6947,7 +7058,7 @@ packages: "@windicss/plugin-utils": 1.8.4 debug: 4.3.4 kolorist: 1.5.1 - vite: 2.9.5_sass@1.50.1 + vite: 2.9.6_sass@1.50.1 windicss: 3.5.1 transitivePeerDependencies: - supports-color @@ -6963,10 +7074,10 @@ packages: svgo: 2.8.0 dev: true - /vite/2.9.5_sass@1.50.1: + /vite/2.9.6_sass@1.50.1: resolution: { - integrity: sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg== + integrity: sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw== } engines: { node: ">=12.2.0" } hasBin: true @@ -6982,7 +7093,7 @@ packages: stylus: optional: true dependencies: - esbuild: 0.14.36 + esbuild: 0.14.38 postcss: 8.4.12 resolve: 1.22.0 rollup: 2.70.1 @@ -7084,6 +7195,10 @@ packages: "@vue/shared": 3.2.33 dev: false + /which-module/2.0.0: + resolution: { integrity: sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= } + dev: false + /which/1.3.1: resolution: { @@ -7132,7 +7247,6 @@ packages: ansi-styles: 4.3.0 string-width: 4.2.3 strip-ansi: 6.0.1 - dev: true /wrap-ansi/7.0.0: resolution: @@ -7161,6 +7275,13 @@ packages: signal-exit: 3.0.7 dev: true + /y18n/4.0.3: + resolution: + { + integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ== + } + dev: false + /y18n/5.0.8: resolution: { @@ -7195,6 +7316,17 @@ packages: engines: { node: ">= 6" } dev: true + /yargs-parser/18.1.3: + resolution: + { + integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ== + } + engines: { node: ">=6" } + dependencies: + camelcase: 5.3.1 + decamelize: 1.2.0 + dev: false + /yargs-parser/20.2.9: resolution: { @@ -7211,6 +7343,26 @@ packages: engines: { node: ">=12" } dev: true + /yargs/15.4.1: + resolution: + { + integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A== + } + engines: { node: ">=8" } + dependencies: + cliui: 6.0.0 + decamelize: 1.2.0 + find-up: 4.1.0 + get-caller-file: 2.0.5 + require-directory: 2.1.1 + require-main-filename: 2.0.0 + set-blocking: 2.0.0 + string-width: 4.2.3 + which-module: 2.0.0 + y18n: 4.0.3 + yargs-parser: 18.1.3 + dev: false + /yargs/17.3.1: resolution: { diff --git a/src/components/ReIcon/src/iconifyIconOnline.ts b/src/components/ReIcon/src/iconifyIconOnline.ts index fd879cf..ccb8eae 100644 --- a/src/components/ReIcon/src/iconifyIconOnline.ts +++ b/src/components/ReIcon/src/iconifyIconOnline.ts @@ -9,11 +9,6 @@ export default defineComponent({ icon: { type: String, default: "" - }, - // default element plus icon - type: { - type: String, - default: "ep:" } }, render() { @@ -21,7 +16,7 @@ export default defineComponent({ return h( IconifyIcon, { - icon: `${this.type}${this.icon}`, + icon: `${this.icon}`, ...attrs }, { diff --git a/src/components/ReImageVerify/index.ts b/src/components/ReImageVerify/index.ts new file mode 100644 index 0000000..5f193cb --- /dev/null +++ b/src/components/ReImageVerify/index.ts @@ -0,0 +1,12 @@ +import { App } from "vue"; +import reImageVerify from "./src/index.vue"; + +export const ReImageVerify = Object.assign(reImageVerify, { + install(app: App) { + app.component(reImageVerify.name, reImageVerify); + } +}); + +export default { + ReImageVerify +}; diff --git a/src/components/ReImageVerify/src/hooks.ts b/src/components/ReImageVerify/src/hooks.ts new file mode 100644 index 0000000..71fcdfc --- /dev/null +++ b/src/components/ReImageVerify/src/hooks.ts @@ -0,0 +1,85 @@ +import { ref, onMounted } from "vue"; + +/** + * 绘制图形验证码 + * @param width - 图形宽度 + * @param height - 图形高度 + */ +export const useImageVerify = (width = 120, height = 40) => { + const domRef = ref(); + const imgCode = ref(""); + + function setImgCode(code: string) { + imgCode.value = code; + } + + function getImgCode() { + if (!domRef.value) return; + imgCode.value = draw(domRef.value, width, height); + } + + onMounted(() => { + getImgCode(); + }); + + return { + domRef, + imgCode, + setImgCode, + getImgCode + }; +}; + +function randomNum(min: number, max: number) { + const num = Math.floor(Math.random() * (max - min) + min); + return num; +} + +function randomColor(min: number, max: number) { + const r = randomNum(min, max); + const g = randomNum(min, max); + const b = randomNum(min, max); + return `rgb(${r},${g},${b})`; +} + +function draw(dom: HTMLCanvasElement, width: number, height: number) { + let imgCode = ""; + + const NUMBER_STRING = "0123456789"; + + const ctx = dom.getContext("2d"); + if (!ctx) return imgCode; + + ctx.fillStyle = randomColor(180, 230); + ctx.fillRect(0, 0, width, height); + for (let i = 0; i < 4; i += 1) { + const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)]; + imgCode += text; + const fontSize = randomNum(18, 41); + const deg = randomNum(-30, 30); + ctx.font = `${fontSize}px Simhei`; + ctx.textBaseline = "top"; + ctx.fillStyle = randomColor(80, 150); + ctx.save(); + ctx.translate(30 * i + 15, 15); + ctx.rotate((deg * Math.PI) / 180); + ctx.fillText(text, -15 + 5, -15); + ctx.restore(); + } + for (let i = 0; i < 5; i += 1) { + ctx.beginPath(); + ctx.moveTo(randomNum(0, width), randomNum(0, height)); + ctx.lineTo(randomNum(0, width), randomNum(0, height)); + ctx.strokeStyle = randomColor(180, 230); + ctx.closePath(); + ctx.stroke(); + } + for (let i = 0; i < 41; i += 1) { + ctx.beginPath(); + ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI); + ctx.closePath(); + ctx.fillStyle = randomColor(150, 200); + ctx.fill(); + } + return imgCode; +} diff --git a/src/components/ReImageVerify/src/index.vue b/src/components/ReImageVerify/src/index.vue new file mode 100644 index 0000000..32599a8 --- /dev/null +++ b/src/components/ReImageVerify/src/index.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/components/ReQrcode/index.ts b/src/components/ReQrcode/index.ts new file mode 100644 index 0000000..a5a99ca --- /dev/null +++ b/src/components/ReQrcode/index.ts @@ -0,0 +1,10 @@ +import { App } from "vue"; +import reQrcode from "./src/index"; + +export const ReQrcode = Object.assign(reQrcode, { + install(app: App) { + app.component(reQrcode.name, reQrcode); + } +}); + +export default ReQrcode; diff --git a/src/components/ReQrcode/src/index.scss b/src/components/ReQrcode/src/index.scss new file mode 100644 index 0000000..5f6a3ff --- /dev/null +++ b/src/components/ReQrcode/src/index.scss @@ -0,0 +1,8 @@ +.qrcode { + &--disabled { + background: rgba(255, 255, 255, 0.95); + & > div { + transform: translate(-50%, -50%); + } + } +} diff --git a/src/components/ReQrcode/src/index.tsx b/src/components/ReQrcode/src/index.tsx new file mode 100644 index 0000000..6354f43 --- /dev/null +++ b/src/components/ReQrcode/src/index.tsx @@ -0,0 +1,262 @@ +import { + ref, + unref, + watch, + nextTick, + computed, + PropType, + defineComponent +} from "vue"; +import "./index.scss"; +import { isString } from "/@/utils/is"; +import { cloneDeep } from "lodash-unified"; +import { propTypes } from "/@/utils/propTypes"; +import { IconifyIconOffline } from "../../ReIcon"; +import QRCode, { QRCodeRenderersOptions } from "qrcode"; + +interface QrcodeLogo { + src?: string; + logoSize?: number; + bgColor?: string; + borderSize?: number; + crossOrigin?: string; + borderRadius?: number; + logoRadius?: number; +} + +const props = { + // img 或者 canvas,img不支持logo嵌套 + tag: propTypes.string + .validate((v: string) => ["canvas", "img"].includes(v)) + .def("canvas"), + // 二维码内容 + text: { + type: [String, Array] as PropType, + default: null + }, + // qrcode.js配置项 + options: { + type: Object as PropType, + default: (): QRCodeRenderersOptions => ({}) + }, + // 宽度 + width: propTypes.number.def(200), + // logo + logo: { + type: [String, Object] as PropType | string>, + default: (): QrcodeLogo | string => "" + }, + // 是否过期 + disabled: propTypes.bool.def(false), + // 过期提示内容 + disabledText: propTypes.string.def("") +}; + +export default defineComponent({ + name: "ReQrcode", + props, + emits: ["done", "click", "disabled-click"], + setup(props, { emit }) { + const { toCanvas, toDataURL } = QRCode; + const loading = ref(true); + const wrapRef = ref>(null); + const renderText = computed(() => String(props.text)); + const wrapStyle = computed(() => { + return { + width: props.width + "px", + height: props.width + "px" + }; + }); + const initQrcode = async () => { + await nextTick(); + const options = cloneDeep(props.options || {}); + if (props.tag === "canvas") { + // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率 + options.errorCorrectionLevel = + options.errorCorrectionLevel || + getErrorCorrectionLevel(unref(renderText)); + const _width: number = await getOriginWidth(unref(renderText), options); + options.scale = + props.width === 0 ? undefined : (props.width / _width) * 4; + const canvasRef: HTMLCanvasElement = await toCanvas( + unref(wrapRef) as HTMLCanvasElement, + unref(renderText), + options + ); + if (props.logo) { + const url = await createLogoCode(canvasRef); + emit("done", url); + loading.value = false; + } else { + emit("done", canvasRef.toDataURL()); + loading.value = false; + } + } else { + const url = await toDataURL(renderText.value, { + errorCorrectionLevel: "H", + width: props.width, + ...options + }); + (unref(wrapRef) as HTMLImageElement).src = url; + emit("done", url); + loading.value = false; + } + }; + watch( + () => renderText.value, + val => { + if (!val) return; + initQrcode(); + }, + { + deep: true, + immediate: true + } + ); + const createLogoCode = (canvasRef: HTMLCanvasElement) => { + const canvasWidth = canvasRef.width; + const logoOptions: QrcodeLogo = Object.assign( + { + logoSize: 0.15, + bgColor: "#ffffff", + borderSize: 0.05, + crossOrigin: "anonymous", + borderRadius: 8, + logoRadius: 0 + }, + isString(props.logo) ? {} : props.logo + ); + const { + logoSize = 0.15, + bgColor = "#ffffff", + borderSize = 0.05, + crossOrigin = "anonymous", + borderRadius = 8, + logoRadius = 0 + } = logoOptions; + const logoSrc = isString(props.logo) ? props.logo : props.logo.src; + const logoWidth = canvasWidth * logoSize; + const logoXY = (canvasWidth * (1 - logoSize)) / 2; + const logoBgWidth = canvasWidth * (logoSize + borderSize); + const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2; + const ctx = canvasRef.getContext("2d"); + if (!ctx) return; + // logo 底色 + canvasRoundRect(ctx)( + logoBgXY, + logoBgXY, + logoBgWidth, + logoBgWidth, + borderRadius + ); + ctx.fillStyle = bgColor; + ctx.fill(); + // logo + const image = new Image(); + if (crossOrigin || logoRadius) { + image.setAttribute("crossOrigin", crossOrigin); + } + (image as any).src = logoSrc; + // 使用image绘制可以避免某些跨域情况 + const drawLogoWithImage = (image: HTMLImageElement) => { + ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth); + }; + // 使用canvas绘制以获得更多的功能 + const drawLogoWithCanvas = (image: HTMLImageElement) => { + const canvasImage = document.createElement("canvas"); + canvasImage.width = logoXY + logoWidth; + canvasImage.height = logoXY + logoWidth; + const imageCanvas = canvasImage.getContext("2d"); + if (!imageCanvas || !ctx) return; + imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth); + canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius); + if (!ctx) return; + const fillStyle = ctx.createPattern(canvasImage, "no-repeat"); + if (fillStyle) { + ctx.fillStyle = fillStyle; + ctx.fill(); + } + }; + // 将 logo绘制到 canvas上 + return new Promise((resolve: any) => { + image.onload = () => { + logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image); + resolve(canvasRef.toDataURL()); + }; + }); + }; + // 得到原QrCode的大小，以便缩放得到正确的QrCode大小 + const getOriginWidth = async ( + content: string, + options: QRCodeRenderersOptions + ) => { + const _canvas = document.createElement("canvas"); + await toCanvas(_canvas, content, options); + return _canvas.width; + }; + // 对于内容少的QrCode，增大容错率 + const getErrorCorrectionLevel = (content: string) => { + if (content.length > 36) { + return "M"; + } else if (content.length > 16) { + return "Q"; + } else { + return "H"; + } + }; + // 用于绘制圆角 + const canvasRoundRect = (ctx: CanvasRenderingContext2D) => { + return (x: number, y: number, w: number, h: number, r: number) => { + const minSize = Math.min(w, h); + if (r > minSize / 2) { + r = minSize / 2; + } + ctx.beginPath(); + ctx.moveTo(x + r, y); + ctx.arcTo(x + w, y, x + w, y + h, r); + ctx.arcTo(x + w, y + h, x, y + h, r); + ctx.arcTo(x, y + h, x, y, r); + ctx.arcTo(x, y, x + w, y, r); + ctx.closePath(); + return ctx; + }; + }; + const clickCode = () => { + emit("click"); + }; + const disabledClick = () => { + emit("disabled-click"); + }; + return () => ( + <> +
+ {props.tag === "canvas" ? ( + + ) : ( + + )} + {props.disabled && ( +
+
+ +
{props.disabledText}
+
+
+ )} +
+ + ); + } +}); diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 53626e9..b72de1b 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -5,7 +5,7 @@ const remainingRouter = [ { path: "/login", name: "login", - component: () => import("/@/views/login.vue"), + component: () => import("/@/views/login/index.vue"), meta: { title: $t("menus.hslogin"), showLink: false, diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts index c5eb062..88c3a49 100644 --- a/src/store/modules/types.ts +++ b/src/store/modules/types.ts @@ -38,4 +38,6 @@ export type setType = { export type userType = { token: string; name?: string; + verifyCode?: string; + currentPage?: number; }; diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 9f04254..55f7a0e 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -22,7 +22,11 @@ export const useUserStore = defineStore({ id: "pure-user", state: (): userType => ({ token, - name + name, + // 前端生成的验证码（按实际需求替换） + verifyCode: "", + // 登陆显示组件判断 0：登陆 1：手机登陆 2：二维码登陆 3：注册 4：忘记密码，默认0：登陆 + currentPage: 0 }), actions: { SET_TOKEN(token) { @@ -31,6 +35,12 @@ export const useUserStore = defineStore({ SET_NAME(name) { this.name = name; }, + SET_VERIFYCODE(verifyCode) { + this.verifyCode = verifyCode; + }, + SET_CURRENTPAGE(value) { + this.currentPage = value; + }, // 登入 async loginByUsername(data) { return new Promise((resolve, reject) => { diff --git a/src/style/login.css b/src/style/login.css index 4402a3b..781826c 100644 --- a/src/style/login.css +++ b/src/style/login.css @@ -47,148 +47,11 @@ font: bold 200% Consolas, Monaco, monospace; } -.input-group { - position: relative; - display: grid; - grid-template-columns: 7% 93%; - margin: 25px 0; - padding: 5px 0; - border-bottom: 2px solid #d9d9d9; -} - -.input-group:nth-child(1) { - margin-bottom: 4px; -} - -.input-group::before, -.input-group::after { - content: ""; - position: absolute; - bottom: -2px; - width: 0; - height: 2px; - background-color: #c5d3f7; - transition: 0.5s; -} - -.input-group::after { - right: 50%; -} - -.input-group::before { - left: 50%; -} - -.icon { - display: flex; - justify-content: center; - align-items: center; -} - -.icon svg { - color: #d9d9d9; - transition: 0.5s; -} - -.input-group > div { - position: relative; - height: 45px; -} - -.input-group > div > h5 { - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); - color: #d9d9d9; - font-size: 18px; - transition: 0.3s; - margin: 0; - padding: 0; -} - -.input-group.focus .icon svg { - color: #5392f0; -} - -.input-group.focus div h5 { - top: -5px; - font-size: 15px; -} - -.input-group.focus::after, -.input-group.focus::before { - width: 50%; -} - -.input { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - border: none; - outline: none; - background: none; - padding: 0.5rem 0.7rem; - font-size: 1.2rem; - color: #555; - font-family: "Roboto", sans-serif; -} - -a { - display: block; - text-align: right; - text-decoration: none; - color: #999; - font-size: 0.9rem; - transition: 0.3s; -} - -a:hover { - color: #5392f0; -} - -.btn { - display: block; - width: 100%; - height: 50px; - border-radius: 25px; - margin: 1rem 0; - font-size: 1.2rem; - outline: none; - border: none; - background-image: linear-gradient(to right, #567dbe, #5392f0, #567dbe); - cursor: pointer; - color: #fff; - text-transform: uppercase; - font-family: "Roboto", sans-serif; - background-size: 200%; - transition: 0.5s; -} - -.btn:hover { - background-position: right; -} - -.copyright { - position: absolute; - width: 100%; - height: 50px; - bottom: 2px; - color: #5392f0; - text-align: center; - font-size: 18px; - font-family: "Roboto", sans-serif; -} - -@media screen and (max-width: 1080px) { +@media screen and (max-width: 1180px) { .login-container { grid-gap: 9rem; } -} -@media screen and (max-width: 1024px) { .login-form { width: 290px; } @@ -208,7 +71,7 @@ a:hover { } } -@media screen and (max-width: 768px) { +@media screen and (max-width: 968px) { .wave { display: none; } diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index a352bad..be38e58 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -30,6 +30,11 @@ margin-left: $sideBarWidth; position: relative; background: #f0f2f5; + + .el-scrollbar__wrap { + overflow: auto; + height: 100%; + } } .fixed-header { @@ -483,11 +488,6 @@ } } - .el-scrollbar__wrap { - overflow: auto; - height: 100%; - } - .el-menu--collapse .el-menu .el-sub-menu { min-width: $sideBarWidth !important; } diff --git a/src/utils/is.ts b/src/utils/is.ts index 3a351c6..fab17f6 100644 --- a/src/utils/is.ts +++ b/src/utils/is.ts @@ -1,4 +1,3 @@ -/* eslint-disable */ const toString = Object.prototype.toString; export function is(val: unknown, type: string) { @@ -94,9 +93,26 @@ export const isServer = typeof window === "undefined"; export const isClient = !isServer; -export function isUrl(path: T): boolean { +/** url链接正则 */ +export function isUrl(value: T): boolean { const reg = + // eslint-disable-next-line no-useless-escape /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; // @ts-expect-error - return reg.test(path); + return reg.test(value); +} + +/** 手机号码正则 */ +export function isPhone(value: T): boolean { + const reg = + /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/; + // @ts-expect-error + return reg.test(value); +} + +/** 邮箱正则 */ +export function isEmail(value: T): boolean { + const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; + // @ts-expect-error + return reg.test(value); } diff --git a/src/utils/useComponent.ts b/src/utils/useComponent.ts new file mode 100644 index 0000000..365a5bf --- /dev/null +++ b/src/utils/useComponent.ts @@ -0,0 +1,4 @@ +import { h, resolveComponent } from "vue"; + +export const dynamicComponent = (component: string) => + h(resolveComponent(component)); diff --git a/src/views/login.vue b/src/views/login.vue deleted file mode 100644 index 432c49f..0000000 --- a/src/views/login.vue +++ /dev/null @@ -1,152 +0,0 @@ - - - - - diff --git a/src/views/login/components/phone.vue b/src/views/login/components/phone.vue new file mode 100644 index 0000000..61833bb --- /dev/null +++ b/src/views/login/components/phone.vue @@ -0,0 +1,96 @@ + + + diff --git a/src/views/login/components/qrCode.vue b/src/views/login/components/qrCode.vue new file mode 100644 index 0000000..49e2b57 --- /dev/null +++ b/src/views/login/components/qrCode.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/views/login/components/regist.vue b/src/views/login/components/regist.vue new file mode 100644 index 0000000..3d83fc3 --- /dev/null +++ b/src/views/login/components/regist.vue @@ -0,0 +1,169 @@ + + + diff --git a/src/views/login/components/update.vue b/src/views/login/components/update.vue new file mode 100644 index 0000000..97de44a --- /dev/null +++ b/src/views/login/components/update.vue @@ -0,0 +1,141 @@ + + + diff --git a/src/views/login/index.vue b/src/views/login/index.vue new file mode 100644 index 0000000..3b6a83c --- /dev/null +++ b/src/views/login/index.vue @@ -0,0 +1,208 @@ + + + + + + + diff --git a/src/views/login/utils/enums.ts b/src/views/login/utils/enums.ts new file mode 100644 index 0000000..8a2faf5 --- /dev/null +++ b/src/views/login/utils/enums.ts @@ -0,0 +1,32 @@ +const operates = [ + { + title: "手机登录" + }, + { + title: "二维码登录" + }, + { + title: "注册" + } +]; + +const thirdParty = [ + { + title: "微信", + icon: "wechat" + }, + { + title: "支付宝", + icon: "alipay" + }, + { + title: "QQ", + icon: "qq" + }, + { + title: "微博", + icon: "weibo" + } +]; + +export { operates, thirdParty }; diff --git a/src/views/login/utils/motion.ts b/src/views/login/utils/motion.ts new file mode 100644 index 0000000..fb53806 --- /dev/null +++ b/src/views/login/utils/motion.ts @@ -0,0 +1,40 @@ +import { h, defineComponent, withDirectives, resolveDirective } from "vue"; + +// 封装@vueuse/motion动画库中的自定义指令v-motion +export default defineComponent({ + name: "Motion", + props: { + delay: { + type: Number, + default: 50 + } + }, + render() { + const { delay } = this; + const motion = resolveDirective("motion"); + return withDirectives( + h( + "div", + {}, + { + default: () => [this.$slots.default()] + } + ), + [ + [ + motion, + { + initial: { opacity: 0, y: 100 }, + enter: { + opacity: 1, + y: 0, + transition: { + delay + } + } + } + ] + ] + ); + } +}); diff --git a/src/views/login/utils/rule.ts b/src/views/login/utils/rule.ts new file mode 100644 index 0000000..fd28f6c --- /dev/null +++ b/src/views/login/utils/rule.ts @@ -0,0 +1,128 @@ +import { reactive } from "vue"; +import { isPhone } from "/@/utils/is"; +import type { FormRules } from "element-plus"; +import { useUserStoreHook } from "/@/store/modules/user"; + +/** 6位数字验证码正则 */ +export const REGEXP_SIX = /^\d{6}$/; + +/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */ +export const REGEXP_PWD = + /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/; + +/** 登陆校验 */ +const loginRules = reactive({ + username: [{ required: true, message: "请输入账号", trigger: "blur" }], + password: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入密码")); + } else if (!REGEXP_PWD.test(value)) { + callback( + new Error("密码格式应为8-18位数字、字母、符号的任意两种组合") + ); + } else { + callback(); + } + }, + trigger: "blur" + } + ], + verifyCode: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入验证码")); + } else if (useUserStoreHook().verifyCode !== value) { + callback(new Error("请输入正确的验证码")); + } else { + callback(); + } + }, + trigger: "blur" + } + ] +}); + +/** 手机登陆校验 */ +const phoneRules = reactive({ + phone: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入手机号码")); + } else if (!isPhone(value)) { + callback(new Error("请输入正确的手机号码格式")); + } else { + callback(); + } + }, + trigger: "blur" + } + ], + verifyCode: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入验证码")); + } else if (!REGEXP_SIX.test(value)) { + callback(new Error("请输入6位数字验证码")); + } else { + callback(); + } + }, + trigger: "blur" + } + ] +}); + +/** 忘记密码校验 */ +const updateRules = reactive({ + phone: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入手机号码")); + } else if (!isPhone(value)) { + callback(new Error("请输入正确的手机号码格式")); + } else { + callback(); + } + }, + trigger: "blur" + } + ], + verifyCode: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入验证码")); + } else if (!REGEXP_SIX.test(value)) { + callback(new Error("请输入6位数字验证码")); + } else { + callback(); + } + }, + trigger: "blur" + } + ], + password: [ + { + validator: (rule, value, callback) => { + if (value === "") { + callback(new Error("请输入密码")); + } else if (!REGEXP_PWD.test(value)) { + callback( + new Error("密码格式应为8-18位数字、字母、符号的任意两种组合") + ); + } else { + callback(); + } + }, + trigger: "blur" + } + ] +}); + +export { loginRules, phoneRules, updateRules }; diff --git a/src/views/login/utils/static.ts b/src/views/login/utils/static.ts new file mode 100644 index 0000000..a9e62db --- /dev/null +++ b/src/views/login/utils/static.ts @@ -0,0 +1,10 @@ +import { computed } from "vue"; +import bg from "/@/assets/login/bg.png"; +import avatar from "/@/assets/login/avatar.svg?component"; +import illustration from "/@/assets/login/illustration.svg?component"; + +const currentWeek = computed(() => { + return illustration; +}); + +export { bg, avatar, currentWeek }; diff --git a/src/views/login/utils/verifyCode.ts b/src/views/login/utils/verifyCode.ts new file mode 100644 index 0000000..be41a13 --- /dev/null +++ b/src/views/login/utils/verifyCode.ts @@ -0,0 +1,50 @@ +import type { FormInstance, FormItemProp } from "element-plus"; +import { cloneDeep } from "lodash-unified"; +import { ref } from "vue"; + +const isDisabled = ref(false); +const TEXT = "获取验证码"; +const timer = ref(null); +const text = ref(TEXT); + +export const useVerifyCode = () => { + const start = async ( + formEl: FormInstance | undefined, + props: FormItemProp, + time = 60 + ) => { + if (!formEl) return; + const initTime = cloneDeep(time); + await formEl.validateField(props, isValid => { + if (isValid) { + clearInterval(timer.value); + timer.value = setInterval(() => { + if (time > 0) { + text.value = `${time}秒后重新获取`; + isDisabled.value = true; + time -= 1; + } else { + text.value = TEXT; + isDisabled.value = false; + clearInterval(timer.value); + time = initTime; + } + }, 1000); + } + }); + }; + + const end = () => { + text.value = TEXT; + isDisabled.value = false; + clearInterval(timer.value); + }; + + return { + isDisabled, + timer, + text, + start, + end + }; +};