MatchScheduleArena 比赛赛程竞技场

# MatchScheduleArena 比赛赛程竞技场

比赛赛程竞技场组件，用于展示用户在比赛中的排名、个人信息、倒计时和操作按钮，适用于竞技类游戏的赛程管理。

# 引入

import PressMatchScheduleArena from 'press-next/press-match-schedule-arena/press-match-schedule-arena';

# 代码演示

# 基础用法

展示用户排名、个人信息、倒计时和操作按钮。

<template>
  <PressMatchScheduleArena
    rank-text="第5名"
    rank-title="比赛进行中"
    status-type="champion"
    :user-info="userInfo"
    :day-time="dayTime"
    @button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const userInfo = ref({
  nickname: '游戏玩家',
  avatar: 'https://example.com/avatar.jpg',
  killCount: 15
});

// 倒计时时间（毫秒）：25天10小时30分钟
const dayTime = ref(25 * 24 * 60 * 60 * 1000 + 10 * 60 * 60 * 1000 + 30 * 60 * 1000);

const handleButtonClick = (button, index) => {
  console.log('按钮点击:', button.text, button.action);
  if (button.action === 'viewRanking') {
    // 查看榜单
  } else if (button.action === 'goToMatch') {
    // 去对局
  }
};
</script>

# 自定义按钮

支持自定义按钮文本、类型和操作标识，最多配置2个按钮。

<template>
  <PressMatchScheduleArena
    rank-text="第3名"
    rank-title="比赛进行中"
    status-type="champion"
    :user-info="userInfo"
    :ctrl-buttons="customButtons"
    :day-time="dayTime"
    @button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const userInfo = ref({
  nickname: '竞技高手',
  avatar: 'https://example.com/avatar.jpg',
  killCount: 28
});

const dayTime = ref(10 * 60 * 60 * 1000); // 10小时

// 自定义按钮配置（最多2个）
const customButtons = [
  { text: '分享战绩', type: 'default', action: 'share' },
  { text: '继续游戏', type: 'primary', action: 'continue' }
];

const handleButtonClick = (button, index) => {
  console.log('按钮点击:', button.text, button.action);
  switch (button.action) {
    case 'share':
      // 分享战绩
      break;
    case 'continue':
      // 继续游戏
      break;
  }
};
</script>

# 单按钮配置

只配置一个按钮时，按钮会占满整个宽度。

<template>
  <PressMatchScheduleArena
    rank-text="待定"
    rank-title="比赛未开始"
    :user-info="userInfo"
    :day-time="0"
    :ctrl-buttons="[{ text: '开始比赛', type: 'primary', action: 'start' }]"
    @button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
const userInfo = {
  nickname: '新手玩家',
  avatar: 'https://example.com/avatar.jpg',
  killCount: 0
};

const handleButtonClick = (button) => {
  if (button.action === 'start') {
    // 开始比赛
  }
};
</script>

# 自定义倒计时

通过 day-time 属性控制倒计时时间（单位：毫秒）。

<template>
  <div>
    <!-- 短时间倒计时：2小时 -->
    <PressMatchScheduleArena
      rank-text="第1名"
      rank-title="即将结束"
      :user-info="userInfo"
      :day-time="2 * 60 * 60 * 1000"
    />

    <!-- 长时间倒计时：30天 -->
    <PressMatchScheduleArena
      rank-text="第5名"
      rank-title="赛季进行中"
      :user-info="userInfo"
      :day-time="30 * 24 * 60 * 60 * 1000"
    />

    <!-- 动态更新倒计时 -->
    <PressMatchScheduleArena
      rank-text="第3名"
      rank-title="比赛进行中"
      :user-info="userInfo"
      :day-time="remainingTime"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const userInfo = {
  nickname: '竞技玩家',
  avatar: 'https://example.com/avatar.jpg',
  killCount: 18
};

// 动态倒计时
const remainingTime = ref(5 * 60 * 60 * 1000); // 初始5小时
let timer: number;

