game_event_admin/src/views/system/gameEvent/RankingBoardPage.vue

<template>
  <div class="ranking-board-page">
    <!-- 右上角倒计时显示 -->
    <div class="countdown-display">
      <!-- <el-card shadow="never" class="countdown-card"> -->
      <el-button size="default" type="primary">
        <div class="countdown-content">
          <!-- <el-icon class="countdown-icon"><Timer /></el-icon> -->
          <span>{{ countdownSeconds }}秒后刷新</span>
        </div>
      </el-button>
        
      <!-- </el-card> -->
    </div>
    <!-- 赛事名称标题 -->
    <div class="event-title">
      <h2>{{defaultEventInfo ? defaultEventInfo.eventName : '赛事排行榜'}}</h2>
      <p>随时掌握运动会情况</p>
    </div>
    <el-row :gutter="20" class="ranking-row">
      <el-col :span="8">
        <el-card shadow="hover" class="ranking-card">
          <template #header>
            <div class="card-header header-one">
              <div class="personal-ranking-header">
                <!-- 标题单独一行，居中对齐 -->
                <div class="header-title">
                  <span>个人积分排行榜</span>
                </div>
                <!-- 控件在一行，均匀分布 -->
                <div class="header-controls">
                  <div class="display-count-control">
                    <span class="control-label">前</span>
                    <el-input-number
                      v-model="personalDisplayCount"
                      :min="1"
                      :max="100"
                      size="small"
                      controls-position="right"
                      style="width: 80px; margin: 0 5px;"
                      @change="handlePersonalCountChange"
                    />
                    <span class="control-label">名</span>
                  </div>
                  <el-button
                    type="primary"
                    size="small"
                    :icon="Refresh"
                    :loading="personalRefreshing"
                    @click="refreshPersonalRanking"
                    class="refresh-btn"
                  >
                    刷新
                  </el-button>
                </div>
              </div>
            </div>
          </template>
          <div class="ranking-list ranking-list-full">
            <!-- 添加标题行 -->
            <div class="ranking-header">
              <div class="header-content">
                <span class="header-rank">名次</span>
                <span class="header-name">姓名</span>
                <span class="header-team">队伍名称</span>
                <span class="header-score">积分</span>
              </div>
            </div>
            <div v-for="(item, index) in displayedAthleteList" :key="index" class="ranking-item">
              <div class="item-content">
                <span class="item-rank">{{ getRankDisplay(item, index, athleteScoreList) }}</span>
                <span class="item-name">{{ item.athleteName }}</span>
                <span class="item-team">{{ item.teamName }}</span>
                <span class="item-time">{{ item.totalScore }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="ranking-card">
          <template #header>
            <div class="card-header header-three">
              <div class="team-ranking-header">
                <!-- 标题单独一行，居中对齐 -->
                <div class="header-title">
                  <span>团队积分排行榜</span>
                </div>
                <!-- 控件在一行，均匀分布 -->
                <div class="header-controls">
                  <el-select 
                    v-model="selectedRankGroupId" 
                    placeholder="选择分组" 
                    clearable 
                    size="small" 
                    @change="handleRankGroupChange"
                    class="group-select"
                  >
                    <el-option label="全部队伍" :value="ALL_GROUPS_VALUE"></el-option>
                    <el-option
                      v-for="group in rankGroupOptions"
                      :key="group.rgId"
                      :label="group.rgName"
                      :value="group.rgId"
                    />
                  </el-select>
                  <div class="display-count-control">
                    <span class="control-label">前</span>
                    <el-input-number
                      v-model="teamDisplayCount"
                      :min="1"
                      :max="100"
                      size="small"
                      controls-position="right"
                      style="width: 80px; margin: 0 5px;"
                      @change="handleTeamCountChange"
                    />
                    <span class="control-label">名</span>
                  </div>
                  <el-button
                    type="primary"
                    size="small"
                    :icon="Refresh"
                    :loading="teamRefreshing"
                    @click="refreshTeamRanking"
                    class="refresh-btn"
                  >
                    刷新
                  </el-button>
                </div>
              </div>
            </div>
          </template>
          <div class="ranking-list ranking-list-full">
            <!-- 添加标题行 -->
            <div class="ranking-header">
              <div class="header-content">
                <span class="header-rank">名次</span>
                <span class="header-team-name">队伍名称</span>
                <span class="header-group">组别</span>
                <span class="header-score">总分</span>
              </div>
            </div>
            <div v-for="(item, index) in displayedTeamList" :key="index" class="ranking-item">
              <div class="item-content">
                <span class="item-rank">{{ getRankDisplay(item, index, filteredTeamScores) }}</span>
                <span class="item-team-name">{{ item.teamName }}</span>
                <span class="item-group">{{ item.rgName }}</span>
                <span class="item-score">{{ item.score }}分</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="ranking-card">
          <template #header>
            <div class="card-header header-two">
              <span>项目进度</span>
            </div>
          </template>
          <div class="progress-info">
            <p>{{ completedTasks }} / {{ totalTasks }}</p>
            <el-progress :percentage="progressPercentage" />
          </div>
          <div class="ranking-list ranking-list-full">
            <div v-for="(item, index) in projectProgress" :key="index" class="ranking-item">
              <div class="item-content">
                <span class="item-name">{{ item.projectName }}</span>
                <span class="item-type">{{ getProjectTypeText(item.projectType) }} {{ item.classification === '0' ? '个人' : '团体' }}</span>
                <span class="item-time">{{ formatTime(item.startTime) }}</span>
              </div>
              <!-- 如果有组别信息，显示组别详情 -->
              <div v-if="item.groups && item.groups.length > 0" class="group-details">
                <div v-for="group in item.groups" :key="group.groupId" class="group-item">
                  <span class="group-name">{{ group.groupName }}</span>
                  <span class="group-time">{{ formatTimeOnly(group.beginTime) }}</span>
                  <span class="group-status" :class="'status-' + group.status">{{ group.statusText }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
8
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, getCurrentInstance, toRefs } from 'vue';
import { listScoreRanking, listPersonalRanking, listTeamRanking } from '@/api/system/gameEvent/eventRank';
import { listGameScore } from '@/api/system/gameScore';
import { listGameTeam } from '@/api/system/gameTeam';
import { getProjectProgress } from '@/api/system/gameEvent/projectProgress';
import { useRouter,useRoute } from 'vue-router';
import { GameTeamVO } from '@/api/system/gameTeam/types';
import { ProjectProgressVo, GroupProgressVo } from '@/api/system/gameEvent/types';
import { useGameEventStore } from '@/store/modules/gameEvent';
import { storeToRefs } from 'pinia';
import { listRankGroup } from '@/api/system/rankGroup'; 
import { RankGroupVO } from '@/api/system/rankGroup/types'; 
import { Refresh } from '@element-plus/icons-vue';
import { Timer, Close } from '@element-plus/icons-vue';

// 定义队伍积分排行榜的数据结构
interface TeamScore {
  rgId: string | number;
  teamId: string | number;
  teamName: string;
  score: number;
  rank: number;
  rgName?: string;
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { game_project_type } = toRefs<any>(proxy?.useDict('game_project_type'));

// const route = useRoute();
// const eventId = route.params.eventId as string;

//从pinia中获取默认赛事信息
const gameEventStore = useGameEventStore();
const { defaultEventInfo } = storeToRefs(gameEventStore);

const athleteScoreList = ref([]);

const completedTasks = ref(0);
const totalTasks = ref(0);
const progressPercentage = computed(() => totalTasks.value > 0 ? Math.round((completedTasks.value / totalTasks.value) * 100) : 0);

const projectProgress = ref<ProjectProgressVo[]>([]);

const teamScores = ref<TeamScore[]>([]);
const filteredTeamScores = ref<TeamScore[]>([]); // 用于显示筛选后的队伍积分

const ALL_GROUPS_VALUE = 'all';
// 分组相关数据
const rankGroupOptions = ref<RankGroupVO[]>([]);
const selectedRankGroupId = ref<string | number | null>(null);

// 显示数量控制
const personalDisplayCount = ref(10); // 个人排行榜显示数量，默认10
const teamDisplayCount = ref(10); // 团队排行榜显示数量，默认10

// 添加刷新状态控制
const personalRefreshing = ref(false); // 个人排行榜刷新状态
const teamRefreshing = ref(false); // 团队排行榜刷新状态

// 自动刷新相关
const autoRefreshInterval = ref<NodeJS.Timeout | null>(null);
const autoRefreshSeconds = ref(300); // 默认300秒自动刷新
// 添加倒计时相关状态
const countdownSeconds = ref(0); // 倒计时秒数
const countdownInterval = ref<NodeJS.Timeout | null>(null); // 倒计时定时器

// 启动倒计时
const startCountdown = () => {
  stopCountdown();
  countdownSeconds.value = autoRefreshSeconds.value;
  
  countdownInterval.value = setInterval(() => {
    countdownSeconds.value--;
    
    if (countdownSeconds.value <= 0) {
      countdownSeconds.value = autoRefreshSeconds.value;
    }
  }, 1000);
};

// 停止倒计时
const stopCountdown = () => {
  if (countdownInterval.value) {
    clearInterval(countdownInterval.value);
    countdownInterval.value = null;
  }
  countdownSeconds.value = 0;
};

// 根据显示数量过滤数据
const displayedAthleteList = computed(() => {
  return athleteScoreList.value.slice(0, personalDisplayCount.value);
});

const displayedTeamList = computed(() => {
  return filteredTeamScores.value.slice(0, teamDisplayCount.value);
});

// 处理个人排行榜显示数量变化
const handlePersonalCountChange = (value: number) => {
  personalDisplayCount.value = value;
};

// 处理团队排行榜显示数量变化
const handleTeamCountChange = (value: number) => {
  teamDisplayCount.value = value;
};

// 获取队伍积分排行榜
const loadTeamScores = async () => {
  // 获取所有成绩数据
  const scoreRes = await listGameScore({
    eventId: defaultEventInfo.value.eventId,
    pageNum: 1,
    pageSize: 1000,
    orderByColumn: '',
    isAsc: ''
  });
  const scores = scoreRes.rows;
  
  // 获取所有队伍信息
  const teamRes = await listGameTeam({
    eventId: defaultEventInfo.value.eventId,
    pageNum: 1,
    pageSize: 1000,
    orderByColumn: '',
    isAsc: ''
  });
  const teams = teamRes.rows;

  // 获取分组信息（如果还没有加载的话）
  if (rankGroupOptions.value.length === 0) {
    await loadRankGroupOptions();
  }
  
  // 创建分组ID到分组名称的映射
  const groupMap = new Map();
  rankGroupOptions.value.forEach(group => {
    groupMap.set(group.rgId, group.rgName);
  });
  
  // 计算每个队伍的总积分
  const teamScoreMap = new Map();
  scores.forEach(score => {
    const teamId = score.teamId;
    if (teamId) {
      if (teamScoreMap.has(teamId)) {
        teamScoreMap.set(teamId, teamScoreMap.get(teamId) + score.scorePoint);
      } else {
        teamScoreMap.set(teamId, score.scorePoint);
      }
    }
  });
  
  // 将队伍信息和积分结合
  const teamScoreList = teams.map(team => {
    return {
      teamId: team.teamId,
      teamName: team.teamName,
      score: teamScoreMap.get(team.teamId) || 0,
      rank: 0, // 占位符，稍后设置
      rgId: team.rgId, // 添加分组ID
      rgName: groupMap.get(team.rgId) || '-' // 添加分组名称
    };
  });
  
  // 按积分从高到低排序
  teamScoreList.sort((a, b) => b.score - a.score);
  
  // 添加排名（支持并列排名）
  let currentRank = 1;
  for (let i = 0; i < teamScoreList.length; i++) {
    const team = teamScoreList[i];
    const currentScore = team.score || 0;
    
    // 如果不是第一个，检查是否与前一个积分相同
    if (i > 0) {
      const previousScore = teamScoreList[i - 1].score || 0;
      if (currentScore !== previousScore) {
        currentRank = i + 1;
      }
    }
    
    team.rank = currentRank;
  }
  
  teamScores.value = teamScoreList;
  // 默认显示所有队伍
  filteredTeamScores.value = teamScoreList;
};

// 处理分组筛选变化
const handleRankGroupChange = (rgId: string | number | null) => {
  if (rgId === null || rgId === ALL_GROUPS_VALUE) {
    // 显示所有队伍
    filteredTeamScores.value = teamScores.value;
  } else {
    // 筛选指定分组的队伍
    filteredTeamScores.value = teamScores.value.filter(team => team.rgId === rgId);
  }
  
  // 重新计算排名
  let currentRank = 1;
  for (let i = 0; i < filteredTeamScores.value.length; i++) {
    const team = filteredTeamScores.value[i];
    const currentScore = team.score || 0;
    
    if (i > 0) {
      const previousScore = filteredTeamScores.value[i - 1].score || 0;
      if (currentScore !== previousScore) {
        currentRank = i + 1;
      }
    }
    
    team.rank = currentRank;
  }
};

// 获取分组选项
const loadRankGroupOptions = async () => {
  try {
    const res = await listRankGroup({
      eventId: defaultEventInfo.value.eventId,
      pageNum: 1,
      pageSize: 1000,
      orderByColumn: undefined,
      isAsc: undefined,
      status: '0'
    });
    rankGroupOptions.value = res.rows;
  } catch (error) {
    console.error('获取分组列表失败:', error);
  }
};

// 加载项目进度信息
const loadProjectProgress = async () => {
  try {
    const res = await getProjectProgress(defaultEventInfo.value.eventId);
    projectProgress.value = res.data || [];
    
    // 计算已完成和总任务数
    let completed = 0;
    let total = 0;
    
    projectProgress.value.forEach(project => {
      if (project.groups && project.groups.length > 0) {
        // 有组别的项目，统计组别
        project.groups.forEach(group => {
          total++;
          if (group.status === '2') { // 已完成
            completed++;
          }
        });
      } else {
        // 没有组别的项目，直接统计项目
        total++;
        if (project.status === '2') { // 已完成
          completed++;
        }
      }
    });
    
    completedTasks.value = completed;
    totalTasks.value = total;
    
    // 前端也可以做一次排序确保，虽然后端已经排序了
    // 按完整时间排序（项目时间或最早组别时间）
    projectProgress.value.sort((a, b) => {
      const getEarliestTime = (project: ProjectProgressVo) => {
        if (project.groups && project.groups.length > 0) {
          // 有组别，找到最早的组别时间
          const groupTimes = project.groups
            .map(g => g.beginTime ? new Date(g.beginTime).getTime() : 0)
            .filter(time => time > 0);
          if (groupTimes.length > 0) {
            return Math.min(...groupTimes);
          }
        }
        // 没有组别或组别时间无效，使用项目时间
        return project.startTime ? new Date(project.startTime).getTime() : 0;
      };
      
      const aTime = getEarliestTime(a);
      const bTime = getEarliestTime(b);
      
      return aTime - bTime;
    });
  } catch (error) {
    console.error('加载项目进度失败:', error);
  }
};

// 获取项目类型文本
const getProjectTypeText = (projectType: string) => {
  if (!game_project_type.value || !projectType) return '未知';
  
  const typeItem = game_project_type.value.find((item: any) => item.value === projectType);
  return typeItem ? typeItem.label : '未知';
};

// 格式化时间显示（包含日期）
const formatTime = (timeStr: string) => {
  if (!timeStr) return '-';
  try {
    const date = new Date(timeStr);
    // 检查是否是有效日期
    if (isNaN(date.getTime())) {
      return timeStr;
    }
    return date.toLocaleString('zh-CN', { 
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit', 
      minute: '2-digit',
      hour12: false 
    });
  } catch (error) {
    return timeStr;
  }
};

// 格式化时间显示（仅时间，用于组别详情）
const formatTimeOnly = (timeStr: string) => {
  if (!timeStr) return '-';
  try {
    const date = new Date(timeStr);
    // 检查是否是有效日期
    if (isNaN(date.getTime())) {
      return timeStr;
    }
    return date.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit',
      hour12: false 
    });
  } catch (error) {
    return timeStr;
  }
};

