feat: unify chat analytics navigation

src/components/ChatAnalysisHeader.scss

@@ -0,0 +1,95 @@
+.chat-analysis-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px 24px 16px;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  flex-shrink: 0;
+}
+
+.chat-analysis-back {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: 13px;
+  font-weight: 500;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.chat-analysis-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+
+  .chat-analysis-breadcrumb-separator {
+    opacity: 0.6;
+  }
+
+  .current {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+}
+
+.chat-analysis-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  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;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  &.active {
+    background: var(--primary-light);
+    color: var(--primary);
+  }
+}
+
+@media (max-width: 768px) {
+  .chat-analysis-header {
+    padding: 16px 18px 14px;
+  }
+
+  .chat-analysis-switcher {
+    width: 100%;
+  }
+
+  .chat-analysis-switcher-item {
+    flex: 1;
+    min-width: 0;
+  }
+}

src/components/ChatAnalysisHeader.tsx

@@ -0,0 +1,65 @@
+import { ChevronLeft } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import './ChatAnalysisHeader.scss'
+
+export type ChatAnalysisMode = 'private' | 'group'
+
+interface ChatAnalysisHeaderProps {
+  currentMode: ChatAnalysisMode
+}
+
+const MODE_CONFIG: Record<ChatAnalysisMode, { label: string; path: string }> = {
+  private: {
+    label: '私聊分析',
+    path: '/analytics/private'
+  },
+  group: {
+    label: '群聊分析',
+    path: '/analytics/group'
+  }
+}
+
+function ChatAnalysisHeader({ currentMode }: ChatAnalysisHeaderProps) {
+  const navigate = useNavigate()
+  const currentLabel = MODE_CONFIG[currentMode].label
+
+  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>
+        <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"
+            aria-selected={mode === currentMode}
+            className={`chat-analysis-switcher-item ${mode === currentMode ? 'active' : ''}`}
+            onClick={() => {
+              if (mode !== currentMode) {
+                navigate(config.path)
+              }
+            }}
+          >
+            {config.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ChatAnalysisHeader

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { NavLink, useLocation, useNavigate } from 'react-router-dom'
-import { Home, MessageSquare, BarChart3, Users, FileText, Settings, ChevronLeft, ChevronRight, Download, Aperture, UserCircle, Lock, LockOpen, ChevronUp, Trash2 } from 'lucide-react'
+import { Home, MessageSquare, BarChart3, FileText, Settings, ChevronLeft, ChevronRight, Download, Aperture, UserCircle, Lock, LockOpen, ChevronUp, Trash2 } from 'lucide-react'
 import { useAppStore } from '../stores/appStore'
 import * as configService from '../services/config'
 import { onExportSessionStatus, requestExportSessionStatus } from '../services/exportBridge'
@@ -375,24 +375,14 @@ function Sidebar() {
           <span className="nav-label">通讯录</span>
         </NavLink>
 
-        {/* 私聊分析 */}
+        {/* 聊天分析 */}
         <NavLink
           to="/analytics"
           className={`nav-item ${isActive('/analytics') ? 'active' : ''}`}
-          title={collapsed ? '私聊分析' : undefined}
+          title={collapsed ? '聊天分析' : undefined}
         >
           <span className="nav-icon"><BarChart3 size={20} /></span>
-          <span className="nav-label">私聊分析</span>
-        </NavLink>
-
-        {/* 群聊分析 */}
-        <NavLink
-          to="/group-analytics"
-          className={`nav-item ${isActive('/group-analytics') ? 'active' : ''}`}
-          title={collapsed ? '群聊分析' : undefined}
-        >
-          <span className="nav-icon"><Users size={20} /></span>
-          <span className="nav-label">群聊分析</span>
+          <span className="nav-label">聊天分析</span>
         </NavLink>
 
         {/* 年度报告 */}