fix: 删除会话改用el-popover实现,点击生效
This commit is contained in:
@@ -39,18 +39,17 @@
|
|||||||
<div class="sidebar-item-name">{{ chat.name }}</div>
|
<div class="sidebar-item-name">{{ chat.name }}</div>
|
||||||
<div class="sidebar-item-msg">{{ chat.lastMsg || '暂无消息' }}</div>
|
<div class="sidebar-item-msg">{{ chat.lastMsg || '暂无消息' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<el-tooltip content="删除会话" placement="top">
|
<el-popover placement="left" :width="120" trigger="click">
|
||||||
<el-dropdown trigger="click" @command="(cmd) => handleChatAction(cmd, chat)">
|
<template #reference>
|
||||||
<span class="chat-action-btn">
|
<span class="chat-action-btn" title="删除会话">
|
||||||
<el-icon><MoreFilled /></el-icon>
|
<el-icon><MoreFilled /></el-icon>
|
||||||
</span>
|
</span>
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item command="delete">删除会话</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
<div class="chat-action-list" @click="deleteRecentChat(chat)">
|
||||||
</el-tooltip>
|
<el-icon><Delete /></el-icon>
|
||||||
|
删除会话
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="recentChats.length === 0" class="sidebar-empty">暂无最近聊天</div>
|
<div v-if="recentChats.length === 0" class="sidebar-empty">暂无最近聊天</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -589,6 +588,17 @@ const handleChatAction = async (command, chat) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const deleteRecentChat = async (chat) => {
|
||||||
|
try {
|
||||||
|
await deleteConversation(chat.id)
|
||||||
|
} catch (e) {
|
||||||
|
// 即使 API 失败也删本地
|
||||||
|
}
|
||||||
|
const idx = recentChats.value.findIndex(c => c.id === chat.id)
|
||||||
|
if (idx > -1) recentChats.value.splice(idx, 1)
|
||||||
|
if (currentContact.value?.id === chat.id) currentContact.value = null
|
||||||
|
}
|
||||||
|
|
||||||
const scrollToBottom = () => {
|
const scrollToBottom = () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (messagesRef.value) {
|
if (messagesRef.value) {
|
||||||
@@ -698,6 +708,8 @@ onUnmounted(() => { if (unsubscribeWs) unsubscribeWs() })
|
|||||||
.sidebar-empty { padding: 20px; text-align: center; color: #909399; font-size: 12px; }
|
.sidebar-empty { padding: 20px; text-align: center; color: #909399; font-size: 12px; }
|
||||||
.chat-action-btn { display: flex; align-items: center; cursor: pointer; padding: 4px; border-radius: 4px; color: #909399; transition: all 0.2s; }
|
.chat-action-btn { display: flex; align-items: center; cursor: pointer; padding: 4px; border-radius: 4px; color: #909399; transition: all 0.2s; }
|
||||||
.chat-action-btn:hover { color: #409eff; background: #f0f9ff; }
|
.chat-action-btn:hover { color: #409eff; background: #f0f9ff; }
|
||||||
|
.chat-action-list { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; border-radius: 4px; font-size: 13px; color: #f56c6c; transition: background 0.2s; }
|
||||||
|
.chat-action-list:hover { background: #fef0f0; }
|
||||||
|
|
||||||
.chat-main { flex: 1; display: flex; flex-direction: column; }
|
.chat-main { flex: 1; display: flex; flex-direction: column; }
|
||||||
.chat-header { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid #e4e7ed; }
|
.chat-header { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid #e4e7ed; }
|
||||||
|
|||||||
Reference in New Issue
Block a user