MatchScheduleCard 赛程对阵卡片

# MatchScheduleCard 赛程对阵卡片

# 介绍

赛程对阵卡片组件，用于显示电竞比赛的对战信息，支持多种比赛状态和队伍类型。组件基于真实数据结构设计，支持轮空、待定、弃权等特殊状态，并提供灵活的自定义配置能力。

# 引入

import PressMatchScheduleCard from 'press-next/press-match-schedule-card/press-match-schedule-card.vue';

# 代码演示

# 基础用法

<template>
  <PressMatchScheduleCard
    :battle-data="battleData"
    :round-info="roundInfo"
    @team-click="handleTeamClick"
    @manage-click="handleManageClick"
  />
</template>

<script setup lang="ts">
import { getMockData } from 'src/packages/press-match-schedule-card/demo-data';
import PressMatchScheduleCard from 'src/packages/press-match-schedule-card/press-match-schedule-card.vue';

const { finishedBattle, roundInfo } = getMockData();

const handleTeamClick = (side: 'left' | 'right', team: any) => {
  console.log('队伍点击:', side, team);
};

const handleManageClick = () => {
  console.log('管理按钮点击');
};
</script>

# 不同状态演示

<template>
  <!-- 已结束状态 -->
  <PressMatchScheduleCard
    :battle-data="finishedBattle"
    :round-info="roundInfo"
    :my-team-id="'team-id-500-0-a'"
  />

  <!-- 比赛中状态 -->
  <PressMatchScheduleCard
    :battle-data="liveBattle"
    :round-info="roundInfo"
    :my-team-id="'team-id-500-1-a'"
  />

  <!-- 待管理员开赛状态 -->
  <PressMatchScheduleCard
    :battle-data="waitingBattle"
    :round-info="roundInfo"
    :show-manage-button="true"
  />

  <!-- 弃权状态演示 -->
  <PressMatchScheduleCard
    :battle-data="quitBattle"
    :round-info="roundInfo"
    :right-team-quit="true"
  />

  <!-- 轮空状态演示 -->
  <PressMatchScheduleCard
    :battle-data="byeBattle"
    :round-info="roundInfo"
    :bye-avatar="byeAvatarUrl"
  />
</template>

# 自定义Badge文字

支持自定义badge标签的显示文字，适配不同业务场景。

<template>
  <!-- 自定义badge文字为英文 -->
  <PressMatchScheduleCard
    :battle-data="quitBattle"
    :round-info="roundInfo"
    :my-team-id="'team-id-001'"
    :right-team-quit="true"
    :badge-texts="{ me: 'ME', quit: 'QUIT' }"
  />
  
  <!-- 自定义badge文字为中文 -->
  <PressMatchScheduleCard
    :battle-data="quitBattle"
    :round-info="roundInfo"
    :right-team-quit="true"
    :badge-texts="{ quit: '弃赛' }"
  />
</template>

# 自定义按钮插槽

<template>
  <PressMatchScheduleCard
    :battle-data="battleData"
    :round-info="roundInfo"
  >
    <template #manage-btn>
      <PressButton
        type="primary"
        size="small"
        @click="customManageAction"
      >
        自定义管理
      </PressButton>
    </template>
  </PressMatchScheduleCard>
</template>

# API

# Props

参数	说明	类型	默认值
battle-data	对战数据，基于真实数据结构	`BattleData`	-
round-info	轮次信息	`RoundInfo`	-
custom-class	自定义类名	`string`	`''`
show-manage-button	是否显示管理按钮	`boolean`	`false`
my-team-id	当前用户队伍ID，用于显示"我"标签	`string`	-
left-team-quit	左边队伍弃权标记	`boolean`	`false`
right-team-quit	右边队伍弃权标记	`boolean`	`false`
bye-avatar	轮空状态头像URL	`string`	`''`
pending-avatar	待定状态头像URL	`string`	`''`
badge-texts	自定义badge文字	`{ me?: string; quit?: string }`	`{ me: '我', quit: '弃' }`
my-team-id	当前用户队伍ID，用于显示"我"标签	`string`	-
left-team-quit	左边队伍弃权标记	`boolean`	`false`
right-team-quit	右边队伍弃权标记	`boolean`	`false`
bye-avatar	轮空状态头像URL	`string`	`''`
pending-avatar	待定状态头像URL	`string`	`''`

# BattleData 数据结构

interface BattleData {
  nodeItem: {
    utime: number;
  };
  realStatus: number;        // 比赛状态：0-待开赛, 10-定时开赛, 50-比赛中, 100-已结束
  abnormalErr: boolean;
  schid: string;            // 赛程ID
  curBo: number;            // 当前BO数
  statusDesc: string;       // 状态描述
  timeDesc: string;         // 时间描述
  showLiveIcon: boolean;    // 是否显示直播图标
  leftTeamInfo: {
    score: number;          // 比分
    teamid: string;         // 队伍ID
    teamname: string;       // 队伍名称
    teamavatar: string;     // 队伍头像
    fromBracketDesc: string; // 来源描述
  };
  rightTeamInfo: {
    score: number;
    teamid: string;
    teamname: string;
    teamavatar: string;
    fromBracketDesc: string;
  };
}

