feat(ui): 优化 Chat 页面 Header 布局
- 移除左上角 "Chat" 标题 - Token 使用情况移至左侧 - 压缩按钮添加文字标签,更直观 - 工具栏按钮保持在右侧
This commit is contained in:
@@ -134,9 +134,8 @@ export function ChatPage({
|
||||
<div className="flex-1 flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 md:px-6 py-3 border-b border-line bg-surface-subtle">
|
||||
<h1 className="text-lg font-medium text-fg">Chat</h1>
|
||||
<div className="flex items-center gap-3 flex-shrink-0">
|
||||
{/* 上下文使用情况 - 紧凑模式 */}
|
||||
{/* 左侧:上下文使用情况 */}
|
||||
<div className="flex items-center">
|
||||
{sessionId && (
|
||||
<ContextUsage
|
||||
sessionId={sessionId}
|
||||
@@ -145,46 +144,46 @@ export function ChatPage({
|
||||
refreshInterval={30000}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 工具栏按钮 */}
|
||||
{(onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders || onOpenLSP || onOpenDiagnostics || onOpenSessions) && (
|
||||
<div className="flex items-center gap-1.5 border-l border-line-muted pl-3">
|
||||
{/* LSP 诊断指示器 */}
|
||||
{(onOpenLSP || onOpenDiagnostics) && (
|
||||
<DiagnosticsIndicator
|
||||
onClickDiagnostics={onOpenDiagnostics}
|
||||
onClickLSP={onOpenLSP}
|
||||
refreshInterval={30000}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sessions 按钮 */}
|
||||
{onOpenSessions && (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={onOpenSessions}
|
||||
className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
|
||||
title="Sessions"
|
||||
>
|
||||
<MessagesSquare size={20} />
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{/* 设置菜单 - 齿轮图标,放在最右侧 */}
|
||||
<ToolbarOverflowMenu
|
||||
items={[
|
||||
{ icon: History, label: 'Checkpoints', onClick: onOpenCheckpoints },
|
||||
{ icon: Server, label: 'Model Providers', onClick: onOpenProviders },
|
||||
{ icon: Bot, label: 'Agent Presets', onClick: onOpenAgents },
|
||||
{ icon: Zap, label: 'Hooks', onClick: onOpenHooks },
|
||||
{ icon: Plug, label: 'MCP Servers', onClick: onOpenMCP },
|
||||
{ icon: Terminal, label: 'Commands', onClick: onOpenCommands },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧:工具栏按钮 */}
|
||||
{(onOpenCommands || onOpenMCP || onOpenHooks || onOpenAgents || onOpenCheckpoints || onOpenProviders || onOpenLSP || onOpenDiagnostics || onOpenSessions) && (
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
{/* LSP 诊断指示器 */}
|
||||
{(onOpenLSP || onOpenDiagnostics) && (
|
||||
<DiagnosticsIndicator
|
||||
onClickDiagnostics={onOpenDiagnostics}
|
||||
onClickLSP={onOpenLSP}
|
||||
refreshInterval={30000}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sessions 按钮 */}
|
||||
{onOpenSessions && (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={onOpenSessions}
|
||||
className="p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors"
|
||||
title="Sessions"
|
||||
>
|
||||
<MessagesSquare size={20} />
|
||||
</motion.button>
|
||||
)}
|
||||
|
||||
{/* 设置菜单 - 齿轮图标,放在最右侧 */}
|
||||
<ToolbarOverflowMenu
|
||||
items={[
|
||||
{ icon: History, label: 'Checkpoints', onClick: onOpenCheckpoints },
|
||||
{ icon: Server, label: 'Model Providers', onClick: onOpenProviders },
|
||||
{ icon: Bot, label: 'Agent Presets', onClick: onOpenAgents },
|
||||
{ icon: Zap, label: 'Hooks', onClick: onOpenHooks },
|
||||
{ icon: Plug, label: 'MCP Servers', onClick: onOpenMCP },
|
||||
{ icon: Terminal, label: 'Commands', onClick: onOpenCommands },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
|
||||
Reference in New Issue
Block a user