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:
wfc 2025-02-25 16:43:43 +08:00
parent 1f9e749fff c0d2f10d28
commit 2c75d516db
20 changed files with 788 additions and 963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
apps/server/src/models/term/term.service.ts
View File

@ -298,12 +298,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms ...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件 ? {} // 当有全局权限时，不添加任何额外条件
: { : {
// 当无全局权限时，添加域ID过滤 // 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 { domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录 { domainId: domainId }, // 特定域记录
], ],
}), }),
}, },
ancestorId: parentId, ancestorId: parentId,
relDepth: 1, relDepth: 1,
@ -315,29 +315,29 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
}), }),
termIds termIds
? db.term.findMany({ ? db.term.findMany({
where: { where: {
...(termIds && { ...(termIds && {
OR: [
...(validTermIds.length
? [{ id: { in: validTermIds } }]
: []),
],
}),
taxonomyId: taxonomyId,
// 动态权限控制条件
...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 ...(validTermIds.length
{ domainId: domainId }, // 特定域记录 ? [{ id: { in: validTermIds } }]
: []),
], ],
}), }),
}, taxonomyId: taxonomyId,
include: { children: true }, // 动态权限控制条件
orderBy: { order: 'asc' }, ...(hasAnyPerms
}) ? {} // 当有全局权限时，不添加任何额外条件
: {
// 当无全局权限时，添加域ID过滤
OR: [
{ domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录
],
}),
},
include: { children: true },
orderBy: { order: 'asc' },
})
: [], : [],
]); ]);
const children = childrenData const children = childrenData
@ -371,12 +371,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms ...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件 ? {} // 当有全局权限时，不添加任何额外条件
: { : {
// 当无全局权限时，添加域ID过滤 // 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 { domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录 { domainId: domainId }, // 特定域记录
], ],
}), }),
}, },
}, },
include: { include: {
@ -398,12 +398,12 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
...(hasAnyPerms ...(hasAnyPerms
? {} // 当有全局权限时，不添加任何额外条件 ? {} // 当有全局权限时，不添加任何额外条件
: { : {
// 当无全局权限时，添加域ID过滤 // 当无全局权限时，添加域ID过滤
OR: [ OR: [
{ domainId: null }, // 通用记录 { domainId: null }, // 通用记录
{ domainId: domainId }, // 特定域记录 { domainId: domainId }, // 特定域记录
], ],
}), }),
}, },
include: { children: true }, // 包含子节点信息 include: { children: true }, // 包含子节点信息
orderBy: { order: 'asc' }, // 按顺序升序排序 orderBy: { order: 'asc' }, // 按顺序升序排序

11
apps/web/src/app/admin/base-setting/page.tsx
View File

