rht02251001
This commit is contained in:
parent
b3c1f82c4b
commit
4eb87d511a
|
|
@ -10,7 +10,7 @@ import {
|
|||
ArrowRightOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { CourseDto, TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { api } from '@nice/client';
|
||||
// const {courseId} = useParams();
|
||||
interface GetTaxonomyProps {
|
||||
|
|
@ -41,6 +41,24 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
|||
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,
|
||||
include:{
|
||||
terms:true
|
||||
}
|
||||
});
|
||||
|
||||
return { data, isLoading};
|
||||
}
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
|
|
@ -77,6 +95,10 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
})
|
||||
const { data ,isLoading : isDataLoading} = useFetchCoursesByCategory(selectedCategory);
|
||||
useEffect(()=>{
|
||||
console.log('data:', data)
|
||||
})
|
||||
// const { data } = api.post.findMany.useQuery({
|
||||
// where: {}, // 必选参数
|
||||
// include: { // 关联查询
|
||||
|
|
@ -100,17 +122,17 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
// id: course.id,
|
||||
// title: course.title
|
||||
// }));
|
||||
const handleClick = (course: Course) => {
|
||||
const handleClick = (course: CourseDto) => {
|
||||
navigate(`/course?courseId=${course.id}/detail`);
|
||||
}
|
||||
|
||||
const filteredCourses = useMemo(() => {
|
||||
return selectedCategory === '全部'
|
||||
? courses
|
||||
: courses.filter((course) => course.category === selectedCategory);
|
||||
}, [selectedCategory, courses]);
|
||||
? data
|
||||
: data?.filter(c => c.terms.some(t => t.name === selectedCategory));
|
||||
}, [selectedCategory, data]);
|
||||
|
||||
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses);
|
||||
const displayedCourses = isDataLoading ? [] : filteredCourses?.slice(0, visibleCourses);
|
||||
return (
|
||||
<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">
|
||||
|
|
@ -165,7 +187,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{displayedCourses.map((course) => (
|
||||
{displayedCourses?.map((course) => (
|
||||
<Card
|
||||
onClick={() => handleClick(course)}
|
||||
key={course.id}
|
||||
|
|
@ -176,23 +198,10 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
<div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
|
||||
style={{ backgroundImage: `url(${course.thumbnail})` }}
|
||||
style={{ backgroundImage: `url(${course?.meta?.thumbnail})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
|
||||
<PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl text-white/90 opacity-0 group-hover:opacity-100 transition-all duration-300" />
|
||||
{course.progress > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/30">
|
||||
{/* <Progress
|
||||
percent={course.progress}
|
||||
showInfo={false}
|
||||
strokeColor={{
|
||||
from: '#3b82f6',
|
||||
to: '#60a5fa',
|
||||
}}
|
||||
className="m-0"
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
@ -202,19 +211,19 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
color="blue"
|
||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"
|
||||
>
|
||||
{course.category}
|
||||
{course.terms[0].name}
|
||||
</Tag>
|
||||
<Tag
|
||||
color={
|
||||
course.level === '入门'
|
||||
course.terms[1].name === '入门'
|
||||
? 'green'
|
||||
: course.level === '中级'
|
||||
: course.terms[1].name === '中级'
|
||||
? 'blue'
|
||||
: 'purple'
|
||||
}
|
||||
className="px-3 py-1 rounded-full border-0"
|
||||
>
|
||||
{course.level}
|
||||
{course.terms[1].name}
|
||||
</Tag>
|
||||
</div>
|
||||
<Title
|
||||
|
|
@ -228,12 +237,12 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="ml-2 flex items-center flex-grow">
|
||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300">
|
||||
{course.instructor}
|
||||
{/* {course.} */}
|
||||
</Text>
|
||||
</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?.meta?.views}次</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-gray-100 text-center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useRef, useCallback } from "react";
|
||||
import React, { useRef, useCallback, useEffect } from "react";
|
||||
import { Button, Carousel, Typography } from "antd";
|
||||
import {
|
||||
TeamOutlined,
|
||||
|
|
@ -62,7 +62,11 @@ const HeroSection = () => {
|
|||
const handleNext = useCallback(() => {
|
||||
carouselRef.current?.next();
|
||||
}, []);
|
||||
//const {slides:carouselItems} = useAppConfig()
|
||||
const { slides } = useAppConfig()
|
||||
useEffect(() => {
|
||||
//slides.push(('https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50'))
|
||||
//console.log(slides)
|
||||
}, [])
|
||||
return (
|
||||
<section className="relative ">
|
||||
<div className="group">
|
||||
|
|
@ -74,20 +78,20 @@ const HeroSection = () => {
|
|||
dots={{
|
||||
className: "carousel-dots !bottom-32 !z-20",
|
||||
}}>
|
||||
{Array.isArray(carouselItems)?
|
||||
(carouselItems.map((item, index) => (
|
||||
{Array.isArray(slides)?
|
||||
(slides.map((item, index) => (
|
||||
<div key={index} className="relative h-[600px]">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
|
||||
style={{
|
||||
//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
|
||||
backgroundImage: `url(${item.image})`,
|
||||
backgroundImage: `url(${item})`,
|
||||
backfaceVisibility: "hidden",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
{/* <div
|
||||
className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
|
||||
/>
|
||||
/> */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
|
||||
|
||||
{/* Content Container */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue