feat: cra-react18项目增加所有分类功能

fix #96
cumt-robin · Oct 30, 2024 · b3f9bd2 · b3f9bd2
1 parent f27dd34
commit b3f9bd2
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 6 deletions.
diff --git a/.changeset/smart-mirrors-destroy.md b/.changeset/smart-mirrors-destroy.md
@@ -0,0 +1,5 @@
+---
+"cra-react18": minor
+---
+
+feat: cra-react18项目增加所有分类功能
diff --git a/app/cra-react18/src/bean/dto.ts b/app/cra-react18/src/bean/dto.ts
@@ -30,6 +30,7 @@ export interface ArticleDTO extends RecordDTO {
 export interface CategoryDTO extends RecordDTO {
     category_name: string;
     poster: string;
+    category_count?: number;
 }
 
 export interface TagDTO extends RecordDTO {

diff --git a/app/cra-react18/src/components/BaseLayout/index.tsx b/app/cra-react18/src/components/BaseLayout/index.tsx
@@ -55,15 +55,20 @@ const Mask = styled.div<{ open: boolean }>`
     display: ${({ open }) => (open ? "block" : "none")};
 `;
 
-const Main = styled.main`
+const Main = styled.main<{ $customStyles?: string }>`
     padding: 24px 24px 0;
     @media screen and (min-width: 992px) {
         width: 800px;
         margin: 0 auto;
     }
+    ${({ $customStyles }) => $customStyles};
 `;
 
-const BaseLayout: React.FC<PropsWithChildren> = ({ children }) => {
+const LayoutWrapper = styled.section`
+    min-height: 100%;
+`;
+
+const BaseLayout: React.FC<PropsWithChildren<{ mainStyle?: string }>> = ({ children, mainStyle }) => {
     const isAuthed = useIsAuthed();
     const isMenuVisible = useAppSelector((state) => state.ui.isMenuVisible);
     const dispatch = useAppDispatch();
@@ -106,7 +111,7 @@ const BaseLayout: React.FC<PropsWithChildren> = ({ children }) => {
     });
 
     return (
-        <section className={sectionClass} style={{ minHeight: "100%" }} onAnimationEnd={onSectionAnimationEnd}>
+        <LayoutWrapper className={sectionClass} onAnimationEnd={onSectionAnimationEnd}>
             <Header>
                 <NavLink to="/">
                     <img src={logo} alt="logo" />
@@ -122,7 +127,7 @@ const BaseLayout: React.FC<PropsWithChildren> = ({ children }) => {
                 </HeaderIconWrapper>
             </Header>
 
-            <Main>{children}</Main>
+            <Main $customStyles={mainStyle}>{children}</Main>
 
             <HotColumn />
 
@@ -131,7 +136,7 @@ const BaseLayout: React.FC<PropsWithChildren> = ({ children }) => {
             <BaseMenu open={isMenuVisible} />
 
             <Mask open={isMenuVisible} onClick={onClickMask} />
-        </section>
+        </LayoutWrapper>
     );
 };
 

diff --git a/app/cra-react18/src/views/Categoryies/index.tsx b/app/cra-react18/src/views/Categoryies/index.tsx
@@ -1,3 +1,84 @@
+import { useCallback, useEffect, useState } from "react";
+import { Badge, Col, Empty, Row, Skeleton } from "antd";
+import { NavLink } from "react-router-dom";
+import styled from "styled-components";
+import { categoryService } from "@/services/category";
+import { CategoryDTO } from "@/bean/dto";
+import { useAsyncLoading } from "@/hooks/async";
+import BaseLayout from "@/components/BaseLayout";
+import LazyImage from "@/components/LazyImage";
+import defaultCategoryPoster from "@/assets/img/default_category.svg";
+
+const StyledBadge = styled(Badge)``;
+const StyledNavLink = styled(NavLink)``;
+
+const CategoryRow = styled(Row)`
+    .category__card {
+        position: relative;
+        margin-top: 20px;
+        background-color: #fff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+    }
+
+    ${StyledNavLink},
+    ${StyledBadge} {
+        display: block;
+        width: 100%;
+    }
+
+    ${LazyImage} {
+        height: 120px;
+        object-fit: contain;
+    }
+
+    .category__title {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        padding-bottom: 4px;
+    }
+`;
+
 export const Component: React.FC = () => {
-    return <div>Categoryies</div>;
+    const [categoryList, setCategoryList] = useState<CategoryDTO[]>([]);
+
+    const handleGetCategoryList = useCallback(async () => {
+        const { data } = await categoryService.all({ getCount: "1" });
+        setCategoryList(data);
+    }, []);
+
+    const { trigger: getCategoryList, loading } = useAsyncLoading(handleGetCategoryList);
+
+    useEffect(() => {
+        getCategoryList();
+    }, [getCategoryList]);
+
+    return (
+        <BaseLayout mainStyle="padding: 24px 18px; background-color: #f5f5f5;">
+            <h2 style={{ marginBottom: "16px", fontSize: "24px", textAlign: "center" }}>文章分类</h2>
+
+            <Skeleton loading={loading} active={true} paragraph={{ rows: 10 }}>
+                {categoryList.length > 0 ? (
+                    <CategoryRow className="category__list" gutter={16}>
+                        {categoryList.map((category) => {
+                            return (
+                                <Col key={category.id} span={8} md={6} lg={4}>
+                                    <StyledNavLink to={`/category/${encodeURIComponent(category.category_name)}`}>
+                                        <StyledBadge count={category.category_count}>
+                                            <div className="category__card">
+                                                <LazyImage src={category.poster || defaultCategoryPoster} className="category__poster" />
+                                                <div className="category__title">{category.category_name}</div>
+                                            </div>
+                                        </StyledBadge>
+                                    </StyledNavLink>
+                                </Col>
+                            );
+                        })}
+                    </CategoryRow>
+                ) : (
+                    <Empty />
+                )}
+            </Skeleton>
+        </BaseLayout>
+    );
 };