feat(页面): 重构聊天页面头部并集成标签管理

- 重构 Header 布局为两行结构
- 第一行:标题 + 操作按钮(思考、摘要、分享、导出)
- 第二行:助手信息 + 标签管理器
- 添加渐变分隔线增强视觉层次
- 优化操作按钮样式统一为圆角方形
- 菜单文字汉化(Rename -> 重命名,Delete -> 删除)
This commit is contained in:
gaoziman 2025-12-28 17:29:08 +08:00
parent bbe07e203e
commit e7de47d0d9

View File

@ -14,6 +14,7 @@ import { LinkPreviewModal } from '@/components/features/LinkPreviewModal';
import { ExportDropdown } from '@/components/features/ExportDropdown';
import { ShareModal } from '@/components/features/ShareModal';
import { SummaryButton } from '@/components/features/SummaryGenerator';
import { TagManager } from '@/components/features/Tags';
import { cn } from '@/lib/utils';
import { useConversation, useConversations } from '@/hooks/useConversations';
import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat';
@ -457,10 +458,10 @@ export default function ChatPage({ params }: PageProps) {
)}
>
{/* 固定顶部 Header */}
<header className="px-4 py-2 flex flex-col gap-1 border-b border-[var(--color-border)] bg-[var(--color-bg-primary)] sticky top-0 z-10">
{/* 第一行:标题操作按钮 */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<header className="flex flex-col border-b border-[var(--color-border)] bg-[var(--color-bg-primary)] sticky top-0 z-10">
{/* 第一行:标题 + 操作按钮 */}
<div className="flex items-center justify-between gap-4 px-4 py-2">
<div className="flex items-center gap-3 flex-shrink-0">
<SidebarToggle onClick={() => setSidebarOpen(!sidebarOpen)} />
{/* 标题区域 - 可点击显示下拉菜单 */}
@ -509,7 +510,7 @@ export default function ChatPage({ params }: PageProps) {
<div className="relative" ref={titleMenuRef}>
<button
onClick={() => setTitleMenuOpen(!titleMenuOpen)}
className="flex items-center gap-1 text-base font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] px-2 py-1 rounded-lg transition-colors max-w-[300px]"
className="flex items-center gap-1 text-base font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] px-2 py-1 rounded-[4px] transition-colors max-w-[320px]"
>
<span className="truncate">{conversation?.title || 'New Chat'}</span>
<ChevronDown size={16} className={cn(
@ -520,33 +521,35 @@ export default function ChatPage({ params }: PageProps) {
{/* 下拉菜单 */}
{titleMenuOpen && (
<div className="absolute left-0 top-full mt-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg shadow-lg py-1 z-20 min-w-[140px]">
<div className="absolute left-0 top-full mt-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-[4px] shadow-lg py-1 z-20 min-w-[140px]">
<button
onClick={handleStartRename}
className="w-full px-3 py-2 text-left text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] flex items-center gap-2"
>
<Pencil size={14} />
Rename
</button>
<button
onClick={handleDeleteConversation}
className="w-full px-3 py-2 text-left text-sm text-red-500 hover:bg-[var(--color-bg-hover)] flex items-center gap-2"
>
<Trash2 size={14} />
Delete
</button>
</div>
)}
</div>
)}
</div>
<div className="flex items-center gap-2">
{/* 右侧操作按钮 */}
<div className="flex items-center gap-1 flex-shrink-0">
{/* 思考模式开关 - 只在非 Codex 模型时显示 */}
{!selectedModelId.toLowerCase().includes('codex') && (
<button
onClick={handleThinkingToggle}
className={cn(
'flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg transition-colors',
'flex items-center gap-2 px-3 py-1.5 text-sm rounded-[4px] transition-colors',
enableThinking
? 'bg-[var(--color-primary-light)] text-[var(--color-primary)]'
: 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
@ -571,7 +574,7 @@ export default function ChatPage({ params }: PageProps) {
<button
onClick={() => setShareModalOpen(true)}
className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] rounded-lg transition-colors"
className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] rounded-[4px] transition-colors"
title="分享对话"
>
<Share2 size={16} />
@ -585,11 +588,20 @@ export default function ChatPage({ params }: PageProps) {
</div>
</div>
{/* 第二行:助手信息 */}
<div className="pl-12">
{/* 渐变分隔线 */}
<div className="h-px mx-4" style={{ background: 'linear-gradient(90deg, transparent, var(--color-border), transparent)' }} />
{/* 第二行:助手信息 + 标签管理 */}
<div className="flex items-center justify-between gap-4 px-4 py-2 pl-[60px]">
{/* 左侧:助手信息 */}
<ChatHeaderInfo
assistant={conversation?.assistant || null}
/>
{/* 右侧:标签管理区域 */}
{conversation && !isNewChat && (
<TagManager conversationId={chatId} />
)}
</div>
</header>