// 获取排名显示文本（支持并列排名，排名数值连续）
const getRankDisplay = (item: any, index: number, list: any[]) => {
  // 如果项目有rank字段（如团队排名），直接使用
  if (item.rank !== undefined) {
    return `第${item.rank}名`;
  }
  
  // 个人排名逻辑（排名数值连续）
  // 计算当前项目的实际排名
  // 排名 = 比当前积分高的不同积分数量 + 1
  const currentScore = item.totalScore || 0;
  const higherScores = new Set();
  
  for (let i = 0; i < list.length; i++) {
    if (list[i].totalScore > currentScore) {
      higherScores.add(list[i].totalScore);
    }
  }
  
  const actualRank = higherScores.size + 1;
  return `第${actualRank}名`;
};

// 刷新个人排行榜数据
const refreshPersonalRanking = async () => {
  personalRefreshing.value = true;
  try {
    const res = await listScoreRanking(defaultEventInfo.value.eventId.toString());
    // 按照totalScore字段降序排序（分数高的在前面）
    athleteScoreList.value = res.data.sort((a, b) => b.totalScore - a.totalScore);
    // 手动刷新时重置倒计时
    startCountdown();
    // 显示成功消息
    ElMessage.success('个人排行榜数据已刷新');
  } catch (error) {
    console.error('刷新个人排行榜失败:', error);
    ElMessage.error('刷新个人排行榜失败');
  } finally {
    personalRefreshing.value = false;
  }
};

