perf: 同步完整版代码

2 years ago · 41b35588c5
28 changed files with 1644 additions and 431 deletions
--- 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
--- 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",
--- 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-[email protected]
  "@vueuse/shared": 8.3[email protected]
  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[email protected]
+  element-plus: 2.1.11[email protected]
  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[email protected][email protected]
+  qrcode: 1.5.0
  qs: 6.10.3
  resize-observer-polyfill: 1.5.1
  responsive-storage: 1.0[email protected]
@ -120,7 +123,7 @@ devDependencies:
  "@iconify-icons/ep": 1.2.4
  "@iconify-icons/ri": 1.2.1
  "@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
  "@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[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
  "@vue/eslint-config-prettier": 7.0[email protected][email protected]
  "@vue/eslint-config-typescript": 10.0.0_67e26bb50fed2173443e3fe1262a69b2
@ -162,10 +166,10 @@ devDependencies:
  stylelint-config-standard: 24.0[email protected]
  stylelint-order: 5.0[email protected]
  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-windicss: 1.8[email protected].5
+  vite-plugin-windicss: 1.8[email protected].6
  vite-svg-loader: 2.2.0
  vue-eslint-parser: 8.3[email protected]
  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[email protected]
+      vite: 2.9.6[email protected]
      vue-i18n: 9.2.0-[email protected]
    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/[email protected]:
    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/[email protected].5:
+  /@vitejs/plugin-legacy/[email protected].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[email protected]
+      vite: 2.9.6[email protected]
    dev: true

  /@vitejs/plugin-vue-jsx/1.3.10:
@ -1522,7 +1535,7 @@ packages:
      - supports-color
    dev: true

-  /@vitejs/plugin-vue/[email protected].5[email protected]:
+  /@vitejs/plugin-vue/[email protected].6[email protected]:
    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[email protected]
+      vite: 2.9.6[email protected]
      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/[email protected]:
    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[email protected]:
+  /element-plus/2.1.11[email protected]:
    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[email protected]
      "@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[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
      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[email protected]
+      vite: 2.9.6[email protected]
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -6936,7 +7047,7 @@ packages:
      }
    dev: true

-  /vite-plugin-windicss/[email protected].5:
+  /vite-plugin-windicss/[email protected].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[email protected]
+      vite: 2.9.6[email protected]
      windicss: 3.5.1
    transitivePeerDependencies:
      - supports-color
@ -6963,10 +7074,10 @@ packages:
      svgo: 2.8.0
    dev: true

-  /vite/2.9.5[email protected]:
+  /vite/2.9.6[email protected]:
    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:
      {
--- 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
      },
      {
--- a/src/components/ReImageVerify/index.ts
+++ 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
+};
--- a/src/components/ReImageVerify/src/hooks.ts
+++ 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<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;
+}
--- a/src/components/ReImageVerify/src/index.vue
+++ b/src/components/ReImageVerify/src/index.vue
@ -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>
--- a/src/components/ReQrcode/index.ts
+++ 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;
--- a/src/components/ReQrcode/src/index.scss
+++ 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%);
+    }
+  }
+}
--- a/src/components/ReQrcode/src/index.tsx
+++ 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<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>
+      </>
+    );
+  }
+});
--- 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,
--- 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;
 };
--- 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<void>((resolve, reject) => {
--- 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;
  }
--- 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;
  }
--- 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<T>(path: T): boolean {
+/** url链接正则 */
+export function isUrl<T>(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<T>(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<T>(value: T): boolean {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+  // @ts-expect-error
+  return reg.test(value);
 }
--- a/src/utils/useComponent.ts
+++ b/src/utils/useComponent.ts
@ -0,0 +1,4 @@
+import { h, resolveComponent } from "vue";
+
+export const dynamicComponent = (component: string) =>
+  h(resolveComponent(component));
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -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>
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@ -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>
--- a/src/views/login/components/qrCode.vue
+++ b/src/views/login/components/qrCode.vue
@ -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>
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/regist.vue
@ -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>
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/update.vue
@ -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>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -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>
--- a/src/views/login/utils/enums.ts
+++ 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 };
--- a/src/views/login/utils/motion.ts
+++ 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
+              }
+            }
+          }
+        ]
+      ]
+    );
+  }
+});
--- a/src/views/login/utils/rule.ts
+++ 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(<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 };
--- a/src/views/login/utils/static.ts
+++ 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 };
--- a/src/views/login/utils/verifyCode.ts
+++ 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
+  };
+};