li

2025-02-25 13:30:59 +08:00 · 2025-02-25 13:30:59 +08:00 · 6484ac80ad
parent 9db19fa02a
commit 6484ac80ad
3 changed files with 111 additions and 53 deletions
--- a/apps/web/src/app/main/courses/components/CourseCard.tsx
+++ b/apps/web/src/app/main/courses/components/CourseCard.tsx
@ -1,49 +1,90 @@
-import { Card, Rate, Tag } from 'antd';
+import { Card, Rate, Tag ,Typography,Button} from 'antd';
 import { Course } from '../mockData';
-import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { UserOutlined, ClockCircleOutlined, PlayCircleOutlined, TeamOutlined } from '@ant-design/icons';
 import { CourseDto } from '@nice/common';
+import { useNavigate } from 'react-router-dom';
+

 interface CourseCardProps {
  course: CourseDto;
 }
-
+const { Title, Text } = Typography;
 export default function CourseCard({ course }: CourseCardProps) {
+  const navigate = useNavigate();
+  const handleClick = (course: CourseDto) => {
+    navigate(`/course/${course.id}/detail`);
+  }
  return (
-    <Card 
-      hoverable 
-      className="w-full h-full transition-all duration-300 hover:shadow-lg"
-      cover={
-        <img
-          alt={course.title}
-          src={course?.meta?.thumbnail}
-          className="object-cover w-full h-40"
+    <Card
+    onClick={() => handleClick(course)}
+    key={course.id}
+    hoverable
+    className="group overflow-hidden rounded-2xl border border-gray-200 bg-white 
+      shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
+    cover={
+      <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?.meta?.thumbnail})` }}
        />
-      }
-    >
-      <div className="space-y-3">
-        <h3 className="text-lg font-semibold line-clamp-2 hover:text-blue-600 transition-colors">
-          {course.title}
-        </h3>
-        <p className="text-gray-500 text-sm">{course.subTitle}</p>
-        <div className="flex items-center space-x-2">
-          <Rate disabled defaultValue={course.rating} className="text-sm" />
-          <span className="text-gray-500 text-sm">{course.rating}</span>
-        </div>
-        <div className="flex items-center justify-between text-sm text-gray-500">
-          <div className="flex items-center space-x-1">
-            <UserOutlined className="text-gray-400" />
-            <span>{course.enrollments?.length} 人在学</span>
-          </div>
-          <div className="flex items-center space-x-1">
-            <ClockCircleOutlined className="text-gray-400" />
-            <span>{course.duration}</span>
-          </div>
-        </div>
-        <div className="flex flex-wrap gap-2 pt-2">
-          <Tag color="blue" className="rounded-full px-3">{course.terms[0].name}</Tag>
-          <Tag color="green" className="rounded-full px-3">{course.terms[1].name}</Tag>
-        </div>
+        <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" />
      </div>
-    </Card>
+    }
+  >
+    <div className="px-4">
+      <div className="flex gap-2 mb-4">
+        <Tag
+          color="blue"
+          className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"
+        >
+          {course.terms[0].name}
+        </Tag>
+        <Tag
+          color={
+            course.terms[1].name === '入门'
+              ? 'green'
+              : course.terms[1].name === '中级'
+                ? 'blue'
+                : 'purple'
+          }
+          className="px-3 py-1 rounded-full border-0"
+        >
+          {course.terms[1].name}
+        </Tag>
+      </div>
+      <Title
+        level={4}
+        className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left"
+      >
+        <button > {course.title}</button>
+      </Title>
+
+      <div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
+        <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 truncate max-w-[120px]">
+            {course?.depts[0]?.name}
+          </Text>
+        </div>
+        <span className="text-xs font-medium text-gray-500">
+          观看次数{course?.meta?.views}次
+        </span>
+      </div>
+
+
+      <div className="pt-4 border-t border-gray-100 text-center">
+        <Button
+          type="primary"
+          size="large"
+          className="w-full shadow-[0_8px_20px_-6px_rgba(59,130,246,0.5)] hover:shadow-[0_12px_24px_-6px_rgba(59,130,246,0.6)] 
+            transform hover:translate-y-[-2px] transition-all duration-500 ease-out"
+        >
+          立即学习
+        </Button>
+      </div>
+
+    </div>
+  </Card>
  );
 }
--- a/apps/web/src/app/main/home/components/CoursesSection.tsx
+++ b/apps/web/src/app/main/home/components/CoursesSection.tsx
@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { Button, Card, Typography, Tag, Progress, Spin, Empty } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { Button, Card, Typography, Tag, Spin, Empty } from 'antd';
 import {
  PlayCircleOutlined,
  UserOutlined,
@ -12,7 +12,6 @@ import {
 } from '@ant-design/icons';
 import { CourseDto, TaxonomySlug, TermDto } from '@nice/common';
 import { api } from '@nice/client';
-// const {courseId} = useParams();
 interface GetTaxonomyProps {
  categories: string[];
  isLoading: boolean;
@ -39,6 +38,7 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
  }, [data]);
  return { categories, isLoading }
 }
+
 // 不同分类跳转
 function useFetchCoursesByCategory(category: string) {
  const isAll = category === '全部';
@ -52,7 +52,8 @@ function useFetchCoursesByCategory(category: string) {
    },
    take: 8,
    include: {
-      terms: true
+      terms: true,
+      depts:true
    }
  });

@ -83,12 +84,9 @@ interface CoursesSectionProps {
  initialVisibleCoursesCount?: number;
 }

-
 const CoursesSection: React.FC<CoursesSectionProps> = ({
  title,
  description,
-  courses,
-  isLoading,
  initialVisibleCoursesCount = 8,
 }) => {
  const navigate = useNavigate();
@ -97,10 +95,11 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
  const gateGory: GetTaxonomyProps = useGetTaxonomy({
    type: TaxonomySlug.CATEGORY,
  })
+
  const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
-  useEffect(() => {
-    console.log('data:', data)
-  })
+  // useEffect(() => {
+  //   console.log('data:', data)
+  // })
  const handleClick = (course: CourseDto) => {
    navigate(`/course/${course.id}/detail`);
  }
@ -108,6 +107,20 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
  useEffect(() => {
    console.log('data:', data)
  })
+
+  // const { data: depts, isLoading: isDeptLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
+  //   where: {},
+  //   include: {
+  //     depts: true,
+  //   },
+  //   orderBy: {
+  //     createdAt: 'desc' // 按创建时间降序排列
+  //   },
+  //   take: 8 // 只获取前8个课程
+  // });
+  
+
+
  const filteredCourses = useMemo(() => {
    return selectedCategory === '全部'
      ? data
@ -115,6 +128,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
  }, [selectedCategory, data]);

  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">
@ -170,8 +184,8 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {displayedCourses.length=== 0 ? (
-            <div  className="col-span-full">
+          {displayedCourses.length === 0 ? (
+            <div className="col-span-full">
              <Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
            </div>
          ) : displayedCourses?.map((course) => (
@ -223,14 +237,16 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
                <div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
                  <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">
+                    <Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
+                      {course?.depts[0]?.name}
                    </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?.meta?.views}次</span>
+                  <span className="text-xs font-medium text-gray-500">
+                    观看次数{course?.meta?.views}次
                  </span>
                </div>
+
+
                <div className="pt-4 border-t border-gray-100 text-center">
                  <Button
                    type="primary"
--- a/packages/common/src/models/post.ts
+++ b/packages/common/src/models/post.ts
@ -79,4 +79,5 @@ export type CourseDto = Course & {
 	sections?: SectionDto[];
 	terms: Term[];
 	lectureCount?: number;
+	depts:Department[]
 };