# RoundInfo 数据结构

interface RoundInfo {
  start_battle_type: number;
  show_stime: number;
  ready_time_utime: number;
  bo_type: number;          // BO类型
  round_name: string;       // 轮次名称，如"64进32"
}

# Events

事件名	说明	回调参数
team-click	队伍点击事件	`(side: 'left' \\| 'right', team: TeamData)`
manage-click	管理按钮点击事件	`()`

# Slots

插槽名	说明	参数
manage-btn	自定义管理按钮	-

# 队伍状态说明

# 队伍类型

normal: 普通队伍，显示真实队伍信息
bye: 轮空，显示"轮空"文字和自定义头像
pending: 待定，显示"待定"文字和自定义头像
forfeit: 弃权，显示"弃权"状态

# Badge标签

"我"标签: 当队伍ID匹配myTeamId时显示，橙色背景
"弃"标签: 通过leftTeamQuit或rightTeamQuit控制显示，红色背景

# 比赛状态

已结束 (realStatus: 100): 显示最终比分，标识获胜方
比赛中 (realStatus: 50): 显示实时比分和直播图标
待管理员开赛 (realStatus: 0): 显示管理按钮
定时开赛 (realStatus: 10): 显示开赛时间

# 主题定制

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

# 样式变量

名称	默认值	描述
--pmsc-round-mb	.4rem	轮次信息下边距
--pmsc-team-item-mb	$spacing-sm	队伍头像下边距
--pmsc-center-gap	$spacing-sm	中间区域间距
--pmsc-status-gap	$spacing-xs	状态文本间距
--pmsc-avatar-border-width	1px	头像边框宽度
--pmsc-avatar-padding	1px	头像内边距
--pmsc-score-gap	.36rem	比分间距
--pmsc-badge-padding-lr	$spacing-sm	徽章左右内边距
--pmsc-round-padding-lr	$spacing-lg	轮次信息左右内边距
--pmsc-card-content-padding-lr	$spacing-xl	卡片内容左右内边距
--pmsc-card-min-height	3.4rem	卡片最小高度
--pmsc-avatar-size	1.44rem	队伍头像尺寸
--pmsc-badge-size	.36rem	徽章尺寸
--pmsc-card-border-width	.08rem	卡片边框宽度
--pmsc-round-height	.48rem	轮次信息高度
--pmsc-team-width	1.68rem	队伍宽度
--pmsc-score-height	.64rem	比分高度
--pmsc-card-bg	$color-surface-default	卡片背景色
--pmsc-avatar-border-color	$color-divider-light	头像边框色
--pmsc-round-color	$color-text-primary	轮次信息文字色
--pmsc-team-name-color	$color-text-primary	队伍名称文字色
--pmsc-status-default-color	$color-text-invert-default	默认状态文字色
--pmsc-status-live-color	$color-text-brand	直播状态文字色
--pmsc-badge-quit-bg	#3e4c5a	弃权徽章背景色
--pmsc-badge-me-bg	$color-surface-brand	我的徽章背景色
--pmsc-badge-text-color	$color-text-invert-light	徽章文字色
--pmsc-card-border-color	$color-surface-brand-light2	卡片边框色
--pmsc-round-bg	$color-surface-brand-light2	轮次信息背景色
--pmsc-score-text-color	$color-text-primary	比分文字色
--pmsc-round-font-size	$font-size-md	轮次信息字体大小
--pmsc-team-name-font-size	$font-size-sm	队伍名称字体大小
--pmsc-status-font-size	$font-size-sm	状态文字字体大小
--pmsc-badge-font-size	$font-size-xs	徽章字体大小
--pmsc-score-font-size	.8rem	比分字体大小
--pmsc-score-font-family	'PingFang'	比分字体
--pmsc-avatar-border-radius	$border-radius-circle	头像圆角
--pmsc-badge-border-radius	$border-radius-999	徽章圆角
--pmsc-card-border-radius	$border-radius-sm	卡片圆角
--pmsc-round-clip-path	polygon(0 0, 100% 0, 90% 100%, 10% 100%)	轮次信息裁剪路径
--pmsc-badge-offset-bottom	-.12rem	徽章下偏移

# 注意事项

数据结构: 组件数据必须使用基于真实数据结构的BattleData接口
队伍类型判断: 组件会根据teamname字段自动判断队伍类型（轮空、待定等）
比赛状态: 比赛状态根据realStatus字段自动计算和显示
弃权控制: 弃权状态通过leftTeamQuit和rightTeamQuit属性控制，不依赖数据字段
头像自定义: 轮空和待定状态的头像可通过byeAvatar和pendingAvatar属性自定义
微信小程序: 支持微信小程序虚拟化节点配置，已集成Press-UI组件
事件处理: 所有交互事件都通过emit方式向外传递，保持组件纯净性

# 设计原则

数据驱动: 基于真实业务数据结构设计，确保与后端数据无缝对接
状态分离: 业务逻辑状态（如弃权）通过props控制，不耦合到数据结构中
可扩展性: 提供插槽和CSS变量支持，满足不同业务场景的定制需求
一致性: 遵循项目编码规范，使用统一的命名约定和样式变量系统

← MatchScheduleArenaRank MatchScheduleEndGame →