rht02252219

apps/web/src/app/main/home/components/CategorySection.tsx

@@ -4,10 +4,13 @@ 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;
 const CategorySection = () => {
 	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+	const { selectedTerms, setSelectedTerms } = useMainContext();
 	const {
 		data: courseCategoriesData,
 		isLoading,
@@ -16,9 +19,12 @@ const CategorySection = () => {
 			taxonomy: {
 				slug: TaxonomySlug.CATEGORY,
 			},
+			parentId : null
 		},
 		take: 8,
 	});
+	const navigate = useNavigate()
+
 	const handleMouseEnter = useCallback((index: number) => {
 		setHoveredIndex(index);
 	}, []);
@@ -26,6 +32,14 @@ const CategorySection = () => {
 	const handleMouseLeave = useCallback(() => {
 		setHoveredIndex(null);
 	}, []);
+
+	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">
@@ -56,6 +70,7 @@ const CategorySection = () => {
 									isHovered={isHovered}
 									handleMouseEnter={handleMouseEnter}
 									handleMouseLeave={handleMouseLeave}
+									handleMouseClick={handleMouseClick}
 								/>
 							);
 						})

apps/web/src/app/main/home/components/CategorySectionCard.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 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 { Title, Text } = Typography;
     return (
@@ -13,15 +13,9 @@ export default function CategorySectionCard({index,handleMouseEnter,handleMouseL
             tabIndex={0}
             aria-label={`查看${category.name}课程类别`}
             onClick={()=>{
-                console.log(category.name);
-                navigate(
-                    `/courses?category=${category.name}`
-                );
-                window.scrollTo({
-                    top: 0,
-                    behavior: "smooth",
-                });
-            }}>
+                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