群聊

src/components/chat/GroupInfoPanel.vue

@@ -62,7 +62,7 @@
             <button
                 v-if="isOwner"
                 class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white transition flex items-center gap-2"
-                @click="handleDissolve"
+                @click="showDissolveConfirmDialog"
             >
               <i class="fas fa-trash"></i>
               <span>解散群聊</span>
@@ -70,7 +70,7 @@
             <button
                 v-else
                 class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white transition flex items-center gap-2"
-                @click="handleQuit"
+                @click="showQuitConfirmDialog"
             >
               <i class="fas fa-sign-out-alt"></i>
               <span>退出群聊</span>
@@ -111,7 +111,7 @@
                 <button
                     v-if="member.role !== 2"
                     class="text-gray-400 hover:text-red-400 transition text-sm"
-                    @click.stop="handleRemoveMember(member)"
+                    @click.stop="showRemoveMemberConfirmDialog(member)"
                 >
                   <i class="fas fa-user-minus"></i>
                 </button>
@@ -190,6 +190,40 @@
         </div>
       </div>
     </div>
+    
+    <!-- 确认模态框 -->
+    <ConfirmModal
+        :show="showRemoveMemberConfirm"
+        title="移除成员"
+        :message="removeMemberMessage"
+        type="danger"
+        confirm-text="移除"
+        cancel-text="取消"
+        @confirm="handleRemoveMember"
+        @cancel="showRemoveMemberConfirm = false; pendingMember = null"
+    />
+    
+    <ConfirmModal
+        :show="showQuitConfirm"
+        title="退出群聊"
+        message="确定要退出该群聊吗？"
+        type="warning"
+        confirm-text="退出"
+        cancel-text="取消"
+        @confirm="handleQuit"
+        @cancel="showQuitConfirm = false"
+    />
+    
+    <ConfirmModal
+        :show="showDissolveConfirm"
+        title="解散群聊"
+        message="确定要解散该群聊吗？此操作不可恢复！"
+        type="danger"
+        confirm-text="解散"
+        cancel-text="取消"
+        @confirm="handleDissolve"
+        @cancel="showDissolveConfirm = false"
+    />
   </div>
 </template>
 
@@ -202,6 +236,7 @@ import { useToastStore } from '@/stores/toast'
 import * as groupApi from '@/api/modules/room'
 import * as contactApi from '@/api/modules/contact'
 import Avatar from '@/components/common/Avatar.vue'
+import ConfirmModal from '@/components/common/ConfirmModal.vue'
 
 interface Props {
   show: boolean
@@ -228,6 +263,10 @@ const availableContacts = ref<Contact[]>([])
 const showInviteModal = ref(false)
 const showEditModal = ref(false)
 const editForm = ref({ name: '', avatar: '' })
+const showRemoveMemberConfirm = ref(false)
+const showQuitConfirm = ref(false)
+const showDissolveConfirm = ref(false)
+const pendingMember = ref<GroupMember | null>(null)
 
 // 当前用户角色
 const currentUserRole = computed(() => {
@@ -248,6 +287,12 @@ const canInvite = computed(() => isOwner.value || isAdmin.value)
 // 是否可以编辑群信息
 const canEdit = computed(() => isOwner.value)
 
+// 移除成员确认消息
+const removeMemberMessage = computed(() => {
+  const name = pendingMember.value?.user?.name || pendingMember.value?.nickname || '未知'
+  return `确定要将 ${name} 移出群聊吗？`
+})
+
 // 加载群信息
 async function loadGroupInfo() {
   if (!props.roomId) return
@@ -295,14 +340,19 @@ function handleMemberClick(member: GroupMember) {
 }
 
 // 移除成员
-async function handleRemoveMember(member: GroupMember) {
-  if (!confirm(`确定要将 ${member.user?.name || member.nickname} 移出群聊吗？`)) {
-    return
-  }
+function showRemoveMemberConfirmDialog(member: GroupMember) {
+  pendingMember.value = member
+  showRemoveMemberConfirm.value = true
+}
+
+async function handleRemoveMember() {
+  if (!pendingMember.value) return
   
   try {
-    await groupApi.removeGroupMember(props.roomId, member.user_id)
+    await groupApi.removeGroupMember(props.roomId, pendingMember.value.user_id)
     toastStore.success('已移除成员')
+    showRemoveMemberConfirm.value = false
+    pendingMember.value = null
     await loadGroupInfo()
     emit('updated')
   } catch (error: any) {
@@ -345,14 +395,15 @@ async function handleUpdateGroup() {
 }
 
 // 退出群聊
+function showQuitConfirmDialog() {
+  showQuitConfirm.value = true
+}
+
 async function handleQuit() {
-  if (!confirm('确定要退出该群聊吗？')) {
-    return
-  }
-  
   try {
     await groupApi.quitGroup(props.roomId)
     toastStore.success('已退出群聊')
+    showQuitConfirm.value = false
     emit('quit')
     emit('close')
   } catch (error: any) {
@@ -361,11 +412,11 @@ async function handleQuit() {
 }
 
 // 解散群聊
+function showDissolveConfirmDialog() {
+  showDissolveConfirm.value = true
+}
+
 async function handleDissolve() {
-  if (!confirm('确定要解散该群聊吗？此操作不可恢复！')) {
-    return
-  }
-  
   try {
     await groupApi.dissolveGroup(props.roomId)
     toastStore.success('群聊已解散')