// 刷新团队排行榜数据
const refreshTeamRanking = async () => {
  teamRefreshing.value = true;
  try {
    // 重新加载队伍积分排行榜
    await loadTeamScores();
    // 手动刷新时重置倒计时
    startCountdown();
    
    // 显示成功消息
    ElMessage.success('团队排行榜数据已刷新');
  } catch (error) {
    console.error('刷新团队排行榜失败:', error);
    ElMessage.error('刷新团队排行榜失败');
  } finally {
    teamRefreshing.value = false;
  }
};

// 刷新所有数据
const refreshAllData = async () => {
  personalRefreshing.value = true;
  teamRefreshing.value = true;
  
  try {
    // 并行刷新所有数据
    await Promise.all([
      refreshPersonalRanking(),
      refreshTeamRanking(),
      loadProjectProgress()
    ]);
    ElMessage.success('所有数据已刷新');
  } catch (error) {
    console.error('刷新数据失败:', error);
    ElMessage.error('刷新数据失败');
  } finally {
    personalRefreshing.value = false;
    teamRefreshing.value = false;
  }
};

// 开启自动刷新
const startAutoRefresh = () => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value);
  }
  
  autoRefreshInterval.value = setInterval(() => {
    // refreshAllData();
  }, autoRefreshSeconds.value * 1000);
  // 开启倒计时
  startCountdown();
  ElMessage.success(`已开启自动刷新，每${autoRefreshSeconds.value}秒刷新一次`);
};

// 组件卸载时清理定时器
onUnmounted(() => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value);
  }
  // 停止倒计时
  stopCountdown();
});

onMounted(async () => {
  try{
    // refreshAllData();
    startAutoRefresh();
    const res = await listScoreRanking(defaultEventInfo.value.eventId.toString());
    // 按照totalScore字段降序排序（分数高的在前面）
    athleteScoreList.value = res.data.sort((a, b) => b.totalScore - a.totalScore);
    // 并行加载其他数据
    await Promise.all([
      // 加载队伍积分排行榜
      loadTeamScores(),
      // 加载分组选项
      loadRankGroupOptions(),
      // 加载项目进度信息
      loadProjectProgress()
    ]);
    // // 开启自动刷新
    // startAutoRefresh();
  } catch (error) {
    console.error('加载数据失败:', error);
  }
});
</script>

<style scoped>
.ranking-board-page {
  padding: 20px;
  height: calc(100vh - 120px);
  position: relative;
}
/* 赛事名称标题样式 */
.event-title {
  margin-bottom: 20px;
  text-align: center;
}

.event-title h2 {
  font-size: 24px;
  margin: 0;
}

.event-title p {
  font-size: 16px;
  color: #666;
  margin: 5px 0 0;
}

.ranking-row {
  height: calc(100% - 70px); /* 调整高度以适应新增标题区域 */
}

.ranking-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  color: black;
  text-align: center;
}

/* 团队排行榜头部样式 */
.team-ranking-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-info {
  margin-bottom: 15px;
}

.ranking-list {
  max-height: 800px;
  overflow-y: auto;
}

.ranking-list-full {
  flex: 1;
  overflow-y: auto;
}

.ranking-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.item-content {
  display: flex;
  justify-content: space-between;
}

.item-name {
  flex: 2;
  text-align: left;
}

.item-team,
.item-time,
.item-type,
.item-rank,
.item-team-name,
.item-group,
.item-score {
  flex: 1;
  text-align: center;
}

/* 组别详情样式 */
.group-details {
  margin-top: 8px;
  padding-left: 20px;
  border-left: 2px solid #e0e0e0;
}

.group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: #666;
}

.group-name {
  flex: 3;
  text-align: left;
}

.group-time {
  flex: 2;
  text-align: center;
}

.group-status {
  flex: 1;
  text-align: center;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}

.status-0 {
  background-color: #f0f0f0;
  color: #999;
}

.status-1 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-2 {
  background-color: #f6ffed;
  color: #52c41a;
}

/* 标题行样式 */
.ranking-header {
  padding: 12px 0;
  border-bottom: 2px solid #e0e0e0;
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
}

/* 个人积分排行榜标题样式 */
.header-rank,
.header-team,
.header-score {
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.header-name {
  flex: 2;
  text-align: left;
  font-size: 14px;
}

/* 团队积分排行榜标题样式 */
.header-team-name {
  flex: 2;
  text-align: left;
  font-size: 14px;
}

.header-group {
  flex: 1;
  text-align: center;
  font-size: 14px;
}

/* 数据行样式 */
.item-content {
  display: flex;
  justify-content: space-between;
}

/* 个人积分排行榜数据样式 */
.item-name {
  flex: 2;
  text-align: left;
}

.item-team,
.item-time,
.item-type,
.item-rank {
  flex: 1;
  text-align: center;
}

/* 团队积分排行榜数据样式 */
.item-team-name {
  flex: 2;
  text-align: left;
}

.item-rank,
.item-group,
.item-score {
  flex: 1;
  text-align: center;
}

/* 团队积分排行榜特殊样式优化 */
.ranking-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.ranking-item:hover {
  background-color: #f8f9fa;
}

.ranking-item:last-child {
  border-bottom: none;
}

/* 组别列样式优化 */
.item-group {
  color: #666;
  font-size: 13px;
}

/* 总分列样式优化 */
.item-score {
  font-weight: 500;
  /* color: #1890ff; */
}

/* 个人排行榜头部样式 */
.personal-ranking-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

/* 团队排行榜头部样式 */
.team-ranking-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

/* 标题样式 */
.header-title {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: black;
  margin-bottom: 4px;
}

/* 控件区域样式 */
.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  min-height: 32px;
}

/* 显示数量控制样式 */
.display-count-control {
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

/* 分组选择框样式 */
.group-select {
  width: 120px;
}

/* 刷新按钮样式 */
.refresh-btn {
  min-width: 60px;
  height: 28px;
}

.refresh-btn .el-icon {
  margin-right: 4px;
}

.control-label {
  font-size: 12px;
  color: #666;
  margin: 0 2px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-controls {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  
  .display-count-control {
    order: 1;
  }
  
  .group-select {
    order: 2;
  }
  
  .refresh-btn {
    order: 3;
  }
}

@media (max-width: 768px) {
  .header-title {
    font-size: 14px;
  }
  
  .header-controls {
    gap: 8px;
  }
  
  .group-select {
    width: 100%;
    max-width: 200px;
  }
}

/* 输入框样式优化 */
.display-count-control .el-input-number {
  --el-input-number-controls-width: 20px;
}

.display-count-control .el-input-number .el-input__inner {
  text-align: center;
  padding: 0 5px;
}

/* 右上角倒计时样式 */
.countdown-display {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.countdown-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #e4e7ed;
}

.countdown-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.countdown-icon {
  color: #409eff;
  font-size: 16px;
}

.countdown-text {
  font-weight: bold;
  color: #409eff;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
}

/* .stop-btn {
  padding: 2px;
  color: #f56c6c;
}

.stop-btn:hover {
  background-color: #fef0f0;
} */

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .countdown-display {
    top: 10px;
    right: 10px;
  }
  
  .countdown-content {
    padding: 2px 6px;
  }
  
  .countdown-text {
    font-size: 12px;
    min-width: 25px;
  }
}
</style>