webgame-frontend/src/components/baseLayouts/GameList.vue

<template>
  <div class="game-list">
    <!-- 左侧游戏图标列表 -->
    <div class="game-list__icons">
      <el-tooltip
        v-for="game in games"
        :key="game.id"
        :content="game.name"
        placement="right"
        :show-after="300"
      >
        <div
          class="game-list__icon-item"
          :class="{ 'game-list__icon-item--active': activeGameId === game.id }"
          @click="selectGame(game.id)"
        >
          <span class="game-list__icon-emoji">{{ game.icon }}</span>
        </div>
      </el-tooltip>
    </div>

    <!-- 右侧游戏详情 -->
    <div class="game-list__detail">
      <template v-if="activeGame">
        <h3 class="game-list__detail-title">{{ activeGame.name }}</h3>
        <p class="game-list__detail-desc">{{ activeGame.description }}</p>
        <div class="game-list__detail-gameplay">
          <h4>玩法介绍</h4>
          <p>{{ activeGame.gameplay }}</p>
        </div>
      </template>
      <div v-else class="game-list__detail-empty">
        <p>请选择一个游戏</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useBaseLayoutStore } from '@/stores'
import { storeToRefs } from 'pinia'

/** 游戏数据接口 */
interface GameInfo {
  id: string
  /** 图标（emoji 或文字占位） */
  icon: string
  name: string
  description: string
  gameplay: string
}

/** 游戏列表数据 */
const games: GameInfo[] = [
  {
    id: 'basketball',
    icon: '🏀',
    name: '篮球对决',
    description: '实时篮球对战游戏，与全球玩家同场竞技',
    gameplay: '使用方向键移动球员，空格键投篮。每场比赛5分钟，得分多者获胜。支持1v1、3v3模式。'
  },
  {
    id: 'football',
    icon: '⚽',
    name: '足球竞技',
    description: '热血足球比赛，组建你的梦之队',
    gameplay: 'WASD控制球员移动，J键传球，K键射门。11人制比赛，配合战术赢得胜利。'
  },
  {
    id: 'racing',
    icon: '🏎️',
    name: '极速赛车',
    description: '极限竞速，漂移过弯超越对手',
    gameplay: '方向键控制方向，Shift键加速漂移。多种赛道可选，挑战最快圈速记录。'
  },
  {
    id: 'chess',
    icon: '♟️',
    name: '策略棋牌',
    description: '经典棋牌合集，运筹帷幄决胜千里',
    gameplay: '包含围棋、象棋、五子棋等多种棋类。支持人机对战和在线匹配两种模式。'
  },
  {
    id: 'shooting',
    icon: '🎯',
    name: '射击战场',
    description: '团队战术射击，配合队友夺取胜利',
    gameplay: '鼠标瞄准，左键射击，R键换弹。多种武器和地图，5v5团队竞技模式。'
  },
  {
    id: 'arena',
    icon: '🏆',
    name: '竞技场',
    description: '综合竞技平台，参与锦标赛赢取奖励',
    gameplay: '每日举办多场锦标赛，涵盖各类型游戏。积累积分提升段位，赢取丰厚奖励。'
  }
]

const baseLayoutStore = useBaseLayoutStore()
const { activeGameId } = storeToRefs(baseLayoutStore)

/** 当前选中的游戏对象 */
const activeGame = computed(() => games.find((g) => g.id === activeGameId.value) ?? null)

/** 选择游戏 */
function selectGame(id: string) {
  const game = games.find((g) => g.id === id)
  if (game) {
    baseLayoutStore.setActiveGame(game.id, game.icon, game.name)
  }
}
</script>

<style scoped lang="scss">
.game-list {
  display: flex;
  height: 100%;
  width: 100%;
  color: var(--text-primary);
}

/* ===== 左侧图标列表 ===== */
.game-list__icons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 60px;
  flex-shrink: 0;
  padding: 8px 4px;
  overflow-y: auto;
  /* 加粗分隔线，图标区与详情区边界分明 */
  border-right: 2px solid var(--border-default);
}

.game-list__icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;

  &:hover {
    background-color: var(--bg-surface-hover);
    transform: scale(1.08);
  }

  &:active {
    transform: scale(0.95);
  }

  &--active {
    background-color: var(--color-primary-light);
    /* 选中态加左侧色条，视觉更突出 */
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 25%;
      height: 50%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background-color: var(--color-primary);
    }
  }
}

.game-list__icon-emoji {
  font-size: 24px;
  line-height: 1;
  user-select: none;
}

/* ===== 右侧详情面板 ===== */
.game-list__detail {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
}

.game-list__detail-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}

.game-list__detail-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.game-list__detail-gameplay {
  /* 玩法介绍卡片 — 浅底圆角，从详情区中独立出来 */
  background-color: var(--bg-body);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border-light);

  h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
  }

  p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
  }
}

.game-list__detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;

  /* 空状态图标 */
  &::before {
    content: '🎮';
    font-size: 40px;
    opacity: 0.4;
  }
}
</style>