diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx index 0866eb1..bcbaa28 100755 --- a/apps/web/src/app/main/home/components/CategorySection.tsx +++ b/apps/web/src/app/main/home/components/CategorySection.tsx @@ -1,22 +1,13 @@ import React, { useState, useCallback, useEffect, useMemo } from "react"; -import { Typography, Button, Spin } from "antd"; +import { Typography, Skeleton } from "antd"; import { stringToColor, TaxonomySlug, TermDto } from "@nice/common"; import { api } from "@nice/client"; -import { ControlOutlined } from "@ant-design/icons"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import LookForMore from "./LookForMore"; +import CategorySectionCard from "./CategorySectionCard"; const { Title, Text } = Typography; - -interface CourseCategory { - name: string; - count: number; - description: string; -} - const CategorySection = () => { const [hoveredIndex, setHoveredIndex] = useState(null); - const [showAll, setShowAll] = useState(false); - //获得分类 const { data: courseCategoriesData, isLoading, @@ -26,31 +17,8 @@ const CategorySection = () => { slug: TaxonomySlug.CATEGORY, }, }, - include: { - children: true, - }, - orderBy: { - createdAt: "desc", // 按创建时间降序排列 - }, take: 8, }); - // 分类展示 - const [displayedCategories, setDisplayedCategories] = useState( - [] - ); - useEffect(() => { - console.log(courseCategoriesData); - // 如果 showAll 为 true，则显示所有分类数据， - // 如果 showAll 为 false，则只显示前 8 个分类数据， - if (!isLoading) { - if (showAll) { - setDisplayedCategories(courseCategoriesData); - } else { - setDisplayedCategories(courseCategoriesData.slice(0, 8)); - } - } - }, [courseCategoriesData, showAll]); - const handleMouseEnter = useCallback((index: number) => { setHoveredIndex(index); }, []); @@ -58,9 +26,6 @@ const CategorySection = () => { const handleMouseLeave = useCallback(() => { setHoveredIndex(null); }, []); - - const navigate = useNavigate(); - return (
@@ -76,97 +41,27 @@ const CategorySection = () => {
{isLoading ? ( - + ) : ( - displayedCategories.map((category, index) => { + courseCategoriesData.map((category, index) => { const categoryColor = stringToColor(category.name); const isHovered = hoveredIndex === index; return ( -
handleMouseEnter(index)} - onMouseLeave={handleMouseLeave} - role="button" - tabIndex={0} - aria-label={`查看${category.name}课程类别`} - onClick={() => { - console.log(category.name); - navigate( - `/courses?category=${category.name}` - ); - - window.scrollTo({ - top: 0, - behavior: "smooth", - }); - }}> -
-
-
-
-
-
- - {category.name} - - -
- - {category.description} - -
- 了解更多 - - → - -
-
-
+ index={index} + category={category} + categoryColor={categoryColor} + isHovered={isHovered} + handleMouseEnter={handleMouseEnter} + handleMouseLeave={handleMouseLeave} + /> ); }) )}
- {!isLoading && ( -
- -
- )} +
); diff --git a/apps/web/src/app/main/home/components/CategorySectionCard.tsx b/apps/web/src/app/main/home/components/CategorySectionCard.tsx new file mode 100644 index 0000000..a91525c --- /dev/null +++ b/apps/web/src/app/main/home/components/CategorySectionCard.tsx @@ -0,0 +1,64 @@ +import { useNavigate } from "react-router-dom"; +import { Typography } from "antd"; +export default function CategorySectionCard({index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) { + const navigate = useNavigate() + const { Title, Text } = Typography; + return ( +
handleMouseEnter(index)} + onMouseLeave={handleMouseLeave} + role="button" + tabIndex={0} + aria-label={`查看${category.name}课程类别`} + onClick={() => { + console.log(category.name); + navigate( + `/courses?category=${category.name}` + ); + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }}> +
+
+
+
+
+
+ + {category.name} + +
+
+ 了解更多 + + → + +
+
+
+ ) +} \ No newline at end of file diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx index c71c5f7..aa2bf07 100755 --- a/apps/web/src/app/main/home/components/CoursesSection.tsx +++ b/apps/web/src/app/main/home/components/CoursesSection.tsx @@ -1,11 +1,10 @@ import React, { useState, useMemo } from "react"; -import { useNavigate } from "react-router-dom"; -import { Button, Typography, Skeleton } from "antd"; -import { ArrowRightOutlined } from "@ant-design/icons"; +import { Typography, Skeleton } from "antd"; import { TaxonomySlug, TermDto } from "@nice/common"; import { api } from "@nice/client"; import { CoursesSectionTag } from "./CoursesSectionTag"; -import CourseList from "../../../../components/models/course/list/CourseList"; +import CourseList from "@web/src/components/models/course/list/CourseList"; +import LookForMore from "./LookForMore"; interface GetTaxonomyProps { categories: string[]; isLoading: boolean; @@ -39,7 +38,6 @@ const CoursesSection: React.FC = ({ description, initialVisibleCoursesCount = 8, }) => { - const navigate = useNavigate(); const [selectedCategory, setSelectedCategory] = useState("全部"); const gateGory: GetTaxonomyProps = useGetTaxonomy({ type: TaxonomySlug.CATEGORY, @@ -97,20 +95,7 @@ const CoursesSection: React.FC = ({ }} showPagination={false} cols={4}> - { -
-
-
- -
-
- } +
); diff --git a/apps/web/src/app/main/home/components/LookForMore.tsx b/apps/web/src/app/main/home/components/LookForMore.tsx new file mode 100644 index 0000000..88e1b41 --- /dev/null +++ b/apps/web/src/app/main/home/components/LookForMore.tsx @@ -0,0 +1,24 @@ +import { ArrowRightOutlined } from "@ant-design/icons"; +import { Button } from "antd"; +import { useNavigate } from "react-router-dom"; + +export default function LookForMore({to}:{to:string}) { + const navigate = useNavigate(); + return ( + <> +
+
+
+ +
+
+ + ) + +} diff --git a/apps/web/src/components/models/course/list/CourseList.tsx b/apps/web/src/components/models/course/list/CourseList.tsx index b637b17..fb1f74e 100755 --- a/apps/web/src/components/models/course/list/CourseList.tsx +++ b/apps/web/src/components/models/course/list/CourseList.tsx @@ -58,7 +58,7 @@ export default function CourseList({
{courses.length > 0 ? ( <> -
+
{isLoading ? ( ) : (