Press Next

# MatchScheduleArenaRank 竞技场排行榜

竞技场比赛排行榜组件，用于展示前三名玩家的颁奖台布局，支持自定义玩家信息和交互操作。

# 引入

import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';

# 代码演示

# 基础用法

展示前三名玩家的颁奖台布局，自动按照第二名-第一名-第三名的顺序排列。

<template>
  <PressMatchScheduleArenaRank
    :players="players"
    @view-ranking-click="handleViewRankingClick"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';

interface Player {
  id?: string | number;
  rank: number;
  nickname: string;
  avatar: string;
  killCount: number;
}

const players: Player[] = [
  {
    id: 1,
    rank: 2,
    nickname: '银牌选手',
    avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4',
    killCount: 12,
  },
  {
    id: 2,
    rank: 1,
    nickname: '金牌选手',
    avatar: 'https://avatars.githubusercontent.com/u/499550?v=4',
    killCount: 15,
  },
  {
    id: 3,
    rank: 3,
    nickname: '铜牌选手',
    avatar: 'https://avatars.githubusercontent.com/u/9919?v=4',
    killCount: 10,
  },
];

const handleViewRankingClick = () => {
  console.log('查看完整排行榜');
};
</script>

# 自定义底部按钮

通过插槽自定义底部按钮内容。

<template>
  <PressMatchScheduleArenaRank :players="players">
    <template #foot-btn>
      <PressButton
        type="primary"
        block
        @click="handleCustomAction"
      >
        自定义操作
      </PressButton>
    </template>
  </PressMatchScheduleArenaRank>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';
import { PressButton } from 'press-ui';

const players = ref([
  { id: 1, rank: 1, nickname: '金牌选手', avatar: 'https://avatars.githubusercontent.com/u/499550?v=4', killCount: 15 },
  { id: 2, rank: 2, nickname: '银牌选手', avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4', killCount: 12 },
  { id: 3, rank: 3, nickname: '铜牌选手', avatar: 'https://avatars.githubusercontent.com/u/9919?v=4', killCount: 10 },
]);

const handleCustomAction = () => {
  console.log('自定义操作');
};
</script>

# 动态数据更新

支持动态更新玩家排名数据。

<template>
  <div>
    <PressMatchScheduleArenaRank :players="currentPlayers" />
    <PressButton
      type="primary"
      block
      style="margin-top: 16px;"
      @click="updateRanking"
    >
      更新排名
    </PressButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchScheduleArenaRank from 'press-next/press-match-schedule-arena-rank/press-match-schedule-arena-rank.vue';
import { PressButton } from 'press-ui';

const currentPlayers = ref([
  { id: 1, rank: 1, nickname: '玩家A', avatar: 'https://avatars.githubusercontent.com/u/499550?v=4', killCount: 20 },
  { id: 2, rank: 2, nickname: '玩家B', avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4', killCount: 18 },
  { id: 3, rank: 3, nickname: '玩家C', avatar: 'https://avatars.githubusercontent.com/u/9919?v=4', killCount: 15 },
]);

const updateRanking = () => {
  // 模拟排名变化
  currentPlayers.value = [
    { id: 2, rank: 1, nickname: '玩家B', avatar: 'https://avatars.githubusercontent.com/u/1680273?v=4', killCount: 25 },
    { id: 1, rank: 2, nickname: '玩家A', avatar: 'https://avatars.githubusercontent.com/u/499550?v=4', killCount: 22 },
    { id: 3, rank: 3, nickname: '玩家C', avatar: 'https://avatars.githubusercontent.com/u/9919?v=4', killCount: 20 },
  ];
};
</script>

# API

# Props

参数 说明 类型 默认值
players 玩家列表数据 Player[] []

# Player 数据结构

属性 说明 类型 必填
id 玩家唯一标识 string | number 否
rank 玩家排名 number 是
nickname 玩家昵称 string 是
avatar 玩家头像URL string 是
killCount 击杀数量 number 是

# Events

事件名 说明 回调参数
view-ranking-click 点击查看榜单按钮时触发 -

# Slots

名称 说明
foot-btn 自定义底部按钮内容

# 主题定制

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

# 样式变量

# 间距系统

名称 默认值 描述
--pmsar-list-mb $spacing-xl 列表下边距
--pmsar-list-gap $spacing-sm 列表项间距
--pmsar-stats-padding-lr $spacing-sm 统计区域左右内边距
--pmsar-container-padding-tb .4rem 容器上下内边距
--pmsar-container-padding-lr .28rem 容器左右内边距
--pmsar-badge-offset-y -.24rem 排名徽章底部偏移
--pmsar-nickname-first-mt .56rem 第一名昵称上边距
--pmsar-nickname-second-mt .4rem 第二名昵称上边距
--pmsar-nickname-third-mt .36rem 第三名昵称上边距
--pmsar-stats-mt $spacing-xs 统计区域上边距

# 尺寸系统

名称 默认值 描述
--pmsar-avatar-size 1rem 头像尺寸
--pmsar-item-first-height 3.2rem 第一名高度
--pmsar-item-second-height 2.76rem 第二名高度
--pmsar-item-third-height 2.56rem 第三名高度
--pmsar-badge-width-size .44rem 排名徽章宽度
--pmsar-badge-height-size .48rem 排名徽章高度
--pmsar-nickname-width 1.8rem 昵称最大宽度
--pmsar-stats-height .36rem 统计区域行高
--pmsar-stats-width 1.6rem 统计区域最大宽度

# 颜色系统

名称 默认值 描述
--pmsar-container-bg $color-surface-default 容器背景色
--pmsar-avatar-border-color $color-border-brand 头像边框色
--pmsar-badge-bg red 排名徽章背景色
--pmsar-nickname-text-color $color-text-primary 昵称文字色
--pmsar-stats-bg rgba(54, 111, 244, .3) 击杀统计背景色
--pmsar-stats-color $color-text-invert-light 击杀统计文字色
--pmsar-item-bg url(...) 排行项背景图
--pmsar-item-badge-bg1 url(...) 第一名徽章背景图
--pmsar-item-badge-bg2 url(...) 第二名徽章背景图
--pmsar-item-badge-bg3 url(...) 第三名徽章背景图

# 字体系统

名称 默认值 描述
--pmsar-nickname-font-size $font-size-md 昵称字体大小
--pmsar-stats-font-size $font-size-sm 统计字体大小
--pmsar-nickname-font-weight 500 昵称字体粗细

# 圆角系统

名称 默认值 描述
--pmsar-container-border-radius 0 容器圆角
--pmsar-avatar-border-radius 50% 头像圆角
--pmsar-stats-border-radius .28rem 统计区域圆角

# 其他

名称 默认值 描述
--pmsar-badge-text-indent -999em 隐藏徽章文字

# 常见问题

# 如何自定义排名徽章图片？

通过 CSS 变量可以自定义前三名的徽章背景图：

<template>
  <PressMatchScheduleArenaRank
    :players="players"
    custom-class="custom-badge"
  />
</template>

<style>
.custom-badge {
  --pmsar-item-badge-bg1: url('your-first-badge.png');
  --pmsar-item-badge-bg2: url('your-second-badge.png');
  --pmsar-item-badge-bg3: url('your-third-badge.png');
}
</style>

# 如何处理头像加载失败？

建议在数据层面提供默认头像：

const playersWithFallback = players.map(player => ({
  ...player,
  avatar: player.avatar || 'https://example.com/default-avatar.png',
}));

# 颁奖台的排列顺序是什么？

组件会自动按照颁奖台布局排序：第二名（左）- 第一名（中）- 第三名（右），无需手动调整数据顺序。

# 如何自定义不同排名的高度？

通过 CSS 变量可以分别设置前三名的高度：

.custom-height {
  --pmsar-item-first-height: 3.5rem;
  --pmsar-item-second-height: 3rem;
  --pmsar-item-third-height: 2.8rem;
}

← MatchScheduleCard →