修改了历史问答的样式,修改了通用问答的样式
This commit is contained in:
parent
2d4eeab6a2
commit
9fc56b7393
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -463,6 +463,6 @@
|
|||
.rounded-devlog {
|
||||
border-radius: 8px; /* 调整圆角大小 */
|
||||
overflow: hidden; /* 确保内部内容也被圆角裁剪 */
|
||||
width: 46%;
|
||||
width:52%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue