feat: 注册登录界面框架搭建完成

2024-04-15 22:55:47 +08:00
parent 9dfcc7d7db
commit 0b7d88b74e
14 changed files with 1408 additions and 365 deletions
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
  "dependencies": {
    "@ant-design/icons": "^5.3.6",
    "@ant-design/pro-components": "^2.7.0",
+    "@ant-design/use-emotion-css": "^1.0.4",
    "@types/crypto-js": "^4.2.2",
    "antd": "^5.16.1",
    "axios": "^1.6.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
  '@ant-design/pro-components':
    specifier: ^2.7.0
    version: 2.7.0(antd@5.16.1)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0)
+  '@ant-design/use-emotion-css':
+    specifier: ^1.0.4
+    version: 1.0.4(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0)
  '@types/crypto-js':
    specifier: ^4.2.2
    version: 4.2.2
@@ -446,13 +449,25 @@ packages:
      throttle-debounce: 5.0.0
    dev: false

+  /@ant-design/use-emotion-css@1.0.4(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-PekXeeHCpSNi6ziV62gy2Yy2MijssiVMaCJbbyOmPbeZJYQmB4FecJwlB+e2WuIbSHQdM3O9pyN4Cx3GJKxJkA==}
+    peerDependencies:
+      antd: '>=5.0.0'
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+    dependencies:
+      '@emotion/css': 11.11.2
+      antd: 5.16.1(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@babel/code-frame@7.24.2:
    resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/highlight': 7.24.2
      picocolors: 1.0.0
-    dev: true

  /@babel/compat-data@7.24.1:
    resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==}
@@ -528,7 +543,6 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      '@babel/types': 7.24.0
-    dev: true

  /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.3):
    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
@@ -566,12 +580,10 @@ packages:
  /@babel/helper-string-parser@7.24.1:
    resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
    engines: {node: '>=6.9.0'}
-    dev: true

  /@babel/helper-validator-identifier@7.22.20:
    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
    engines: {node: '>=6.9.0'}
-    dev: true

  /@babel/helper-validator-option@7.23.5:
    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
@@ -597,7 +609,6 @@ packages:
      chalk: 2.4.2
      js-tokens: 4.0.0
      picocolors: 1.0.0
-    dev: true

  /@babel/parser@7.24.1:
    resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==}
@@ -673,7 +684,6 @@ packages:
      '@babel/helper-string-parser': 7.24.1
      '@babel/helper-validator-identifier': 7.22.20
      to-fast-properties: 2.0.0
-    dev: true

  /@chenshuai2144/sketch-color@1.0.9(react@18.2.0):
    resolution: {integrity: sha512-obzSy26cb7Pm7OprWyVpgMpIlrZpZ0B7vbrU0RMbvRg0YAI890S5Xy02Aj1Nhl4+KTbi1lVYHt6HQP8Hm9s+1w==}
@@ -787,14 +797,84 @@ packages:
    dev: true
    optional: true

+  /@emotion/babel-plugin@11.11.0:
+    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.24.3
+      '@babel/runtime': 7.24.4
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/serialize': 1.1.4
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/cache@11.11.0:
+    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
+    dependencies:
+      '@emotion/memoize': 0.8.1
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/css@11.11.2:
+    resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==}
+    dependencies:
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.4
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+    dev: false
+
  /@emotion/hash@0.8.0:
    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
    dev: false

+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
+
+  /@emotion/memoize@0.8.1:
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+    dev: false
+
+  /@emotion/serialize@1.1.4:
+    resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==}
+    dependencies:
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/unitless': 0.8.1
+      '@emotion/utils': 1.2.1
+      csstype: 3.1.3
+    dev: false
+
+  /@emotion/sheet@1.2.2:
+    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
+    dev: false
+
  /@emotion/unitless@0.7.5:
    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
    dev: false

+  /@emotion/unitless@0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+    dev: false
+
+  /@emotion/utils@1.2.1:
+    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
+    dev: false
+
+  /@emotion/weak-memoize@0.3.1:
+    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
+    dev: false
+
  /@esbuild/aix-ppc64@0.20.2:
    resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
    engines: {node: '>=12'}
@@ -1621,6 +1701,10 @@ packages:
    dependencies:
      undici-types: 5.26.5

+  /@types/parse-json@4.0.2:
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+    dev: false
+
  /@types/prop-types@15.7.12:
    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
    dev: true
@@ -1879,7 +1963,6 @@ packages:
    engines: {node: '>=4'}
    dependencies:
      color-convert: 1.9.3
-    dev: true

  /ansi-styles@4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -2117,6 +2200,15 @@ packages:
      - debug
    dev: false

+  /babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.24.4
+      cosmiconfig: 7.1.0
+      resolve: 1.22.8
+    dev: false
+
  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

@@ -2267,7 +2359,6 @@ packages:
  /callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}
-    dev: true

  /camel-case@4.1.2:
    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
@@ -2298,7 +2389,6 @@ packages:
      ansi-styles: 3.2.1
      escape-string-regexp: 1.0.5
      supports-color: 5.5.0
-    dev: true

  /chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -2397,7 +2487,6 @@ packages:
    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
    dependencies:
      color-name: 1.1.3
-    dev: true

  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -2407,7 +2496,6 @@ packages:

  /color-name@1.1.3:
    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    dev: true

  /color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
@@ -2484,6 +2572,10 @@ packages:
    engines: {node: ^14.18.0 || >=16.10.0}
    dev: true

+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: false
+
  /convert-source-map@2.0.0:
    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
    dev: true
@@ -2512,6 +2604,17 @@ packages:
      vary: 1.1.2
    dev: false

+  /cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: false
+
  /cosmiconfig@9.0.0(typescript@5.4.3):
    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
    engines: {node: '>=14'}
@@ -2899,7 +3002,6 @@ packages:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
    dependencies:
      is-arrayish: 0.2.1
-    dev: true

  /es-abstract@1.23.2:
    resolution: {integrity: sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==}
@@ -3052,7 +3154,6 @@ packages:
  /escape-string-regexp@4.0.0:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}
-    dev: true

  /escape-string-regexp@5.0.0:
    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
@@ -3373,6 +3474,10 @@ packages:
    dependencies:
      to-regex-range: 5.0.1

+  /find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
  /find-up@5.0.0:
    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
    engines: {node: '>=10'}
