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

fix: 添加过渡动画

Browse Source
This commit is contained in:
landaiqing
2024-04-22 16:24:45 +08:00
parent b53a7e2853
commit 46462c4514
17 changed files with 228 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ComponentLoading/index.tsx Normal file
View File

@@ -0,0 +1,8 @@
import Loading from '@/components/Loading'
import { Suspense } from 'react'
const ComponentLoading = (Component: any, props: any) => (
<Suspense fallback={<Loading />}>
<Component {...props} />
</Suspense>
)
export default ComponentLoading

18
src/components/HomeIndex/index.less
View File

@@ -31,15 +31,15 @@ html {
height: 100vh;
width: 100vw;
position: fixed;
//background: linear-gradient(
// 90deg,
// var(--line) 1px,
// transparent 1px var(--size)
//)
//50% 50% / var(--size) var(--size),
//linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
// var(--size) var(--size);
background-image: url("@/assets/images/background.png");
background: linear-gradient(
90deg,
var(--line) 1px,
transparent 1px var(--size)
)
50% 50% / var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size);
//background-image: url("@/assets/images/background.png");
-webkit-mask: linear-gradient(-15deg, transparent 30%, white);
mask: linear-gradient(-15deg, transparent 30%, white);
top: 0;

6
src/components/HomeIndex/index.tsx
View File

