linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc

This commit is contained in:
ditiqi 2025-02-25 16:04:52 +08:00
parent b2c1a8b264 d6edf9b856
commit 270d3fece1
7 changed files with 142 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
apps/web/src/app/main/courses/components/CourseCard.tsx
View File

@ -1,49 +1,90 @@
import { Card, Rate, Tag } from 'antd'; import { Card, Rate, Tag ,Typography,Button} from 'antd';
import { Course } from '../mockData'; 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 { CourseDto } from '@nice/common';
import { useNavigate } from 'react-router-dom';
interface CourseCardProps { interface CourseCardProps {
course: CourseDto; course: CourseDto;
} }
const { Title, Text } = Typography;
export default function CourseCard({ course }: CourseCardProps) { export default function CourseCard({ course }: CourseCardProps) {
const navigate = useNavigate();
const handleClick = (course: CourseDto) => {
navigate(`/course/${course.id}/detail`);
}
return ( return (
<Card <Card
hoverable onClick={() => handleClick(course)}
className="w-full h-full transition-all duration-300 hover:shadow-lg" key={course.id}
cover={ hoverable
<img className="group overflow-hidden rounded-2xl border border-gray-200 bg-white
alt={course.title} shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
src={course?.meta?.thumbnail} cover={
className="object-cover w-full h-40" <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="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 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> </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>
); );
} }

155
apps/web/src/app/main/courses/page.tsx
View File

@ -11,148 +11,25 @@ import {
} from "@nice/common"; } from "@nice/common";
import { useSearchParams } from "react-router-dom"; import { useSearchParams } from "react-router-dom";
import { set } from "idb-keyval"; import { set } from "idb-keyval";
import { useMainContext } from "../layout/MainProvider";
interface paginationData {
items: CourseDto[];
totalPages: number;
}
export default function CoursesPage() { export default function CoursesPage() {
const [currentPage, setCurrentPage] = useState(1); const { searchValue, setSearchValue } = useMainContext();
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);
}, []);
return ( return (
<div className="min-h-screen bg-gray-50"> <>
<div className="container mx-auto px-4 py-8"> <div className="min-h-screen bg-gray-50">
<div className="flex gap-4"> <div>{searchValue}</div>
{/* 左侧筛选区域 */} <CourseList
<div className="lg:w-1/5"> params={{
<div className="sticky top-24"> page: 1,
<FilterSection pageSize: 12,
selectedCategory={selectedCategory} }}></CourseList>
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> </div>
</div> </>
); );
} }

3
apps/web/src/app/main/home/components/CategorySection.tsx
View File

