Merge pull request 'Optimize directory structure. Optimize Slogan.' (#18) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#18

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 (

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%,

src/assets/css/pages/header.scss

@@ -1,4 +1,4 @@
-@use "mixins" as mixins;
+@use "../mixins" as mixins;
 
 .nav {
   display: flex;

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<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

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<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

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<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

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 '@/assets/css/components/common/loading-mask.scss'
-import { COLOR_FONT_MAIN } from '@/constants/Common.constants.ts'
+import FitFullScreen from '@/components/common/FitFullScreen'
-import '@/assets/css/loading-mask.scss'
+import { COLOR_FONT_MAIN } from '@/constants/Common.constants'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (

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<SloganProps> = (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 (
+        <>
+            <FitCenter>
+                <div className={'center-box'}>
+                    <div className={'big-logo'}>FatWeb</div>
+                    <span id={'slogan'} className={'slogan'}>
+                        /* {slogan || <>&nbsp;</>} <span className={'cursor'}>|</span> */
+                    </span>
+                </div>
+                <div className={'scroll-down'} onClick={props.onClickScrollDown}>
+                    <Icon component={IconFatwebDown} style={{ fontSize: '1.8em', color: '#666' }} />
+                </div>
+            </FitCenter>
+        </>
+    )
+}
+
+export default Slogan

src/components/home/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import '@/assets/css/home.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
-import FitFullScreen from '@/components/FitFullScreen.tsx'
+import FitCenter from '@/components/common/FitCenter'
-import FitCenter from '@/components/FitCenter.tsx'
+import { MainFrameworkContext } from '@/pages/MainFramework'
-import Icon from '@ant-design/icons'
+import Slogan from '@/components/home/Slogan'
-import { MainFrameworkContext } from '@/pages/MainFramework.tsx'
 
 const Home: React.FC = () => {
     const {
@@ -11,34 +10,13 @@ const Home: React.FC = () => {
         navbarHiddenState: { setNavbarHidden },
         preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
-    const fitFullScreenRef = useRef<HTMLDivElement>(null)
 
+    const fitFullScreenRef = useRef<HTMLDivElement>(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: (
+            children: <Slogan onClickScrollDown={handleScrollDown} />
-                <FitCenter>
-                    <div className={'center-box'}>
-                        <div className={'big-logo'}>FatWeb</div>
-                        <span id={'slogan'} className={'slogan'}>
-                            {slogan || <>&nbsp;</>}
-                        </span>
-                    </div>
-                    <div className={'scroll-down'} onClick={handleScrollDown}>
-                        <Icon
-                            component={IconFatwebDown}
-                            style={{ fontSize: '1.8em', color: '#666' }}
-                        />
-                    </div>
-                </FitCenter>
-            )
         },
         { children: <FitCenter>2</FitCenter> },
         { children: <FitCenter>3</FitCenter> }

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(
     <React.StrictMode>

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

src/pages/MainFramework.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import '@/assets/css/header.scss'
+import '@/assets/css/pages/header.scss'
-import LoadingMask from '@/components/LoadingMask.tsx'
 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: {

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,