add.
This commit is contained in:
parent
400b2f93dc
commit
79f51e1b55
|
@ -84,9 +84,6 @@ const CategorySection = () => {
|
||||||
// description: term.description
|
// description: term.description
|
||||||
// })) || [];
|
// })) || [];
|
||||||
// },[data])
|
// },[data])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleMouseEnter = useCallback((index: number) => {
|
const handleMouseEnter = useCallback((index: number) => {
|
||||||
setHoveredIndex(index);
|
setHoveredIndex(index);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState, useMemo, useEffect } from 'react';
|
import React, { useState, useMemo, useEffect } from 'react';
|
||||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
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 {
|
import {
|
||||||
PlayCircleOutlined,
|
PlayCircleOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
|
@ -17,7 +17,6 @@ interface GetTaxonomyProps {
|
||||||
categories: string[];
|
categories: string[];
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||||
const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
|
const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
|
||||||
where: {
|
where: {
|
||||||
|
@ -40,8 +39,11 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||||
}, [data]);
|
}, [data]);
|
||||||
return { categories, isLoading }
|
return { categories, isLoading }
|
||||||
}
|
}
|
||||||
|
// 修改useGetName中的查询条件
|
||||||
|
|
||||||
|
|
||||||
|
// 不同分类跳转
|
||||||
|
|
||||||
const { Title, Text } = Typography;
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
interface Course {
|
interface Course {
|
||||||
|
@ -63,6 +65,25 @@ interface CoursesSectionProps {
|
||||||
isLoading:boolean
|
isLoading:boolean
|
||||||
initialVisibleCoursesCount?: number;
|
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> = ({
|
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
title,
|
title,
|
||||||
|
@ -77,39 +98,22 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||||
type: TaxonomySlug.CATEGORY,
|
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(() => {
|
const filteredCourses = useMemo(() => {
|
||||||
return selectedCategory === '全部'
|
return selectedCategory === '全部'
|
||||||
? courses
|
? courses
|
||||||
: courses.filter((course) => course.category === selectedCategory);
|
: courses.filter((course) => course.category === selectedCategory);
|
||||||
}, [selectedCategory, courses]);
|
}, [selectedCategory, courses]);
|
||||||
|
|
||||||
|
|
||||||
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses);
|
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses);
|
||||||
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">
|
||||||
|
@ -140,12 +144,22 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||||
}`}
|
}`}
|
||||||
>全部</Tag>
|
>全部</Tag>
|
||||||
{
|
{gateGory.categories.length === 0 && (
|
||||||
|
<Empty
|
||||||
|
description="暂无课程分类"
|
||||||
|
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
||||||
|
/>
|
||||||
|
)}:{
|
||||||
gateGory.categories.map((category) => (
|
gateGory.categories.map((category) => (
|
||||||
<Tag
|
<Tag
|
||||||
key={category}
|
key={category}
|
||||||
color={selectedCategory === category ? 'blue' : 'default'}
|
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
|
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-blue-600 text-white shadow-lg'
|
||||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||||
|
@ -155,6 +169,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
</Tag>
|
</Tag>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -229,7 +244,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
</div>
|
</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">
|
<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" />
|
<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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4 border-t border-gray-100 text-center">
|
<div className="pt-4 border-t border-gray-100 text-center">
|
||||||
|
@ -262,7 +277,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
@ -127,12 +127,10 @@ const HomePage = () => {
|
||||||
});
|
});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data) {
|
if (data) {
|
||||||
console.log('mockCourses data:', data);
|
console.log('Courses data:', data);
|
||||||
}
|
}
|
||||||
}, [data]);
|
}, [data]);
|
||||||
|
|
||||||
// 数据处理逻辑
|
|
||||||
// 修正依赖数组
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen">
|
<div className="min-h-screen">
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
|
|
Loading…
Reference in New Issue