feat: add group join approval flow with requireApproval setting

- New join_requests PocketBase collection for pending join applications - Group requireApproval field (default true) with owner toggle - JoinGroupDialog: apply when approval required, direct join when not - JoinRequestCard component for accept/reject in notifications and group panel - NotificationPanel shows both invitations and join requests - GroupMembersPanel shows pending requests and approval switch for owners Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-18 00:46:31 +08:00
parent 89d8ecec82
commit c76346294a
7 changed files with 473 additions and 37 deletions
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { respondJoinRequest } from '@/api/groups'
+import type { JoinRequest } from '@/types'
+
+const props = defineProps<JoinRequest>()
+const emit = defineEmits<{ responded: [] }>()
+
+const loading = ref(false)
+
+async function handleApprove() {
+  loading.value = true
+  try {
+    await respondJoinRequest(props.id, 'approved')
+    ElMessage.success('已通过申请')
+    emit('responded')
+  } catch (error: any) {
+    ElMessage.error(error.message || '操作失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleReject() {
+  try {
+    const { value } = await ElMessageBox.prompt('拒绝原因（可选）', '拒绝申请', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputPlaceholder: '输入拒绝原因...'
+    })
+    loading.value = true
+    await respondJoinRequest(props.id, 'rejected', value || undefined)
+    ElMessage.success('已拒绝申请')
+    emit('responded')
+  } catch {
+    // 用户取消
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="join-request-card">
+    <div class="request-info">
+      <img
+        :src="(props as any).expand?.user?.avatar || '/default-avatar.svg'"
+        :alt="(props as any).expand?.user?.username"
+        class="avatar"
+      />
+      <div class="info-text">
+        <span class="username">{{ (props as any).expand?.user?.username || '用户' }}</span>
+        <span class="group-name">申请加入「{{ (props as any).expand?.group?.name || '群组' }}」</span>
+      </div>
+    </div>
+    <div class="request-actions">
+      <button class="approve-btn" :disabled="loading" @click="handleApprove">同意</button>
+      <button class="reject-btn" :disabled="loading" @click="handleReject">拒绝</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.join-request-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  background: var(--gg-bg);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-sm);
+  gap: 12px;
+}
+
+.request-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--gg-border);
+  flex-shrink: 0;
+}
+
+.info-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.username {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--gg-text);
+}
+
+.group-name {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.request-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.approve-btn {
+  padding: 5px 14px;
+  border: none;
+  border-radius: 6px;
+  background: var(--gg-gradient-green);
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.approve-btn:hover:not(:disabled) { opacity: 0.85; }
+.approve-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.reject-btn {
+  padding: 5px 14px;
+  border: 1px solid var(--gg-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gg-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.reject-btn:hover:not(:disabled) {
+  border-color: var(--gg-danger);
+  color: var(--gg-danger);
+}
+
+.reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>