gamegroup2/frontend/src/views-mobile/HomeMobile.vue

<!-- 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: '空闲', color: 'var(--gg-success)' },
  { status: 'away' as const, label: '离开', color: 'var(--gg-text-muted)' },
  { status: 'working' as const, label: '工作中', color: 'var(--gg-danger)' },
]

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="切换状态">
      <div class="status-sheet">
        <div
          v-for="a in statusActions"
          :key="a.status"
          class="status-sheet-item"
          @click="onStatusSelect(a)"
        >
          <span class="status-sheet-dot" :style="{ background: a.color }" />
          <span class="status-sheet-label">{{ a.label }}</span>
          <van-icon v-if="userStore.userStatus === a.status" name="success" class="status-sheet-check" />
        </div>
      </div>
    </van-action-sheet>
  </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-sheet { padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.status-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  font-size: 15px;
  color: var(--gg-text);
}
.status-sheet-item:active { background: var(--gg-bg-elevated); }
.status-sheet-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-sheet-label { flex: 1; }
.status-sheet-check { color: var(--gg-primary); font-size: 18px; }

.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>