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>

frontend/src/api/groups.ts

@@ -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,

frontend/src/components/group/GroupMembersPanel.vue

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

frontend/src/views/GroupView.vue

@@ -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);

frontend/src/views/Profile.vue

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