From c7bc23e5eb1b9d9923630fe4344e04d3df33accb Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 13 Sep 2023 00:54:40 +0800 Subject: [PATCH] Optimize directory structure. Optimize Slogan. --- src/App.tsx | 2 +- .../{ => components/common}/fit-center.scss | 0 .../common}/fit-fullscreen.scss | 0 .../common}/hide-scrollbar.scss | 0 .../{ => components/common}/loading-mask.scss | 0 .../home/slogan.scss} | 20 +++++++- src/assets/css/{ => pages}/header.scss | 2 +- src/assets/css/{ => pages}/login.scss | 0 src/components/{ => common}/FitCenter.tsx | 2 +- src/components/{ => common}/FitFullScreen.tsx | 2 +- src/components/{ => common}/HideScrollbar.tsx | 2 +- src/components/{ => common}/LoadingMask.tsx | 6 +-- src/components/home/Slogan.tsx | 50 +++++++++++++++++++ src/components/{Home.tsx => home/index.tsx} | 49 +++--------------- src/main.tsx | 4 +- src/pages/Login.tsx | 2 +- src/pages/MainFramework.tsx | 6 +-- src/router/index.tsx | 4 +- 18 files changed, 91 insertions(+), 60 deletions(-) rename src/assets/css/{ => components/common}/fit-center.scss (100%) rename src/assets/css/{ => components/common}/fit-fullscreen.scss (100%) rename src/assets/css/{ => components/common}/hide-scrollbar.scss (100%) rename src/assets/css/{ => components/common}/loading-mask.scss (100%) rename src/assets/css/{home.scss => components/home/slogan.scss} (68%) rename src/assets/css/{ => pages}/header.scss (98%) rename src/assets/css/{ => pages}/login.scss (100%) rename src/components/{ => common}/FitCenter.tsx (86%) rename src/components/{ => common}/FitFullScreen.tsx (92%) rename src/components/{ => common}/HideScrollbar.tsx (99%) rename src/components/{ => common}/LoadingMask.tsx (76%) create mode 100644 src/components/home/Slogan.tsx rename src/components/{Home.tsx => home/index.tsx} (65%) diff --git a/src/App.tsx b/src/App.tsx index c4573eb..869499d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react' import router from '@/router' -import LoadingMask from '@/components/LoadingMask.tsx' +import LoadingMask from '@/components/common/LoadingMask.tsx' const App: React.FC = () => { return ( diff --git a/src/assets/css/fit-center.scss b/src/assets/css/components/common/fit-center.scss similarity index 100% rename from src/assets/css/fit-center.scss rename to src/assets/css/components/common/fit-center.scss diff --git a/src/assets/css/fit-fullscreen.scss b/src/assets/css/components/common/fit-fullscreen.scss similarity index 100% rename from src/assets/css/fit-fullscreen.scss rename to src/assets/css/components/common/fit-fullscreen.scss diff --git a/src/assets/css/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss similarity index 100% rename from src/assets/css/hide-scrollbar.scss rename to src/assets/css/components/common/hide-scrollbar.scss diff --git a/src/assets/css/loading-mask.scss b/src/assets/css/components/common/loading-mask.scss similarity index 100% rename from src/assets/css/loading-mask.scss rename to src/assets/css/components/common/loading-mask.scss diff --git a/src/assets/css/home.scss b/src/assets/css/components/home/slogan.scss similarity index 68% rename from src/assets/css/home.scss rename to src/assets/css/components/home/slogan.scss index 144b156..58134a9 100644 --- a/src/assets/css/home.scss +++ b/src/assets/css/components/home/slogan.scss @@ -1,4 +1,4 @@ -@use "mixins" as mixins; +@use "../../mixins" as mixins; .center-box { display: flex; @@ -19,12 +19,30 @@ style: italic; }; color: #666; + + .cursor { + font-style: normal; + animation: 1s infinite; + + @include mixins.unique-keyframes { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + } } .scroll-down { position: absolute; bottom: 10px; padding: 20px; + cursor: pointer; animation: 1.5s infinite; @include mixins.unique-keyframes { 0%, diff --git a/src/assets/css/header.scss b/src/assets/css/pages/header.scss similarity index 98% rename from src/assets/css/header.scss rename to src/assets/css/pages/header.scss index 69d08de..69f6e16 100644 --- a/src/assets/css/header.scss +++ b/src/assets/css/pages/header.scss @@ -1,4 +1,4 @@ -@use "mixins" as mixins; +@use "../mixins" as mixins; .nav { display: flex; diff --git a/src/assets/css/login.scss b/src/assets/css/pages/login.scss similarity index 100% rename from src/assets/css/login.scss rename to src/assets/css/pages/login.scss diff --git a/src/components/FitCenter.tsx b/src/components/common/FitCenter.tsx similarity index 86% rename from src/components/FitCenter.tsx rename to src/components/common/FitCenter.tsx index 4db55b9..9bb4a35 100644 --- a/src/components/FitCenter.tsx +++ b/src/components/common/FitCenter.tsx @@ -1,5 +1,5 @@ import React from 'react' -import '@/assets/css/fit-center.scss' +import '@/assets/css/components/common/fit-center.scss' const FitCenter: React.FC< React.DetailedHTMLProps, HTMLDivElement> diff --git a/src/components/FitFullScreen.tsx b/src/components/common/FitFullScreen.tsx similarity index 92% rename from src/components/FitFullScreen.tsx rename to src/components/common/FitFullScreen.tsx index 3a05f1b..c61515d 100644 --- a/src/components/FitFullScreen.tsx +++ b/src/components/common/FitFullScreen.tsx @@ -1,5 +1,5 @@ import React from 'react' -import '@/assets/css/fit-fullscreen.scss' +import '@/assets/css/components/common/fit-fullscreen.scss' interface FitFullscreenProps extends React.DetailedHTMLProps, HTMLDivElement> { diff --git a/src/components/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx similarity index 99% rename from src/components/HideScrollbar.tsx rename to src/components/common/HideScrollbar.tsx index 8e0e0b7..c3ec975 100644 --- a/src/components/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -1,5 +1,5 @@ import React from 'react' -import '@/assets/css/hide-scrollbar.scss' +import '@/assets/css/components/common/hide-scrollbar.scss' interface HideScrollbarProps extends React.DetailedHTMLProps, HTMLDivElement> { diff --git a/src/components/LoadingMask.tsx b/src/components/common/LoadingMask.tsx similarity index 76% rename from src/components/LoadingMask.tsx rename to src/components/common/LoadingMask.tsx index 2a28c57..84c09e8 100644 --- a/src/components/LoadingMask.tsx +++ b/src/components/common/LoadingMask.tsx @@ -1,8 +1,8 @@ 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' -import '@/assets/css/loading-mask.scss' +import '@/assets/css/components/common/loading-mask.scss' +import FitFullScreen from '@/components/common/FitFullScreen' +import { COLOR_FONT_MAIN } from '@/constants/Common.constants' const LoadingMask: React.FC = () => { const loadingIcon = ( diff --git a/src/components/home/Slogan.tsx b/src/components/home/Slogan.tsx new file mode 100644 index 0000000..0c32a6e --- /dev/null +++ b/src/components/home/Slogan.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import '@/assets/css/components/home/slogan.scss' +import FitCenter from '@/components/common/FitCenter.tsx' + +interface SloganProps { + onClickScrollDown: (event: React.MouseEvent) => void +} + +const Slogan: React.FC = (props) => { + const [slogan, setSlogan] = useState('') + const [sloganType, setSloganType] = useState(true) + + const typeText = '因为热爱 所以折腾' + if (sloganType) { + setTimeout(() => { + if (slogan.length < typeText.length) { + setSlogan(typeText.substring(0, slogan.length + 1)) + } else { + setSloganType(false) + } + }, 250) + } else { + setTimeout(() => { + if (slogan.length > 0) { + setSlogan(typeText.substring(0, slogan.length - 1)) + } else { + setSloganType(true) + } + }, 100) + } + + return ( + <> + +
+
FatWeb
+ + /* {slogan || <> } | */ + +
+
+ +
+ + + ) +} + +export default Slogan diff --git a/src/components/Home.tsx b/src/components/home/index.tsx similarity index 65% rename from src/components/Home.tsx rename to src/components/home/index.tsx index 5916f74..169d542 100644 --- a/src/components/Home.tsx +++ b/src/components/home/index.tsx @@ -1,9 +1,8 @@ import React from 'react' -import '@/assets/css/home.scss' -import FitFullScreen from '@/components/FitFullScreen.tsx' -import FitCenter from '@/components/FitCenter.tsx' -import Icon from '@ant-design/icons' -import { MainFrameworkContext } from '@/pages/MainFramework.tsx' +import FitFullScreen from '@/components/common/FitFullScreen' +import FitCenter from '@/components/common/FitCenter' +import { MainFrameworkContext } from '@/pages/MainFramework' +import Slogan from '@/components/home/Slogan' const Home: React.FC = () => { const { @@ -11,34 +10,13 @@ const Home: React.FC = () => { navbarHiddenState: { setNavbarHidden }, preventScrollState: { setPreventScroll } } = useContext(MainFrameworkContext) - const fitFullScreenRef = useRef(null) + const fitFullScreenRef = useRef(null) const scrollTimeout = useRef(0) const touchStart = useRef(0) - const [slogan, setSlogan] = useState('') - const [sloganType, setSloganType] = useState(true) const [currentContent, setCurrentContent] = useState(0) - const typeText = '/* 因为热爱 所以折腾 */' - if (sloganType) { - setTimeout(() => { - if (slogan.length < typeText.length) { - setSlogan(typeText.substring(0, slogan.length + 1)) - } else { - setSloganType(false) - } - }, 150) - } else { - setTimeout(() => { - if (slogan.length > 0) { - setSlogan(typeText.substring(0, slogan.length - 1)) - } else { - setSloganType(true) - } - }, 50) - } - useEffect(() => { setTimeout(() => { setNavbarHidden(true) @@ -115,22 +93,7 @@ const Home: React.FC = () => { { backgroundColor: '#FBFBFB', ref: fitFullScreenRef, - children: ( - -
-
FatWeb
- - {slogan || <> } - -
-
- -
- - ) + children: }, { children: 2 }, { children: 3 } diff --git a/src/main.tsx b/src/main.tsx index e91aef2..e102176 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App.tsx' +import zh_CN from 'antd/locale/zh_CN' import '@/assets/css/base.scss' import '@/assets/css/common.scss' -import zh_CN from 'antd/locale/zh_CN' +import App from './App.tsx' ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 488f004..efa6ee9 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -2,7 +2,7 @@ import React from 'react' import { login } from '@/utils/auth.ts' import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts' import { setToken } from '@/utils/common.ts' -import '@/assets/css/login.scss' +import '@/assets/css/pages/login.scss' const Login: React.FC = () => { const [messageApi, contextHolder] = message.useMessage() diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 54e77b8..1cf80b0 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -1,8 +1,8 @@ import React from 'react' -import '@/assets/css/header.scss' -import LoadingMask from '@/components/LoadingMask.tsx' +import '@/assets/css/pages/header.scss' import router from '@/router' -import HideScrollbar, { HideScrollbarElement } from '@/components/HideScrollbar.tsx' +import LoadingMask from '@/components/common/LoadingMask' +import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' export const MainFrameworkContext = createContext<{ navbarHiddenState: { diff --git a/src/router/index.tsx b/src/router/index.tsx index 666df6f..f5c342e 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -13,7 +13,7 @@ const routes: RouteObject[] = [ { path: '/loading', id: 'loading', - Component: React.lazy(() => import('@/components/LoadingMask')) + Component: React.lazy(() => import('@/components/common/LoadingMask')) }, { path: '', @@ -23,7 +23,7 @@ const routes: RouteObject[] = [ { path: '', id: 'home', - Component: React.lazy(() => import('@/components/Home')), + Component: React.lazy(() => import('@/components/home')), handle: { name: '主页', menu: true,