hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-05-13 15:10:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: polish chat page refactor

Browse Source
This commit is contained in:
Jason
2026-05-06 22:36:11 +08:00
parent 0f0f5abb2a
commit ff15dc6e9f
6 changed files with 42 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
electron/main.ts
View File

@@ -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) {

36
src/components/MessageBubble.tsx
View File

@@ -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'

42
src/pages/Chat/ChatInputArea.tsx
View File

@@ -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)

6
src/pages/ChatHistoryPage.scss
View File

@@ -2,8 +2,8 @@
display: flex;
flex-direction: column;
height: 100vh;
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 96%, white) 0%, var(--bg-primary) 100%);
color: var(--text-primary);
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;

111
src/pages/ChatPage.scss
View File

@@ -2730,13 +2730,9 @@
width: clamp(280px, 25vw, 360px);
min-width: 280px;
max-width: 360px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--card-bg) 94%, #fff 6%) 0%,
var(--card-bg) 100%
);
background: var(--bg-primary);
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-bottom: calc(104px + env(safe-area-inset-bottom));
padding: 18px clamp(16px, 3vw, 48px) 28px;
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-bottom: calc(104px + env(safe-area-inset-bottom));
padding: 18px clamp(16px, 3vw, 48px) 28px;
padding-bottom: calc(28px + env(safe-area-inset-bottom));
gap: 0;
}
@@ -5536,8 +5532,8 @@
&.sent {
.bubble-content {
background: #3b82f6;
color: #fff;
background: var(--primary);
color: var(--on-primary);
border-radius: 18px;
}
@@ -5624,12 +5620,12 @@
}
.message-bubble.sent .quoted-message {
background: color-mix(in srgb, #fff 12%, transparent);
border-left-color: color-mix(in srgb, #fff 62%, #3b82f6);
background: color-mix(in srgb, var(--on-primary) 12%, transparent);
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;
border-color: rgba(255, 255, 255, 0.08);
background: var(--card-bg);
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;
}
}

2
src/pages/ChatPage.tsx
View File

@@ -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 && (