feat: CoreProducts 组件添加鼠标移入暂停轮播功能

src/components/CoreProducts.tsx

@@ -25,6 +25,7 @@ export default function CoreProducts({products}: ProductMenuProps) {
   }, [orderedProducts])
 
   const [activeTab, setActiveTab] = useState(() => tabs[0] ?? "")
+  const [isPaused, setIsPaused] = useState(false)
 
   useEffect(() => {
     if (tabs.length === 0) return
@@ -34,7 +35,7 @@ export default function CoreProducts({products}: ProductMenuProps) {
   }, [tabs, activeTab])
 
   useEffect(() => {
-    if (tabs.length === 0) return
+    if (tabs.length === 0 || isPaused) return
 
     const intervalId = setInterval(() => {
       setActiveTab((prev) => {
@@ -46,7 +47,7 @@ export default function CoreProducts({products}: ProductMenuProps) {
     }, 5000)
 
     return () => clearInterval(intervalId)
-  }, [tabs])
+  }, [tabs, isPaused])
 
   const showProducts = useMemo(() => {
     if (!activeTab) return []
@@ -80,7 +81,11 @@ export default function CoreProducts({products}: ProductMenuProps) {
         </div>
       </div>
 
-      <div className="mt-4 sm:mt-6 grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
+      <div 
+        className="mt-4 sm:mt-6 grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6"
+        onMouseEnter={() => setIsPaused(true)}
+        onMouseLeave={() => setIsPaused(false)}
+      >
         {showProducts.map((product) => (
           <Link
             key={product.productId}