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>

frontend/src/components/common/NotificationPanel.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue'
 import { useNotificationStore } from '@/stores/notification'
 import InvitationCard from '@/components/team/InvitationCard.vue'
+import JoinRequestCard from '@/components/group/JoinRequestCard.vue'
 
 const store = useNotificationStore()
 
@@ -12,6 +13,10 @@ onMounted(() => {
 function onInvitationResponded(id: string, _accepted: boolean) {
   store.removeInvitation(id)
 }
+
+function onJoinRequestResponded(id: string) {
+  store.removeJoinRequest(id)
+}
 </script>
 
 <template>
@@ -22,17 +27,36 @@ function onInvitationResponded(id: string, _accepted: boolean) {
     size="380px"
   >
     <div class="notification-panel">
-      <div v-if="store.pendingInvitations.length === 0" class="empty">
+      <div v-if="store.unreadCount === 0" class="empty">
         暂无新通知
       </div>
-      <div v-else class="invitation-list">
-        <InvitationCard
-          v-for="invitation in store.pendingInvitations"
-          :key="invitation.id"
-          :invitation="invitation"
-          @responded="onInvitationResponded"
-        />
-      </div>
+      <template v-else>
+        <!-- 加入申请 -->
+        <div v-if="store.pendingJoinRequests.length > 0" class="section">
+          <h4 class="section-title">加入申请 ({{ store.pendingJoinRequests.length }})</h4>
+          <div class="list">
+            <JoinRequestCard
+              v-for="req in store.pendingJoinRequests"
+              :key="req.id"
+              v-bind="req"
+              @responded="onJoinRequestResponded(req.id)"
+            />
+          </div>
+        </div>
+
+        <!-- 组队邀请 -->
+        <div v-if="store.pendingInvitations.length > 0" class="section">
+          <h4 class="section-title">组队邀请 ({{ store.pendingInvitations.length }})</h4>
+          <div class="list">
+            <InvitationCard
+              v-for="invitation in store.pendingInvitations"
+              :key="invitation.id"
+              :invitation="invitation"
+              @responded="onInvitationResponded"
+            />
+          </div>
+        </div>
+      </template>
     </div>
   </el-drawer>
 </template>
@@ -48,9 +72,20 @@ function onInvitationResponded(id: string, _accepted: boolean) {
   padding: 48px 0;
 }
 
-.invitation-list {
+.section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gg-text-secondary);
+  margin: 0 0 10px;
+}
+
+.list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 </style>

frontend/src/components/group/GroupMembersPanel.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useGroupStore } from '@/stores/group'
 import { useUserStore } from '@/stores/user'
+import { getGroupJoinRequests, updateGroupApproval, subscribeJoinRequests } from '@/api/groups'
+import { ElSwitch } from 'element-plus'
+import type { JoinRequest } from '@/types'
+import JoinRequestCard from './JoinRequestCard.vue'
 
 const groupStore = useGroupStore()
 const userStore = useUserStore()
@@ -11,6 +15,29 @@ const group = computed(() => groupStore.currentGroup)
 const members = computed(() => groupStore.currentMembers)
 const isOwner = computed(() => group.value?.owner === userStore.userId)
 
+const joinRequests = ref<JoinRequest[]>([])
+const approvalLoading = ref(false)
+
+onMounted(async () => {
+  if (group.value && isOwner.value) {
+    await loadJoinRequests()
+    subscribeJoinRequests(group.value.id, () => {
+      loadJoinRequests()
+    })
+  }
+})
+
+onUnmounted(() => {
+  // cleanup handled by PocketBase
+})
+
+async function loadJoinRequests() {
+  if (!group.value) return
+  try {
+    joinRequests.value = await getGroupJoinRequests(group.value.id)
+  } catch { /* ignore */ }
+}
+
 function copyGroupId() {
   if (group.value?.id) {
     navigator.clipboard.writeText(group.value.id)
@@ -22,18 +49,38 @@ async function removeMember(userId: string, username: string) {
   if (!isOwner.value) return
   try {
     await ElMessageBox.confirm(`确定要将 ${username} 移出群组吗？`, '确认', { type: 'warning' })
-    const group = groupStore.currentGroup
-    if (!group) return
-    // 直接更新群组的 members 列表
+    const grp = groupStore.currentGroup
+    if (!grp) return
     const { pb } = await import('@/api/pocketbase')
-    const newMembers = group.members.filter(id => id !== userId)
-    await pb.collection('groups').update(group.id, { members: newMembers })
-    await groupStore.setCurrentGroup(group.id)
+    const newMembers = grp.members.filter(id => id !== userId)
+    await pb.collection('groups').update(grp.id, { members: newMembers })
+    await groupStore.setCurrentGroup(grp.id)
     ElMessage.success('已移除成员')
   } catch {
     // 用户取消
   }
 }
+
+async function handleApprovalChange(val: string | number | boolean) {
+  if (!group.value) return
+  approvalLoading.value = true
+  try {
+    await updateGroupApproval(group.value.id, !!val)
+    await groupStore.setCurrentGroup(group.value.id)
+    ElMessage.success(val ? '已开启加入审核' : '已关闭加入审核')
+  } catch {
+    ElMessage.error('更新设置失败')
+  } finally {
+    approvalLoading.value = false
+  }
+}
+
+async function onJoinRequestResponded(requestId: string) {
+  joinRequests.value = joinRequests.value.filter(r => r.id !== requestId)
+  if (group.value) {
+    await groupStore.setCurrentGroup(group.value.id)
+  }
+}
 </script>
 
 <template>
@@ -51,11 +98,34 @@ async function removeMember(userId: string, username: string) {
       </div>
     </div>
 
+    <!-- 审核开关（仅群主可见） -->
+    <div v-if="isOwner" class="approval-row">
+      <span class="info-label">加入需审核</span>
+      <el-switch
+        :model-value="group.requireApproval"
+        :loading="approvalLoading"
+        @change="handleApprovalChange"
+      />
+    </div>
+
     <div class="info-row">
       <span class="info-label">成员</span>
       <span class="info-value">{{ members.length }} / {{ group.maxMembers }}</span>
     </div>
 
+    <!-- 待审核申请（仅群主可见） -->
+    <div v-if="isOwner && joinRequests.length > 0" class="requests-section">
+      <h4 class="requests-title">待审核申请 ({{ joinRequests.length }})</h4>
+      <div class="requests-list">
+        <JoinRequestCard
+          v-for="req in joinRequests"
+          :key="req.id"
+          v-bind="req"
+          @responded="onJoinRequestResponded(req.id)"
+        />
+      </div>
+    </div>
+
     <div class="members-list">
       <div v-for="member in members" :key="member.id" class="member-row">
         <img :src="member.avatar || '/default-avatar.svg'" class="member-avatar" alt="" />
@@ -137,6 +207,13 @@ async function removeMember(userId: string, username: string) {
   opacity: 0.9;
 }
 
+.approval-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
 .info-row {
   display: flex;
   justify-content: space-between;
@@ -155,6 +232,27 @@ async function removeMember(userId: string, username: string) {
   font-weight: 500;
 }
 
+.requests-section {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: rgba(245, 158, 11, 0.06);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  border-radius: var(--gg-radius-sm);
+}
+
+.requests-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f59e0b;
+  margin: 0 0 10px;
+}
+
+.requests-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .members-list {
   display: flex;
   flex-direction: column;

frontend/src/components/group/JoinGroupDialog.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useGroupStore } from '@/stores/group'
-import { getGroup, joinGroup } from '@/api/groups'
+import { getGroup, joinGroup, createJoinRequest } from '@/api/groups'
+import type { Group } from '@/types'
 
 const props = defineProps<{
   modelValue: boolean
@@ -12,15 +12,13 @@ const emit = defineEmits<{
   'update:modelValue': [value: boolean]
 }>()
 
-const groupStore = useGroupStore()
-
 const visible = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val)
 })
 
 const groupId = ref('')
-const groupInfo = ref<any>(null)
+const groupInfo = ref<Group | null>(null)
 const loading = ref(false)
 const joining = ref(false)
 
@@ -32,7 +30,7 @@ async function searchGroup() {
   loading.value = true
   try {
     groupInfo.value = await getGroup(groupId.value.trim())
-  } catch (error) {
+  } catch {
     groupInfo.value = null
     ElMessage.error('未找到该群组')
   } finally {
@@ -44,14 +42,18 @@ async function handleJoin() {
   if (!groupInfo.value) return
   joining.value = true
   try {
-    await joinGroup(groupInfo.value.id)
-    await groupStore.loadGroups()
+    if (groupInfo.value.requireApproval) {
+      await createJoinRequest(groupInfo.value.id)
+      ElMessage.success('已提交加入申请，等待群主审核')
+    } else {
+      await joinGroup(groupInfo.value.id)
+      ElMessage.success('已成功加入群组')
+    }
     visible.value = false
     groupId.value = ''
     groupInfo.value = null
-    ElMessage.success('已申请加入群组，等待群主审核')
   } catch (error: any) {
-    ElMessage.error(error.message || '加入群组失败')
+    ElMessage.error(error.message || '操作失败')
   } finally {
     joining.value = false
   }
@@ -80,8 +82,12 @@ function reset() {
           <span class="preview-members">{{ groupInfo.members?.length || 0 }} / {{ groupInfo.maxMembers }} 人</span>
         </div>
         <p v-if="groupInfo.description" class="preview-desc">{{ groupInfo.description }}</p>
+        <div class="approval-tag">
+          <span v-if="groupInfo.requireApproval" class="tag-approval">需要审核</span>
+          <span v-else class="tag-direct">直接加入</span>
+        </div>
         <el-button type="primary" :loading="joining" @click="handleJoin" style="width:100%; margin-top: 12px;">
-          申请加入
+          {{ groupInfo.requireApproval ? '申请加入' : '加入群组' }}
         </el-button>
       </div>
     </div>
@@ -144,4 +150,28 @@ function reset() {
   font-size: 14px;
   color: var(--gg-text-secondary);
 }
+
+.approval-tag {
+  margin-top: 10px;
+}
+
+.tag-approval {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  background: rgba(245, 158, 11, 0.12);
+  color: #f59e0b;
+}
+
+.tag-direct {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  background: rgba(5, 150, 105, 0.12);
+  color: var(--gg-primary);
+}
 </style>

frontend/src/components/group/JoinRequestCard.vue

@@ -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>