From 36b479bc202a8e06eddc15bffa6a1d085f942231 Mon Sep 17 00:00:00 2001
From: Rao <1227431568@qq.com>
Date: Tue, 25 Feb 2025 22:19:38 +0800
Subject: [PATCH] rht02252219

---
 .../app/main/home/components/CategorySection.tsx | 15 +++++++++++++++
 .../main/home/components/CategorySectionCard.tsx | 16 +++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/main/home/components/CategorySection.tsx b/apps/web/src/app/main/home/components/CategorySection.tsx
index bcbaa28..f3ed9ec 100755
--- a/apps/web/src/app/main/home/components/CategorySection.tsx
+++ b/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}
 								/>
 							);
 						})
diff --git a/apps/web/src/app/main/home/components/CategorySectionCard.tsx b/apps/web/src/app/main/home/components/CategorySectionCard.tsx
index a91525c..e3e1273 100644
--- a/apps/web/src/app/main/home/components/CategorySectionCard.tsx
+++ b/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 (
@@ -12,16 +12,10 @@ export default function CategorySectionCard({index,handleMouseEnter,handleMouseL
             role="button"
             tabIndex={0}
             aria-label={`查看${category.name}课程类别`}
-            onClick={() => {
-                console.log(category.name);
-                navigate(
-                    `/courses?category=${category.name}`
-                );
-                window.scrollTo({
-                    top: 0,
-                    behavior: "smooth",
-                });
-            }}>
+            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