@@ -3644,7 +3749,6 @@ packages:
  /has-flag@3.0.0:
    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
    engines: {node: '>=4'}
-    dev: true

  /has-flag@4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -3783,7 +3887,6 @@ packages:
    dependencies:
      parent-module: 1.0.1
      resolve-from: 4.0.0
-    dev: true

  /imurmurhash@0.1.4:
    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -3828,7 +3931,6 @@ packages:

  /is-arrayish@0.2.1:
    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true

  /is-arrayish@0.3.2:
    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
@@ -3872,7 +3974,6 @@ packages:
    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
    dependencies:
      hasown: 2.0.2
-    dev: true

  /is-data-descriptor@1.0.1:
    resolution: {integrity: sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==}
@@ -4149,7 +4250,6 @@ packages:

  /json-parse-even-better-errors@2.3.1:
    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: true

  /json-schema-traverse@0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@@ -4268,7 +4368,6 @@ packages:

  /lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true

  /loader-utils@1.4.2:
    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
@@ -4841,7 +4940,6 @@ packages:
    engines: {node: '>=6'}
    dependencies:
      callsites: 3.1.0
-    dev: true

  /parse-json@5.2.0:
    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
@@ -4851,7 +4949,6 @@ packages:
      error-ex: 1.3.2
      json-parse-even-better-errors: 2.3.1
      lines-and-columns: 1.2.4
-    dev: true

  /parse-node-version@1.0.1:
    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
@@ -4891,7 +4988,6 @@ packages:

  /path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true

  /path-to-regexp@2.4.0:
    resolution: {integrity: sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==}
@@ -4900,7 +4996,6 @@ packages:
  /path-type@4.0.0:
    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
    engines: {node: '>=8'}
-    dev: true

  /path-type@5.0.0:
    resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
@@ -5794,7 +5889,6 @@ packages:
  /resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
-    dev: true

  /resolve-from@5.0.0:
    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
@@ -5806,6 +5900,15 @@ packages:
    deprecated: https://github.com/lydell/resolve-url#deprecated
    dev: false

+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: false
+
  /resolve@2.0.0-next.5:
    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
    hasBin: true
@@ -6392,6 +6495,10 @@ packages:
      - typescript
    dev: true

+  /stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+    dev: false
+
  /stylis@4.3.1:
    resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==}
    dev: false
@@ -6413,7 +6520,6 @@ packages:
    engines: {node: '>=4'}
    dependencies:
      has-flag: 3.0.0
-    dev: true

  /supports-color@7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
@@ -6432,7 +6538,6 @@ packages:
  /supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
-    dev: true

  /svg-baker@1.7.0:
    resolution: {integrity: sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==}
@@ -6554,7 +6659,6 @@ packages:
  /to-fast-properties@2.0.0:
    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
    engines: {node: '>=4'}
-    dev: true

  /to-object-path@0.3.0:
    resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
@@ -7039,6 +7143,11 @@ packages:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: true

+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: false
+
  /yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
--- a/src/assets/icons/corner_markers.svg
+++ b/src/assets/icons/corner_markers.svg
@@ -0,0 +1,2 @@
+
+<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="17.621%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFE2B8" offset="0%"/><stop stop-color="#FFCA7C" offset="100%"/></linearGradient><filter x="-10.7%" y="-10.7%" width="121.4%" height="121.4%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="6" in="SourceAlpha" result="shadowBlurInner1"/><feOffset dx="3" in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" in="shadowInnerInner1"/></filter><path id="b" d="m1291 377 70 70v-70z"/></defs><g transform="translate(-1291 -377)" fill="none" fill-rule="evenodd"><use fill="url(#a)" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/></g></svg>
--- a/src/assets/icons/react.svg
+++ b/src/assets/icons/react.svg
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
-     class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
-    <path fill="#00D8FF"
-          d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path>
-</svg>
--- a/src/assets/images/login_qrcode-landaiqing.jpg
+++ b/src/assets/images/login_qrcode-landaiqing.jpg
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,8 @@
 import type { RouteObject } from 'react-router-dom'

 import NoFound from '@/views/404/404'
-import Login from '@/views/Login'
+import Login from '@/views/User/Login'
+import Register from '@/views/User/Register'
 const routes: RouteObject[] = [
    {
        path: '/',
@@ -11,6 +12,10 @@ const routes: RouteObject[] = [
        path: '*',
        Component: NoFound,
    },
+    {
+        path: '/register',
+        Component: Register,
+    },
 ]

 export default routes
--- a/src/types/user/user.d.ts
+++ b/src/types/user/user.d.ts
@@ -1,13 +1,242 @@
-declare namespace user {
-    interface userInfo {
-        name: string
-        avatar: string
-        userid: string
-        role: string
-        email: string
-        telephone: string
-        status: string
-        token: string
+// @ts-ignore
+/* eslint-disable */
+
+declare namespace API {
+	type ApiResponse<T> = {
+		success?: boolean;
+		code?: number;
+		codeMessage?: string;
+		errorMessage?: Map<string, string>;
+		showType?: ErrorShowType;
+		data: T
+	}
+	type CurrentUser = {
+		name?: string;
+		avatar?: string;
+		userid?: string;
+		email?: string;
+		signature?: string;
+		title?: string;
+		group?: string;
+		tags?: { key?: string; label?: string }[];
+		notifyCount?: number;
+		unreadCount?: number;
+		country?: string;
+		access?: string;
+		geographic?: {
+			province?: { label?: string; key?: string };
+			city?: { label?: string; key?: string };
+		};
+		address?: string;
+		phone?: string;
+	};
+
+	type LoginResult = ResponseStructure & {
+		data?: {
+			token?: string;
+			expireDateTime?: number;
+			expire?: number;
+			timeUnit?: any;
+		}
+	};
+
+	type PageParams = {
+		pageNum?: number;
+		pageSize?: number;
+	};
+
+	type RuleListItem = {
+		key?: number;
+		disabled?: boolean;
+		href?: string;
+		avatar?: string;
+		name?: string;
+		owner?: string;
+		desc?: string;
+		callNo?: number;
+		status?: number;
+		updatedAt?: string;
+		createdAt?: string;
+		progress?: number;
+	};
+
+	type RuleList = {
+		data?: RuleListItem[];
+		/** 列表的内容总数 */
+		total?: number;
+		success?: boolean;
+	};
+	interface ResponseStructure {
+		success?: boolean;
+		code?: number;
+		codeMessage?: string;
+		errorMessage?: Map<string, string>;
+		showType?: ErrorShowType;
+	}
+	type
+		FakeCaptcha = ResponseStructure & {
+		data?: boolean;
+	};
+
+	type PhonePasswordLoginParams = {
+		clientId?: string;
+		phone?: string;
+		password?: string;
+		code?: string;
+		autoLogin?: boolean;
+	};
+
+	type PhoneSmsCodeLoginParams = {
+		clientId?: string;
+		phone?: string;
+		smsCode?: string;
+		autoLogin?: boolean;
+	};
+
+	type ErrorResponse = {
+		/** 业务约定的错误码 */
+		errorCode: string;
+		/** 业务上的错误信息 */
+		errorMessage?: Map<string, string>;
+		/** 业务上的请求是否成功 */
+		success?: boolean;
+	};
+
+	type NoticeIconList = {
+		data?: NoticeIconItem[];
+		/** 列表的内容总数 */
+		total?: number;
+		success?: boolean;
+	};
+
+	type NoticeIconItemType = 'notification' | 'message' | 'event';
+
+	type NoticeIconItem = {
+		id?: string;
+		extra?: string;
+		key?: string;
+		read?: boolean;
+		avatar?: string;
+		title?: string;
+		status?: string;
+		datetime?: string;
+		description?: string;
+		type?: NoticeIconItemType;
+	};
+
+	type GenerateMpRegCode = {
+		data?: {
+			regCode?: string;
+			qrCodeUrl?: string;
+			expireSeconds?: number;
+			ticket?: string;
+			url?: string;
+		};
+	}
+
+	type GetClientId = {
+		data?: string;
+	}
+
+	type GenerateBase64Code = {
+		data?: string;
+	}
+
+	type GetClientToken = {
+		data?: {
+			token?: string;
+			expireDateTime?: number;
+			expire?: number;
+		};
+	}
+
+	type PhoneRegisterRequest = {
+		clientId?: string;
+		phone?: string;
+		password?: string;
+		confirmPassword?: string;
+		smsCode?: number;
+	}
+
+	type PhoneRegisterResponse = ResponseStructure & {
+		data?: number;
+	}
+
+	type CustomValidate = {
+		validateStatus?: boolean;
+		msg?: string;
+		formValue?: any;
+		code?: number;
+		codeMessage?: string;
+		errors?: Map<string, string>;
+		validateFields: ValidateFields<Values>;
+	}
+
+	type ListAccountBookVo = ResponseStructure & {
+		data?: {
+			total?: number;
+			list?: ListAccountBookVoItem[]
+		}
+	}
+	type ListAccountBookVoItem = {
+		id: number;
+		companyName?: string;
+		valueAddedTaxCate?: string;
+		accountingStandard?: string;
+		startTime?: Date;
+		createTime?: Date;
+		enableVoucherVerify?: boolean;
+		disable?: boolean;
+	}
+	type GetAccountBookVo = {
+		id?: number;
+		companyName?: string;
+		unifiedSocialCreditCode?: string;
+		industryId?: number;
+		valueAddedTaxCate?: number;
+		enableVoucherVerify?: boolean;
+		startTime?: Date;
+		accountingStandard?: number;
+		enableFixedAssets?: boolean;
+		enableCapital?: boolean;
+		enablePsi?: boolean;
+	}
+	type DataDictionaryVo = {
+		dataCode?: string;
+		dataValue?: string;
+	}
+
+	type ListTreeMenuVo = {
+		id?: number;
+		key?: string;
+		title?: any;
+		icon?: string;
+		checked?: boolean;
+		children?: ListTreeMenuVo[];
+		level?: number;
+	};
+
+	type ListTreeSelectMenuVo = {
+		id?: number;
+		value?: string;
+		title?: any;
+		children?: ListTreeMenuVo[];
+	}
+
+	type ListRoleVo = {
+		id: number;
+		roleName?: string;
+		disable?: boolean;
+	}
+
+	type ListSubject = {
+		id: number;
+		pid?: number;
+		valueAddedTaxCate?: string;
+		accountingStandard?: string;
+		startTime?: Date;
+		createTime?: Date;
+		enableVoucherVerify?: boolean;
+		disable?: boolean;
 	}
 }
-export { user }
--- a/src/utils/cookie/cookie.ts
+++ b/src/utils/cookie/cookie.ts
@@ -1,19 +1,19 @@
 /** 配置 */
 interface Options {
    /** key前缀 */
-	prefix?: string;
+    prefix?: string
 }
 /** 默认配置 */
 const defaultOptions: Options = {
-	prefix: ""
-};
+    prefix: '',
+}

 class CookieStorage {
-	private prefix: string;
+    private prefix: string

    constructor(options: Options = defaultOptions) {
-		const { prefix } = options;
-		this.prefix = prefix ?? "";
+        const { prefix } = options
+        this.prefix = prefix ?? ''
    }

    /**
@@ -25,13 +25,13 @@ class CookieStorage {
     * @Author: mulingyuer
     */
    public setItem(key: string, value: string | number, expires?: number): void {
-		const timestamp = Date.now();
-		if (typeof expires === "number") {
-			expires = timestamp + expires;
+        const timestamp = Date.now()
+        if (typeof expires === 'number') {
+            expires = timestamp + expires
        } else {
-			expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
+            expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000
        }
-		document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
+        document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`
    }

    /**
@@ -41,18 +41,18 @@ class CookieStorage {
     * @Author: mulingyuer
     */
    public getItem(key: string): string | undefined {
-		const cookies = document.cookie.split("; ");
-		let val: string | undefined = undefined;
+        const cookies = document.cookie.split('; ')
+        let val: string | undefined = undefined
        cookies.find((item) => {
-			const [k, v] = item.split("=");
+            const [k, v] = item.split('=')
            if (k === `${this.prefix}${key}`) {
-				val = v;
-				return true;
+                val = v
+                return true
            }
-			return false;
-		});
+            return false
+        })

-		return val;
+        return val
    }

    /**
@@ -62,7 +62,7 @@ class CookieStorage {
     * @Author: mulingyuer
     */
    public removeItem(key: string): void {
-		this.setItem(key, "", -1);
+        this.setItem(key, '', -1)
    }

    /**
@@ -71,15 +71,15 @@ class CookieStorage {
     * @Author: mulingyuer
     */
    public clear(): void {
-		const cookies = document.cookie.split("; ");
+        const cookies = document.cookie.split('; ')
        cookies.forEach((item) => {
-			const [k] = item.split("=");
-			this.removeItem(k);
-		});
+            const [k] = item.split('=')
+            this.removeItem(k)
+        })
    }
 }

-const cookieStorage = new CookieStorage();
+const cookieStorage = new CookieStorage()

-export default cookieStorage;
-export { CookieStorage };
+export default cookieStorage
+export { CookieStorage }
--- a/src/views/Login/index.tsx
+++ b/src/views/Login/index.tsx
@@ -1,243 +0,0 @@
-import {
-    GithubOutlined,
-    GitlabOutlined,
-    LockOutlined,
-    MobileOutlined,
-    QqOutlined,
-    UserOutlined,
-    WechatOutlined,
-} from '@ant-design/icons'
-import {
-    LoginFormPage,
-    ProFormCaptcha,
-    ProFormCheckbox,
-    ProFormText,
-} from '@ant-design/pro-components'
-import { Divider, Space, Tabs, message, Button } from 'antd'
-import { CSSProperties } from 'react'
-import { useState } from 'react'
-import logo from '@/assets/icons/schisandra.svg'
-import background from '@/assets/images/background.png'
-import { observer } from 'mobx-react'
-// import useStore from '@/utils/store/useStore.tsx'
-type LoginType = 'account' | 'phone'
-
-const iconStyles: CSSProperties = {
-    color: 'rgba(0, 0, 0, 0.2)',
-    fontSize: '18px',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-}
-
-export default observer(() => {
-    // const store = useStore('user')
-
-    const items = [
-        { label: '账户密码登录', key: 'account' },
-        { label: '手机号登录', key: 'phone' },
-    ]
-    const [loginType, setLoginType] = useState<LoginType>('account')
-
-    const onSubmit = async (formData: object) => {
-        console.log(formData)
-    }
-    return (
-        <div
-            style={{
-                backgroundColor: 'white',
-                height: '100vh',
-                width: '100vw',
-            }}>
-            <LoginFormPage
-                onFinish={onSubmit}
-                backgroundImageUrl={background}
-                logo={logo}
-                title='五味子云相册'
-                subTitle='随时随地分享你的美好瞬间'
-                activityConfig={{
-                    style: {
-                        boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
-                        color: '#fff',
-                        borderRadius: 8,
-                        backgroundColor: '#1677FF',
-                    },
-                    title: '活动标题，可配置图片',
-                    subTitle: '活动介绍说明文字',
-                    action: (
-                        <Button
-                            size='large'
-                            style={{
-                                borderRadius: 20,
-                                background: '#fff',
-                                color: '#1677FF',
-                                width: 120,
-                            }}>
-                            去看看
-                        </Button>
-                    ),
-                }}
-                actions={
-                    <div
-                        style={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            flexDirection: 'column',
-                        }}>
-                        <Divider plain>
-                            <span style={{ color: '#CCC', fontWeight: 'normal', fontSize: 14 }}>
-                                其他登录方式
-                            </span>
-                        </Divider>
-                        <Space align='center' size={24}>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    flexDirection: 'column',
-                                    height: 40,
-                                    width: 40,
-                                    border: '1px solid #D4D8DD',
-                                    borderRadius: '50%',
-                                }}>
-                                <QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    flexDirection: 'column',
-                                    height: 40,
-                                    width: 40,
-                                    border: '1px solid #D4D8DD',
-                                    borderRadius: '50%',
-                                }}>
-                                <WechatOutlined style={{ ...iconStyles, color: '#08a327' }} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    flexDirection: 'column',
-                                    height: 40,
-                                    width: 40,
-                                    border: '1px solid #D4D8DD',
-                                    borderRadius: '50%',
-                                }}>
-                                <GithubOutlined style={{ ...iconStyles, color: '#333333' }} />
-                            </div>
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    flexDirection: 'column',
-                                    height: 40,
-                                    width: 40,
-                                    border: '1px solid #D4D8DD',
-                                    borderRadius: '50%',
-                                }}>
-                                <GitlabOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
-                            </div>
-                        </Space>
-                    </div>
-                }>
-                <Tabs
-                    centered
-                    items={items}
-                    activeKey={loginType}
-                    onChange={(activeKey) => setLoginType(activeKey as LoginType)}></Tabs>
-
-                {loginType === 'account' && (
-                    <>
-                        <ProFormText
-                            name='username'
-                            fieldProps={{
-                                size: 'large',
-                                prefix: <UserOutlined className={'prefixIcon'} />,
-                            }}
-                            placeholder={'请输入账号/邮箱/电话号码'}
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '请输入用户名!',
-                                },
-                            ]}
-                        />
-                        <ProFormText.Password
-                            name='password'
-                            fieldProps={{
-                                size: 'large',
-                                prefix: <LockOutlined className={'prefixIcon'} />,
-                            }}
-                            placeholder={'请输入密码'}
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '请输入密码！',
-                                },
-                            ]}
-                        />
-                    </>
-                )}
-                {loginType === 'phone' && (
-                    <>
-                        <ProFormText
-                            fieldProps={{
-                                size: 'large',
-                                prefix: <MobileOutlined className={'prefixIcon'} />,
-                            }}
-                            name='mobile'
-                            placeholder={'手机号'}
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '请输入手机号！',
-                                },
-                                {
-                                    pattern: /^1\d{10}$/,
-                                    message: '手机号格式错误！',
-                                },
-                            ]}
-                        />
-                        <ProFormCaptcha
-                            fieldProps={{
-                                size: 'large',
-                                prefix: <LockOutlined className={'prefixIcon'} />,
-                            }}
-                            captchaProps={{
-                                size: 'large',
-                            }}
-                            placeholder={'请输入验证码'}
-                            captchaTextRender={(timing, count) => {
-                                if (timing) {
-                                    return `${count} ${'获取验证码'}`
-                                }
-                                return '获取验证码'
-                            }}
-                            name='captcha'
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '请输入验证码！',
-                                },
-                            ]}
-                            onGetCaptcha={async () => {
-                                message.success('获取验证码成功！验证码为：1234')
-                            }}
-                        />
-                    </>
-                )}
-                <div style={{ marginBlockEnd: 24 }}>
-                    <ProFormCheckbox noStyle name='autoLogin'>
-                        自动登录
-                    </ProFormCheckbox>
-                    <a style={{ float: 'right' }}>忘记密码 </a>
-                </div>
-            </LoginFormPage>
-        </div>
-    )
-})
--- a/src/views/User/Login/index.less
+++ b/src/views/User/Login/index.less
@@ -0,0 +1,154 @@
+
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	height: 100vh;
+	width: 100vw;
+	overflow: auto;
+}
+
+.login_content {
+	// margin-top: 40px;
+	// position: relative;
+	width: 782px;
+	background-color: rgb(255, 255, 255);
+	// height: 100%;
+	overflow: hidden;
+	box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
+	//float: right;
+	//height: 538px;
+	position: relative;
+	padding: 30px 0 30px 0;
+
+}
+
+.go_to_register {
+	cursor: pointer;
+	height: 70px;
+	width: 70px;
+	background-image: url('@/assets/icons/corner_markers.svg');
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	text-align: right;
+}
+
+.go_to_register span {
+	font-size: 14px;
+	color: rgb(255, 255, 255);
+	font-weight: 500;
+	position: relative;
+	top: 10px;
+	right: 7px;
+}
+
+.lang {
+	width: 100%;
+	height: 40px;
+	line-height: 44px;
+	text-align: right;
+
+	:global(.ant-dropdown-trigger) {
+		margin-right: 24px;
+	}
+}
+
+.content {
+	//flex: 1;
+	//padding: 32px 0;
+
+	//box-sizing: border-box;
+	//margin: 60px auto;
+	//display: flex;
+	//align-items: center;
+	//justify-content: center;
+	//flex-direction: column;
+	//height: 100vh;
+	//overflow: auto;
+
+
+}
+
+@media (min-width: 768px) {
+	.container {
+		background-image: url('@/assets/images/background.png');
+		background-size: cover;
+	}
+
+	.content {
+		padding: 32px 0 24px;
+	}
+
+	.content img {
+		text-align: center;
+	}
+}
+
+.icon {
+	margin-left: 8px;
+	color: rgba(0, 0, 0, 0.2);
+	font-size: 24px;
+	vertical-align: middle;
+	cursor: pointer;
+	transition: color 0.3s;
+
+	&:hover {
+		color: aquamarine;
+	}
+}
+
+.mp_code {
+	padding: 0px 60px;
+	width: 361px;
+	height: 490px;
+	background-color: rgb(255, 255, 255);
+	border-right: 0.5px solid rgb(196, 203, 215);
+}
+
+.mp_code_title {
+	margin-top: 50px;
+	font-weight: 500;
+	font-size: 24px;
+	color: rgb(24, 24, 24)
+}
+
+.mp_code_img {
+	margin-top: 10px;
+}
+
+.alert {
+	margin-top: 25px;
+	width: 250px;
+	padding: 5px;
+	text-align: left;
+	vertical-align: middle;
+}
+
+.login_form {
+	// height: 100%;
+	// float: left;
+	margin: 0;
+	padding: 0 32px;
+}
+
+.mp_tips {
+	font-weight: bold;
+	color: rgb(7, 221, 7);
+}
+
+.logo span {
+	position: relative;
+	top: 2px;
+	color: rgba(0, 0, 0, .85);
+	font-weight: 600;
+	font-size: 33px;
+}
+
+.subTitle {
+	margin-top: 12px;
+	margin-bottom: 10px;
+	color: rgba(0, 0, 0, .45);
+	font-size: 14px;
+}
--- a/src/views/User/Login/index.tsx
+++ b/src/views/User/Login/index.tsx
@@ -0,0 +1,377 @@
+import {
+    BarcodeOutlined,
+    GithubOutlined,
+    GitlabOutlined,
+    LockOutlined,
+    MobileOutlined,
+    QqOutlined,
+    UserOutlined,
+    WechatOutlined,
+} from '@ant-design/icons'
+import { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components'
+import { Divider, Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
+import { CSSProperties } from 'react'
+import { useState } from 'react'
+import logo from '@/assets/icons/schisandra.svg'
+import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
+import './index.less'
+import { observer } from 'mobx-react'
+// import useStore from '@/utils/store/useStore.tsx'
+type LoginType = 'account' | 'phone'
+
+const iconStyles: CSSProperties = {
+    color: 'rgba(0, 0, 0, 0.2)',
+    fontSize: '18px',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+}
+
+export default observer(() => {
+    const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({})
+    const [form] = Form.useForm()
+    const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
+    const clickGetBase64CodeMethod = async () => {
+        await getBase64CodeMethod()
+    }
+    const CodeImg = (
+        <img
+            src={'data:image/jpg;base64,' + base64Code.data}
+            onClick={clickGetBase64CodeMethod}
+            title='点击刷新'
+            style={{ cursor: 'pointer', height: 40, width: 90 }}
+        />
+    )
+    const getBase64CodeMethod = async () => {}
+
+    const items = [
+        {
+            label: (
+                <span>
+                    <UserOutlined />
+                    账户登录
+                </span>
+            ),
+            key: 'account',
+        },
+        {
+            label: (
+                <span>
+                    <MobileOutlined />
+                    短信登录
+                </span>
+            ),
+            key: 'phone',
+        },
+    ]
+    const [loginType, setLoginType] = useState<LoginType>('account')
+
+    const onSubmit = async (formData: object) => {
+        console.log(formData)
+    }
+    return (
+        <div className={'container'}>
+            <div className={'content'}>
+                <Space>
+                    <Space className={'login_content'}>
+                        <Space align='center' className={'mp_code'}>
+                            <Space direction='vertical' align='center'>
+                                <span className={'mp_code_title'}>微信扫码登录</span>
+                                <Image
+                                    preview={false}
+                                    height={210}
+                                    width={200}
+                                    className={'mp_code_img'}
+                                    // src={generateMpRegCodeData.data?.qrCodeUrl}
+                                    src={qrCode}
+                                />
+                                <Alert
+                                    // message={(<span>微信扫码<span>关注公众号</span></span>)}
+                                    description={
+                                        <div>
+                                            <span>
+                                                微信扫码
+                                                <span className={'mp_tips'}>关注公众号</span>
+                                            </span>
+                                            <br />
+                                            登录更快更安全
+                                        </div>
+                                    }
+                                    // type="success"
+                                    showIcon={true}
+                                    className={'alert'}
+                                    icon={<WechatOutlined />}
+                                />
+                            </Space>
+                        </Space>
+                        <Form
+                            form={form}
+                            className={'login_form'}
+                            initialValues={{
+                                autoLogin: true,
+                            }}>
+                            <Space direction='vertical' align='center'>
+                                <Space className={'logo'}>
+                                    <img
+                                        alt='logo'
+                                        src={logo}
+                                        style={{ width: '44px', height: '44px' }}
+                                    />
+                                    <span>五味子云相册</span>
+                                </Space>
+                                <div className={'subTitle'}>随时随地分享你的美好瞬间</div>
+                            </Space>
+
+                            <Tabs
+                                centered={true}
+                                items={items}
+                                activeKey={loginType}
+                                onChange={(activeKey) =>
+                                    setLoginType(activeKey as LoginType)
+                                }></Tabs>
+
+                            {loginType === 'account' && (
+                                <>
+                                    <ProFormText
+                                        name='username'
+                                        fieldProps={{
+                                            size: 'large',
+                                            prefix: <UserOutlined className={'prefixIcon'} />,
+                                        }}
+                                        placeholder={'请输入账号/邮箱/电话号码'}
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: '请输入用户名!',
+                                            },
+                                        ]}
+                                    />
+                                    <ProFormText.Password
+                                        name='password'
+                                        fieldProps={{
+                                            size: 'large',
+                                            prefix: <LockOutlined className={'prefixIcon'} />,
+                                        }}
+                                        placeholder={'请输入密码'}
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: '请输入密码！',
+                                            },
+                                            {
+                                                pattern:
+                                                    /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
+                                                message:
+                                                    '密码长度需在6~18位字符，且必须包含字母和数字！',
+                                            },
+                                        ]}
+                                    />
+                                    <ProFormText
+                                        addonAfter={CodeImg}
+                                        name='code'
+                                        fieldProps={{
+                                            size: 'large',
+                                            prefix: <BarcodeOutlined className={'prefixIcon'} />,
+                                            autoComplete: 'off',
+                                        }}
+                                        placeholder='请输入图形验证码'
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: '请输入图形验证码！',
+                                            },
+                                            {
+                                                pattern: /^[a-zA-Z0-9]{5}$/,
+                                                message: '图形验证码格式不正确',
+                                            },
+                                        ]}
+                                    />
+                                </>
+                            )}
+                            {loginType === 'phone' && (
+                                <>
+                                    <ProFormText
+                                        fieldProps={{
+                                            size: 'large',
+                                            prefix: <MobileOutlined className={'prefixIcon'} />,
+                                            autoComplete: 'off',
+                                        }}
+                                        name='mobile'
+                                        placeholder={'请输入手机号'}
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: '请输入手机号！',
+                                            },
+                                            {
+                                                pattern: /^1\d{10}$/,
+                                                message: '手机号格式错误！',
+                                            },
+                                        ]}
+                                    />
+                                    <ProFormText
+                                        addonAfter={CodeImg}
+                                        name='code'
+                                        fieldProps={{
+                                            size: 'large',
+                                            prefix: <BarcodeOutlined className={'prefixIcon'} />,
+                                            autoComplete: 'off',
+                                        }}
+                                        placeholder='请输入图形验证码'
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: '请输入图形验证码！',
+                                            },
+                                            {
+                                                pattern: /^[a-zA-Z0-9]{5}$/,
+                                                message: '图形验证码格式不正确',
+                                            },
+                                        ]}
+                                    />
+                                    <ProFormCaptcha
+                                        fieldProps={{
+                                            size: 'large',
+                                            prefix: <LockOutlined className={'prefixIcon'} />,
+                                        }}
+                                        captchaProps={{
+                                            size: 'large',
+                                        }}
+                                        placeholder={'请输入验证码'}
+                                        captchaTextRender={(timing, count) => {
+                                            if (timing) {
+                                                return `${count} ${'获取验证码'}`
+                                            }
+                                            return '获取验证码'
+                                        }}
+                                        name='captcha'
+                                        rules={[
+                                            {
+                                                required: true,
+                                                message: '请输入验证码！',
+                                            },
+                                        ]}
+                                        onGetCaptcha={async () => {
+                                            message.success('获取验证码成功！验证码为：1234')
+                                        }}
+                                    />
+                                </>
+                            )}
+                            <div style={{ marginBlockEnd: 14 }}>
+                                <ProFormCheckbox noStyle name='autoLogin'>
+                                    自动登录
+                                </ProFormCheckbox>
+                                <a style={{ float: 'right' }}>忘记密码 </a>
+                            </div>
+
+                            <Button
+                                type='primary'
+                                block
+                                size='large'
+                                onClick={async () => {
+                                    let validateFields
+                                    if (loginType === 'account') {
+                                        validateFields = ['username', 'password', 'code']
+                                    } else {
+                                        validateFields = ['mobile', 'captcha', 'code']
+                                    }
+
+                                    await form
+                                        .validateFields(validateFields)
+                                        .then(async (values) => {
+                                            await onSubmit(values as API.PhoneRegisterRequest)
+                                        })
+                                        .catch((errorInfo) => {
+                                            console.error(errorInfo)
+                                        })
+                                }}>
+                                登录
+                            </Button>
+
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    flexDirection: 'column',
+                                }}>
+                                <Divider plain>
+                                    <span
+                                        style={{
+                                            color: '#CCC',
+                                            fontWeight: 'normal',
+                                            fontSize: 14,
+                                        }}>
+                                        其他登录方式
+                                    </span>
+                                </Divider>
+                                <Space align='center' size={24}>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            flexDirection: 'column',
+                                            height: 40,
+                                            width: 40,
+                                            border: '1px solid #D4D8DD',
+                                            borderRadius: '50%',
+                                        }}>
+                                        <QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
+                                    </div>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            flexDirection: 'column',
+                                            height: 40,
+                                            width: 40,
+                                            border: '1px solid #D4D8DD',
+                                            borderRadius: '50%',
+                                        }}>
+                                        <WechatOutlined
+                                            style={{ ...iconStyles, color: '#08a327' }}
+                                        />
+                                    </div>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            flexDirection: 'column',
+                                            height: 40,
+                                            width: 40,
+                                            border: '1px solid #D4D8DD',
+                                            borderRadius: '50%',
+                                        }}>
+                                        <GithubOutlined
+                                            style={{ ...iconStyles, color: '#333333' }}
+                                        />
+                                    </div>
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            flexDirection: 'column',
+                                            height: 40,
+                                            width: 40,
+                                            border: '1px solid #D4D8DD',
+                                            borderRadius: '50%',
+                                        }}>
+                                        <GitlabOutlined
+                                            style={{ ...iconStyles, color: '#FF6A10' }}
+                                        />
+                                    </div>
+                                </Space>
+                            </div>
+                        </Form>
+                        <a href='/register' className={'go_to_register'}>
+                            <span>注册</span>
+                        </a>
+                    </Space>
+                </Space>
+            </div>
+        </div>
+    )
+})
--- a/src/views/User/Register/index.less
+++ b/src/views/User/Register/index.less
@@ -0,0 +1,154 @@
+
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	height: 100vh;
+	width: 100vw;
+	overflow: auto;
+}
+
+.login_content {
+	// margin-top: 40px;
+	// position: relative;
+	width: 782px;
+	background-color: rgb(255, 255, 255);
+	// height: 100%;
+	overflow: hidden;
+	box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
+	//float: right;
+	//height: 538px;
+	position: relative;
+	padding: 30px 0 30px 0;
+
+}
+
+.go_to_register {
+	cursor: pointer;
+	height: 70px;
+	width: 70px;
+	background-image: url('@/assets/icons/corner_markers.svg');
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	text-align: right;
+}
+
+.go_to_register span {
+	font-size: 14px;
+	color: rgb(255, 255, 255);
+	font-weight: 500;
+	position: relative;
+	top: 10px;
+	right: 7px;
+}
+
+.lang {
+	width: 100%;
+	height: 40px;
+	line-height: 44px;
+	text-align: right;
+
+	:global(.ant-dropdown-trigger) {
+		margin-right: 24px;
+	}
+}
+
+.content {
+	//flex: 1;
+	//padding: 32px 0;
+
+	//box-sizing: border-box;
+	//margin: 60px auto;
+	//display: flex;
+	//align-items: center;
+	//justify-content: center;
+	//flex-direction: column;
+	//height: 100vh;
+	//overflow: auto;
+
+
+}
+
+@media (min-width: 768px) {
+	.container {
+		background-image: url('@/assets/images/background.png');
+		background-size: cover;
+	}
+
+	.content {
+		padding: 32px 0 24px;
+	}
+
+	.content img {
+		text-align: center;
+	}
+}
+
+.icon {
+	margin-left: 8px;
+	color: rgba(0, 0, 0, 0.2);
+	font-size: 24px;
+	vertical-align: middle;
+	cursor: pointer;
+	transition: color 0.3s;
+
+	&:hover {
+		color: aquamarine;
+	}
+}
+
+.mp_code {
+	padding: 0px 60px;
+	width: 361px;
+	height: 490px;
+	background-color: rgb(255, 255, 255);
+	border-right: 0.5px solid rgb(196, 203, 215);
+}
+
+.mp_code_title {
+	margin-top: 50px;
+	font-weight: 500;
+	font-size: 24px;
+	color: rgb(24, 24, 24)
+}
+
+.mp_code_img {
+	margin-top: 10px;
+}
+
+.alert {
+	margin-top: 25px;
+	width: 250px;
+	padding: 5px;
+	text-align: left;
+	vertical-align: middle;
+}
+
+.login_form {
+	// height: 100%;
+	// float: left;
+	margin: 0;
+	padding: 0 32px;
+}
+
+.mp_tips {
+	font-weight: bold;
+	color: rgb(7, 221, 7);
+}
+
+.logo span {
+	position: relative;
+	top: 2px;
+	color: rgba(0, 0, 0, .85);
+	font-weight: 600;
+	font-size: 33px;
+}
+
+.subTitle {
+	margin-top: 12px;
+	margin-bottom: 10px;
+	color: rgba(0, 0, 0, .45);
+	font-size: 14px;
+}
--- a/src/views/User/Register/index.tsx
+++ b/src/views/User/Register/index.tsx
@@ -0,0 +1,256 @@
+import { BarcodeOutlined, LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons'
+import { ProFormCaptcha, ProFormText } from '@ant-design/pro-components'
+import { Space, Tabs, message, Image, Alert, Form, Button } from 'antd'
+import { useState } from 'react'
+import logo from '@/assets/icons/schisandra.svg'
+// import background from '@/assets/images/background.png'
+import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
+import './index.less'
+import { observer } from 'mobx-react'
+// import useStore from '@/utils/store/useStore.tsx'
+type LoginType = 'phone'
+
+export default observer(() => {
+    const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({})
+    const [form] = Form.useForm()
+    const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
+    const clickGetBase64CodeMethod = async () => {
+        await getBase64CodeMethod()
+    }
+    const CodeImg = (
+        <img
+            src={'data:image/jpg;base64,' + base64Code.data}
+            onClick={clickGetBase64CodeMethod}
+            title='点击刷新'
+            style={{ cursor: 'pointer', height: 40, width: 90 }}
+        />
+    )
+    const getBase64CodeMethod = async () => {}
+
+    const items = [
+        {
+            key: 'phone',
+            label: (
+                <span>
+                    <MobileOutlined />
+                    手机号注册
+                </span>
+            ),
+        },
+    ]
+    const [loginType, setLoginType] = useState<LoginType>('phone')
+
+    const onSubmit = async (formData: object) => {
+        console.log(formData)
+    }
+    return (
+        <div className={'container'}>
+            <div className={'content'}>
+                <Space>
+                    <Space className={'login_content'}>
+                        <Space align='center' className={'mp_code'}>
+                            <Space direction='vertical' align='center'>
+                                <span className={'mp_code_title'}>微信扫码登录</span>
+                                <Image
+                                    preview={false}
+                                    height={210}
+                                    width={200}
+                                    className={'mp_code_img'}
+                                    // src={generateMpRegCodeData.data?.qrCodeUrl}
+                                    src={qrCode}
+                                />
+                                <Alert
+                                    // message={(<span>微信扫码<span>关注公众号</span></span>)}
+                                    description={
+                                        <div>
+                                            <span>
+                                                微信扫码
+                                                <span className={'mp_tips'}>关注公众号</span>
+                                            </span>
+                                            <br />
+                                            登录更快更安全
+                                        </div>
+                                    }
+                                    // type="success"
+                                    showIcon={true}
+                                    className={'alert'}
+                                    icon={<WechatOutlined />}
+                                />
+                            </Space>
+                        </Space>
+                        <Form
+                            form={form}
+                            className={'login_form'}
+                            initialValues={{
+                                autoLogin: true,
+                            }}>
+                            <Space direction='vertical' align='center'>
+                                <Space className={'logo'}>
+                                    <img
+                                        alt='logo'
+                                        src={logo}
+                                        style={{ width: '44px', height: '44px' }}
+                                    />
+                                    <span>五味子云相册</span>
+                                </Space>
+                                <div className={'subTitle'}>随时随地分享你的美好瞬间</div>
+                            </Space>
+
+                            <Tabs
+                                centered={true}
+                                items={items}
+                                activeKey={loginType}
+                                onChange={(activeKey) =>
+                                    setLoginType(activeKey as LoginType)
+                                }></Tabs>
+
+                            <>
+                                <ProFormText
+                                    fieldProps={{
+                                        size: 'large',
+                                        prefix: <MobileOutlined className={'prefixIcon'} />,
+                                        autoComplete: 'off',
+                                    }}
+                                    name='phone'
+                                    placeholder='请输入手机号！'
+                                    rules={[
+                                        {
+                                            required: true,
+                                            message: '请输入手机号！',
+                                        },
+                                        {
+                                            pattern: /^1\d{10}$/,
+                                            message: '手机号格式错误！',
+                                        },
+                                    ]}
+                                />
+
+                                <ProFormText.Password
+                                    name='password'
+                                    fieldProps={{
+                                        size: 'large',
+                                        prefix: <LockOutlined className={'prefixIcon'} />,
+                                    }}
+                                    placeholder='请输入密码'
+                                    rules={[
+                                        {
+                                            required: true,
+                                            message: '请输入密码！',
+                                        },
+                                        {
+                                            pattern:
+                                                /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/,
+                                            message:
+                                                '密码长度需在6~18位字符，且必须包含字母和数字！',
+                                        },
+                                    ]}
+                                />
+
+                                <ProFormText.Password
+                                    name='confirmPassword'
+                                    dependencies={['password']}
+                                    fieldProps={{
+                                        size: 'large',
+                                        prefix: <LockOutlined className={'prefixIcon'} />,
+                                    }}
+                                    placeholder='请再次确认密码'
+                                    rules={[
+                                        {
+                                            required: true,
+                                            message: '请再次确认密码！',
+                                        },
+                                        ({ getFieldValue }) => ({
+                                            validator(_, value) {
+                                                if (!value || getFieldValue('password') === value) {
+                                                    return Promise.resolve()
+                                                }
+                                                return Promise.reject(
+                                                    new Error('两次输入的密码不一致!'),
+                                                )
+                                            },
+                                        }),
+                                    ]}
+                                />
+
+                                <ProFormText
+                                    addonAfter={CodeImg}
+                                    name='code'
+                                    fieldProps={{
+                                        size: 'large',
+                                        prefix: <BarcodeOutlined className={'prefixIcon'} />,
+                                        autoComplete: 'off',
+                                    }}
+                                    placeholder='请输入图形验证码'
+                                    rules={[
+                                        {
+                                            required: true,
+                                            message: '请输入图形验证码！',
+                                        },
+                                        {
+                                            pattern: /^[a-zA-Z0-9]{5}$/,
+                                            message: '图形验证码格式不正确!',
+                                        },
+                                    ]}
+                                />
+
+                                <ProFormCaptcha
+                                    fieldProps={{
+                                        size: 'large',
+                                        prefix: <LockOutlined className={'prefixIcon'} />,
+                                    }}
+                                    captchaProps={{
+                                        size: 'large',
+                                    }}
+                                    placeholder={'请输入验证码'}
+                                    captchaTextRender={(timing, count) => {
+                                        if (timing) {
+                                            return `${count} ${'获取验证码'}`
+                                        }
+                                        return '获取验证码'
+                                    }}
+                                    name='captcha'
+                                    rules={[
+                                        {
+                                            required: true,
+                                            message: '请输入验证码！',
+                                        },
+                                    ]}
+                                    onGetCaptcha={async () => {
+                                        message.success('获取验证码成功！验证码为：1234')
+                                    }}
+                                />
+                            </>
+                            <Button
+                                type='primary'
+                                block
+                                size='large'
+                                onClick={async () => {
+                                    const validateFields = [
+                                        'phone',
+                                        'username',
+                                        'password',
+                                        'captcha',
+                                        'code',
+                                        'confirmPassword',
+                                    ]
+                                    await form
+                                        .validateFields(validateFields)
+                                        .then(async (values) => {
+                                            await onSubmit(values as API.PhoneRegisterRequest)
+                                        })
+                                        .catch((errorInfo) => {
+                                            console.error(errorInfo)
+                                        })
+                                }}>
+                                注册
+                            </Button>
+                        </Form>
+                        <a href='/' className={'go_to_register'}>
+                            <span>登录</span>
+                        </a>
+                    </Space>
+                </Space>
+            </div>
+        </div>
+    )
+})
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -15,6 +15,10 @@ declare module '*.svg' {
    const content: any
    export default content
 }
+declare module '.*' {
+    const value: any
+    export default value
+}
 declare module '*.tsx'
 declare module '*.svg'
 declare module '*.png'
				`@@ -0,0 +1,2 @@`

				<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="17.621%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFE2B8" offset="0%"/><stop stop-color="#FFCA7C" offset="100%"/></linearGradient><filter x="-10.7%" y="-10.7%" width="121.4%" height="121.4%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="6" in="SourceAlpha" result="shadowBlurInner1"/><feOffset dx="3" in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" in="shadowInnerInner1"/></filter><path id="b" d="m1291 377 70 70v-70z"/></defs><g transform="translate(-1291 -377)" fill="none" fill-rule="evenodd"><use fill="url(#a)" xlink:href="#b"/><use fill="#000" filter="url(#c)" xlink:href="#b"/></g></svg>