Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
3a21c5bab0
|
|
@ -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' }, // 按顺序升序排序
|
||||||
|
|
|
||||||
|
|
@ -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,99 @@ 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:20, // 只取前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
|
<Form>
|
||||||
value={selectedCategory}
|
|
||||||
onChange={(e) => onCategoryChange(e.target.value)}
|
</Form>
|
||||||
className="flex flex-col space-y-3"
|
{taxonomies.map((tax) => {
|
||||||
>
|
return (
|
||||||
{
|
<>
|
||||||
gateGory.isLoading?
|
<div>
|
||||||
(<Spin/>)
|
<h3 className="text-lg font-medium mb-4">
|
||||||
:
|
{tax?.name}
|
||||||
(
|
</h3>
|
||||||
<>
|
<TermSelect
|
||||||
<Radio value="" >全部课程</Radio>
|
multiple
|
||||||
{gateGory.categories.map(category => (
|
taxonomyId={tax?.id}></TermSelect>
|
||||||
<Radio key={category} value={category}>
|
</div>
|
||||||
{category}
|
</>
|
||||||
</Radio>
|
);
|
||||||
))}
|
})}
|
||||||
</>)
|
|
||||||
}
|
|
||||||
|
|
||||||
</Radio.Group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Divider className="my-6" />
|
<Divider className="my-6" />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-medium mb-4">难度等级</h3>
|
<h3 className="text-lg font-medium mb-4">难度等级</h3>
|
||||||
<Radio.Group
|
<Radio.Group
|
||||||
value={selectedLevel}
|
value={selectedLevel}
|
||||||
onChange={(e) => onLevelChange(e.target.value)}
|
onChange={(e) => onLevelChange(e.target.value)}
|
||||||
className="flex flex-col space-y-3"
|
className="flex flex-col space-y-3">
|
||||||
>
|
{levels.isLoading ? (
|
||||||
{
|
<Spin />
|
||||||
levels.isLoading ?
|
) : (
|
||||||
(<Spin/>)
|
<>
|
||||||
:
|
<Radio value="">全部难度</Radio>
|
||||||
(
|
{levels.categories.map((level) => (
|
||||||
<>
|
<Radio key={level} value={level}>
|
||||||
<Radio value="">全部难度</Radio>
|
{level}
|
||||||
{levels.categories.map(level => (
|
</Radio>
|
||||||
<Radio key={level} value={level}>
|
))}
|
||||||
{level}
|
</>
|
||||||
</Radio>
|
)}
|
||||||
))}
|
</Radio.Group>
|
||||||
</>)
|
</div>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
</Radio.Group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,12 @@ 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";
|
||||||
|
|
||||||
|
|
@ -27,15 +32,20 @@ export default function CoursesPage() {
|
||||||
const {data,isLoading} :{ data:paginationData,isLoading:boolean} = api.post.findManyWithPagination.useQuery({
|
const {data,isLoading} :{ data:paginationData,isLoading:boolean} = api.post.findManyWithPagination.useQuery({
|
||||||
where: {
|
where: {
|
||||||
type: PostType.COURSE,
|
type: PostType.COURSE,
|
||||||
terms:isAll?{}:{
|
terms: isAll
|
||||||
some: {
|
? {}
|
||||||
OR : [
|
: {
|
||||||
selectedCategory?{name:selectedCategory}:{},
|
some: {
|
||||||
selectedLevel?{name:selectedLevel}:{}
|
OR: [
|
||||||
],
|
selectedCategory
|
||||||
},
|
? { name: selectedCategory }
|
||||||
},
|
: {},
|
||||||
|
selectedLevel
|
||||||
|
? { name: selectedLevel }
|
||||||
|
: {},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
pageSize,
|
pageSize,
|
||||||
page:currentPage,
|
page:currentPage,
|
||||||
|
|
@ -54,12 +64,26 @@ export default function CoursesPage() {
|
||||||
const {data,isLoading} :{ data:paginationData,isLoading:boolean}= api.post.findManyWithPagination.useQuery({
|
const {data,isLoading} :{ data:paginationData,isLoading:boolean}= api.post.findManyWithPagination.useQuery({
|
||||||
where: {
|
where: {
|
||||||
type: PostType.COURSE,
|
type: PostType.COURSE,
|
||||||
OR:[
|
OR: [
|
||||||
{ title: { contains: searchValue, mode: 'insensitive' } },
|
{ title: { contains: searchValue, mode: "insensitive" } },
|
||||||
{ subTitle: { contains: searchValue, mode: 'insensitive' } },
|
{
|
||||||
{ content: { contains: searchValue, mode: 'insensitive' } },
|
subTitle: {
|
||||||
{ terms: { some: { name: { contains: searchValue, mode: 'insensitive' } } } }
|
contains: searchValue,
|
||||||
]
|
mode: "insensitive",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ content: { contains: searchValue, mode: "insensitive" } },
|
||||||
|
{
|
||||||
|
terms: {
|
||||||
|
some: {
|
||||||
|
name: {
|
||||||
|
contains: searchValue,
|
||||||
|
mode: "insensitive",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
select:courseDetailSelect,
|
select:courseDetailSelect,
|
||||||
pageSize,
|
pageSize,
|
||||||
|
|
@ -72,28 +96,32 @@ export default function CoursesPage() {
|
||||||
},[currentPage])
|
},[currentPage])
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(searchParams.get('searchValue')==''){
|
if (searchParams.get("searchValue") == "") {
|
||||||
setSelectedCategory('');
|
setSelectedCategory("");
|
||||||
setSelectedLevel('')
|
setSelectedLevel("");
|
||||||
}
|
}
|
||||||
}, [searchParams.get('searchValue')]);
|
}, [searchParams.get("searchValue")]);
|
||||||
const filteredCourses = useMemo(() => {
|
const filteredCourses = useMemo(() => {
|
||||||
return isCourseLoading ? [] : coursesData;
|
return isCourseLoading ? [] : coursesData;
|
||||||
}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);
|
}, [isCourseLoading, coursesData, selectedCategory, selectedLevel]);
|
||||||
|
|
||||||
const paginatedCourses :CourseDto[]= useMemo(() => {
|
const paginatedCourses: CourseDto[] = useMemo(() => {
|
||||||
const startIndex = (currentPage - 1) * pageSize;
|
const startIndex = (currentPage - 1) * pageSize;
|
||||||
return isCourseLoading ? [] : (filteredCourses.slice(startIndex, startIndex + pageSize) as any as CourseDto[]);
|
return isCourseLoading
|
||||||
|
? []
|
||||||
|
: (filteredCourses.slice(
|
||||||
|
startIndex,
|
||||||
|
startIndex + pageSize
|
||||||
|
) as any as CourseDto[]);
|
||||||
}, [filteredCourses, currentPage]);
|
}, [filteredCourses, currentPage]);
|
||||||
|
|
||||||
const handlePageChange = (page: number) => {
|
const handlePageChange = (page: number) => {
|
||||||
setCurrentPage(page);
|
setCurrentPage(page);
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||||
};
|
};
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
setCurrentPage(1)
|
setCurrentPage(1);
|
||||||
},[])
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
|
|
||||||
|
|
@ -39,28 +39,27 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||||
}, [data]);
|
}, [data]);
|
||||||
return { categories, isLoading }
|
return { categories, isLoading }
|
||||||
}
|
}
|
||||||
// 修改useGetName中的查询条件
|
// 不同分类跳转
|
||||||
|
|
||||||
function useFetchCoursesByCategory(category: string) {
|
function useFetchCoursesByCategory(category: string) {
|
||||||
const isAll = category === '全部';
|
const isAll = category === '全部';
|
||||||
const { data, isLoading}:{data:CourseDto[],isLoading:boolean} = api.post.findMany.useQuery({
|
const { data, isLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
|
||||||
where: isAll?{}:{
|
where: isAll ? {} : {
|
||||||
terms: {
|
terms: {
|
||||||
some: {
|
some: {
|
||||||
name:category
|
name: category
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
take: 8,
|
take: 8,
|
||||||
include:{
|
include: {
|
||||||
terms:true
|
terms: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log("ss",data)
|
|
||||||
return { data, isLoading};
|
return { data, isLoading };
|
||||||
}
|
}
|
||||||
|
|
||||||
// 不同分类跳转
|
|
||||||
|
|
||||||
const { Title, Text } = Typography;
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
|
|
@ -80,7 +79,7 @@ interface CoursesSectionProps {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
courses: Course[];
|
courses: Course[];
|
||||||
isLoading:boolean
|
isLoading: boolean
|
||||||
initialVisibleCoursesCount?: number;
|
initialVisibleCoursesCount?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,38 +97,15 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||||
type: TaxonomySlug.CATEGORY,
|
type: TaxonomySlug.CATEGORY,
|
||||||
})
|
})
|
||||||
const { data ,isLoading : isDataLoading} = useFetchCoursesByCategory(selectedCategory);
|
const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
console.log('data:', data)
|
console.log('data:', data)
|
||||||
})
|
})
|
||||||
// const { 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: CourseDto) => {
|
const handleClick = (course: CourseDto) => {
|
||||||
navigate(`/course?courseId=${course.id}/detail`);
|
navigate(`/course/${course.id}/detail`);
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
console.log('data:', data)
|
console.log('data:', data)
|
||||||
})
|
})
|
||||||
const filteredCourses = useMemo(() => {
|
const filteredCourses = useMemo(() => {
|
||||||
|
|
@ -168,38 +144,37 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||||
}`}
|
}`}
|
||||||
>全部</Tag>
|
>全部</Tag>
|
||||||
{gateGory.categories.length === 0 && (
|
{gateGory.categories.map((category) => (
|
||||||
<Empty
|
<Tag
|
||||||
description="暂无课程分类"
|
key={category}
|
||||||
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
color={selectedCategory === category ? 'blue' : 'default'}
|
||||||
/>
|
onClick={() => {
|
||||||
)}:{
|
setSelectedCategory(category)
|
||||||
gateGory.categories.map((category) => (
|
console.log(category)
|
||||||
<Tag
|
}}
|
||||||
key={category}
|
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||||
color={selectedCategory === category ? 'blue' : 'default'}
|
? 'bg-blue-600 text-white shadow-lg'
|
||||||
onClick={() => {
|
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||||
setSelectedCategory(category)
|
}`}
|
||||||
console.log(category)
|
|
||||||
}}
|
>
|
||||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
{category}
|
||||||
? 'bg-blue-600 text-white shadow-lg'
|
</Tag>
|
||||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
|
||||||
}`}
|
))
|
||||||
|
|
||||||
>
|
|
||||||
{category}
|
|
||||||
</Tag>
|
|
||||||
))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
{displayedCourses?.map((course) => (
|
{displayedCourses.length=== 0 ? (
|
||||||
|
<div className="col-span-full">
|
||||||
|
<Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
|
||||||
|
</div>
|
||||||
|
) : displayedCourses?.map((course) => (
|
||||||
<Card
|
<Card
|
||||||
onClick={() => handleClick(course)}
|
onClick={() => handleClick(course)}
|
||||||
key={course.id}
|
key={course.id}
|
||||||
|
|
@ -249,7 +224,6 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
||||||
<div className="ml-2 flex items-center flex-grow">
|
<div className="ml-2 flex items-center flex-grow">
|
||||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300">
|
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300">
|
||||||
{/* {course.} */}
|
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
<span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
|
<span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
|
||||||
|
|
@ -287,7 +261,7 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,161 +1,165 @@
|
||||||
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 FeaturedTeachersSection from "./components/FeaturedTeachersSection";
|
||||||
import { api } from '@nice/client';
|
import { api } from "@nice/client";
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from "react";
|
||||||
interface Courses{
|
import TermTree from "@web/src/components/models/term/term-tree";
|
||||||
id: number;
|
interface Courses {
|
||||||
title: string;
|
id: number;
|
||||||
instructor: string;
|
title: string;
|
||||||
students: number;
|
instructor: string;
|
||||||
rating: number;
|
students: number;
|
||||||
level: string;
|
rating: number;
|
||||||
duration: string;
|
level: string;
|
||||||
category: string;
|
duration: string;
|
||||||
progress: number;
|
category: string;
|
||||||
thumbnail: string;
|
progress: number;
|
||||||
|
thumbnail: string;
|
||||||
}
|
}
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
// const mockCourses = [
|
// {
|
||||||
// {
|
// id: 1,
|
||||||
// id: 1,
|
// title: 'Python 零基础入门',
|
||||||
// title: 'Python 零基础入门',
|
// instructor: '张教授',
|
||||||
// instructor: '张教授',
|
// students: 12000,
|
||||||
// students: 12000,
|
// rating: 4.8,
|
||||||
// rating: 4.8,
|
// level: '入门',
|
||||||
// level: '入门',
|
// duration: '36小时',
|
||||||
// duration: '36小时',
|
// category: '编程语言',
|
||||||
// category: '编程语言',
|
// progress: 16,
|
||||||
// progress: 16,
|
// thumbnail: '/images/course1.jpg',
|
||||||
// thumbnail: '/images/course1.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 2,
|
||||||
// id: 2,
|
// title: '数据结构与算法',
|
||||||
// title: '数据结构与算法',
|
// instructor: '李教授',
|
||||||
// instructor: '李教授',
|
// students: 8500,
|
||||||
// students: 8500,
|
// rating: 4.9,
|
||||||
// rating: 4.9,
|
// level: '进阶',
|
||||||
// level: '进阶',
|
// duration: '48小时',
|
||||||
// duration: '48小时',
|
// category: '计算机基础',
|
||||||
// category: '计算机基础',
|
// progress: 35,
|
||||||
// progress: 35,
|
// thumbnail: '/images/course2.jpg',
|
||||||
// thumbnail: '/images/course2.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 3,
|
||||||
// id: 3,
|
// title: '前端开发实战',
|
||||||
// title: '前端开发实战',
|
// instructor: '王教授',
|
||||||
// instructor: '王教授',
|
// students: 10000,
|
||||||
// students: 10000,
|
// rating: 4.7,
|
||||||
// rating: 4.7,
|
// level: '中级',
|
||||||
// level: '中级',
|
// duration: '42小时',
|
||||||
// duration: '42小时',
|
// category: '前端开发',
|
||||||
// category: '前端开发',
|
// progress: 68,
|
||||||
// progress: 68,
|
// thumbnail: '/images/course3.jpg',
|
||||||
// thumbnail: '/images/course3.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 4,
|
||||||
// id: 4,
|
// title: 'Java企业级开发',
|
||||||
// title: 'Java企业级开发',
|
// instructor: '刘教授',
|
||||||
// instructor: '刘教授',
|
// students: 9500,
|
||||||
// students: 9500,
|
// rating: 4.6,
|
||||||
// rating: 4.6,
|
// level: '高级',
|
||||||
// level: '高级',
|
// duration: '56小时',
|
||||||
// duration: '56小时',
|
// category: '编程语言',
|
||||||
// category: '编程语言',
|
// progress: 15,
|
||||||
// progress: 15,
|
// thumbnail: '/images/course4.jpg',
|
||||||
// thumbnail: '/images/course4.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 5,
|
||||||
// id: 5,
|
// title: '人工智能基础',
|
||||||
// title: '人工智能基础',
|
// instructor: '陈教授',
|
||||||
// instructor: '陈教授',
|
// students: 11000,
|
||||||
// students: 11000,
|
// rating: 4.9,
|
||||||
// rating: 4.9,
|
// level: '中级',
|
||||||
// level: '中级',
|
// duration: '45小时',
|
||||||
// duration: '45小时',
|
// category: '人工智能',
|
||||||
// category: '人工智能',
|
// progress: 20,
|
||||||
// progress: 20,
|
// thumbnail: '/images/course5.jpg',
|
||||||
// thumbnail: '/images/course5.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 6,
|
||||||
// id: 6,
|
// title: '大数据分析',
|
||||||
// title: '大数据分析',
|
// instructor: '赵教授',
|
||||||
// instructor: '赵教授',
|
// students: 8000,
|
||||||
// students: 8000,
|
// rating: 4.8,
|
||||||
// rating: 4.8,
|
// level: '进阶',
|
||||||
// level: '进阶',
|
// duration: '50小时',
|
||||||
// duration: '50小时',
|
// category: '数据科学',
|
||||||
// category: '数据科学',
|
// progress: 45,
|
||||||
// progress: 45,
|
// thumbnail: '/images/course6.jpg',
|
||||||
// thumbnail: '/images/course6.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 7,
|
||||||
// id: 7,
|
// title: '云计算实践',
|
||||||
// title: '云计算实践',
|
// instructor: '孙教授',
|
||||||
// instructor: '孙教授',
|
// students: 7500,
|
||||||
// students: 7500,
|
// rating: 4.7,
|
||||||
// rating: 4.7,
|
// level: '高级',
|
||||||
// level: '高级',
|
// duration: '48小时',
|
||||||
// duration: '48小时',
|
// category: '云计算',
|
||||||
// category: '云计算',
|
// progress: 15,
|
||||||
// progress: 15,
|
// thumbnail: '/images/course7.jpg',
|
||||||
// thumbnail: '/images/course7.jpg',
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// id: 8,
|
||||||
// id: 8,
|
// title: '移动应用开发',
|
||||||
// title: '移动应用开发',
|
// instructor: '周教授',
|
||||||
// instructor: '周教授',
|
// students: 9000,
|
||||||
// students: 9000,
|
// rating: 4.8,
|
||||||
// rating: 4.8,
|
// level: '中级',
|
||||||
// level: '中级',
|
// duration: '40小时',
|
||||||
// duration: '40小时',
|
// category: '移动开发',
|
||||||
// category: '移动开发',
|
// progress: 70,
|
||||||
// progress: 70,
|
// thumbnail: '/images/course8.jpg',
|
||||||
// thumbnail: '/images/course8.jpg',
|
// },
|
||||||
// },
|
// ];
|
||||||
// ];
|
const { data, isLoading }: { data: Courses[]; isLoading: boolean } =
|
||||||
const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({
|
api.post.findMany.useQuery({
|
||||||
where: {},
|
where: {},
|
||||||
include: {
|
include: {
|
||||||
instructors: true,
|
instructors: true,
|
||||||
},
|
},
|
||||||
orderBy: {
|
orderBy: {
|
||||||
createdAt: 'desc' // 按创建时间降序排列
|
createdAt: "desc", // 按创建时间降序排列
|
||||||
},
|
},
|
||||||
take: 8 // 只获取前8个课程
|
take: 8, // 只获取前8个课程
|
||||||
});
|
});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data) {
|
if (data) {
|
||||||
console.log('Courses data:', data);
|
console.log("mockCourses data:", data);
|
||||||
}
|
}
|
||||||
}, [data]);
|
}, [data]);
|
||||||
|
|
||||||
return (
|
// 数据处理逻辑
|
||||||
<div className="min-h-screen">
|
// 修正依赖数组
|
||||||
<HeroSection />
|
return (
|
||||||
<CoursesSection
|
<div className="min-h-screen">
|
||||||
title="推荐课程"
|
<HeroSection />
|
||||||
description="最受欢迎的精品课程，助你快速成长"
|
|
||||||
courses={data}
|
<CoursesSection
|
||||||
isLoading={isLoading}
|
title="推荐课程"
|
||||||
/>
|
description="最受欢迎的精品课程，助你快速成长"
|
||||||
{/* {formattedCourses.map((course)=>{
|
courses={data}
|
||||||
|
isLoading={isLoading}
|
||||||
|
/>
|
||||||
|
{/* {formattedCourses.map((course)=>{
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<span>course.title</span>
|
<span>course.title</span>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
})} */}
|
})} */}
|
||||||
{/* <CoursesSection
|
{/* <CoursesSection
|
||||||
title="热门课程"
|
title="热门课程"
|
||||||
description="最受欢迎的精品课程，助你快速成长"
|
description="最受欢迎的精品课程，助你快速成长"
|
||||||
courses={mockCourses}
|
courses={mockCourses}
|
||||||
/> */}
|
/> */}
|
||||||
<CategorySection />
|
<CategorySection />
|
||||||
{/* <FeaturedTeachersSection /> */}
|
{/* <FeaturedTeachersSection /> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HomePage;
|
export default HomePage;
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue