congsh
a062889a11
- Fix clipboard copy error in HTTP environment with execCommand fallback - Fix team invite page not loading user groups, always showing "join group first" - Fix JoinGroupPage isMember check using group object instead of user ID - Fix cancelRSVP deleting all users' RSVP records instead of current user's - Fix event detail not loading event data itself - Fix event comment avatar URL missing PocketBase baseUrl prefix - Fix event creation missing endTime > startTime validation - Fix event manage/delete permission split (creator+owner vs creator+owner) - Fix event create button only visible to admins, now all members can create - Fix event expand not subscribing to comments/RSVP realtime updates - Fix event relative time not using status field - Remove duplicate create/join group buttons from header and welcome bar - Refactor team invite link to use API function Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
608 lines
13 KiB
Vue
608 lines
13 KiB
Vue
<!-- src/views/Home.vue -->
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, computed } 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 GameDetailDialog from '@/components/game/GameDetailDialog.vue'
|
||
import { UserStatusMap } from '@/types'
|
||
import type { Game } from '@/types'
|
||
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||
import { Plus, Search, User, Promotion, TrendCharts } from '@element-plus/icons-vue'
|
||
import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
|
||
import JoinGroupDialog from '@/components/group/JoinGroupDialog.vue'
|
||
|
||
const router = useRouter()
|
||
const groupStore = useGroupStore()
|
||
const userStore = useUserStore()
|
||
const teamStore = useTeamStore()
|
||
|
||
const showCreateGroup = ref(false)
|
||
const showJoinGroup = ref(false)
|
||
|
||
const popularGames = ref<Game[]>([])
|
||
const loading = ref(false)
|
||
const selectedGame = ref<Game | null>(null)
|
||
const showGameDetail = ref(false)
|
||
|
||
const statusDotClass = computed(() => {
|
||
const s = userStore.userStatus
|
||
return `gg-status-dot gg-status-dot--${s}`
|
||
})
|
||
|
||
const statusText = computed(() => UserStatusMap[userStore.userStatus] || '未知')
|
||
|
||
const hasNoGroup = computed(() => groupStore.groups.length === 0)
|
||
const hasNoSession = computed(() => !teamStore.currentSession)
|
||
|
||
onMounted(async () => {
|
||
await loadPopularGames()
|
||
})
|
||
|
||
async function loadPopularGames() {
|
||
try {
|
||
loading.value = true
|
||
popularGames.value = await getPopularGames(8)
|
||
} catch (error) {
|
||
console.error('加载热门游戏失败:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function selectGroup(groupId: string) {
|
||
groupStore.setCurrentGroup(groupId)
|
||
router.push({ name: 'GroupView', params: { id: groupId } })
|
||
}
|
||
|
||
function openGameDetail(game: Game) {
|
||
selectedGame.value = game
|
||
showGameDetail.value = true
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="home-page">
|
||
<!-- 欢迎 + 状态条 -->
|
||
<section class="welcome-bar">
|
||
<div class="welcome-left">
|
||
<h1 class="welcome-title">
|
||
欢迎回来, <span class="gg-text-gradient">{{ userStore.user?.name || userStore.user?.username || '玩家' }}</span>
|
||
</h1>
|
||
<div class="status-line">
|
||
<span :class="statusDotClass" />
|
||
<span class="status-text">{{ statusText }}</span>
|
||
<span v-if="userStore.user?.statusNote" class="status-note">{{ userStore.user.statusNote }}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 无群组引导 -->
|
||
<section v-if="hasNoGroup" class="onboarding-section">
|
||
<div class="onboarding-card">
|
||
<div class="onboarding-icon"><el-icon :size="48"><User /></el-icon></div>
|
||
<h2 class="onboarding-title">开始你的组队之旅</h2>
|
||
<p class="onboarding-desc">创建一个群组邀请好友，或搜索加入已有群组</p>
|
||
<div class="onboarding-actions">
|
||
<button class="onboarding-btn onboarding-btn--primary" @click="showCreateGroup = true">
|
||
<el-icon><Plus /></el-icon> 创建群组
|
||
</button>
|
||
<button class="onboarding-btn onboarding-btn--outline" @click="showJoinGroup = true">
|
||
<el-icon><Search /></el-icon> 加入群组
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 主内容双栏 -->
|
||
<div v-else class="content-grid">
|
||
<!-- 左列: 我的群组 -->
|
||
<section class="section groups-section">
|
||
<h2 class="section-title">
|
||
<el-icon class="section-icon"><User /></el-icon> 我的群组
|
||
</h2>
|
||
|
||
<div class="group-grid">
|
||
<div
|
||
v-for="group in groupStore.groups"
|
||
:key="group.id"
|
||
class="group-card"
|
||
@click="selectGroup(group.id)"
|
||
>
|
||
<div class="group-card-header">
|
||
<span class="group-name">{{ group.name }}</span>
|
||
<span class="member-badge">{{ group.members.length }} 人</span>
|
||
</div>
|
||
<p class="group-desc">{{ group.description || '暂无简介' }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 右列: 当前临时小组 -->
|
||
<section class="section session-section">
|
||
<h2 class="section-title">
|
||
<el-icon class="section-icon"><Promotion /></el-icon> 当前临时小组
|
||
</h2>
|
||
<div class="session-card">
|
||
<TeamSessionPanel />
|
||
</div>
|
||
|
||
<div v-if="!hasNoSession" class="idle-section">
|
||
<IdleMembersList status="idle" />
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 热门游戏 -->
|
||
<section class="section games-section">
|
||
<h2 class="section-title">
|
||
<span class="section-icon"><el-icon><TrendCharts /></el-icon></span> 热门游戏
|
||
</h2>
|
||
|
||
<div v-if="loading" class="loading-state">
|
||
<div class="loading-spinner" />
|
||
<span>加载中...</span>
|
||
</div>
|
||
|
||
<div v-else-if="popularGames.length === 0" class="empty-games">
|
||
<p>暂无热门游戏，去群组中添加游戏吧</p>
|
||
</div>
|
||
|
||
<div v-else class="games-scroll">
|
||
<div
|
||
v-for="game in popularGames"
|
||
:key="game.id"
|
||
class="game-card"
|
||
@click="openGameDetail(game)"
|
||
>
|
||
<div class="game-cover-wrap">
|
||
<img
|
||
:src="game.cover || '/game-placeholder.svg'"
|
||
:alt="game.name"
|
||
class="game-cover"
|
||
/>
|
||
</div>
|
||
<div class="game-info">
|
||
<span class="game-name">{{ game.name }}</span>
|
||
<span v-if="game.platform" class="game-platform-tag">{{ game.platform }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<GameDetailDialog v-model="showGameDetail" :game="selectedGame" @create-team="() => {}" />
|
||
<CreateGroupDialog v-model="showCreateGroup" />
|
||
<JoinGroupDialog v-model="showJoinGroup" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.home-page {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
/* ── 欢迎条 ── */
|
||
.welcome-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 28px;
|
||
background: var(--gg-bg-card);
|
||
border: 1px solid var(--gg-border);
|
||
border-radius: var(--gg-radius-lg);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.welcome-bar::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: var(--gg-gradient);
|
||
}
|
||
|
||
.welcome-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.welcome-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
color: var(--gg-text);
|
||
}
|
||
|
||
.status-line {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 13px;
|
||
color: var(--gg-text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-note {
|
||
font-size: 12px;
|
||
color: var(--gg-text-muted);
|
||
}
|
||
|
||
.welcome-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.cta-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 9px 18px;
|
||
border-radius: var(--gg-radius-sm);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.cta-btn--primary {
|
||
background: var(--gg-gradient-green);
|
||
color: white;
|
||
border: none;
|
||
}
|
||
|
||
.cta-btn--primary:hover {
|
||
opacity: 0.9;
|
||
box-shadow: 0 2px 12px rgba(5, 150, 105, 0.3);
|
||
}
|
||
|
||
.cta-btn--secondary {
|
||
background: var(--gg-bg-card);
|
||
border: 1px solid var(--gg-border);
|
||
color: var(--gg-text-secondary);
|
||
}
|
||
|
||
.cta-btn--secondary:hover {
|
||
border-color: var(--gg-primary);
|
||
color: var(--gg-primary);
|
||
}
|
||
|
||
/* ── 新手引导 ── */
|
||
.onboarding-section {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.onboarding-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 48px 32px;
|
||
background: var(--gg-bg-card);
|
||
border: 2px dashed var(--gg-border);
|
||
border-radius: var(--gg-radius-lg);
|
||
text-align: center;
|
||
}
|
||
|
||
.onboarding-icon {
|
||
font-size: 48px;
|
||
color: var(--gg-primary);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.onboarding-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--gg-text);
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
.onboarding-desc {
|
||
font-size: 14px;
|
||
color: var(--gg-text-muted);
|
||
margin: 0 0 24px;
|
||
}
|
||
|
||
.onboarding-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.onboarding-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 28px;
|
||
border-radius: var(--gg-radius-sm);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.onboarding-btn--primary {
|
||
background: var(--gg-gradient-green);
|
||
color: white;
|
||
border: none;
|
||
}
|
||
|
||
.onboarding-btn--primary:hover {
|
||
opacity: 0.9;
|
||
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.onboarding-btn--outline {
|
||
background: var(--gg-bg-card);
|
||
border: 2px solid var(--gg-primary);
|
||
color: var(--gg-primary);
|
||
}
|
||
|
||
.onboarding-btn--outline:hover {
|
||
background: rgba(5, 150, 105, 0.06);
|
||
}
|
||
|
||
/* ── 通用 section ── */
|
||
.section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin: 0 0 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--gg-text);
|
||
}
|
||
|
||
.section-icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* ── 双栏内容 ── */
|
||
.content-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 320px;
|
||
gap: 24px;
|
||
}
|
||
|
||
/* ── 群组区 ── */
|
||
.group-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.group-card {
|
||
background: var(--gg-bg-card);
|
||
border: 1px solid var(--gg-border);
|
||
border-radius: var(--gg-radius-md);
|
||
padding: 16px 18px;
|
||
cursor: pointer;
|
||
transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
|
||
}
|
||
|
||
.group-card:hover {
|
||
border-color: var(--gg-primary);
|
||
box-shadow: 0 0 20px rgba(5, 150, 105, 0.12);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.group-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.group-name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--gg-text);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.member-badge {
|
||
font-size: 12px;
|
||
padding: 2px 10px;
|
||
border-radius: 20px;
|
||
background: rgba(5, 150, 105, 0.12);
|
||
color: var(--gg-primary);
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.group-desc {
|
||
font-size: 13px;
|
||
color: var(--gg-text-muted);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── 临时小组区 ── */
|
||
.session-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.session-card,
|
||
.idle-section {
|
||
background: var(--gg-bg-card);
|
||
border: 1px solid var(--gg-border);
|
||
border-radius: var(--gg-radius-md);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── 热门游戏 ── */
|
||
.games-section {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.empty-games {
|
||
padding: 32px;
|
||
text-align: center;
|
||
color: var(--gg-text-muted);
|
||
font-size: 14px;
|
||
background: var(--gg-bg-card);
|
||
border: 1px solid var(--gg-border);
|
||
border-radius: var(--gg-radius-md);
|
||
}
|
||
|
||
.games-scroll {
|
||
display: flex;
|
||
gap: 16px;
|
||
overflow-x: auto;
|
||
padding-bottom: 8px;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
.games-scroll::-webkit-scrollbar {
|
||
height: 4px;
|
||
}
|
||
|
||
.games-scroll::-webkit-scrollbar-thumb {
|
||
background: var(--gg-border);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.game-card {
|
||
flex-shrink: 0;
|
||
width: 150px;
|
||
cursor: pointer;
|
||
transition: transform 0.25s, box-shadow 0.25s;
|
||
}
|
||
|
||
.game-card:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.game-card:hover .game-cover-wrap {
|
||
box-shadow: 0 0 16px rgba(5, 150, 105, 0.15);
|
||
}
|
||
|
||
.game-cover-wrap {
|
||
width: 150px;
|
||
height: 190px;
|
||
border-radius: var(--gg-radius-md);
|
||
overflow: hidden;
|
||
background: var(--gg-bg-elevated);
|
||
border: 1px solid var(--gg-border);
|
||
transition: box-shadow 0.25s;
|
||
}
|
||
|
||
.game-cover {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.game-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.game-name {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--gg-text);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.game-platform-tag {
|
||
display: inline-block;
|
||
width: fit-content;
|
||
font-size: 11px;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
background: rgba(5, 150, 105, 0.1);
|
||
color: var(--gg-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ── 加载状态 ── */
|
||
.loading-state {
|
||
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); }
|
||
}
|
||
|
||
/* ── 移动端适配 ── */
|
||
@media (max-width: 768px) {
|
||
.welcome-bar {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.welcome-actions {
|
||
width: 100%;
|
||
}
|
||
|
||
.cta-btn {
|
||
flex: 1;
|
||
justify-content: center;
|
||
}
|
||
|
||
.content-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.group-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.onboarding-actions {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
|
||
.onboarding-btn {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style>
|