diff --git a/src/App.tsx b/src/App.tsx index 8db237f..ed6acb4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,6 @@ import { ThemeProvider, CssBaseline } from '@mui/material'; import { useEffect } from 'react'; -import { Header } from '@renderer/components/layout/Header'; import { Sidebar } from '@renderer/components/layout/Sidebar'; import { DetailPanel } from '@renderer/components/layout/DetailPanel'; import { StatusBar } from '@renderer/components/layout/StatusBar'; @@ -55,7 +54,6 @@ export default function App(): React.JSX.Element { className="h-screen w-screen flex flex-col overflow-hidden select-none" style={{ background: muiTheme.palette.background.default, color: muiTheme.palette.text.primary }} > -
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx deleted file mode 100644 index 4f4f6b8..0000000 --- a/src/components/layout/Header.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Header — 标题栏 - * - * Logo + 会话标题 + 设置按钮。 - */ - -import { Box, IconButton, Tooltip, Stack, Typography } from '@mui/material'; -import { Settings } from 'lucide-react'; -import { useUIStore } from '@renderer/stores/ui-store'; -import { useSessionStore } from '@renderer/stores/session-store'; - -type WebkitCSS = React.CSSProperties & { WebkitAppRegion?: string }; - -export function Header(): React.JSX.Element { - const openSettings = useUIStore((s) => s.openSettings); - const currentSessionId = useSessionStore((s) => s.currentSessionId); - const sessions = useSessionStore((s) => s.sessions); - const currentSession = sessions.find((s) => s.id === currentSessionId); - - return ( -
- - - MetonaAI - {currentSession && ( - <> - · - {currentSession.title} - - )} - - - - -
- ); -} diff --git a/src/components/layout/StatusBar.tsx b/src/components/layout/StatusBar.tsx index 8b22ae0..5c475bd 100644 --- a/src/components/layout/StatusBar.tsx +++ b/src/components/layout/StatusBar.tsx @@ -1,11 +1,13 @@ /** * StatusBar — 底部状态栏 * - * 显示 Agent 状态指示灯、Provider 名称、Token 统计、版本号。 + * 完全使用 MUI 组件:Table 展示状态/Provider/Token,右侧设置按钮。 */ -import { Box, Typography, Stack, Chip } from '@mui/material'; +import { Box, Typography, IconButton, Tooltip, Table, TableBody, TableRow, TableCell } from '@mui/material'; +import { Settings } from 'lucide-react'; import { useAgentStore } from '@renderer/stores/agent-store'; +import { useUIStore } from '@renderer/stores/ui-store'; import { AGENT_STATUS_COLORS, AGENT_STATUS_LABELS, PROVIDER_LABELS } from '@renderer/lib/constants'; import { formatTokens } from '@renderer/lib/formatters'; @@ -14,42 +16,63 @@ export function StatusBar(): React.JSX.Element { const provider = useAgentStore((s) => s.provider); const model = useAgentStore((s) => s.model); const tokenUsage = useAgentStore((s) => s.tokenUsage); + const openSettings = useUIStore((s) => s.openSettings); return ( - - - - - {AGENT_STATUS_LABELS[agentStatus]} - - - | - - {PROVIDER_LABELS[provider] ?? provider} {model} - - + {/* 左侧:状态信息表格 */} + + + + + + + + {AGENT_STATUS_LABELS[agentStatus]} + + + + | + + {PROVIDER_LABELS[provider] ?? provider} {model} + + {tokenUsage.totalTokens > 0 && ( + <> + | + + {formatTokens(tokenUsage.inputTokens)}↓ {formatTokens(tokenUsage.outputTokens)}↑ + + + )} + + +
- - {tokenUsage.totalTokens > 0 && ( - - Tokens: {formatTokens(tokenUsage.inputTokens)}↓ {formatTokens(tokenUsage.outputTokens)}↑ - - )} - MetonaAI v0.1.0 - + {/* 右侧:版本 + 设置 */} + + v0.1.0 + + + + + +
); }