linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rht02252219

This commit is contained in:
Rao 2025-02-25 22:19:38 +08:00
parent 11e8ce708a
commit 36b479bc20
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web/src/app/main/home/components/CategorySection.tsx
View File

@ -4,10 +4,13 @@ import { stringToColor, TaxonomySlug, TermDto } from "@nice/common";
import { api } from "@nice/client"; import { api } from "@nice/client";
import LookForMore from "./LookForMore"; import LookForMore from "./LookForMore";
import CategorySectionCard from "./CategorySectionCard"; import CategorySectionCard from "./CategorySectionCard";
import { useNavigate } from "react-router-dom";
import { useMainContext } from "../../layout/MainProvider";
const { Title, Text } = Typography; const { Title, Text } = Typography;
const CategorySection = () => { const CategorySection = () => {
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
const { selectedTerms, setSelectedTerms } = useMainContext();
const { const {
data: courseCategoriesData, data: courseCategoriesData,
isLoading, isLoading,
@ -16,9 +19,12 @@ const CategorySection = () => {
taxonomy: { taxonomy: {
slug: TaxonomySlug.CATEGORY, slug: TaxonomySlug.CATEGORY,
}, },
parentId : null
}, },
take: 8, take: 8,
}); });
const navigate = useNavigate()
const handleMouseEnter = useCallback((index: number) => { const handleMouseEnter = useCallback((index: number) => {
setHoveredIndex(index); setHoveredIndex(index);
}, []); }, []);
@ -26,6 +32,14 @@ const CategorySection = () => {
const handleMouseLeave = useCallback(() => { const handleMouseLeave = useCallback(() => {
setHoveredIndex(null); setHoveredIndex(null);
}, []); }, []);
const handleMouseClick = useCallback((categoryId:string) => {
setSelectedTerms({
[TaxonomySlug.CATEGORY] : [categoryId]
})
navigate('/courses')
window.scrollTo({top: 0,behavior: "smooth",})
},[]);
return ( return (
<section className="py-32 relative overflow-hidden"> <section className="py-32 relative overflow-hidden">
<div className="max-w-screen-2xl mx-auto px-4 relative"> <div className="max-w-screen-2xl mx-auto px-4 relative">
@ -56,6 +70,7 @@ const CategorySection = () => {
isHovered={isHovered} isHovered={isHovered}
handleMouseEnter={handleMouseEnter} handleMouseEnter={handleMouseEnter}
handleMouseLeave={handleMouseLeave} handleMouseLeave={handleMouseLeave}
handleMouseClick={handleMouseClick}
/> />
); );
}) })

16
apps/web/src/app/main/home/components/CategorySectionCard.tsx
View File

@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Typography } from "antd"; import { Typography } from "antd";
export default function CategorySectionCard({index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) { export default function CategorySectionCard({handleMouseClick, index,handleMouseEnter,handleMouseLeave,category,categoryColor,isHovered,}) {
const navigate = useNavigate() const navigate = useNavigate()
const { Title, Text } = Typography; const { Title, Text } = Typography;
return ( return (
@ -12,16 +12,10 @@ export default function CategorySectionCard({index,handleMouseEnter,handleMouseL
role="button" role="button"
tabIndex={0} tabIndex={0}
aria-label={`查看${category.name}课程类别`} aria-label={`查看${category.name}课程类别`}
onClick={() => { onClick={()=>{
console.log(category.name); handleMouseClick(category.id)
navigate( }}
`/courses?category=${category.name}` >
);
window.scrollTo({
top: 0,
behavior: "smooth",
});
}}>
<div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" /> <div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />
<div <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 className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-white to-gray-50 shadow-lg transition-all duration-700 ease-out ${isHovered