fix: polish chat page refactor

electron/main.ts

@@ -1309,9 +1309,6 @@ function createChatHistoryRouteWindow(route: string) {
         ? join(process.resourcesPath, 'icon.icns')
         : join(process.resourcesPath, 'icon.ico'))
 
-  // 根据系统主题设置窗口背景色
-  const isDark = nativeTheme.shouldUseDarkColors
-
   const win = new BrowserWindow({
     width: 600,
     height: 800,
@@ -1326,13 +1323,31 @@ function createChatHistoryRouteWindow(route: string) {
     titleBarStyle: 'hidden',
     titleBarOverlay: false,
     show: false,
-    backgroundColor: isDark ? '#1A1A1A' : '#F0F0F0',
+    backgroundColor: '#FFFFFF',
     autoHideMenuBar: true
   })
   setupCustomTitleBarWindow(win)
 
-  win.once('ready-to-show', () => {
+  let hasShown = false
+  let isReadyToShow = false
+  let hasLoadedRoute = false
+  const showChatHistoryWindow = () => {
+    if (hasShown || !isReadyToShow || !hasLoadedRoute || win.isDestroyed()) return
+    hasShown = true
     win.show()
+  }
+
+  win.webContents.once('did-finish-load', () => {
+    hasLoadedRoute = true
+    setTimeout(showChatHistoryWindow, 30)
+  })
+  win.webContents.once('did-fail-load', () => {
+    hasLoadedRoute = true
+    showChatHistoryWindow()
+  })
+  win.once('ready-to-show', () => {
+    isReadyToShow = true
+    showChatHistoryWindow()
   })
 
   if (process.env.VITE_DEV_SERVER_URL) {

src/components/MessageBubble.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { Bot, User } from 'lucide-react'
-
-interface ChatMessage {
-    id: string;
-    role: 'user' | 'ai';
-    content: string;
-    timestamp: number;
-}
-
-interface MessageBubbleProps {
-    message: ChatMessage;
-}
-
-/**
- * 优化后的消息气泡组件
- * 使用 React.memo 避免不必要的重新渲染
- */
-export const MessageBubble = React.memo<MessageBubbleProps>(({ message }) => {
-    return (
-        <div className={`message-row ${message.role}`}>
-            <div className="avatar">
-                {message.role === 'ai' ? <Bot size={24} /> : <User size={24} />}
-            </div>
-            <div className="bubble">
-                <div className="content">{message.content}</div>
-            </div>
-        </div>
-    )
-}, (prevProps, nextProps) => {
-    // 自定义比较函数：只有内容或ID变化时才重新渲染
-    return prevProps.message.content === nextProps.message.content &&
-        prevProps.message.id === nextProps.message.id
-})
-
-MessageBubble.displayName = 'MessageBubble'

src/pages/Chat/ChatInputArea.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Lock, Search } from 'lucide-react'
-
-export interface ChatInputAreaProps {
-  disabled?: boolean
-  placeholder?: string
-  onFocusSearch?: () => void
-}
-
-function ChatInputArea({
-  disabled = true,
-  placeholder = '聊天记录',
-  onFocusSearch
-}: ChatInputAreaProps) {
-  return (
-    <div className="chat-input-area" aria-hidden={disabled ? undefined : false}>
-      <button
-        type="button"
-        className="chat-input-search-btn"
-        onClick={onFocusSearch}
-        disabled={!onFocusSearch}
-        title="搜索"
-      >
-        <Search size={16} />
-      </button>
-      <div className="chat-input-shell">
-        <Lock size={15} />
-        <span>{placeholder}</span>
-      </div>
-    </div>
-  )
-}
-
-function areEqual(prev: ChatInputAreaProps, next: ChatInputAreaProps) {
-  return (
-    prev.disabled === next.disabled &&
-    prev.placeholder === next.placeholder &&
-    prev.onFocusSearch === next.onFocusSearch
-  )
-}
-
-export default React.memo(ChatInputArea, areEqual)

src/pages/ChatHistoryPage.scss

@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background:
+  color: var(--text-primary);
-    linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 96%, white) 0%, var(--bg-primary) 100%);
+  background: var(--bg-primary);
 
   .history-list {
     flex: 1;
@@ -149,7 +149,7 @@
         .nested-chat-record-card {
           min-width: 220px;
           max-width: 320px;
-          background: color-mix(in srgb, var(--bg-secondary) 97%, #f5f7fb);
+          background: var(--card-bg);
           border: 1px solid var(--border-color);
           border-radius: 14px;
           overflow: hidden;

src/pages/ChatPage.scss

@@ -2730,13 +2730,9 @@
   width: clamp(280px, 25vw, 360px);
   min-width: 280px;
   max-width: 360px;
-  background: linear-gradient(
+  background: var(--bg-primary);
-    180deg,
-    color-mix(in srgb, var(--card-bg) 94%, #fff 6%) 0%,
-    var(--card-bg) 100%
-  );
   border-left: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  box-shadow: -14px 0 28px rgba(0, 0, 0, 0.07);
+  box-shadow: var(--shadow-sm);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -2749,7 +2745,7 @@
     justify-content: space-between;
     gap: 8px;
     padding: 14px 14px 12px;
-    background: color-mix(in srgb, var(--card-bg) 92%, #fff 8%);
+    background: var(--bg-primary);
     border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
@@ -2850,7 +2846,7 @@
     padding: 12px;
     border-radius: 12px;
     border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
-    background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
+    background: var(--bg-secondary);
     animation: detailCardEnter 0.24s ease both;
 
     .detail-overview-avatar {
@@ -2891,7 +2887,7 @@
     padding: 12px;
     border-radius: 12px;
     border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
-    background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
+    background: var(--bg-secondary);
     animation: detailCardEnter 0.24s ease both;
 
     .section-title {
@@ -2917,7 +2913,7 @@
       border-radius: 8px;
       font-size: 12px;
       color: var(--text-tertiary);
-      background: color-mix(in srgb, var(--card-bg) 84%, transparent);
+      background: var(--card-bg);
     }
   }
 
@@ -5384,8 +5380,8 @@
 
     .message-list {
       background: var(--bg-primary);
-      padding: 18px clamp(16px, 3vw, 48px) 104px;
+      padding: 18px clamp(16px, 3vw, 48px) 28px;
-      padding-bottom: calc(104px + env(safe-area-inset-bottom));
+      padding-bottom: calc(28px + env(safe-area-inset-bottom));
     }
   }
 }
@@ -5447,8 +5443,8 @@
 
 .message-list {
   background: var(--bg-primary);
-  padding: 18px clamp(16px, 3vw, 48px) 104px;
+  padding: 18px clamp(16px, 3vw, 48px) 28px;
-  padding-bottom: calc(104px + env(safe-area-inset-bottom));
+  padding-bottom: calc(28px + env(safe-area-inset-bottom));
   gap: 0;
 }
 
@@ -5536,8 +5532,8 @@
 
   &.sent {
     .bubble-content {
-      background: #3b82f6;
+      background: var(--primary);
-      color: #fff;
+      color: var(--on-primary);
       border-radius: 18px;
     }
 
@@ -5624,12 +5620,12 @@
 }
 
 .message-bubble.sent .quoted-message {
-  background: color-mix(in srgb, #fff 12%, transparent);
+  background: color-mix(in srgb, var(--on-primary) 12%, transparent);
-  border-left-color: color-mix(in srgb, #fff 62%, #3b82f6);
+  border-left-color: color-mix(in srgb, var(--on-primary) 62%, var(--primary));
 
   .quoted-sender,
   .quoted-text {
-    color: color-mix(in srgb, #fff 82%, #3b82f6);
+    color: color-mix(in srgb, var(--on-primary) 82%, var(--primary));
   }
 }
 
@@ -5765,82 +5761,18 @@
   .hongbao-message,
   .transfer-message,
   .gift-message {
-    background: #2b2b2b;
+    background: var(--card-bg);
-    border-color: rgba(255, 255, 255, 0.08);
+    border-color: var(--border-color);
   }
 
   .message-bubble.received .bubble-content,
   .message-bubble.voice.sent .bubble-content {
-    background: #2f2f2f;
+    background: var(--bg-secondary);
   }
 }
 
-.chat-input-area {
-  position: absolute;
-  left: max(18px, env(safe-area-inset-left));
-  right: max(18px, env(safe-area-inset-right));
-  bottom: calc(14px + env(safe-area-inset-bottom));
-  z-index: 5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  pointer-events: none;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: -18px;
-    right: -18px;
-    bottom: -14px;
-    height: 86px;
-    background: linear-gradient(to top, var(--bg-primary) 62%, transparent);
-    pointer-events: none;
-    z-index: -1;
-  }
-}
-
-.chat-input-search-btn,
-.chat-input-shell {
-  height: 44px;
-  border: 1px solid var(--border-color);
-  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
-  color: var(--text-secondary);
-  box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(14px);
-}
-
-.chat-input-search-btn {
-  width: 44px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  pointer-events: auto;
-
-  &:hover:not(:disabled) {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.72;
-  }
-}
-
-.chat-input-shell {
-  width: min(680px, 100%);
-  border-radius: 14px;
-  padding: 0 14px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
 .scroll-to-bottom {
-  bottom: 74px;
+  bottom: 20px;
   background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
@@ -5873,9 +5805,4 @@
   .message-bubble {
     max-width: 88%;
   }
-
-  .chat-input-area {
-    left: 12px;
-    right: 12px;
-  }
 }

src/pages/ChatPage.tsx

@@ -30,7 +30,6 @@ import {
   requestExportSessionStatus
 } from '../services/exportBridge'
 import ChatHeader from './Chat/ChatHeader'
-import ChatInputArea from './Chat/ChatInputArea'
 import ChatMessageBubble from './Chat/ChatMessageBubble'
 import '../styles/batchTranscribe.scss'
 import './ChatPage.scss'
@@ -7202,7 +7201,6 @@ function ChatPage(props: ChatPageProps) {
                   <span>回到底部</span>
                 </div>
               </div>
-              <ChatInputArea placeholder="聊天记录" onFocusSearch={handleToggleInSessionSearch} />
 
               {/* 群成员面板 */}
               {showGroupMembersPanel && isCurrentSessionGroup && (