优化页头样式与操控 & 优化首页推荐文章部分 & 修复后台未正确流式加载问题

src/app/(home)/header.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useMemo, useState, PointerEvent, ComponentProps, useSyncExternalStore, use, Suspense} from 'react'
+import {useMemo, useState, PointerEvent, ComponentProps, useSyncExternalStore, use, Suspense, MouseEvent} from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import {HeaderContext} from './_components/header/common'
@@ -43,10 +43,20 @@ export default function Header(props: HeaderProps) {
     <MobileMenu key="mobile"/>,
   ], [])
 
+  const toggleMobileMenu = () => {
+    if (menu) {
+      setMenu(false)
+    }
+    else {
+      setPage(3)
+      setMenu(true)
+    }
+  }
+
   const enterMenu = (i: number) => {
     return (e: PointerEvent) => {
       setPage(i)
-      if (e.pointerType === 'mouse' || page !== i) {
+      if (page !== i) {
         setMenu(true)
       }
       else {
@@ -55,18 +65,16 @@ export default function Header(props: HeaderProps) {
     }
   }
 
-  const exitMenu = (e: PointerEvent) => {
-    if (e.pointerType === 'mouse') {
-      setMenu(false)
-    }
+  const leaveMenu = (e: PointerEvent) => {
+    setMenu(false)
   }
 
   const enterMenuContent = (e: PointerEvent) => {
     setMenu(true)
   }
 
-  const exitMenuContent = (e: PointerEvent) => {
-    if (e.pointerType === 'mouse') {
+  const leaveMenuContent = (e: PointerEvent) => {
+    if (page != 3) {
       setMenu(false)
     }
   }
@@ -115,19 +123,19 @@ export default function Header(props: HeaderProps) {
                   text="产品订购"
                   active={menu && page === 0}
                   onPointerEnter={enterMenu(0)}
-                  onPointerLeave={exitMenu}
+                  onPointerLeave={leaveMenu}
                 />
                 <MenuItem
                   text="业务场景"
                   active={menu && page === 1}
                   onPointerEnter={enterMenu(1)}
-                  onPointerLeave={exitMenu}
+                  onPointerLeave={leaveMenu}
                 />
                 <MenuItem
                   text="帮助中心"
                   active={menu && page === 2}
                   onPointerEnter={enterMenu(2)}
-                  onPointerLeave={exitMenu}
+                  onPointerLeave={leaveMenu}
                 />
                 <LinkItem
                   text="业务定制"
@@ -138,8 +146,7 @@ export default function Header(props: HeaderProps) {
               <Button
                 theme="ghost"
                 className="lg:hidden size-10"
-                onPointerEnter={enterMenu(3)}
-                onPointerLeave={exitMenu}
+                onClick={toggleMobileMenu}
               >
                 <MenuIcon/>
               </Button>
@@ -168,7 +175,7 @@ export default function Header(props: HeaderProps) {
               : `delay-[0s,0s] opacity-0 py-0 pointer-events-none`,
           )}
           onPointerEnter={enterMenuContent}
-          onPointerLeave={exitMenuContent}
+          onPointerLeave={leaveMenuContent}
         >
           {pages[page]}
         </div>