Build_God/Build_God_Game/src/views/MonsterListView.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMonsterStore } from '@/stores/monster'
import { useCharacterStore } from '@/stores/character'
import { ElMessage } from 'element-plus'
import defaultIcon from '@/assets/images/item-default.svg'

const router = useRouter()
const monsterStore = useMonsterStore()
const characterStore = useCharacterStore()

const getMonsterIcon = (iconName?: string) => {
  if (!iconName) return defaultIcon
  return `/src/assets/images/monster/${iconName}`
}

const getMonsterTypeLabel = (type: number) => {
  const labels: Record<number, string> = {
    1: '普通',
    2: '精英',
    3: '首领'
  }
  return labels[type] || '普通'
}

const getMonsterTypeClass = (type: number) => {
  const classes: Record<number, string> = {
    1: 'type-normal',
    2: 'type-elite',
    3: 'type-boss'
  }
  return classes[type] || 'type-normal'
}

const playerLevel = computed(() => characterStore.currentCharacter?.levelId || 0)

const canChallenge = (monster: { level: number }) => {
  return playerLevel.value >= monster.level
}

const handleChallenge = async (monster: { id: number; level: number }) => {
  if (!canChallenge(monster)) {
    ElMessage.warning('等级不足，无法挑战')
    return
  }
  router.push(`/battle?id=${monster.id}`)
}

onMounted(async () => {
  await monsterStore.fetchMonsters()
})
</script>

<template>
  <div class="monster-list-container">
    <div class="header">
      <h2>怪物挑战</h2>
      <span class="player-level">等级: {{ playerLevel }}</span>
    </div>

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

    <div v-else-if="monsterStore.monsters.length === 0" class="empty">
      暂无可挑战的怪物
    </div>

    <div v-else class="monster-grid">
      <div
        v-for="monster in monsterStore.monsters"
        :key="monster.id"
        class="monster-card"
        :class="{ disabled: !canChallenge(monster) }"
        @click="handleChallenge(monster)"
      >
        <div class="monster-icon">
          <img :src="getMonsterIcon(monster.icon)" :alt="monster.name" />
        </div>
        <div class="monster-info">
          <h3>{{ monster.name }}</h3>
          <span class="monster-level">等级: {{ monster.level }}</span>
          <span class="monster-type" :class="getMonsterTypeClass(monster.type)">
            {{ getMonsterTypeLabel(monster.type) }}
          </span>
        </div>
        <div class="monster-stats">
          <div class="stat">
            <span class="label">生命</span>
            <span class="value">{{ monster.health }}</span>
          </div>
          <div class="stat">
            <span class="label">攻击</span>
            <span class="value">{{ monster.attack }}</span>
          </div>
          <div class="stat">
            <span class="label">防御</span>
            <span class="value">{{ monster.defense }}</span>
          </div>
        </div>
        <div class="monster-rewards" v-if="monster.rewards && monster.rewards.length > 0">
          <span class="reward-label">击杀奖励:</span>
          <span
            v-for="reward in monster.rewards"
            :key="reward.id"
            class="reward-item"
          >
            {{ reward.itemName }} ×{{ reward.count }}
          </span>
        </div>
        <div class="challenge-hint">
          {{ canChallenge(monster) ? '点击挑战' : '等级不足' }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="css">
.monster-list-container {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header h2 {
  color: #f8fafc;
  margin: 0;
  font-size: 24px;
}

.player-level {
  color: #94a3b8;
  font-size: 14px;
}

.loading,
.empty {
  color: #64748b;
  text-align: center;
  padding: 60px 20px;
}

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

.monster-card {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.monster-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.monster-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.monster-card.disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.monster-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.monster-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.monster-info {
  text-align: center;
  margin-bottom: 12px;
}

.monster-info h3 {
  color: #f8fafc;
  margin: 0 0 8px;
  font-size: 18px;
}

.monster-level {
  color: #94a3b8;
  font-size: 14px;
  margin-right: 8px;
}

.monster-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.type-normal {
  background-color: #475569;
  color: #e2e8f0;
}

.type-elite {
  background-color: #7c3aed;
  color: #fff;
}

.type-boss {
  background-color: #dc2626;
  color: #fff;
}

.monster-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stat {
  text-align: center;
}

.stat .label {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.stat .value {
  display: block;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 600;
}

.monster-rewards {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reward-label {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}

.reward-item {
  display: inline-block;
  color: #22c55e;
  font-size: 12px;
  margin-right: 8px;
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.challenge-hint {
  margin-top: 12px;
  text-align: center;
  color: #8b5cf6;
  font-size: 14px;
  font-weight: 600;
}

.monster-card.disabled .challenge-hint {
  color: #ef4444;
}
</style>