@ -3,7 +3,7 @@ import { Typography, Button, Spin } from 'antd';
import { stringToColor, TaxonomySlug, TermDto } from '@nice/common'; import { stringToColor, TaxonomySlug, TermDto } from '@nice/common';
import { api,} from '@nice/client'; import { api,} from '@nice/client';
import { ControlOutlined } from '@ant-design/icons'; import { ControlOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
const { Title, Text } = Typography; const { Title, Text } = Typography;
@ -124,6 +124,7 @@ const CategorySection = () => {
onClick={()=>{ onClick={()=>{
console.log(category.name) console.log(category.name)
navigate(`/courses?category=${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" /> <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" />

48
apps/web/src/app/main/home/components/CoursesSection.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useMemo, useEffect } from 'react'; import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Button, Card, Typography, Tag, Progress, Spin, Empty } from 'antd'; import { Button, Card, Typography, Tag, Spin, Empty } from 'antd';
import { import {
PlayCircleOutlined, PlayCircleOutlined,
UserOutlined, UserOutlined,
@ -12,7 +12,6 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import { CourseDto, TaxonomySlug, TermDto } from '@nice/common'; import { CourseDto, TaxonomySlug, TermDto } from '@nice/common';
import { api } from '@nice/client'; import { api } from '@nice/client';
// const {courseId} = useParams();
interface GetTaxonomyProps { interface GetTaxonomyProps {
categories: string[]; categories: string[];
isLoading: boolean; isLoading: boolean;
@ -39,6 +38,7 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
}, [data]); }, [data]);
return { categories, isLoading } return { categories, isLoading }
} }
// 不同分类跳转 // 不同分类跳转
function useFetchCoursesByCategory(category: string) { function useFetchCoursesByCategory(category: string) {
const isAll = category === '全部'; const isAll = category === '全部';
@ -52,7 +52,8 @@ function useFetchCoursesByCategory(category: string) {
}, },
take: 8, take: 8,
include: { include: {
terms: true terms: true,
depts:true
} }
}); });
@ -83,12 +84,9 @@ interface CoursesSectionProps {
initialVisibleCoursesCount?: number; initialVisibleCoursesCount?: number;
} }
const CoursesSection: React.FC<CoursesSectionProps> = ({ const CoursesSection: React.FC<CoursesSectionProps> = ({
title, title,
description, description,
courses,
isLoading,
initialVisibleCoursesCount = 8, initialVisibleCoursesCount = 8,
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -97,10 +95,11 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
const gateGory: GetTaxonomyProps = useGetTaxonomy({ const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY, type: TaxonomySlug.CATEGORY,
}) })
const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory); const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
useEffect(() => { // useEffect(() => {
console.log('data:', data) // console.log('data:', data)
}) // })
const handleClick = (course: CourseDto) => { const handleClick = (course: CourseDto) => {
navigate(`/course/${course.id}/detail`); navigate(`/course/${course.id}/detail`);
} }
@ -108,6 +107,20 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
useEffect(() => { useEffect(() => {
console.log('data:', data) 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(() => { const filteredCourses = useMemo(() => {
return selectedCategory === '全部' return selectedCategory === '全部'
? data ? data
@ -115,6 +128,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
}, [selectedCategory, data]); }, [selectedCategory, data]);
const displayedCourses = isDataLoading ? [] : filteredCourses?.slice(0, visibleCourses); const displayedCourses = isDataLoading ? [] : filteredCourses?.slice(0, visibleCourses);
return ( return (
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white"> <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"> <div className="max-w-screen-2xl mx-auto px-6 relative">
@ -170,8 +184,8 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{displayedCourses.length=== 0 ? ( {displayedCourses.length === 0 ? (
<div className="col-span-full"> <div className="col-span-full">
<Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} /> <Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
</div> </div>
) : displayedCourses?.map((course) => ( ) : 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"> <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" /> <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"> <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> </Text>
</div> </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"> <span className="text-xs font-medium text-gray-500">
<EyeOutlined className="ml-1.5 text-sm" /> 观看次数{course?.meta?.views}次
<span className="text-xs font-medium">观看次数{course?.meta?.views}次</span>
</span> </span>
</div> </div>
<div className="pt-4 border-t border-gray-100 text-center"> <div className="pt-4 border-t border-gray-100 text-center">
<Button <Button
type="primary" type="primary"

13
apps/web/src/app/main/home/components/HeroSection.tsx
View File

@ -48,12 +48,11 @@ const carouselItems: CarouselItem[] = [
const HeroSection = () => { const HeroSection = () => {
const carouselRef = useRef<CarouselRef>(null); const carouselRef = useRef<CarouselRef>(null);
const { statistics, baseSetting } = useAppConfig(); const { statistics, baseSetting } = useAppConfig();
const platformStats: PlatformStat[] = [ const platformStats: PlatformStat[] = [
{ icon: <TeamOutlined />, value: "50,000+", label: "注册学员" }, { icon: <TeamOutlined />, value: statistics.staffs.toString(), label: "注册学员" },
{ icon: <BookOutlined />, value: "1,000+", label: "精品课程" }, { icon: <StarOutlined />, value: statistics.courses.toString(), label: "精品课程" },
// { icon: <StarOutlined />, value: '98%', label: '好评度' }, { icon: <BookOutlined />, value: statistics.lectures.toString(), label: '课程章节' },
{ icon: <EyeOutlined />, value: "4552", label: "观看次数" }, { icon: <EyeOutlined />, value: statistics.reads.toString(), label: "观看次数" },
]; ];
const handlePrev = useCallback(() => { const handlePrev = useCallback(() => {
carouselRef.current?.prev(); carouselRef.current?.prev();
@ -119,8 +118,8 @@ const HeroSection = () => {
</div> </div>
{/* Stats Container */} {/* Stats Container */}
<div className="absolute -bottom-24 left-1/2 -translate-x-1/2 w-1/2 max-w-6xl px-4"> <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-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="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) => ( {platformStats.map((stat, index) => (
<div <div
key={index} key={index}

9
apps/web/src/app/main/layout/MainHeader.tsx
View File

@ -2,7 +2,7 @@ import { useState } from "react";
import { Input, Layout, Avatar, Button, Dropdown } from "antd"; import { Input, Layout, Avatar, Button, Dropdown } from "antd";
import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons"; import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider"; 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 { UserMenu } from "./UserMenu/UserMenu";
import { NavigationMenu } from "./NavigationMenu"; import { NavigationMenu } from "./NavigationMenu";
@ -12,6 +12,7 @@ export function MainHeader() {
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
const { isAuthenticated, user } = useAuth(); const { isAuthenticated, user } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams,setSearchParams] = useSearchParams();
return ( return (
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30"> <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)} onChange={(e) => setSearchValue(e.target.value)}
onPressEnter={(e) => { onPressEnter={(e) => {
//console.log(e) //console.log(e)
setSearchValue(""); //setSearchValue("");
setSearchParams((prev)=>{
if(searchParams.get("category")) prev.delete("category")
return prev
})
navigate( navigate(
`/courses/?searchValue=${searchValue}` `/courses/?searchValue=${searchValue}`
); );

1
packages/common/src/models/post.ts
View File

@ -79,4 +79,5 @@ export type CourseDto = Course & {
sections?: SectionDto[]; sections?: SectionDto[];
terms: Term[]; terms: Term[];
lectureCount?: number; lectureCount?: number;
depts:Department[]
}; };