add
This commit is contained in:
ditiqi
parent
dc8bc72687
commit
9319f112b4
|
|
@ -1,157 +1,141 @@
|
|||
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, 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";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface CourseCategory {
|
||||
name: string;
|
||||
count: number;
|
||||
description: string;
|
||||
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 [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 handleMouseLeave = useCallback(() => {
|
||||
setHoveredIndex(null);
|
||||
}, []);
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoveredIndex(null);
|
||||
}, []);
|
||||
|
||||
const navigate = useNavigate()
|
||||
const navigate = useNavigate();
|
||||
|
||||
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
|
||||
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 `}
|
||||
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' : ''
|
||||
}`}
|
||||
|
|
@ -162,51 +146,45 @@ const CategorySection = () => {
|
|||
>
|
||||
{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 && (
|
||||
<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>
|
||||
);
|
||||
</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 `}
|
||||
style={{ color: categoryColor }}>
|
||||
<span>了解更多</span>
|
||||
<span
|
||||
className={`transform transition-all duration-500 ease-out `}>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
{!isLoading && (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategorySection;
|
||||
export default CategorySection;
|
||||
|
|
|
|||
Loading…
Reference in New Issue