gamegroup2/frontend/src/views/Home.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?.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>
      <div class="welcome-actions">
        <button class="cta-btn cta-btn--primary" @click="showCreateGroup = true">
          <el-icon><Plus /></el-icon> 创建群组
        </button>
        <button class="cta-btn cta-btn--secondary" @click="showJoinGroup = true">
          <el-icon><Search /></el-icon> 加入群组
        </button>
      </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>