manager/system-file
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 聊天删除按钮改用 el-dropdown 组件

Browse Source
This commit is contained in:
gaoxq
2026-04-03 17:20:28 +08:00
parent 2ee194ebdd
commit 3f4a294128
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web-vue/src/components/ChatDialog.vue
View File

@@ -39,9 +39,19 @@
<div class="sidebar-item-name">{{ chat.name }}</div>
<div class="sidebar-item-msg">{{ chat.lastMsg || '暂无消息' }}</div>
</div>
<el-button v-if="chat.lastMsg" class="delete-btn" link type="danger" @click.stop="deleteRecentChat(chat)">
<el-icon><Close /></el-icon>
</el-button>
<el-dropdown trigger="click" @command="(cmd) => handleChatAction(cmd, chat)" @click.stop>
<el-button link style="padding: 4px">
<el-icon><MoreFilled /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="delete">
<el-icon><Delete /></el-icon>
删除会话
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div v-if="recentChats.length === 0" class="sidebar-empty">暂无最近聊天</div>
</div>
@@ -215,7 +225,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { ChatLineRound, User, Search, Close, Loading, Picture, Paperclip, Download, ChatDotRound, Promotion } from '@element-plus/icons-vue'
import { ChatLineRound, User, Search, Loading, Picture, Paperclip, Download, ChatDotRound, Promotion, MoreFilled, Delete } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { getUsers, getMessages, sendMessage as sendMessageApi, uploadChatFile, getUnreadList, deleteConversation } from '@/api/message'
import { chatService } from '@/services/chat'
@@ -571,15 +581,13 @@ const downloadFile = async (msg) => {
// ======== 其他操作 ========
const deleteRecentChat = async (chat) => {
try {
const handleChatAction = async (command, chat) => {
if (command === 'delete') {
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 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 = () => {
@@ -689,8 +697,6 @@ onUnmounted(() => { if (unsubscribeWs) unsubscribeWs() })
.sidebar-item-status { font-size: 12px; color: #909399; }
.sidebar-item-status.online { color: #67c23a; }
.sidebar-empty { padding: 20px; text-align: center; color: #909399; font-size: 12px; }
.delete-btn { opacity: 0.4; transition: opacity 0.2s; }
.sidebar-item:hover .delete-btn { opacity: 1; }
.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; }