diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx index c6a2969..9fe682d 100755 --- a/apps/web/src/app/main/home/components/CoursesSection.tsx +++ b/apps/web/src/app/main/home/components/CoursesSection.tsx @@ -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 = ({ 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 = ({ // 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 (
@@ -165,7 +187,7 @@ const CoursesSection: React.FC = ({
- {displayedCourses.map((course) => ( + {displayedCourses?.map((course) => ( handleClick(course)} key={course.id} @@ -176,23 +198,10 @@ const CoursesSection: React.FC = ({
- {course.progress > 0 && ( -
- {/* */} -
- )}
} > @@ -202,19 +211,19 @@ const CoursesSection: React.FC = ({ color="blue" className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0" > - {course.category} + {course.terms[0].name} - {course.level} + {course.terms[1].name}
= ({ <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"> diff --git a/apps/web/src/app/main/home/components/HeroSection.tsx b/apps/web/src/app/main/home/components/HeroSection.tsx index 5a58d12..e0e443d 100755 --- a/apps/web/src/app/main/home/components/HeroSection.tsx +++ b/apps/web/src/app/main/home/components/HeroSection.tsx @@ -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 */}