rht
This commit is contained in:
parent
defbdbe3b5
commit
d60253fdf8
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue