feat(ui): 优化 Header 和状态栏布局
- ContextUsage: 紧凑模式下始终显示压缩按钮 - StatusBar: 连接状态移至中间位置,显示绿点动画和文字 - StatusBar: 添加内部连接状态检测(通过 health API) - Chat: 移除 Header 中的连接状态指示器
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { WifiOff, MessageSquare, Terminal, Plug, Zap, Bot, History, Server, MessagesSquare } from 'lucide-react';
|
||||
import { MessageSquare, Terminal, Plug, Zap, Bot, History, Server, MessagesSquare } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
@@ -129,30 +129,6 @@ export function ChatPage({
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
// 连接状态指示器
|
||||
const ConnectionStatus = () => (
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
{isConnected ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
||||
</span>
|
||||
<span className="text-green-400 hidden sm:inline">Connected</span>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-red-400">
|
||||
<WifiOff size={16} />
|
||||
<span className="hidden sm:inline">Disconnected</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col h-full">
|
||||
{/* Header */}
|
||||
@@ -164,14 +140,11 @@ export function ChatPage({
|
||||
<ContextUsage
|
||||
sessionId={sessionId}
|
||||
compact
|
||||
showCompressButton={false}
|
||||
showCompressButton
|
||||
refreshInterval={30000}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 连接状态 */}
|
||||
<ConnectionStatus />
|
||||
|
||||
{/* 工具栏按钮 */}
|
||||
{(onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders || onOpenLSP || onOpenDiagnostics || onOpenSessions) && (
|
||||
<div className="flex items-center gap-1.5 border-l border-line-muted pl-3">
|
||||
|
||||
Reference in New Issue
Block a user