feat: maximize chat window size
Major layout optimizations to increase chat area: 1. MainLayout improvements: - Remove Content padding/margin (was 24px + 24px = 48px wasted) - Reduce Sider width from 280px to 240px - Set Content overflow:hidden and flex layout 2. AgentChatPage improvements: - Replace large Card header with compact toolbar (saved ~40px) - Remove Card wrapper (saved border/padding) - Direct div layout for chat area 3. Other pages: - Added padding:24px to HomePage/KnowledgePage/HistoryPage - Maintain consistent spacing for non-chat pages Result: Chat window now occupies ~85% of screen height instead of ~33% Verified working: AI responses, scrolling, and UI display
This commit is contained in:
@@ -1,15 +1,21 @@
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
background: #f5f5f5;
|
||||
overflow-x: hidden;
|
||||
padding: 20px 16px 20px 20px; /* 右侧留空给滚动条 */
|
||||
background: linear-gradient(180deg, #f5f7fa 0%, #fafbfc 100%);
|
||||
min-height: 0; /* 重要:让flex容器可以正确计算滚动 */
|
||||
max-height: 100%; /* 限制最大高度 */
|
||||
position: relative;
|
||||
scroll-behavior: smooth; /* 平滑滚动 */
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 20px;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@@ -40,14 +46,31 @@
|
||||
|
||||
.message-body {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
max-width: 85%;
|
||||
word-wrap: break-word;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.message-body:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.message-user .message-body {
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message-user .user-message-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message-assistant .message-body {
|
||||
background: white;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.user-message-text {
|
||||
@@ -168,22 +191,22 @@
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
/* 滚动条样式 - 优化 */
|
||||
.message-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.message-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.message-list::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.message-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user