nl-game/src/components/LevelSelect.vue

<script setup>
// 关卡选择：带关卡游戏的开局面板（连连看/消消乐/马里奥通用）
// 展示：关卡宫格（已过⭐/当前📍/未解锁🔒）、每关正在挑战的好友头像、好友进度名单、继续按钮
import { computed } from 'vue'
import PixelAvatar from './PixelAvatar.vue'

const props = defineProps({
  total: { type: Number, required: true }, // 总关卡数
  names: { type: Array, default: null }, // 每关小字标签（可选，如模式名/世界号）
  myLevel: { type: Number, default: 1 }, // 我解锁到的关卡（通关全部后为 total+1）
  friends: { type: Array, default: () => [] }, // 好友进度 [{user_id,nickname,avatar,level}]
})
const emit = defineEmits(['pick'])

const allCleared = computed(() => props.myLevel > props.total) // 是否已全通关
const continueLevel = computed(() => Math.min(props.myLevel, props.total)) // 继续按钮对应的关

// 好友挂在哪一格显示（超过总关数的通关好友挂在最后一格）
function friendsAt(lv) {
  return props.friends.filter((f) => Math.min(f.level, props.total) === lv)
}
// 好友进度文案
function friendText(f) {
  return f.level > props.total ? '已通关' : `第 ${f.level} 关`
}
</script>

<template>
  <div class="level-select">
    <p v-if="allCleared" class="ls-sub">🏆 已全部通关！可以重温任意关卡</p>
    <p v-else-if="myLevel > 1" class="ls-sub">上次闯到<b class="text-primary">第 {{ myLevel }} 关</b>，从这里继续吧</p>
    <p v-else class="ls-sub text-dim">从第 1 关开始你的闯关之旅</p>
    <button class="btn btn-lg ls-continue" @click="emit('pick', continueLevel)">
      {{ allCleared ? `🔄 重玩第 ${total} 关` : myLevel > 1 ? `▶ 继续第 ${myLevel} 关` : '▶ 开始闯关' }}
    </button>
    <!-- 关卡宫格 -->
    <div class="ls-grid">
      <button
        v-for="i in total"
        :key="i"
        class="ls-cell"
        :class="{ cleared: i < myLevel, current: i === myLevel && !allCleared, locked: i > myLevel }"
        :disabled="i > myLevel"
        :title="i > myLevel ? '通关前面的关卡后解锁' : `进入第 ${i} 关`"
        @click="emit('pick', i)"
      >
        <span class="ls-state">{{ i < myLevel ? '⭐' : i === myLevel && !allCleared ? '📍' : i > myLevel ? '🔒' : '⭐' }}</span>
        <span class="ls-num">{{ i }}</span>
        <span v-if="names && names[i - 1]" class="ls-name">{{ names[i - 1] }}</span>
        <!-- 该关的好友头像（最多 3 个 + 溢出数） -->
        <span v-if="friendsAt(i).length" class="ls-favatars" :title="friendsAt(i).map((f) => f.nickname).join('、')">
          <span v-for="f in friendsAt(i).slice(0, 3)" :key="f.user_id" class="ls-fa"><PixelAvatar :code="f.avatar" :size="14" /></span>
          <span v-if="friendsAt(i).length > 3" class="ls-fmore">+{{ friendsAt(i).length - 3 }}</span>
        </span>
      </button>
    </div>
    <!-- 好友进度名单 -->
    <div v-if="friends.length" class="ls-friends">
      <span class="text-dim">好友进度：</span>
      <span v-for="f in friends" :key="f.user_id" class="ls-fitem">
        <PixelAvatar :code="f.avatar" :size="16" /> {{ f.nickname }} <b>{{ friendText(f) }}</b>
      </span>
    </div>
    <p v-else class="ls-friends text-dim" style="font-size: 12px">还没有好友玩过这个游戏，喊朋友一起来闯关吧～</p>
  </div>
</template>

<style scoped>
.level-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(560px, 100%);
}
.ls-sub {
  font-size: 14px;
}
.ls-continue {
  min-width: 220px;
}
.ls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  width: 100%;
}
.ls-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) / 1.4);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  padding: 4px;
}
.ls-cell:not(.locked):hover {
  border-color: var(--primary);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}
.ls-cell.cleared {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.ls-cell.current {
  border-color: var(--primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--bg-card)), var(--bg-card));
  box-shadow: var(--glow);
}
.ls-cell.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.ls-state {
  font-size: 14px;
  line-height: 1;
}
.ls-num {
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}
.ls-name {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-favatars {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-radius: 999px;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.2;
}
.ls-fa {
  margin-left: -2px;
}
.ls-fmore {
  font-size: 9px;
  color: var(--text-dim);
  margin-left: 1px;
}
.ls-friends {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  font-size: 12px;
  color: var(--text);
}
.ls-fitem b {
  color: var(--primary-2);
}
</style>