refactor: simplify chat analytics header

src/components/ChatAnalysisHeader.scss

@@ -1,16 +1,16 @@
 .chat-analysis-header {
+  position: relative;
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  gap: 12px;
+  min-height: 28px;
-  padding: 20px 24px 16px;
+  padding: 4px 0;
-  background: var(--card-bg);
+  background: transparent;
-  border: 1px solid var(--border-color);
+  border: none;
-  border-radius: 16px;
+  border-radius: 0;
   flex-shrink: 0;
 }
 
 .chat-analysis-back {
-  width: fit-content;
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -21,7 +21,7 @@
   cursor: pointer;
   transition: color 0.2s ease;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
 
   &:hover {
     color: var(--text-primary);
@@ -32,64 +32,84 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: var(--text-tertiary);
   font-size: 13px;
+  color: var(--text-secondary);
 
   .chat-analysis-breadcrumb-separator {
     opacity: 0.6;
   }
-
-  .current {
-    color: var(--text-primary);
-    font-weight: 600;
-  }
 }
 
-.chat-analysis-switcher {
+.chat-analysis-dropdown {
+  position: relative;
+}
+
+.chat-analysis-current-trigger {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  width: fit-content;
+  padding: 0;
-  padding: 4px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-}
-
-.chat-analysis-switcher-item {
-  min-width: 104px;
-  padding: 8px 16px;
   border: none;
-  border-radius: 999px;
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
+
+  .current {
+    color: var(--text-primary);
+  }
+
+  svg {
+    transition: transform 0.2s ease;
+  }
 
   &:hover {
     color: var(--text-primary);
-    background: var(--bg-hover);
   }
 
-  &.active {
+  &.open svg {
-    background: var(--primary-light);
+    transform: rotate(180deg);
+  }
+}
+
+.chat-analysis-menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  min-width: 120px;
+  padding: 6px;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+  z-index: 20;
+}
+
+.chat-analysis-menu-item {
+  width: 100%;
+  display: block;
+  padding: 9px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background 0.2s ease, color 0.2s ease;
+
+  &:hover {
+    background: var(--bg-hover);
     color: var(--primary);
   }
 }
 
 @media (max-width: 768px) {
-  .chat-analysis-header {
+  .chat-analysis-breadcrumb {
-    padding: 16px 18px 14px;
+    flex-wrap: wrap;
-  }
+    row-gap: 4px;
-
-  .chat-analysis-switcher {
-    width: 100%;
-  }
-
-  .chat-analysis-switcher-item {
-    flex: 1;
-    min-width: 0;
   }
 }

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">
+      <div className="chat-analysis-breadcrumb">
         <button
           type="button"
           className="chat-analysis-back"
           onClick={() => navigate('/analytics')}
         >
           <ChevronLeft size={16} />
-        <span>返回聊天分析</span>
+          <span>聊天分析</span>
+        </button>
+        <span className="chat-analysis-breadcrumb-separator">/</span>
+        <div className="chat-analysis-dropdown" ref={dropdownRef}>
+          <button
+            type="button"
+            className={`chat-analysis-current-trigger ${menuOpen ? 'open' : ''}`}
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((prev) => !prev)}
+          >
+            <span className="current">{currentLabel}</span>
+            <ChevronDown size={14} />
           </button>
 
-      <div className="chat-analysis-breadcrumb">
+          {menuOpen && (
-        <span>聊天分析</span>
+            <div className="chat-analysis-menu" role="menu" aria-label="切换聊天分析类型">
-        <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]) => (
               <button
-            key={mode}
                 type="button"
-            role="tab"
+                role="menuitem"
-            aria-selected={mode === currentMode}
+                className="chat-analysis-menu-item"
-            className={`chat-analysis-switcher-item ${mode === currentMode ? 'active' : ''}`}
                 onClick={() => {
-              if (mode !== currentMode) {
+                  setMenuOpen(false)
-                navigate(config.path)
+                  navigate(MODE_CONFIG[alternateMode].path)
-              }
                 }}
               >
-            {config.label}
+                {MODE_CONFIG[alternateMode].label}
               </button>
-        ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )