From a303415857b19c265673324a292311fb6b8a25d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E9=BA=9F=20=E7=8E=8B?= <Jinlin.Wang@cicc.com.cn>
Date: Thu, 18 Jun 2026 11:03:51 +0800
Subject: [PATCH] feat(mobile): stage 3 - home, groups, notifications

- migrate HomeMobile.vue (status card, current session, groups, popular games)
- migrate GroupsMobile.vue (list + create/join popup + pull refresh)
- migrate NotificationsMobile.vue (invitations/join-requests tabs + app notifications)
- router: wire Home/MobileGroups/MobileNotifications mobile views
- verified: user/group/team/notification stores + groups/invitations APIs all match uat

note: event board NOT added to home (uat PC Home.vue doesn't integrate it either);
      events will be handled in stage 11 group detail tab

build verified: vue-tsc + vite build pass
---
 frontend/src/router/index.ts                  |   6 +-
 frontend/src/views-mobile/GroupsMobile.vue    | 381 ++++++++++++++
 frontend/src/views-mobile/HomeMobile.vue      | 463 ++++++++++++++++++
 .../src/views-mobile/NotificationsMobile.vue  | 393 +++++++++++++++
 4 files changed, 1240 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/views-mobile/GroupsMobile.vue
 create mode 100644 frontend/src/views-mobile/HomeMobile.vue
 create mode 100644 frontend/src/views-mobile/NotificationsMobile.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 09d44a8..838e26c 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -56,7 +56,7 @@ const routes: RouteRecordRaw[] = [
         name: 'Home',
         component: view(
           () => import('@/views/Home.vue'),
-          mobilePlaceholder
+          () => import('@/views-mobile/HomeMobile.vue')
         )
       },
       {
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
         name: 'MobileGroups',
         component: view(
           () => import('@/views/Home.vue'),        // 桌面端无此路由，回退首页
-          mobilePlaceholder
+          () => import('@/views-mobile/GroupsMobile.vue')
         )
       },
       {
@@ -72,7 +72,7 @@ const routes: RouteRecordRaw[] = [
         name: 'MobileNotifications',
         component: view(
           () => import('@/views/Home.vue'),
-          mobilePlaceholder
+          () => import('@/views-mobile/NotificationsMobile.vue')
         )
       },
       {
diff --git a/frontend/src/views-mobile/GroupsMobile.vue b/frontend/src/views-mobile/GroupsMobile.vue
new file mode 100644
index 0000000..e02b82d
--- /dev/null
+++ b/frontend/src/views-mobile/GroupsMobile.vue
@@ -0,0 +1,381 @@
+<!-- src/views-mobile/GroupsMobile.vue -->
+<!-- 手机端群组列表 + 创建/加入群组 -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGroupStore } from '@/stores/group'
+import { createGroup, searchGroups, joinGroup } from '@/api/groups'
+import pb from '@/api/pocketbase'
+import type { Group } from '@/types'
+import { showSuccessToast, showFailToast } from 'vant'
+
+const router = useRouter()
+const groupStore = useGroupStore()
+
+// 创建群组
+const showCreate = ref(false)
+const createForm = ref({ name: '', description: '', maxMembers: 20 })
+const createLoading = ref(false)
+
+async function handleCreate() {
+  if (!createForm.value.name.trim()) {
+    showFailToast('请输入群组名称')
+    return
+  }
+  createLoading.value = true
+  try {
+    // 名称查重（与桌面端一致）
+    const existing = await pb.collection('groups').getList(1, 1, {
+      filter: `name="${createForm.value.name.trim()}"`
+    })
+    if (existing.items.length > 0) {
+      showFailToast('该群组名称已存在')
+      createLoading.value = false
+      return
+    }
+    const group = await createGroup({
+      name: createForm.value.name.trim(),
+      description: createForm.value.description.trim(),
+      maxMembers: createForm.value.maxMembers
+    })
+    await groupStore.loadGroups()
+    showCreate.value = false
+    createForm.value = { name: '', description: '', maxMembers: 20 }
+    showSuccessToast('创建成功')
+    if (group?.id) {
+      router.push({ name: 'GroupView', params: { id: group.id } })
+    }
+  } catch (error: any) {
+    showFailToast(error.message || '创建失败')
+  } finally {
+    createLoading.value = false
+  }
+}
+
+// 加入群组（搜索）
+const showJoin = ref(false)
+const searchKeyword = ref('')
+const searchResults = ref<Group[]>([])
+const searching = ref(false)
+
+async function doSearch() {
+  if (!searchKeyword.value.trim()) {
+    searchResults.value = []
+    return
+  }
+  searching.value = true
+  try {
+    searchResults.value = await searchGroups(searchKeyword.value.trim())
+  } catch (e) {
+    console.error(e)
+  } finally {
+    searching.value = false
+  }
+}
+
+async function handleJoin(groupId: string) {
+  try {
+    await joinGroup(groupId)
+    await groupStore.loadGroups()
+    showSuccessToast('加入成功')
+    showJoin.value = false
+    searchKeyword.value = ''
+    searchResults.value = []
+    router.push({ name: 'GroupView', params: { id: groupId } })
+  } catch (error: any) {
+    showFailToast(error.message || '加入失败')
+  }
+}
+
+function selectGroup(groupId: string) {
+  groupStore.setCurrentGroup(groupId)
+  router.push({ name: 'GroupView', params: { id: groupId } })
+}
+
+// 下拉刷新
+async function onRefresh() {
+  await groupStore.loadGroups()
+  showSuccessToast('刷新成功')
+}
+
+const refreshing = ref(false)
+</script>
+
+<template>
+  <div class="groups-mobile">
+    <!-- 浮动操作按钮 -->
+    <div class="fab-row">
+      <van-button type="primary" round icon="plus" size="small" @click="showCreate = true">
+        创建
+      </van-button>
+      <van-button type="default" round icon="search" size="small" @click="showJoin = true">
+        加入
+      </van-button>
+    </div>
+
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <div v-if="groupStore.groups.length === 0" class="empty-state">
+        <van-empty description="还没有群组">
+          <van-button type="primary" round size="small" @click="showCreate = true">
+            创建第一个群组
+          </van-button>
+        </van-empty>
+      </div>
+
+      <div v-else class="group-list">
+        <div
+          v-for="group in groupStore.groups"
+          :key="group.id"
+          class="group-card"
+          @click="selectGroup(group.id)"
+        >
+          <div class="group-main">
+            <div class="group-name">{{ group.name }}</div>
+            <div class="group-desc">{{ group.description || '暂无简介' }}</div>
+            <div class="group-footer">
+              <van-tag type="success" size="medium">{{ group.members?.length || 0 }} 人</van-tag>
+              <span class="group-capacity">/{{ group.maxMembers || '-' }}</span>
+            </div>
+          </div>
+          <van-icon name="arrow" class="group-arrow" />
+        </div>
+      </div>
+    </van-pull-refresh>
+
+    <!-- 创建群组弹层 -->
+    <van-popup
+      v-model:show="showCreate"
+      position="bottom"
+      round
+      closeable
+      :style="{ height: '70%' }"
+    >
+      <div class="popup-content">
+        <div class="popup-title">创建群组</div>
+        <van-cell-group inset>
+          <van-field
+            v-model="createForm.name"
+            label="名称"
+            placeholder="给群组起个名字"
+            maxlength="50"
+            required
+          />
+          <van-field
+            v-model="createForm.description"
+            type="textarea"
+            label="描述"
+            placeholder="简单介绍这个群组"
+            rows="2"
+            maxlength="500"
+            autosize
+          />
+          <van-field name="stepper" label="最大成员数">
+            <template #input>
+              <van-stepper v-model="createForm.maxMembers" min="2" max="100" />
+            </template>
+          </van-field>
+        </van-cell-group>
+        <div class="popup-actions">
+          <van-button type="primary" block round :loading="createLoading" @click="handleCreate">
+            创建
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
+
+    <!-- 加入群组弹层 -->
+    <van-popup
+      v-model:show="showJoin"
+      position="bottom"
+      round
+      closeable
+      :style="{ height: '70%' }"
+    >
+      <div class="popup-content">
+        <div class="popup-title">加入群组</div>
+        <van-search
+          v-model="searchKeyword"
+          placeholder="搜索群组名称"
+          shape="round"
+          @search="doSearch"
+          @clear="searchResults = []"
+        />
+        <div v-if="searching" class="search-loading">
+          <van-loading size="24px">搜索中...</van-loading>
+        </div>
+        <div v-else-if="searchResults.length === 0 && searchKeyword" class="search-empty">
+          <van-empty description="未找到群组" image-size="80" />
+        </div>
+        <div v-else class="search-list">
+          <div
+            v-for="group in searchResults"
+            :key="group.id"
+            class="search-item"
+          >
+            <div class="search-info">
+              <div class="search-name">{{ group.name }}</div>
+              <div class="search-desc">{{ group.description || '暂无简介' }}</div>
+              <div class="search-meta">{{ group.members?.length || 0 }}/{{ group.maxMembers }} 人</div>
+            </div>
+            <van-button
+              type="primary"
+              size="small"
+              round
+              @click="handleJoin(group.id)"
+            >
+              加入
+            </van-button>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<style scoped>
+.groups-mobile {
+  padding-bottom: 16px;
+  position: relative;
+}
+
+.fab-row {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  position: sticky;
+  top: 0;
+  background: var(--gg-bg);
+  z-index: 10;
+}
+
+.empty-state {
+  padding: 40px 0;
+}
+
+.group-list {
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.group-card {
+  display: flex;
+  align-items: center;
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-md);
+  padding: 14px 16px;
+  box-shadow: var(--gg-shadow);
+}
+
+.group-card:active {
+  opacity: 0.85;
+}
+
+.group-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.group-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--gg-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-desc {
+  font-size: 13px;
+  color: var(--gg-text-muted);
+  margin: 4px 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-footer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.group-capacity {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+}
+
+.group-arrow {
+  color: var(--gg-text-muted);
+  font-size: 16px;
+}
+
+/* 弹层 */
+.popup-content {
+  padding: 16px 0 24px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.popup-title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 8px 0 16px;
+  color: var(--gg-text);
+}
+
+.popup-actions {
+  padding: 20px 16px 0;
+}
+
+.search-loading, .search-empty {
+  display: flex;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.search-list {
+  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--gg-bg);
+  border-radius: var(--gg-radius-sm);
+}
+
+.search-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.search-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--gg-text);
+}
+
+.search-desc {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+  margin: 2px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-meta {
+  font-size: 11px;
+  color: var(--gg-text-muted);
+}
+</style>
diff --git a/frontend/src/views-mobile/HomeMobile.vue b/frontend/src/views-mobile/HomeMobile.vue
new file mode 100644
index 0000000..d2e71ce
--- /dev/null
+++ b/frontend/src/views-mobile/HomeMobile.vue
@@ -0,0 +1,463 @@
+<!-- src/views-mobile/HomeMobile.vue -->
+<!-- 手机端首页：状态 + 当前组队 + 我的群组 + 热门游戏 -->
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGroupStore } from '@/stores/group'
+import { useUserStore } from '@/stores/user'
+import { useTeamStore } from '@/stores/team'
+import { getPopularGames } from '@/api/games'
+import type { Game } from '@/types'
+import { UserStatusMap } from '@/types'
+import { showSuccessToast } from 'vant'
+
+const router = useRouter()
+const groupStore = useGroupStore()
+const userStore = useUserStore()
+const teamStore = useTeamStore()
+
+const popularGames = ref<Game[]>([])
+const loading = ref(false)
+
+const statusText = computed(() => UserStatusMap[userStore.userStatus] || '未知')
+
+const hasNoGroup = computed(() => groupStore.groups.length === 0)
+const hasSession = computed(() => !!teamStore.currentSession)
+
+onMounted(async () => {
+  await loadPopularGames()
+})
+
+async function loadPopularGames() {
+  try {
+    loading.value = true
+    popularGames.value = await getPopularGames(10)
+  } catch (error) {
+    console.error('加载热门游戏失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectGroup(groupId: string) {
+  groupStore.setCurrentGroup(groupId)
+  router.push({ name: 'GroupView', params: { id: groupId } })
+}
+
+// 一键切换状态（空闲/离开/工作中循环）
+const statusActions = [
+  { status: 'idle' as const, label: '空闲', icon: '🟢' },
+  { status: 'away' as const, label: '离开', icon: '⚫' },
+  { status: 'working' as const, label: '工作中', icon: '🔴' },
+]
+
+const showStatusSheet = ref(false)
+
+async function onStatusSelect(action: { status: any; label: string }) {
+  showStatusSheet.value = false
+  try {
+    await userStore.setStatus(action.status)
+    showSuccessToast(`已切换为${action.label}`)
+  } catch (e: any) {
+    console.error(e)
+  }
+}
+
+function goCreateGroup() {
+  router.push('/mobile-groups')
+}
+
+function goSession() {
+  const session = teamStore.currentSession
+  if (session?.voiceRoom) {
+    router.push({
+      name: 'VoiceRoom',
+      params: { groupId: session.sourceGroup, sessionId: session.id }
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="home-mobile">
+    <!-- 用户状态卡片 -->
+    <div class="status-card">
+      <div class="status-info" @click="showStatusSheet = true">
+        <img
+          :src="userStore.user?.avatar || '/default-avatar.svg'"
+          class="avatar"
+          alt=""
+        />
+        <div class="status-text">
+          <div class="user-name">{{ userStore.user?.name || userStore.user?.username }}</div>
+          <div class="user-status">
+            <span class="status-dot" :class="`dot-${userStore.userStatus}`" />
+            <span>{{ statusText }}</span>
+            <span v-if="userStore.user?.statusNote" class="status-note">
+              · {{ userStore.user.statusNote }}
+            </span>
+          </div>
+        </div>
+        <van-icon name="arrow-down" class="status-arrow" />
+      </div>
+      <div class="quick-stats">
+        <div class="stat-item">
+          <span class="stat-num">{{ userStore.user?.points ?? 0 }}</span>
+          <span class="stat-label">积分</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-num">{{ groupStore.groups.length }}</span>
+          <span class="stat-label">群组</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 当前组队卡片 -->
+    <div v-if="hasSession" class="session-card" @click="goSession">
+      <div class="session-header">
+        <van-icon name="volume-o" class="session-icon" />
+        <span class="session-title">当前组队</span>
+        <van-tag type="success" size="medium">{{ teamStore.teamStatus }}</van-tag>
+      </div>
+      <div class="session-body">
+        <div class="session-game">{{ teamStore.currentSession?.gameName }}</div>
+        <div class="session-members">
+          {{ teamStore.currentSession?.name }}
+          · {{ teamStore.currentSession?.members?.length || 0 }} 人
+        </div>
+      </div>
+      <div class="session-action">
+        进入语音房 <van-icon name="arrow" />
+      </div>
+    </div>
+
+    <!-- 我的群组 -->
+    <div class="section">
+      <div class="section-header">
+        <span class="section-title">我的群组</span>
+        <span v-if="!hasNoGroup" class="section-more" @click="goCreateGroup">全部</span>
+      </div>
+
+      <div v-if="hasNoGroup" class="empty-card">
+        <van-empty description="还没有群组" image-size="80">
+          <van-button type="primary" size="small" round @click="goCreateGroup">
+            创建或加入群组
+          </van-button>
+        </van-empty>
+      </div>
+
+      <div v-else class="group-scroll">
+        <div
+          v-for="group in groupStore.groups"
+          :key="group.id"
+          class="group-card"
+          @click="selectGroup(group.id)"
+        >
+          <div class="group-name">{{ group.name }}</div>
+          <div class="group-meta">{{ group.members?.length || 0 }} 人</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 热门游戏 -->
+    <div class="section">
+      <div class="section-header">
+        <span class="section-title">热门游戏</span>
+      </div>
+
+      <div v-if="loading" class="loading-row">
+        <van-loading size="24px">加载中...</van-loading>
+      </div>
+
+      <div v-else-if="popularGames.length === 0" class="empty-row">
+        <span class="empty-text">暂无热门游戏</span>
+      </div>
+
+      <div v-else class="games-scroll">
+        <div
+          v-for="game in popularGames"
+          :key="game.id"
+          class="game-card"
+        >
+          <img
+            :src="game.cover || '/game-placeholder.svg'"
+            :alt="game.name"
+            class="game-cover"
+          />
+          <div class="game-name">{{ game.name }}</div>
+          <van-tag v-if="game.platform" plain size="medium">{{ game.platform }}</van-tag>
+        </div>
+      </div>
+    </div>
+
+    <!-- 状态切换 ActionSheet -->
+    <van-action-sheet
+      v-model:show="showStatusSheet"
+      title="切换状态"
+      :actions="statusActions.map(a => ({ name: `${a.icon} ${a.label}`, status: a.status, label: a.label }))"
+      @select="onStatusSelect"
+    />
+  </div>
+</template>
+
+<style scoped>
+.home-mobile {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* 状态卡片 */
+.status-card {
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-lg);
+  padding: 16px;
+  box-shadow: var(--gg-shadow);
+}
+
+.status-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--gg-border);
+}
+
+.status-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--gg-text);
+}
+
+.user-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+  margin-top: 4px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.dot-idle { background: var(--gg-success); }
+.dot-in_team { background: var(--gg-info); }
+.dot-working { background: var(--gg-danger); }
+.dot-away { background: var(--gg-text-muted); }
+
+.status-note {
+  color: var(--gg-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-arrow {
+  color: var(--gg-text-muted);
+  font-size: 14px;
+}
+
+.quick-stats {
+  display: flex;
+  gap: 24px;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--gg-border);
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-num {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--gg-primary);
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+  margin-top: 2px;
+}
+
+/* 组队卡片 */
+.session-card {
+  background: linear-gradient(135deg, var(--gg-primary), var(--gg-accent));
+  border-radius: var(--gg-radius-lg);
+  padding: 16px;
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
+}
+
+.session-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  opacity: 0.9;
+}
+
+.session-icon {
+  font-size: 16px;
+}
+
+.session-body {
+  margin: 10px 0;
+}
+
+.session-game {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.session-members {
+  font-size: 13px;
+  opacity: 0.85;
+  margin-top: 4px;
+}
+
+.session-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 通用 section */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--gg-text);
+}
+
+.section-more {
+  font-size: 13px;
+  color: var(--gg-primary);
+}
+
+.empty-card {
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-md);
+  padding: 8px;
+}
+
+.loading-row, .empty-row {
+  display: flex;
+  justify-content: center;
+  padding: 24px;
+}
+
+.empty-text {
+  font-size: 13px;
+  color: var(--gg-text-muted);
+}
+
+/* 群组横滑 */
+.group-scroll {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  scroll-behavior: smooth;
+}
+
+.group-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.group-card {
+  flex-shrink: 0;
+  width: 130px;
+  padding: 14px;
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-md);
+  box-shadow: var(--gg-shadow);
+}
+
+.group-card:active {
+  opacity: 0.85;
+}
+
+.group-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--gg-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-meta {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+  margin-top: 6px;
+}
+
+/* 游戏横滑 */
+.games-scroll {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.games-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.game-card {
+  flex-shrink: 0;
+  width: 100px;
+}
+
+.game-cover {
+  width: 100px;
+  height: 130px;
+  border-radius: var(--gg-radius-md);
+  object-fit: cover;
+  background: var(--gg-bg-elevated);
+}
+
+.game-name {
+  font-size: 12px;
+  color: var(--gg-text);
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/frontend/src/views-mobile/NotificationsMobile.vue b/frontend/src/views-mobile/NotificationsMobile.vue
new file mode 100644
index 0000000..5919b42
--- /dev/null
+++ b/frontend/src/views-mobile/NotificationsMobile.vue
@@ -0,0 +1,393 @@
+<!-- src/views-mobile/NotificationsMobile.vue -->
+<!-- 手机端通知页：站内通知 + 邀请/入群申请 -->
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useNotificationStore } from '@/stores/notification'
+import { respondInvitation } from '@/api/invitations'
+import { respondJoinRequest } from '@/api/groups'
+import { useGroupStore } from '@/stores/group'
+import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'
+import type { AppNotification } from '@/types'
+
+const notificationStore = useNotificationStore()
+const groupStore = useGroupStore()
+
+const activeTab = ref<'notifications' | 'invitations'>('invitations')
+
+const notifications = computed(() => notificationStore.appNotifications)
+const invitations = computed(() => notificationStore.pendingInvitations)
+const joinRequests = computed(() => notificationStore.pendingJoinRequests)
+
+const loading = ref(false)
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    await notificationStore.loadAppNotifications()
+    await notificationStore.loadPendingInvitations()
+  } finally {
+    loading.value = false
+  }
+})
+
+// 通知操作
+async function onRead(n: AppNotification) {
+  try {
+    await notificationStore.markRead(n.id)
+  } catch (e: any) {
+    showFailToast('操作失败')
+  }
+}
+
+async function onReadAll() {
+  try {
+    await notificationStore.markAllRead()
+    showSuccessToast('全部已读')
+  } catch (e: any) {
+    showFailToast('操作失败')
+  }
+}
+
+async function onDelete(n: AppNotification) {
+  showConfirmDialog({
+    title: '删除通知',
+    message: '确定删除这条通知吗？'
+  }).then(async () => {
+    try {
+      await notificationStore.removeNotification(n.id)
+      showSuccessToast('已删除')
+    } catch (e: any) {
+      showFailToast('删除失败')
+    }
+  }).catch(() => {})
+}
+
+// 通知类型图标/颜色
+function notifyIcon(type: string): string {
+  const map: Record<string, string> = {
+    poll_new: 'chart-trending-o',
+    poll_deadline: 'clock-o',
+    poll_result: 'certificate',
+    team_invite: 'volume-o',
+    team_starting: 'fire-o',
+    join_request: 'add-o',
+    member_joined: 'user-o'
+  }
+  return map[type] || 'bell'
+}
+
+// 邀请操作
+const invitationLoading = ref<string | null>(null)
+
+async function handleInvitation(invitationId: string, response: 'accepted' | 'rejected') {
+  invitationLoading.value = invitationId
+  try {
+    await respondInvitation(invitationId, response)
+    notificationStore.removeInvitation(invitationId)
+    showSuccessToast(response === 'accepted' ? '已接受' : '已拒绝')
+  } catch (e: any) {
+    showFailToast(e.message || '操作失败')
+  } finally {
+    invitationLoading.value = null
+  }
+}
+
+// 入群申请操作
+const requestLoading = ref<string | null>(null)
+
+async function handleJoinRequest(requestId: string, status: 'approved' | 'rejected') {
+  requestLoading.value = requestId
+  try {
+    await respondJoinRequest(requestId, status)
+    notificationStore.removeJoinRequest(requestId)
+    await groupStore.loadGroups()
+    showSuccessToast(status === 'approved' ? '已通过' : '已拒绝')
+  } catch (e: any) {
+    showFailToast(e.message || '操作失败')
+  } finally {
+    requestLoading.value = null
+  }
+}
+
+// 时间格式化
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const min = Math.floor(diff / 60000)
+  if (min < 1) return '刚刚'
+  if (min < 60) return `${min}分钟前`
+  const hour = Math.floor(min / 60)
+  if (hour < 24) return `${hour}小时前`
+  const day = Math.floor(hour / 24)
+  if (day < 30) return `${day}天前`
+  return new Date(dateStr).toLocaleDateString('zh-CN')
+}
+</script>
+
+<template>
+  <div class="notifications-mobile">
+    <van-tabs v-model:active="activeTab" sticky>
+      <van-tab title="邀请/申请" name="invitations">
+        <div v-if="invitations.length === 0 && joinRequests.length === 0" class="empty-state">
+          <van-empty description="暂无待处理邀请" image-size="100" />
+        </div>
+
+        <!-- 组队邀请 -->
+        <div v-if="invitations.length > 0" class="section-block">
+          <div class="block-title">组队邀请</div>
+          <div
+            v-for="inv in invitations"
+            :key="inv.id"
+            class="invite-card"
+          >
+            <div class="invite-info">
+              <img
+                :src="inv.expand?.from?.avatar || '/default-avatar.svg'"
+                class="invite-avatar"
+                alt=""
+              />
+              <div class="invite-text">
+                <div class="invite-from">{{ inv.expand?.from?.name || inv.expand?.from?.username || '未知' }}</div>
+                <div class="invite-detail">
+                  邀请你组队：{{ inv.expand?.teamSession?.gameName || '游戏' }}
+                </div>
+              </div>
+            </div>
+            <div class="invite-actions">
+              <van-button
+                type="primary"
+                size="small"
+                round
+                :loading="invitationLoading === inv.id"
+                @click="handleInvitation(inv.id, 'accepted')"
+              >
+                接受
+              </van-button>
+              <van-button
+                size="small"
+                round
+                :loading="invitationLoading === inv.id"
+                @click="handleInvitation(inv.id, 'rejected')"
+              >
+                拒绝
+              </van-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 入群申请 -->
+        <div v-if="joinRequests.length > 0" class="section-block">
+          <div class="block-title">入群申请</div>
+          <div
+            v-for="req in joinRequests"
+            :key="req.id"
+            class="invite-card"
+          >
+            <div class="invite-info">
+              <img
+                :src="req.expand?.user?.avatar || '/default-avatar.svg'"
+                class="invite-avatar"
+                alt=""
+              />
+              <div class="invite-text">
+                <div class="invite-from">{{ req.expand?.user?.name || req.expand?.user?.username || '未知' }}</div>
+                <div class="invite-detail">
+                  申请加入：{{ req.expand?.group?.name || '群组' }}
+                </div>
+              </div>
+            </div>
+            <div class="invite-actions">
+              <van-button
+                type="primary"
+                size="small"
+                round
+                :loading="requestLoading === req.id"
+                @click="handleJoinRequest(req.id, 'approved')"
+              >
+                通过
+              </van-button>
+              <van-button
+                size="small"
+                round
+                :loading="requestLoading === req.id"
+                @click="handleJoinRequest(req.id, 'rejected')"
+              >
+                拒绝
+              </van-button>
+            </div>
+          </div>
+        </div>
+      </van-tab>
+
+      <van-tab title="通知" name="notifications">
+        <div v-if="notifications.length > 0" class="read-all-bar">
+          <van-button plain hairline size="small" round icon="success" @click="onReadAll">
+            全部标为已读
+          </van-button>
+        </div>
+
+        <div v-if="notifications.length === 0" class="empty-state">
+          <van-empty description="暂无通知" image-size="100" />
+        </div>
+
+        <div v-else class="notify-list">
+          <van-swipe-cell
+            v-for="n in notifications"
+            :key="n.id"
+          >
+            <div
+              class="notify-item"
+              :class="{ 'notify-unread': !n.read }"
+              @click="!n.read && onRead(n)"
+            >
+              <van-icon :name="notifyIcon(n.type)" class="notify-icon" size="22" />
+              <div class="notify-body">
+                <div class="notify-title">{{ n.title }}</div>
+                <div v-if="n.content" class="notify-content">{{ n.content }}</div>
+                <div class="notify-time">{{ timeAgo(n.created) }}</div>
+              </div>
+              <span v-if="!n.read" class="unread-dot" />
+            </div>
+            <template #right>
+              <van-button square type="danger" text="删除" class="delete-btn" @click="onDelete(n)" />
+            </template>
+          </van-swipe-cell>
+        </div>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<style scoped>
+.notifications-mobile {
+  min-height: 60vh;
+}
+
+.empty-state {
+  padding: 40px 0;
+}
+
+.read-all-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 16px;
+}
+
+.section-block {
+  padding: 12px;
+}
+
+.block-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--gg-text-muted);
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.invite-card {
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-md);
+  padding: 14px;
+  margin-bottom: 10px;
+  box-shadow: var(--gg-shadow);
+}
+
+.invite-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.invite-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.invite-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.invite-from {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--gg-text);
+}
+
+.invite-detail {
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+  margin-top: 2px;
+}
+
+.invite-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+/* 通知列表 */
+.notify-list {
+  padding: 0 12px;
+}
+
+.notify-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: var(--gg-bg-card);
+  padding: 14px;
+  border-radius: var(--gg-radius-sm);
+  margin-bottom: 1px;
+}
+
+.notify-unread {
+  background: rgba(5, 150, 105, 0.04);
+}
+
+.notify-icon {
+  color: var(--gg-primary);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.notify-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.notify-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--gg-text);
+}
+
+.notify-content {
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+  margin-top: 4px;
+  line-height: 1.5;
+}
+
+.notify-time {
+  font-size: 11px;
+  color: var(--gg-text-muted);
+  margin-top: 6px;
+}
+
+.unread-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gg-danger);
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+.delete-btn {
+  height: 100%;
+}
+</style>