From 530d201b1c2c745a5ad82f381a94525c4586ddb8 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:27:18 +0800 Subject: [PATCH] Add MainFramework and loading mask. Add animation to menu. --- src/App.tsx | 5 ++- src/assets/css/_mixins.scss | 22 ++++++++++ src/assets/css/common.scss | 18 +++++++- src/assets/css/header.scss | 68 +++++++++++++++++++++++++++++ src/assets/css/home.scss | 1 - src/assets/svg/loading.svg | 1 + src/components/FitFullScreen.tsx | 11 +++++ src/components/Home.tsx | 12 +++++ src/components/LoadingMask.tsx | 27 ++++++++++++ src/components/Project.tsx | 11 +++++ src/pages/Home.tsx | 16 ------- src/pages/MainFramework.tsx | 75 ++++++++++++++++++++++++++++++++ src/router/index.tsx | 30 ++++++++++--- vite.config.ts | 6 +++ 14 files changed, 279 insertions(+), 24 deletions(-) create mode 100644 src/assets/css/_mixins.scss create mode 100644 src/assets/svg/loading.svg create mode 100644 src/components/FitFullScreen.tsx create mode 100644 src/components/Home.tsx create mode 100644 src/components/LoadingMask.tsx create mode 100644 src/components/Project.tsx delete mode 100644 src/pages/Home.tsx create mode 100644 src/pages/MainFramework.tsx diff --git a/src/App.tsx b/src/App.tsx index 3561770..c4573eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,13 @@ import React from 'react' import router from '@/router' +import LoadingMask from '@/components/LoadingMask.tsx' const App: React.FC = () => { return ( <> - + }> + + ) } diff --git a/src/assets/css/_mixins.scss b/src/assets/css/_mixins.scss new file mode 100644 index 0000000..47308ed --- /dev/null +++ b/src/assets/css/_mixins.scss @@ -0,0 +1,22 @@ +@mixin keyframes($animationName) { + @-webkit-keyframes #{$animationName} { + @content + } + @-moz-keyframes #{$animationName} { + @content + } + @-o-keyframes #{$animationName} { + @content + } + @keyframes #{$animationName} { + @content + } +} + +@mixin unique-keyframes { + $animationName: unique-id(); + animation-name: $animationName; + @include keyframes($animationName) { + @content + } +} \ No newline at end of file diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 539eee8..9747a19 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -6,7 +6,7 @@ $font-secondary-color: #9E9E9E; .body { color: $font-main-color; user-select: none; - min-width: 1800px; + min-width: 900px; min-height: 400px; } @@ -103,3 +103,19 @@ $font-secondary-color: #9E9E9E; height: 23px; } } + +#loading-mask { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + z-index: 100; + background-color: rgba(200, 200, 200, 0.2); +} + +#fit-fullscreen { + width: 100vw; + height: 100vh; +} \ No newline at end of file diff --git a/src/assets/css/header.scss b/src/assets/css/header.scss index 891575f..012474f 100644 --- a/src/assets/css/header.scss +++ b/src/assets/css/header.scss @@ -1,3 +1,5 @@ +@use "mixins" as mixins; + .nav { display: flex; position: fixed; @@ -13,6 +15,16 @@ color: rgba(204, 204, 204, .33); } } + animation: .5s ease both; + + @include mixins.unique-keyframes { + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0); + } + } .logo { padding: 0 40px; @@ -22,4 +34,60 @@ font-family: century gothic, texgyreadventor, stheiti, sans-serif; } } + + nav { + display: flex; + justify-content: end; + flex: 1; + transition: { + property: all; + duration: .5s; + }; + + .menu { + padding: 0 30px; + + .item { + display: inline-block; + font-size: 1.5em; + transition: { + property: all; + duration: .3s; + }; + + a { + padding: 5px 20px; + color: rgba(102, 102, 102, .8); + } + } + + .active { + border: { + bottom: { + width: 2px; + style: solid; + color: #CCC; + }; + }; + } + + :hover { + transform: translateY(-5px); + } + } + } +} + +.nav.hide { + animation: .5s ease both; + + @include mixins.unique-keyframes { + 0% { + transform: translateY(0); + } + 100% { + display: none; + transform: translateY(-100%); + } + } } \ No newline at end of file diff --git a/src/assets/css/home.scss b/src/assets/css/home.scss index 1bd162e..e69de29 100644 --- a/src/assets/css/home.scss +++ b/src/assets/css/home.scss @@ -1 +0,0 @@ -@import url(header.scss); \ No newline at end of file diff --git a/src/assets/svg/loading.svg b/src/assets/svg/loading.svg new file mode 100644 index 0000000..a7c3d67 --- /dev/null +++ b/src/assets/svg/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/FitFullScreen.tsx b/src/components/FitFullScreen.tsx new file mode 100644 index 0000000..fab7cc3 --- /dev/null +++ b/src/components/FitFullScreen.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const FitFullScreen: React.FC = (props: PropsWithChildren) => { + return ( + <> +
{props.children}
+ + ) +} + +export default FitFullScreen diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..6b49d5c --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import '@/assets/css/home.scss' + +const Home: React.FC = () => { + return ( + <> +

Home

+ + ) +} + +export default Home diff --git a/src/components/LoadingMask.tsx b/src/components/LoadingMask.tsx new file mode 100644 index 0000000..0f41ca8 --- /dev/null +++ b/src/components/LoadingMask.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import FitFullScreen from '@/components/FitFullScreen.tsx' +import { COLOR_FONT_MAIN } from '@/constants/Common.constants.ts' + +const LoadingMask: React.FC = () => { + const loadingIcon = ( + <> + + + ) + return ( + <> + +
+ +
+ + + ) +} + +export default LoadingMask diff --git a/src/components/Project.tsx b/src/components/Project.tsx new file mode 100644 index 0000000..5175273 --- /dev/null +++ b/src/components/Project.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Project: React.FC = () => { + return ( + <> +

App

+ + ) +} + +export default Project diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx deleted file mode 100644 index ff09f43..0000000 --- a/src/pages/Home.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import '@/assets/css/home.scss' - -const Home: React.FC = () => { - return ( - <> -
- - FatWeb - -
- - ) -} - -export default Home diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx new file mode 100644 index 0000000..6497756 --- /dev/null +++ b/src/pages/MainFramework.tsx @@ -0,0 +1,75 @@ +import React, { createContext } from 'react' +import '@/assets/css/header.scss' +import LoadingMask from '@/components/LoadingMask.tsx' + +export const MainFrameworkContext = createContext<{ + hideNavbar: boolean + setHideNavbar: (newValue: boolean) => void +}>({ + hideNavbar: false, + setHideNavbar: () => undefined +}) + +const MainFramework: React.FC = () => { + const [hideNavbar, setHideNavbar] = useState(false) + + return ( + <> +
+
+ + FatWeb + + +
+ + + + + + } + > + + + +
+ + ) +} + +export default MainFramework diff --git a/src/router/index.tsx b/src/router/index.tsx index aeac318..274ca0a 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -10,13 +10,33 @@ const routes: RouteObject[] = [ id: 'login', Component: React.lazy(() => import('@/pages/Login')) }, + { + path: '/loading', + id: 'loading', + Component: React.lazy(() => import('@/components/LoadingMask')) + }, { path: '', - id: 'home', - Component: React.lazy(() => import('@/pages/Home')), - handle: { - auth: false - } + id: 'mainFramework', + Component: React.lazy(() => import('@/pages/MainFramework')), + children: [ + { + path: '', + id: 'home', + Component: React.lazy(() => import('@/components/Home')), + handle: { + auth: false + } + }, + { + path: 'project', + id: 'project', + Component: React.lazy(() => import('@/components/Project')), + handle: { + auth: false + } + } + ] }, { path: '*', diff --git a/vite.config.ts b/vite.config.ts index 42e70a7..d49fe24 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -26,6 +26,7 @@ export default defineConfig({ 'react-router', 'react-router-dom', { + react: ['Suspense'], 'react-router': ['useMatches', 'RouterProvider'], 'react-router-dom': ['createBrowserRouter'], antd: ['message'] @@ -34,6 +35,11 @@ export default defineConfig({ from: 'react-router', imports: ['RouteObject'], type: true + }, + { + from: 'react', + imports: ['PropsWithChildren'], + type: true } ],