Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
ditiqi
commit
270d3fece1
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,148 +11,25 @@ import {
|
|||
} from "@nice/common";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { set } from "idb-keyval";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
|
||||
interface paginationData {
|
||||
items: CourseDto[];
|
||||
totalPages: number;
|
||||
}
|
||||
export default function CoursesPage() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedCategory, setSelectedCategory] = useState("");
|
||||
const [selectedLevel, setSelectedLevel] = useState("");
|
||||
const pageSize = 9;
|
||||
const [isAll, setIsAll] = useState(true);
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
let coursesData = [];
|
||||
let isCourseLoading = false;
|
||||
const searchValue = searchParams.get("searchValue");
|
||||
|
||||
if (!searchParams.get("searchValue")) {
|
||||
console.log("no category");
|
||||
const { data, isLoading } = api.post.findManyWithPagination.useQuery({
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
},
|
||||
select: courseDetailSelect,
|
||||
});
|
||||
coursesData = data?.items;
|
||||
isCourseLoading = isLoading;
|
||||
} else {
|
||||
console.log("searchValue:" + searchParams.get("searchValue"));
|
||||
const searchValue = searchParams.get("searchValue");
|
||||
const { data, isLoading } = api.post.findManyWithPagination.useQuery({
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
terms: isAll
|
||||
? {}
|
||||
: {
|
||||
some: {
|
||||
OR: [
|
||||
selectedCategory
|
||||
? { name: selectedCategory }
|
||||
: {},
|
||||
selectedLevel
|
||||
? { name: selectedLevel }
|
||||
: {},
|
||||
],
|
||||
},
|
||||
},
|
||||
OR: [
|
||||
{ title: { contains: searchValue, mode: "insensitive" } },
|
||||
{
|
||||
subTitle: {
|
||||
contains: searchValue,
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{ content: { contains: searchValue, mode: "insensitive" } },
|
||||
{
|
||||
terms: {
|
||||
some: {
|
||||
name: {
|
||||
contains: searchValue,
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
select: courseDetailSelect,
|
||||
});
|
||||
coursesData = data?.items;
|
||||
isCourseLoading = isLoading;
|
||||
}
|
||||
useEffect(() => {
|
||||
if (searchParams.get("searchValue") == "") {
|
||||
setSelectedCategory("");
|
||||
setSelectedLevel("");
|
||||
}
|
||||
}, [searchParams.get("searchValue")]);
|
||||
const filteredCourses = useMemo(() => {
|
||||
return isCourseLoading ? [] : coursesData;
|
||||
}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);
|
||||
|
||||
const paginatedCourses: CourseDto[] = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
return isCourseLoading
|
||||
? []
|
||||
: (filteredCourses.slice(
|
||||
startIndex,
|
||||
startIndex + pageSize
|
||||
) as any as CourseDto[]);
|
||||
}, [filteredCourses, currentPage]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, []);
|
||||
|
||||
const { searchValue, setSearchValue } = useMainContext();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex gap-4">
|
||||
{/* 左侧筛选区域 */}
|
||||
<div className="lg:w-1/5">
|
||||
<div className="sticky top-24">
|
||||
<FilterSection
|
||||
selectedCategory={selectedCategory}
|
||||
selectedLevel={selectedLevel}
|
||||
onCategoryChange={(category) => {
|
||||
console.log(category);
|
||||
setSelectedCategory(category);
|
||||
setCurrentPage(1);
|
||||
setIsAll(!category);
|
||||
setSearchParams({ searchValue: "" });
|
||||
}}
|
||||
onLevelChange={(level) => {
|
||||
setSelectedLevel(level);
|
||||
setCurrentPage(1);
|
||||
setIsAll(!level);
|
||||
setSearchParams({ searchValue: "" });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧课程列表区域 */}
|
||||
<div className="lg:w-4/5">
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-gray-600">
|
||||
共找到 {filteredCourses.length} 门课程
|
||||
</span>
|
||||
</div>
|
||||
<CourseList
|
||||
courses={paginatedCourses}
|
||||
total={filteredCourses.length}
|
||||
pageSize={pageSize}
|
||||
currentPage={currentPage}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div>{searchValue}</div>
|
||||
<CourseList
|
||||
params={{
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
}}></CourseList>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Typography, Button, Spin } from 'antd';
|
|||
import { stringToColor, TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { api,} from '@nice/client';
|
||||
import { ControlOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
|
|
@ -124,6 +124,7 @@ const CategorySection = () => {
|
|||
onClick={()=>{
|
||||
console.log(category.name)
|
||||
navigate(`/courses?category=${category.name}`)
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}}
|
||||
>
|
||||
<div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -48,12 +48,11 @@ const carouselItems: CarouselItem[] = [
|
|||
const HeroSection = () => {
|
||||
const carouselRef = useRef<CarouselRef>(null);
|
||||
const { statistics, baseSetting } = useAppConfig();
|
||||
|
||||
const platformStats: PlatformStat[] = [
|
||||
{ icon: <TeamOutlined />, value: "50,000+", label: "注册学员" },
|
||||
{ icon: <BookOutlined />, value: "1,000+", label: "精品课程" },
|
||||
// { icon: <StarOutlined />, value: '98%', label: '好评度' },
|
||||
{ icon: <EyeOutlined />, value: "4552", label: "观看次数" },
|
||||
{ icon: <TeamOutlined />, value: statistics.staffs.toString(), label: "注册学员" },
|
||||
{ icon: <StarOutlined />, value: statistics.courses.toString(), label: "精品课程" },
|
||||
{ icon: <BookOutlined />, value: statistics.lectures.toString(), label: '课程章节' },
|
||||
{ icon: <EyeOutlined />, value: statistics.reads.toString(), label: "观看次数" },
|
||||
];
|
||||
const handlePrev = useCallback(() => {
|
||||
carouselRef.current?.prev();
|
||||
|
|
@ -119,8 +118,8 @@ const HeroSection = () => {
|
|||
</div>
|
||||
|
||||
{/* Stats Container */}
|
||||
<div className="absolute -bottom-24 left-1/2 -translate-x-1/2 w-1/2 max-w-6xl px-4">
|
||||
<div className="rounded-2xl grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]">
|
||||
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-2/3 max-w-6xl px-4">
|
||||
<div className="rounded-2xl grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]">
|
||||
{platformStats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useState } from "react";
|
|||
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
|
||||
import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { UserMenu } from "./UserMenu/UserMenu";
|
||||
import { NavigationMenu } from "./NavigationMenu";
|
||||
|
||||
|
|
@ -12,6 +12,7 @@ export function MainHeader() {
|
|||
const [searchValue, setSearchValue] = useState("");
|
||||
const { isAuthenticated, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams,setSearchParams] = useSearchParams();
|
||||
|
||||
return (
|
||||
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
|
||||
|
|
@ -37,7 +38,11 @@ export function MainHeader() {
|
|||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
onPressEnter={(e) => {
|
||||
//console.log(e)
|
||||
setSearchValue("");
|
||||
//setSearchValue("");
|
||||
setSearchParams((prev)=>{
|
||||
if(searchParams.get("category")) prev.delete("category")
|
||||
return prev
|
||||
})
|
||||
navigate(
|
||||
`/courses/?searchValue=${searchValue}`
|
||||
);
|
||||
|
|
|
|||
|
|
@ -79,4 +79,5 @@ export type CourseDto = Course & {
|
|||
sections?: SectionDto[];
|
||||
terms: Term[];
|
||||
lectureCount?: number;
|
||||
depts:Department[]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue