feat(tag): 标签下文章列表页面

fix #98

.changeset/dirty-bears-study.md

@@ -0,0 +1,5 @@
+---
+"cra-react18": minor
+---
+
+feat: 标签列表及标签下文章等功能页面

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

@@ -21,6 +21,10 @@ const router = createBrowserRouter([
         path: "/tags",
         lazy: () => import("../views/Tags"),
     },
+    {
+        path: "/tag/:name",
+        lazy: () => import("../views/Tag"),
+    },
 ]);
 
 export default router;

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

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import styled from "styled-components";
+import { Breadcrumb, Divider, Empty, Pagination, Skeleton } from "antd";
+import BaseLayout from "@/components/BaseLayout";
+import { ArticleDTO } from "@/bean/dto";
+import { articleService } from "@/services/article";
+import { setScrollTop } from "@/utils/dom";
+import { useAsyncLoading } from "@/hooks/async";
+import CardArticle from "@/components/CardArticle";
+
+const ArticleList = styled.section``;
+
+export const Component: React.FC = () => {
+    const { name } = useParams();
+
+    const [articleList, setArticleList] = useState<ArticleDTO[]>([]);
+
+    const [total, setTotal] = useState(0);
+
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const qsPageNo = searchParams.get("pageNo");
+    const pageNo = qsPageNo ? Number(qsPageNo) : 1;
+    const [pageInfo, setPageInfo] = useState({ pageNo, pageSize: 6 });
+
+    const prevPageNo = useRef(pageInfo.pageNo);
+
+    const handleGetArticleList = useCallback(
+        async (isChangePage: boolean) => {
+            const { data, total } = await articleService.pageByTag({
+                ...pageInfo,
+                keyword: name as string,
+            });
+            setArticleList(data);
+            setTotal(total);
+            if (isChangePage) {
+                setScrollTop({
+                    useAnimation: true,
+                    duration: 0.3,
+                });
+            }
+        },
+        [pageInfo, name],
+    );
+
+    const { trigger: getPageList, loading } = useAsyncLoading(handleGetArticleList, [pageInfo, name]);
+
+    useEffect(() => {
+        const qsPageNo = searchParams.get("pageNo");
+        const pageNo = qsPageNo ? Number(qsPageNo) : 1;
+        if (pageNo && pageNo > 0 && pageNo !== prevPageNo.current) {
+            setPageInfo((prevPageInfo) => ({
+                ...prevPageInfo,
+                pageNo,
+            }));
+        }
+    }, [searchParams]);
+
+    useEffect(() => {
+        const isChangePage = pageInfo.pageNo !== prevPageNo.current;
+        getPageList(isChangePage);
+    }, [pageInfo, getPageList]);
+
+    useEffect(() => {
+        prevPageNo.current = pageInfo.pageNo;
+    }, [pageInfo]);
+
+    // 分页改变
+    const onPageNoChange = (page: number) => {
+        setSearchParams({ pageNo: String(page) });
+    };
+
+    return (
+        <BaseLayout>
+            <Skeleton loading={loading} active={true} paragraph={{ rows: 12 }}>
+                {articleList.length > 0 ? (
+                    <>
+                        <Breadcrumb>
+                            <Breadcrumb.Item>
+                                <NavLink to="/">首页</NavLink>
+                            </Breadcrumb.Item>
+                            <Breadcrumb.Item>
+                                <NavLink to="/tags">所有标签</NavLink>
+                            </Breadcrumb.Item>
+                            <Breadcrumb.Item>{name}</Breadcrumb.Item>
+                        </Breadcrumb>
+
+                        <Divider />
+
+                        <ArticleList>
+                            {articleList.map((article) => (
+                                <CardArticle article={article} key={article.id} />
+                            ))}
+                        </ArticleList>
+
+                        <Pagination
+                            current={pageInfo.pageNo}
+                            pageSize={pageInfo.pageSize}
+                            total={total}
+                            showLessItems={true}
+                            simple={true}
+                            showSizeChanger={false}
+                            onChange={onPageNoChange}
+                            className="mt-5 justify-center"
+                        />
+                    </>
+                ) : (
+                    <Empty />
+                )}
+            </Skeleton>
+        </BaseLayout>
+    );
+};

package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://blog.wbjiang.cn/",
   "scripts": {
+    "changeset": "changeset",
     "webpack-vue3:dev": "pnpm --filter webpack-vue3 dev",
     "vite-vue3:dev": "pnpm --filter vite-vue3 dev",
     "cra-react18:dev": "pnpm --filter cra-react18 dev",