Optimize directory structure. Optimize Slogan.

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

@@ -0,0 +1,113 @@
+import React from 'react'
+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 {
+        hideScrollbarRef,
+        navbarHiddenState: { setNavbarHidden },
+        preventScrollState: { setPreventScroll }
+    } = useContext(MainFrameworkContext)
+
+    const fitFullScreenRef = useRef<HTMLDivElement>(null)
+    const scrollTimeout = useRef(0)
+    const touchStart = useRef(0)
+
+    const [currentContent, setCurrentContent] = useState(0)
+
+    useEffect(() => {
+        setTimeout(() => {
+            setNavbarHidden(true)
+            setPreventScroll(true)
+        })
+    }, [setNavbarHidden, setPreventScroll])
+
+    const handleScrollToContent = (index: number) => {
+        return () => {
+            if (!index) {
+                setNavbarHidden(true)
+                hideScrollbarRef.current?.scrollY(0)
+            } else {
+                hideScrollbarRef.current?.scrollY(
+                    (fitFullScreenRef.current?.offsetHeight ?? 0) * index
+                )
+                setNavbarHidden(false)
+            }
+        }
+    }
+
+    const handleScrollUp = () => {
+        if (currentContent <= 0) {
+            return
+        }
+        handleScrollToContent(currentContent - 1)()
+        clearTimeout(scrollTimeout.current)
+        scrollTimeout.current = setTimeout(() => {
+            setCurrentContent(currentContent - 1)
+        }, 500)
+    }
+
+    const handleScrollDown = () => {
+        if (currentContent >= content.length) {
+            return
+        }
+        handleScrollToContent(currentContent + 1)()
+        clearTimeout(scrollTimeout.current)
+        scrollTimeout.current = setTimeout(() => {
+            setCurrentContent(currentContent + 1)
+        }, 500)
+    }
+
+    const handleWheel = (event: React.WheelEvent) => {
+        if (event.altKey || event.ctrlKey) {
+            return
+        }
+
+        if (event.deltaY > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const handleTouchStart = (event: React.TouchEvent) => {
+        touchStart.current = event.touches[0].clientY
+    }
+
+    const handleTouchEnd = (event: React.TouchEvent) => {
+        const moveLength = touchStart.current - event.changedTouches[0].clientY
+        if (Math.abs(moveLength) < 100) {
+            return
+        }
+
+        if (moveLength > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const content = [
+        {
+            backgroundColor: '#FBFBFB',
+            ref: fitFullScreenRef,
+            children: <Slogan onClickScrollDown={handleScrollDown} />
+        },
+        { children: <FitCenter>2</FitCenter> },
+        { children: <FitCenter>3</FitCenter> }
+    ]
+
+    return (
+        <>
+            <div onWheel={handleWheel} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
+                {content.map((element, index) => {
+                    return <FitFullScreen key={index} {...element} />
+                })}
+            </div>
+        </>
+    )
+}
+
+export default Home