onMounted(() => {
  // 每秒更新倒计时
  timer = setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value -= 1000;
    }
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

# 自定义按钮插槽

使用插槽完全自定义按钮区域的样式和交互。

<template>
  <PressMatchScheduleArena
    rank-text="第2名"
    rank-title="比赛进行中"
    :user-info="userInfo"
    :day-time="dayTime"
  >
    <template #ctrls-btn>
      <button class="custom-btn secondary" @click="handleViewDetails">
        查看详情
      </button>
      <button class="custom-btn primary" @click="handleJoinMatch">
        立即参赛
      </button>
    </template>
  </PressMatchScheduleArena>
</template>

<script setup lang="ts">
const userInfo = {
  nickname: '自定义玩家',
  avatar: 'https://example.com/avatar.jpg',
  killCount: 20
};

const dayTime = 8 * 60 * 60 * 1000; // 8小时

const handleViewDetails = () => {
  console.log('查看比赛详情');
};

const handleJoinMatch = () => {
  console.log('立即参赛');
};
</script>

<style scoped>
.custom-btn {
  flex: 1;
  padding: .16rem .32rem;
  border-radius: .08rem;
  border: none;
  font-size: .28rem;
}

.custom-btn.primary {
  background: #1e72ff;
  color: white;
}

.custom-btn.secondary {
  background: transparent;
  color: #1e72ff;
  border: .02rem solid #1e72ff;
}
</style>

# API

# Props

参数	说明	类型	默认值
rank-title	标题文本	string	`'比赛进行中'`
rank-text	名次文本	string	`''`
status-type	状态类型（传递给标题组件）	string	`''`
user-info	用户信息（必填）	UserInfo	-
ctrl-buttons	控制按钮配置（最多2个）	CtrlButton[]	`[{ text: '查看榜单', type: 'default', action: 'viewRanking' }, { text: '去对局', type: 'primary', action: 'goToMatch' }]`
day-time	倒计时时间（毫秒）	number	`2192400000` (25天10小时30分钟)
custom-class	自定义类名	string	`''`

# UserInfo 数据结构

interface UserInfo {
  nickname: string;    // 用户昵称
  avatar?: string;     // 用户头像
  killCount?: number;  // 击杀数
}

# CtrlButton 数据结构

interface CtrlButton {
  text: string;  // 按钮文本
  type?: 'primary' | 'default' | 'info' | 'warning' | 'danger';  // 按钮类型
  action?: string;  // 按钮操作标识
}

# Events

事件名	说明	回调参数
button-click	按钮点击时触发	`(button: CtrlButton, index: number)`

# Slots

名称	说明
ctrls-btn	自定义操作按钮区域

# 功能特性

# 核心功能

✅ 排名展示：显示用户当前排名信息，支持自定义状态类型
✅ 用户信息：展示头像、昵称、击杀数等信息，支持长昵称截断
✅ 智能倒计时：自动格式化显示剩余时间（天/小时/分钟/秒），支持外部定制
✅ 自定义按钮：支持1-2个可自定义文本和类型的操作按钮

# 倒计时系统

⏰ 外部可控：通过 day-time 属性传入倒计时时间（毫秒）
⏰ 动态更新：支持实时更新倒计时数据
⏰ 智能格式化：自动展示为"XX天XX小时XX分"格式
⏰ 精确到秒：使用迷你倒计时组件精确展示

# 按钮系统

🎯 灵活配置：支持1-2个按钮，超过2个自动截取前2个
🎯 类型丰富：支持 primary、default 两种类型
🎯 操作标识：通过 action 字段区分不同按钮操作
🎯 响应式布局：单按钮占满宽度，双按钮等分空间
🎯 插槽扩展：支持通过 ctrls-btn 插槽完全自定义按钮区域

# 使用场景

竞技游戏赛程管理（实时倒计时）
排位赛进度展示（排名变化追踪）
锦标赛状态跟踪（赛季倒计时）
个人竞技数据展示（战绩统计）

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

名称	默认值	描述
--pmsa-card-padding	$spacing-lg	卡片内边距
--pmsa-title-mt	.4rem	标题区域上边距
--pmsa-title-mb	$spacing-sm	标题区域下边距
--pmsa-title-gap	$spacing-sm	标题内行间距
--pmsa-user-mt	$spacing-sm	用户区域上边距
--pmsa-user-gap	$spacing-xs	用户信息间距
--pmsa-stats-padding-lr	$spacing-sm	统计区域左右内边距
--pmsa-ctrls-gap	$spacing-lg	按钮间距
--pmsa-ctrls-mt	$spacing-lg	按钮上边距
--pmsa-user-padding-top	$spacing-md	用户区域上内边距
--pmsa-countdown-mt	$spacing-md	倒计时上边距
--pmsa-title-xiushi-width	1.2rem	标题修饰部分宽度
--pmsa-avatar-size	1rem	头像尺寸
--pmsa-nickname-max-width	2.88rem	昵称最大宽度
--pmsa-stats-height	.34rem	统计区域高度
--pmsa-card-bg-color	$color-surface-default	卡片背景色
--pmsa-title-text-color	$color-text-primary	标题文字色
--pmsa-nickname-text-color	$color-text-secondary	昵称文字色
--pmsa-stats-bg-color	$color-surface-brand-light2	统计背景色
--pmsa-stats-text-color	$color-text-brand	统计文字色
--pmsa-title-xiushi-left-bg	linear-gradient(...)	标题修饰左侧背景
--pmsa-title-xiushi-right-bg	linear-gradient(...)	标题修饰右侧背景
--pmsa-countdown-label-text-color	$color-text-secondary	倒计时标签文字色
--pmsa-countdown-info-text-color	$color-text-secondary	倒计时信息文字色
--pmsa-avatar-border-color	$color-divider-default	头像边框色
--pmsa-user-bg	linear-gradient(...)	用户背景色
--pmsa-title-font-size	$font-size-lg	标题字体大小
--pmsa-nickname-font-size	$font-size-md	昵称字体大小
--pmsa-nickname-font-weight	$font-weight-bold	昵称字体粗细
--pmsa-stats-font-size	$font-size-xs	统计字体大小
--pmsa-countdown-label-font-size	$font-size-sm	倒计时标签字体大小
--pmsa-countdown-info-font-size	$font-size-sm	倒计时信息字体大小
--pmsa-card-border-radius	$border-radius-sm	卡片圆角
--pmsa-avatar-border-radius	$border-radius-circle	头像圆角
--pmsa-stats-border-radius	$border-radius-none	统计区域圆角
--pmsa-user-border-radius	$border-radius-sm	用户区域圆角
--pmsa-card-shadow	none	卡片阴影

# 自定义样式示例

<template>
  <PressMatchScheduleArena
    class="custom-arena"
    :rank-text="rankText"
    :user-info="userInfo"
  />
</template>

<style>
.custom-arena {
  --pmsa-card-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --pmsa-title-text-color: #ffffff;
  --pmsa-nickname-text-color: #ffffff;
  --pmsa-stats-bg-color: rgba(255, 255, 255, 0.2);
  --pmsa-stats-text-color: #ffffff;
  --pmsa-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
</style>

← MatchRoundSetList MatchScheduleArenaRank →