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

add

This commit is contained in:
ditiqi 2025-02-25 19:31:01 +08:00
parent 9319f112b4
commit 4eebb49c7f
1 changed files with 35 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
apps/web/src/app/main/home/components/CoursesSection.tsx
View File

@ -1,20 +1,11 @@
import React, { useState, useMemo, useEffect } from "react"; import React, { useState, useMemo } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Button, Card, Typography, Tag, Spin, Empty } from "antd"; import { Button, Typography, Skeleton } from "antd";
import { import { ArrowRightOutlined } from "@ant-design/icons";
PlayCircleOutlined, import { TaxonomySlug, TermDto } from "@nice/common";
TeamOutlined,
ArrowRightOutlined,
} from "@ant-design/icons";
import {
courseDetailSelect,
CourseDto,
TaxonomySlug,
TermDto,
} from "@nice/common";
import { api } from "@nice/client"; import { api } from "@nice/client";
import CourseCard from "../../courses/components/CourseCard";
import { CoursesSectionTag } from "./CoursesSectionTag"; import { CoursesSectionTag } from "./CoursesSectionTag";
import CourseList from "../../courses/components/CourseList";
interface GetTaxonomyProps { interface GetTaxonomyProps {
categories: string[]; categories: string[];
isLoading: boolean; isLoading: boolean;
@ -27,11 +18,7 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
slug: type, slug: type,
}, },
}, },
include: {
children: true,
},
take: 10, // 只取前10个 take: 10, // 只取前10个
orderBy: {},
}); });
const categories = useMemo(() => { const categories = useMemo(() => {
const allCategories = isLoading const allCategories = isLoading
@ -41,26 +28,6 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
}, [data]); }, [data]);
return { categories, isLoading }; return { categories, isLoading };
} }
// 不同分类跳转
function useFetchCoursesByCategory(category: string) {
const isAll = category === "全部";
const { data, isLoading }: { data: CourseDto[]; isLoading: boolean } =
api.post.findMany.useQuery({
where: isAll
? {}
: {
terms: {
some: {
name: category,
},
},
},
take: 8,
select: courseDetailSelect,
});
return { data, isLoading };
}
const { Title, Text } = Typography; const { Title, Text } = Typography;
interface CoursesSectionProps { interface CoursesSectionProps {
title: string; title: string;
@ -70,25 +37,13 @@ interface CoursesSectionProps {
const CoursesSection: React.FC<CoursesSectionProps> = ({ const CoursesSection: React.FC<CoursesSectionProps> = ({
title, title,
description, description,
initialVisibleCoursesCount = 8,
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [selectedCategory, setSelectedCategory] = useState<string>("全部"); const [selectedCategory, setSelectedCategory] = useState<string>("全部");
const gateGory: GetTaxonomyProps = useGetTaxonomy({ const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY, type: TaxonomySlug.CATEGORY,
}); });
const { data, isLoading: isDataLoading } =
useFetchCoursesByCategory(selectedCategory);
const filteredCourses = useMemo(() => {
return selectedCategory === "全部"
? data
: data?.filter((c) =>
c.terms.some((t) => t.name === selectedCategory)
);
}, [selectedCategory, data]);
const displayedCourses = isDataLoading ? [] : filteredCourses;
useEffect(()=>{
console.log(data)
})
return ( return (
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white"> <section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
<div className="max-w-screen-2xl mx-auto px-6 relative"> <div className="max-w-screen-2xl mx-auto px-6 relative">
@ -106,28 +61,42 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
</Text> </Text>
</div> </div>
</div> </div>
<div className="mb-12 flex flex-wrap gap-4"> <div className="mb-12 flex flex-wrap gap-4">
{gateGory.isLoading ? ( {gateGory.isLoading ? (
<Spin className="m-3" /> <Skeleton paragraph={{ rows: 2 }}></Skeleton>
) : ( ) : (
<> <>
{['全部',...gateGory.categories].map((category,idx) => ( {["全部", ...gateGory.categories].map(
<CoursesSectionTag key={idx} category= {category} selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory}/> (category, idx) => (
))} <CoursesSectionTag
key={idx}
category={category}
selectedCategory={selectedCategory}
setSelectedCategory={
setSelectedCategory
}
/>
)
)}
</> </>
)} )}
</div> </div>
<CourseList
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> params={{
{isDataLoading ? ( page: 1,
<Spin className="m-3" /> pageSize: initialVisibleCoursesCount,
) : ( where: {
displayedCourses?.map((course,index) => ( terms: !(selectedCategory === "全部")
<CourseCard course={course} key={index}></CourseCard> ? {
)) some: {
)} name: selectedCategory,
</div> },
}
: {},
},
}}
showPagination={false}
cols={4}></CourseList>
{ {
<div className="flex items-center gap-4 justify-between mt-12"> <div className="flex items-center gap-4 justify-between mt-12">
<div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div> <div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>