Press Next

# 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 PressMatchScheduleCard from 'press-next/press-match-schedule-card/press-match-schedule-card.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 Badge Text

Support customizing badge text to adapt to different business scenarios.

<template>
  <!-- Custom badge text in English -->
  <PressMatchScheduleCard
    :battle-data="quitBattle"
    :round-info="roundInfo"
    :my-team-id="'team-id-001'"
    :right-team-quit="true"
    :badge-texts="{ me: 'ME', quit: 'QUIT' }"
  />
  
  <!-- Custom badge text in Chinese -->
  <PressMatchScheduleCard
    :battle-data="quitBattle"
    :round-info="roundInfo"
    :right-team-quit="true"
    :badge-texts="{ quit: '弃赛' }"
  />
</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
--pmsc-round-mb .4rem Round info bottom margin
--pmsc-team-item-mb $spacing-sm Team avatar bottom margin
--pmsc-center-gap $spacing-sm Center area gap
--pmsc-status-gap $spacing-xs Status text gap
--pmsc-avatar-border-width 1px Avatar border width
--pmsc-avatar-padding 1px Avatar padding
--pmsc-score-gap .36rem Score gap
--pmsc-badge-padding-lr $spacing-sm Badge left/right padding
--pmsc-round-padding-lr $spacing-lg Round info left/right padding
--pmsc-card-content-padding-lr $spacing-xl Card content left/right padding
--pmsc-card-min-height 3.4rem Card minimum height
--pmsc-avatar-size 1.44rem Team avatar size
--pmsc-badge-size .36rem Badge size
--pmsc-card-border-width .08rem Card border width
--pmsc-round-height .48rem Round info height
--pmsc-team-width 1.68rem Team width
--pmsc-score-height .64rem Score height
--pmsc-card-bg $color-surface-default Card background
--pmsc-avatar-border-color $color-divider-light Avatar border color
--pmsc-round-color $color-text-primary Round info text color
--pmsc-team-name-color $color-text-primary Team name text color
--pmsc-status-default-color $color-text-invert-default Default status text color
--pmsc-status-live-color $color-text-brand Live status text color
--pmsc-badge-quit-bg #3e4c5a Forfeit badge background
--pmsc-badge-me-bg $color-surface-brand Me badge background
--pmsc-badge-text-color $color-text-invert-light Badge text color
--pmsc-card-border-color $color-surface-brand-light2 Card border color
--pmsc-round-bg $color-surface-brand-light2 Round info background
--pmsc-score-text-color $color-text-primary Score text color
--pmsc-round-font-size $font-size-md Round info font size
--pmsc-team-name-font-size $font-size-sm Team name font size
--pmsc-status-font-size $font-size-sm Status text font size
--pmsc-badge-font-size $font-size-xs Badge font size
--pmsc-score-font-size .8rem Score font size
--pmsc-score-font-family 'PingFang' Score font family
--pmsc-avatar-border-radius $border-radius-circle Avatar border radius
--pmsc-badge-border-radius $border-radius-999 Badge border radius
--pmsc-card-border-radius $border-radius-sm Card border radius
--pmsc-round-clip-path polygon(0 0, 100% 0, 90% 100%, 10% 100%) Round info clip path
--pmsc-badge-offset-bottom -.12rem Badge bottom offset

# Notes

  1. Data Structure: Component data must use the BattleData interface based on real data structure
  2. Team Type Detection: Component automatically determines team type based on teamname field (bye, pending, etc.)
  3. Match Status: Match status is automatically calculated and displayed based on realStatus field
  4. Forfeit Control: Forfeit state is controlled by leftTeamQuit and rightTeamQuit props, not dependent on data fields
  5. Avatar Customization: Avatars for bye and pending states can be customized via byeAvatar and pendingAvatar props
  6. WeChat Mini Program: Supports WeChat Mini Program virtual host configuration with Press-UI integration
  7. 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

← MatchScheduleEndGame →