From ecbe15621576ad6941555b5229e777f77a00c916 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:20:56 +0800 Subject: [PATCH 1/5] Fix conflicts between eslint and prettier --- .eslintrc.cjs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 8d0ca95..522cb9d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -24,11 +24,10 @@ module.exports = { rules: { 'no-cond-assign': 'error', 'eqeqeq': 'error', - 'indent': ['error', 4, { 'SwitchCase': 1 }], 'prettier/prettier': [ 'error', { - endOfLine: 'auto' + endOfLine: 'auto', } ], 'react-refresh/only-export-components': [ -- 2.49.1 From 2b4e54a69dab8763d68a9d9dfa62ce658c5bfc02 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:22:07 +0800 Subject: [PATCH 2/5] Update dependency @types/lodash --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2592cd4..816c380 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@types/jsdom": "^21.1.2", - "@types/lodash": "^4.14.197", + "@types/lodash": "^4.14.198", "@types/node": "^20.5.9", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", -- 2.49.1 From 530d201b1c2c745a5ad82f381a94525c4586ddb8 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:27:18 +0800 Subject: [PATCH 3/5] 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 } ], -- 2.49.1 From eb8b02256a6c3b76cedacb23fb04422e32e9fffe Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 00:18:28 +0800 Subject: [PATCH 4/5] Optimize build --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index c7826bc..c67c05d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@types/jsdom": "^21.1.2", - "@types/lodash": "^4.14.197", + "@types/lodash": "^4.14.198", "@types/node": "^20.5.9", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", @@ -1519,9 +1519,9 @@ "dev": true }, "node_modules/@types/lodash": { - "version": "4.14.197", - "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.197.tgz", - "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==", + "version": "4.14.198", + "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.198.tgz", + "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==", "dev": true }, "node_modules/@types/minimist": { diff --git a/package.json b/package.json index 816c380..6ec90f0 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite", "dev-host": "vite --host 0.0.0.0", - "build": "vite build && tsc && vite build", + "build": "vite build", "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "format": "prettier --write src/", -- 2.49.1 From 6230d7288c9810cac24b820a55a306da22e8a487 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 00:18:59 +0800 Subject: [PATCH 5/5] Add button in Home.tsx to test navbar hidden --- src/components/Home.tsx | 12 ++++++++++++ src/pages/MainFramework.tsx | 20 +++++++++++++------- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 6b49d5c..e73e06a 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,10 +1,22 @@ import React from 'react' import '@/assets/css/home.scss' +import { MainFrameworkContext } from '@/pages/MainFramework' const Home: React.FC = () => { + const { + navbarHiddenState: { navbarHidden, setNavbarHidden } + } = useContext(MainFrameworkContext) + const handleButtonClick = () => { + setNavbarHidden(!navbarHidden) + } return ( <>

Home

+
+ + {navbarHidden ? '显示' : '隐藏'} + +
) } diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 6497756..df695b0 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -3,20 +3,24 @@ import '@/assets/css/header.scss' import LoadingMask from '@/components/LoadingMask.tsx' export const MainFrameworkContext = createContext<{ - hideNavbar: boolean - setHideNavbar: (newValue: boolean) => void + navbarHiddenState: { + navbarHidden: boolean + setNavbarHidden: (newValue: boolean) => void + } }>({ - hideNavbar: false, - setHideNavbar: () => undefined + navbarHiddenState: { + navbarHidden: false, + setNavbarHidden: () => undefined + } }) const MainFramework: React.FC = () => { - const [hideNavbar, setHideNavbar] = useState(false) + const [navbarHidden, setNavbarHidden] = useState(false) return ( <>
-
+
FatWeb @@ -56,7 +60,9 @@ const MainFramework: React.FC = () => {
- + -- 2.49.1