{courses.length > 0 ? (
<>
-
+
{isLoading ? (
) : (
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index ddfeab4..9584193 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -1,18 +1,13 @@
import React, { useState, useCallback, useEffect, useMemo } from "react";
-import { Typography, Button, Spin } from "antd";
+import { Typography, Button, Spin, 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);
@@ -39,9 +34,6 @@ const CategorySection = () => {
[]
);
useEffect(() => {
- console.log(courseCategoriesData);
- // 如果 showAll 为 true，则显示所有分类数据，
- // 如果 showAll 为 false，则只显示前 8 个分类数据，
if (!isLoading) {
if (showAll) {
setDisplayedCategories(courseCategoriesData);
@@ -50,13 +42,6 @@ const CategorySection = () => {
}
}
}, [courseCategoriesData, showAll]);
- // const courseCategories: CourseCategory[] = useMemo(() => {
- // return data?.map((term) => ({
- // name: term.name,
- // count: term.hasChildren ? term.children.length : 0,
- // description: term.description
- // })) || [];
- // },[data])
const handleMouseEnter = useCallback((index: number) => {
setHoveredIndex(index);
}, []);
@@ -82,106 +67,27 @@ const CategorySection = () => {
{isLoading ? (
-
+
) : (
displayedCategories.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.children.length} 门课程
- */}
-
-
- {category.description}
-
-
- 了解更多
-
- →
-
-
-
-
+
);
})
)}
- {!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 bbbbfde..bc2e5a4 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -6,6 +6,7 @@ import { TaxonomySlug, TermDto } from "@nice/common";
import { api } from "@nice/client";
import { CoursesSectionTag } from "./CoursesSectionTag";
import CourseList from "../../courses/components/CourseList";
+import LookForMore from "./LookForMore";
interface GetTaxonomyProps {
categories: string[];
isLoading: boolean;
@@ -97,20 +98,7 @@ const CoursesSection: React.FC
= ({
}}
showPagination={false}
cols={4}>
- {
-
-
-
-
-
-
@@ -67,7 +63,7 @@ const CategorySection = () => {
{isLoading ? (
-
+
) : (
displayedCategories.map((category, index) => {
const categoryColor = stringToColor(category.name);
diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index bc2e5a4..6bd8858 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -1,7 +1,5 @@
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";
@@ -40,7 +38,6 @@ const CoursesSection: React.FC
= ({
description,
initialVisibleCoursesCount = 8,
}) => {
- const navigate = useNavigate();
const [selectedCategory, setSelectedCategory] = useState("全部");
const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY,
From 13b8c10c62ac09be71cb60c59b659b9694a3ddf5 Mon Sep 17 00:00:00 2001
From: Rao <1227431568@qq.com>
Date: Tue, 25 Feb 2025 20:40:04 +0800
Subject: [PATCH 3/3] rht0225
---
.../main/home/components/CategorySection.tsx | 30 ++-----------------
1 file changed, 2 insertions(+), 28 deletions(-)
diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index 9584193..f7b3340 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/apps/web/src/app/main/home/components/CategorySection.tsx
@@ -1,17 +1,13 @@
import React, { useState, useCallback, useEffect, useMemo } from "react";
-import { Typography, Button, Spin, Skeleton } 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;
const CategorySection = () => {
const [hoveredIndex, setHoveredIndex] = useState(null);
- const [showAll, setShowAll] = useState(false);
- //获得分类
const {
data: courseCategoriesData,
isLoading,
@@ -21,27 +17,8 @@ const CategorySection = () => {
slug: TaxonomySlug.CATEGORY,
},
},
- include: {
- children: true,
- },
- orderBy: {
- createdAt: "desc", // 按创建时间降序排列
- },
take: 8,
});
- // 分类展示
- const [displayedCategories, setDisplayedCategories] = useState(
- []
- );
- useEffect(() => {
- if (!isLoading) {
- if (showAll) {
- setDisplayedCategories(courseCategoriesData);
- } else {
- setDisplayedCategories(courseCategoriesData.slice(0, 8));
- }
- }
- }, [courseCategoriesData, showAll]);
const handleMouseEnter = useCallback((index: number) => {
setHoveredIndex(index);
}, []);
@@ -49,9 +26,6 @@ const CategorySection = () => {
const handleMouseLeave = useCallback(() => {
setHoveredIndex(null);
}, []);
-
- const navigate = useNavigate();
-
return (
@@ -69,7 +43,7 @@ const CategorySection = () => {
{isLoading ? (
) : (
- displayedCategories.map((category, index) => {
+ courseCategoriesData.map((category, index) => {
const categoryColor = stringToColor(category.name);
const isHovered = hoveredIndex === index;