feat: cra-react18项目增加悬浮工具组件（一键到顶等）

fix #113

Author: cumt-robin

.changeset/orange-wombats-act.md

@@ -0,0 +1,5 @@
+---
+"cra-react18": minor
+---
+
+feat: cra-react18项目增加悬浮工具组件（一键到顶等）

app/cra-react18/src/components/BaseLayout/HotColumn.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Card, Empty } from "antd";
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
@@ -46,12 +46,12 @@ const StyledCard = styled(Card)`
 
 const HotColumn: React.FC = () => {
     const [hotList, setHotList] = useState<ArticleDTO[]>([]);
-    const handleGetHotList = useCallback(async () => {
+    const handleGetHotList = async () => {
         const res = await articleService.topRead({
             count: 6,
         });
         setHotList(res.data);
-    }, []);
+    };
 
     const { trigger: getHotList, loading } = useAsyncLoading(handleGetHotList);
 

app/cra-react18/src/components/BaseLayout/index.tsx

@@ -1,7 +1,8 @@
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import styled, { RuleSet } from "styled-components";
 import classNames from "classnames";
-import { PropsWithChildren, useCallback, useEffect, useState } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
+import { throttle } from "lodash-es";
 import IconSvg from "../IconSvg";
 import BaseMenu from "./BaseMenu";
 import BaseFooter from "./BaseFooter";
@@ -10,6 +11,8 @@ import logo from "@/assets/img/logo.png";
 import { useIsAuthed } from "@/store/hooks/auth";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
 import { setIsMenuVisible } from "@/store/slices/ui";
+import { setScrollTop } from "@/utils/dom";
+import { flexCenter } from "@/styles/styled-mixins/base";
 
 const Header = styled.header`
     padding: 18px 40px;
@@ -66,23 +69,81 @@ const Main = styled.main<{ $mainCss?: RuleSet }>`
 
 const LayoutWrapper = styled.section`
     min-height: 100%;
+
+    > aside {
+        position: fixed;
+        bottom: 160px;
+        right: 24px;
+
+        ${IconSvg} {
+            ${flexCenter}
+            color: #fff;
+            font-size: 24px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-color: rgba(102, 57, 57, 0.4);
+            cursor: pointer;
+            + ${IconSvg} {
+                margin-top: 10px;
+                margin-left: 0;
+            }
+        }
+    }
 `;
 
-const BaseLayout: React.FC<PropsWithChildren<{ mainCss?: RuleSet }>> = ({ children, mainCss }) => {
+const BaseLayout: React.FC<PropsWithChildren<{ mainCss?: RuleSet; asideIcons?: React.ReactNode }>> = ({
+    children,
+    asideIcons,
+    mainCss,
+}) => {
     const isAuthed = useIsAuthed();
     const isMenuVisible = useAppSelector((state) => state.ui.isMenuVisible);
     const dispatch = useAppDispatch();
     const [isAnimationEnabled, setIsAnimationEnabled] = useState(false);
+    const [isShowGoTopIcon, setIsShowGoTopIcon] = useState(false);
 
-    const location = useLocation();
-
-    const hideMenu = useCallback(() => {
+    const hideMenu = () => {
         dispatch(setIsMenuVisible(false));
-    }, [dispatch]);
+    };
 
     useEffect(() => {
-        hideMenu();
-    }, [location, hideMenu]);
+        let hideTimer: number | null = null;
+        const clearHideTimer = () => {
+            if (hideTimer) {
+                clearTimeout(hideTimer);
+                hideTimer = null;
+            }
+        };
+
+        const setHideTimer = () => {
+            clearHideTimer();
+            hideTimer = window.setTimeout(() => {
+                setIsShowGoTopIcon(false);
+            }, 5000);
+        };
+
+        const onScroll = () => {
+            const currScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+            if (currScrollTop > 0) {
+                setIsShowGoTopIcon(true);
+                setHideTimer();
+            } else {
+                setIsShowGoTopIcon(false);
+            }
+        };
+
+        const onScrollThrottle = throttle(onScroll, 300, { leading: true });
+
+        document.addEventListener("scroll", onScrollThrottle);
+        return () => {
+            hideMenu();
+            document.removeEventListener("scroll", onScrollThrottle);
+            clearHideTimer();
+            document.body.style.overflow = "";
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     const onToggleMenu = () => {
         if (isAnimationEnabled === false) {
@@ -110,6 +171,12 @@ const BaseLayout: React.FC<PropsWithChildren<{ mainCss?: RuleSet }>> = ({ childr
         hideMenu();
     };
 
+    const goToTop = () => {
+        setScrollTop({
+            useAnimation: true,
+        });
+    };
+
     const sectionClass = classNames({
         slideInLeft: isMenuVisible,
         slideOutLeft: !isMenuVisible,
@@ -142,6 +209,11 @@ const BaseLayout: React.FC<PropsWithChildren<{ mainCss?: RuleSet }>> = ({ childr
             <BaseMenu open={isMenuVisible} />
 
             <Mask open={isMenuVisible} onClick={onClickMask} />
+
+            <aside>
+                {asideIcons}
+                <IconSvg icon="arrow-up" style={{ display: isShowGoTopIcon ? "flex" : "none" }} onClick={goToTop} />
+            </aside>
         </LayoutWrapper>
     );
 };

app/cra-react18/src/components/CardArticle/index.tsx

@@ -26,7 +26,8 @@ const Article = styled.article`
         font-weight: 700;
         > ul {
             > li {
-                display: inline-block;
+                display: inline-flex;
+                align-items: center;
                 + li {
                     margin-left: 20px;
                 }

app/cra-react18/src/router/index.tsx

@@ -33,6 +33,10 @@ const router = createBrowserRouter([
         path: "/timeline",
         lazy: () => import("../views/Timeline"),
     },
+    {
+        path: "/article/:id",
+        lazy: () => import("../views/Article"),
+    },
 ]);
 
 export default router;

app/cra-react18/src/styles/styled-mixins/base.js

@@ -3,3 +3,9 @@ export const ellipsis = `
     white-space: nowrap;
     text-overflow: ellipsis;
 `;
+
+export const flexCenter = `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;

app/cra-react18/src/views/Article/index.tsx

@@ -0,0 +1,9 @@
+import BaseLayout from "@/components/BaseLayout";
+
+export const Component: React.FC = () => {
+    return (
+        <BaseLayout>
+            <div>Article</div>
+        </BaseLayout>
+    );
+};

app/cra-react18/src/views/Home/index.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import styled from "styled-components";
 import { Empty, Pagination, Skeleton } from "antd";
 import BaseLayout from "@/components/BaseLayout";
 import { ArticleDTO } from "@/bean/dto";
@@ -9,8 +8,6 @@ import { setScrollTop } from "@/utils/dom";
 import { useAsyncLoading } from "@/hooks/async";
 import CardArticle from "@/components/CardArticle";
 
-const ArticleList = styled.section``;
-
 const Home: React.FC = () => {
     const [articleList, setArticleList] = useState<ArticleDTO[]>([]);
 
@@ -65,11 +62,11 @@ const Home: React.FC = () => {
             <Skeleton loading={loading} active={true} paragraph={{ rows: 12 }}>
                 {articleList.length > 0 ? (
                     <>
-                        <ArticleList>
+                        <section>
                             {articleList.map((article) => (
                                 <CardArticle article={article} key={article.id} />
                             ))}
-                        </ArticleList>
+                        </section>
 
                         <Pagination
                             current={fetchParams.pageNo}

app/cra-react18/src/views/Timeline/index.tsx

@@ -106,7 +106,7 @@ export const Component: React.FC = () => {
     return (
         <BaseLayout>
             <>
-                {articleList.length > 0 ? (
+                {articleList.length ? (
                     <StyledTimeline>
                         {articleList.map((article) => (
                             <Timeline.Item key={article.id} color="#2b82a8">
@@ -133,9 +133,9 @@ export const Component: React.FC = () => {
                             </Timeline.Item>
                         ))}
                     </StyledTimeline>
-                ) : (
-                    <Empty />
-                )}
+                ) : null}
+
+                {!articleList.length && !loading ? <Empty /> : null}
 
                 <Skeleton loading={loading} active paragraph={{ rows: 6 }} />