Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
landaiqing
2024-04-15 22:55:47 +08:00
parent 9dfcc7d7db
commit 0b7d88b74e
14 changed files with 1408 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

163
pnpm-lock.yaml generated
View File

@@ -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'}

2
src/assets/icons/corner_markers.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 955 B

5
src/assets/icons/react.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/images/login_qrcode-landaiqing.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

7
src/router/index.ts
View File

@@ -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

253
src/types/user/user.d.ts vendored
View File

@@ -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 }

154
src/utils/cookie/cookie.ts
View File

@@ -1,85 +1,85 @@
/** 配置 */
interface Options {
/** key前缀 */
prefix?: string;
/** key前缀 */
prefix?: string
}
/** 默认配置 */
const defaultOptions: Options = {
prefix: ""
};
class CookieStorage {
private prefix: string;
constructor(options: Options = defaultOptions) {
const { prefix } = options;
this.prefix = prefix ?? "";
}
/**
* @description: 设置cookie
* @param {string} key 键
* @param {any} value 值
* @param {number} expires 过期时间s毫秒，不传默认2年有效
* @Date: 2023-05-17 18:10:34
* @Author: mulingyuer
*/
public setItem(key: string, value: string | number, expires?: number): void {
const timestamp = Date.now();
if (typeof expires === "number") {
expires = timestamp + expires;
} else {
expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
}
document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
}
/**
* @description: 获取cookie
* @param {string} key 键
* @Date: 2023-05-17 18:31:50
* @Author: mulingyuer
*/
public getItem(key: string): string | undefined {
const cookies = document.cookie.split("; ");
let val: string | undefined = undefined;
cookies.find((item) => {
const [k, v] = item.split("=");
if (k === `${this.prefix}${key}`) {
val = v;
return true;
}
return false;
});
return val;
}
/**
* @description: 删除指定key的cookie
* @param {string} key 键
* @Date: 2023-05-17 18:32:56
* @Author: mulingyuer
*/
public removeItem(key: string): void {
this.setItem(key, "", -1);
}
/**
* @description: 清空所有cookie
* @Date: 2023-05-17 23:13:04
* @Author: mulingyuer
*/
public clear(): void {
const cookies = document.cookie.split("; ");
cookies.forEach((item) => {
const [k] = item.split("=");
this.removeItem(k);
});
}
prefix: '',
}
const cookieStorage = new CookieStorage();
class CookieStorage {
private prefix: string
export default cookieStorage;
export { CookieStorage };
constructor(options: Options = defaultOptions) {
const { prefix } = options
this.prefix = prefix ?? ''
}
/**
* @description: 设置cookie
* @param {string} key 键
* @param {any} value 值
* @param {number} expires 过期时间s毫秒，不传默认2年有效
* @Date: 2023-05-17 18:10:34
* @Author: mulingyuer
*/
public setItem(key: string, value: string | number, expires?: number): void {
const timestamp = Date.now()
if (typeof expires === 'number') {
expires = timestamp + expires
} else {
expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000
}
document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`
}
/**
* @description: 获取cookie
* @param {string} key 键
* @Date: 2023-05-17 18:31:50
* @Author: mulingyuer
*/
public getItem(key: string): string | undefined {
const cookies = document.cookie.split('; ')
let val: string | undefined = undefined
cookies.find((item) => {
const [k, v] = item.split('=')
if (k === `${this.prefix}${key}`) {
val = v
return true
}
return false
})
return val
}
/**
* @description: 删除指定key的cookie
* @param {string} key 键
* @Date: 2023-05-17 18:32:56
* @Author: mulingyuer
*/
public removeItem(key: string): void {
this.setItem(key, '', -1)
}
/**
* @description: 清空所有cookie
* @Date: 2023-05-17 23:13:04
* @Author: mulingyuer
*/
public clear(): void {
const cookies = document.cookie.split('; ')
cookies.forEach((item) => {
const [k] = item.split('=')
this.removeItem(k)
})
}
}
const cookieStorage = new CookieStorage()
export default cookieStorage
export { CookieStorage }

243
src/views/Login/index.tsx
View File

@@ -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>
)
})

154
src/views/User/Login/index.less Normal file
View File

@@ -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;
}

377
src/views/User/Login/index.tsx Normal file
View File

@@ -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>
)
})

154
src/views/User/Register/index.less Normal file
View File

@@ -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;
}

256
src/views/User/Register/index.tsx Normal file
View File

@@ -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>
)
})

4
src/vite-env.d.ts vendored
View File

@@ -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'