rht02251001

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<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
+      ? data
-      : courses.filter((course) => course.category === selectedCategory);
+      : data?.filter(c => c.terms.some(t => t.name === selectedCategory));
-  }, [selectedCategory, courses]);
+  }, [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">

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)?
+					{Array.isArray(slides)?
-						(carouselItems.map((item, index) => (
+						(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 */}