From d60253fdf82ccb2b16e310c0da866851bccbd75a Mon Sep 17 00:00:00 2001
From: Rao <1227431568@qq.com>
Date: Thu, 27 Feb 2025 12:28:03 +0800
Subject: [PATCH] rht

---
 .../courses/components/CoursesContainer.tsx   |   3 +-
 apps/web/src/app/main/my-duty/page.tsx        |   3 +-
 .../path/components/PathListContainer.tsx     |   3 +-
 .../models/course/card/PostCard.tsx           | 127 ++++++++++++++++++
 4 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/models/course/card/PostCard.tsx

diff --git a/apps/web/src/app/main/courses/components/CoursesContainer.tsx b/apps/web/src/app/main/courses/components/CoursesContainer.tsx
index 237e8b3..944620f 100644
--- a/apps/web/src/app/main/courses/components/CoursesContainer.tsx
+++ b/apps/web/src/app/main/courses/components/CoursesContainer.tsx
@@ -3,6 +3,7 @@ import { PostType, Prisma } from "@nice/common";
 import PostList from "@web/src/components/models/course/list/PostList";
 import { useMemo } from "react";
 import CourseCard from "./CourseCard";
+import PostCard from "@web/src/components/models/course/card/PostCard";
 
 export function CoursesContainer() {
 	const { searchValue, selectedTerms } = useMainContext();
@@ -18,7 +19,7 @@ export function CoursesContainer() {
 	return (
 		<>
 			<PostList
-				renderItem={(post) => <CourseCard course={post} edit={false}></CourseCard>}
+				renderItem={(post) => <PostCard course={post}></PostCard>}
 				params={{
 					pageSize: 12,
 					where: {
diff --git a/apps/web/src/app/main/my-duty/page.tsx b/apps/web/src/app/main/my-duty/page.tsx
index 64a529f..a22e105 100644
--- a/apps/web/src/app/main/my-duty/page.tsx
+++ b/apps/web/src/app/main/my-duty/page.tsx
@@ -1,6 +1,7 @@
 import PostList from "@web/src/components/models/course/list/PostList";
 import { useAuth } from "@web/src/providers/auth-provider";
 import CourseCard from "../courses/components/CourseCard";
+import PostCard from "@web/src/components/models/course/card/PostCard";
 
 export default function MyDutyPage() {
 	const { user } = useAuth();
@@ -8,7 +9,7 @@ export default function MyDutyPage() {
 		<>
 			<div className="p-4">
 				<PostList
-				renderItem={post=><CourseCard edit course={post}></CourseCard>}
+				renderItem={post=><PostCard course={post}></PostCard>}
 				
 					params={{
 						pageSize: 12,
diff --git a/apps/web/src/app/main/path/components/PathListContainer.tsx b/apps/web/src/app/main/path/components/PathListContainer.tsx
index 125d9e8..41f67c5 100644
--- a/apps/web/src/app/main/path/components/PathListContainer.tsx
+++ b/apps/web/src/app/main/path/components/PathListContainer.tsx
@@ -3,6 +3,7 @@ import { useMainContext } from "../../layout/MainProvider";
 import { PostType, Prisma } from "@nice/common";
 import { useMemo } from "react";
 import PathCard from "./PathCard";
+import PostCard from "@web/src/components/models/course/card/PostCard";
 
 export function PathListContainer() {
 	const { searchValue, selectedTerms } = useMainContext();
@@ -18,7 +19,7 @@ export function PathListContainer() {
 	return (
 		<>
 			<PostList
-				renderItem={(post) => <PathCard path={post}></PathCard>}
+				renderItem={(post) => <PostCard path={post}></PostCard>}
 				params={{
 					pageSize: 12,
 					where: {
diff --git a/apps/web/src/components/models/course/card/PostCard.tsx b/apps/web/src/components/models/course/card/PostCard.tsx
new file mode 100644
index 0000000..369fbeb
--- /dev/null
+++ b/apps/web/src/components/models/course/card/PostCard.tsx
@@ -0,0 +1,127 @@
+import { Card, Tag, Typography, Button } from "antd";
+import {
+    BookOutlined,
+    EyeOutlined,
+    PlayCircleOutlined,
+    TeamOutlined,
+} from "@ant-design/icons";
+import { CourseDto, PostDto, TaxonomySlug } from "@nice/common";
+import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+
+interface PostCardProps {
+    course?: CourseDto;
+    path?: PostDto
+}
+const { Title, Text } = Typography;
+export default function PostCard({ course = null, path = null }: PostCardProps) {
+    const navigate = useNavigate();
+    const handleClick = (course: CourseDto) => {
+        if (course) {
+            navigate(`/course/${course.id}/detail`);
+        } else if (path) {
+            navigate(`/path/editor/${path.id}`);
+        }
+        window.scrollTo({ top: 0, behavior: "smooth", })
+    };
+    return (
+        <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})`,
+                        }}
+                    />
+
+                    {course && (
+                        <>
+                            <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>
+            }>
+            <div className="px-4 ">
+                <div className="overflow-hidden hover:overflow-auto">
+                    <div className="flex gap-2 h-7 mb-4  whiteSpace-nowrap">
+                        {course?.terms?.map((term) => {
+                            return (
+                                <>
+                                    <Tag
+                                        key={term.id}
+                                        color={
+                                            term?.taxonomy?.slug ===
+                                                TaxonomySlug.CATEGORY
+                                                ? "blue"
+                                                : term?.taxonomy?.slug ===
+                                                    TaxonomySlug.LEVEL
+                                                    ? "green"
+                                                    : "orange"
+                                        }
+                                        className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0 ">
+                                        {term.name}
+                                    </Tag>
+                                </>
+                            );
+                        })}
+                    </div>
+                </div>
+
+                <Title
+                    level={4}
+                    className="mb-4 mt-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  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  transition-colors duration-300 truncate max-w-[120px]">
+                            {course?.depts?.length > 1
+                                ? `${course.depts[0].name}等`
+                                : course?.depts?.[0]?.name}
+                            {/* {course?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
+                            {/* {course?.depts?.map((dept)=>{return dept.name})} */}
+                        </Text>
+
+                    </div>
+                    {!course && (
+                        <>
+                            <span className="text-xs font-medium text-gray-500">
+                                {path?.meta?.views
+                                    ? `观看次数 ${path?.meta?.views}`
+                                    : null}
+                            </span>
+                        </>
+                    )}
+                </div>
+                {course && (
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium text-gray-500 flex items-center">
+                            <EyeOutlined />
+                            {`观看次数 ${course?.meta?.views || 0}`}
+                        </span>
+                        <span className="text-xs font-medium text-gray-500 flex items-center">
+                            <BookOutlined />
+                            {`学习人数 ${course?.studentIds?.length || 0}`}
+                        </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>
+    );
+}