add.
This commit is contained in:
parent
400b2f93dc
commit
79f51e1b55
|
@ -84,9 +84,6 @@ const CategorySection = () => {
|
|||
// description: term.description
|
||||
// })) || [];
|
||||
// },[data])
|
||||
|
||||
|
||||
|
||||
const handleMouseEnter = useCallback((index: number) => {
|
||||
setHoveredIndex(index);
|
||||
}, []);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Card, Typography, Tag, Progress, Spin } from 'antd';
|
||||
import { Button, Card, Typography, Tag, Progress, Spin, Empty } from 'antd';
|
||||
import {
|
||||
PlayCircleOutlined,
|
||||
UserOutlined,
|
||||
|
@ -17,7 +17,6 @@ interface GetTaxonomyProps {
|
|||
categories: string[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||
const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
|
||||
where: {
|
||||
|
@ -40,8 +39,11 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
|||
}, [data]);
|
||||
return { categories, isLoading }
|
||||
}
|
||||
// 修改useGetName中的查询条件
|
||||
|
||||
|
||||
// 不同分类跳转
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface Course {
|
||||
|
@ -63,6 +65,25 @@ interface CoursesSectionProps {
|
|||
isLoading:boolean
|
||||
initialVisibleCoursesCount?: number;
|
||||
}
|
||||
function useFetchCoursesByCategory(category: string) {
|
||||
const isAll = category === '全部';
|
||||
const { data, isLoading } = api.post.findMany.useQuery({
|
||||
where: isAll?{}:{
|
||||
terms: {
|
||||
some: {
|
||||
name:category
|
||||
},
|
||||
},
|
||||
},
|
||||
take: 8,
|
||||
include:{
|
||||
terms:true
|
||||
}
|
||||
});
|
||||
|
||||
return { data, isLoading };
|
||||
}
|
||||
|
||||
|
||||
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||
title,
|
||||
|
@ -77,39 +98,22 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
})
|
||||
// const { data } = api.post.findMany.useQuery({
|
||||
// where: {}, // 必选参数
|
||||
// include: { // 关联查询
|
||||
// instructors: true
|
||||
// },
|
||||
// orderBy: { // 排序规则
|
||||
// createdAt: 'desc'
|
||||
// },
|
||||
// take: 8
|
||||
// })
|
||||
// useEffect(() => {
|
||||
// // 添加空值保护
|
||||
// if (data && data.length > 0) {
|
||||
// console.log('有效数据:', data)
|
||||
// // 执行后续操作
|
||||
// } else {
|
||||
// console.log('无数据或加载中')
|
||||
// }
|
||||
// }, [data])
|
||||
// const formatted = data?.map(course => ({
|
||||
// id: course.id,
|
||||
// title: course.title
|
||||
// }));
|
||||
const handleClick = (course: Course) => {
|
||||
navigate(`/course?courseId=${course.id}/detail`);
|
||||
}
|
||||
|
||||
const handleClick = (course: Course) => {
|
||||
navigate(`/course/${course.id}/detail`);
|
||||
}
|
||||
const { data } = useFetchCoursesByCategory(selectedCategory);
|
||||
|
||||
useEffect(()=>{
|
||||
console.log('data:', data)
|
||||
})
|
||||
const filteredCourses = useMemo(() => {
|
||||
return selectedCategory === '全部'
|
||||
? courses
|
||||
: courses.filter((course) => course.category === selectedCategory);
|
||||
}, [selectedCategory, courses]);
|
||||
|
||||
|
||||
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses);
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
|
||||
|
@ -140,12 +144,22 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>全部</Tag>
|
||||
{
|
||||
{gateGory.categories.length === 0 && (
|
||||
<Empty
|
||||
description="暂无课程分类"
|
||||
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
||||
/>
|
||||
)}:{
|
||||
gateGory.categories.map((category) => (
|
||||
<Tag
|
||||
key={category}
|
||||
color={selectedCategory === category ? 'blue' : 'default'}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
onClick={() => {
|
||||
setSelectedCategory(category)
|
||||
// console.log(gateGory)
|
||||
}
|
||||
}
|
||||
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
|
@ -155,6 +169,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</Tag>
|
||||
))
|
||||
}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -229,7 +244,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</div>
|
||||
<span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
|
||||
<EyeOutlined className="ml-1.5 text-sm" />
|
||||
<span className="text-xs font-medium">观看次数{course.progress}次</span>
|
||||
<span className="text-xs font-medium">观看次数{course.progress}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-gray-100 text-center">
|
||||
|
@ -262,7 +277,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
@ -127,12 +127,10 @@ const HomePage = () => {
|
|||
});
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
console.log('mockCourses data:', data);
|
||||
console.log('Courses data:', data);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
// 数据处理逻辑
|
||||
// 修正依赖数组
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<HeroSection />
|
||||
|
|
Loading…
Reference in New Issue