From e7de47d0d96112423aaee53578a169067b61f1c5 Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Sun, 28 Dec 2025 17:29:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B5=E9=9D=A2):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2=E5=A4=B4=E9=83=A8=E5=B9=B6?=
 =?UTF-8?q?=E9=9B=86=E6=88=90=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构 Header 布局为两行结构
- 第一行：标题 + 操作按钮（思考、摘要、分享、导出）
- 第二行：助手信息 + 标签管理器
- 添加渐变分隔线增强视觉层次
- 优化操作按钮样式统一为圆角方形
- 菜单文字汉化（Rename -> 重命名，Delete -> 删除）
---
 src/app/chat/[id]/page.tsx | 108 ++++++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 48 deletions(-)

diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
index 585b0fb..769b669 100644
--- a/src/app/chat/[id]/page.tsx
+++ b/src/app/chat/[id]/page.tsx
@@ -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,76 +521,87 @@ 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') && (
+              {!selectedModelId.toLowerCase().includes('codex') && (
+                <button
+                  onClick={handleThinkingToggle}
+                  className={cn(
+                    '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)]'
+                  )}
+                  title={enableThinking ? '关闭思考模式' : '开启思考模式'}
+                >
+                  <Clock size={16} />
+                  <span>思考</span>
+                </button>
+              )}
+
+              {/* 智能摘要按钮 */}
+              <SummaryButton
+                conversationId={chatId}
+                messages={messages.map(m => ({
+                  role: m.role,
+                  content: m.content,
+                }))}
+                hasSummary={!!conversation?.summary}
+                existingSummary={conversation?.summary}
+              />
+
               <button
-                onClick={handleThinkingToggle}
-                className={cn(
-                  'flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg transition-colors',
-                  enableThinking
-                    ? 'bg-[var(--color-primary-light)] text-[var(--color-primary)]'
-                    : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
-                )}
-                title={enableThinking ? '关闭思考模式' : '开启思考模式'}
+                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-[4px] transition-colors"
+                title="分享对话"
               >
-                <Clock size={16} />
-                <span>思考</span>
+                <Share2 size={16} />
+                <span>分享</span>
               </button>
-            )}
-
-            {/* 智能摘要按钮 */}
-            <SummaryButton
-              conversationId={chatId}
-              messages={messages.map(m => ({
-                role: m.role,
-                content: m.content,
-              }))}
-              hasSummary={!!conversation?.summary}
-              existingSummary={conversation?.summary}
-            />
-
-            <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"
-              title="分享对话"
-            >
-              <Share2 size={16} />
-              <span>分享</span>
-            </button>
-            <ExportDropdown
-              conversationId={chatId}
-              conversationTitle={conversation?.title || '新对话'}
-              disabled={isStreaming}
-            />
+              <ExportDropdown
+                conversationId={chatId}
+                conversationTitle={conversation?.title || '新对话'}
+                disabled={isStreaming}
+              />
             </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>