From 2a6c478620c217882d0a08e0c75f20ab645b283f Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 10 Sep 2023 11:40:32 +0800 Subject: [PATCH 1/6] Optimize stylesheet in FitCenter, FitFullScreen and LoadingMask --- src/assets/css/common.scss | 25 ------------------------- src/assets/css/fit-center.scss | 7 +++++++ src/assets/css/fit-fullscreen.scss | 5 +++++ src/assets/css/loading-mask.scss | 10 ++++++++++ src/components/FitCenter.tsx | 1 + src/components/FitFullScreen.tsx | 2 ++ src/components/LoadingMask.tsx | 1 + 7 files changed, 26 insertions(+), 25 deletions(-) create mode 100644 src/assets/css/fit-center.scss create mode 100644 src/assets/css/fit-fullscreen.scss create mode 100644 src/assets/css/loading-mask.scss diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index ff7aaaf..5f7b322 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -102,29 +102,4 @@ $font-secondary-color: #9E9E9E; width: 23px; 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%; } \ No newline at end of file diff --git a/src/assets/css/fit-center.scss b/src/assets/css/fit-center.scss new file mode 100644 index 0000000..fd07971 --- /dev/null +++ b/src/assets/css/fit-center.scss @@ -0,0 +1,7 @@ +.fit-center { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/assets/css/fit-fullscreen.scss b/src/assets/css/fit-fullscreen.scss new file mode 100644 index 0000000..83d0ff6 --- /dev/null +++ b/src/assets/css/fit-fullscreen.scss @@ -0,0 +1,5 @@ +.fit-fullscreen { + position: relative; + width: 100%; + height: 100vh; +} \ No newline at end of file diff --git a/src/assets/css/loading-mask.scss b/src/assets/css/loading-mask.scss new file mode 100644 index 0000000..ad20dde --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/components/FitCenter.tsx b/src/components/FitCenter.tsx index 3cd08bd..ede8b2e 100644 --- a/src/components/FitCenter.tsx +++ b/src/components/FitCenter.tsx @@ -1,4 +1,5 @@ import React from 'react' +import '@/assets/css/fit-center.scss' const FitCenter: React.FC = (props: PropsWithChildren) => { return ( diff --git a/src/components/FitFullScreen.tsx b/src/components/FitFullScreen.tsx index f4e0402..e356c2c 100644 --- a/src/components/FitFullScreen.tsx +++ b/src/components/FitFullScreen.tsx @@ -1,3 +1,5 @@ +import '@/assets/css/fit-fullscreen.scss' + interface FitFullscreenProps extends PropsWithChildren { zIndex?: number backgroundColor?: string diff --git a/src/components/LoadingMask.tsx b/src/components/LoadingMask.tsx index cde12a5..2a28c57 100644 --- a/src/components/LoadingMask.tsx +++ b/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 = ( -- 2.49.1 From e225194c147fb052b5bd2b23117b67023cb4f123 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 10 Sep 2023 11:43:50 +0800 Subject: [PATCH 2/6] Optimize stylesheet in HideScrollbar --- src/assets/css/hide-scrollbar.scss | 13 ++++--------- src/components/HideScrollbar.tsx | 20 +++++++++++--------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/assets/css/hide-scrollbar.scss b/src/assets/css/hide-scrollbar.scss index fe32d78..63fe0e5 100644 --- a/src/assets/css/hide-scrollbar.scss +++ b/src/assets/css/hide-scrollbar.scss @@ -1,15 +1,10 @@ -body { +.hide-scrollbar-mask { + width: 100%; + height: 100%; overflow: hidden; } -#root { - height: 100vh; - width: 100vw; -} - -#hide-scrollbar { +.hide-scrollbar-selection { position: relative; - height: 100vh; - width: 100vw; overflow: scroll; } \ No newline at end of file diff --git a/src/components/HideScrollbar.tsx b/src/components/HideScrollbar.tsx index 2d61017..52a4644 100644 --- a/src/components/HideScrollbar.tsx +++ b/src/components/HideScrollbar.tsx @@ -151,15 +151,17 @@ const HideScrollbar = forwardRef((props return ( <> -
- {props.children} +
+
+ {props.children} +
) -- 2.49.1 From 95419a1f521ffa77d726db99c2f47cac28f22d6a Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 10 Sep 2023 11:44:52 +0800 Subject: [PATCH 3/6] Fix show navbar when switch tab bug --- src/components/Home.tsx | 50 ++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 060ae4f..5d967de 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -11,9 +11,11 @@ const Home: React.FC = () => { navbarHiddenState: { navbarHidden, setNavbarHidden } } = useContext(MainFrameworkContext) const fitFullScreenRef = useRef(null) + const pathname = useLocation().pathname const [slogan, setSlogan] = useState('') const [sloganType, setSloganType] = useState(true) + const typeText = '/* 因为热爱 所以折腾 */' if (sloganType) { setTimeout(() => { @@ -33,36 +35,42 @@ const Home: React.FC = () => { }, 50) } - const handleScrollDown = () => { - hideScrollbarRef.current?.scrollY(fitFullScreenRef.current?.offsetHeight ?? 0) - } - - useEffect(() => { - const hideScrollbarDOM = hideScrollbarRef.current - const scrollListener = () => { - if ( - hideScrollbarDOM && - fitFullScreenRef.current && - hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight - ) { - if (!navbarHidden) { - setNavbarHidden(true) - } - } else { - if (navbarHidden) { - setNavbarHidden(false) - } + const hideScrollbarDOM = hideScrollbarRef.current + const scrollListener = useCallback(() => { + if ( + hideScrollbarDOM && + fitFullScreenRef.current && + hideScrollbarDOM.getY() < fitFullScreenRef.current?.offsetHeight + ) { + if (!navbarHidden) { + setNavbarHidden(true) + } + } else { + if (navbarHidden) { + 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 ( <> - +
FatWeb
-- 2.49.1 From e842651851a482cc624cceb6ce39f97b3b7b9e40 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 10 Sep 2023 23:55:13 +0800 Subject: [PATCH 4/6] Optimize HideScrollbar --- src/assets/css/common.scss | 5 +++++ src/assets/css/hide-scrollbar.scss | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 5f7b322..98f3115 100644 --- a/src/assets/css/common.scss +++ b/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; diff --git a/src/assets/css/hide-scrollbar.scss b/src/assets/css/hide-scrollbar.scss index 63fe0e5..9d8ffe5 100644 --- a/src/assets/css/hide-scrollbar.scss +++ b/src/assets/css/hide-scrollbar.scss @@ -7,4 +7,10 @@ .hide-scrollbar-selection { position: relative; overflow: scroll; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.hide-scrollbar-selection::-webkit-scrollbar { + display: none; } \ No newline at end of file -- 2.49.1 From 774ad57670dc164ae537401c502bcb97ad4c14dd Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Sun, 10 Sep 2023 23:55:52 +0800 Subject: [PATCH 5/6] Fix can not show navbar when switch tab bug --- src/pages/MainFramework.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 1d69c5e..23ff379 100644 --- a/src/pages/MainFramework.tsx +++ b/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 ( <>
-
+
FatWeb -- 2.49.1 From a3ec698db268363feb8aa830fb8863204cf47a8e Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Mon, 11 Sep 2023 00:01:36 +0800 Subject: [PATCH 6/6] Optimize stylesheet in navbar --- src/assets/css/header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/css/header.scss b/src/assets/css/header.scss index 6d5c914..69d08de 100644 --- a/src/assets/css/header.scss +++ b/src/assets/css/header.scss @@ -7,6 +7,7 @@ z-index: 1; width: 100%; height: 70px; + min-width: 900px; background-color: white; border: { bottom: { -- 2.49.1