li

apps/web/src/app/main/home/components/CoursesSection.tsx

@@ -39,28 +39,27 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
   }, [data]);
   return { categories, isLoading }
 }
-// 修改useGetName中的查询条件
+// 不同分类跳转
-
 function useFetchCoursesByCategory(category: string) {
   const isAll = category === '全部';
-  const { data, isLoading}:{data:CourseDto[],isLoading:boolean} = api.post.findMany.useQuery({
+  const { data, isLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
-    where: isAll?{}:{
+    where: isAll ? {} : {
       terms: {
         some: {
-          name:category
+          name: category
         },
       },
     },
     take: 8,
-    include:{
+    include: {
-      terms:true
+      terms: true
     }
   });
 
-  return { data, isLoading};
+  return { data, isLoading };
 }
 
-// 不同分类跳转
+
 
 const { Title, Text } = Typography;
 
@@ -80,7 +79,7 @@ interface CoursesSectionProps {
   title: string;
   description: string;
   courses: Course[];
-  isLoading:boolean
+  isLoading: boolean
   initialVisibleCoursesCount?: number;
 }
 
@@ -98,38 +97,15 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
   const gateGory: GetTaxonomyProps = useGetTaxonomy({
     type: TaxonomySlug.CATEGORY,
   })
-  const { data ,isLoading : isDataLoading}  = useFetchCoursesByCategory(selectedCategory);
+  const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
-  useEffect(()=>{
+  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: CourseDto) => {
     navigate(`/course/${course.id}/detail`);
   }
 
-  useEffect(()=>{
+  useEffect(() => {
     console.log('data:', data)
   })
   const filteredCourses = useMemo(() => {
@@ -168,38 +144,37 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
                     : 'bg-white text-gray-600 hover:bg-gray-100'
                     }`}
                 >全部</Tag>
-                      {gateGory.categories.length === 0 && (
+                {gateGory.categories.map((category) => (
-                          <Empty
+                  <Tag
-                            description="暂无课程分类"
+                    key={category}
-                            image={Empty.PRESENTED_IMAGE_DEFAULT}
+                    color={selectedCategory === category ? 'blue' : 'default'}
-                          />
+                    onClick={() => {
-                        )}:{
+                      setSelectedCategory(category)
-                  gateGory.categories.map((category) => (
+                      console.log(category)
-                    <Tag
+                    }}
-                      key={category}
+                    className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
-                      color={selectedCategory === category ? 'blue' : 'default'}
+                      ? 'bg-blue-600 text-white shadow-lg'
-                      onClick={() => {
+                      : 'bg-white text-gray-600 hover:bg-gray-100'
-                        setSelectedCategory(category)
+                      }`}
-                        console.log(category)
+
-                      }}
+                  >
-                      className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
+                    {category}
-                        ? 'bg-blue-600 text-white shadow-lg'
+                  </Tag>
-                        : 'bg-white text-gray-600 hover:bg-gray-100'
+
-                        }`}
+                ))
-                      
-                    >
-                      {category}
-                    </Tag>
-                  ))
                 }
-              
+
               </>
             )
           }
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {displayedCourses?.map((course) => (
+          {displayedCourses.length=== 0 ? (
+            <div  className="col-span-full">
+              <Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
+            </div>
+          ) : displayedCourses?.map((course) => (
             <Card
               onClick={() => handleClick(course)}
               key={course.id}
@@ -249,7 +224,6 @@ 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.} */}
                     </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">
@@ -287,7 +261,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
               </Button>
             </div>
           </div>
-)}
+        )}
       </div>
     </section>
   );