修改了历史问答的样式,修改了通用问答的样式

This commit is contained in:
moon 2025-10-14 09:53:18 +08:00
parent 2d4eeab6a2
commit 9fc56b7393
3 changed files with 120 additions and 38 deletions

View File

@ -18,9 +18,19 @@
</el-icon>
</el-badge>
</el-tooltip>
</div>
<!-- 导出PDF按钮 -->
<div class="export-pdf-button " @click="exportChatToPdf">
<el-tooltip content="导出为PDF" placement="left">
<el-icon :size="20">
<Document/>
</el-icon>
</el-tooltip>
</div>
<ChatBox
ref="chatBoxRef"
v-if="isDataLoaded"
:chat-type="chatType"
:user-id="userId"
@ -110,16 +120,33 @@ import { useAclStore } from '@/store/modules/acl'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { getRecommendations } from '@/api/prologue'
import { FullScreen, Close, Collection } from '@element-plus/icons-vue'
import {FullScreen, Close, Collection, Download, Document} from '@element-plus/icons-vue'
import {
getWorkflowAndDatasetTableData,
getAllUserDatasets,
addDatasetsToWorkflow,
removeDatasetsFromWorkflow
} from '@/api/functionKnowledgeConfig'
import { exportElementToPdf } from '@/utils/exportPdf.ts'
const { t, locale } = useI18n()
const aclStore = useAclStore()
const chatBoxRef = ref<InstanceType<typeof ChatBox>|null>(null)
const exportChatToPdf = async () => {
if (chatBoxRef.value) {
if (chatBoxRef.value.messagesQuantity === 0) {
ElMessage.error('当前没有消息可导出,请开始聊天吧')
return
}
await exportElementToPdf(chatBoxRef.value.messagesContainer, 'chat-history.pdf')
ElMessage.success('导出成功')
}
else {
ElMessage.error('导出失败')
}
}
//
const placeholder = ref('给AI助手发送消息')
@ -587,4 +614,40 @@ onUnmounted(() => {
.main-container.fullscreen-mode ~ .v-modal {
z-index: 19999 !important;
}
.export-pdf-button {
position: absolute;
top: 16px;
right: 110px;
z-index: 100;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--el-bg-color);
border: 1px solid var(--el-border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.export-pdf-button:hover {
background: var(--el-color-primary);
color: white;
border-color: var(--el-color-primary);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.export-pdf-button :deep(.el-icon) {
transition: color 0.3s ease;
}
.export-pdf-button:hover :deep(.el-icon) {
color: white;
}
.export-pdf-button :deep(.el-badge__content) {
border: none;
}
</style>

View File

@ -289,7 +289,7 @@
<style scoped>
.conversation-detail {
max-width: 800px;
max-width: 1000px;
margin: 0 auto;
padding: 0;
background: #fff;
@ -547,23 +547,42 @@
font-style: italic;
}
/* 滚动条样式 */
.timeline-container::-webkit-scrollbar {
width: 6px;
/* 表格样式 */
.message-content :deep(table) {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
display: block;
overflow-x: auto;
white-space: nowrap;
}
.timeline-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
.message-content :deep(th),
.message-content :deep(td) {
padding: 8px 12px;
border: 1px solid #eaecef;
text-align: left;
}
.timeline-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
.message-content :deep(th) {
background-color: #f6f8fa;
font-weight: 600;
}
.timeline-container::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
.message-content :deep(tr:nth-child(even)) {
background-color: #fafbfc;
}
/* 超过3列的表格特殊处理 */
.message-content :deep(table) {
max-width: 100%;
table-layout: fixed;
}
.message-content :deep(th),
.message-content :deep(td) {
overflow: hidden;
text-overflow: ellipsis;
}
.export-btn {

View File

@ -463,6 +463,6 @@
.rounded-devlog {
border-radius: 8px; /* 调整圆角大小 */
overflow: hidden; /* 确保内部内容也被圆角裁剪 */
width: 46%;
width:52%;
}
</style>