Merge pull request 'FatttSnake' (#12) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#12

src/assets/css/common.scss

@@ -3,6 +3,11 @@ $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
 
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
 .body {
   color: $font-main-color;
   user-select: none;
@@ -103,28 +108,3 @@ $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 {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
-
-.fit-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}

src/assets/css/fit-center.scss

@@ -0,0 +1,7 @@
+.fit-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

src/assets/css/fit-fullscreen.scss

@@ -0,0 +1,5 @@
+.fit-fullscreen {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}

src/assets/css/header.scss

@@ -7,6 +7,7 @@
   z-index: 1;
   width: 100%;
   height: 70px;
+  min-width: 900px;
   background-color: white;
   border: {
     bottom: {

src/assets/css/hide-scrollbar.scss

@@ -1,15 +1,16 @@
-body {
+.hide-scrollbar-mask {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
-#root {
+.hide-scrollbar-selection {
-  height: 100vh;
+  position: relative;
-  width: 100vw;
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-#hide-scrollbar {
+.hide-scrollbar-selection::-webkit-scrollbar {
-  position: relative;
+  display: none;
-  height: 100vh;
-  width: 100vw;
-  overflow: scroll;
 }

src/assets/css/loading-mask.scss

@@ -0,0 +1,10 @@
+.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);
+}

src/components/FitCenter.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import '@/assets/css/fit-center.scss'
 
 const FitCenter: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
     return (

src/components/FitFullScreen.tsx

@@ -1,3 +1,5 @@
+import '@/assets/css/fit-fullscreen.scss'
+
 interface FitFullscreenProps extends PropsWithChildren {
     zIndex?: number
     backgroundColor?: string

src/components/HideScrollbar.tsx

@@ -151,9 +151,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
 
     return (
         <>
+            <div className={'hide-scrollbar-mask'}>
                 <div
                     ref={rootRef}
-                id={'hide-scrollbar'}
+                    className={'hide-scrollbar-selection'}
                     style={{
                         width: `calc(100vw + ${verticalScrollbarWidth}px)`,
                         height: `calc(100vh + ${horizontalScrollbarWidth}px`
@@ -161,6 +162,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
                 >
                     {props.children}
                 </div>
+            </div>
         </>
     )
 })

src/components/Home.tsx

@@ -11,9 +11,11 @@ const Home: React.FC = () => {
         navbarHiddenState: { navbarHidden, setNavbarHidden }
     } = useContext(MainFrameworkContext)
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
+    const pathname = useLocation().pathname
 
     const [slogan, setSlogan] = useState('')
     const [sloganType, setSloganType] = useState(true)
+
     const typeText = '/* 因为热爱 所以折腾 */'
     if (sloganType) {
         setTimeout(() => {
@@ -33,13 +35,8 @@ const Home: React.FC = () => {
         }, 50)
     }
 
-    const handleScrollDown = () => {
-        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
-    }
-
-    useEffect(() => {
     const hideScrollbarDOM = hideScrollbarRef.current
-        const scrollListener = () => {
+    const scrollListener = useCallback(() => {
         if (
             hideScrollbarDOM &&
             fitFullScreenRef.current &&
@@ -53,16 +50,27 @@ const Home: React.FC = () => {
                 setNavbarHidden(false)
             }
         }
-        }
+    }, [hideScrollbarDOM, navbarHidden, setNavbarHidden])
+
+    useEffect(() => {
+        hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
         hideScrollbarDOM?.addEventListener('scroll', scrollListener)
         return () => {
             hideScrollbarDOM?.removeEventListener('scroll', scrollListener)
         }
-    }, [hideScrollbarRef, navbarHidden, setNavbarHidden])
+    }, [hideScrollbarDOM, scrollListener])
+
+    useEffect(() => {
+        scrollListener()
+    }, [pathname, scrollListener])
+
+    const handleScrollDown = () => {
+        hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0)
+    }
 
     return (
         <>
-            <FitFullScreen zIndex={100} backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
+            <FitFullScreen backgroundColor={'#FBFBFB'} ref={fitFullScreenRef}>
                 <FitCenter>
                     <div className={'center-box'}>
                         <div className={'big-logo'}>FatWeb</div>

src/components/LoadingMask.tsx

@@ -2,6 +2,7 @@ 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'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (

src/pages/MainFramework.tsx

@@ -25,11 +25,16 @@ const MainFramework: React.FC = () => {
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
+    const pathname = useLocation().pathname
+    useEffect(() => {
+        setNavbarHidden(false)
+    }, [pathname])
+
     return (
         <>
             <HideScrollbar ref={hideScrollbarRef}>
                 <div className={'body'}>
-                    <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
+                    <header className={'nav' + (navbarHidden ? ' hide' : '')}>
                         <a className={'logo'} href={'https://fatweb.top'}>
                             <span className={'title'}>FatWeb</span>
                         </a>