From 9319f112b429b2d26c3d1a88b486f0f5b6c77d86 Mon Sep 17 00:00:00 2001 From: ditiqi Date: Tue, 25 Feb 2025 19:30:59 +0800 Subject: [PATCH] add --- .../main/home/components/CategorySection.tsx | 358 ++++++++---------- 1 file changed, 168 insertions(+), 190 deletions(-) diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx index e3decb4..ddfeab4 100755 --- a/apps/web/src/app/main/home/components/CategorySection.tsx +++ b/apps/web/src/app/main/home/components/CategorySection.tsx @@ -1,157 +1,141 @@ -import React, { useState, useCallback, useEffect, useMemo } from 'react'; -import { Typography, Button, Spin } 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 React, { useState, useCallback, useEffect, useMemo } from "react"; +import { Typography, Button, Spin } 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"; const { Title, Text } = Typography; interface CourseCategory { - name: string; - count: number; - description: string; + name: string; + count: number; + description: string; } -// const courseCategories: CourseCategory[] = [ -// { -// name: '计算机基础', -// count: 120, -// description: '计算机组成原理、操作系统、网络等基础知识' -// }, -// { -// name: '编程语言', -// count: 85, -// description: 'Python、Java、JavaScript等主流编程语言' -// }, -// { -// name: '人工智能', -// count: 65, -// description: '机器学习、深度学习、自然语言处理等前沿技术' -// }, -// { -// name: '数据科学', -// count: 45, -// description: '数据分析、数据可视化、商业智能等' -// }, -// { -// name: '云计算', -// count: 38, -// description: '云服务、容器化、微服务架构等' -// }, -// { -// name: '网络安全', -// count: 42, -// description: '网络安全基础、渗透测试、安全防护等' -// } -// ]; - - const CategorySection = () => { - const [hoveredIndex, setHoveredIndex] = useState(null); - const [showAll, setShowAll] = useState(false); - //获得分类 - const {data:courseCategoriesData,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({ - where:{ - taxonomy: { - 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 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); - }, []); + const [hoveredIndex, setHoveredIndex] = useState(null); + const [showAll, setShowAll] = useState(false); + //获得分类 + const { + data: courseCategoriesData, + isLoading, + }: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({ + where: { + taxonomy: { + 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 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); + }, []); - const handleMouseLeave = useCallback(() => { - setHoveredIndex(null); - }, []); + const handleMouseLeave = useCallback(() => { + setHoveredIndex(null); + }, []); - const navigate = useNavigate() + const navigate = useNavigate(); - return ( -
-
-
- - 探索课程分类 - - - 选择你感兴趣的方向，开启学习之旅 - -
-
- { - 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} - - {/* +
+
+ + 探索课程分类 + + + 选择你感兴趣的方向，开启学习之旅 + +
+
+ {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 && ( -
- -
- )} -
-
- ); + + + {category.description} + +
+ 了解更多 + + → + +
+ + + ); + }) + )} + + {!isLoading && ( +
+ +
+ )} + + + ); }; -export default CategorySection; \ No newline at end of file +export default CategorySection;