congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add group join approval flow with requireApproval setting

Browse Source 
- 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>
This commit is contained in:
congsh
2026-04-18 00:46:31 +08:00
parent 89d8ecec82
commit c76346294a
7 changed files with 473 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/groups.ts
+88 -5
View File
@@ -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
+46 -11
View File
@@ -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
+105 -7
View File
@@ -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
+41 -11
View File
@@ -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
+151
View File
@@ -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
+23 -3
View File
@@ -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
+19
View File
@@ -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
}
}