@ -46,12 +46,21 @@ export default function BaseSettingPage() {
} }
async function onSubmit(values: BaseSetting) { async function onSubmit(values: BaseSetting) {
setLoading(true); setLoading(true);
const appConfig = values?.appConfig || {};
try { try {
await update.mutateAsync({ await update.mutateAsync({
where: { where: {
slug: AppConfigSlug.BASE_SETTING, slug: AppConfigSlug.BASE_SETTING,
}, },
data: { meta: { ...baseSetting, ...values } }, data: {
meta: {
...baseSetting,
appConfig: {
...baseSetting.appConfig,
...appConfig,
},
},
},
}); });
setIsFormChanged(false); setIsFormChanged(false);
message.success("已保存"); message.success("已保存");

129
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 {
import { CourseDto } from '@nice/common'; UserOutlined,
ClockCircleOutlined,
PlayCircleOutlined,
TeamOutlined,
} from "@ant-design/icons";
import { CourseDto, TaxonomySlug } 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) {
return ( const navigate = useNavigate();
<Card const handleClick = (course: CourseDto) => {
hoverable navigate(`/course/${course.id}/detail`);
className="w-full h-full transition-all duration-300 hover:shadow-lg" };
cover={ return (
<img <Card
alt={course.title} onClick={() => handleClick(course)}
src={course?.meta?.thumbnail} key={course.id}
className="object-cover w-full h-40" 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="space-y-3"> <div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
<h3 className="text-lg font-semibold line-clamp-2 hover:text-blue-600 transition-colors"> <div
{course.title} className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
</h3> style={{
<p className="text-gray-500 text-sm">{course.subTitle}</p> backgroundImage: `url(${course?.meta?.thumbnail})`,
<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 className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
</div> <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="flex items-center justify-between text-sm text-gray-500"> </div>
<div className="flex items-center space-x-1"> }>
<UserOutlined className="text-gray-400" /> <div className="px-4">
<span>{course.enrollments?.length} 人在学</span> <div className="flex gap-2 mb-4">
</div> <Tag
<div className="flex items-center space-x-1"> color="blue"
<ClockCircleOutlined className="text-gray-400" /> className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
<span>{course.duration}</span> {course.terms?.[0].name}
</div> </Tag>
</div>
<div className="flex flex-wrap gap-2 pt-2"> <Tag
<Tag color="blue" className="rounded-full px-3">{course.terms[0].name}</Tag> color={
<Tag color="green" className="rounded-full px-3">{course.terms[1].name}</Tag> course.terms?.[1].name === "入门"
</div> ? "green"
</div> : course.terms?.[1].name === "中级"
</Card> ? "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>
);
} }

112
apps/web/src/app/main/courses/components/CourseList.tsx
View File

@ -1,44 +1,74 @@
import { Pagination, Empty } from 'antd'; import { Pagination, Empty } from "antd";
import { Course } from '../mockData'; import CourseCard from "./CourseCard";
import CourseCard from './CourseCard'; import { CourseDto, Prisma } from "@nice/common";
import {CourseDto} from '@nice/common' import { api } from "@nice/client";
import { DefaultArgs } from "@prisma/client/runtime/library";
import { useEffect, useMemo, useState } from "react";
interface CourseListProps { interface CourseListProps {
courses: CourseDto[]; params?: {
total: number; page?: number;
pageSize: number; pageSize?: number;
currentPage: number; where?: Prisma.PostWhereInput;
onPageChange: (page: number) => void; 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({ const courses = useMemo(() => {
courses, if (data && !isLoading) {
total, return data?.items;
pageSize, }
currentPage, return [];
onPageChange, }, [data, isLoading]);
}: CourseListProps) {
return ( useEffect(() => {
<div className="space-y-6"> setCurrentPage(params?.page || 1);
{courses.length > 0 ? ( }, [params?.page]);
<> function onPageChange(page: number, pageSize: number) {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> setCurrentPage(page);
{courses.map(course => ( window.scrollTo({ top: 0, behavior: "smooth" });
<CourseCard key={course.id} course={course} /> }
))} return (
</div> <div className="space-y-6">
<div className="flex justify-center mt-8"> {courses.length > 0 ? (
<Pagination <>
current={currentPage} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
total={total} {courses.map((course) => (
pageSize={pageSize} <CourseCard key={course.id} course={course} />
onChange={onPageChange} ))}
showSizeChanger={false} </div>
/> <div className="flex justify-center mt-8">
</div> <Pagination
</> current={currentPage}
) : ( total={totalPages}
<Empty description="暂无相关课程" /> pageSize={params?.pageSize}
)} onChange={onPageChange}
</div> showSizeChanger={false}
); />
} </div>
</>
) : (
<Empty description="暂无相关课程" />
)}
</div>
);
}

158
apps/web/src/app/main/courses/components/FilterSection.tsx
View File

@ -1,10 +1,12 @@
import { Checkbox, Divider, Radio, Space , Spin} from 'antd'; import { Checkbox, Divider, Radio, Space, Spin } from "antd";
import { categories, levels } from '../mockData'; import { categories, levels } from "../mockData";
import { TaxonomySlug, TermDto } from '@nice/common'; import { TaxonomySlug, TermDto } from "@nice/common";
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from "react";
import { api } from '@nice/client'; import { api } from "@nice/client";
import { useSearchParams } from 'react-router-dom'; 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 { interface FilterSectionProps {
selectedCategory: string; selectedCategory: string;
@ -14,105 +16,75 @@ interface FilterSectionProps {
} }
interface GetTaxonomyProps { interface GetTaxonomyProps {
categories: string[]; categories: string[];
isLoading: boolean; isLoading: boolean;
} }
function useGetTaxonomy({type}) : GetTaxonomyProps { function useGetTaxonomy({ type }): GetTaxonomyProps {
const {data,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({ const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
where:{ api.term.findMany.useQuery({
taxonomy: { where: {
//TaxonomySlug.CATEGORY taxonomy: {
slug:type //TaxonomySlug.CATEGORY
} slug: type,
}, },
include:{ },
children :true include: {
}, children: true,
take:10, // 只取前10个 },
orderBy: { take: 10, // 只取前10个
createdAt: 'desc', // 按创建时间降序排列 orderBy: {
}, createdAt: "desc", // 按创建时间降序排列
}) },
const categories = useMemo(() => { });
const allCategories = isLoading ? [] : data?.map((course) => course.name); const categories = useMemo(() => {
return [...Array.from(new Set(allCategories))]; const allCategories = isLoading
}, [data]); ? []
return {categories,isLoading} : data?.map((course) => course.name);
return [...Array.from(new Set(allCategories))];
}, [data]);
return { categories, isLoading };
} }
export default function FilterSection({ export default function FilterSection({
selectedCategory, selectedCategory,
selectedLevel, selectedLevel,
onCategoryChange, onCategoryChange,
onLevelChange, onLevelChange,
}: FilterSectionProps) { }: FilterSectionProps) {
const gateGory : GetTaxonomyProps = useGetTaxonomy({ const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY, type: TaxonomySlug.CATEGORY,
}) });
const levels : GetTaxonomyProps = useGetTaxonomy({ const levels: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.LEVEL, type: TaxonomySlug.LEVEL,
}) });
const [searchParams,setSearchParams] = useSearchParams() const [searchParams, setSearchParams] = useSearchParams();
useEffect(() => { useEffect(() => {
if(searchParams.get('category')) onCategoryChange(searchParams.get('category')) if (searchParams.get("category"))
},[searchParams.get('category')]) onCategoryChange(searchParams.get("category"));
}, [searchParams.get("category")]);
return ( const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
<div> return (
<h3 className="text-lg font-medium mb-4">课程分类</h3> <div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
<Radio.Group {taxonomies?.map((tax) => {
value={selectedCategory} return (
onChange={(e) => onCategoryChange(e.target.value)} <>
className="flex flex-col space-y-3" <div>
> <h3 className="text-lg font-medium mb-4">
{ {tax?.name}
gateGory.isLoading? </h3>
(<Spin/>) <TermSelect
: multiple
( taxonomyId={tax?.id}></TermSelect>
<> </div>
<Radio value="" >全部课程</Radio> </>
{gateGory.categories.map(category => ( );
<Radio key={category} value={category}> })}
{category}
</Radio>
))}
</>)
}
</Radio.Group>
</div>
<Divider className="my-6" /> <Divider className="my-6" />
</div>
<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>
);
} }

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

@ -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>
);
}

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

@ -3,127 +3,33 @@ import { mockCourses } from "./mockData";
import FilterSection from "./components/FilterSection"; import FilterSection from "./components/FilterSection";
import CourseList from "./components/CourseList"; import CourseList from "./components/CourseList";
import { api } from "@nice/client"; 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 { 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
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)
},[])
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> </>
); );
} }

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

