TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复聊天页面渲染逻辑

Browse Source
This commit is contained in:
PingChuan
2025-06-06 16:34:50 +08:00
parent ab960f6dd0
commit 582aa8fa4d
7 changed files with 256 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles/components/chat-with-llm/chat-input.css
+53 -3
View File
@@ -29,7 +29,8 @@
.chat-input-textarea-wrapper {
flex: 1;
height: 10vh;
min-height: 40px;
max-height: 120px;
margin: 0 8px;
}
@@ -39,6 +40,8 @@
box-shadow: none !important;
padding: 8px 0 !important;
background: transparent !important;
min-height: 40px;
max-height: 120px;
}
.chat-input-button {
@@ -55,13 +58,43 @@
}
/* 响应式设计 */
@media (max-width: 1200px) {
.chat-input-container {
padding: 14px 18px;
}
.chat-input-content {
padding: 10px;
}
.chat-input-textarea-wrapper {
margin: 0 6px;
}
}
@media (max-width: 768px) {
.chat-input-container {
padding: 12px 16px;
}
.chat-input-content {
padding: 10px;
padding: 8px;
}
.chat-input-textarea-wrapper {
margin: 0 4px;
min-height: 36px;
max-height: 100px;
}
.chat-input-textarea {
min-height: 36px;
max-height: 100px;
font-size: 14px;
}
.chat-input-box {
border-radius: 24px;
}
}
@@ -71,7 +104,24 @@
}
.chat-input-content {
padding: 8px;
padding: 6px;
}
.chat-input-textarea-wrapper {
margin: 0 2px;
min-height: 32px;
max-height: 80px;
}
.chat-input-textarea {
min-height: 32px;
max-height: 80px;
font-size: 13px;
padding: 6px 0 !important;
}
.chat-input-box {
border-radius: 20px;
}
}
app/styles/components/chat-with-llm/chat-message.css
+56 -8
View File
@@ -150,19 +150,46 @@
}
/* 响应式设计 */
@media (max-width: 1200px) {
.message-card {
max-width: 90%;
}
.message-card.user {
margin-right: 20px;
}
.message-card.assistant {
margin-left: 20px;
}
}
@media (max-width: 768px) {
.message-card {
max-width: 95%;
}
.message-card.user {
margin-right: 30px;
/* 平板上减少右边距 */
margin-right: 15px;
}
.message-card.assistant {
margin-left: 30px;
/* 平板上减少左边距 */
margin-left: 15px;
}
.message-card .ant-card .ant-card-body {
padding: 10px 14px !important;
font-size: 14px;
}
.feedback-buttons {
margin-top: 8px;
gap: 6px;
}
.question-button {
padding: 6px 10px;
font-size: 13px;
}
}
@@ -172,12 +199,33 @@
}
.message-card.user {
margin-right: 15px;
/* 手机上进一步减少右边距 */
margin-right: 8px;
}
.message-card.assistant {
margin-left: 15px;
/* 手机上进一步减少左边距 */
margin-left: 8px;
}
.message-card .ant-card .ant-card-body {
padding: 8px 12px !important;
font-size: 13px;
line-height: 1.3 !important;
}
.message-timestamp {
font-size: 11px;
margin-top: 6px;
gap: 8px;
}
.suggested-questions {
margin-top: 12px;
}
.question-button {
margin-bottom: 6px;
margin-right: 6px;
padding: 5px 8px;
font-size: 12px;
}
}
app/styles/components/chat-with-llm/index.css
+36 -22
View File
@@ -2,17 +2,30 @@
/* 聊天容器 - 自适应布局 */
.chat-container {
height: 100%;
min-height: 100%;
width: 100%;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
/* 允许flex子元素收缩 */
background: #fff;
overflow: hidden;
position: relative;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 20px auto;
display: flex;
}
/* 可调整高度的聊天容器 */
.chat-container-adjustable {
/* display: flex; */
flex-direction: column;
width: 100%;
background: #fff;
overflow: hidden;
position: relative;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 高度将通过内联样式设置 */
}
/* 聊天头部 */
@@ -38,6 +51,8 @@
/* 聊天消息列表容器 */
.chat-messages {
flex: 1;
min-height: 0;
/* 允许flex子元素收缩 */
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
@@ -126,18 +141,6 @@
margin-bottom: 0;
}
/* 确保聊天容器在主内容区域中占满全部空间 */
.main-content .chat-container {
height: calc(89vh - 0px);
/* 减去任何顶部导航栏的高度 */
}
/* 如果有面包屑导航，需要调整高度 */
.main-content .breadcrumb+.chat-container {
height: calc(100vh - 60px);
/* 减去面包屑的高度 */
}
/* 侧边栏滚动区域样式 */
.h-full.overflow-y-auto::-webkit-scrollbar {
width: 6px;
@@ -165,14 +168,25 @@
}
/* 响应式设计 */
@media (max-width: 768px) {
@media (max-width: 1200px) {
.chat-container {
height: 100vh;
border-radius: 4px;
}
.chat-messages {
padding: 16px;
}
}
@media (max-width: 768px) {
.chat-container {
border-radius: 0;
box-shadow: none;
}
.chat-messages {
padding: 12px;
}
.chat-header {
padding: 0 16px;
@@ -186,15 +200,15 @@
@media (max-width: 480px) {
.chat-messages {
padding: 12px;
padding: 8px;
}
.chat-welcome {
padding: 20px 16px;
padding: 20px 12px;
}
.chat-welcome h3 {
font-size: 20px;
font-size: 18px;
}
.chat-welcome p {
app/styles/components/chat-with-llm/sidebar.css
+75 -15
View File
@@ -68,25 +68,85 @@
/* ========== 响应式设计 ========== */
/* 平板和手机端侧边栏 - 作用域：屏幕宽度小于768px时的侧边栏 */
@media (max-width: 768px) {
/* 大屏幕 - 1200px以上 */
@media (min-width: 1200px) {
.ant-layout-sider {
position: fixed !important;
/* 固定定位 */
left: 0;
/* 贴左边 */
top: 0;
/* 贴顶部 */
bottom: 0;
/* 贴底部 */
z-index: 1000;
/* 层级 */
position: relative !important;
}
}
/* 中等屏幕 - 992px到1199px */
@media (max-width: 1199px) and (min-width: 992px) {
.ant-layout-sider {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
}
/* 折叠状态的侧边栏 - 作用域：手机端折叠时隐藏侧边栏 */
.ant-layout-sider.ant-layout-sider-collapsed {
left: -200px;
/* 向左移出屏幕 */
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
}
}
/* 平板屏幕 - 768px到991px */
@media (max-width: 991px) and (min-width: 768px) {
.ant-layout-sider {
position: fixed !important;
left: 0;
top: 0;
bottom: 0;
z-index: 1000;
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
transform: translateX(0);
transition: transform 0.3s ease;
}
.ant-layout-sider.ant-layout-sider-collapsed {
transform: translateX(-100%);
}
}
/* 手机端 - 768px以下 */
@media (max-width: 767px) {
.ant-layout-sider {
position: fixed !important;
left: 0;
top: 0;
bottom: 0;
z-index: 1000;
width: 280px !important;
min-width: 280px !important;
max-width: 280px !important;
transform: translateX(0);
transition: transform 0.3s ease;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
.ant-layout-sider.ant-layout-sider-collapsed {
transform: translateX(-100%);
}
/* 手机端菜单项调整 */
.chat-sidebar-menu .ant-menu-item {
padding: 12px 16px;
margin: 6px 0;
}
.chat-sidebar-menu .ant-menu-item .ant-menu-title-content span {
font-size: 16px;
}
}
/* 小手机 - 480px以下 */
@media (max-width: 479px) {
.ant-layout-sider {
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
}
}
app/styles/components/chat-with-llm/thought-process.css
+1 -1
View File
@@ -25,7 +25,7 @@
}
.thought-process-collapsed {
max-height: 150px;
/* max-height: 150px; */
overflow: hidden;
position: relative;
}