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/api/groups.ts

@@ -1,6 +1,6 @@
 // src/api/groups.ts
 import pb from './pocketbase'
-import type { Group } from '@/types'
+import type { Group, JoinRequest } from '@/types'
 
 // 创建群组
 export async function createGroup(data: {
@@ -14,7 +14,8 @@ export async function createGroup(data: {
   return pb.collection('groups').create({
     ...data,
     owner: user.id,
-    members: [user.id]
+    members: [user.id],
+    requireApproval: true
   })
 }
 
@@ -23,7 +24,6 @@ export async function getUserGroups(): Promise<Group[]> {
   const user = pb.authStore.model
   if (!user) return []
 
-  // 通过 members 字段过滤
   return pb.collection('groups').getList(1, 50, {
     filter: `members ~ "${user.id}"`
   }).then(res => res.items as unknown as Group[])
@@ -36,7 +36,7 @@ export async function getGroup(groupId: string): Promise<Group> {
   }) as unknown as Group
 }
 
-// 加入群组
+// 直接加入群组（无需审核时调用）
 export async function joinGroup(groupId: string) {
   const user = pb.authStore.model
   if (!user) throw new Error('未登录')
@@ -57,6 +57,80 @@ export async function joinGroup(groupId: string) {
   })
 }
 
+// 提交加入申请
+export async function createJoinRequest(groupId: string): Promise<JoinRequest> {
+  const user = pb.authStore.model
+  if (!user) throw new Error('未登录')
+
+  // 检查是否已有待审核的申请
+  const existing = await pb.collection('join_requests').getList(1, 1, {
+    filter: `group="${groupId}" && user="${user.id}" && status="pending"`
+  })
+  if (existing.items.length > 0) {
+    throw new Error('已提交过申请，请等待审核')
+  }
+
+  return pb.collection('join_requests').create({
+    group: groupId,
+    user: user.id,
+    status: 'pending'
+  }) as unknown as JoinRequest
+}
+
+// 获取群组的待审核申请（群主用）
+export async function getGroupJoinRequests(groupId: string): Promise<JoinRequest[]> {
+  const result = await pb.collection('join_requests').getList(1, 50, {
+    filter: `group="${groupId}" && status="pending"`,
+    sort: '-created',
+    expand: 'user'
+  })
+  return result.items as unknown as JoinRequest[]
+}
+
+// 获取我作为群主的所有群组的待审核申请
+export async function getMyGroupsJoinRequests(): Promise<JoinRequest[]> {
+  const user = pb.authStore.model
+  if (!user) return []
+
+  const result = await pb.collection('join_requests').getList(1, 50, {
+    filter: `group.owner="${user.id}" && status="pending"`,
+    sort: '-created',
+    expand: 'user,group'
+  })
+  return result.items as unknown as JoinRequest[]
+}
+
+// 审批加入申请
+export async function respondJoinRequest(
+  requestId: string,
+  status: 'approved' | 'rejected',
+  rejectReason?: string
+) {
+  const updateData: Record<string, unknown> = { status }
+  if (status === 'rejected' && rejectReason) {
+    updateData.rejectReason = rejectReason
+  }
+
+  const request = await pb.collection('join_requests').update(requestId, updateData) as any
+
+  // 如果同意，将用户加入群组
+  if (status === 'approved') {
+    const group = await pb.collection('groups').getOne(request.group) as any
+    const members: string[] = group.members || []
+    if (!members.includes(request.user)) {
+      members.push(request.user)
+      await pb.collection('groups').update(request.group, { members })
+    }
+  }
+
+  return request
+}
+
+// 更新群组审核设置
+export async function updateGroupApproval(groupId: string, requireApproval: boolean) {
+  return pb.collection('groups').update(groupId, { requireApproval })
+}
+
 // 退出群组
 export async function leaveGroup(groupId: string) {
   const user = pb.authStore.model
@@ -97,12 +171,21 @@ export function subscribeGroup(groupId: string, callback: (group: Group) => void
   })
 }
 
