fix: 添加过渡动画

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --mode development",
+    "dev": "vite --mode development --host",
     "build": "tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/components/ComponentLoading/index.tsx

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

src/components/HomeIndex/index.less

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

src/components/HomeIndex/index.tsx

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

src/components/Loading/index.less

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

src/components/Loading/index.tsx

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

src/router/index.ts

@@ -1,14 +1,16 @@
 import type { RouteObject } from 'react-router-dom'
 
 import NoFound from '@/views/404/404'
-import Login from '@/views/User/Login'
+import Login from './modules/login/index.ts'
-import Register from '@/views/User/Register'
+import Register from './modules/register/index.ts'
-import home from '@/views/Home/'
+import home from './modules/home/index.ts'
-import Main from '@/views/Main/'
+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,
+        Component: (props) => ComponentLoading(Register, props),
-    },
-    {
-        path: '/home',
-        Component: home,
     },
+    // {
+    //     path: '/home',
+    //     Component: home,
+    // },
     {
         path: '/login',
-        Component: Login,
+        Component: (props) => ComponentLoading(Login, props),
     },
     {
         path: '/main',
-        Component: Main,
+        Component: (props) => ComponentLoading(Main, props),
     },
 ]
 

src/router/modules/home/index.ts

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

src/router/modules/login/index.ts

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

src/router/modules/main/index.ts

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

src/router/modules/register/index.ts

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

src/store/modules/user.ts

@@ -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数据会在数据返回后再自动计算

src/utils/localStorage/encry.ts

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

src/utils/localStorage/interface.ts

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

src/views/404/index.less

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

src/views/Home/index.tsx

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

src/views/User/Register/index.tsx

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