@ -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>
);
}

8
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;
@ -69,6 +69,8 @@ const CategorySection = () => {
const [displayedCategories,setDisplayedCategories] = useState<TermDto[]>([]) const [displayedCategories,setDisplayedCategories] = useState<TermDto[]>([])
useEffect(() => { useEffect(() => {
console.log(courseCategoriesData); console.log(courseCategoriesData);
// 如果 showAll 为 true，则显示所有分类数据，
// 如果 showAll 为 false，则只显示前 8 个分类数据，
if(!isLoading){ if(!isLoading){
if(showAll){ if(showAll){
setDisplayedCategories(courseCategoriesData) setDisplayedCategories(courseCategoriesData)
@ -84,9 +86,6 @@ const CategorySection = () => {
// description: term.description // description: term.description
// })) || []; // })) || [];
// },[data]) // },[data])
const handleMouseEnter = useCallback((index: number) => { const handleMouseEnter = useCallback((index: number) => {
setHoveredIndex(index); setHoveredIndex(index);
}, []); }, []);
@ -127,6 +126,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" />

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

@ -1,275 +1,178 @@
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 } from 'antd'; import { Button, Card, Typography, Tag, Spin, Empty } from "antd";
import { import {
PlayCircleOutlined, PlayCircleOutlined,
UserOutlined, TeamOutlined,
ClockCircleOutlined, ArrowRightOutlined,
TeamOutlined, } from "@ant-design/icons";
StarOutlined, import { CourseDto, TaxonomySlug, TermDto } from "@nice/common";
ArrowRightOutlined, import { api } from "@nice/client";
EyeOutlined, import CourseCard from "../../courses/components/CourseCard";
} from '@ant-design/icons';
import { TaxonomySlug, TermDto } from '@nice/common';
import { api } from '@nice/client';
// const {courseId} = useParams();
interface GetTaxonomyProps { interface GetTaxonomyProps {
categories: string[]; categories: string[];
isLoading: boolean; isLoading: boolean;
} }
function useGetTaxonomy({ type }): GetTaxonomyProps { function useGetTaxonomy({ type }): GetTaxonomyProps {
const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({ const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
where: { api.term.findMany.useQuery({
taxonomy: { where: {
//TaxonomySlug.CATEGORY taxonomy: {
slug: type slug: type,
} },
}, },
include: { include: {
children: true children: true,
}, },
take: 10, // 只取前10个 take: 10, // 只取前10个
orderBy: { orderBy: {},
createdAt: 'desc', // 按创建时间降序排列 });
}, const categories = useMemo(() => {
}) const allCategories = isLoading
const categories = useMemo(() => { ? []
const allCategories = isLoading ? [] : data?.map((course) => course.name); : data?.map((course) => course.name);
return [...Array.from(new Set(allCategories))]; return [...Array.from(new Set(allCategories))];
}, [data]); }, [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; 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 { interface CoursesSectionProps {
title: string; title: string;
description: string; description: string;
courses: Course[]; initialVisibleCoursesCount?: number;
isLoading:boolean
initialVisibleCoursesCount?: number;
} }
const CoursesSection: React.FC<CoursesSectionProps> = ({ const CoursesSection: React.FC<CoursesSectionProps> = ({
title, title,
description, description,
courses,
isLoading,
initialVisibleCoursesCount = 8,
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [selectedCategory, setSelectedCategory] = useState<string>('全部'); const [selectedCategory, setSelectedCategory] = useState<string>("全部");
const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount); const gateGory: GetTaxonomyProps = useGetTaxonomy({
const gateGory: GetTaxonomyProps = useGetTaxonomy({ type: TaxonomySlug.CATEGORY,
type: TaxonomySlug.CATEGORY, });
}) const { data, isLoading: isDataLoading } =
// const { data } = api.post.findMany.useQuery({ useFetchCoursesByCategory(selectedCategory);
// where: {}, // 必选参数 const filteredCourses = useMemo(() => {
// include: { // 关联查询 return selectedCategory === "全部"
// instructors: true ? data
// }, : data?.filter((c) =>
// orderBy: { // 排序规则 c.terms.some((t) => t.name === selectedCategory)
// createdAt: 'desc' );
// }, }, [selectedCategory, data]);
// take: 8 const displayedCourses = isDataLoading ? [] : filteredCourses;
// }) return (
// useEffect(() => { <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">
// if (data && data.length > 0) { <div className="flex justify-between items-end mb-16">
// console.log('有效数据:', data) <div>
// // 执行后续操作 <Title
// } else { level={2}
// console.log('无数据或加载中') className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
// } {title}
// }, [data]) </Title>
// const formatted = data?.map(course => ({ <Text
// id: course.id, type="secondary"
// title: course.title className="text-xl font-light text-gray-600">
// })); {description}
const handleClick = (course: Course) => { </Text>
navigate(`/course?courseId=${course.id}/detail`); </div>
} </div>
const filteredCourses = useMemo(() => { <div className="mb-12 flex flex-wrap gap-4">
return selectedCategory === '全部' {gateGory.isLoading ? (
? courses <Spin className="m-3" />
: courses.filter((course) => course.category === selectedCategory); ) : (
}, [selectedCategory, courses]); <>
<Tag
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) => (
<Tag
key={category}
color={
selectedCategory === category
? "blue"
: "default"
}
onClick={() => {
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"
}`}>
{category}
</Tag>
))}
</>
)}
</div>
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses); <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
return ( {displayedCourses.length === 0 ? (
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white"> <div className="col-span-full">
<div className="max-w-screen-2xl mx-auto px-6 relative"> <Empty
<div className="flex justify-between items-end mb-16"> description="暂无课程"
<div> image={Empty.PRESENTED_IMAGE_DEFAULT}
<Title />
level={2} </div>
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent" ) : (
> displayedCourses?.map((course) => (
{title} <CourseCard course={course}></CourseCard>
</Title> ))
<Text type="secondary" className="text-xl font-light text-gray-600"> )}
{description} </div>
</Text> {
</div> <div className="flex items-center gap-4 justify-between mt-12">
</div> <div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
<div className="flex justify-end">
<div className="mb-12 flex flex-wrap gap-4"> <Button
{gateGory.isLoading ? <Spin className='m-3' /> : type="link"
( onClick={() => navigate("/courses")}
<> className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
<Tag 查看更多
color={selectedCategory === "全部" ? 'blue' : 'default'} <ArrowRightOutlined />
onClick={() => setSelectedCategory("全部")} </Button>
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === "全部" </div>
? 'bg-blue-600 text-white shadow-lg' </div>
: 'bg-white text-gray-600 hover:bg-gray-100' }
}`} </div>
>全部</Tag> </section>
{ );
gateGory.categories.map((category) => (
<Tag
key={category}
color={selectedCategory === category ? 'blue' : 'default'}
onClick={() => {
setSelectedCategory(category)
console.log(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'
}`}
>
{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})` }}
/>
<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>
)}
</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 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"
>
查看更多
<ArrowRightOutlined />
</Button>
</div>
</div>
)}
</div>
</section>
);
}; };
export default CoursesSection; export default CoursesSection;

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

@ -1,4 +1,4 @@
import React, { useRef, useCallback } from "react"; import React, { useRef, useCallback, useEffect } from "react";
import { Button, Carousel, Typography } from "antd"; import { Button, Carousel, Typography } from "antd";
import { import {
TeamOutlined, TeamOutlined,
@ -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();
@ -62,7 +61,11 @@ const HeroSection = () => {
const handleNext = useCallback(() => { const handleNext = useCallback(() => {
carouselRef.current?.next(); 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 ( return (
<section className="relative "> <section className="relative ">
<div className="group"> <div className="group">
@ -74,20 +77,20 @@ const HeroSection = () => {
dots={{ dots={{
className: "carousel-dots !bottom-32 !z-20", className: "carousel-dots !bottom-32 !z-20",
}}> }}>
{Array.isArray(carouselItems) ? ( {Array.isArray(slides)?
carouselItems.map((item, index) => ( (slides.map((item, index) => (
<div key={index} className="relative h-[600px]"> <div key={index} className="relative h-[600px]">
<div <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]" 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={{ style={{
//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`, //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", 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`} 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" /> <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
{/* Content Container */} {/* Content Container */}
@ -115,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}

177
apps/web/src/app/main/home/page.tsx
View File

@ -1,163 +1,20 @@
import HeroSection from './components/HeroSection'; import HeroSection from "./components/HeroSection";
import CategorySection from './components/CategorySection'; import CategorySection from "./components/CategorySection";
import CoursesSection from './components/CoursesSection'; 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 HomePage = () => {
// const mockCourses = [
// { return (
// id: 1, <div className="min-h-screen">
// title: 'Python 零基础入门', <HeroSection />
// instructor: '张教授', <CoursesSection
// students: 12000, title="推荐课程"
// rating: 4.8, description="最受欢迎的精品课程，助你快速成长"
// level: '入门', />
// duration: '36小时', <CategorySection />
// category: '编程语言', </div>
// 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]);
// 数据处理逻辑
// 修正依赖数组
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>
);
}; };
export default HomePage; export default HomePage;

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

@ -1,18 +1,17 @@
import { useState } from "react"; import { useContext, 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";
import { useMainContext } from "./MainProvider";
const { Header } = Layout; const { Header } = Layout;
export function MainHeader() { export function MainHeader() {
const [searchValue, setSearchValue] = useState("");
const { isAuthenticated, user } = useAuth(); const { isAuthenticated, user } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const { searchValue, setSearchValue } = useMainContext();
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">
<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full"> <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} value={searchValue}
onChange={(e) => setSearchValue(e.target.value)} onChange={(e) => setSearchValue(e.target.value)}
onPressEnter={(e) => { onPressEnter={(e) => {
//console.log(e) if (
setSearchValue(""); !window.location.pathname.startsWith(
navigate( "/courses/"
`/courses/?searchValue=${searchValue}` )
); ) {
window.scrollTo({ top: 0, behavior: "smooth" }); navigate(`/courses/`);
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
}} }}
/> />
</div> </div>

32
apps/web/src/app/main/layout/MainLayout.tsx
View File

@ -1,19 +1,21 @@
import { Layout } from 'antd'; import { Layout } from "antd";
import { Outlet } from 'react-router-dom'; import { Outlet } from "react-router-dom";
import { MainHeader } from './MainHeader'; import { MainHeader } from "./MainHeader";
import { MainFooter } from './MainFooter'; import { MainFooter } from "./MainFooter";
import { MainProvider } from "./MainProvider";
const { Content } = Layout; const { Content } = Layout;
export function MainLayout() { export function MainLayout() {
return ( return (
<Layout className="min-h-screen"> <MainProvider>
<Layout className="min-h-screen">
<MainHeader /> <MainHeader />
<Content className="mt-16 bg-gray-50"> <Content className="mt-16 bg-gray-50">
<Outlet /> <Outlet />
</Content> </Content>
<MainFooter /> <MainFooter />
</Layout> </Layout>
); </MainProvider>
} );
}

31
apps/web/src/app/main/layout/MainProvider.tsx Normal file
View File

@ -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;
};

4
apps/web/src/components/models/term/term-select.tsx
View File

@ -23,7 +23,7 @@ export default function TermSelect({
value, value,
onChange, onChange,
className, className,
placeholder = "选择单位", placeholder = "选择分类",
multiple = false, multiple = false,
taxonomyId, taxonomyId,
domainId, domainId,
@ -190,4 +190,4 @@ export default function TermSelect({
onDropdownVisibleChange={handleDropdownVisibleChange} onDropdownVisibleChange={handleDropdownVisibleChange}
/> />
); );
} }

199
apps/web/src/components/models/term/term-tree.tsx Normal file
View File

@ -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;

27
apps/web/src/components/models/term/util.ts
View File

@ -1,15 +1,16 @@
import { TreeDataNode } from "@nice/common" import { TreeDataNode } from "@nice/common";
import React from "react";
export const treeVisitor = ( export const treeVisitor = (
data: TreeDataNode[], data: TreeDataNode[],
key: React.Key, key: React.Key,
callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void
) => { ) => {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i].key === key) { if (data[i].key === key) {
return callback(data[i], i, data); return callback(data[i], i, data);
} }
if (data[i].children) { if (data[i].children) {
treeVisitor(data[i].children!, key, callback); treeVisitor(data[i].children!, key, callback);
} }
} }
}; };

56
apps/web/src/routes/index.tsx
View File

@ -8,8 +8,6 @@ import {
import ErrorPage from "../app/error"; import ErrorPage from "../app/error";
import WithAuth from "../components/utils/with-auth"; import WithAuth from "../components/utils/with-auth";
import LoginPage from "../app/login"; 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 HomePage from "../app/main/home/page";
import { CourseDetailPage } from "../app/main/course/detail/page"; import { CourseDetailPage } from "../app/main/course/detail/page";
import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm"; import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
@ -41,7 +39,6 @@ export type CustomRouteObject =
| CustomIndexRouteObject | CustomIndexRouteObject
| CustomNonIndexRouteObject; | CustomNonIndexRouteObject;
export const routes: CustomRouteObject[] = [ export const routes: CustomRouteObject[] = [
{ {
path: "/", path: "/",
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
@ -66,39 +63,16 @@ export const routes: CustomRouteObject[] = [
path: "courses", path: "courses",
element: <CoursesPage></CoursesPage>, element: <CoursesPage></CoursesPage>,
}, },
{
path: "my-courses",
},
{ {
path: "profiles", path: "profiles",
}, },
{
path: "courses",
children: [
{
path: "student",
element: (
<WithAuth>
<StudentCoursesPage />
</WithAuth>
),
},
{
path: "instructor",
element: (
<WithAuth>
<InstructorCoursesPage />
</WithAuth>
),
},
],
},
// 课程预览页面 // 课程预览页面
{ {
path: "coursePreview/:id?", path: "coursePreview/:id?",
element:<CoursePreview></CoursePreview> element: <CoursePreview></CoursePreview>,
} },
], ],
}, },
{ {
@ -106,20 +80,27 @@ export const routes: CustomRouteObject[] = [
children: [ children: [
{ {
path: ":id?/editor", path: ":id?/editor",
element: <CourseEditorLayout></CourseEditorLayout>, element: (
<WithAuth>
<CourseEditorLayout></CourseEditorLayout>
</WithAuth>
),
children: [ children: [
{ {
index: true, index: true,
element: <CourseBasicForm></CourseBasicForm>, element: (
<WithAuth>
<CourseBasicForm></CourseBasicForm>
</WithAuth>
),
}, },
// {
// path: "goal",
// element: <CourseGoalForm></CourseGoalForm>,
// },
{ {
path: "content", path: "content",
element: ( element: (
<CourseContentForm></CourseContentForm> <WithAuth>
<CourseContentForm></CourseContentForm>
</WithAuth>
), ),
}, },
// { // {
@ -146,5 +127,4 @@ export const routes: CustomRouteObject[] = [
}, },
]; ];
export const router = createBrowserRouter(routes); export const router = createBrowserRouter(routes);

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[]
}; };