feat: add missing components - notification store, notification panel, game select dialog, invite button
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user