# PressMatchScheduleCard

# Introduction

A schedule card component for displaying esports match information, supporting multiple match states and team types. The component is designed based on real data structures and supports special states like bye, pending, and forfeit, with flexible customization capabilities.

# Import

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

# Code Examples

# Basic Usage

<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('Team clicked:', side, team);
};

const handleManageClick = () => {
  console.log('Manage button clicked');
};
</script>

# Different State Examples

<template>
  <!-- Finished State -->
  <PressMatchScheduleCard
    :battle-data="finishedBattle"
    :round-info="roundInfo"
    :my-team-id="'team-id-500-0-a'"
  />

  <!-- Live State -->
  <PressMatchScheduleCard
    :battle-data="liveBattle"
    :round-info="roundInfo"
    :my-team-id="'team-id-500-1-a'"
  />

  <!-- Waiting for Admin State -->
  <PressMatchScheduleCard
    :battle-data="waitingBattle"
    :round-info="roundInfo"
    :show-manage-button="true"
  />

  <!-- Forfeit State Example -->
  <PressMatchScheduleCard
    :battle-data="quitBattle"
    :round-info="roundInfo"
    :right-team-quit="true"
  />

  <!-- Bye State Example -->
  <PressMatchScheduleCard
    :battle-data="byeBattle"
    :round-info="roundInfo"
    :bye-avatar="byeAvatarUrl"
  />
</template>

# Custom Button Slot

<template>
  <PressMatchScheduleCard
    :battle-data="battleData"
    :round-info="roundInfo"
  >
    <template #manage-btn>
      <PressButton
        type="primary"
        size="small"
        @click="customManageAction"
      >
        Custom Manage
      </PressButton>
    </template>
  </PressMatchScheduleCard>
</template>

# API

# Props

Property	Description	Type	Default
battle-data	Battle data based on real data structure	`BattleData`	-
round-info	Round information	`RoundInfo`	-
custom-class	Custom class name	`string`	`''`
show-manage-button	Whether to show manage button	`boolean`	`false`
my-team-id	Current user's team ID for showing "me" badge	`string`	-
left-team-quit	Left team forfeit flag	`boolean`	`false`
right-team-quit	Right team forfeit flag	`boolean`	`false`
bye-avatar	Avatar URL for bye state	`string`	`''`
pending-avatar	Avatar URL for pending state	`string`	`''`

# BattleData Structure

interface BattleData {
  nodeItem: {
    utime: number;
  };
  realStatus: number;        // Match status: 0-waiting, 10-scheduled, 50-live, 100-finished
  abnormalErr: boolean;
  schid: string;            // Schedule ID
  curBo: number;            // Current BO number
  statusDesc: string;       // Status description
  timeDesc: string;         // Time description
  showLiveIcon: boolean;    // Whether to show live icon
  leftTeamInfo: {
    score: number;          // Score
    teamid: string;         // Team ID
    teamname: string;       // Team name
    teamavatar: string;     // Team avatar
    fromBracketDesc: string; // Source description
  };
  rightTeamInfo: {
    score: number;
    teamid: string;
    teamname: string;
    teamavatar: string;
    fromBracketDesc: string;
  };
}

# RoundInfo Structure

interface RoundInfo {
  start_battle_type: number;
  show_stime: number;
  ready_time_utime: number;
  bo_type: number;          // BO type
  round_name: string;       // Round name, e.g., "Round of 32"
}

# Events

Event	Description	Parameters
team-click	Team click event	`(side: 'left' \\| 'right', team: TeamData)`
manage-click	Manage button click event	`()`

# Slots

Slot	Description	Parameters
manage-btn	Custom manage button	-

# Team State Description

# Team Types

normal: Normal team, displays real team information
bye: Bye, displays "轮空" text and custom avatar
pending: Pending, displays "待定" text and custom avatar
forfeit: Forfeit, displays forfeit state

# Badge Labels

"我" Badge: Displayed when team ID matches myTeamId, orange background
"弃" Badge: Controlled by leftTeamQuit or rightTeamQuit, red background

# Match States

Finished (realStatus: 100): Shows final score, identifies winner
Live (realStatus: 50): Shows real-time score and live icon
Waiting for Admin (realStatus: 0): Shows manage button
Scheduled (realStatus: 10): Shows start time

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

# Style Variables

Name	Default Value	Description
--msc-spacing-xs	.08rem	Extra small spacing
--msc-spacing-sm	.16rem	Small spacing
--msc-spacing-md	.24rem	Medium spacing
--msc-spacing-lg	.32rem	Large spacing
--msc-card-height	2.4rem	Card height
--msc-avatar-size	.8rem	Avatar size
--msc-badge-size	.32rem	Badge size
--msc-manage-btn-width	.88rem	Manage button width
--msc-manage-btn-height	.48rem	Manage button height
--msc-bg-color	#ffffff	Background color
--msc-avatar-border-color	#e5e5e5	Avatar border color
--msc-text-color-primary	#333333	Primary text color
--msc-text-color-secondary	#666666	Secondary text color
--msc-text-color-brand	#ff6b00	Brand text color
--msc-text-color-white	#ffffff	White text color
--msc-badge-quit-bg	#ff4444	Forfeit badge background
--msc-badge-me-bg	#ff6b00	"Me" badge background
--msc-manage-btn-bg	#ff6b00	Manage button background
--msc-manage-btn-color	#ffffff	Manage button text color
--msc-font-size-xs	.2rem	Extra small font size
--msc-font-size-sm	.24rem	Small font size
--msc-font-size-md	.28rem	Medium font size
--msc-font-size-lg	.32rem	Large font size
--msc-border-radius-xs	.04rem	Extra small border radius
--msc-border-radius-sm	.08rem	Small border radius
--msc-border-radius-md	.12rem	Medium border radius
--msc-border-radius-circle	50%	Circle border radius

# Notes

Data Structure: Component data must use the BattleData interface based on real data structure
Team Type Detection: Component automatically determines team type based on teamname field (bye, pending, etc.)
Match Status: Match status is automatically calculated and displayed based on realStatus field
Forfeit Control: Forfeit state is controlled by leftTeamQuit and rightTeamQuit props, not dependent on data fields
Avatar Customization: Avatars for bye and pending states can be customized via byeAvatar and pendingAvatar props
WeChat Mini Program: Supports WeChat Mini Program virtual host configuration with Press-UI integration
Event Handling: All interactive events are emitted outward, maintaining component purity

# Design Principles

Data-Driven: Designed based on real business data structure, ensuring seamless integration with backend data
State Separation: Business logic states (like forfeit) are controlled via props, not coupled to data structure
Extensibility: Provides slots and CSS variables support to meet different business scenario customization needs
Consistency: Follows project coding standards, using unified naming conventions and style variable systems

← CustomHeader MatchMessageCompetition →