xiaoxian521
2 years ago
28 changed files with 1644 additions and 431 deletions
-
2build/plugins.ts
-
8package.json
-
392pnpm-lock.yaml
-
7src/components/ReIcon/src/iconifyIconOnline.ts
-
12src/components/ReImageVerify/index.ts
-
85src/components/ReImageVerify/src/hooks.ts
-
48src/components/ReImageVerify/src/index.vue
-
10src/components/ReQrcode/index.ts
-
8src/components/ReQrcode/src/index.scss
-
262src/components/ReQrcode/src/index.tsx
-
2src/router/modules/remaining.ts
-
2src/store/modules/types.ts
-
12src/store/modules/user.ts
-
141src/style/login.css
-
10src/style/sidebar.scss
-
22src/utils/is.ts
-
4src/utils/useComponent.ts
-
152src/views/login.vue
-
96src/views/login/components/phone.vue
-
22src/views/login/components/qrCode.vue
-
169src/views/login/components/regist.vue
-
141src/views/login/components/update.vue
-
208src/views/login/index.vue
-
32src/views/login/utils/enums.ts
-
40src/views/login/utils/motion.ts
-
128src/views/login/utils/rule.ts
-
10src/views/login/utils/static.ts
-
50src/views/login/utils/verifyCode.ts
@ -17,6 +17,7 @@ specifiers: |
|||||
"@types/mockjs": 1.0.3 |
"@types/mockjs": 1.0.3 |
||||
"@types/node": 14.14.14 |
"@types/node": 14.14.14 |
||||
"@types/nprogress": 0.2.0 |
"@types/nprogress": 0.2.0 |
||||
|
"@types/qrcode": ^1.4.2 |
||||
"@types/qs": ^6.9.7 |
"@types/qs": ^6.9.7 |
||||
"@typescript-eslint/eslint-plugin": ^5.10.2 |
"@typescript-eslint/eslint-plugin": ^5.10.2 |
||||
"@typescript-eslint/parser": ^5.10.2 |
"@typescript-eslint/parser": ^5.10.2 |
||||
@ -30,11 +31,11 @@ specifiers: |
|||||
"@vueuse/shared": ^8.3.1 |
"@vueuse/shared": ^8.3.1 |
||||
animate.css: ^4.1.1 |
animate.css: ^4.1.1 |
||||
autoprefixer: ^10.4.5 |
autoprefixer: ^10.4.5 |
||||
axios: ^0.26.1 |
|
||||
|
axios: ^0.27.2 |
||||
cross-env: 7.0.3 |
cross-env: 7.0.3 |
||||
css-color-function: ^1.3.3 |
css-color-function: ^1.3.3 |
||||
dayjs: ^1.11.0 |
dayjs: ^1.11.0 |
||||
element-plus: ^2.1.10 |
|
||||
|
element-plus: ^2.1.11 |
||||
element-resize-detector: ^1.2.3 |
element-resize-detector: ^1.2.3 |
||||
eslint: ^8.8.0 |
eslint: ^8.8.0 |
||||
eslint-plugin-prettier: ^4.0.0 |
eslint-plugin-prettier: ^4.0.0 |
||||
@ -57,6 +58,7 @@ specifiers: |
|||||
postcss-scss: ^4.0.3 |
postcss-scss: ^4.0.3 |
||||
prettier: ^2.5.1 |
prettier: ^2.5.1 |
||||
pretty-quick: 3.1.1 |
pretty-quick: 3.1.1 |
||||
|
qrcode: ^1.5.0 |
||||
qs: ^6.10.2 |
qs: ^6.10.2 |
||||
resize-observer-polyfill: ^1.5.1 |
resize-observer-polyfill: ^1.5.1 |
||||
responsive-storage: ^1.0.11 |
responsive-storage: ^1.0.11 |
||||
@ -72,7 +74,7 @@ specifiers: |
|||||
stylelint-config-standard: ^24.0.0 |
stylelint-config-standard: ^24.0.0 |
||||
stylelint-order: ^5.0.0 |
stylelint-order: ^5.0.0 |
||||
typescript: ^4.6.3 |
typescript: ^4.6.3 |
||||
vite: ^2.9.5 |
|
||||
|
vite: ^2.9.6 |
||||
vite-plugin-mock: ^2.9.6 |
vite-plugin-mock: ^2.9.6 |
||||
vite-plugin-remove-console: ^0.0.7 |
vite-plugin-remove-console: ^0.0.7 |
||||
vite-plugin-windicss: ^1.8.4 |
vite-plugin-windicss: ^1.8.4 |
||||
@ -91,10 +93,10 @@ dependencies: |
|||||
"@vueuse/motion": 2.0.0-[email protected] |
"@vueuse/motion": 2.0.0-[email protected] |
||||
"@vueuse/shared": 8.3[email protected] |
"@vueuse/shared": 8.3[email protected] |
||||
animate.css: 4.1.1 |
animate.css: 4.1.1 |
||||
axios: 0.26.1 |
|
||||
|
axios: 0.27.2 |
||||
css-color-function: 1.3.3 |
css-color-function: 1.3.3 |
||||
dayjs: 1.11.0 |
dayjs: 1.11.0 |
||||
element-plus: 2.1.10[email protected] |
|
||||
|
element-plus: 2.1.11[email protected] |
||||
element-resize-detector: 1.2.4 |
element-resize-detector: 1.2.4 |
||||
js-cookie: 3.0.1 |
js-cookie: 3.0.1 |
||||
lodash: 4.17.21 |
lodash: 4.17.21 |
||||
@ -105,6 +107,7 @@ dependencies: |
|||||
nprogress: 0.2.0 |
nprogress: 0.2.0 |
||||
path: 0.12.7 |
path: 0.12.7 |
||||
pinia: 2.0[email protected][email protected] |
pinia: 2.0[email protected][email protected] |
||||
|
qrcode: 1.5.0 |
||||
qs: 6.10.3 |
qs: 6.10.3 |
||||
resize-observer-polyfill: 1.5.1 |
resize-observer-polyfill: 1.5.1 |
||||
responsive-storage: 1.0[email protected] |
responsive-storage: 1.0[email protected] |
||||
@ -120,7 +123,7 @@ devDependencies: |
|||||
"@iconify-icons/ep": 1.2.4 |
"@iconify-icons/ep": 1.2.4 |
||||
"@iconify-icons/ri": 1.2.1 |
"@iconify-icons/ri": 1.2.1 |
||||
"@iconify/vue": 3.2[email protected] |
"@iconify/vue": 3.2[email protected] |
||||
"@intlify/vite-plugin-vue-i18n": 3.4.0_3d08e1d9025840888da5ae870455a383 |
|
||||
|
"@intlify/vite-plugin-vue-i18n": 3.4.0_95de83a8f1aaeaa2a723e5fbfab1aab7 |
||||
"@pureadmin/theme": 1.1.0 |
"@pureadmin/theme": 1.1.0 |
||||
"@types/element-resize-detector": 1.1.3 |
"@types/element-resize-detector": 1.1.3 |
||||
"@types/js-cookie": 3.0.1 |
"@types/js-cookie": 3.0.1 |
||||
@ -129,11 +132,12 @@ devDependencies: |
|||||
"@types/mockjs": 1.0.3 |
"@types/mockjs": 1.0.3 |
||||
"@types/node": 14.14.14 |
"@types/node": 14.14.14 |
||||
"@types/nprogress": 0.2.0 |
"@types/nprogress": 0.2.0 |
||||
|
"@types/qrcode": 1.4.2 |
||||
"@types/qs": 6.9.7 |
"@types/qs": 6.9.7 |
||||
"@typescript-eslint/eslint-plugin": 5.15.0_8deb5df5f68df203b82d505eb95b6b75 |
"@typescript-eslint/eslint-plugin": 5.15.0_8deb5df5f68df203b82d505eb95b6b75 |
||||
"@typescript-eslint/parser": 5.15[email protected][email protected] |
"@typescript-eslint/parser": 5.15[email protected][email protected] |
||||
"@vitejs/plugin-legacy": 1.8[email protected].5 |
|
||||
"@vitejs/plugin-vue": 2.3[email protected].5[email protected] |
|
||||
|
"@vitejs/plugin-legacy": 1.8[email protected].6 |
||||
|
"@vitejs/plugin-vue": 2.3[email protected].6[email protected] |
||||
"@vitejs/plugin-vue-jsx": 1.3.10 |
"@vitejs/plugin-vue-jsx": 1.3.10 |
||||
"@vue/eslint-config-prettier": 7.0[email protected][email protected] |
"@vue/eslint-config-prettier": 7.0[email protected][email protected] |
||||
"@vue/eslint-config-typescript": 10.0.0_67e26bb50fed2173443e3fe1262a69b2 |
"@vue/eslint-config-typescript": 10.0.0_67e26bb50fed2173443e3fe1262a69b2 |
||||
@ -162,10 +166,10 @@ devDependencies: |
|||||
stylelint-config-standard: 24.0[email protected] |
stylelint-config-standard: 24.0[email protected] |
||||
stylelint-order: 5.0[email protected] |
stylelint-order: 5.0[email protected] |
||||
typescript: 4.6.3 |
typescript: 4.6.3 |
||||
vite: 2.9.5[email protected] |
|
||||
vite-plugin-mock: 2.9.6_9bee6d01fd796cb52b526d4503041d36 |
|
||||
|
vite: 2.9.6[email protected] |
||||
|
vite-plugin-mock: 2.9.6_394b88c4f118c1b7768fcf99c99028ca |
||||
vite-plugin-remove-console: 0.0.7 |
vite-plugin-remove-console: 0.0.7 |
||||
vite-plugin-windicss: 1.8[email protected].5 |
|
||||
|
vite-plugin-windicss: 1.8[email protected].6 |
||||
vite-svg-loader: 2.2.0 |
vite-svg-loader: 2.2.0 |
||||
vue-eslint-parser: 8.3[email protected] |
vue-eslint-parser: 8.3[email protected] |
||||
windicss: 3.5.1 |
windicss: 3.5.1 |
||||
@ -1040,7 +1044,7 @@ packages: |
|||||
engines: { node: ">= 12" } |
engines: { node: ">= 12" } |
||||
dev: false |
dev: false |
||||
|
|
||||
/@intlify/vite-plugin-vue-i18n/3.4.0_3d08e1d9025840888da5ae870455a383: |
|
||||
|
/@intlify/vite-plugin-vue-i18n/3.4.0_95de83a8f1aaeaa2a723e5fbfab1aab7: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA== |
integrity: sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA== |
||||
@ -1062,7 +1066,7 @@ packages: |
|||||
debug: 4.3.4 |
debug: 4.3.4 |
||||
fast-glob: 3.2.11 |
fast-glob: 3.2.11 |
||||
source-map: 0.6.1 |
source-map: 0.6.1 |
||||
vite: 2.9.5[email protected] |
|
||||
|
vite: 2.9.6[email protected] |
||||
vue-i18n: 9.2.0-[email protected] |
vue-i18n: 9.2.0-[email protected] |
||||
transitivePeerDependencies: |
transitivePeerDependencies: |
||||
- supports-color |
- supports-color |
||||
@ -1134,13 +1138,6 @@ packages: |
|||||
fastq: 1.13.0 |
fastq: 1.13.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
/@popperjs/core/2.11.5: |
|
||||
resolution: |
|
||||
{ |
|
||||
integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== |
|
||||
} |
|
||||
dev: false |
|
||||
|
|
||||
/@pureadmin/components/[email protected]: |
/@pureadmin/components/[email protected]: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -1209,6 +1206,13 @@ packages: |
|||||
picomatch: 2.3.1 |
picomatch: 2.3.1 |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/@sxzz/popperjs-es/2.11.7: |
||||
|
resolution: |
||||
|
{ |
||||
|
integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ== |
||||
|
} |
||||
|
dev: false |
||||
|
|
||||
/@trysound/sax/0.2.0: |
/@trysound/sax/0.2.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -1322,6 +1326,15 @@ packages: |
|||||
} |
} |
||||
dev: true |
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: |
/@types/qs/6.9.7: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -1488,7 +1501,7 @@ packages: |
|||||
eslint-visitor-keys: 3.3.0 |
eslint-visitor-keys: 3.3.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
/@vitejs/plugin-legacy/[email protected].5: |
|
||||
|
/@vitejs/plugin-legacy/[email protected].6: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-kmBWKq7EeNvzS4AqPBqUKdoWG/NYQXh7StUFMWR3D21aN5Mfmar7CTO2a7K+bBxJH/vAL9gnnueA0wb7cycCmQ== |
integrity: sha512-kmBWKq7EeNvzS4AqPBqUKdoWG/NYQXh7StUFMWR3D21aN5Mfmar7CTO2a7K+bBxJH/vAL9gnnueA0wb7cycCmQ== |
||||
@ -1502,7 +1515,7 @@ packages: |
|||||
magic-string: 0.26.1 |
magic-string: 0.26.1 |
||||
regenerator-runtime: 0.13.9 |
regenerator-runtime: 0.13.9 |
||||
systemjs: 6.12.1 |
systemjs: 6.12.1 |
||||
vite: 2.9.5[email protected] |
|
||||
|
vite: 2.9.6[email protected] |
||||
dev: true |
dev: true |
||||
|
|
||||
/@vitejs/plugin-vue-jsx/1.3.10: |
/@vitejs/plugin-vue-jsx/1.3.10: |
||||
@ -1522,7 +1535,7 @@ packages: |
|||||
- supports-color |
- supports-color |
||||
dev: true |
dev: true |
||||
|
|
||||
/@vitejs/plugin-vue/[email protected].5[email protected]: |
|
||||
|
/@vitejs/plugin-vue/[email protected].6[email protected]: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-YNzBt8+jt6bSwpt7LP890U1UcTOIZZxfpE5WOJ638PNxSEKOqAi0+FSKS0nVeukfdZ0Ai/H7AFd6k3hayfGZqQ== |
integrity: sha512-YNzBt8+jt6bSwpt7LP890U1UcTOIZZxfpE5WOJ638PNxSEKOqAi0+FSKS0nVeukfdZ0Ai/H7AFd6k3hayfGZqQ== |
||||
@ -1532,7 +1545,7 @@ packages: |
|||||
vite: ^2.5.10 |
vite: ^2.5.10 |
||||
vue: ^3.2.25 |
vue: ^3.2.25 |
||||
dependencies: |
dependencies: |
||||
vite: 2.9.5[email protected] |
|
||||
|
vite: 2.9.6[email protected] |
||||
vue: 3.2.33 |
vue: 3.2.33 |
||||
dev: true |
dev: true |
||||
|
|
||||
@ -2026,7 +2039,6 @@ packages: |
|||||
integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== |
integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== |
||||
} |
} |
||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dev: true |
|
||||
|
|
||||
/ansi-styles/3.2.1: |
/ansi-styles/3.2.1: |
||||
resolution: |
resolution: |
||||
@ -2046,7 +2058,6 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
color-convert: 2.0.1 |
color-convert: 2.0.1 |
||||
dev: true |
|
||||
|
|
||||
/anymatch/3.1.2: |
/anymatch/3.1.2: |
||||
resolution: |
resolution: |
||||
@ -2114,13 +2125,17 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dev: true |
dev: true |
||||
|
|
||||
/async-validator/4.0.8: |
|
||||
|
/async-validator/4.1.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-vx1kyOCuSJqB5IVatlybUkV/e22sdx+V0XohCWbBfbbzbiLFt6fHxfWg6UEBhFw0gVgZtaSLTJtugmP4rdGQAQ== |
|
||||
|
integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA== |
||||
} |
} |
||||
dev: false |
dev: false |
||||
|
|
||||
|
/asynckit/0.4.0: |
||||
|
resolution: { integrity: sha1-x57Zf380y48robyXkLzDZkdLS3k= } |
||||
|
dev: false |
||||
|
|
||||
/autoprefixer/[email protected]: |
/autoprefixer/[email protected]: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2140,13 +2155,14 @@ packages: |
|||||
postcss-value-parser: 4.2.0 |
postcss-value-parser: 4.2.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
/axios/0.26.1: |
|
||||
|
/axios/0.27.2: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA== |
|
||||
|
integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== |
||||
} |
} |
||||
dependencies: |
dependencies: |
||||
follow-redirects: 1.14.9 |
follow-redirects: 1.14.9 |
||||
|
form-data: 4.0.0 |
||||
transitivePeerDependencies: |
transitivePeerDependencies: |
||||
- debug |
- debug |
||||
dev: false |
dev: false |
||||
@ -2279,7 +2295,6 @@ packages: |
|||||
integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== |
integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== |
||||
} |
} |
||||
engines: { node: ">=6" } |
engines: { node: ">=6" } |
||||
dev: true |
|
||||
|
|
||||
/camelcase/6.3.0: |
/camelcase/6.3.0: |
||||
resolution: |
resolution: |
||||
@ -2389,6 +2404,17 @@ packages: |
|||||
string-width: 4.2.3 |
string-width: 4.2.3 |
||||
dev: true |
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: |
/cliui/7.0.4: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2431,7 +2457,6 @@ packages: |
|||||
engines: { node: ">=7.0.0" } |
engines: { node: ">=7.0.0" } |
||||
dependencies: |
dependencies: |
||||
color-name: 1.1.4 |
color-name: 1.1.4 |
||||
dev: true |
|
||||
|
|
||||
/color-name/1.1.3: |
/color-name/1.1.3: |
||||
resolution: { integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= } |
resolution: { integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= } |
||||
@ -2491,6 +2516,16 @@ packages: |
|||||
} |
} |
||||
dev: true |
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: |
/commander/7.2.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2820,6 +2855,13 @@ packages: |
|||||
} |
} |
||||
dev: false |
dev: false |
||||
|
|
||||
|
/dayjs/1.11.1: |
||||
|
resolution: |
||||
|
{ |
||||
|
integrity: sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA== |
||||
|
} |
||||
|
dev: false |
||||
|
|
||||
/debug/2.6.9: |
/debug/2.6.9: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2879,7 +2921,6 @@ packages: |
|||||
/decamelize/1.2.0: |
/decamelize/1.2.0: |
||||
resolution: { integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= } |
resolution: { integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= } |
||||
engines: { node: ">=0.10.0" } |
engines: { node: ">=0.10.0" } |
||||
dev: true |
|
||||
|
|
||||
/deep-is/0.1.4: |
/deep-is/0.1.4: |
||||
resolution: |
resolution: |
||||
@ -2904,6 +2945,11 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/delayed-stream/1.0.0: |
||||
|
resolution: { integrity: sha1-3zrhmayt+31ECqrgsp4icrJOxhk= } |
||||
|
engines: { node: ">=0.4.0" } |
||||
|
dev: false |
||||
|
|
||||
/diff/4.0.2: |
/diff/4.0.2: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2912,6 +2958,13 @@ packages: |
|||||
engines: { node: ">=0.3.1" } |
engines: { node: ">=0.3.1" } |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/dijkstrajs/1.0.2: |
||||
|
resolution: |
||||
|
{ |
||||
|
integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg== |
||||
|
} |
||||
|
dev: false |
||||
|
|
||||
/dir-glob/3.0.1: |
/dir-glob/3.0.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -2992,10 +3045,10 @@ packages: |
|||||
} |
} |
||||
dev: true |
dev: true |
||||
|
|
||||
/element-plus/2.1.10[email protected]: |
|
||||
|
/element-plus/2.1.11[email protected]: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-sS9OMgP20dlYipmzHlEEgCJU+ID7+03YpRpoJWNQEH736C6ArmDMLnGFe8DUjPvwbUEXRA2d0Eo5d0apFgkSqg== |
|
||||
|
integrity: sha512-s4X0I8s787tv+9UdekBC1g7v42Fj4bucPAmu03EjbgrGrV7BJvkoBGuK52lNfu4yC76bl6Uyjesd5Fu8CMakSw== |
||||
} |
} |
||||
peerDependencies: |
peerDependencies: |
||||
vue: ^3.2.0 |
vue: ^3.2.0 |
||||
@ -3003,12 +3056,12 @@ packages: |
|||||
"@ctrl/tinycolor": 3.4.1 |
"@ctrl/tinycolor": 3.4.1 |
||||
"@element-plus/icons-vue": 1.1[email protected] |
"@element-plus/icons-vue": 1.1[email protected] |
||||
"@floating-ui/dom": 0.4.5 |
"@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": 4.14.182 |
||||
"@types/lodash-es": 4.17.6 |
"@types/lodash-es": 4.17.6 |
||||
"@vueuse/core": 8.3[email protected] |
"@vueuse/core": 8.3[email protected] |
||||
async-validator: 4.0.8 |
|
||||
dayjs: 1.11.0 |
|
||||
|
async-validator: 4.1.1 |
||||
|
dayjs: 1.11.1 |
||||
escape-html: 1.0.3 |
escape-html: 1.0.3 |
||||
lodash: 4.17.21 |
lodash: 4.17.21 |
||||
lodash-es: 4.17.21 |
lodash-es: 4.17.21 |
||||
@ -3034,7 +3087,13 @@ packages: |
|||||
{ |
{ |
||||
integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== |
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: |
/encodeurl/1.0.2: |
||||
resolution: { integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= } |
resolution: { integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= } |
||||
@ -3084,10 +3143,10 @@ packages: |
|||||
is-arrayish: 0.2.1 |
is-arrayish: 0.2.1 |
||||
dev: true |
dev: true |
||||
|
|
||||
/esbuild-android-64/0.14.36: |
|
||||
|
/esbuild-android-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw== |
|
||||
|
integrity: sha512-aRFxR3scRKkbmNuGAK+Gee3+yFxkTJO/cx83Dkyzo4CnQl/2zVSurtG6+G86EQIZ+w+VYngVyK7P3HyTBKu3nw== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3096,10 +3155,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-android-arm64/0.14.36: |
|
||||
|
/esbuild-android-arm64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg== |
|
||||
|
integrity: sha512-L2NgQRWuHFI89IIZIlpAcINy9FvBk6xFVZ7xGdOwIm8VyhX1vNCEqUJO3DPSSy945Gzdg98cxtNt8Grv1CsyhA== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [arm64] |
cpu: [arm64] |
||||
@ -3108,10 +3167,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-darwin-64/0.14.36: |
|
||||
|
/esbuild-darwin-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ== |
|
||||
|
integrity: sha512-5JJvgXkX87Pd1Og0u/NJuO7TSqAikAcQQ74gyJ87bqWRVeouky84ICoV4sN6VV53aTW+NE87qLdGY4QA2S7KNA== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3120,10 +3179,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-darwin-arm64/0.14.36: |
|
||||
|
/esbuild-darwin-arm64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw== |
|
||||
|
integrity: sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [arm64] |
cpu: [arm64] |
||||
@ -3132,10 +3191,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-freebsd-64/0.14.36: |
|
||||
|
/esbuild-freebsd-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww== |
|
||||
|
integrity: sha512-epnPbhZUt93xV5cgeY36ZxPXDsQeO55DppzsIgWM8vgiG/Rz+qYDLmh5ts3e+Ln1wA9dQ+nZmVHw+RjaW3I5Ig== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3144,10 +3203,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-freebsd-arm64/0.14.36: |
|
||||
|
/esbuild-freebsd-arm64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA== |
|
||||
|
integrity: sha512-/9icXUYJWherhk+y5fjPI5yNUdFPtXHQlwP7/K/zg8t8lQdHVj20SqU9/udQmeUo5pDFHMYzcEFfJqgOVeKNNQ== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [arm64] |
cpu: [arm64] |
||||
@ -3156,10 +3215,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-32/0.14.36: |
|
||||
|
/esbuild-linux-32/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw== |
|
||||
|
integrity: sha512-QfgfeNHRFvr2XeHFzP8kOZVnal3QvST3A0cgq32ZrHjSMFTdgXhMhmWdKzRXP/PKcfv3e2OW9tT9PpcjNvaq6g== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [ia32] |
cpu: [ia32] |
||||
@ -3168,10 +3227,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-64/0.14.36: |
|
||||
|
/esbuild-linux-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg== |
|
||||
|
integrity: sha512-uuZHNmqcs+Bj1qiW9k/HZU3FtIHmYiuxZ/6Aa+/KHb/pFKr7R3aVqvxlAudYI9Fw3St0VCPfv7QBpUITSmBR1Q== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3180,10 +3239,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-arm/0.14.36: |
|
||||
|
/esbuild-linux-arm/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg== |
|
||||
|
integrity: sha512-FiFvQe8J3VKTDXG01JbvoVRXQ0x6UZwyrU4IaLBZeq39Bsbatd94Fuc3F1RGqPF5RbIWW7RvkVQjn79ejzysnA== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [arm] |
cpu: [arm] |
||||
@ -3192,10 +3251,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-arm64/0.14.36: |
|
||||
|
/esbuild-linux-arm64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw== |
|
||||
|
integrity: sha512-HlMGZTEsBrXrivr64eZ/EO0NQM8H8DuSENRok9d+Jtvq8hOLzrxfsAT9U94K3KOGk2XgCmkaI2KD8hX7F97lvA== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [arm64] |
cpu: [arm64] |
||||
@ -3204,10 +3263,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-mips64le/0.14.36: |
|
||||
|
/esbuild-linux-mips64le/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA== |
|
||||
|
integrity: sha512-qd1dLf2v7QBiI5wwfil9j0HG/5YMFBAmMVmdeokbNAMbcg49p25t6IlJFXAeLzogv1AvgaXRXvgFNhScYEUXGQ== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [mips64el] |
cpu: [mips64el] |
||||
@ -3216,10 +3275,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-ppc64le/0.14.36: |
|
||||
|
/esbuild-linux-ppc64le/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg== |
|
||||
|
integrity: sha512-mnbEm7o69gTl60jSuK+nn+pRsRHGtDPfzhrqEUXyCl7CTOCLtWN2bhK8bgsdp6J/2NyS/wHBjs1x8aBWwP2X9Q== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [ppc64] |
cpu: [ppc64] |
||||
@ -3228,10 +3287,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-riscv64/0.14.36: |
|
||||
|
/esbuild-linux-riscv64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A== |
|
||||
|
integrity: sha512-+p6YKYbuV72uikChRk14FSyNJZ4WfYkffj6Af0/Tw63/6TJX6TnIKE+6D3xtEc7DeDth1fjUOEqm+ApKFXbbVQ== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [riscv64] |
cpu: [riscv64] |
||||
@ -3240,10 +3299,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-linux-s390x/0.14.36: |
|
||||
|
/esbuild-linux-s390x/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg== |
|
||||
|
integrity: sha512-0zUsiDkGJiMHxBQ7JDU8jbaanUY975CdOW1YDrurjrM0vWHfjv9tLQsW9GSyEb/heSK1L5gaweRjzfUVBFoybQ== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [s390x] |
cpu: [s390x] |
||||
@ -3252,10 +3311,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-netbsd-64/0.14.36: |
|
||||
|
/esbuild-netbsd-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A== |
|
||||
|
integrity: sha512-cljBAApVwkpnJZfnRVThpRBGzCi+a+V9Ofb1fVkKhtrPLDYlHLrSYGtmnoTVWDQdU516qYI8+wOgcGZ4XIZh0Q== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3264,10 +3323,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-openbsd-64/0.14.36: |
|
||||
|
/esbuild-openbsd-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg== |
|
||||
|
integrity: sha512-CDswYr2PWPGEPpLDUO50mL3WO/07EMjnZDNKpmaxUPsrW+kVM3LoAqr/CE8UbzugpEiflYqJsGPLirThRB18IQ== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3276,10 +3335,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-sunos-64/0.14.36: |
|
||||
|
/esbuild-sunos-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ== |
|
||||
|
integrity: sha512-2mfIoYW58gKcC3bck0j7lD3RZkqYA7MmujFYmSn9l6TiIcAMpuEvqksO+ntBgbLep/eyjpgdplF7b+4T9VJGOA== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3288,10 +3347,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-windows-32/0.14.36: |
|
||||
|
/esbuild-windows-32/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w== |
|
||||
|
integrity: sha512-L2BmEeFZATAvU+FJzJiRLFUP+d9RHN+QXpgaOrs2klshoAm1AE6Us4X6fS9k33Uy5SzScn2TpcgecbqJza1Hjw== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [ia32] |
cpu: [ia32] |
||||
@ -3300,10 +3359,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-windows-64/0.14.36: |
|
||||
|
/esbuild-windows-64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ== |
|
||||
|
integrity: sha512-Khy4wVmebnzue8aeSXLC+6clo/hRYeNIm0DyikoEqX+3w3rcvrhzpoix0S+MF9vzh6JFskkIGD7Zx47ODJNyCw== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [x64] |
cpu: [x64] |
||||
@ -3312,10 +3371,10 @@ packages: |
|||||
dev: true |
dev: true |
||||
optional: true |
optional: true |
||||
|
|
||||
/esbuild-windows-arm64/0.14.36: |
|
||||
|
/esbuild-windows-arm64/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q== |
|
||||
|
integrity: sha512-k3FGCNmHBkqdJXuJszdWciAH77PukEyDsdIryEHn9cKLQFxzhT39dSumeTuggaQcXY57UlmLGIkklWZo2qzHpw== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
cpu: [arm64] |
cpu: [arm64] |
||||
@ -3333,35 +3392,35 @@ packages: |
|||||
requiresBuild: true |
requiresBuild: true |
||||
dev: true |
dev: true |
||||
|
|
||||
/esbuild/0.14.36: |
|
||||
|
/esbuild/0.14.38: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw== |
|
||||
|
integrity: sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA== |
||||
} |
} |
||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
hasBin: true |
hasBin: true |
||||
requiresBuild: true |
requiresBuild: true |
||||
optionalDependencies: |
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 |
dev: true |
||||
|
|
||||
/escalade/3.1.1: |
/escalade/3.1.1: |
||||
@ -3800,7 +3859,6 @@ packages: |
|||||
dependencies: |
dependencies: |
||||
locate-path: 5.0.0 |
locate-path: 5.0.0 |
||||
path-exists: 4.0.0 |
path-exists: 4.0.0 |
||||
dev: true |
|
||||
|
|
||||
/find-up/5.0.0: |
/find-up/5.0.0: |
||||
resolution: |
resolution: |
||||
@ -3844,6 +3902,18 @@ packages: |
|||||
optional: true |
optional: true |
||||
dev: false |
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: |
/fraction.js/4.2.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -3932,7 +4002,6 @@ packages: |
|||||
integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== |
integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== |
||||
} |
} |
||||
engines: { node: 6.* || 8.* || >= 10.* } |
engines: { node: 6.* || 8.* || >= 10.* } |
||||
dev: true |
|
||||
|
|
||||
/get-intrinsic/1.1.1: |
/get-intrinsic/1.1.1: |
||||
resolution: |
resolution: |
||||
@ -4336,7 +4405,6 @@ packages: |
|||||
integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== |
integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== |
||||
} |
} |
||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dev: true |
|
||||
|
|
||||
/is-glob/4.0.3: |
/is-glob/4.0.3: |
||||
resolution: |
resolution: |
||||
@ -4645,7 +4713,6 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
p-locate: 4.1.0 |
p-locate: 4.1.0 |
||||
dev: true |
|
||||
|
|
||||
/locate-path/6.0.0: |
/locate-path/6.0.0: |
||||
resolution: |
resolution: |
||||
@ -4879,6 +4946,24 @@ packages: |
|||||
picomatch: 2.3.1 |
picomatch: 2.3.1 |
||||
dev: true |
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: |
/mimic-fn/2.1.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -5137,7 +5222,6 @@ packages: |
|||||
engines: { node: ">=6" } |
engines: { node: ">=6" } |
||||
dependencies: |
dependencies: |
||||
p-try: 2.2.0 |
p-try: 2.2.0 |
||||
dev: true |
|
||||
|
|
||||
/p-limit/3.1.0: |
/p-limit/3.1.0: |
||||
resolution: |
resolution: |
||||
@ -5157,7 +5241,6 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
p-limit: 2.3.0 |
p-limit: 2.3.0 |
||||
dev: true |
|
||||
|
|
||||
/p-locate/5.0.0: |
/p-locate/5.0.0: |
||||
resolution: |
resolution: |
||||
@ -5185,7 +5268,6 @@ packages: |
|||||
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== |
integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== |
||||
} |
} |
||||
engines: { node: ">=6" } |
engines: { node: ">=6" } |
||||
dev: true |
|
||||
|
|
||||
/parent-module/1.0.1: |
/parent-module/1.0.1: |
||||
resolution: |
resolution: |
||||
@ -5224,7 +5306,6 @@ packages: |
|||||
integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== |
integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== |
||||
} |
} |
||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dev: true |
|
||||
|
|
||||
/path-is-absolute/1.0.1: |
/path-is-absolute/1.0.1: |
||||
resolution: { integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18= } |
resolution: { integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18= } |
||||
@ -5317,6 +5398,14 @@ packages: |
|||||
semver-compare: 1.0.0 |
semver-compare: 1.0.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/pngjs/5.0.0: |
||||
|
resolution: |
||||
|
{ |
||||
|
integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw== |
||||
|
} |
||||
|
engines: { node: ">=10.13.0" } |
||||
|
dev: false |
||||
|
|
||||
/popmotion/11.0.3: |
/popmotion/11.0.3: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -5864,6 +5953,20 @@ packages: |
|||||
engines: { node: ">=0.6.0", teleport: ">=0.2.0" } |
engines: { node: ">=0.6.0", teleport: ">=0.2.0" } |
||||
dev: true |
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: |
/qs/6.10.3: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -5971,7 +6074,6 @@ packages: |
|||||
/require-directory/2.1.1: |
/require-directory/2.1.1: |
||||
resolution: { integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I= } |
resolution: { integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I= } |
||||
engines: { node: ">=0.10.0" } |
engines: { node: ">=0.10.0" } |
||||
dev: true |
|
||||
|
|
||||
/require-from-string/2.0.2: |
/require-from-string/2.0.2: |
||||
resolution: |
resolution: |
||||
@ -5981,6 +6083,13 @@ packages: |
|||||
engines: { node: ">=0.10.0" } |
engines: { node: ">=0.10.0" } |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/require-main-filename/2.0.0: |
||||
|
resolution: |
||||
|
{ |
||||
|
integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg== |
||||
|
} |
||||
|
dev: false |
||||
|
|
||||
/resize-observer-polyfill/1.5.1: |
/resize-observer-polyfill/1.5.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6190,6 +6299,10 @@ packages: |
|||||
lru-cache: 6.0.0 |
lru-cache: 6.0.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/set-blocking/2.0.0: |
||||
|
resolution: { integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc= } |
||||
|
dev: false |
||||
|
|
||||
/shebang-command/2.0.0: |
/shebang-command/2.0.0: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -6392,7 +6505,6 @@ packages: |
|||||
emoji-regex: 8.0.0 |
emoji-regex: 8.0.0 |
||||
is-fullwidth-code-point: 3.0.0 |
is-fullwidth-code-point: 3.0.0 |
||||
strip-ansi: 6.0.1 |
strip-ansi: 6.0.1 |
||||
dev: true |
|
||||
|
|
||||
/string_decoder/1.3.0: |
/string_decoder/1.3.0: |
||||
resolution: |
resolution: |
||||
@ -6423,7 +6535,6 @@ packages: |
|||||
engines: { node: ">=8" } |
engines: { node: ">=8" } |
||||
dependencies: |
dependencies: |
||||
ansi-regex: 5.0.1 |
ansi-regex: 5.0.1 |
||||
dev: true |
|
||||
|
|
||||
/strip-final-newline/2.0.0: |
/strip-final-newline/2.0.0: |
||||
resolution: |
resolution: |
||||
@ -6903,7 +7014,7 @@ packages: |
|||||
spdx-expression-parse: 3.0.1 |
spdx-expression-parse: 3.0.1 |
||||
dev: true |
dev: true |
||||
|
|
||||
/vite-plugin-mock/2.9.6_9bee6d01fd796cb52b526d4503041d36: |
|
||||
|
/vite-plugin-mock/2.9.6_394b88c4f118c1b7768fcf99c99028ca: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg== |
integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg== |
||||
@ -6923,7 +7034,7 @@ packages: |
|||||
fast-glob: 3.2.11 |
fast-glob: 3.2.11 |
||||
mockjs: 1.1.0 |
mockjs: 1.1.0 |
||||
path-to-regexp: 6.2.0 |
path-to-regexp: 6.2.0 |
||||
vite: 2.9.5[email protected] |
|
||||
|
vite: 2.9.6[email protected] |
||||
transitivePeerDependencies: |
transitivePeerDependencies: |
||||
- rollup |
- rollup |
||||
- supports-color |
- supports-color |
||||
@ -6936,7 +7047,7 @@ packages: |
|||||
} |
} |
||||
dev: true |
dev: true |
||||
|
|
||||
/vite-plugin-windicss/[email protected].5: |
|
||||
|
/vite-plugin-windicss/[email protected].6: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A== |
integrity: sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A== |
||||
@ -6947,7 +7058,7 @@ packages: |
|||||
"@windicss/plugin-utils": 1.8.4 |
"@windicss/plugin-utils": 1.8.4 |
||||
debug: 4.3.4 |
debug: 4.3.4 |
||||
kolorist: 1.5.1 |
kolorist: 1.5.1 |
||||
vite: 2.9.5[email protected] |
|
||||
|
vite: 2.9.6[email protected] |
||||
windicss: 3.5.1 |
windicss: 3.5.1 |
||||
transitivePeerDependencies: |
transitivePeerDependencies: |
||||
- supports-color |
- supports-color |
||||
@ -6963,10 +7074,10 @@ packages: |
|||||
svgo: 2.8.0 |
svgo: 2.8.0 |
||||
dev: true |
dev: true |
||||
|
|
||||
/vite/2.9.5[email protected]: |
|
||||
|
/vite/2.9.6[email protected]: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
integrity: sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg== |
|
||||
|
integrity: sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw== |
||||
} |
} |
||||
engines: { node: ">=12.2.0" } |
engines: { node: ">=12.2.0" } |
||||
hasBin: true |
hasBin: true |
||||
@ -6982,7 +7093,7 @@ packages: |
|||||
stylus: |
stylus: |
||||
optional: true |
optional: true |
||||
dependencies: |
dependencies: |
||||
esbuild: 0.14.36 |
|
||||
|
esbuild: 0.14.38 |
||||
postcss: 8.4.12 |
postcss: 8.4.12 |
||||
resolve: 1.22.0 |
resolve: 1.22.0 |
||||
rollup: 2.70.1 |
rollup: 2.70.1 |
||||
@ -7084,6 +7195,10 @@ packages: |
|||||
"@vue/shared": 3.2.33 |
"@vue/shared": 3.2.33 |
||||
dev: false |
dev: false |
||||
|
|
||||
|
/which-module/2.0.0: |
||||
|
resolution: { integrity: sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= } |
||||
|
dev: false |
||||
|
|
||||
/which/1.3.1: |
/which/1.3.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -7132,7 +7247,6 @@ packages: |
|||||
ansi-styles: 4.3.0 |
ansi-styles: 4.3.0 |
||||
string-width: 4.2.3 |
string-width: 4.2.3 |
||||
strip-ansi: 6.0.1 |
strip-ansi: 6.0.1 |
||||
dev: true |
|
||||
|
|
||||
/wrap-ansi/7.0.0: |
/wrap-ansi/7.0.0: |
||||
resolution: |
resolution: |
||||
@ -7161,6 +7275,13 @@ packages: |
|||||
signal-exit: 3.0.7 |
signal-exit: 3.0.7 |
||||
dev: true |
dev: true |
||||
|
|
||||
|
/y18n/4.0.3: |
||||
|
resolution: |
||||
|
{ |
||||
|
integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ== |
||||
|
} |
||||
|
dev: false |
||||
|
|
||||
/y18n/5.0.8: |
/y18n/5.0.8: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -7195,6 +7316,17 @@ packages: |
|||||
engines: { node: ">= 6" } |
engines: { node: ">= 6" } |
||||
dev: true |
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: |
/yargs-parser/20.2.9: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
@ -7211,6 +7343,26 @@ packages: |
|||||
engines: { node: ">=12" } |
engines: { node: ">=12" } |
||||
dev: true |
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: |
/yargs/17.3.1: |
||||
resolution: |
resolution: |
||||
{ |
{ |
||||
|
@ -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 |
||||
|
}; |
@ -0,0 +1,85 @@ |
|||||
|
import { ref, onMounted } from "vue"; |
||||
|
|
||||
|
/** |
||||
|
* 绘制图形验证码 |
||||
|
* @param width - 图形宽度 |
||||
|
* @param height - 图形高度 |
||||
|
*/ |
||||
|
export const useImageVerify = (width = 120, height = 40) => { |
||||
|
const domRef = ref<HTMLCanvasElement>(); |
||||
|
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; |
||||
|
} |
@ -0,0 +1,48 @@ |
|||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: "ReImageVerify" |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { watch } from "vue"; |
||||
|
import { useImageVerify } from "./hooks"; |
||||
|
|
||||
|
interface Props { |
||||
|
code?: string; |
||||
|
} |
||||
|
|
||||
|
interface Emits { |
||||
|
(e: "update:code", code: string): void; |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
code: "" |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits<Emits>(); |
||||
|
|
||||
|
const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify(); |
||||
|
|
||||
|
watch( |
||||
|
() => props.code, |
||||
|
newValue => { |
||||
|
setImgCode(newValue); |
||||
|
} |
||||
|
); |
||||
|
watch(imgCode, newValue => { |
||||
|
emit("update:code", newValue); |
||||
|
}); |
||||
|
|
||||
|
defineExpose({ getImgCode }); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<canvas |
||||
|
ref="domRef" |
||||
|
width="120" |
||||
|
height="40" |
||||
|
class="cursor-pointer" |
||||
|
@click="getImgCode" |
||||
|
/> |
||||
|
</template> |
@ -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; |
@ -0,0 +1,8 @@ |
|||||
|
.qrcode { |
||||
|
&--disabled { |
||||
|
background: rgba(255, 255, 255, 0.95); |
||||
|
& > div { |
||||
|
transform: translate(-50%, -50%); |
||||
|
} |
||||
|
} |
||||
|
} |
@ -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<string | Recordable[]>, |
||||
|
default: null |
||||
|
}, |
||||
|
// qrcode.js配置项
|
||||
|
options: { |
||||
|
type: Object as PropType<QRCodeRenderersOptions>, |
||||
|
default: (): QRCodeRenderersOptions => ({}) |
||||
|
}, |
||||
|
// 宽度
|
||||
|
width: propTypes.number.def(200), |
||||
|
// logo
|
||||
|
logo: { |
||||
|
type: [String, Object] as PropType<Partial<QrcodeLogo> | 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<Nullable<HTMLCanvasElement | HTMLImageElement>>(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 () => ( |
||||
|
<> |
||||
|
<div |
||||
|
v-loading={unref(loading)} |
||||
|
class="qrcode relative inline-block" |
||||
|
style={unref(wrapStyle)} |
||||
|
> |
||||
|
{props.tag === "canvas" ? ( |
||||
|
<canvas ref={wrapRef} onClick={clickCode}></canvas> |
||||
|
) : ( |
||||
|
<img ref={wrapRef} onClick={clickCode}></img> |
||||
|
)} |
||||
|
{props.disabled && ( |
||||
|
<div |
||||
|
class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center" |
||||
|
onClick={disabledClick} |
||||
|
> |
||||
|
<div class="absolute top-[50%] left-[50%] font-bold"> |
||||
|
<IconifyIconOffline |
||||
|
class="cursor-pointer outline-none" |
||||
|
icon="refresh-right" |
||||
|
width="30" |
||||
|
color="var(--el-color-primary)" |
||||
|
/> |
||||
|
<div>{props.disabledText}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
}); |
@ -0,0 +1,4 @@ |
|||||
|
import { h, resolveComponent } from "vue"; |
||||
|
|
||||
|
export const dynamicComponent = (component: string) => |
||||
|
h(resolveComponent(component)); |
@ -1,152 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
import { ref } from "vue"; |
|
||||
import { useRouter } from "vue-router"; |
|
||||
import { initRouter } from "/@/router/utils"; |
|
||||
import { storageSession } from "/@/utils/storage"; |
|
||||
import { addClass, removeClass } from "/@/utils/operate"; |
|
||||
import bg from "/@/assets/login/bg.png"; |
|
||||
import avatar from "/@/assets/login/avatar.svg?component"; |
|
||||
import illustration from "/@/assets/login/illustration.svg?component"; |
|
||||
|
|
||||
const router = useRouter(); |
|
||||
|
|
||||
let user = ref("admin"); |
|
||||
let pwd = ref("123456"); |
|
||||
|
|
||||
const onLogin = (): void => { |
|
||||
storageSession.setItem("info", { |
|
||||
username: "admin", |
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.test" |
|
||||
}); |
|
||||
initRouter("admin").then(() => {}); |
|
||||
router.push("/"); |
|
||||
}; |
|
||||
|
|
||||
function onUserFocus() { |
|
||||
addClass(document.querySelector(".user"), "focus"); |
|
||||
} |
|
||||
|
|
||||
function onUserBlur() { |
|
||||
if (user.value.length === 0) |
|
||||
removeClass(document.querySelector(".user"), "focus"); |
|
||||
} |
|
||||
|
|
||||
function onPwdFocus() { |
|
||||
addClass(document.querySelector(".pwd"), "focus"); |
|
||||
} |
|
||||
|
|
||||
function onPwdBlur() { |
|
||||
if (pwd.value.length === 0) |
|
||||
removeClass(document.querySelector(".pwd"), "focus"); |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<img :src="bg" class="wave" /> |
|
||||
<div class="login-container"> |
|
||||
<div class="img"> |
|
||||
<illustration /> |
|
||||
</div> |
|
||||
<div class="login-box"> |
|
||||
<div class="login-form"> |
|
||||
<avatar class="avatar" /> |
|
||||
<h2 |
|
||||
v-motion |
|
||||
:initial="{ |
|
||||
opacity: 0, |
|
||||
y: 100 |
|
||||
}" |
|
||||
:enter="{ |
|
||||
opacity: 1, |
|
||||
y: 0, |
|
||||
transition: { |
|
||||
delay: 100 |
|
||||
} |
|
||||
}" |
|
||||
> |
|
||||
Pure Admin |
|
||||
</h2> |
|
||||
<div |
|
||||
class="input-group user focus" |
|
||||
v-motion |
|
||||
:initial="{ |
|
||||
opacity: 0, |
|
||||
y: 100 |
|
||||
}" |
|
||||
:enter="{ |
|
||||
opacity: 1, |
|
||||
y: 0, |
|
||||
transition: { |
|
||||
delay: 200 |
|
||||
} |
|
||||
}" |
|
||||
> |
|
||||
<div class="icon"> |
|
||||
<IconifyIconOffline icon="user" width="14" height="14" /> |
|
||||
</div> |
|
||||
<div> |
|
||||
<h5>用户名</h5> |
|
||||
<input |
|
||||
type="text" |
|
||||
class="input" |
|
||||
v-model="user" |
|
||||
@focus="onUserFocus" |
|
||||
@blur="onUserBlur" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div |
|
||||
class="input-group pwd focus" |
|
||||
v-motion |
|
||||
:initial="{ |
|
||||
opacity: 0, |
|
||||
y: 100 |
|
||||
}" |
|
||||
:enter="{ |
|
||||
opacity: 1, |
|
||||
y: 0, |
|
||||
transition: { |
|
||||
delay: 300 |
|
||||
} |
|
||||
}" |
|
||||
> |
|
||||
<div class="icon"> |
|
||||
<IconifyIconOffline icon="lock" width="14" height="14" /> |
|
||||
</div> |
|
||||
<div> |
|
||||
<h5>密码</h5> |
|
||||
<input |
|
||||
type="password" |
|
||||
class="input" |
|
||||
v-model="pwd" |
|
||||
@focus="onPwdFocus" |
|
||||
@blur="onPwdBlur" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<button |
|
||||
class="btn" |
|
||||
v-motion |
|
||||
:initial="{ |
|
||||
opacity: 0, |
|
||||
y: 10 |
|
||||
}" |
|
||||
:enter="{ |
|
||||
opacity: 1, |
|
||||
y: 0, |
|
||||
transition: { |
|
||||
delay: 400 |
|
||||
} |
|
||||
}" |
|
||||
@click="onLogin" |
|
||||
> |
|
||||
登录 |
|
||||
</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style scoped> |
|
||||
@import url("/@/style/login.css"); |
|
||||
</style> |
|
@ -0,0 +1,96 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref, reactive } from "vue"; |
||||
|
import Motion from "../utils/motion"; |
||||
|
import { phoneRules } from "../utils/rule"; |
||||
|
import { message } from "@pureadmin/components"; |
||||
|
import type { FormInstance } from "element-plus"; |
||||
|
import { useVerifyCode } from "../utils/verifyCode"; |
||||
|
import { useUserStoreHook } from "/@/store/modules/user"; |
||||
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const ruleForm = reactive({ |
||||
|
phone: "", |
||||
|
verifyCode: "" |
||||
|
}); |
||||
|
const ruleFormRef = ref<FormInstance>(); |
||||
|
const { isDisabled, text } = useVerifyCode(); |
||||
|
|
||||
|
const onLogin = async (formEl: FormInstance | undefined) => { |
||||
|
loading.value = true; |
||||
|
if (!formEl) return; |
||||
|
await formEl.validate((valid, fields) => { |
||||
|
if (valid) { |
||||
|
// 模拟登陆请求,需根据实际开发进行修改 |
||||
|
setTimeout(() => { |
||||
|
message.success("登陆成功"); |
||||
|
loading.value = false; |
||||
|
}, 2000); |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
return fields; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
function onBack() { |
||||
|
useVerifyCode().end(); |
||||
|
useUserStoreHook().SET_CURRENTPAGE(0); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large"> |
||||
|
<Motion> |
||||
|
<el-form-item prop="phone"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.phone" |
||||
|
placeholder="手机号码" |
||||
|
:prefix-icon="useRenderIcon('iphone')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="100"> |
||||
|
<el-form-item prop="verifyCode"> |
||||
|
<div class="w-full flex justify-between"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.verifyCode" |
||||
|
placeholder="短信验证码" |
||||
|
/> |
||||
|
<el-button |
||||
|
:disabled="isDisabled" |
||||
|
class="ml-2" |
||||
|
@click="useVerifyCode().start(ruleFormRef, 'phone')" |
||||
|
> |
||||
|
{{ text }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="150"> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="w-full" |
||||
|
size="default" |
||||
|
type="primary" |
||||
|
:loading="loading" |
||||
|
@click="onLogin(ruleFormRef)" |
||||
|
> |
||||
|
登陆 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="200"> |
||||
|
<el-form-item> |
||||
|
<el-button class="w-full" size="default" @click="onBack"> |
||||
|
返回 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
</el-form> |
||||
|
</template> |
@ -0,0 +1,22 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import Motion from "../utils/motion"; |
||||
|
import ReQrcode from "/@/components/ReQrcode"; |
||||
|
import { useUserStoreHook } from "/@/store/modules/user"; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion> |
||||
|
<Motion :delay="100"> |
||||
|
<el-divider> |
||||
|
<p class="text-gray-500 text-xs">扫码后点击"确认",即可完成登录</p> |
||||
|
</el-divider> |
||||
|
</Motion> |
||||
|
<Motion :delay="150"> |
||||
|
<el-button |
||||
|
class="w-full mt-4" |
||||
|
@click="useUserStoreHook().SET_CURRENTPAGE(0)" |
||||
|
> |
||||
|
返回 |
||||
|
</el-button> |
||||
|
</Motion> |
||||
|
</template> |
@ -0,0 +1,169 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref, reactive } from "vue"; |
||||
|
import Motion from "../utils/motion"; |
||||
|
import { updateRules } from "../utils/rule"; |
||||
|
import { message } from "@pureadmin/components"; |
||||
|
import type { FormInstance } from "element-plus"; |
||||
|
import { useVerifyCode } from "../utils/verifyCode"; |
||||
|
import { useUserStoreHook } from "/@/store/modules/user"; |
||||
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; |
||||
|
|
||||
|
const checked = ref(false); |
||||
|
const loading = ref(false); |
||||
|
const ruleForm = reactive({ |
||||
|
username: "", |
||||
|
phone: "", |
||||
|
verifyCode: "", |
||||
|
password: "", |
||||
|
repeatPassword: "" |
||||
|
}); |
||||
|
const ruleFormRef = ref<FormInstance>(); |
||||
|
const { isDisabled, text } = useVerifyCode(); |
||||
|
const repeatPasswordRule = [ |
||||
|
{ |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (value === "") { |
||||
|
callback(new Error("请输入确认密码")); |
||||
|
} else if (ruleForm.password !== value) { |
||||
|
callback(new Error("两次密码不一致!")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}, |
||||
|
trigger: "blur" |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const onUpdate = async (formEl: FormInstance | undefined) => { |
||||
|
loading.value = true; |
||||
|
if (!formEl) return; |
||||
|
await formEl.validate((valid, fields) => { |
||||
|
if (valid) { |
||||
|
if (checked.value) { |
||||
|
// 模拟请求,需根据实际开发进行修改 |
||||
|
setTimeout(() => { |
||||
|
message.success("注册成功"); |
||||
|
loading.value = false; |
||||
|
}, 2000); |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
message.warning("请勾选隐私政策"); |
||||
|
} |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
return fields; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
function onBack() { |
||||
|
useVerifyCode().end(); |
||||
|
useUserStoreHook().SET_CURRENTPAGE(0); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
:model="ruleForm" |
||||
|
:rules="updateRules" |
||||
|
size="large" |
||||
|
> |
||||
|
<Motion> |
||||
|
<el-form-item |
||||
|
:rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]" |
||||
|
prop="username" |
||||
|
> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.username" |
||||
|
placeholder="账号" |
||||
|
:prefix-icon="useRenderIcon('user')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="100"> |
||||
|
<el-form-item prop="phone"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.phone" |
||||
|
placeholder="手机号码" |
||||
|
:prefix-icon="useRenderIcon('iphone')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="150"> |
||||
|
<el-form-item prop="verifyCode"> |
||||
|
<div class="w-full flex justify-between"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.verifyCode" |
||||
|
placeholder="短信验证码" |
||||
|
/> |
||||
|
<el-button |
||||
|
:disabled="isDisabled" |
||||
|
class="ml-2" |
||||
|
@click="useVerifyCode().start(ruleFormRef, 'phone')" |
||||
|
> |
||||
|
{{ text }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="200"> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
show-password |
||||
|
v-model="ruleForm.password" |
||||
|
placeholder="密码" |
||||
|
:prefix-icon="useRenderIcon('lock')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="250"> |
||||
|
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
show-password |
||||
|
v-model="ruleForm.repeatPassword" |
||||
|
placeholder="确认密码" |
||||
|
:prefix-icon="useRenderIcon('lock')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="300"> |
||||
|
<el-form-item> |
||||
|
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox> |
||||
|
<el-button type="text"> 《隐私政策》 </el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="350"> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="w-full" |
||||
|
size="default" |
||||
|
type="primary" |
||||
|
:loading="loading" |
||||
|
@click="onUpdate(ruleFormRef)" |
||||
|
> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="400"> |
||||
|
<el-form-item> |
||||
|
<el-button class="w-full" size="default" @click="onBack"> |
||||
|
返回 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
</el-form> |
||||
|
</template> |
@ -0,0 +1,141 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref, reactive } from "vue"; |
||||
|
import Motion from "../utils/motion"; |
||||
|
import { updateRules } from "../utils/rule"; |
||||
|
import { message } from "@pureadmin/components"; |
||||
|
import type { FormInstance } from "element-plus"; |
||||
|
import { useVerifyCode } from "../utils/verifyCode"; |
||||
|
import { useUserStoreHook } from "/@/store/modules/user"; |
||||
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const ruleForm = reactive({ |
||||
|
phone: "", |
||||
|
verifyCode: "", |
||||
|
password: "", |
||||
|
repeatPassword: "" |
||||
|
}); |
||||
|
const ruleFormRef = ref<FormInstance>(); |
||||
|
const { isDisabled, text } = useVerifyCode(); |
||||
|
const repeatPasswordRule = [ |
||||
|
{ |
||||
|
validator: (rule, value, callback) => { |
||||
|
if (value === "") { |
||||
|
callback(new Error("请输入确认密码")); |
||||
|
} else if (ruleForm.password !== value) { |
||||
|
callback(new Error("两次密码不一致!")); |
||||
|
} else { |
||||
|
callback(); |
||||
|
} |
||||
|
}, |
||||
|
trigger: "blur" |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const onUpdate = async (formEl: FormInstance | undefined) => { |
||||
|
loading.value = true; |
||||
|
if (!formEl) return; |
||||
|
await formEl.validate((valid, fields) => { |
||||
|
if (valid) { |
||||
|
// 模拟请求,需根据实际开发进行修改 |
||||
|
setTimeout(() => { |
||||
|
message.success("修改密码成功"); |
||||
|
loading.value = false; |
||||
|
}, 2000); |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
return fields; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
function onBack() { |
||||
|
useVerifyCode().end(); |
||||
|
useUserStoreHook().SET_CURRENTPAGE(0); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
:model="ruleForm" |
||||
|
:rules="updateRules" |
||||
|
size="large" |
||||
|
> |
||||
|
<Motion> |
||||
|
<el-form-item prop="phone"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.phone" |
||||
|
placeholder="手机号码" |
||||
|
:prefix-icon="useRenderIcon('iphone')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="100"> |
||||
|
<el-form-item prop="verifyCode"> |
||||
|
<div class="w-full flex justify-between"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
v-model="ruleForm.verifyCode" |
||||
|
placeholder="短信验证码" |
||||
|
/> |
||||
|
<el-button |
||||
|
:disabled="isDisabled" |
||||
|
class="ml-2" |
||||
|
@click="useVerifyCode().start(ruleFormRef, 'phone')" |
||||
|
> |
||||
|
{{ text }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="150"> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
show-password |
||||
|
v-model="ruleForm.password" |
||||
|
placeholder="密码" |
||||
|
:prefix-icon="useRenderIcon('lock')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="200"> |
||||
|
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
show-password |
||||
|
v-model="ruleForm.repeatPassword" |
||||
|
placeholder="确认密码" |
||||
|
:prefix-icon="useRenderIcon('lock')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="250"> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="w-full" |
||||
|
size="default" |
||||
|
type="primary" |
||||
|
:loading="loading" |
||||
|
@click="onUpdate(ruleFormRef)" |
||||
|
> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="300"> |
||||
|
<el-form-item> |
||||
|
<el-button class="w-full" size="default" @click="onBack"> |
||||
|
返回 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
</el-form> |
||||
|
</template> |
@ -0,0 +1,208 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import Motion from "./utils/motion"; |
||||
|
import { useRouter } from "vue-router"; |
||||
|
import { loginRules } from "./utils/rule"; |
||||
|
import phone from "./components/phone.vue"; |
||||
|
import qrCode from "./components/qrCode.vue"; |
||||
|
import regist from "./components/regist.vue"; |
||||
|
import update from "./components/update.vue"; |
||||
|
import { initRouter } from "/@/router/utils"; |
||||
|
import { message } from "@pureadmin/components"; |
||||
|
import type { FormInstance } from "element-plus"; |
||||
|
import { storageSession } from "/@/utils/storage"; |
||||
|
import { ref, reactive, watch, computed } from "vue"; |
||||
|
import { operates, thirdParty } from "./utils/enums"; |
||||
|
import { useUserStoreHook } from "/@/store/modules/user"; |
||||
|
import { bg, avatar, currentWeek } from "./utils/static"; |
||||
|
import { ReImageVerify } from "/@/components/ReImageVerify"; |
||||
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; |
||||
|
|
||||
|
const imgCode = ref(""); |
||||
|
const router = useRouter(); |
||||
|
const loading = ref(false); |
||||
|
const checked = ref(false); |
||||
|
const ruleFormRef = ref<FormInstance>(); |
||||
|
const currentPage = computed(() => { |
||||
|
return useUserStoreHook().currentPage; |
||||
|
}); |
||||
|
|
||||
|
const ruleForm = reactive({ |
||||
|
username: "admin", |
||||
|
password: "admin123", |
||||
|
verifyCode: "" |
||||
|
}); |
||||
|
|
||||
|
const onLogin = async (formEl: FormInstance | undefined) => { |
||||
|
loading.value = true; |
||||
|
if (!formEl) return; |
||||
|
await formEl.validate((valid, fields) => { |
||||
|
if (valid) { |
||||
|
// 模拟请求,需根据实际开发进行修改 |
||||
|
setTimeout(() => { |
||||
|
loading.value = false; |
||||
|
storageSession.setItem("info", { |
||||
|
username: "admin", |
||||
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.test" |
||||
|
}); |
||||
|
initRouter("admin").then(() => {}); |
||||
|
message.success("登陆成功"); |
||||
|
router.push("/"); |
||||
|
}, 2000); |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
return fields; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
function onHandle(value) { |
||||
|
useUserStoreHook().SET_CURRENTPAGE(value); |
||||
|
} |
||||
|
|
||||
|
watch(imgCode, value => { |
||||
|
useUserStoreHook().SET_VERIFYCODE(value); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<img :src="bg" class="wave" /> |
||||
|
<div class="login-container"> |
||||
|
<div class="img"> |
||||
|
<component :is="currentWeek" /> |
||||
|
</div> |
||||
|
<div class="login-box"> |
||||
|
<div class="login-form"> |
||||
|
<avatar class="avatar" /> |
||||
|
<Motion> |
||||
|
<h2>Pure Admin</h2> |
||||
|
</Motion> |
||||
|
|
||||
|
<el-form |
||||
|
v-if="currentPage === 0" |
||||
|
ref="ruleFormRef" |
||||
|
:model="ruleForm" |
||||
|
:rules="loginRules" |
||||
|
size="large" |
||||
|
> |
||||
|
<Motion :delay="100"> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
:input-style="{ 'user-select': 'none' }" |
||||
|
v-model="ruleForm.username" |
||||
|
placeholder="账号" |
||||
|
:prefix-icon="useRenderIcon('user')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="150"> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
:input-style="{ 'user-select': 'none' }" |
||||
|
show-password |
||||
|
v-model="ruleForm.password" |
||||
|
placeholder="密码" |
||||
|
:prefix-icon="useRenderIcon('lock')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="200"> |
||||
|
<el-form-item prop="verifyCode"> |
||||
|
<el-input |
||||
|
clearable |
||||
|
:input-style="{ 'user-select': 'none' }" |
||||
|
v-model="ruleForm.verifyCode" |
||||
|
placeholder="验证码" |
||||
|
> |
||||
|
<template v-slot:append> |
||||
|
<ReImageVerify v-model:code="imgCode" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="250"> |
||||
|
<el-form-item> |
||||
|
<div class="w-full h-20px flex justify-between items-center"> |
||||
|
<el-checkbox v-model="checked">记住密码</el-checkbox> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="useUserStoreHook().SET_CURRENTPAGE(4)" |
||||
|
> |
||||
|
忘记密码? |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<el-button |
||||
|
class="w-full mt-4" |
||||
|
size="default" |
||||
|
type="primary" |
||||
|
:loading="loading" |
||||
|
@click="onLogin(ruleFormRef)" |
||||
|
> |
||||
|
登录 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
|
||||
|
<Motion :delay="300"> |
||||
|
<el-form-item> |
||||
|
<div class="w-full h-20px flex justify-between items-center"> |
||||
|
<el-button |
||||
|
v-for="(item, index) in operates" |
||||
|
:key="index" |
||||
|
class="w-full mt-4" |
||||
|
size="default" |
||||
|
@click="onHandle(index + 1)" |
||||
|
> |
||||
|
{{ item.title }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
</el-form> |
||||
|
|
||||
|
<Motion v-if="currentPage === 0" :delay="350"> |
||||
|
<el-form-item> |
||||
|
<el-divider> |
||||
|
<p class="text-gray-500 text-xs">第三方登录</p> |
||||
|
</el-divider> |
||||
|
<div class="w-full flex justify-evenly"> |
||||
|
<span |
||||
|
v-for="(item, index) in thirdParty" |
||||
|
:key="index" |
||||
|
:title="`${item.title}登陆`" |
||||
|
> |
||||
|
<IconifyIconOnline |
||||
|
:icon="`ri:${item.icon}-fill`" |
||||
|
width="20" |
||||
|
class="cursor-pointer text-gray-500 hover:text-blue-400" |
||||
|
/> |
||||
|
</span> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</Motion> |
||||
|
<!-- 手机号登陆 --> |
||||
|
<phone v-if="currentPage === 1" /> |
||||
|
<!-- 二维码登陆 --> |
||||
|
<qrCode v-if="currentPage === 2" /> |
||||
|
<!-- 注册 --> |
||||
|
<regist v-if="currentPage === 3" /> |
||||
|
<!-- 忘记密码 --> |
||||
|
<update v-if="currentPage === 4" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
@import url("/@/style/login.css"); |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
:deep(.el-input-group__append, .el-input-group__prepend) { |
||||
|
padding: 0; |
||||
|
} |
||||
|
</style> |
@ -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 }; |
@ -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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
] |
||||
|
); |
||||
|
} |
||||
|
}); |
@ -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(<FormRules>{ |
||||
|
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(<FormRules>{ |
||||
|
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(<FormRules>{ |
||||
|
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 }; |
@ -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 }; |
@ -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 |
||||
|
}; |
||||
|
}; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue