feat: improve join request visibility for admins and applicants
- Add prominent pending join request badge on GroupView header with pulse animation for admins/owners - Clicking badge smoothly scrolls to request list with highlight - Add "My Join Requests" section on Profile page - Show status (pending/approved/rejected), timestamp, and reject reason - Add API: getMyJoinRequests() to fetch user's full request history Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -118,6 +118,20 @@ export async function getMyGroupsJoinRequests(): Promise<JoinRequest[]> {
|
||||
return result.items as unknown as JoinRequest[]
|
||||
}
|
||||
|
||||
// 获取当前用户的所有入群申请（包括所有状态）
|
||||
export async function getMyJoinRequests(): Promise<JoinRequest[]> {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return []
|
||||
|
||||
const result = await pb.collection('join_requests').getList(1, 50, {
|
||||
filter: `user="${user.id}"`,
|
||||
sort: '-created',
|
||||
expand: 'group',
|
||||
$autoCancel: false
|
||||
})
|
||||
return result.items as unknown as JoinRequest[]
|
||||
}
|
||||
|
||||
// 审批加入申请
|
||||
export async function respondJoinRequest(
|
||||
requestId: string,
|
||||
|
||||
@@ -377,6 +377,16 @@ async function handleRemoveAdmin(userId: string, username: string) {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.requests-section--highlight {
|
||||
animation: highlight-pulse 2s ease;
|
||||
}
|
||||
|
||||
@keyframes highlight-pulse {
|
||||
0% { background: rgba(245, 158, 11, 0.06); }
|
||||
30% { background: rgba(245, 158, 11, 0.3); }
|
||||
100% { background: rgba(245, 158, 11, 0.06); }
|
||||
}
|
||||
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -7,6 +7,8 @@ import { useTeamStore } from '@/stores/team'
|
||||
import { pb } from '@/api/pocketbase'
|
||||
import { settlePoll } from '@/api/polls'
|
||||
import { closeBet } from '@/api/bets'
|
||||
import { getGroupJoinRequests } from '@/api/groups'
|
||||
import type { JoinRequest } from '@/types'
|
||||
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||||
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||||
import GroupMembersPanel from '@/components/group/GroupMembersPanel.vue'
|
||||
@@ -38,6 +40,10 @@ const groupId = route.params.id as string
|
||||
|
||||
const group = computed(() => groupStore.currentGroup)
|
||||
const members = computed(() => groupStore.currentMembers)
|
||||
const canManage = computed(() => groupStore.canManageGroup)
|
||||
|
||||
const pendingJoinRequests = ref<JoinRequest[]>([])
|
||||
const showPendingRequests = computed(() => canManage.value && pendingJoinRequests.value.length > 0)
|
||||
|
||||
const ownerName = computed(() => {
|
||||
const owner = members.value.find(m => m.id === group.value?.owner)
|
||||
@@ -79,6 +85,13 @@ const statusColors: Record<string, string> = {
|
||||
onMounted(async () => {
|
||||
await groupStore.setCurrentGroup(groupId)
|
||||
|
||||
// 加载待审核入群申请（管理员可见）
|
||||
if (canManage.value) {
|
||||
try {
|
||||
pendingJoinRequests.value = await getGroupJoinRequests(groupId)
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// 订阅用户状态变更
|
||||
unsubFns.push(await pb.collection('users').subscribe('*', () => {
|
||||
groupStore.setCurrentGroup(groupId)
|
||||
@@ -171,6 +184,15 @@ async function checkExpiredBets() {
|
||||
console.error('检查过期竞猜失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToRequests() {
|
||||
const el = document.querySelector('.requests-section')
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
el.classList.add('requests-section--highlight')
|
||||
setTimeout(() => el.classList.remove('requests-section--highlight'), 2000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -180,6 +202,10 @@ async function checkExpiredBets() {
|
||||
<div class="header-main">
|
||||
<h1 class="group-name">{{ group?.name }}</h1>
|
||||
<span class="member-count-badge">{{ members.length }} 成员</span>
|
||||
<div v-if="showPendingRequests" class="pending-requests-badge" @click="scrollToRequests">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<span>{{ pendingJoinRequests.length }} 个待审核</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="group-desc">{{ group?.description || '暂无群组简介' }}</p>
|
||||
<div class="header-meta">
|
||||
@@ -373,6 +399,34 @@ async function checkExpiredBets() {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pending-requests-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
padding: 6px 16px;
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid rgba(245, 158, 11, 0.35);
|
||||
border-radius: 20px;
|
||||
color: #d97706;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
animation: pulse-badge 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pending-requests-badge:hover {
|
||||
background: rgba(245, 158, 11, 0.22);
|
||||
border-color: rgba(245, 158, 11, 0.55);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@keyframes pulse-badge {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.25); }
|
||||
50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
font-size: 14px;
|
||||
color: var(--gg-text-muted);
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<!-- src/views/Profile.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElCard, ElInput, ElButton, ElMessage } from 'element-plus'
|
||||
import { ElCard, ElInput, ElButton, ElMessage, ElEmpty } from 'element-plus'
|
||||
import { getMyJoinRequests } from '@/api/groups'
|
||||
import type { JoinRequest } from '@/types'
|
||||
import { Clock, CircleCheck, CircleClose, Warning } from '@element-plus/icons-vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
@@ -11,6 +14,40 @@ const email = ref(userStore.user?.email || '')
|
||||
const avatar = ref(userStore.user?.avatar || '')
|
||||
const loading = ref(false)
|
||||
|
||||
const myJoinRequests = ref<JoinRequest[]>([])
|
||||
const requestsLoading = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
await loadMyJoinRequests()
|
||||
})
|
||||
|
||||
async function loadMyJoinRequests() {
|
||||
requestsLoading.value = true
|
||||
try {
|
||||
myJoinRequests.value = await getMyJoinRequests()
|
||||
} catch (error) {
|
||||
console.error('加载入群申请失败:', error)
|
||||
} finally {
|
||||
requestsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function formatTime(dateStr: string) {
|
||||
const d = new Date(dateStr)
|
||||
return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const statusConfig: Record<string, { label: string; color: string; bg: string; icon: any }> = {
|
||||
pending: { label: '待审核', color: '#d97706', bg: 'rgba(245, 158, 11, 0.1)', icon: Clock },
|
||||
approved: { label: '已通过', color: '#059669', bg: 'rgba(5, 150, 105, 0.1)', icon: CircleCheck },
|
||||
rejected: { label: '已拒绝', color: '#dc2626', bg: 'rgba(220, 38, 38, 0.1)', icon: CircleClose }
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
try {
|
||||
loading.value = true
|
||||
@@ -64,6 +101,52 @@ function handleAvatarUpload() {
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 我的入群申请 -->
|
||||
<el-card class="requests-card">
|
||||
<template #header>
|
||||
<div class="requests-header">
|
||||
<span class="requests-title">我的入群申请</span>
|
||||
<button class="refresh-btn" @click="loadMyJoinRequests">刷新</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="requestsLoading" class="requests-loading">
|
||||
<div class="loading-spinner" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<el-empty v-else-if="myJoinRequests.length === 0" description="暂无入群申请记录" />
|
||||
|
||||
<div v-else class="requests-list">
|
||||
<div
|
||||
v-for="req in myJoinRequests"
|
||||
:key="req.id"
|
||||
class="request-item"
|
||||
>
|
||||
<div class="request-main">
|
||||
<span class="request-group">{{ req.expand?.group?.name || '未知群组' }}</span>
|
||||
<span
|
||||
class="request-status"
|
||||
:style="{
|
||||
color: statusConfig[req.status].color,
|
||||
background: statusConfig[req.status].bg
|
||||
}"
|
||||
>
|
||||
<el-icon><component :is="statusConfig[req.status].icon" /></el-icon>
|
||||
{{ statusConfig[req.status].label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="request-meta">
|
||||
<span class="request-time">{{ formatDate(req.created) }} {{ formatTime(req.created) }}</span>
|
||||
</div>
|
||||
<div v-if="req.status === 'rejected' && req.rejectReason" class="request-reason">
|
||||
<el-icon><Warning /></el-icon>
|
||||
<span>拒绝原因：{{ req.rejectReason }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -71,19 +154,23 @@ function handleAvatarUpload() {
|
||||
.profile-page {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.profile-page h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
margin: 0;
|
||||
background: var(--gg-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
.profile-card,
|
||||
.requests-card {
|
||||
border-radius: var(--gg-radius-md);
|
||||
}
|
||||
|
||||
@@ -133,4 +220,134 @@ function handleAvatarUpload() {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── 入群申请列表 ── */
|
||||
.requests-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.requests-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-bg-elevated);
|
||||
color: var(--gg-text-secondary);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
border-color: var(--gg-primary);
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.requests-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px;
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--gg-border);
|
||||
border-top-color: var(--gg-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.requests-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.request-item {
|
||||
padding: 14px 16px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-md);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.request-item:hover {
|
||||
border-color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.request-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.request-group {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.request-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.request-status .el-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.request-meta {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.request-time {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.request-reason {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(220, 38, 38, 0.06);
|
||||
border: 1px solid rgba(220, 38, 38, 0.15);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
font-size: 12px;
|
||||
color: #b91c1c;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.request-reason .el-icon {
|
||||
font-size: 14px;
|
||||
margin-top: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user