From 026ed9d7598b3ca79a118a8bf66c2780f1ed2c55 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Mon, 24 Feb 2025 21:47:34 +0800
Subject: [PATCH] 2.24hui

---
 .../main/home/components/CoursesSection.tsx   |  39 ++-
 apps/web/src/app/main/home/page.tsx           | 258 ++++++++++--------
 2 files changed, 176 insertions(+), 121 deletions(-)

diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx
index fe2653c..1b7edd7 100755
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@@ -56,11 +56,11 @@ interface Course {
   progress: number;
   thumbnail: string;
 }
-
 interface CoursesSectionProps {
   title: string;
   description: string;
   courses: Course[];
+  isLoading:boolean
   initialVisibleCoursesCount?: number;
 }
 
@@ -68,6 +68,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
   title,
   description,
   courses,
+  isLoading,
   initialVisibleCoursesCount = 8,
 }) => {
   const navigate = useNavigate();
@@ -76,15 +77,31 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
   const gateGory: GetTaxonomyProps = useGetTaxonomy({
     type: TaxonomySlug.CATEGORY,
   })
-  const { data } = api.post.findMany.useQuery({
-    take: 8,
-  }
-  )
-  useEffect(() => {
-    console.log(data,'成功')
-  }, [data])
+  // 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(`/courses?courseId=${course.id}/detail`);
+    navigate(`/course?courseId=${course.id}/detail`);
   }
 
   const filteredCourses = useMemo(() => {
@@ -93,7 +110,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
       : courses.filter((course) => course.category === selectedCategory);
   }, [selectedCategory, courses]);
 
-  const displayedCourses = filteredCourses.slice(0, visibleCourses);
+  const displayedCourses = isLoading ? [] : 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">
@@ -231,7 +248,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
           ))}
         </div>
 
-        {filteredCourses.length >= visibleCourses && (
+        {filteredCourses?.length >= visibleCourses && (
           <div className='flex items-center gap-4 justify-between mt-12'>
             <div className='h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent'></div>
             <div className="flex justify-end">
diff --git a/apps/web/src/app/main/home/page.tsx b/apps/web/src/app/main/home/page.tsx
index 8f59ac7..3a7b2af 100755
--- a/apps/web/src/app/main/home/page.tsx
+++ b/apps/web/src/app/main/home/page.tsx
@@ -3,123 +3,161 @@ import CategorySection from './components/CategorySection';
 import CoursesSection from './components/CoursesSection';
 import FeaturedTeachersSection from './components/FeaturedTeachersSection';
 import { api } from '@nice/client';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+interface Courses{
+  id: number;
+  title: string;
+  instructor: string;
+  students: number;
+  rating: number;
+  level: string;
+  duration: string;
+  category: string;
+  progress: number;
+  thumbnail: string;
+}
 const HomePage = () => {
-  const mockCourses = [
-    {
-      id: 1,
-      title: 'Python 零基础入门',
-      instructor: '张教授',
-      students: 12000,
-      rating: 4.8,
-      level: '入门',
-      duration: '36小时',
-      category: '编程语言',
-      progress: 16,
-      thumbnail: '/images/course1.jpg',
+  // const mockCourses = [
+  //   {
+  //     id: 1,
+  //     title: 'Python 零基础入门',
+  //     instructor: '张教授',
+  //     students: 12000,
+  //     rating: 4.8,
+  //     level: '入门',
+  //     duration: '36小时',
+  //     category: '编程语言',
+  //     progress: 16,
+  //     thumbnail: '/images/course1.jpg',
+  //   },
+  //   {
+  //     id: 2,
+  //     title: '数据结构与算法',
+  //     instructor: '李教授',
+  //     students: 8500,
+  //     rating: 4.9,
+  //     level: '进阶',
+  //     duration: '48小时',
+  //     category: '计算机基础',
+  //     progress: 35,
+  //     thumbnail: '/images/course2.jpg',
+  //   },
+  //   {
+  //     id: 3,
+  //     title: '前端开发实战',
+  //     instructor: '王教授',
+  //     students: 10000,
+  //     rating: 4.7,
+  //     level: '中级',
+  //     duration: '42小时',
+  //     category: '前端开发',
+  //     progress: 68,
+  //     thumbnail: '/images/course3.jpg',
+  //   },
+  //   {
+  //     id: 4,
+  //     title: 'Java企业级开发',
+  //     instructor: '刘教授',
+  //     students: 9500,
+  //     rating: 4.6,
+  //     level: '高级',
+  //     duration: '56小时',
+  //     category: '编程语言',
+  //     progress: 15,
+  //     thumbnail: '/images/course4.jpg',
+  //   },
+  //   {
+  //     id: 5,
+  //     title: '人工智能基础',
+  //     instructor: '陈教授',
+  //     students: 11000,
+  //     rating: 4.9,
+  //     level: '中级',
+  //     duration: '45小时',
+  //     category: '人工智能',
+  //     progress: 20,
+  //     thumbnail: '/images/course5.jpg',
+  //   },
+  //   {
+  //     id: 6,
+  //     title: '大数据分析',
+  //     instructor: '赵教授',
+  //     students: 8000,
+  //     rating: 4.8,
+  //     level: '进阶',
+  //     duration: '50小时',
+  //     category: '数据科学',
+  //     progress: 45,
+  //     thumbnail: '/images/course6.jpg',
+  //   },
+  //   {
+  //     id: 7,
+  //     title: '云计算实践',
+  //     instructor: '孙教授',
+  //     students: 7500,
+  //     rating: 4.7,
+  //     level: '高级',
+  //     duration: '48小时',
+  //     category: '云计算',
+  //     progress: 15,
+  //     thumbnail: '/images/course7.jpg',
+  //   },
+  //   {
+  //     id: 8,
+  //     title: '移动应用开发',
+  //     instructor: '周教授',
+  //     students: 9000,
+  //     rating: 4.8,
+  //     level: '中级',
+  //     duration: '40小时',
+  //     category: '移动开发',
+  //     progress: 70,
+  //     thumbnail: '/images/course8.jpg',
+  //   },
+  // ];
+  const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({
+    where: {},
+    include: {
+      instructors: true,
     },
-    {
-      id: 2,
-      title: '数据结构与算法',
-      instructor: '李教授',
-      students: 8500,
-      rating: 4.9,
-      level: '进阶',
-      duration: '48小时',
-      category: '计算机基础',
-      progress: 35,
-      thumbnail: '/images/course2.jpg',
+    orderBy: {
+      createdAt: 'desc' // 按创建时间降序排列
     },
-    {
-      id: 3,
-      title: '前端开发实战',
-      instructor: '王教授',
-      students: 10000,
-      rating: 4.7,
-      level: '中级',
-      duration: '42小时',
-      category: '前端开发',
-      progress: 68,
-      thumbnail: '/images/course3.jpg',
-    },
-    {
-      id: 4,
-      title: 'Java企业级开发',
-      instructor: '刘教授',
-      students: 9500,
-      rating: 4.6,
-      level: '高级',
-      duration: '56小时',
-      category: '编程语言',
-      progress: 15,
-      thumbnail: '/images/course4.jpg',
-    },
-    {
-      id: 5,
-      title: '人工智能基础',
-      instructor: '陈教授',
-      students: 11000,
-      rating: 4.9,
-      level: '中级',
-      duration: '45小时',
-      category: '人工智能',
-      progress: 20,
-      thumbnail: '/images/course5.jpg',
-    },
-    {
-      id: 6,
-      title: '大数据分析',
-      instructor: '赵教授',
-      students: 8000,
-      rating: 4.8,
-      level: '进阶',
-      duration: '50小时',
-      category: '数据科学',
-      progress: 45,
-      thumbnail: '/images/course6.jpg',
-    },
-    {
-      id: 7,
-      title: '云计算实践',
-      instructor: '孙教授',
-      students: 7500,
-      rating: 4.7,
-      level: '高级',
-      duration: '48小时',
-      category: '云计算',
-      progress: 15,
-      thumbnail: '/images/course7.jpg',
-    },
-    {
-      id: 8,
-      title: '移动应用开发',
-      instructor: '周教授',
-      students: 9000,
-      rating: 4.8,
-      level: '中级',
-      duration: '40小时',
-      category: '移动开发',
-      progress: 70,
-      thumbnail: '/images/course8.jpg',
-    },
-  ];
-  return (
-    <div className="min-h-screen">
-      <HeroSection />
-      <CoursesSection
-        title="推荐课程"
-        description="最受欢迎的精品课程，助你快速成长"
-        courses={mockCourses}
-      />
-      {/* <CoursesSection
+    take: 8 // 只获取前8个课程
+  });
+  useEffect(() => {
+    if (data) {
+      console.log('mockCourses data:', data);
+    }
+  }, [data]);
+  
+  // 数据处理逻辑
+// 修正依赖数组
+return (
+  <div className="min-h-screen">
+    <HeroSection />
+    <CoursesSection
+      title="推荐课程"
+      description="最受欢迎的精品课程，助你快速成长"
+      courses={data}
+      isLoading={isLoading}
+    />
+    {/* {formattedCourses.map((course)=>{
+        return (
+          <>
+            <span>course.title</span>
+          </>
+        )
+      })} */}
+    {/* <CoursesSection
         title="热门课程"
         description="最受欢迎的精品课程，助你快速成长"
         courses={mockCourses}
       /> */}
-      <CategorySection />
-      {/* <FeaturedTeachersSection /> */}
-    </div>
-  );
+    <CategorySection />
+    {/* <FeaturedTeachersSection /> */}
+  </div>
+);
 };
 
 export default HomePage;
\ No newline at end of file