From aa469438c2627859d22e42197c159b97a772a6c2 Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Fri, 19 Dec 2025 15:58:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D=E6=9A=97=E8=89=B2=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 聊天页面 header 和输入区域背景色使用 CSS 变量
- ChatInput 输入框背景色适配
- ModelSelector/ToolsDropdown 下拉菜单背景色适配
- QuickActions 按钮背景色适配
- Sidebar 侧边栏及下拉菜单背景色适配
- UserMenu 悬停效果颜色适配
---
 src/app/chat/[id]/page.tsx                | 9 +++++++--
 src/components/features/ChatInput.tsx     | 2 +-
 src/components/features/ModelSelector.tsx | 2 +-
 src/components/features/QuickActions.tsx  | 2 +-
 src/components/features/ToolsDropdown.tsx | 2 +-
 src/components/layout/Sidebar.tsx         | 6 +++---
 src/components/ui/UserMenu.tsx            | 2 +-
 7 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
index 0f52141..a3d3227 100644
--- a/src/app/chat/[id]/page.tsx
+++ b/src/app/chat/[id]/page.tsx
@@ -207,7 +207,7 @@ export default function ChatPage({ params }: PageProps) {
         )}
       >
         {/* 固定顶部 Header */}
-        <header className="h-[var(--header-height)] px-4 flex items-center justify-between border-b border-[var(--color-border)] bg-white sticky top-0 z-10">
+        <header className="h-[var(--header-height)] px-4 flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-bg-primary)] sticky top-0 z-10">
           <div className="flex items-center gap-3">
             <SidebarToggle onClick={() => setSidebarOpen(!sidebarOpen)} />
             <h1 className="text-base font-medium text-[var(--color-text-primary)] truncate max-w-[300px]">
@@ -280,7 +280,12 @@ export default function ChatPage({ params }: PageProps) {
         </div>
 
         {/* 固定底部输入框 */}
-        <div className="sticky bottom-0 bg-gradient-to-t from-white via-white to-transparent pt-4">
+        <div
+          className="sticky bottom-0 pt-4"
+          style={{
+            background: `linear-gradient(to top, var(--color-bg-secondary) 0%, var(--color-bg-secondary) 80%, transparent 100%)`
+          }}
+        >
           <div className="max-w-[900px] mx-auto px-4 pb-4">
             {isStreaming && (
               <div className="flex justify-center mb-3">
diff --git a/src/components/features/ChatInput.tsx b/src/components/features/ChatInput.tsx
index 7a61433..6c5172d 100644
--- a/src/components/features/ChatInput.tsx
+++ b/src/components/features/ChatInput.tsx
@@ -52,7 +52,7 @@ export function ChatInput({
     <div className={cn('w-full max-w-[var(--input-max-width)] mx-auto', className)}>
       <div
         className={cn(
-          'flex flex-col bg-white border border-[var(--color-border)] rounded-[18px] p-4 shadow-[var(--shadow-input)]',
+          'flex flex-col bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-[18px] p-4 shadow-[var(--shadow-input)]',
           'transition-all duration-150',
           'focus-within:border-[var(--color-border-focus)] focus-within:shadow-[var(--shadow-input-focus)]'
         )}
diff --git a/src/components/features/ModelSelector.tsx b/src/components/features/ModelSelector.tsx
index 028c6d0..60d2292 100644
--- a/src/components/features/ModelSelector.tsx
+++ b/src/components/features/ModelSelector.tsx
@@ -44,7 +44,7 @@ export function ModelSelector({ models, selectedModel, onSelect }: ModelSelector
       {/* 下拉菜单 */}
       <div
         className={cn(
-          'absolute bottom-full right-0 mb-2 min-w-[160px] bg-white border border-[var(--color-border)] rounded-xl shadow-lg p-1 z-50',
+          'absolute bottom-full right-0 mb-2 min-w-[160px] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-xl shadow-lg p-1 z-50',
           'transition-all duration-150',
           isOpen
             ? 'opacity-100 visible translate-y-0'
diff --git a/src/components/features/QuickActions.tsx b/src/components/features/QuickActions.tsx
index 4a8b63b..248e3e0 100644
--- a/src/components/features/QuickActions.tsx
+++ b/src/components/features/QuickActions.tsx
@@ -29,7 +29,7 @@ export function QuickActions({ actions, onSelect, className }: QuickActionsProps
             onClick={() => onSelect(action)}
             className={cn(
               'flex items-center gap-2 px-4 py-2',
-              'bg-white border border-[var(--color-border)] rounded-full',
+              'bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-full',
               'text-sm text-[var(--color-text-secondary)]',
               'hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-text-primary)]',
               'transition-all duration-150'
diff --git a/src/components/features/ToolsDropdown.tsx b/src/components/features/ToolsDropdown.tsx
index d9c0296..41cfee6 100644
--- a/src/components/features/ToolsDropdown.tsx
+++ b/src/components/features/ToolsDropdown.tsx
@@ -63,7 +63,7 @@ export function ToolsDropdown({ tools, onToolToggle, onEnableAllToggle }: ToolsD
       {/* 下拉菜单 */}
       <div
         className={cn(
-          'absolute bottom-full left-0 mb-2 min-w-[220px] bg-white border border-[var(--color-border)] rounded-xl shadow-lg p-2 z-50',
+          'absolute bottom-full left-0 mb-2 min-w-[220px] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-xl shadow-lg p-2 z-50',
           'transition-all duration-150',
           isOpen
             ? 'opacity-100 visible translate-y-0'
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2af16ef..0f19e0c 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -69,7 +69,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) {
       {/* 侧边栏 */}
       <aside
         className={cn(
-          'fixed top-0 left-0 bottom-0 z-50 bg-white border-r border-[var(--color-border-light)] flex flex-col transition-all duration-300 ease-in-out overflow-hidden',
+          'fixed top-0 left-0 bottom-0 z-50 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-light)] flex flex-col transition-all duration-300 ease-in-out overflow-hidden',
           isOpen ? 'w-[var(--sidebar-width)]' : 'w-0 border-r-0'
         )}
       >
@@ -146,10 +146,10 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) {
 
                       {/* 下拉菜单 */}
                       {menuOpen === conversation.conversationId && (
-                        <div className="absolute right-0 top-full mt-1 bg-white border border-[var(--color-border)] rounded-lg shadow-lg py-1 z-10 min-w-[120px]">
+                        <div className="absolute right-0 top-full mt-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg shadow-lg py-1 z-10 min-w-[120px]">
                           <button
                             onClick={(e) => handleDeleteConversation(conversation.conversationId, e)}
-                            className="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
+                            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} />
                             删除
diff --git a/src/components/ui/UserMenu.tsx b/src/components/ui/UserMenu.tsx
index a3add28..ffc37f2 100644
--- a/src/components/ui/UserMenu.tsx
+++ b/src/components/ui/UserMenu.tsx
@@ -168,7 +168,7 @@ export function UserMenu({ user }: UserMenuProps) {
               className={cn(
                 'flex items-center gap-3 w-full px-4 py-3',
                 'text-sm text-red-500',
-                'hover:bg-red-50 transition-colors'
+                'hover:bg-[var(--color-bg-hover)] transition-colors'
               )}
               role="menuitem"
             >