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': [ 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 2592cd4..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/", @@ -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", 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..e73e06a --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,24 @@ +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 ? '显示' : '隐藏'} + +
+ + ) +} + +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..df695b0 --- /dev/null +++ b/src/pages/MainFramework.tsx @@ -0,0 +1,81 @@ +import React, { createContext } from 'react' +import '@/assets/css/header.scss' +import LoadingMask from '@/components/LoadingMask.tsx' + +export const MainFrameworkContext = createContext<{ + navbarHiddenState: { + navbarHidden: boolean + setNavbarHidden: (newValue: boolean) => void + } +}>({ + navbarHiddenState: { + navbarHidden: false, + setNavbarHidden: () => undefined + } +}) + +const MainFramework: React.FC = () => { + const [navbarHidden, setNavbarHidden] = 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 } ],