refactor: simplify chat analytics header

src/components/ChatAnalysisHeader.tsx

@@ -1,4 +1,5 @@
-import { ChevronLeft } from 'lucide-react'
+import { ChevronDown, ChevronLeft } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import './ChatAnalysisHeader.scss'
 
@@ -22,41 +23,77 @@ const MODE_CONFIG: Record<ChatAnalysisMode, { label: string; path: string }> = {
 function ChatAnalysisHeader({ currentMode }: ChatAnalysisHeaderProps) {
   const navigate = useNavigate()
   const currentLabel = MODE_CONFIG[currentMode].label
+  const [menuOpen, setMenuOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement | null>(null)
+  const alternateMode = useMemo(
+    () => (currentMode === 'private' ? 'group' : 'private'),
+    [currentMode]
+  )
+
+  useEffect(() => {
+    if (!menuOpen) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!dropdownRef.current?.contains(event.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [menuOpen])
 
   return (
     <div className="chat-analysis-header">
-      <button
-        type="button"
-        className="chat-analysis-back"
-        onClick={() => navigate('/analytics')}
-      >
-        <ChevronLeft size={16} />
-        <span>返回聊天分析</span>
-      </button>
-
       <div className="chat-analysis-breadcrumb">
-        <span>聊天分析</span>
+        <button
+          type="button"
+          className="chat-analysis-back"
+          onClick={() => navigate('/analytics')}
+        >
+          <ChevronLeft size={16} />
+          <span>聊天分析</span>
+        </button>
         <span className="chat-analysis-breadcrumb-separator">/</span>
-        <span className="current">{currentLabel}</span>
-      </div>
-
-      <div className="chat-analysis-switcher" role="tablist" aria-label="聊天分析类型">
-        {(Object.entries(MODE_CONFIG) as Array<[ChatAnalysisMode, { label: string; path: string }]>).map(([mode, config]) => (
+        <div className="chat-analysis-dropdown" ref={dropdownRef}>
           <button
-            key={mode}
             type="button"
-            role="tab"
-            aria-selected={mode === currentMode}
-            className={`chat-analysis-switcher-item ${mode === currentMode ? 'active' : ''}`}
-            onClick={() => {
-              if (mode !== currentMode) {
-                navigate(config.path)
-              }
-            }}
+            className={`chat-analysis-current-trigger ${menuOpen ? 'open' : ''}`}
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((prev) => !prev)}
           >
-            {config.label}
+            <span className="current">{currentLabel}</span>
+            <ChevronDown size={14} />
           </button>
-        ))}
+
+          {menuOpen && (
+            <div className="chat-analysis-menu" role="menu" aria-label="切换聊天分析类型">
+              <button
+                type="button"
+                role="menuitem"
+                className="chat-analysis-menu-item"
+                onClick={() => {
+                  setMenuOpen(false)
+                  navigate(MODE_CONFIG[alternateMode].path)
+                }}
+              >
+                {MODE_CONFIG[alternateMode].label}
+              </button>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )