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