@@ -575,9 +575,9 @@ const HomeIndex: React.FC = () => {
</div>
</header>
<main>
<section className={'section'}>
<h2 className={'h2'}>Pretty rad.</h2>
</section>
{/*<section className={'section'}>*/}
{/* <h2 className={'h2'}>Pretty rad.</h2>*/}
{/*</section>*/}
</main>
<footer className={'footer'}>ʕ•ᴥ•ʔ schisandra © 2024</footer>
</>

50
src/components/Loading/index.less Normal file
View File

@@ -0,0 +1,50 @@
.loading-body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
overflow: hidden;
background-image: url("@/assets/images/background.png");
}
.gegga {
width: 0;
}
.snurra {
filter: url(#gegga);
}
.stopp1 {
stop-color: #f700a8;
}
.stopp2 {
stop-color: #ff8000;
}
.halvan {
animation: Snurra1 10s infinite linear;
stroke-dasharray: 180 800;
fill: none;
stroke: url(#gradient);
stroke-width: 23;
stroke-linecap: round;
}
.strecken {
animation: Snurra1 3s infinite linear;
stroke-dasharray: 26 54;
fill: none;
stroke: url(#gradient);
stroke-width: 23;
stroke-linecap: round;
}
.skugga {
filter: blur(5px);
opacity: 0.3;
position: absolute;
transform: translate(3px, 3px);
}
@keyframes Snurra1 {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -403px;
}
}

60
src/components/Loading/index.tsx Normal file
View File

@@ -0,0 +1,60 @@
import React, { useEffect } from 'react'
import './index.less'
const Loading: React.FC = () => {
useEffect(() => {
document.body.classList.add('loading-body')
return () => {
document.body.classList.remove('loading-body')
}
}, [])
return (
<>
<svg className='gegga'>
<defs>
<filter id='gegga'>
<feGaussianBlur
in='SourceGraphic'
stdDeviation='7'
result='blur'></feGaussianBlur>
<feColorMatrix
in='blur'
mode='matrix'
values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10'
result='inreGegga'></feColorMatrix>
<feComposite
in='SourceGraphic'
in2='inreGegga'
operator='atop'></feComposite>
</filter>
</defs>
</svg>
<svg className='snurra' width='200' height='200' viewBox='0 0 200 200'>
<defs>
<linearGradient id='linjärGradient'>
<stop className='stopp1' offset='0'></stop>
<stop className='stopp2' offset='1'></stop>
</linearGradient>
<linearGradient
y2='160'
x2='160'
y1='40'
x1='40'
gradientUnits='userSpaceOnUse'
id='gradient'
xlinkHref='#linjärGradient'></linearGradient>
</defs>
<path
className='halvan'
d='m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64'></path>
<circle className='strecken' cx='100' cy='100' r='64'></circle>
</svg>
{/*<svg className='skugga' width='200' height='200' viewBox='0 0 200 200'>*/}
{/* <path*/}
{/* className='halvan'*/}
{/* d='m 164,100 c 0,-35.346224 -28.65378,-64 -64,-64 -35.346224,0 -64,28.653776 -64,64 0,35.34622 28.653776,64 64,64 35.34622,0 64,-26.21502 64,-64 0,-37.784981 -26.92058,-64 -64,-64 -37.079421,0 -65.267479,26.922736 -64,64 1.267479,37.07726 26.703171,65.05317 64,64 37.29683,-1.05317 64,-64 64,-64'></path>*/}
{/* <circle className='strecken' cx='100' cy='100' r='64'></circle>*/}
{/*</svg>*/}
</>
)
}
export default React.memo(Loading)

26
src/router/index.ts
View File

@@ -1,14 +1,16 @@
import type { RouteObject } from 'react-router-dom'
import NoFound from '@/views/404/404'
import Login from '@/views/User/Login'
import Register from '@/views/User/Register'
import home from '@/views/Home/'
import Main from '@/views/Main/'
import Login from './modules/login/index.ts'
import Register from './modules/register/index.ts'
import home from './modules/home/index.ts'
import Main from './modules/main/index.ts'
import ComponentLoading from '@/components/ComponentLoading'
const routes: RouteObject[] = [
{
path: '/',
Component: home,
Component: (props) => ComponentLoading(home, props),
},
{
path: '*',
@@ -16,19 +18,19 @@ const routes: RouteObject[] = [
},
{
path: '/register',
Component: Register,
},
{
path: '/home',
Component: home,
Component: (props) => ComponentLoading(Register, props),
},
// {
// path: '/home',
// Component: home,
// },
{
path: '/login',
Component: Login,
Component: (props) => ComponentLoading(Login, props),
},
{
path: '/main',
Component: Main,
Component: (props) => ComponentLoading(Main, props),
},
]

9
src/router/modules/home/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { lazy } from 'react'
const home = lazy(
() =>
new Promise((resolve: any) => {
setTimeout(() => resolve(import('@/views/Home/')), 1000)
}),
)
export default home

9
src/router/modules/login/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { lazy } from 'react'
const login = lazy(
() =>
new Promise((resolve: any) => {
setTimeout(() => resolve(import('@/views/User/Login')), 500)
}),
)
export default login

9
src/router/modules/main/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { lazy } from 'react'
const main = lazy(
() =>
new Promise((resolve: any) => {
setTimeout(() => resolve(import('@/views/Main')), 1000)
}),
)
export default main

9
src/router/modules/register/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { lazy } from 'react'
const register = lazy(
() =>
new Promise((resolve: any) => {
setTimeout(() => resolve(import('@/views/User/Register')), 500)
}),
)
export default register

4
src/store/modules/user.ts
View File

@@ -2,7 +2,7 @@ import { action, makeAutoObservable } from 'mobx'
import { makePersistable, isHydrated } from 'mobx-persist-store'
export class useUserStore {
user: object = {}
user: any = {}
constructor() {
makeAutoObservable(
this,
@@ -12,7 +12,7 @@ export class useUserStore {
{ autoBind: true },
)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
makePersistable(this, {
makePersistable(this, {
// 在构造函数内使用 makePersistable
name: 'userStore', // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
properties: ['user'], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算

62
src/utils/localStorage/encry.ts
View File

@@ -1,37 +1,37 @@
import CryptoJS from 'crypto-js';
import CryptoJS from 'crypto-js'
const SECRET_KEY = CryptoJS.enc.Utf8.parse('3333e6e143439161'); //十六位十六进制数作为密钥
const SECRET_IV = CryptoJS.enc.Utf8.parse('e3bbe7e3ba84431a'); //十六位十六进制数作为密钥偏移量
const SECRET_KEY = CryptoJS.enc.Utf8.parse('3333e6e143439161') //十六位十六进制数作为密钥
const SECRET_IV = CryptoJS.enc.Utf8.parse('e3bbe7e3ba84431a') //十六位十六进制数作为密钥偏移量
const encrypt = (data: object | string): string => {
//加密
if (typeof data === 'object') {
try {
data = JSON.stringify(data);
} catch (e) {
throw new Error('encrypt error' + e);
}
}
const dataHex = CryptoJS.enc.Utf8.parse(data);
const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return encrypted.ciphertext.toString();
};
//加密
if (typeof data === 'object') {
try {
data = JSON.stringify(data)
} catch (e) {
throw new Error('encrypt error' + e)
}
}
const dataHex = CryptoJS.enc.Utf8.parse(data)
const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
})
return encrypted.ciphertext.toString()
}
const decrypt = (data: string) => {
//解密
const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
};
//解密
const encryptedHexStr = CryptoJS.enc.Hex.parse(data)
const str = CryptoJS.enc.Base64.stringify(encryptedHexStr)
const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
})
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
return decryptedStr.toString()
}
export { encrypt, decrypt };
export { encrypt, decrypt }

10
src/utils/localStorage/interface.ts
View File

@@ -1,8 +1,8 @@
interface globalConfig {
type: 'localStorage' | 'sessionStorage';
prefix: string;
expire: number;
isEncrypt: boolean;
type: 'localStorage' | 'sessionStorage'
prefix: string
expire: number
isEncrypt: boolean
}
export type { globalConfig };
export type { globalConfig }

10
src/views/404/index.less
View File

@@ -1,8 +1,8 @@
//*,
//*:after,
//*:before {
// box-sizing: border-box;
//}
*,
*:after,
*:before {
box-sizing: border-box;
}

3
src/views/Home/index.tsx
View File

@@ -3,12 +3,15 @@
import HomeIndex from '@/components/HomeIndex'
// import Loading from '@/components/Loading'
export default () => {
return (
<div>
{/*<DefaultLayOut />*/}
{/*<BlurCard />*/}
<HomeIndex />
{/*<Loading />*/}
</div>
)
}

1
src/views/User/Register/index.tsx
View File

@@ -12,6 +12,7 @@ import FooterComponent from '@/components/Footer'
type LoginType = 'phone'
export default observer(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
const [generateMpRegCodeData, setGenerateMpRegCodeData] = useState<API.GenerateMpRegCode>({})
const [form] = Form.useForm()