# PressMatchScheduleCard 赛程对阵卡片

# 介绍

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

# 引入

import PressMatchScheduleCardHor from 'press-next/press-match-schedule-card-hor/press-match-schedule-card-hor.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>

# 自定义按钮插槽

<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`	`''`

# 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 组件。

# 样式变量

名称	默认值	描述
--msc-spacing-xs	.08rem	极小间距
--msc-spacing-sm	.16rem	小间距
--msc-spacing-md	.24rem	中等间距
--msc-spacing-lg	.32rem	大间距
--msc-card-height	2.4rem	卡片高度
--msc-avatar-size	.8rem	头像尺寸
--msc-badge-size	.32rem	标签尺寸
--msc-manage-btn-width	.88rem	管理按钮宽度
--msc-manage-btn-height	.48rem	管理按钮高度
--msc-bg-color	#ffffff	背景颜色
--msc-avatar-border-color	#e5e5e5	头像边框颜色
--msc-text-color-primary	#333333	主要文字颜色
--msc-text-color-secondary	#666666	次要文字颜色
--msc-text-color-brand	#ff6b00	品牌色文字
--msc-text-color-white	#ffffff	白色文字
--msc-badge-quit-bg	#ff4444	弃权标签背景色
--msc-badge-me-bg	#ff6b00	"我"标签背景色
--msc-manage-btn-bg	#ff6b00	管理按钮背景色
--msc-manage-btn-color	#ffffff	管理按钮文字颜色
--msc-font-size-xs	.2rem	极小字体
--msc-font-size-sm	.24rem	小字体
--msc-font-size-md	.28rem	中等字体
--msc-font-size-lg	.32rem	大字体
--msc-border-radius-xs	.04rem	极小圆角
--msc-border-radius-sm	.08rem	小圆角
--msc-border-radius-md	.12rem	中等圆角
--msc-border-radius-circle	50%	圆形圆角

# 注意事项

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

# 设计原则

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

← CustomHeader MatchMessageCompetition →