Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
2c75d516db
|
|
@ -46,12 +46,21 @@ export default function BaseSettingPage() {
|
|||
}
|
||||
async function onSubmit(values: BaseSetting) {
|
||||
setLoading(true);
|
||||
const appConfig = values?.appConfig || {};
|
||||
try {
|
||||
await update.mutateAsync({
|
||||
where: {
|
||||
slug: AppConfigSlug.BASE_SETTING,
|
||||
},
|
||||
data: { meta: { ...baseSetting, ...values } },
|
||||
data: {
|
||||
meta: {
|
||||
...baseSetting,
|
||||
appConfig: {
|
||||
...baseSetting.appConfig,
|
||||
...appConfig,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
setIsFormChanged(false);
|
||||
message.success("已保存");
|
||||
|
|
|
|||
|
|
@ -1,47 +1,88 @@
|
|||
import { Card, Rate, Tag } from 'antd';
|
||||
import { Course } from '../mockData';
|
||||
import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { CourseDto } from '@nice/common';
|
||||
import { Card, Rate, Tag, Typography, Button } from "antd";
|
||||
import { Course } from "../mockData";
|
||||
import {
|
||||
UserOutlined,
|
||||
ClockCircleOutlined,
|
||||
PlayCircleOutlined,
|
||||
TeamOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { CourseDto, TaxonomySlug } 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
|
||||
onClick={() => handleClick(course)}
|
||||
key={course.id}
|
||||
hoverable
|
||||
className="w-full h-full transition-all duration-300 hover:shadow-lg"
|
||||
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={
|
||||
<img
|
||||
alt={course.title}
|
||||
src={course?.meta?.thumbnail}
|
||||
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>
|
||||
}>
|
||||
<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"
|
||||
}
|
||||
>
|
||||
<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>
|
||||
className="px-3 py-1 rounded-full border-0">
|
||||
{course.terms?.[1].name}
|
||||
</Tag>
|
||||
</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>
|
||||
<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>
|
||||
<div className="flex items-center space-x-1">
|
||||
<ClockCircleOutlined className="text-gray-400" />
|
||||
<span>{course.duration}</span>
|
||||
<span className="text-xs font-medium text-gray-500">
|
||||
观看次数{course?.meta?.views}次
|
||||
</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 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>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,66 @@
|
|||
import { Pagination, Empty } from 'antd';
|
||||
import { Course } from '../mockData';
|
||||
import CourseCard from './CourseCard';
|
||||
import {CourseDto} from '@nice/common'
|
||||
import { Pagination, Empty } from "antd";
|
||||
import CourseCard from "./CourseCard";
|
||||
import { CourseDto, Prisma } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import { DefaultArgs } from "@prisma/client/runtime/library";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
interface CourseListProps {
|
||||
courses: CourseDto[];
|
||||
total: number;
|
||||
pageSize: number;
|
||||
currentPage: number;
|
||||
onPageChange: (page: number) => void;
|
||||
params?: {
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
where?: Prisma.PostWhereInput;
|
||||
select?: Prisma.PostSelect<DefaultArgs>;
|
||||
};
|
||||
}
|
||||
interface CoursesPagnationProps {
|
||||
data: {
|
||||
items: CourseDto[];
|
||||
totalPages: number;
|
||||
};
|
||||
isLoading: boolean;
|
||||
}
|
||||
export default function CourseList({ params }: CourseListProps) {
|
||||
const [currentPage, setCurrentPage] = useState<number>(params?.page || 1);
|
||||
const { data, isLoading }: CoursesPagnationProps =
|
||||
api.post.findManyWithPagination.useQuery({
|
||||
...params,
|
||||
page: currentPage,
|
||||
});
|
||||
const totalPages = useMemo(() => {
|
||||
if (data && !isLoading) {
|
||||
return data?.totalPages;
|
||||
}
|
||||
return 1;
|
||||
}, [data, isLoading]);
|
||||
|
||||
export default function CourseList({
|
||||
courses,
|
||||
total,
|
||||
pageSize,
|
||||
currentPage,
|
||||
onPageChange,
|
||||
}: CourseListProps) {
|
||||
const courses = useMemo(() => {
|
||||
if (data && !isLoading) {
|
||||
return data?.items;
|
||||
}
|
||||
return [];
|
||||
}, [data, isLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(params?.page || 1);
|
||||
}, [params?.page]);
|
||||
function onPageChange(page: number, pageSize: number) {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{courses.length > 0 ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{courses.map(course => (
|
||||
{courses.map((course) => (
|
||||
<CourseCard key={course.id} course={course} />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-center mt-8">
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
total={totalPages}
|
||||
pageSize={params?.pageSize}
|
||||
onChange={onPageChange}
|
||||
showSizeChanger={false}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { Checkbox, Divider, Radio, Space , Spin} from 'antd';
|
||||
import { categories, levels } from '../mockData';
|
||||
import { TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { Checkbox, Divider, Radio, Space, Spin } from "antd";
|
||||
import { categories, levels } from "../mockData";
|
||||
import { TaxonomySlug, TermDto } from "@nice/common";
|
||||
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { api } from '@nice/client';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { api } from "@nice/client";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import TermTree from "@web/src/components/models/term/term-tree";
|
||||
import TermSelect from "@web/src/components/models/term/term-select";
|
||||
|
||||
interface FilterSectionProps {
|
||||
selectedCategory: string;
|
||||
|
|
@ -19,29 +21,31 @@ interface GetTaxonomyProps {
|
|||
}
|
||||
|
||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||
const {data,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({
|
||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
||||
api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
//TaxonomySlug.CATEGORY
|
||||
slug:type
|
||||
}
|
||||
slug: type,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
children :true
|
||||
children: true,
|
||||
},
|
||||
take: 10, // 只取前10个
|
||||
orderBy: {
|
||||
createdAt: 'desc', // 按创建时间降序排列
|
||||
createdAt: "desc", // 按创建时间降序排列
|
||||
},
|
||||
})
|
||||
});
|
||||
const categories = useMemo(() => {
|
||||
const allCategories = isLoading ? [] : data?.map((course) => course.name);
|
||||
const allCategories = isLoading
|
||||
? []
|
||||
: data?.map((course) => course.name);
|
||||
return [...Array.from(new Set(allCategories))];
|
||||
}, [data]);
|
||||
return {categories,isLoading}
|
||||
return { categories, isLoading };
|
||||
}
|
||||
|
||||
|
||||
export default function FilterSection({
|
||||
selectedCategory,
|
||||
selectedLevel,
|
||||
|
|
@ -50,69 +54,37 @@ export default function FilterSection({
|
|||
}: FilterSectionProps) {
|
||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
})
|
||||
});
|
||||
const levels: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.LEVEL,
|
||||
})
|
||||
});
|
||||
|
||||
const [searchParams,setSearchParams] = useSearchParams()
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
useEffect(() => {
|
||||
if(searchParams.get('category')) onCategoryChange(searchParams.get('category'))
|
||||
},[searchParams.get('category')])
|
||||
if (searchParams.get("category"))
|
||||
onCategoryChange(searchParams.get("category"));
|
||||
}, [searchParams.get("category")]);
|
||||
|
||||
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">课程分类</h3>
|
||||
<Radio.Group
|
||||
value={selectedCategory}
|
||||
onChange={(e) => onCategoryChange(e.target.value)}
|
||||
className="flex flex-col space-y-3"
|
||||
>
|
||||
{
|
||||
gateGory.isLoading?
|
||||
(<Spin/>)
|
||||
:
|
||||
(
|
||||
{taxonomies?.map((tax) => {
|
||||
return (
|
||||
<>
|
||||
<Radio value="" >全部课程</Radio>
|
||||
{gateGory.categories.map(category => (
|
||||
<Radio key={category} value={category}>
|
||||
{category}
|
||||
</Radio>
|
||||
))}
|
||||
</>)
|
||||
}
|
||||
|
||||
</Radio.Group>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">
|
||||
{tax?.name}
|
||||
</h3>
|
||||
<TermSelect
|
||||
multiple
|
||||
taxonomyId={tax?.id}></TermSelect>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
|
||||
<Divider className="my-6" />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">难度等级</h3>
|
||||
<Radio.Group
|
||||
value={selectedLevel}
|
||||
onChange={(e) => onLevelChange(e.target.value)}
|
||||
className="flex flex-col space-y-3"
|
||||
>
|
||||
{
|
||||
levels.isLoading ?
|
||||
(<Spin/>)
|
||||
:
|
||||
(
|
||||
<>
|
||||
<Radio value="">全部难度</Radio>
|
||||
{levels.categories.map(level => (
|
||||
<Radio key={level} value={level}>
|
||||
{level}
|
||||
</Radio>
|
||||
))}
|
||||
</>)
|
||||
}
|
||||
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { CourseList } from "@web/src/components/models/course/list/course-list";
|
||||
import { Button } from "@web/src/components/common/element/Button";
|
||||
import { api } from "@nice/client";
|
||||
import { useState } from "react";
|
||||
import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
|
||||
export default function InstructorCoursesPage() {
|
||||
const navigate = useNavigate();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const { user } = useAuth();
|
||||
|
||||
const { data: paginationRes, refetch } =
|
||||
api.post.findManyWithPagination.useQuery({
|
||||
page: currentPage,
|
||||
pageSize: 8,
|
||||
where: {
|
||||
instructors: {
|
||||
some: {
|
||||
instructorId: user?.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 px-4 py-8 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<h1 className="text-3xl font-semibold text-slate-800">
|
||||
我教授的课程
|
||||
</h1>
|
||||
<Button
|
||||
onClick={() => navigate("/course/editor")}
|
||||
variant="primary"
|
||||
leftIcon={<PlusIcon className="w-5 h-5" />}>
|
||||
创建课程
|
||||
</Button>
|
||||
</div>
|
||||
<CourseList
|
||||
totalPages={paginationRes?.totalPages}
|
||||
onPageChange={handlePageChange}
|
||||
currentPage={currentPage}
|
||||
courses={paginationRes?.items as any}
|
||||
renderItem={(course) => (
|
||||
<CourseCard
|
||||
onClick={() => {
|
||||
navigate(`/course/${course.id}/editor`, {
|
||||
replace: true,
|
||||
});
|
||||
}}
|
||||
course={course}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,127 +3,33 @@ import { mockCourses } from "./mockData";
|
|||
import FilterSection from "./components/FilterSection";
|
||||
import CourseList from "./components/CourseList";
|
||||
import { api } from "@nice/client";
|
||||
import { courseDetailSelect, CourseDto, LectureType, PostType } from "@nice/common";
|
||||
import {
|
||||
courseDetailSelect,
|
||||
CourseDto,
|
||||
LectureType,
|
||||
PostType,
|
||||
} 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
|
||||
if(!searchParams.get('searchValue')){
|
||||
console.log('no category')
|
||||
const {data,isLoading} = api.post.findManyWithPagination.useQuery({
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
terms:isAll?{}:{
|
||||
some: {
|
||||
OR : [
|
||||
selectedCategory?{name:selectedCategory}:{},
|
||||
selectedLevel?{name:selectedLevel}:{}
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
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,
|
||||
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>
|
||||
<div>{searchValue}</div>
|
||||
<CourseList
|
||||
courses={paginatedCourses}
|
||||
total={filteredCourses.length}
|
||||
pageSize={pageSize}
|
||||
currentPage={currentPage}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
params={{
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
}}></CourseList>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
import { CourseList } from "@web/src/components/models/course/list/course-list";
|
||||
import { api } from "@nice/client";
|
||||
import { useState } from "react";
|
||||
import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
|
||||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
|
||||
export default function StudentCoursesPage() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const { user } = useAuth();
|
||||
|
||||
const { data: paginationRes, refetch } =
|
||||
api.post.findManyWithPagination.useQuery({
|
||||
page: currentPage,
|
||||
pageSize: 8,
|
||||
where: {
|
||||
enrollments: {
|
||||
some: {
|
||||
studentId: user?.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
refetch();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 px-4 py-8 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-semibold text-slate-800 mb-4">
|
||||
我参加的课程
|
||||
</h1>
|
||||
</div>
|
||||
<CourseList
|
||||
totalPages={paginationRes?.totalPages}
|
||||
onPageChange={handlePageChange}
|
||||
currentPage={currentPage}
|
||||
courses={paginationRes?.items as any}
|
||||
renderItem={(course) => (
|
||||
<CourseCard course={course}></CourseCard>
|
||||
)}></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;
|
||||
|
||||
|
|
@ -69,6 +69,8 @@ const CategorySection = () => {
|
|||
const [displayedCategories,setDisplayedCategories] = useState<TermDto[]>([])
|
||||
useEffect(() => {
|
||||
console.log(courseCategoriesData);
|
||||
// 如果 showAll 为 true，则显示所有分类数据，
|
||||
// 如果 showAll 为 false，则只显示前 8 个分类数据，
|
||||
if(!isLoading){
|
||||
if(showAll){
|
||||
setDisplayedCategories(courseCategoriesData)
|
||||
|
|
@ -84,9 +86,6 @@ const CategorySection = () => {
|
|||
// description: term.description
|
||||
// })) || [];
|
||||
// },[data])
|
||||
|
||||
|
||||
|
||||
const handleMouseEnter = useCallback((index: number) => {
|
||||
setHoveredIndex(index);
|
||||
}, []);
|
||||
|
|
@ -127,6 +126,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,116 +1,88 @@
|
|||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Card, Typography, Tag, Progress, Spin } from 'antd';
|
||||
import React, { useState, useMemo, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button, Card, Typography, Tag, Spin, Empty } from "antd";
|
||||
import {
|
||||
PlayCircleOutlined,
|
||||
UserOutlined,
|
||||
ClockCircleOutlined,
|
||||
TeamOutlined,
|
||||
StarOutlined,
|
||||
ArrowRightOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { api } from '@nice/client';
|
||||
// const {courseId} = useParams();
|
||||
} from "@ant-design/icons";
|
||||
import { CourseDto, TaxonomySlug, TermDto } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import CourseCard from "../../courses/components/CourseCard";
|
||||
interface GetTaxonomyProps {
|
||||
categories: string[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||
const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
|
||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
||||
api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
//TaxonomySlug.CATEGORY
|
||||
slug: type
|
||||
}
|
||||
slug: type,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
children: true
|
||||
children: true,
|
||||
},
|
||||
take: 10, // 只取前10个
|
||||
orderBy: {
|
||||
createdAt: 'desc', // 按创建时间降序排列
|
||||
},
|
||||
})
|
||||
orderBy: {},
|
||||
});
|
||||
const categories = useMemo(() => {
|
||||
const allCategories = isLoading ? [] : data?.map((course) => course.name);
|
||||
const allCategories = isLoading
|
||||
? []
|
||||
: data?.map((course) => course.name);
|
||||
return [...Array.from(new Set(allCategories))];
|
||||
}, [data]);
|
||||
return { categories, isLoading }
|
||||
return { categories, isLoading };
|
||||
}
|
||||
// 不同分类跳转
|
||||
function useFetchCoursesByCategory(category: string) {
|
||||
const isAll = category === "全部";
|
||||
const { data, isLoading }: { data: CourseDto[]; isLoading: boolean } =
|
||||
api.post.findMany.useQuery({
|
||||
where: isAll
|
||||
? {}
|
||||
: {
|
||||
terms: {
|
||||
some: {
|
||||
name: category,
|
||||
},
|
||||
},
|
||||
},
|
||||
take: 8,
|
||||
include: {
|
||||
terms: true,
|
||||
depts: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
return { data, isLoading };
|
||||
}
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface Course {
|
||||
id: number;
|
||||
title: string;
|
||||
instructor: string;
|
||||
students: number;
|
||||
rating: number;
|
||||
level: string;
|
||||
duration: string;
|
||||
category: string;
|
||||
progress: number;
|
||||
thumbnail: string;
|
||||
}
|
||||
interface CoursesSectionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
courses: Course[];
|
||||
isLoading:boolean
|
||||
initialVisibleCoursesCount?: number;
|
||||
}
|
||||
|
||||
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
courses,
|
||||
isLoading,
|
||||
initialVisibleCoursesCount = 8,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('全部');
|
||||
const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>("全部");
|
||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
})
|
||||
// const { data } = api.post.findMany.useQuery({
|
||||
// where: {}, // 必选参数
|
||||
// include: { // 关联查询
|
||||
// instructors: true
|
||||
// },
|
||||
// orderBy: { // 排序规则
|
||||
// createdAt: 'desc'
|
||||
// },
|
||||
// take: 8
|
||||
// })
|
||||
// useEffect(() => {
|
||||
// // 添加空值保护
|
||||
// if (data && data.length > 0) {
|
||||
// console.log('有效数据:', data)
|
||||
// // 执行后续操作
|
||||
// } else {
|
||||
// console.log('无数据或加载中')
|
||||
// }
|
||||
// }, [data])
|
||||
// const formatted = data?.map(course => ({
|
||||
// id: course.id,
|
||||
// title: course.title
|
||||
// }));
|
||||
const handleClick = (course: Course) => {
|
||||
navigate(`/course?courseId=${course.id}/detail`);
|
||||
}
|
||||
|
||||
});
|
||||
const { data, isLoading: isDataLoading } =
|
||||
useFetchCoursesByCategory(selectedCategory);
|
||||
const filteredCourses = useMemo(() => {
|
||||
return selectedCategory === '全部'
|
||||
? courses
|
||||
: courses.filter((course) => course.category === selectedCategory);
|
||||
}, [selectedCategory, courses]);
|
||||
|
||||
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses);
|
||||
return selectedCategory === "全部"
|
||||
? data
|
||||
: data?.filter((c) =>
|
||||
c.terms.some((t) => t.name === selectedCategory)
|
||||
);
|
||||
}, [selectedCategory, data]);
|
||||
const displayedCourses = isDataLoading ? [] : filteredCourses;
|
||||
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">
|
||||
|
|
@ -118,158 +90,89 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
<div>
|
||||
<Title
|
||||
level={2}
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
||||
>
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</Title>
|
||||
<Text type="secondary" className="text-xl font-light text-gray-600">
|
||||
<Text
|
||||
type="secondary"
|
||||
className="text-xl font-light text-gray-600">
|
||||
{description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-12 flex flex-wrap gap-4">
|
||||
{gateGory.isLoading ? <Spin className='m-3' /> :
|
||||
(
|
||||
{gateGory.isLoading ? (
|
||||
<Spin className="m-3" />
|
||||
) : (
|
||||
<>
|
||||
<Tag
|
||||
color={selectedCategory === "全部" ? 'blue' : 'default'}
|
||||
color={
|
||||
selectedCategory === "全部"
|
||||
? "blue"
|
||||
: "default"
|
||||
}
|
||||
onClick={() => setSelectedCategory("全部")}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === "全部"
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>全部</Tag>
|
||||
{
|
||||
gateGory.categories.map((category) => (
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${
|
||||
selectedCategory === "全部"
|
||||
? "bg-blue-600 text-white shadow-lg"
|
||||
: "bg-white text-gray-600 hover:bg-gray-100"
|
||||
}`}>
|
||||
全部
|
||||
</Tag>
|
||||
{gateGory.categories.map((category) => (
|
||||
<Tag
|
||||
key={category}
|
||||
color={selectedCategory === category ? 'blue' : 'default'}
|
||||
color={
|
||||
selectedCategory === category
|
||||
? "blue"
|
||||
: "default"
|
||||
}
|
||||
onClick={() => {
|
||||
setSelectedCategory(category)
|
||||
console.log(category)
|
||||
setSelectedCategory(category);
|
||||
}}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
|
||||
>
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${
|
||||
selectedCategory === category
|
||||
? "bg-blue-600 text-white shadow-lg"
|
||||
: "bg-white text-gray-600 hover:bg-gray-100"
|
||||
}`}>
|
||||
{category}
|
||||
</Tag>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{displayedCourses.map((course) => (
|
||||
<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.thumbnail})` }}
|
||||
{displayedCourses.length === 0 ? (
|
||||
<div className="col-span-full">
|
||||
<Empty
|
||||
description="暂无课程"
|
||||
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
||||
/>
|
||||
<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" />
|
||||
{course.progress > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/30">
|
||||
{/* <Progress
|
||||
percent={course.progress}
|
||||
showInfo={false}
|
||||
strokeColor={{
|
||||
from: '#3b82f6',
|
||||
to: '#60a5fa',
|
||||
}}
|
||||
className="m-0"
|
||||
/> */}
|
||||
</div>
|
||||
) : (
|
||||
displayedCourses?.map((course) => (
|
||||
<CourseCard course={course}></CourseCard>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<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.category}
|
||||
</Tag>
|
||||
<Tag
|
||||
color={
|
||||
course.level === '入门'
|
||||
? 'green'
|
||||
: course.level === '中级'
|
||||
? 'blue'
|
||||
: 'purple'
|
||||
}
|
||||
className="px-3 py-1 rounded-full border-0"
|
||||
>
|
||||
{course.level}
|
||||
</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">
|
||||
{course.instructor}
|
||||
</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.progress}次</span>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredCourses?.length >= visibleCourses && (
|
||||
<div className='flex items-center gap-4 justify-between mt-12'>
|
||||
<div className='h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent'></div>
|
||||
{
|
||||
<div className="flex items-center gap-4 justify-between mt-12">
|
||||
<div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => navigate('/courses')}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300"
|
||||
>
|
||||
onClick={() => navigate("/courses")}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
|
||||
查看更多
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoursesSection;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useRef, useCallback } from "react";
|
||||
import React, { useRef, useCallback, useEffect } from "react";
|
||||
import { Button, Carousel, Typography } from "antd";
|
||||
import {
|
||||
TeamOutlined,
|
||||
|
|
@ -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();
|
||||
|
|
@ -62,7 +61,11 @@ const HeroSection = () => {
|
|||
const handleNext = useCallback(() => {
|
||||
carouselRef.current?.next();
|
||||
}, []);
|
||||
//const {slides:carouselItems} = useAppConfig()
|
||||
const { slides } = useAppConfig()
|
||||
useEffect(() => {
|
||||
//slides.push(('https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50'))
|
||||
//console.log(slides)
|
||||
}, [])
|
||||
return (
|
||||
<section className="relative ">
|
||||
<div className="group">
|
||||
|
|
@ -74,20 +77,20 @@ const HeroSection = () => {
|
|||
dots={{
|
||||
className: "carousel-dots !bottom-32 !z-20",
|
||||
}}>
|
||||
{Array.isArray(carouselItems) ? (
|
||||
carouselItems.map((item, index) => (
|
||||
{Array.isArray(slides)?
|
||||
(slides.map((item, index) => (
|
||||
<div key={index} className="relative h-[600px]">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
|
||||
style={{
|
||||
//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
|
||||
backgroundImage: `url(${item.image})`,
|
||||
backgroundImage: `url(${item})`,
|
||||
backfaceVisibility: "hidden",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
{/* <div
|
||||
className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
|
||||
/>
|
||||
/> */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
|
||||
|
||||
{/* Content Container */}
|
||||
|
|
@ -115,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}
|
||||
|
|
|
|||
|
|
@ -1,161 +1,18 @@
|
|||
import HeroSection from './components/HeroSection';
|
||||
import CategorySection from './components/CategorySection';
|
||||
import CoursesSection from './components/CoursesSection';
|
||||
import FeaturedTeachersSection from './components/FeaturedTeachersSection';
|
||||
import { api } from '@nice/client';
|
||||
import { useEffect, useState } from 'react';
|
||||
interface Courses{
|
||||
id: number;
|
||||
title: string;
|
||||
instructor: string;
|
||||
students: number;
|
||||
rating: number;
|
||||
level: string;
|
||||
duration: string;
|
||||
category: string;
|
||||
progress: number;
|
||||
thumbnail: string;
|
||||
}
|
||||
const HomePage = () => {
|
||||
// const mockCourses = [
|
||||
// {
|
||||
// id: 1,
|
||||
// title: 'Python 零基础入门',
|
||||
// instructor: '张教授',
|
||||
// students: 12000,
|
||||
// rating: 4.8,
|
||||
// level: '入门',
|
||||
// duration: '36小时',
|
||||
// category: '编程语言',
|
||||
// progress: 16,
|
||||
// thumbnail: '/images/course1.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// title: '数据结构与算法',
|
||||
// instructor: '李教授',
|
||||
// students: 8500,
|
||||
// rating: 4.9,
|
||||
// level: '进阶',
|
||||
// duration: '48小时',
|
||||
// category: '计算机基础',
|
||||
// progress: 35,
|
||||
// thumbnail: '/images/course2.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// title: '前端开发实战',
|
||||
// instructor: '王教授',
|
||||
// students: 10000,
|
||||
// rating: 4.7,
|
||||
// level: '中级',
|
||||
// duration: '42小时',
|
||||
// category: '前端开发',
|
||||
// progress: 68,
|
||||
// thumbnail: '/images/course3.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// title: 'Java企业级开发',
|
||||
// instructor: '刘教授',
|
||||
// students: 9500,
|
||||
// rating: 4.6,
|
||||
// level: '高级',
|
||||
// duration: '56小时',
|
||||
// category: '编程语言',
|
||||
// progress: 15,
|
||||
// thumbnail: '/images/course4.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// title: '人工智能基础',
|
||||
// instructor: '陈教授',
|
||||
// students: 11000,
|
||||
// rating: 4.9,
|
||||
// level: '中级',
|
||||
// duration: '45小时',
|
||||
// category: '人工智能',
|
||||
// progress: 20,
|
||||
// thumbnail: '/images/course5.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// title: '大数据分析',
|
||||
// instructor: '赵教授',
|
||||
// students: 8000,
|
||||
// rating: 4.8,
|
||||
// level: '进阶',
|
||||
// duration: '50小时',
|
||||
// category: '数据科学',
|
||||
// progress: 45,
|
||||
// thumbnail: '/images/course6.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 7,
|
||||
// title: '云计算实践',
|
||||
// instructor: '孙教授',
|
||||
// students: 7500,
|
||||
// rating: 4.7,
|
||||
// level: '高级',
|
||||
// duration: '48小时',
|
||||
// category: '云计算',
|
||||
// progress: 15,
|
||||
// thumbnail: '/images/course7.jpg',
|
||||
// },
|
||||
// {
|
||||
// id: 8,
|
||||
// title: '移动应用开发',
|
||||
// instructor: '周教授',
|
||||
// students: 9000,
|
||||
// rating: 4.8,
|
||||
// level: '中级',
|
||||
// duration: '40小时',
|
||||
// category: '移动开发',
|
||||
// progress: 70,
|
||||
// thumbnail: '/images/course8.jpg',
|
||||
// },
|
||||
// ];
|
||||
const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({
|
||||
where: {},
|
||||
include: {
|
||||
instructors: true,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'desc' // 按创建时间降序排列
|
||||
},
|
||||
take: 8 // 只获取前8个课程
|
||||
});
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
console.log('mockCourses data:', data);
|
||||
}
|
||||
}, [data]);
|
||||
import HeroSection from "./components/HeroSection";
|
||||
import CategorySection from "./components/CategorySection";
|
||||
import CoursesSection from "./components/CoursesSection";
|
||||
|
||||
|
||||
const HomePage = () => {
|
||||
|
||||
// 数据处理逻辑
|
||||
// 修正依赖数组
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<HeroSection />
|
||||
<CoursesSection
|
||||
title="推荐课程"
|
||||
description="最受欢迎的精品课程，助你快速成长"
|
||||
courses={data}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
{/* {formattedCourses.map((course)=>{
|
||||
return (
|
||||
<>
|
||||
<span>course.title</span>
|
||||
</>
|
||||
)
|
||||
})} */}
|
||||
{/* <CoursesSection
|
||||
title="热门课程"
|
||||
description="最受欢迎的精品课程，助你快速成长"
|
||||
courses={mockCourses}
|
||||
/> */}
|
||||
<CategorySection />
|
||||
{/* <FeaturedTeachersSection /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
import { useState } from "react";
|
||||
import { useContext, 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";
|
||||
|
||||
import { useMainContext } from "./MainProvider";
|
||||
const { Header } = Layout;
|
||||
|
||||
export function MainHeader() {
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const { isAuthenticated, user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { searchValue, setSearchValue } = useMainContext();
|
||||
return (
|
||||
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
|
||||
<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
|
||||
|
|
@ -36,12 +35,17 @@ export function MainHeader() {
|
|||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
onPressEnter={(e) => {
|
||||
//console.log(e)
|
||||
setSearchValue("");
|
||||
navigate(
|
||||
`/courses/?searchValue=${searchValue}`
|
||||
);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
if (
|
||||
!window.location.pathname.startsWith(
|
||||
"/courses/"
|
||||
)
|
||||
) {
|
||||
navigate(`/courses/`);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
import { Layout } from 'antd';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { MainHeader } from './MainHeader';
|
||||
import { MainFooter } from './MainFooter';
|
||||
import { Layout } from "antd";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { MainHeader } from "./MainHeader";
|
||||
import { MainFooter } from "./MainFooter";
|
||||
import { MainProvider } from "./MainProvider";
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
export function MainLayout() {
|
||||
return (
|
||||
<MainProvider>
|
||||
<Layout className="min-h-screen">
|
||||
|
||||
<MainHeader />
|
||||
<Content className="mt-16 bg-gray-50">
|
||||
<Outlet />
|
||||
</Content>
|
||||
<MainFooter />
|
||||
</Layout>
|
||||
</MainProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React, { createContext, ReactNode, useContext, useState } from "react";
|
||||
|
||||
interface MainContextType {
|
||||
searchValue?: string;
|
||||
setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
|
||||
}
|
||||
|
||||
const MainContext = createContext<MainContextType | null>(null);
|
||||
interface MainProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function MainProvider({ children }: MainProviderProps) {
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
return (
|
||||
<MainContext.Provider
|
||||
value={{
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
}}>
|
||||
{children}
|
||||
</MainContext.Provider>
|
||||
);
|
||||
}
|
||||
export const useMainContext = () => {
|
||||
const context = useContext(MainContext);
|
||||
if (!context) {
|
||||
throw new Error("useMainContext must be used within MainProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
|
@ -23,7 +23,7 @@ export default function TermSelect({
|
|||
value,
|
||||
onChange,
|
||||
className,
|
||||
placeholder = "选择单位",
|
||||
placeholder = "选择分类",
|
||||
multiple = false,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,199 @@
|
|||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { Tree } from "antd";
|
||||
import type { DataNode, TreeProps } from "antd/es/tree";
|
||||
import { getUniqueItems } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
|
||||
interface TermData {
|
||||
value?: string;
|
||||
children?: TermData[];
|
||||
key?: string;
|
||||
hasChildren?: boolean;
|
||||
isLeaf?: boolean;
|
||||
pId?: string;
|
||||
title?: React.ReactNode;
|
||||
data?: any;
|
||||
order?: string;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
interface TermTreeProps {
|
||||
defaultValue?: string | string[];
|
||||
value?: string | string[];
|
||||
onChange?: (value: string | string[]) => void;
|
||||
multiple?: boolean;
|
||||
taxonomyId?: string;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
domainId?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const TermTree: React.FC<TermTreeProps> = ({
|
||||
defaultValue,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
multiple = false,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
disabled = false,
|
||||
style,
|
||||
}) => {
|
||||
const utils = api.useUtils();
|
||||
const [treeData, setTreeData] = useState<TermData[]>([]);
|
||||
|
||||
const processTermData = (terms: TermData[]): TermData[] => {
|
||||
return terms.map((term) => ({
|
||||
...term,
|
||||
key: term.key || term.id || "",
|
||||
title: term.title || term.value,
|
||||
children: term.children
|
||||
? processTermData(term.children)
|
||||
: undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const fetchParentTerms = useCallback(
|
||||
async (termIds: string | string[], taxonomyId?: string) => {
|
||||
const idsArray = Array.isArray(termIds)
|
||||
? termIds
|
||||
: [termIds].filter(Boolean);
|
||||
try {
|
||||
const result = await utils.term.getParentSimpleTree.fetch({
|
||||
termIds: idsArray,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
});
|
||||
return processTermData(result);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Error fetching parent terms for termIds",
|
||||
idsArray,
|
||||
":",
|
||||
error
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
[utils, domainId]
|
||||
);
|
||||
|
||||
const fetchTerms = useCallback(async () => {
|
||||
try {
|
||||
const rootTerms = await utils.term.getChildSimpleTree.fetch({
|
||||
taxonomyId,
|
||||
domainId,
|
||||
});
|
||||
let combinedTerms = processTermData(rootTerms);
|
||||
if (defaultValue) {
|
||||
const defaultTerms = await fetchParentTerms(
|
||||
defaultValue,
|
||||
taxonomyId
|
||||
);
|
||||
combinedTerms = getUniqueItems(
|
||||
[...treeData, ...combinedTerms, ...defaultTerms],
|
||||
"key"
|
||||
);
|
||||
}
|
||||
if (value) {
|
||||
const valueTerms = await fetchParentTerms(value, taxonomyId);
|
||||
combinedTerms = getUniqueItems(
|
||||
[...treeData, ...combinedTerms, ...valueTerms],
|
||||
"key"
|
||||
);
|
||||
}
|
||||
|
||||
setTreeData(combinedTerms);
|
||||
} catch (error) {
|
||||
console.error("Error fetching terms:", error);
|
||||
}
|
||||
}, [
|
||||
defaultValue,
|
||||
value,
|
||||
taxonomyId,
|
||||
utils,
|
||||
fetchParentTerms,
|
||||
domainId,
|
||||
treeData,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTerms();
|
||||
}, [fetchTerms]);
|
||||
|
||||
const onLoadData = async ({ key }: any) => {
|
||||
try {
|
||||
const result = await utils.term.getChildSimpleTree.fetch({
|
||||
termIds: [key],
|
||||
taxonomyId,
|
||||
domainId,
|
||||
});
|
||||
const processedResult = processTermData(result);
|
||||
const newItems = getUniqueItems(
|
||||
[...treeData, ...processedResult],
|
||||
"key"
|
||||
);
|
||||
setTreeData(newItems);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Error loading data for node with key",
|
||||
key,
|
||||
":",
|
||||
error
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheck: TreeProps["onCheck"] = (checkedKeys, info) => {
|
||||
if (onChange) {
|
||||
if (multiple) {
|
||||
onChange(checkedKeys as string[]);
|
||||
} else {
|
||||
onChange((checkedKeys as string[])[0] || "");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleExpand = async (expandedKeys: React.Key[]) => {
|
||||
try {
|
||||
const allKeyIds = expandedKeys
|
||||
.map((key) => key.toString())
|
||||
.filter(Boolean);
|
||||
const expandedNodes = await utils.term.getChildSimpleTree.fetch({
|
||||
termIds: allKeyIds,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
});
|
||||
const processedNodes = processTermData(expandedNodes);
|
||||
const newItems = getUniqueItems(
|
||||
[...treeData, ...processedNodes],
|
||||
"key"
|
||||
);
|
||||
setTreeData(newItems);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Error expanding nodes with keys",
|
||||
expandedKeys,
|
||||
":",
|
||||
error
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Tree
|
||||
checkable={multiple}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
style={style}
|
||||
treeData={treeData as DataNode[]}
|
||||
checkedKeys={Array.isArray(value) ? value : value ? [value] : []}
|
||||
onCheck={handleCheck}
|
||||
loadData={onLoadData}
|
||||
onExpand={handleExpand}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermTree;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { TreeDataNode } from "@nice/common"
|
||||
import { TreeDataNode } from "@nice/common";
|
||||
import React from "react";
|
||||
export const treeVisitor = (
|
||||
data: TreeDataNode[],
|
||||
key: React.Key,
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ import {
|
|||
import ErrorPage from "../app/error";
|
||||
import WithAuth from "../components/utils/with-auth";
|
||||
import LoginPage from "../app/login";
|
||||
import StudentCoursesPage from "../app/main/courses/student/page";
|
||||
import InstructorCoursesPage from "../app/main/courses/instructor/page";
|
||||
import HomePage from "../app/main/home/page";
|
||||
import { CourseDetailPage } from "../app/main/course/detail/page";
|
||||
import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
|
||||
|
|
@ -41,7 +39,6 @@ export type CustomRouteObject =
|
|||
| CustomIndexRouteObject
|
||||
| CustomNonIndexRouteObject;
|
||||
export const routes: CustomRouteObject[] = [
|
||||
|
||||
{
|
||||
path: "/",
|
||||
errorElement: <ErrorPage />,
|
||||
|
|
@ -66,39 +63,16 @@ export const routes: CustomRouteObject[] = [
|
|||
path: "courses",
|
||||
element: <CoursesPage></CoursesPage>,
|
||||
},
|
||||
{
|
||||
path: "my-courses",
|
||||
},
|
||||
|
||||
{
|
||||
path: "profiles",
|
||||
},
|
||||
{
|
||||
path: "courses",
|
||||
children: [
|
||||
{
|
||||
path: "student",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<StudentCoursesPage />
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "instructor",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<InstructorCoursesPage />
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 课程预览页面
|
||||
{
|
||||
path: "coursePreview/:id?",
|
||||
element:<CoursePreview></CoursePreview>
|
||||
}
|
||||
|
||||
element: <CoursePreview></CoursePreview>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -106,20 +80,27 @@ export const routes: CustomRouteObject[] = [
|
|||
children: [
|
||||
{
|
||||
path: ":id?/editor",
|
||||
element: <CourseEditorLayout></CourseEditorLayout>,
|
||||
element: (
|
||||
<WithAuth>
|
||||
<CourseEditorLayout></CourseEditorLayout>
|
||||
</WithAuth>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <CourseBasicForm></CourseBasicForm>,
|
||||
element: (
|
||||
<WithAuth>
|
||||
<CourseBasicForm></CourseBasicForm>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// path: "goal",
|
||||
// element: <CourseGoalForm></CourseGoalForm>,
|
||||
// },
|
||||
|
||||
{
|
||||
path: "content",
|
||||
element: (
|
||||
<WithAuth>
|
||||
<CourseContentForm></CourseContentForm>
|
||||
</WithAuth>
|
||||
),
|
||||
},
|
||||
// {
|
||||
|
|
@ -146,5 +127,4 @@ export const routes: CustomRouteObject[] = [
|
|||
},
|
||||
];
|
||||
|
||||
|
||||
export const router = createBrowserRouter(routes);
|
||||
|
|
|
|||
|
|
@ -79,4 +79,5 @@ export type CourseDto = Course & {
|
|||
sections?: SectionDto[];
|
||||
terms: Term[];
|
||||
lectureCount?: number;
|
||||
depts:Department[]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue