feat: 登录页面框架
This commit is contained in:
landaiqing
@@ -43,5 +43,12 @@ module.exports = {
|
|||||||
'space-before-blocks': 2, // 要求语句块之前有空格
|
'space-before-blocks': 2, // 要求语句块之前有空格
|
||||||
'@typescript-eslint/explicit-function-return-type': 0, // 禁止函数必须要定义返回类型
|
'@typescript-eslint/explicit-function-return-type': 0, // 禁止函数必须要定义返回类型
|
||||||
'react/display-name': 'off',
|
'react/display-name': 'off',
|
||||||
|
'@typescript-eslint/no-explicit-any': ['off'],
|
||||||
|
'@typescript-eslint/no-var-requires': ['off'],
|
||||||
|
'@typescript-eslint/no-use-before-define': ['off'],
|
||||||
|
'@typescript-eslint/no-empty-function': ['off'],
|
||||||
|
'@typescript-eslint/no-empty-interface': ['off'],
|
||||||
|
'@typescript-eslint/no-unused-vars': ['off'],
|
||||||
|
'@typescript-eslint/no-non-null-assertion': ['off'],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title><%- title %></title>
|
<title><%- title %></title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -14,6 +14,9 @@
|
|||||||
"@ant-design/pro-components": "^2.7.0",
|
"@ant-design/pro-components": "^2.7.0",
|
||||||
"antd": "^5.16.1",
|
"antd": "^5.16.1",
|
||||||
"axios": "^1.6.8",
|
"axios": "^1.6.8",
|
||||||
|
"mobx": "^6.12.3",
|
||||||
|
"mobx-persist-store": "^1.1.4",
|
||||||
|
"mobx-react": "^9.1.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.22.3",
|
"react-router-dom": "^6.22.3",
|
||||||
|
|||||||
59
pnpm-lock.yaml
generated
59
pnpm-lock.yaml
generated
@@ -17,6 +17,15 @@ dependencies:
|
|||||||
axios:
|
axios:
|
||||||
specifier: ^1.6.8
|
specifier: ^1.6.8
|
||||||
version: 1.6.8
|
version: 1.6.8
|
||||||
|
mobx:
|
||||||
|
specifier: ^6.12.3
|
||||||
|
version: 6.12.3
|
||||||
|
mobx-persist-store:
|
||||||
|
specifier: ^1.1.4
|
||||||
|
version: 1.1.4(mobx@6.12.3)
|
||||||
|
mobx-react:
|
||||||
|
specifier: ^9.1.1
|
||||||
|
version: 9.1.1(mobx@6.12.3)(react-dom@18.2.0)(react@18.2.0)
|
||||||
react:
|
react:
|
||||||
specifier: ^18.2.0
|
specifier: ^18.2.0
|
||||||
version: 18.2.0
|
version: 18.2.0
|
||||||
@@ -4506,6 +4515,56 @@ packages:
|
|||||||
ufo: 1.5.3
|
ufo: 1.5.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/mobx-persist-store@1.1.4(mobx@6.12.3):
|
||||||
|
resolution: {integrity: sha512-kGdTpnpfvTC61XiqlYnAN+gvkGiYfLgGpV1nj6k8hHom8V+vrPJyYMg+V1Rc5dNi7sa+qrHlbZfCvbaJoAtpSg==}
|
||||||
|
peerDependencies:
|
||||||
|
mobx: '*'
|
||||||
|
dependencies:
|
||||||
|
mobx: 6.12.3
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/mobx-react-lite@4.0.7(mobx@6.12.3)(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-RjwdseshK9Mg8On5tyJZHtGD+J78ZnCnRaxeQDSiciKVQDUbfZcXhmld0VMxAwvcTnPEHZySGGewm467Fcpreg==}
|
||||||
|
peerDependencies:
|
||||||
|
mobx: ^6.9.0
|
||||||
|
react: ^16.8.0 || ^17 || ^18
|
||||||
|
react-dom: '*'
|
||||||
|
react-native: '*'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
react-native:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
mobx: 6.12.3
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/mobx-react@9.1.1(mobx@6.12.3)(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-gVV7AdSrAAxqXOJ2bAbGa5TkPqvITSzaPiiEkzpW4rRsMhSec7C2NBCJYILADHKp2tzOAIETGRsIY0UaCV5aEw==}
|
||||||
|
peerDependencies:
|
||||||
|
mobx: ^6.9.0
|
||||||
|
react: ^16.8.0 || ^17 || ^18
|
||||||
|
react-dom: '*'
|
||||||
|
react-native: '*'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
react-native:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
mobx: 6.12.3
|
||||||
|
mobx-react-lite: 4.0.7(mobx@6.12.3)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/mobx@6.12.3:
|
||||||
|
resolution: {integrity: sha512-c8NKkO4R2lShkSXZ2Ongj1ycjugjzFFo/UswHBnS62y07DMcTc9Rvo03/3nRyszIvwPNljlkd4S828zIBv/piw==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/mri@1.2.0:
|
/mri@1.2.0:
|
||||||
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
|
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
|
|||||||
77
public/favicon.svg
Normal file
77
public/favicon.svg
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<svg t="1710925923326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8087"
|
||||||
|
width="200" height="200">
|
||||||
|
<path
|
||||||
|
d="M481.866 554.39C307.518 329.956 137.124 467.312 87.72 516.212c-8.342 8.258-4.326 23.352 8.838 33.298 79.538 60.1 340.138 238.074 393.422 34.128 2.33-8.918-0.66-19.652-8.114-29.248z"
|
||||||
|
fill="#CCC033" p-id="8088"></path>
|
||||||
|
<path
|
||||||
|
d="M481.866 554.388C307.518 329.956 137.124 467.312 87.72 516.212c-5.48 5.424-5.598 13.796-1.32 21.726 78.098-41.21 195.85-57.526 315.466 96.452 7.456 9.598 10.446 20.33 8.116 29.25a207.5 207.5 0 0 1-3.572 12.14c38.236-8.552 68.836-35.732 83.572-92.14 2.328-8.92-0.662-19.654-8.116-29.252z"
|
||||||
|
fill="#99AF17"></path>
|
||||||
|
<path
|
||||||
|
d="M608.99 589.628c107.374 263.132 308.492 176.808 369.252 143.04 10.26-5.702 10.462-21.32 0.468-34.448-60.388-79.32-263.344-320.97-369.648-138.946-4.648 7.96-4.662 19.102-0.072 30.354z"
|
||||||
|
fill="#EACF32" p-id="8090"></path>
|
||||||
|
<path
|
||||||
|
d="M820.558 537.238c-74.148-52.542-155.996-73-211.496 22.036-4.648 7.96-4.664 19.102-0.072 30.354 46.838 114.78 111.512 163.062 174.594 178.224-25.672-20.84-50.152-50.102-71.994-90.258 15.608-16.372 25.21-38.522 25.21-62.93a90.812 90.812 0 0 0-17.646-53.916 135.364 135.364 0 0 0-7.852 7.886c32.054-34.944 70.066-41.51 109.256-31.396z m-128.932 98.73z m17.05 36.168z m-16.4-34.654z m2.712 6.244z m2.65 5.892z m2.686 5.77z m2.722 5.648z m2.786 5.59z m1.73-93.752z m-18.5 26.4z m4.286-6.992z m3.516-5.332z m3.498-4.94z m3.564-4.688z"
|
||||||
|
fill="#CCC033" p-id="8091"></path>
|
||||||
|
<path
|
||||||
|
d="M65.508 873.848C533.44 700.74 756.58 451.128 824.804 362c13.046-17.044 7.766-41.7-11.132-51.876l-0.006-0.004c-15.116-8.14-33.912-4.076-44.27 9.616-55.86 73.84-256.384 304.032-719.526 516.368-10.962 5.026-15.234 18.396-9.188 28.83 4.996 8.622 15.482 12.37 24.826 8.914z"
|
||||||
|
fill="#A56021" p-id="8092"></path>
|
||||||
|
<path d="M494.452 523.422m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF4B34"
|
||||||
|
p-id="8093"></path>
|
||||||
|
<path d="M469.542 645.53m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||||
|
p-id="8094"></path>
|
||||||
|
<path
|
||||||
|
d="M61.034 874.934c455.172-210.888 652.954-437.954 708.36-511.196 10.358-13.692 29.154-17.756 44.27-9.616l0.006 0.004a34.662 34.662 0 0 1 10.486 8.712l0.646-0.838c13.046-17.044 7.766-41.698-11.132-51.876l-0.006-0.004c-15.116-8.14-33.912-4.076-44.27 9.616-55.86 73.84-256.384 304.032-719.526 516.368-10.962 5.026-15.234 18.396-9.188 28.832 4.21 7.262 12.316 11.046 20.354 9.998z"
|
||||||
|
fill="#8C4C17" p-id="8095"></path>
|
||||||
|
<path
|
||||||
|
d="M528.2 528.198c-243.476-146.586-127.232-332.026-84.516-386.866 7.214-9.26 22.676-7.056 34.11 4.84 69.084 71.874 276.624 309.598 80.41 386.626-8.58 3.368-19.592 1.668-30.004-4.6z"
|
||||||
|
fill="#CCC033" p-id="8096"></path>
|
||||||
|
<path d="M479.496 727.3m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||||
|
p-id="8097"></path>
|
||||||
|
<path
|
||||||
|
d="M456.826 708.832c24.952-30.628 65.664-40.844 100.914-28.496a91.066 91.066 0 0 0-20.616-23.774c-39.068-31.828-96.538-25.958-128.366 13.11-31.826 39.068-25.958 96.54 13.11 128.366a91.02 91.02 0 0 0 27.452 15.384c-19.22-32.026-17.446-73.962 7.506-104.59z"
|
||||||
|
fill="#FF4B34" p-id="8098"></path>
|
||||||
|
<path
|
||||||
|
d="M490.916 794.086a12.004 12.004 0 0 1-11.27-7.88 11.998 11.998 0 0 1 7.148-15.392c17.892-6.544 29.342-15.336 34.034-26.128 4.95-11.388 0.736-21.612 0.554-22.042-2.728-6.04-0.014-13.084 6.026-15.812 6.04-2.73 13.176 0.02 15.904 6.06 0.896 1.986 8.51 20.002-0.222 40.774-7.29 17.338-23.456 30.692-48.05 39.688a12.046 12.046 0 0 1-4.124 0.732z"
|
||||||
|
fill="#FF9079" p-id="8099"></path>
|
||||||
|
<path d="M403.212 559.58m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||||
|
p-id="8100"></path>
|
||||||
|
<path
|
||||||
|
d="M375.942 570.134c-14.258-36.844-2.978-77.274 25.202-101.786a91.07 91.07 0 0 0-30.864 6.142c-46.994 18.188-70.348 71.026-52.16 118.022 18.188 46.994 71.028 70.348 118.022 52.16a91.034 91.034 0 0 0 26.958-16.234c-37.34 0.842-72.9-21.462-87.158-58.304z"
|
||||||
|
fill="#FF4B34" p-id="8101"></path>
|
||||||
|
<path
|
||||||
|
d="M456.478 588.782a12 12 0 0 1-11.846-14c3.204-18.978 1.164-33.372-6.064-42.784-7.416-9.656-18.42-11.092-18.528-11.102a12 12 0 0 1 2.246-23.894c2.168 0.204 21.592 2.508 35.316 20.378 11.456 14.916 15.054 35.574 10.694 61.398a12.004 12.004 0 0 1-11.818 10.004z"
|
||||||
|
fill="#FF9079" p-id="8102"></path>
|
||||||
|
<path
|
||||||
|
d="M491.586 160.806a1040.528 1040.528 0 0 0-13.792-14.636c-11.434-11.896-26.898-14.1-34.11-4.838-42.716 54.84-158.958 240.28 84.516 386.866 10.412 6.268 21.424 7.968 30.004 4.6 8.192-3.216 15.664-6.718 22.486-10.47-208.196-131.322-136.172-291.618-89.104-361.522z"
|
||||||
|
fill="#99AF17" p-id="8103"></path>
|
||||||
|
<path d="M605.562 614.662m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||||
|
p-id="8104"></path>
|
||||||
|
<path
|
||||||
|
d="M576.32 614.664c0-39.506 25.112-73.14 60.24-85.83a91.062 91.062 0 0 0-31-5.41c-50.39 0-91.24 40.85-91.24 91.24 0 50.39 40.85 91.24 91.24 91.24 10.886 0 21.322-1.914 31-5.412-35.128-12.69-60.24-46.324-60.24-85.828z"
|
||||||
|
fill="#FF4B34" p-id="8105"></path>
|
||||||
|
<path
|
||||||
|
d="M649.002 661.926a12 12 0 0 1-10.302-18.136c9.74-16.376 13.064-30.422 9.884-41.752-3.356-11.954-13.08-17.222-13.492-17.44-5.93-2.96-8.276-10.134-5.316-16.064 2.958-5.93 10.224-8.306 16.158-5.346 1.95 0.974 19.232 10.132 25.582 31.75 5.3 18.046 1.2 38.61-12.188 61.12a11.992 11.992 0 0 1-10.326 5.868z"
|
||||||
|
fill="#FF9079" p-id="8106"></path>
|
||||||
|
<path d="M378.3 797.142m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||||
|
p-id="8107"></path>
|
||||||
|
<path
|
||||||
|
d="M349.704 791.034c8.252-38.634 39.836-66.28 76.842-71.352a91.028 91.028 0 0 0-29.186-11.768c-49.28-10.526-97.762 20.888-108.288 70.168-10.526 49.278 20.888 97.762 70.168 108.288a91.04 91.04 0 0 0 31.446 1.184c-31.702-19.75-49.234-57.886-40.982-96.52z"
|
||||||
|
fill="#FF4B34" p-id="8108"></path>
|
||||||
|
<path
|
||||||
|
d="M413.426 852.702a12 12 0 0 1-8.802-20.152c12.944-13.98 19.13-27.022 18.388-38.766-0.784-12.392-9.194-19.574-9.55-19.874-5.18-4.134-5.976-11.64-1.842-16.822 4.134-5.18 11.736-5.986 16.918-1.854 1.704 1.358 16.69 13.926 18.384 36.396 1.414 18.756-6.892 38.008-24.686 57.224a11.968 11.968 0 0 1-8.81 3.848z"
|
||||||
|
fill="#FF9079" p-id="8109"></path>
|
||||||
|
<path d="M277.996 678.872m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||||
|
p-id="8110"></path>
|
||||||
|
<path
|
||||||
|
d="M248.754 678.872c0-39.506 25.112-73.14 60.24-85.83a91.062 91.062 0 0 0-31-5.41c-50.39 0-91.24 40.85-91.24 91.24 0 50.39 40.85 91.24 91.24 91.24 10.886 0 21.322-1.914 31-5.412-35.128-12.688-60.24-46.322-60.24-85.828z"
|
||||||
|
fill="#FF4B34" p-id="8111"></path>
|
||||||
|
<path
|
||||||
|
d="M321.438 726.136a12 12 0 0 1-10.302-18.136c9.738-16.374 13.064-30.422 9.884-41.752-3.356-11.956-13.08-17.222-13.492-17.44-5.93-2.96-8.276-10.136-5.316-16.064 2.96-5.93 10.226-8.306 16.158-5.346 1.95 0.974 19.232 10.132 25.582 31.752 5.3 18.046 1.2 38.61-12.186 61.12a12.006 12.006 0 0 1-10.328 5.866z"
|
||||||
|
fill="#FF9079" p-id="8112"></path>
|
||||||
|
<path d="M557.74 439.404m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#99AF17" p-id="8113"></path>
|
||||||
|
<path d="M494.478 368.528m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#99AF17" p-id="8114"></path>
|
||||||
|
<path d="M785.856 674.864m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#CCC033" p-id="8115"></path>
|
||||||
|
<path
|
||||||
|
d="M927.274 710.09a11.966 11.966 0 0 1-8.664-3.696l-65.998-68.844a12 12 0 0 1 17.324-16.608l65.998 68.844a12 12 0 0 1-8.66 20.304z"
|
||||||
|
fill="#FCE575" p-id="8116"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.2 KiB |
@@ -1 +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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
42
src/App.css
42
src/App.css
@@ -1,42 +1,42 @@
|
|||||||
#root {
|
#root {
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
height: 6em;
|
height: 6em;
|
||||||
padding: 1.5em;
|
padding: 1.5em;
|
||||||
will-change: filter;
|
will-change: filter;
|
||||||
transition: filter 300ms;
|
transition: filter 300ms;
|
||||||
}
|
}
|
||||||
.logo:hover {
|
.logo:hover {
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
}
|
}
|
||||||
.logo.react:hover {
|
.logo.react:hover {
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes logo-spin {
|
@keyframes logo-spin {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
a:nth-of-type(2) .logo {
|
a:nth-of-type(2) .logo {
|
||||||
animation: logo-spin infinite 20s linear;
|
animation: logo-spin infinite 20s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-the-docs {
|
.read-the-docs {
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|||||||
5
src/api/user/index.ts
Normal file
5
src/api/user/index.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import service from '@/utils/axios/service.ts'
|
||||||
|
|
||||||
|
export function getUserInfo(params: object) {
|
||||||
|
return service.get('/user/info', params)
|
||||||
|
}
|
||||||
BIN
src/assets/images/background.png
Normal file
BIN
src/assets/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
@@ -13,56 +13,32 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||||||
font-weight: 500;
|
// 滚动条整体部分
|
||||||
color: #646cff;
|
&::-webkit-scrollbar {
|
||||||
text-decoration: inherit;
|
width: 6px;
|
||||||
}
|
height: 8px;
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
|
||||||
margin: 0;
|
&::-webkit-scrollbar-button {
|
||||||
display: flex;
|
display: none;
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
|
||||||
font-size: 3.2em;
|
&::-webkit-scrollbar-thumb {
|
||||||
line-height: 1.1;
|
background: rgba(144, 147, 153, 0.3);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
// 边角，即两个滚动条的交汇处
|
||||||
border-radius: 8px;
|
&::-webkit-scrollbar-corner {
|
||||||
border: 1px solid transparent;
|
display: none;
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
|
||||||
:root {
|
&::-webkit-resizer {
|
||||||
color: #213547;
|
display: none;
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
@primary-color: '#ff7875';
|
|
||||||
1
src/constants/index.ts
Normal file
1
src/constants/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export const DEFAULT_NAME = 'admin'
|
||||||
@@ -4,9 +4,13 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom'
|
|||||||
import './assets/styles/index.less'
|
import './assets/styles/index.less'
|
||||||
import routeConfig from './router'
|
import routeConfig from './router'
|
||||||
import 'virtual:svg-icons-register'
|
import 'virtual:svg-icons-register'
|
||||||
|
import { Provider as MobxProvider } from 'mobx-react'
|
||||||
|
import { RootStore } from '@/store'
|
||||||
const router = createBrowserRouter(routeConfig)
|
const router = createBrowserRouter(routeConfig)
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<RouterProvider router={router} />
|
<MobxProvider {...RootStore}>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</MobxProvider>
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,18 +1,12 @@
|
|||||||
import type { RouteObject } from 'react-router-dom'
|
import type { RouteObject } from 'react-router-dom'
|
||||||
|
|
||||||
import About from '@/views/about/About'
|
|
||||||
// import Home from '@/views/home/Home'
|
|
||||||
import NoFound from '@/views/404/404'
|
import NoFound from '@/views/404/404'
|
||||||
import Login from '@/views/Login/index'
|
import Login from '@/views/Login'
|
||||||
const routes: RouteObject[] = [
|
const routes: RouteObject[] = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
Component: Login,
|
Component: Login,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/about',
|
|
||||||
Component: About,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '*',
|
path: '*',
|
||||||
Component: NoFound,
|
Component: NoFound,
|
||||||
|
|||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { useUserStore } from './modules/user.ts'
|
||||||
|
|
||||||
|
/** 将每个Store实例化 */
|
||||||
|
export const RootStore = {
|
||||||
|
user: new useUserStore(),
|
||||||
|
}
|
||||||
|
|||||||
40
src/store/modules/user.ts
Normal file
40
src/store/modules/user.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { action, makeAutoObservable } from 'mobx'
|
||||||
|
import { makePersistable, isHydrated } from 'mobx-persist-store'
|
||||||
|
|
||||||
|
export class useUserStore {
|
||||||
|
user: object = {}
|
||||||
|
constructor() {
|
||||||
|
makeAutoObservable(
|
||||||
|
this,
|
||||||
|
{
|
||||||
|
setUserInfo: action,
|
||||||
|
},
|
||||||
|
{ autoBind: true },
|
||||||
|
)
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
makePersistable(this, {
|
||||||
|
// 在构造函数内使用 makePersistable
|
||||||
|
name: 'userStore', // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
|
||||||
|
properties: ['user'], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
|
||||||
|
storage: window.localStorage, // 保存的位置：看自己的业务情况选择，可以是localStorage，sessionstorage
|
||||||
|
// 。。还有一些其他配置参数，例如数据过期时间等等，可以康康文档，像storage这种字段可以配置在全局配置里，详见文档
|
||||||
|
}).then(
|
||||||
|
action((persistStore) => {
|
||||||
|
// persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
|
||||||
|
// console.log(persistStore)
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
get getUserInfo() {
|
||||||
|
return this.user
|
||||||
|
}
|
||||||
|
get token() {
|
||||||
|
return this.user ? this.user.token : ''
|
||||||
|
}
|
||||||
|
get isHydrated() {
|
||||||
|
return isHydrated(this)
|
||||||
|
}
|
||||||
|
setUserInfo(user: object) {
|
||||||
|
this.user = user
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/types/user/user.d.ts
vendored
Normal file
13
src/types/user/user.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
declare namespace user {
|
||||||
|
interface userInfo {
|
||||||
|
name: string
|
||||||
|
avatar: string
|
||||||
|
userid: string
|
||||||
|
role: string
|
||||||
|
email: string
|
||||||
|
telephone: string
|
||||||
|
status: string
|
||||||
|
token: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export { user }
|
||||||
@@ -1,29 +1,146 @@
|
|||||||
import axios from 'axios'
|
import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||||
|
import { message } from 'antd'
|
||||||
|
// 数据返回的接口
|
||||||
|
// 定义请求响应参数，不含data
|
||||||
|
interface Result {
|
||||||
|
code: number
|
||||||
|
msg: string
|
||||||
|
}
|
||||||
|
|
||||||
const request = axios.create({
|
// 请求响应参数，包含data
|
||||||
baseURL: import.meta.env.VITE_BASE_API, // 域名配置，可添加变量配置文件定义
|
interface ResultData<T = never> extends Result {
|
||||||
headers: {
|
data?: T
|
||||||
Authorization: `Bearer`, // token从Cookie中获取
|
}
|
||||||
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
|
const URL = import.meta.env.VITE_API_BASE_URL
|
||||||
},
|
enum RequestEnums {
|
||||||
timeout: 5000, // 请求超时时间
|
TIMEOUT = 20000,
|
||||||
})
|
OVERDUE = 600, // 登录失效
|
||||||
|
FAIL = 999, // 请求失败
|
||||||
|
SUCCESS = 200, // 请求成功
|
||||||
|
}
|
||||||
|
const config = {
|
||||||
|
// 默认地址
|
||||||
|
baseURL: URL as string,
|
||||||
|
// 设置超时时间
|
||||||
|
timeout: RequestEnums.TIMEOUT as number,
|
||||||
|
// 跨域时候允许携带凭证
|
||||||
|
withCredentials: true,
|
||||||
|
}
|
||||||
|
class RequestHttp {
|
||||||
|
// 定义成员变量并指定类型
|
||||||
|
service: AxiosInstance
|
||||||
|
public constructor(config: AxiosRequestConfig) {
|
||||||
|
// 实例化axios
|
||||||
|
this.service = axios.create(config)
|
||||||
|
/**
|
||||||
|
* 请求拦截器
|
||||||
|
* 客户端发送请求 -> [请求拦截器] -> 服务器
|
||||||
|
*/
|
||||||
|
this.service.interceptors.request.use(
|
||||||
|
(config: AxiosRequestConfig | any) => {
|
||||||
|
const token = localStorage.getItem('token') || ''
|
||||||
|
return {
|
||||||
|
...config,
|
||||||
|
headers: {
|
||||||
|
'x-access-token': token, // 请求头中携带token信息
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(error: AxiosError) => {
|
||||||
|
// 请求报错
|
||||||
|
Promise.reject(error)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
//请求拦截
|
/**
|
||||||
request.interceptors.request.use(
|
* 响应拦截器
|
||||||
(config) => config,
|
* 服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
|
||||||
(err) => Promise.reject(err.response),
|
*/
|
||||||
)
|
this.service.interceptors.response.use(
|
||||||
|
(response: AxiosResponse) => {
|
||||||
// 响应拦截
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
request.interceptors.response.use(
|
// @ts-expect-error
|
||||||
(response) => {
|
const { data, config } = response // 解构
|
||||||
// 有些情况下接口未必是RESTful风格，C相关的接口返回异常时状态码会小于0
|
if (data.code === RequestEnums.OVERDUE) {
|
||||||
if (response.status !== 200) return Promise.reject(response.data)
|
// 登录信息失效，应跳转到登录页面，并清空本地的token
|
||||||
// 一般会和后端约定一些code，分别进行处理,这里直接返回了不做处理
|
localStorage.setItem('token', '')
|
||||||
return response.data
|
return Promise.reject(data)
|
||||||
},
|
}
|
||||||
(err) => Promise.reject(err.response),
|
// 全局错误信息拦截（防止下载文件得时候返回数据流，没有code，直接报错）
|
||||||
)
|
if (data.code && data.code !== RequestEnums.SUCCESS) {
|
||||||
|
message.error(data) // 此处也可以使用组件提示报错信息
|
||||||
export default request
|
return Promise.reject(data)
|
||||||
|
}
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
(error: AxiosError) => {
|
||||||
|
const { response } = error
|
||||||
|
if (response) {
|
||||||
|
this.handleCode(response.status)
|
||||||
|
}
|
||||||
|
if (!window.navigator.onLine) {
|
||||||
|
message.error('网络连接失败')
|
||||||
|
// 可以跳转到错误页面，也可以不做操作
|
||||||
|
// return router.replace({
|
||||||
|
// path: '/404'
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
handleCode(code: number): void {
|
||||||
|
switch (code) {
|
||||||
|
case 400:
|
||||||
|
message.error('请求错误(400)')
|
||||||
|
break
|
||||||
|
case 401:
|
||||||
|
message.error('未授权，请重新登录(401)')
|
||||||
|
break
|
||||||
|
case 403:
|
||||||
|
message.error('拒绝访问(403)')
|
||||||
|
break
|
||||||
|
case 404:
|
||||||
|
message.error('请求出错(404)')
|
||||||
|
break
|
||||||
|
case 408:
|
||||||
|
message.error('请求超时(408)')
|
||||||
|
break
|
||||||
|
case 500:
|
||||||
|
message.error('服务器错误(500)')
|
||||||
|
break
|
||||||
|
case 501:
|
||||||
|
message.error('服务未实现(501)')
|
||||||
|
break
|
||||||
|
case 502:
|
||||||
|
message.error('网络错误(502)')
|
||||||
|
break
|
||||||
|
case 503:
|
||||||
|
message.error('服务不可用(503)')
|
||||||
|
break
|
||||||
|
case 504:
|
||||||
|
message.error('网络超时(504)')
|
||||||
|
break
|
||||||
|
case 505:
|
||||||
|
message.error('HTTP版本不受支持(505)')
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
message.error(`连接出错(${code})!`)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 常用方法封装
|
||||||
|
get<T>(url: string, params?: object): Promise<ResultData<T>> {
|
||||||
|
return this.service.get(url, { params })
|
||||||
|
}
|
||||||
|
post<T>(url: string, params?: object): Promise<ResultData<T>> {
|
||||||
|
return this.service.post(url, params)
|
||||||
|
}
|
||||||
|
put<T>(url: string, params?: object): Promise<ResultData<T>> {
|
||||||
|
return this.service.put(url, params)
|
||||||
|
}
|
||||||
|
delete<T>(url: string, params?: object): Promise<ResultData<T>> {
|
||||||
|
return this.service.delete(url, { params })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 导出一个实例对象
|
||||||
|
export default new RequestHttp(config)
|
||||||
|
|||||||
11
src/utils/store/useStore.tsx
Normal file
11
src/utils/store/useStore.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { MobXProviderContext } from 'mobx-react'
|
||||||
|
import { useContext } from 'react'
|
||||||
|
import { RootStore } from '@/store'
|
||||||
|
|
||||||
|
// 根据RootStore来实现参数的自动获取和返回值的自动推导
|
||||||
|
function useStore<T extends typeof RootStore, V extends keyof T>(name: V): T[V] {
|
||||||
|
const store = useContext(MobXProviderContext) as T
|
||||||
|
return store[name]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useStore
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import './index.less'
|
||||||
export default () => {
|
export default () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
@@ -7,8 +7,149 @@ export default () => {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>About Page</h1>
|
<body translate='no'>
|
||||||
<button onClick={goBack}>返回</button>
|
<div className='container container-star'>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-1'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
<div className='star-2'></div>
|
||||||
|
</div>
|
||||||
|
<div className='container container-bird'>
|
||||||
|
<div className='bird bird-anim'>
|
||||||
|
<div className='bird-container'>
|
||||||
|
<div className='wing wing-left'>
|
||||||
|
<div className='wing-left-top'></div>
|
||||||
|
</div>
|
||||||
|
<div className='wing wing-right'>
|
||||||
|
<div className='wing-right-top'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='bird bird-anim'>
|
||||||
|
<div className='bird-container'>
|
||||||
|
<div className='wing wing-left'>
|
||||||
|
<div className='wing-left-top'></div>
|
||||||
|
</div>
|
||||||
|
<div className='wing wing-right'>
|
||||||
|
<div className='wing-right-top'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='bird bird-anim'>
|
||||||
|
<div className='bird-container'>
|
||||||
|
<div className='wing wing-left'>
|
||||||
|
<div className='wing-left-top'></div>
|
||||||
|
</div>
|
||||||
|
<div className='wing wing-right'>
|
||||||
|
<div className='wing-right-top'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='bird bird-anim'>
|
||||||
|
<div className='bird-container'>
|
||||||
|
<div className='wing wing-left'>
|
||||||
|
<div className='wing-left-top'></div>
|
||||||
|
</div>
|
||||||
|
<div className='wing wing-right'>
|
||||||
|
<div className='wing-right-top'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='bird bird-anim'>
|
||||||
|
<div className='bird-container'>
|
||||||
|
<div className='wing wing-left'>
|
||||||
|
<div className='wing-left-top'></div>
|
||||||
|
</div>
|
||||||
|
<div className='wing wing-right'>
|
||||||
|
<div className='wing-right-top'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='bird bird-anim'>
|
||||||
|
<div className='bird-container'>
|
||||||
|
<div className='wing wing-left'>
|
||||||
|
<div className='wing-left-top'></div>
|
||||||
|
</div>
|
||||||
|
<div className='wing wing-right'>
|
||||||
|
<div className='wing-right-top'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='container-title'>
|
||||||
|
<div className='title'>
|
||||||
|
<div className='number'>4</div>
|
||||||
|
<div className='moon'>
|
||||||
|
<div className='face'>
|
||||||
|
<div className='mouth'></div>
|
||||||
|
<div className='eyes'>
|
||||||
|
<div className='eye-left'></div>
|
||||||
|
<div className='eye-right'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='number'>4</div>
|
||||||
|
</div>
|
||||||
|
<div className='subtitle'>Oops. Looks like you took a wrong turn.</div>
|
||||||
|
<button onClick={goBack}>Go back</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
1393
src/views/404/index.less
Normal file
1393
src/views/404/index.less
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,10 +1,11 @@
|
|||||||
import {
|
import {
|
||||||
AlipayOutlined,
|
GithubOutlined,
|
||||||
|
GitlabOutlined,
|
||||||
LockOutlined,
|
LockOutlined,
|
||||||
MobileOutlined,
|
MobileOutlined,
|
||||||
TaobaoOutlined,
|
QqOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
WeiboOutlined,
|
WechatOutlined,
|
||||||
} from '@ant-design/icons'
|
} from '@ant-design/icons'
|
||||||
import {
|
import {
|
||||||
LoginFormPage,
|
LoginFormPage,
|
||||||
@@ -12,12 +13,14 @@ import {
|
|||||||
ProFormCheckbox,
|
ProFormCheckbox,
|
||||||
ProFormText,
|
ProFormText,
|
||||||
} from '@ant-design/pro-components'
|
} from '@ant-design/pro-components'
|
||||||
import { Divider, Space, Tabs, message } from 'antd'
|
import { Divider, Space, Tabs, message, Button } from 'antd'
|
||||||
import type { CSSProperties } from 'react'
|
import { CSSProperties } from 'react'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
// import { history } from 'umi';
|
import logo from '@/assets/icons/schisandra.svg'
|
||||||
|
import background from '@/assets/images/background.png'
|
||||||
type LoginType = 'phone' | 'account'
|
import { observer } from 'mobx-react'
|
||||||
|
// import useStore from '@/utils/store/useStore.tsx'
|
||||||
|
type LoginType = 'account' | 'phone'
|
||||||
|
|
||||||
const iconStyles: CSSProperties = {
|
const iconStyles: CSSProperties = {
|
||||||
color: 'rgba(0, 0, 0, 0.2)',
|
color: 'rgba(0, 0, 0, 0.2)',
|
||||||
@@ -26,16 +29,17 @@ const iconStyles: CSSProperties = {
|
|||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default () => {
|
export default observer(() => {
|
||||||
|
// const store = useStore('user')
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{ label: '账户密码登录', key: 'account' },
|
{ label: '账户密码登录', key: 'account' },
|
||||||
{ label: '手机号登录', key: 'phone' },
|
{ label: '手机号登录', key: 'phone' },
|
||||||
]
|
]
|
||||||
const [loginType, setLoginType] = useState<LoginType>('phone')
|
const [loginType, setLoginType] = useState<LoginType>('account')
|
||||||
|
|
||||||
const onSubmit = async (formData: unknown) => {
|
const onSubmit = async (formData: object) => {
|
||||||
console.log(formData)
|
console.log(formData)
|
||||||
// history.push('/');
|
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -46,33 +50,32 @@ export default () => {
|
|||||||
}}>
|
}}>
|
||||||
<LoginFormPage
|
<LoginFormPage
|
||||||
onFinish={onSubmit}
|
onFinish={onSubmit}
|
||||||
backgroundImageUrl='https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png'
|
backgroundImageUrl={background}
|
||||||
logo='https://github.githubassets.com/images/modules/logos_page/Octocat.png'
|
logo={logo}
|
||||||
title='Github'
|
title='五味子云相册'
|
||||||
subTitle='全球最大的代码托管平台'
|
subTitle='随时随地分享你的美好瞬间'
|
||||||
// activityConfig={{
|
activityConfig={{
|
||||||
// style: {
|
style: {
|
||||||
// boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
|
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
|
||||||
// color: '#fff',
|
color: '#fff',
|
||||||
// borderRadius: 8,
|
borderRadius: 8,
|
||||||
// backgroundColor: '#1677FF',
|
backgroundColor: '#1677FF',
|
||||||
// },
|
},
|
||||||
// title: '活动标题，可配置图片',
|
title: '活动标题，可配置图片',
|
||||||
// subTitle: '活动介绍说明文字',
|
subTitle: '活动介绍说明文字',
|
||||||
// action: (
|
action: (
|
||||||
// <Button
|
<Button
|
||||||
// size="large"
|
size='large'
|
||||||
// style={{
|
style={{
|
||||||
// borderRadius: 20,
|
borderRadius: 20,
|
||||||
// background: '#fff',
|
background: '#fff',
|
||||||
// color: '#1677FF',
|
color: '#1677FF',
|
||||||
// width: 120,
|
width: 120,
|
||||||
// }}
|
}}>
|
||||||
// >
|
去看看
|
||||||
// 去看看
|
</Button>
|
||||||
// </Button>
|
),
|
||||||
// ),
|
}}
|
||||||
// }}
|
|
||||||
actions={
|
actions={
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -98,7 +101,7 @@ export default () => {
|
|||||||
border: '1px solid #D4D8DD',
|
border: '1px solid #D4D8DD',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
}}>
|
}}>
|
||||||
<AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
|
<QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -111,7 +114,7 @@ export default () => {
|
|||||||
border: '1px solid #D4D8DD',
|
border: '1px solid #D4D8DD',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
}}>
|
}}>
|
||||||
<TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
|
<WechatOutlined style={{ ...iconStyles, color: '#08a327' }} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -124,7 +127,20 @@ export default () => {
|
|||||||
border: '1px solid #D4D8DD',
|
border: '1px solid #D4D8DD',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
}}>
|
}}>
|
||||||
<WeiboOutlined style={{ ...iconStyles, color: '#333333' }} />
|
<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>
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
@@ -224,4 +240,4 @@ export default () => {
|
|||||||
</LoginFormPage>
|
</LoginFormPage>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|||||||
@@ -1,14 +0,0 @@
|
|||||||
import { useNavigate } from 'react-router-dom'
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
const navigate = useNavigate()
|
|
||||||
const goBack = () => {
|
|
||||||
navigate(-1)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>About Page</h1>
|
|
||||||
<button onClick={goBack}>返回</button>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { Link } from 'react-router-dom'
|
|
||||||
import { Button, Card, Image } from 'antd'
|
|
||||||
import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
|
|
||||||
import wallhaven from '@/assets/images/wallhaven.jpg'
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>Home Page</h1>
|
|
||||||
<Link to='/about'>页面跳转</Link>
|
|
||||||
<Button>测试</Button>
|
|
||||||
<Card>测试</Card>
|
|
||||||
<SvgIcon name='schisandra' size={200} />
|
|
||||||
<Image src={wallhaven}></Image>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user