liaohui
/
book_manage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rht0225

This commit is contained in:
Rao 2025-02-25 20:40:04 +08:00
parent 287bf31d0e
commit 13b8c10c62
1 changed files with 2 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web/src/app/main/home/components/CategorySection.tsx
View File

@ -1,17 +1,13 @@
import React, { useState, useCallback, useEffect, useMemo } from "react"; 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 { stringToColor, TaxonomySlug, TermDto } from "@nice/common";
import { api } from "@nice/client"; import { api } from "@nice/client";
import { ControlOutlined } from "@ant-design/icons";
import { useNavigate, useSearchParams } from "react-router-dom";
import LookForMore from "./LookForMore"; import LookForMore from "./LookForMore";
import CategorySectionCard from "./CategorySectionCard"; import CategorySectionCard from "./CategorySectionCard";
const { Title, Text } = Typography; const { Title, Text } = Typography;
const CategorySection = () => { const CategorySection = () => {
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
const [showAll, setShowAll] = useState(false);
//获得分类
const { const {
data: courseCategoriesData, data: courseCategoriesData,
isLoading, isLoading,
@ -21,27 +17,8 @@ const CategorySection = () => {
slug: TaxonomySlug.CATEGORY, slug: TaxonomySlug.CATEGORY,
}, },
}, },
include: {
children: true,
},
orderBy: {
createdAt: "desc", // 按创建时间降序排列
},
take: 8, take: 8,
}); });
// 分类展示
const [displayedCategories, setDisplayedCategories] = useState<TermDto[]>(
[]
);
useEffect(() => {
if (!isLoading) {
if (showAll) {
setDisplayedCategories(courseCategoriesData);
} else {
setDisplayedCategories(courseCategoriesData.slice(0, 8));
}
}
}, [courseCategoriesData, showAll]);
const handleMouseEnter = useCallback((index: number) => { const handleMouseEnter = useCallback((index: number) => {
setHoveredIndex(index); setHoveredIndex(index);
}, []); }, []);
@ -49,9 +26,6 @@ const CategorySection = () => {
const handleMouseLeave = useCallback(() => { const handleMouseLeave = useCallback(() => {
setHoveredIndex(null); setHoveredIndex(null);
}, []); }, []);
const navigate = useNavigate();
return ( return (
<section className="py-32 relative overflow-hidden"> <section className="py-32 relative overflow-hidden">
<div className="max-w-screen-2xl mx-auto px-4 relative"> <div className="max-w-screen-2xl mx-auto px-4 relative">
@ -69,7 +43,7 @@ const CategorySection = () => {
{isLoading ? ( {isLoading ? (
<Skeleton></Skeleton> <Skeleton></Skeleton>
) : ( ) : (
displayedCategories.map((category, index) => { courseCategoriesData.map((category, index) => {
const categoryColor = stringToColor(category.name); const categoryColor = stringToColor(category.name);
const isHovered = hoveredIndex === index; const isHovered = hoveredIndex === index;