Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
16acce0a81
|
|
@ -36,7 +36,7 @@ export class AppConfigRouter {
|
|||
.mutation(async ({ input }) => {
|
||||
return await this.appConfigService.deleteMany(input);
|
||||
}),
|
||||
findFirst: this.trpc.protectProcedure
|
||||
findFirst: this.trpc.procedure
|
||||
.input(AppConfigFindFirstArgsSchema)
|
||||
.query(async ({ input }) => {
|
||||
return await this.appConfigService.findFirst(input);
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export class TermRouter {
|
|||
.input(TermMethodSchema.getSimpleTree)
|
||||
.query(async ({ input, ctx }) => {
|
||||
const { staff } = ctx;
|
||||
return await this.termService.getChildSimpleTree(staff, input);
|
||||
return await this.termService.getChildSimpleTree(input, staff);
|
||||
}),
|
||||
getParentSimpleTree: this.trpc.procedure
|
||||
.input(TermMethodSchema.getSimpleTree)
|
||||
|
|
@ -69,7 +69,7 @@ export class TermRouter {
|
|||
const { staff } = ctx;
|
||||
return await this.termService.getParentSimpleTree(staff, input);
|
||||
}),
|
||||
getTreeData: this.trpc.protectProcedure
|
||||
getTreeData: this.trpc.procedure
|
||||
.input(TermMethodSchema.getTreeData)
|
||||
.query(async ({ input }) => {
|
||||
return await this.termService.getTreeData(input);
|
||||
|
|
|
|||
|
|
@ -269,10 +269,10 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
|
|||
}
|
||||
|
||||
async getChildSimpleTree(
|
||||
staff: UserProfile,
|
||||
data: z.infer<typeof TermMethodSchema.getSimpleTree>,
|
||||
staff?: UserProfile,
|
||||
) {
|
||||
const { domainId = null, permissions } = staff;
|
||||
const domainId = staff?.domainId || null;
|
||||
const hasAnyPerms =
|
||||
staff?.permissions?.includes(RolePerms.MANAGE_ANY_TERM) ||
|
||||
staff?.permissions?.includes(RolePerms.READ_ANY_TERM);
|
||||
|
|
@ -352,7 +352,9 @@ export class TermService extends BaseTreeService<Prisma.TermDelegate> {
|
|||
staff: UserProfile,
|
||||
data: z.infer<typeof TermMethodSchema.getSimpleTree>,
|
||||
) {
|
||||
const { domainId = null, permissions } = staff;
|
||||
// const { domainId = null, permissions } = staff;
|
||||
const permissions = staff?.permissions || [];
|
||||
const domainId = staff?.domainId || null;
|
||||
const hasAnyPerms =
|
||||
permissions.includes(RolePerms.READ_ANY_TERM) ||
|
||||
permissions.includes(RolePerms.MANAGE_ANY_TERM);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { Card, Rate, Tag, Typography, Button } from "antd";
|
||||
import { Course } from "../mockData";
|
||||
import {
|
||||
UserOutlined,
|
||||
ClockCircleOutlined,
|
||||
|
|
@ -18,6 +17,7 @@ export default function CourseCard({ course }: CourseCardProps) {
|
|||
const handleClick = (course: CourseDto) => {
|
||||
navigate(`/course/${course.id}/detail`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
onClick={() => handleClick(course)}
|
||||
|
|
@ -39,10 +39,30 @@ export default function CourseCard({ course }: CourseCardProps) {
|
|||
}>
|
||||
<div className="px-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Tag
|
||||
{course?.terms?.map((term) => {
|
||||
return (
|
||||
<Tag
|
||||
key={term.id}
|
||||
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
|
||||
color={
|
||||
term?.taxonomy?.slug ===
|
||||
TaxonomySlug.CATEGORY
|
||||
? "blue"
|
||||
: term?.taxonomy?.slug ===
|
||||
TaxonomySlug.LEVEL
|
||||
? "green"
|
||||
: "orange"
|
||||
}
|
||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
||||
{term.name}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
{/* <Tag
|
||||
color="blue"
|
||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
||||
{course.terms?.[0].name}
|
||||
|
||||
</Tag>
|
||||
|
||||
<Tag
|
||||
|
|
@ -55,7 +75,7 @@ export default function CourseCard({ course }: CourseCardProps) {
|
|||
}
|
||||
className="px-3 py-1 rounded-full border-0">
|
||||
{course.terms?.[1].name}
|
||||
</Tag>
|
||||
</Tag> */}
|
||||
</div>
|
||||
<Title
|
||||
level={4}
|
||||
|
|
@ -67,11 +87,15 @@ export default function CourseCard({ course }: CourseCardProps) {
|
|||
<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}
|
||||
{
|
||||
course?.depts.length > 1 ?`${course.depts[0].name}等`:course.depts[0].name
|
||||
}
|
||||
{/* {course?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
|
||||
{/* {course?.depts?.map((dept)=>{return dept.name})} */}
|
||||
</Text>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-500">
|
||||
观看次数{course?.meta?.views}次
|
||||
{course?.meta?.views ? `观看次数 ${course?.meta?.views}` : null}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import CourseList from "@web/src/components/models/course/list/CourseList";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
import { PostType, Prisma } from "@nice/common";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export function CoursesContainer() {
|
||||
const { searchValue, selectedTerms } = useMainContext();
|
||||
const termFilters = useMemo(() => {
|
||||
return Object.entries(selectedTerms)
|
||||
.filter(([, terms]) => terms.length > 0)
|
||||
.map(([, terms]) => terms);
|
||||
}, [selectedTerms]);
|
||||
const searchCondition: Prisma.StringNullableFilter = {
|
||||
contains: searchValue,
|
||||
mode: "insensitive" as Prisma.QueryMode, // 使用类型断言
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<CourseList
|
||||
params={{
|
||||
pageSize: 12,
|
||||
where: {
|
||||
type: PostType.COURSE,
|
||||
AND: termFilters.map((termFilter) => ({
|
||||
terms: {
|
||||
some: {
|
||||
id: {
|
||||
in: termFilter, // 确保至少有一个 term.id 在当前 termFilter 中
|
||||
},
|
||||
},
|
||||
},
|
||||
})),
|
||||
OR: [
|
||||
{ title: searchCondition },
|
||||
{ subTitle: searchCondition },
|
||||
{ content: searchCondition },
|
||||
{
|
||||
terms: {
|
||||
some: {
|
||||
name: searchCondition,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}}
|
||||
cols={4}></CourseList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CoursesContainer;
|
||||
|
|
@ -1,90 +1,55 @@
|
|||
import { Checkbox, Divider, Radio, Space, Spin } from "antd";
|
||||
import { categories, levels } from "../mockData";
|
||||
|
||||
import { TaxonomySlug, TermDto } from "@nice/common";
|
||||
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { api } from "@nice/client";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import TermTree from "@web/src/components/models/term/term-tree";
|
||||
import TermSelect from "@web/src/components/models/term/term-select";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
|
||||
interface FilterSectionProps {
|
||||
selectedCategory: string;
|
||||
selectedLevel: string;
|
||||
onCategoryChange: (category: string) => void;
|
||||
onLevelChange: (level: string) => void;
|
||||
}
|
||||
|
||||
interface GetTaxonomyProps {
|
||||
categories: string[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
||||
api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
//TaxonomySlug.CATEGORY
|
||||
slug: type,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
children: true,
|
||||
},
|
||||
take: 10, // 只取前10个
|
||||
orderBy: {
|
||||
createdAt: "desc", // 按创建时间降序排列
|
||||
},
|
||||
});
|
||||
const categories = useMemo(() => {
|
||||
const allCategories = isLoading
|
||||
? []
|
||||
: data?.map((course) => course.name);
|
||||
return [...Array.from(new Set(allCategories))];
|
||||
}, [data]);
|
||||
return { categories, isLoading };
|
||||
}
|
||||
|
||||
export default function FilterSection({
|
||||
selectedCategory,
|
||||
selectedLevel,
|
||||
onCategoryChange,
|
||||
onLevelChange,
|
||||
}: FilterSectionProps) {
|
||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
});
|
||||
const levels: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.LEVEL,
|
||||
});
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
useEffect(() => {
|
||||
if (searchParams.get("category"))
|
||||
onCategoryChange(searchParams.get("category"));
|
||||
}, [searchParams.get("category")]);
|
||||
|
||||
export default function FilterSection() {
|
||||
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
|
||||
|
||||
const { selectedTerms, setSelectedTerms } = useMainContext();
|
||||
const handleTermChange = (slug: string, selected: string[]) => {
|
||||
setSelectedTerms({
|
||||
...selectedTerms,
|
||||
[slug]: selected, // 更新对应 slug 的选择
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6">
|
||||
{taxonomies?.map((tax) => {
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm space-y-6 h-full">
|
||||
{taxonomies?.map((tax, index) => {
|
||||
const items = Object.entries(selectedTerms).find(
|
||||
([key, items]) => key === tax.slug
|
||||
)?.[1];
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">
|
||||
{tax?.name}
|
||||
</h3>
|
||||
<TermSelect
|
||||
multiple
|
||||
taxonomyId={tax?.id}></TermSelect>
|
||||
</div>
|
||||
</>
|
||||
<div key={index}>
|
||||
<h3 className="text-lg font-medium mb-4">
|
||||
{tax?.name}
|
||||
</h3>
|
||||
<TermSelect
|
||||
// open
|
||||
className="w-72"
|
||||
value={items}
|
||||
dropdownRender={(menu) => (
|
||||
<div style={{ padding: "8px" }}>{menu}</div>
|
||||
)}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
multiple
|
||||
taxonomyId={tax?.id}
|
||||
onChange={(selected) =>
|
||||
handleTermChange(
|
||||
tax?.slug,
|
||||
selected as string[]
|
||||
)
|
||||
}></TermSelect>
|
||||
{index < taxonomies.length - 1 && (
|
||||
<Divider className="my-6" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<Divider className="my-6" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import FilterSection from "../components/FilterSection";
|
||||
import CoursesContainer from "../components/CoursesContainer";
|
||||
export function AllCoursesLayout() {
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className=" flex">
|
||||
<div className="w-1/6">
|
||||
<FilterSection></FilterSection>
|
||||
</div>
|
||||
<div className="w-5/6 p-4">
|
||||
<CoursesContainer></CoursesContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default AllCoursesLayout;
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
export interface Course {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
instructor: string;
|
||||
price: number;
|
||||
originalPrice: number;
|
||||
category: string;
|
||||
level: string;
|
||||
thumbnail: string;
|
||||
rating: number;
|
||||
enrollments: number;
|
||||
duration: string;
|
||||
}
|
||||
|
||||
export const categories = [
|
||||
"计算机科学",
|
||||
"数据科学",
|
||||
"商业管理",
|
||||
"人工智能",
|
||||
"软件开发",
|
||||
"网络安全",
|
||||
"云计算",
|
||||
"前端开发",
|
||||
"后端开发",
|
||||
"移动开发"
|
||||
];
|
||||
|
||||
export const levels = ["入门", "初级", "中级", "高级"];
|
||||
|
||||
export const mockCourses: Course[] = Array.from({ length: 50 }, (_, i) => ({
|
||||
id: `course-${i + 1}`,
|
||||
title: `${categories[i % categories.length]}课程 ${i + 1}`,
|
||||
description: "本课程将带你深入了解该领域的核心概念和实践应用，通过实战项目提升你的专业技能。",
|
||||
instructor: `讲师 ${i + 1}`,
|
||||
price: Math.floor(Math.random() * 500 + 99),
|
||||
originalPrice: Math.floor(Math.random() * 1000 + 299),
|
||||
category: categories[i % categories.length],
|
||||
level: levels[i % levels.length],
|
||||
thumbnail: `/api/placeholder/280/160`,
|
||||
rating: Number((Math.random() * 2 + 3).toFixed(1)),
|
||||
enrollments: Math.floor(Math.random() * 10000),
|
||||
duration: `${Math.floor(Math.random() * 20 + 10)}小时`
|
||||
}));
|
||||
|
|
@ -1,35 +1,8 @@
|
|||
import { useState, useMemo, useEffect } from "react";
|
||||
import { mockCourses } from "./mockData";
|
||||
import FilterSection from "./components/FilterSection";
|
||||
import CourseList from "./components/CourseList";
|
||||
import { api } from "@nice/client";
|
||||
import {
|
||||
courseDetailSelect,
|
||||
CourseDto,
|
||||
LectureType,
|
||||
PostType,
|
||||
} from "@nice/common";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { set } from "idb-keyval";
|
||||
import { useMainContext } from "../layout/MainProvider";
|
||||
|
||||
interface paginationData {
|
||||
items: CourseDto[];
|
||||
totalPages: number;
|
||||
}
|
||||
import AllCoursesLayout from "./layout/AllCoursesLayout";
|
||||
export default function CoursesPage() {
|
||||
const { searchValue, setSearchValue } = useMainContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div>{searchValue}</div>
|
||||
<CourseList
|
||||
params={{
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
}}></CourseList>
|
||||
</div>
|
||||
<AllCoursesLayout></AllCoursesLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,212 +1,85 @@
|
|||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Typography, Button, Spin } from 'antd';
|
||||
import { stringToColor, TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { api,} from '@nice/client';
|
||||
import { ControlOutlined } from '@ant-design/icons';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import React, { useState, useCallback, useEffect, useMemo } from "react";
|
||||
import { Typography, Skeleton } from "antd";
|
||||
import { stringToColor, TaxonomySlug, TermDto } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import LookForMore from "./LookForMore";
|
||||
import CategorySectionCard from "./CategorySectionCard";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useMainContext } from "../../layout/MainProvider";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface CourseCategory {
|
||||
name: string;
|
||||
count: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// const courseCategories: CourseCategory[] = [
|
||||
// {
|
||||
// name: '计算机基础',
|
||||
// count: 120,
|
||||
// description: '计算机组成原理、操作系统、网络等基础知识'
|
||||
// },
|
||||
// {
|
||||
// name: '编程语言',
|
||||
// count: 85,
|
||||
// description: 'Python、Java、JavaScript等主流编程语言'
|
||||
// },
|
||||
// {
|
||||
// name: '人工智能',
|
||||
// count: 65,
|
||||
// description: '机器学习、深度学习、自然语言处理等前沿技术'
|
||||
// },
|
||||
// {
|
||||
// name: '数据科学',
|
||||
// count: 45,
|
||||
// description: '数据分析、数据可视化、商业智能等'
|
||||
// },
|
||||
// {
|
||||
// name: '云计算',
|
||||
// count: 38,
|
||||
// description: '云服务、容器化、微服务架构等'
|
||||
// },
|
||||
// {
|
||||
// name: '网络安全',
|
||||
// count: 42,
|
||||
// description: '网络安全基础、渗透测试、安全防护等'
|
||||
// }
|
||||
// ];
|
||||
|
||||
|
||||
const CategorySection = () => {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const [showAll, setShowAll] = useState(false);
|
||||
//获得分类
|
||||
const {data:courseCategoriesData,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({
|
||||
where:{
|
||||
taxonomy: {
|
||||
slug:TaxonomySlug.CATEGORY
|
||||
}
|
||||
},
|
||||
include:{
|
||||
children :true
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'desc', // 按创建时间降序排列
|
||||
},
|
||||
take:8
|
||||
})
|
||||
// 分类展示
|
||||
const [displayedCategories,setDisplayedCategories] = useState<TermDto[]>([])
|
||||
useEffect(() => {
|
||||
console.log(courseCategoriesData);
|
||||
// 如果 showAll 为 true，则显示所有分类数据，
|
||||
// 如果 showAll 为 false，则只显示前 8 个分类数据，
|
||||
if(!isLoading){
|
||||
if(showAll){
|
||||
setDisplayedCategories(courseCategoriesData)
|
||||
}else{
|
||||
setDisplayedCategories(courseCategoriesData.slice(0,8))
|
||||
}
|
||||
}
|
||||
}, [courseCategoriesData,showAll]);
|
||||
// const courseCategories: CourseCategory[] = useMemo(() => {
|
||||
// return data?.map((term) => ({
|
||||
// name: term.name,
|
||||
// count: term.hasChildren ? term.children.length : 0,
|
||||
// description: term.description
|
||||
// })) || [];
|
||||
// },[data])
|
||||
const handleMouseEnter = useCallback((index: number) => {
|
||||
setHoveredIndex(index);
|
||||
}, []);
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
const { selectedTerms, setSelectedTerms } = useMainContext();
|
||||
const {
|
||||
data: courseCategoriesData,
|
||||
isLoading,
|
||||
}: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
slug: TaxonomySlug.CATEGORY,
|
||||
},
|
||||
parentId : null
|
||||
},
|
||||
take: 8,
|
||||
});
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoveredIndex(null);
|
||||
}, []);
|
||||
const handleMouseEnter = useCallback((index: number) => {
|
||||
setHoveredIndex(index);
|
||||
}, []);
|
||||
|
||||
const navigate = useNavigate()
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoveredIndex(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="py-32 relative overflow-hidden">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
||||
<div className="text-center mb-24">
|
||||
<Title level={2} className="font-bold text-5xl mb-6 bg-gradient-to-r from-gray-900 via-gray-700 to-gray-800 bg-clip-text text-transparent motion-safe:animate-gradient-x">
|
||||
探索课程分类
|
||||
</Title>
|
||||
<Text type="secondary" className="text-xl font-light">
|
||||
选择你感兴趣的方向，开启学习之旅
|
||||
</Text>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{
|
||||
isLoading ? <Spin></Spin> :
|
||||
(displayedCategories.map((category, index) => {
|
||||
const categoryColor = stringToColor(category.name);
|
||||
const isHovered = hoveredIndex === index;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative min-h-[130px] rounded-2xl transition-all duration-700 ease-out cursor-pointer will-change-transform hover:-translate-y-2"
|
||||
onMouseEnter={() => handleMouseEnter(index)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`查看${category.name}课程类别`}
|
||||
onClick={()=>{
|
||||
console.log(category.name)
|
||||
navigate(`/courses?category=${category.name}`)
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}}
|
||||
>
|
||||
<div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${
|
||||
isHovered ? 'scale-[1.02] bg-opacity-95' : 'scale-100 bg-opacity-90'
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl transition-all duration-700 ease-out ${
|
||||
isHovered ? 'shadow-[0_8px_30px_rgb(0,0,0,0.12)]' : 'shadow-none opacity-0'
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute top-0 left-1/2 -translate-x-1/2 h-1 rounded-full transition-all duration-500 ease-out ${
|
||||
false ? 'w-36 opacity-90' : 'w-24 opacity-60'
|
||||
}`}
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
/>
|
||||
<div className="relative w-full h-full p-6">
|
||||
<div className="flex w-2/3 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex-col space-y-4 mb-4">
|
||||
<Text strong className="text-xl font-medium tracking-wide">
|
||||
{category.name}
|
||||
</Text>
|
||||
{/* <span
|
||||
className={`px-3 py-1 rounded-full text-sm w-fit font-medium transition-all duration-500 ease-out ${
|
||||
isHovered ? 'shadow-md scale-105' : ''
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: `${categoryColor}15`,
|
||||
color: categoryColor
|
||||
}}
|
||||
>
|
||||
{category.children.length} 门课程
|
||||
</span> */}
|
||||
</div>
|
||||
<Text type="secondary" className="block text-sm leading-relaxed opacity-90">
|
||||
{category.description}
|
||||
</Text>
|
||||
<div
|
||||
className={` mt-6 absolute bottom-4 right-6 text-sm font-medium flex items-center space-x-2 transition-all duration-500 ease-out ${
|
||||
false ? 'translate-x-2' : ''
|
||||
}`}
|
||||
style={{ color: categoryColor }}
|
||||
>
|
||||
<span>了解更多</span>
|
||||
<span
|
||||
className={`transform transition-all duration-500 ease-out ${
|
||||
false ? 'translate-x-2' : ''
|
||||
}`}
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}))
|
||||
}
|
||||
|
||||
</div>
|
||||
{!isLoading && courseCategoriesData.length > 8 && (
|
||||
<div className="flex justify-center mt-12">
|
||||
<Button
|
||||
type="default"
|
||||
size="large"
|
||||
className="px-8 h-12 text-base font-medium hover:shadow-md transition-all duration-300"
|
||||
onClick={() => {
|
||||
//setShowAll(!showAll)
|
||||
navigate("/courses")
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}}
|
||||
>
|
||||
{showAll ? '收起' : '查看更多分类'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
const handleMouseClick = useCallback((categoryId:string) => {
|
||||
setSelectedTerms({
|
||||
[TaxonomySlug.CATEGORY] : [categoryId]
|
||||
})
|
||||
navigate('/courses')
|
||||
window.scrollTo({top: 0,behavior: "smooth",})
|
||||
},[]);
|
||||
return (
|
||||
<section className="py-32 relative overflow-hidden">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
||||
<div className="text-center mb-24">
|
||||
<Title
|
||||
level={2}
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-gray-900 via-gray-700 to-gray-800 bg-clip-text text-transparent motion-safe:animate-gradient-x">
|
||||
探索课程分类
|
||||
</Title>
|
||||
<Text type="secondary" className="text-xl font-light">
|
||||
选择你感兴趣的方向，开启学习之旅
|
||||
</Text>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{isLoading ? (
|
||||
<Skeleton paragraph={{ rows: 4 }}></Skeleton>
|
||||
) : (
|
||||
courseCategoriesData.map((category, index) => {
|
||||
const categoryColor = stringToColor(category.name);
|
||||
const isHovered = hoveredIndex === index;
|
||||
|
||||
return (
|
||||
<CategorySectionCard
|
||||
key={index}
|
||||
index={index}
|
||||
category={category}
|
||||
categoryColor={categoryColor}
|
||||
isHovered={isHovered}
|
||||
handleMouseEnter={handleMouseEnter}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
handleMouseClick={handleMouseClick}
|
||||
/>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<LookForMore to={"/courses"}></LookForMore>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategorySection;
|
||||
export default CategorySection;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { Typography } from "antd";
|
||||
export default function CategorySectionCard({handleMouseClick, index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) {
|
||||
const navigate = useNavigate()
|
||||
const { Title, Text } = Typography;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative min-h-[130px] rounded-2xl transition-all duration-700 ease-out cursor-pointer will-change-transform hover:-translate-y-2"
|
||||
onMouseEnter={() => handleMouseEnter(index)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`查看${category.name}课程类别`}
|
||||
onClick={()=>{
|
||||
handleMouseClick(category.id)
|
||||
}}
|
||||
>
|
||||
<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 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${isHovered
|
||||
? "scale-[1.02] bg-opacity-95"
|
||||
: "scale-100 bg-opacity-90"
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute inset-0 rounded-2xl transition-all duration-700 ease-out ${isHovered
|
||||
? "shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
|
||||
: "shadow-none opacity-0"
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute w-1/2 top-0 left-1/2 -translate-x-1/2 h-1 rounded-full transition-all duration-500 ease-out `}
|
||||
style={{
|
||||
backgroundColor: categoryColor,
|
||||
}}
|
||||
/>
|
||||
<div className="relative w-full h-full p-6">
|
||||
<div className="flex w-2/3 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex-col space-y-4 mb-4">
|
||||
<Text
|
||||
strong
|
||||
className="text-xl font-medium tracking-wide">
|
||||
{category.name}
|
||||
</Text>
|
||||
</div>
|
||||
<div
|
||||
className={` mt-6 absolute bottom-4 right-6 text-sm font-medium flex items-center space-x-2 transition-all duration-500 ease-out `}
|
||||
style={{ color: categoryColor }}>
|
||||
<span>了解更多</span>
|
||||
<span
|
||||
className={`transform transition-all duration-500 ease-out `}>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,14 +1,10 @@
|
|||
import React, { useState, useMemo, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button, Card, Typography, Tag, Spin, Empty } from "antd";
|
||||
import {
|
||||
PlayCircleOutlined,
|
||||
TeamOutlined,
|
||||
ArrowRightOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { CourseDto, TaxonomySlug, TermDto } from "@nice/common";
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { Typography, Skeleton } from "antd";
|
||||
import { TaxonomySlug, TermDto } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import CourseCard from "../../courses/components/CourseCard";
|
||||
import { CoursesSectionTag } from "./CoursesSectionTag";
|
||||
import CourseList from "@web/src/components/models/course/list/CourseList";
|
||||
import LookForMore from "./LookForMore";
|
||||
interface GetTaxonomyProps {
|
||||
categories: string[];
|
||||
isLoading: boolean;
|
||||
|
|
@ -21,11 +17,7 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
|||
slug: type,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
children: true,
|
||||
},
|
||||
take: 10, // 只取前10个
|
||||
orderBy: {},
|
||||
});
|
||||
const categories = useMemo(() => {
|
||||
const allCategories = isLoading
|
||||
|
|
@ -35,29 +27,6 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
|
|||
}, [data]);
|
||||
return { categories, isLoading };
|
||||
}
|
||||
// 不同分类跳转
|
||||
function useFetchCoursesByCategory(category: string) {
|
||||
const isAll = category === "全部";
|
||||
const { data, isLoading }: { data: CourseDto[]; isLoading: boolean } =
|
||||
api.post.findMany.useQuery({
|
||||
where: isAll
|
||||
? {}
|
||||
: {
|
||||
terms: {
|
||||
some: {
|
||||
name: category,
|
||||
},
|
||||
},
|
||||
},
|
||||
take: 8,
|
||||
include: {
|
||||
terms: true,
|
||||
depts: true,
|
||||
},
|
||||
});
|
||||
|
||||
return { data, isLoading };
|
||||
}
|
||||
const { Title, Text } = Typography;
|
||||
interface CoursesSectionProps {
|
||||
title: string;
|
||||
|
|
@ -67,22 +36,12 @@ interface CoursesSectionProps {
|
|||
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
initialVisibleCoursesCount = 8,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>("全部");
|
||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
});
|
||||
const { data, isLoading: isDataLoading } =
|
||||
useFetchCoursesByCategory(selectedCategory);
|
||||
const filteredCourses = useMemo(() => {
|
||||
return selectedCategory === "全部"
|
||||
? data
|
||||
: data?.filter((c) =>
|
||||
c.terms.some((t) => t.name === selectedCategory)
|
||||
);
|
||||
}, [selectedCategory, data]);
|
||||
const displayedCourses = isDataLoading ? [] : filteredCourses;
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="max-w-screen-2xl mx-auto px-6 relative">
|
||||
|
|
@ -100,77 +59,43 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-12 flex flex-wrap gap-4">
|
||||
{gateGory.isLoading ? (
|
||||
<Spin className="m-3" />
|
||||
<Skeleton paragraph={{ rows: 2 }}></Skeleton>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
))}
|
||||
{["全部", ...gateGory.categories].map(
|
||||
(category, idx) => (
|
||||
<CoursesSectionTag
|
||||
key={idx}
|
||||
category={category}
|
||||
selectedCategory={selectedCategory}
|
||||
setSelectedCategory={
|
||||
setSelectedCategory
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{displayedCourses.length === 0 ? (
|
||||
<div className="col-span-full">
|
||||
<Empty
|
||||
description="暂无课程"
|
||||
image={Empty.PRESENTED_IMAGE_DEFAULT}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
displayedCourses?.map((course) => (
|
||||
<CourseCard course={course}></CourseCard>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
<div className="flex items-center gap-4 justify-between mt-12">
|
||||
<div className="h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => navigate("/courses")}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
|
||||
查看更多
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<CourseList
|
||||
params={{
|
||||
page: 1,
|
||||
pageSize: initialVisibleCoursesCount,
|
||||
where: {
|
||||
terms: !(selectedCategory === "全部")
|
||||
? {
|
||||
some: {
|
||||
name: selectedCategory,
|
||||
},
|
||||
}
|
||||
: {},
|
||||
},
|
||||
}}
|
||||
showPagination={false}
|
||||
cols={4}></CourseList>
|
||||
<LookForMore to={"/courses"}></LookForMore>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
import { Tag } from "antd";
|
||||
|
||||
export function CoursesSectionTag({category, selectedCategory, setSelectedCategory}) {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { ArrowRightOutlined } from "@ant-design/icons";
|
||||
import { Button } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LookForMore({to}:{to:string}) {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<>
|
||||
<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(to)}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300">
|
||||
查看更多
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
import React, { createContext, ReactNode, useContext, useState } from "react";
|
||||
interface SelectedTerms {
|
||||
[key: string]: string[]; // 每个 slug 对应一个 string 数组
|
||||
}
|
||||
|
||||
interface MainContextType {
|
||||
searchValue?: string;
|
||||
selectedTerms?: SelectedTerms;
|
||||
setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
|
||||
setSelectedTerms?: React.Dispatch<React.SetStateAction<SelectedTerms>>;
|
||||
}
|
||||
|
||||
const MainContext = createContext<MainContextType | null>(null);
|
||||
|
|
@ -12,11 +17,14 @@ interface MainProviderProps {
|
|||
|
||||
export function MainProvider({ children }: MainProviderProps) {
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [selectedTerms, setSelectedTerms] = useState<SelectedTerms>({}); // 初始化状态
|
||||
return (
|
||||
<MainContext.Provider
|
||||
value={{
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
selectedTerms,
|
||||
setSelectedTerms,
|
||||
}}>
|
||||
{children}
|
||||
</MainContext.Provider>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,37 @@
|
|||
import { Menu } from 'antd';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Menu } from "antd";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
const menuItems = [
|
||||
{ key: 'home', path: '/', label: '首页' },
|
||||
{ key: 'courses', path: '/courses', label: '全部课程' },
|
||||
{ key: 'paths', path: '/paths', label: '学习路径' }
|
||||
{ key: "home", path: "/", label: "首页" },
|
||||
{ key: "courses", path: "/courses", label: "全部课程" },
|
||||
{ key: "paths", path: "/paths", label: "学习路径" },
|
||||
];
|
||||
|
||||
export const NavigationMenu = () => {
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
const selectedKey = menuItems.find(item => item.path === pathname)?.key || '';
|
||||
return (
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
className="border-none font-medium"
|
||||
selectedKeys={[selectedKey]}
|
||||
onClick={({ key }) => {
|
||||
const selectedItem = menuItems.find(item => item.key === key);
|
||||
if (selectedItem) navigate(selectedItem.path);
|
||||
}}
|
||||
>
|
||||
{menuItems.map(({ key, label }) => (
|
||||
<Menu.Item key={key} className="text-gray-600 hover:text-blue-600">
|
||||
{label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
const selectedKey =
|
||||
menuItems.find((item) => item.path === pathname)?.key || "";
|
||||
return (
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
className="border-none font-medium"
|
||||
selectedKeys={[selectedKey]}
|
||||
onClick={({ key }) => {
|
||||
const selectedItem = menuItems.find((item) => item.key === key);
|
||||
if (selectedItem) navigate(selectedItem.path);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}}>
|
||||
{menuItems.map(({ key, label }) => (
|
||||
<Menu.Item
|
||||
key={key}
|
||||
className="text-gray-600 hover:text-blue-600">
|
||||
{label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -221,21 +221,19 @@ export function UserMenu() {
|
|||
focus:outline-none
|
||||
focus:ring-2 focus:ring-[#00538E]/20
|
||||
group relative overflow-hidden
|
||||
active:scale-[0.99]
|
||||
${
|
||||
item.label === "注销"
|
||||
active:scale-[0.99]
|
||||
${item.label === "注销"
|
||||
? "text-[#B22234] hover:bg-red-50/80 hover:text-red-700"
|
||||
: "text-[#00538E] hover:bg-[#E6EEF5] hover:text-[#003F6A]"
|
||||
}`}>
|
||||
}`}>
|
||||
<span
|
||||
className={`w-5 h-5 flex items-center justify-center
|
||||
transition-all duration-200 ease-in-out
|
||||
group-hover:scale-110 group-hover:rotate-6
|
||||
group-hover:translate-x-0.5 ${
|
||||
item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
group-hover:translate-x-0.5 ${item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export default function MindEditor() {
|
|||
toolBar: true, // default true
|
||||
nodeMenu: true, // default true
|
||||
keypress: true, // default true
|
||||
locale: "zh_CN",
|
||||
});
|
||||
// instance.install(NodeMenu);
|
||||
instance.init(MindElixir.new("新主题"));
|
||||
|
|
|
|||
|
|
@ -229,20 +229,18 @@ export function UserMenu() {
|
|||
focus:ring-2 focus:ring-[#00538E]/20
|
||||
group relative overflow-hidden
|
||||
active:scale-[0.99]
|
||||
${
|
||||
item.label === "注销"
|
||||
${item.label === "注销"
|
||||
? "text-[#B22234] hover:bg-red-50/80 hover:text-red-700"
|
||||
: "text-[#00538E] hover:bg-[#E6EEF5] hover:text-[#003F6A]"
|
||||
}`}>
|
||||
}`}>
|
||||
<span
|
||||
className={`w-5 h-5 flex items-center justify-center
|
||||
transition-all duration-200 ease-in-out
|
||||
group-hover:scale-110 group-hover:rotate-6
|
||||
group-hover:translate-x-0.5 ${
|
||||
item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
group-hover:translate-x-0.5 ${item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Pagination, Empty } from "antd";
|
||||
import CourseCard from "./CourseCard";
|
||||
import { CourseDto, Prisma } from "@nice/common";
|
||||
import { Pagination, Empty, Skeleton } from "antd";
|
||||
import CourseCard from "../../../../app/main/courses/components/CourseCard";
|
||||
import { courseDetailSelect, CourseDto, Prisma } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import { DefaultArgs } from "@prisma/client/runtime/library";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
|
@ -11,6 +11,8 @@ interface CourseListProps {
|
|||
where?: Prisma.PostWhereInput;
|
||||
select?: Prisma.PostSelect<DefaultArgs>;
|
||||
};
|
||||
cols?: number;
|
||||
showPagination?: boolean;
|
||||
}
|
||||
interface CoursesPagnationProps {
|
||||
data: {
|
||||
|
|
@ -19,10 +21,15 @@ interface CoursesPagnationProps {
|
|||
};
|
||||
isLoading: boolean;
|
||||
}
|
||||
export default function CourseList({ params }: CourseListProps) {
|
||||
export default function CourseList({
|
||||
params,
|
||||
cols = 3,
|
||||
showPagination = true,
|
||||
}: CourseListProps) {
|
||||
const [currentPage, setCurrentPage] = useState<number>(params?.page || 1);
|
||||
const { data, isLoading }: CoursesPagnationProps =
|
||||
api.post.findManyWithPagination.useQuery({
|
||||
select: courseDetailSelect,
|
||||
...params,
|
||||
page: currentPage,
|
||||
});
|
||||
|
|
@ -42,7 +49,7 @@ export default function CourseList({ params }: CourseListProps) {
|
|||
|
||||
useEffect(() => {
|
||||
setCurrentPage(params?.page || 1);
|
||||
}, [params?.page]);
|
||||
}, [params?.page, params]);
|
||||
function onPageChange(page: number, pageSize: number) {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
|
|
@ -51,20 +58,26 @@ export default function CourseList({ params }: CourseListProps) {
|
|||
<div className="space-y-6">
|
||||
{courses.length > 0 ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{courses.map((course) => (
|
||||
<CourseCard key={course.id} course={course} />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-center mt-8">
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalPages}
|
||||
pageSize={params?.pageSize}
|
||||
onChange={onPageChange}
|
||||
showSizeChanger={false}
|
||||
/>
|
||||
<div className={`grid lg:grid-cols-${cols} gap-6`}>
|
||||
{isLoading ? (
|
||||
<Skeleton paragraph={{ rows: 5 }}></Skeleton>
|
||||
) : (
|
||||
courses.map((course) => (
|
||||
<CourseCard key={course.id} course={course} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{showPagination && (
|
||||
<div className="flex justify-center mt-8">
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalPages * params.pageSize}
|
||||
pageSize={params?.pageSize}
|
||||
onChange={onPageChange}
|
||||
showSizeChanger={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Empty description="暂无相关课程" />
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
// CourseList.tsx
|
||||
import { motion } from "framer-motion";
|
||||
import { Course, CourseDto } from "@nice/common";
|
||||
import { EmptyState } from "@web/src/components/common/space/Empty";
|
||||
import { Pagination } from "@web/src/components/common/element/Pagination";
|
||||
import React from "react";
|
||||
|
||||
interface CourseListProps {
|
||||
courses?: CourseDto[];
|
||||
renderItem: (course: CourseDto) => React.ReactNode;
|
||||
emptyComponent?: React.ReactNode;
|
||||
// 新增分页相关属性
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
}
|
||||
|
||||
const container = {
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.05,
|
||||
duration: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
export const CourseList = ({
|
||||
courses,
|
||||
renderItem,
|
||||
emptyComponent: EmptyComponent,
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
}: CourseListProps) => {
|
||||
if (!courses || courses.length === 0) {
|
||||
return EmptyComponent || <EmptyState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<motion.div
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{courses.map((course) => (
|
||||
<motion.div key={course.id}>
|
||||
{renderItem(course)}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={onPageChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,5 +1,12 @@
|
|||
import { TreeSelect, TreeSelectProps } from "antd";
|
||||
import React, { useEffect, useState, useCallback, useRef } from "react";
|
||||
import React, {
|
||||
useEffect,
|
||||
useState,
|
||||
useCallback,
|
||||
useRef,
|
||||
ReactElement,
|
||||
JSXElementConstructor,
|
||||
} from "react";
|
||||
import { getUniqueItems } from "@nice/common";
|
||||
import { api } from "@nice/client";
|
||||
import { DefaultOptionType } from "antd/es/select";
|
||||
|
|
@ -8,29 +15,35 @@ interface TermSelectProps {
|
|||
defaultValue?: string | string[];
|
||||
value?: string | string[];
|
||||
onChange?: (value: string | string[]) => void;
|
||||
placeholder?: string;
|
||||
multiple?: boolean;
|
||||
// rootId?: string;
|
||||
// domain?: boolean;
|
||||
taxonomyId?: string;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
domainId?: string;
|
||||
dropdownStyle?: React.CSSProperties;
|
||||
style?: React.CSSProperties;
|
||||
open?: boolean;
|
||||
showSearch?: boolean;
|
||||
dropdownRender?: (
|
||||
menu: ReactElement<any, string | JSXElementConstructor<any>>
|
||||
) => ReactElement<any, string | JSXElementConstructor<any>>;
|
||||
}
|
||||
|
||||
export default function TermSelect({
|
||||
defaultValue,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
placeholder = "选择分类",
|
||||
multiple = false,
|
||||
taxonomyId,
|
||||
open = undefined,
|
||||
showSearch = true,
|
||||
domainId,
|
||||
// rootId = null,
|
||||
dropdownStyle,
|
||||
style,
|
||||
disabled = false,
|
||||
// domain = undefined,
|
||||
}: TermSelectProps) {
|
||||
dropdownRender,
|
||||
...treeSelectProps
|
||||
}: TermSelectProps & TreeSelectProps) {
|
||||
const utils = api.useUtils();
|
||||
const [listTreeData, setListTreeData] = useState<
|
||||
Omit<DefaultOptionType, "label">[]
|
||||
|
|
@ -57,7 +70,7 @@ export default function TermSelect({
|
|||
throw error;
|
||||
}
|
||||
},
|
||||
[utils]
|
||||
[utils, value]
|
||||
);
|
||||
|
||||
const fetchTerms = useCallback(async () => {
|
||||
|
|
@ -124,37 +137,35 @@ export default function TermSelect({
|
|||
}
|
||||
};
|
||||
|
||||
const handleExpand = async (keys: React.Key[]) => {
|
||||
// console.log(keys);
|
||||
try {
|
||||
const allKeyIds =
|
||||
keys.map((key) => key.toString()).filter(Boolean) || [];
|
||||
// const expandedNodes = await Promise.all(
|
||||
// keys.map(async (key) => {
|
||||
// return await utils.department.getChildSimpleTree.fetch({
|
||||
// deptId: key.toString(),
|
||||
// domain,
|
||||
// });
|
||||
// })
|
||||
// );
|
||||
//
|
||||
//上面那样一个个拉会拉爆，必须直接拉deptIds
|
||||
const expandedNodes = await utils.term.getChildSimpleTree.fetch({
|
||||
termIds: allKeyIds,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
});
|
||||
const flattenedNodes = expandedNodes.flat();
|
||||
const newItems = getUniqueItems(
|
||||
[...listTreeData, ...flattenedNodes],
|
||||
"id"
|
||||
);
|
||||
setListTreeData(newItems);
|
||||
} catch (error) {
|
||||
console.error("Error expanding nodes with keys", keys, ":", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExpand = useCallback(
|
||||
async (keys: React.Key[]) => {
|
||||
try {
|
||||
const allKeyIds =
|
||||
keys.map((key) => key.toString()).filter(Boolean) || [];
|
||||
const expandedNodes = await utils.term.getChildSimpleTree.fetch(
|
||||
{
|
||||
termIds: allKeyIds,
|
||||
taxonomyId,
|
||||
domainId,
|
||||
}
|
||||
);
|
||||
const flattenedNodes = expandedNodes.flat();
|
||||
const newItems = getUniqueItems(
|
||||
[...listTreeData, ...flattenedNodes],
|
||||
"id"
|
||||
);
|
||||
setListTreeData(newItems);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Error expanding nodes with keys",
|
||||
keys,
|
||||
":",
|
||||
error
|
||||
);
|
||||
}
|
||||
},
|
||||
[value]
|
||||
);
|
||||
const handleDropdownVisibleChange = async (open: boolean) => {
|
||||
if (open) {
|
||||
// This will attempt to expand all nodes and fetch their children when the dropdown opens
|
||||
|
|
@ -162,22 +173,19 @@ export default function TermSelect({
|
|||
await handleExpand(allKeys);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TreeSelect
|
||||
treeDataSimpleMode
|
||||
disabled={disabled}
|
||||
showSearch
|
||||
allowClear
|
||||
// ref={selectRef}
|
||||
dropdownStyle={{
|
||||
width: "300px", // 固定宽度
|
||||
minWidth: "200px", // 最小宽度
|
||||
maxWidth: "600px", // 最大宽度
|
||||
...dropdownStyle,
|
||||
}}
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
className={className}
|
||||
placeholder={placeholder}
|
||||
onChange={handleChange}
|
||||
loadData={onLoadData}
|
||||
|
|
@ -188,6 +196,7 @@ export default function TermSelect({
|
|||
onClear={() => handleChange(multiple ? [] : undefined)}
|
||||
onTreeExpand={handleExpand}
|
||||
onDropdownVisibleChange={handleDropdownVisibleChange}
|
||||
{...treeSelectProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,10 +69,10 @@ export const InitTaxonomies: {
|
|||
// name: "研判单元",
|
||||
// slug: TaxonomySlug.UNIT,
|
||||
// },
|
||||
{
|
||||
name: "标签",
|
||||
slug: TaxonomySlug.TAG,
|
||||
},
|
||||
// {
|
||||
// name: "标签",
|
||||
// slug: TaxonomySlug.TAG,
|
||||
// },
|
||||
];
|
||||
export const InitAppConfigs: Prisma.AppConfigCreateInput[] = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export type Course = Post & {
|
|||
export type CourseDto = Course & {
|
||||
enrollments?: Enrollment[];
|
||||
sections?: SectionDto[];
|
||||
terms: Term[];
|
||||
terms: TermDto[];
|
||||
lectureCount?: number;
|
||||
depts:Department[]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { Term } from "@prisma/client";
|
||||
import { Taxonomy, Term } from "@prisma/client";
|
||||
import { ResPerm } from "./rbac";
|
||||
import { TaxonomySlug } from "../enum";
|
||||
|
||||
export type TermDto = Term & {
|
||||
permissions: ResPerm;
|
||||
children: TermDto[];
|
||||
hasChildren: boolean;
|
||||
taxonomy: Taxonomy
|
||||
};
|
||||
Loading…
Reference in New Issue