diff --git a/src/components/ChatAnalysisHeader.scss b/src/components/ChatAnalysisHeader.scss index 5c9808c..4e5e99f 100644 --- a/src/components/ChatAnalysisHeader.scss +++ b/src/components/ChatAnalysisHeader.scss @@ -2,6 +2,8 @@ position: relative; display: flex; align-items: center; + justify-content: space-between; + gap: 16px; min-height: 28px; padding: 4px 0; background: transparent; @@ -107,9 +109,28 @@ } } +.chat-analysis-actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; + margin-left: auto; + flex-wrap: wrap; +} + @media (max-width: 768px) { + .chat-analysis-header { + align-items: flex-start; + flex-wrap: wrap; + } + .chat-analysis-breadcrumb { flex-wrap: wrap; row-gap: 4px; } + + .chat-analysis-actions { + width: 100%; + justify-content: flex-start; + } } diff --git a/src/components/ChatAnalysisHeader.tsx b/src/components/ChatAnalysisHeader.tsx index c6f1344..112a15d 100644 --- a/src/components/ChatAnalysisHeader.tsx +++ b/src/components/ChatAnalysisHeader.tsx @@ -1,5 +1,5 @@ import { ChevronDown, ChevronLeft } from 'lucide-react' -import { useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react' import { useNavigate } from 'react-router-dom' import './ChatAnalysisHeader.scss' @@ -7,6 +7,7 @@ export type ChatAnalysisMode = 'private' | 'group' interface ChatAnalysisHeaderProps { currentMode: ChatAnalysisMode + actions?: ReactNode } const MODE_CONFIG: Record = { @@ -20,7 +21,7 @@ const MODE_CONFIG: Record = { } } -function ChatAnalysisHeader({ currentMode }: ChatAnalysisHeaderProps) { +function ChatAnalysisHeader({ currentMode, actions }: ChatAnalysisHeaderProps) { const navigate = useNavigate() const currentLabel = MODE_CONFIG[currentMode].label const [menuOpen, setMenuOpen] = useState(false) @@ -95,6 +96,8 @@ function ChatAnalysisHeader({ currentMode }: ChatAnalysisHeaderProps) { )} + + {actions ?
{actions}
: null} ) } diff --git a/src/pages/AnalyticsPage.scss b/src/pages/AnalyticsPage.scss index 1135123..f905f4d 100644 --- a/src/pages/AnalyticsPage.scss +++ b/src/pages/AnalyticsPage.scss @@ -8,10 +8,6 @@ .error-container { flex: 1; } - - .page-header { - margin-bottom: 16px; - } } // 加载和错误状态 @@ -69,24 +65,6 @@ } } -.page-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 16px; - - h1 { - margin: 0; - } - - .header-actions { - display: flex; - align-items: center; - gap: 8px; - } -} - @keyframes spin { from { transform: rotate(0deg); diff --git a/src/pages/AnalyticsPage.tsx b/src/pages/AnalyticsPage.tsx index 5702bb2..a689089 100644 --- a/src/pages/AnalyticsPage.tsx +++ b/src/pages/AnalyticsPage.tsx @@ -424,6 +424,19 @@ function AnalyticsPage() { ) + const analyticsHeaderActions = ( + <> + + + + ) + if (isLoading && !isLoaded) { return renderPageShell(
@@ -463,21 +476,9 @@ function AnalyticsPage() { } - return renderPageShell( - <> -
-

私聊分析

-
- - -
-
+ return ( +
+
@@ -625,7 +626,7 @@ function AnalyticsPage() {
)} - +
) }