删除确认框

src/views/pk-mini/Message.vue

@@ -21,6 +21,11 @@
               </div>
               <div class="conv-preview">{{ item.lastMessage?.payload?.text || '' }}</div>
             </div>
+            <span
+              class="conv-delete"
+              @click.stop="removeConversation(item, index)"
+              title="删除会话"
+            >×</span>
           </div>
 
           <div v-if="chatList.length === 0" class="empty-tip">暂无会话</div>
@@ -92,13 +97,14 @@ import {
   goEasySendMessage,
   goEasySendImageMessage,
   goEasyMessageRead,
+  goEasyRemoveConversation,
   getPkGoEasy,
   GoEasy
 } from '@/utils/pk-mini/goeasy'
 import PictureMessage from '@/components/pk-mini/chat/PictureMessage.vue'
 import MiniPKMessage from '@/components/pk-mini/chat/MiniPKMessage.vue'
 import VoiceMessage from '@/components/pk-mini/chat/VoiceMessage.vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { pkUnreadStore } from '@/stores/pk-mini/notice.js'
 
 const defaultAvatar = 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/default-avatar.png'
@@ -229,6 +235,29 @@ async function handleFileSelect(event) {
   }
 }
 
+async function removeConversation(item, index) {
+  try {
+    await ElMessageBox.confirm('确定删除该会话吗？', '删除会话', {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+  } catch {
+    return
+  }
+  try {
+    await goEasyRemoveConversation(item)
+    chatList.value.splice(index, 1)
+    if (selectedChat.value === item) {
+      selectedChat.value = null
+      messagesList.value = []
+    }
+  } catch (e) {
+    console.error('删除会话失败', e)
+    ElMessage.error('删除会话失败')
+  }
+}
+
 onMounted(() => {
   currentUser.value = getMainUserData() || {}
   if (isGoEasyEnabled()) {
@@ -491,6 +520,29 @@ onUnmounted(() => {
   margin-bottom: 20px;
 }
 
+.conversation-item:hover .conv-delete,
+.conversation-item.active .conv-delete {
+  display: flex;
+}
+
+.conv-delete {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  font-size: 16px;
+  line-height: 1;
+  color: #94a3b8;
+  flex-shrink: 0;
+  margin-left: 4px;
+  &:hover {
+    background-color: #fee2e2;
+    color: #ef4444;
+  }
+}
+
 .empty-tip {
   text-align: center;
   padding: 50px;