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/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;