From b1a9995767d8356ef8f9b227a40ea11405da474a Mon Sep 17 00:00:00 2001
From: congsh <congsh@jiulu-gameplay.com.cn>
Date: Fri, 17 Apr 2026 16:27:30 +0800
Subject: [PATCH] feat: add missing components - notification store,
 notification panel, game select dialog, invite button

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/common/NotificationPanel.vue   |  56 ++++++
 .../src/components/team/GameSelectDialog.vue  | 180 ++++++++++++++++++
 frontend/src/components/team/InviteButton.vue |  78 ++++++++
 frontend/src/stores/notification.ts           |  41 ++++
 4 files changed, 355 insertions(+)
 create mode 100644 frontend/src/components/common/NotificationPanel.vue
 create mode 100644 frontend/src/components/team/GameSelectDialog.vue
 create mode 100644 frontend/src/components/team/InviteButton.vue
 create mode 100644 frontend/src/stores/notification.ts

diff --git a/frontend/src/components/common/NotificationPanel.vue b/frontend/src/components/common/NotificationPanel.vue
new file mode 100644
index 0000000..8112601
--- /dev/null
+++ b/frontend/src/components/common/NotificationPanel.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useNotificationStore } from '@/stores/notification'
+import InvitationCard from '@/components/team/InvitationCard.vue'
+
+const store = useNotificationStore()
+
+onMounted(() => {
+  store.loadPendingInvitations()
+})
+
+function onInvitationResponded(id: string, accepted: boolean) {
+  store.removeInvitation(id)
+}
+</script>
+
+<template>
+  <el-drawer
+    v-model="store.showPanel"
+    title="通知"
+    direction="rtl"
+    size="380px"
+  >
+    <div class="notification-panel">
+      <div v-if="store.pendingInvitations.length === 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>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+.notification-panel {
+  padding: 0 4px;
+}
+
+.empty {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+  padding: 48px 0;
+}
+
+.invitation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>
diff --git a/frontend/src/components/team/GameSelectDialog.vue b/frontend/src/components/team/GameSelectDialog.vue
new file mode 100644
index 0000000..9bf8b02
--- /dev/null
+++ b/frontend/src/components/team/GameSelectDialog.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { searchGames } from '@/api/games'
+import type { Game } from '@/types'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'select': [gameName: string]
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const searchQuery = ref('')
+const loading = ref(false)
+const games = ref<Game[]>([])
+const customGameName = ref('')
+
+watch(() => props.modelValue, (show) => {
+  if (show) {
+    searchQuery.value = ''
+    customGameName.value = ''
+    games.value = []
+  }
+})
+
+async function handleSearch() {
+  if (!searchQuery.value.trim()) {
+    games.value = []
+    return
+  }
+  loading.value = true
+  try {
+    games.value = await searchGames(searchQuery.value)
+  } catch (error) {
+    console.error('搜索游戏失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectGame(game: Game) {
+  emit('select', game.name)
+  visible.value = false
+}
+
+function confirmCustomGame() {
+  if (customGameName.value.trim()) {
+    emit('select', customGameName.value.trim())
+    visible.value = false
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="选择游戏"
+    width="480px"
+  >
+    <div class="game-select">
+      <el-input
+        v-model="searchQuery"
+        placeholder="搜索游戏..."
+        clearable
+        @input="handleSearch"
+      />
+
+      <div v-if="loading" class="loading">搜索中...</div>
+
+      <div v-else-if="games.length > 0" class="game-list">
+        <div
+          v-for="game in games"
+          :key="game.id"
+          class="game-item"
+          @click="selectGame(game)"
+        >
+          <img
+            :src="game.cover || '/game-placeholder.png'"
+            :alt="game.name"
+            class="game-cover"
+          />
+          <div class="game-info">
+            <span class="game-name">{{ game.name }}</span>
+            <span class="game-platform">{{ game.platform }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="searchQuery" class="no-results">
+        未找到匹配的游戏，手动输入：
+      </div>
+
+      <div class="custom-input">
+        <el-input
+          v-model="customGameName"
+          placeholder="手动输入游戏名称"
+          @keyup.enter="confirmCustomGame"
+        />
+        <el-button
+          type="primary"
+          :disabled="!customGameName.trim()"
+          @click="confirmCustomGame"
+        >
+          确认
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.game-select {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.loading, .no-results {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+  padding: 24px;
+}
+
+.game-list {
+  max-height: 320px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.game-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.game-item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.game-cover {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.game-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.game-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.game-platform {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.custom-input {
+  display: flex;
+  gap: 8px;
+}
+</style>
diff --git a/frontend/src/components/team/InviteButton.vue b/frontend/src/components/team/InviteButton.vue
new file mode 100644
index 0000000..599a537
--- /dev/null
+++ b/frontend/src/components/team/InviteButton.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { sendInvitation } from '@/api/invitations'
+import { getActiveTeamSession, createTeamSession } from '@/api/sessions'
+import { useTeamStore } from '@/stores/team'
+import { useGroupStore } from '@/stores/group'
+import { useUserStore } from '@/stores/user'
+import GameSelectDialog from './GameSelectDialog.vue'
+
+const props = defineProps<{
+  userId: string
+}>()
+
+const teamStore = useTeamStore()
+const groupStore = useGroupStore()
+const userStore = useUserStore()
+
+const loading = ref(false)
+const showGameSelect = ref(false)
+
+async function handleInvite() {
+  if (teamStore.currentSession) {
+    await sendInvite(teamStore.currentSession.id)
+  } else {
+    showGameSelect.value = true
+  }
+}
+
+async function handleGameSelect(gameName: string) {
+  loading.value = true
+  try {
+    const session = await createTeamSession({
+      sourceGroup: groupStore.currentGroupId,
+      name: `${userStore.user?.username || ''}的车队`,
+      gameName,
+      members: [userStore.userId]
+    })
+    teamStore.currentSession = session
+    await sendInvite(session.id)
+  } catch (error: any) {
+    ElMessage.error(error.message || '创建临时小组失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function sendInvite(teamSessionId: string) {
+  loading.value = true
+  try {
+    await sendInvitation({
+      to: props.userId,
+      teamSession: teamSessionId
+    })
+    ElMessage.success('邀请已发送')
+  } catch (error: any) {
+    ElMessage.error(error.message || '邀请发送失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-button
+    type="primary"
+    size="small"
+    :loading="loading"
+    @click="handleInvite"
+  >
+    邀请
+  </el-button>
+
+  <GameSelectDialog
+    v-model="showGameSelect"
+    @select="handleGameSelect"
+  />
+</template>
diff --git a/frontend/src/stores/notification.ts b/frontend/src/stores/notification.ts
new file mode 100644
index 0000000..4674ea3
--- /dev/null
+++ b/frontend/src/stores/notification.ts
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { Invitation } from '@/types'
+import { getPendingInvitations } from '@/api/invitations'
+
+export const useNotificationStore = defineStore('notification', () => {
+  const pendingInvitations = ref<Invitation[]>([])
+  const loading = ref(false)
+  const showPanel = ref(false)
+
+  const unreadCount = computed(() => pendingInvitations.value.length)
+
+  async function loadPendingInvitations() {
+    try {
+      loading.value = true
+      pendingInvitations.value = await getPendingInvitations()
+    } catch (error) {
+      console.error('加载待处理邀请失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function removeInvitation(invitationId: string) {
+    pendingInvitations.value = pendingInvitations.value.filter(i => i.id !== invitationId)
+  }
+
+  function togglePanel() {
+    showPanel.value = !showPanel.value
+  }
+
+  return {
+    pendingInvitations,
+    loading,
+    showPanel,
+    unreadCount,
+    loadPendingInvitations,
+    removeInvitation,
+    togglePanel
+  }
+})