gamegroup2/frontend/src/views/GamesLibrary.vue

<!-- src/views/GamesLibrary.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getGames, getAllPlatforms } from '@/api/games'
import type { Game, GamePlatform } from '@/types'
import { ElCard, ElInput, ElSelect, ElOption } from 'element-plus'

const games = ref<Game[]>([])
const loading = ref(false)
const searchQuery = ref('')
const selectedPlatform = ref<GamePlatform | ''>('')
const platforms = getAllPlatforms()

onMounted(async () => {
  await loadGames()
})

async function loadGames() {
  try {
    loading.value = true
    const result = await getGames({
      limit: 50,
      search: searchQuery.value || undefined,
      platform: selectedPlatform.value || undefined
    })
    games.value = result.items
  } catch (error) {
    console.error('加载游戏失败:', error)
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  loadGames()
}
</script>

<template>
  <div class="games-library">
    <div class="page-header">
      <h1>游戏库</h1>
      <div class="filters">
        <el-input
          v-model="searchQuery"
          placeholder="搜索游戏..."
          clearable
          @input="handleSearch"
        />
        <el-select v-model="selectedPlatform" placeholder="选择平台" clearable @change="loadGames">
          <el-option
            v-for="platform in platforms"
            :key="platform"
            :label="platform"
            :value="platform"
          />
        </el-select>
      </div>
    </div>

    <div v-if="loading" class="loading">加载中...</div>

    <div v-else-if="games.length === 0" class="empty">
      <p>暂无游戏</p>
    </div>

    <div v-else class="games-grid">
      <el-card v-for="game in games" :key="game.id" class="game-card">
        <img
          :src="game.cover || '/game-placeholder.png'"
          :alt="game.name"
          class="game-cover"
        />
        <div class="game-info">
          <h3 class="game-name">{{ game.name }}</h3>
          <p class="game-platform">{{ game.platform }}</p>
          <div class="game-tags">
            <span v-for="tag in game.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.games-library {
  width: 100%;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 16px;
}

.filters {
  display: flex;
  gap: 12px;
}

.filters .el-input {
  width: 300px;
}

.loading {
  text-align: center;
  padding: 60px;
  color: var(--el-text-color-secondary);
}

.empty {
  text-align: center;
  padding: 60px;
  color: var(--el-text-color-secondary);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.game-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.game-cover {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.game-info {
  padding: 12px;
}

.game-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-platform {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  margin: 0 0 8px;
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  padding: 2px 8px;
  background: var(--el-fill-color-light);
  border-radius: 4px;
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
</style>