177 lines
3.7 KiB
Vue
177 lines
3.7 KiB
Vue
<template>
|
|
<el-dropdown trigger="hover" @command="handleHistorySelect">
|
|
<el-button
|
|
:class="['history-btn', { 'icon-only': iconOnly }]"
|
|
:icon="Clock"
|
|
text
|
|
bg
|
|
>
|
|
<span v-if="!iconOnly">历史会话</span>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<template v-if="currentModeHistory.length">
|
|
<el-dropdown-item
|
|
v-for="chat in currentModeHistory"
|
|
:key="chat.conversationId"
|
|
:command="chat.conversationId"
|
|
class="history-item"
|
|
>
|
|
<div class="history-content">
|
|
<span class="history-title">{{ formatChatTitle(chat) }}</span>
|
|
<el-button
|
|
class="delete-btn"
|
|
:icon="Delete"
|
|
link
|
|
@click.stop="handleDelete(chat.conversationId)"
|
|
/>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</template>
|
|
<el-dropdown-item v-else disabled>暂无历史会话</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useChatStore } from '@/store/chat'
|
|
import { Clock, Delete } from '@element-plus/icons-vue'
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
|
const props = defineProps({
|
|
iconOnly: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const chatStore = useChatStore()
|
|
|
|
const currentModeHistory = computed(() => {
|
|
return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
|
|
})
|
|
|
|
const formatChatTitle = (chat) => {
|
|
if (chat.messages && chat.messages.length > 0) {
|
|
const firstMessage = chat.messages[0].question
|
|
return firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
|
|
}
|
|
return `会话 ${chat.conversationId.substring(0, 8)}`
|
|
}
|
|
|
|
const handleHistorySelect = (conversationId) => {
|
|
chatStore.switchConversation(conversationId)
|
|
}
|
|
|
|
const handleDelete = async (conversationId) => {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
'确定要删除这个会话吗？删除后无法恢复。',
|
|
'删除确认',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
confirmButtonClass: 'el-button--danger'
|
|
}
|
|
)
|
|
chatStore.deleteConversation(conversationId)
|
|
} catch {
|
|
// 用户取消删除
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.history-btn {
|
|
height: 32px;
|
|
padding: 4px 12px;
|
|
color: inherit;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border: none;
|
|
background: transparent !important;
|
|
|
|
&.icon-only {
|
|
width: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: #07c160 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
:deep(.el-icon) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-dropdown-menu__item) {
|
|
font-size: 13px;
|
|
padding: 8px 16px;
|
|
line-height: 1.4;
|
|
max-width: 300px;
|
|
overflow-x: hidden;
|
|
|
|
&:hover .delete-btn {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
:deep(.el-dropdown-menu) {
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.history-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
width: 100%;
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.history-title {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-right: 24px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
right: -8px;
|
|
opacity: 0;
|
|
transform: translateX(10px);
|
|
transition: all 0.3s ease;
|
|
height: 24px;
|
|
width: 24px;
|
|
padding: 0;
|
|
color: #f56c6c;
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
color: #f56c6c;
|
|
background-color: rgba(245, 108, 108, 0.1);
|
|
}
|
|
|
|
:deep(.el-icon) {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style> |