+// 订阅加入申请变更
+export function subscribeJoinRequests(groupId: string, callback: (request: JoinRequest) => void) {
+  return pb.collection('join_requests').subscribe('*', (payload) => {
+    const record = payload.record as any
+    if (record.group === groupId) {
+      callback(record as unknown as JoinRequest)
+    }
+  })
+}
+
 // 获取群组成员
 export async function getGroupMembers(groupId: string) {
   const group = await getGroup(groupId)
   const members = group.members as string[]
 
-  // 批量获取用户信息
   const users = await pb.collection('users').getList(1, 50, {
     filter: members.map(id => `id="${id}"`).join(' || ')
   })

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">
+      <template v-else>
-        <InvitationCard
+        <!-- 加入申请 -->
-          v-for="invitation in store.pendingInvitations"
+        <div v-if="store.pendingJoinRequests.length > 0" class="section">
-          :key="invitation.id"
+          <h4 class="section-title">加入申请 ({{ store.pendingJoinRequests.length }})</h4>
-          :invitation="invitation"
+          <div class="list">
-          @responded="onInvitationResponded"
+            <JoinRequestCard
-        />
+              v-for="req in store.pendingJoinRequests"
-      </div>
+              :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
+    const grp = groupStore.currentGroup
-    if (!group) return
+    if (!grp) return
-    // 直接更新群组的 members 列表
     const { pb } = await import('@/api/pocketbase')
-    const newMembers = group.members.filter(id => id !== userId)
+    const newMembers = grp.members.filter(id => id !== userId)
-    await pb.collection('groups').update(group.id, { members: newMembers })
+    await pb.collection('groups').update(grp.id, { members: newMembers })
-    await groupStore.setCurrentGroup(group.id)
+    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, createJoinRequest } from '@/api/groups'
-import { getGroup, joinGroup } 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)
+    if (groupInfo.value.requireApproval) {
-    await groupStore.loadGroups()
+      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>

frontend/src/stores/notification.ts

@@ -1,23 +1,29 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { Invitation } from '@/types'
+import type { Invitation, JoinRequest } from '@/types'
 import { getPendingInvitations, subscribeInvitations } from '@/api/invitations'
+import { getMyGroupsJoinRequests } from '@/api/groups'
 import { pb } from '@/api/pocketbase'
 
 export const useNotificationStore = defineStore('notification', () => {
   const pendingInvitations = ref<Invitation[]>([])
+  const pendingJoinRequests = ref<JoinRequest[]>([])
   const loading = ref(false)
   const showPanel = ref(false)
   let unsubFn: (() => Promise<void> | void) | null = null
+  let unsubJoinFn: (() => Promise<void> | void) | null = null
 
-  const unreadCount = computed(() => pendingInvitations.value.length)
+  const unreadCount = computed(() =>
+    pendingInvitations.value.length + pendingJoinRequests.value.length
+  )
 
   async function loadPendingInvitations() {
     try {
       loading.value = true
       pendingInvitations.value = await getPendingInvitations()
+      pendingJoinRequests.value = await getMyGroupsJoinRequests()
     } catch (error) {
-      console.error('加载待处理邀请失败:', error)
+      console.error('加载通知失败:', error)
     } finally {
       loading.value = false
     }
@@ -30,6 +36,10 @@ export const useNotificationStore = defineStore('notification', () => {
     unsubFn = await subscribeInvitations(() => {
       loadPendingInvitations()
     })
+
+    unsubJoinFn = await pb.collection('join_requests').subscribe('*', () => {
+      loadPendingInvitations()
+    })
   }
 
   function stopListening() {
@@ -37,18 +47,27 @@ export const useNotificationStore = defineStore('notification', () => {
       unsubFn()
       unsubFn = null
     }
+    if (unsubJoinFn) {
+      unsubJoinFn()
+      unsubJoinFn = null
+    }
   }
 
   function removeInvitation(invitationId: string) {
     pendingInvitations.value = pendingInvitations.value.filter(i => i.id !== invitationId)
   }
 
+  function removeJoinRequest(requestId: string) {
+    pendingJoinRequests.value = pendingJoinRequests.value.filter(r => r.id !== requestId)
+  }
+
   function togglePanel() {
     showPanel.value = !showPanel.value
   }
 
   return {
     pendingInvitations,
+    pendingJoinRequests,
     loading,
     showPanel,
     unreadCount,
@@ -56,6 +75,7 @@ export const useNotificationStore = defineStore('notification', () => {
     startListening,
     stopListening,
     removeInvitation,
+    removeJoinRequest,
     togglePanel
   }
 })

frontend/src/types/index.ts

@@ -66,6 +66,7 @@ export interface Group {
   owner: string
   members: string[]
   maxMembers: number
+  requireApproval: boolean
   created: string
   updated: string
   expand?: {
@@ -151,3 +152,21 @@ export interface GameFavorite {
   created: string
   updated: string
 }
+
+// 加入申请状态
+export type JoinRequestStatus = 'pending' | 'approved' | 'rejected'
+
+// 加入申请
+export interface JoinRequest {
+  id: string
+  group: string
+  user: string
+  status: JoinRequestStatus
+  rejectReason?: string
+  created: string
+  updated: string
+  expand?: {
+    group?: Group
+    user?: User
+  }
+}