Press Next

# MatchScheduleNotFull 比赛队伍未满员

比赛队伍未满员时的赛程组件，显示队伍招募状态和成员信息。支持智能倒计时、成员头像展示、邀请按钮等功能。

# 特性

  • ⏰ 智能倒计时 - 基于 PressMatchCountDownMini 组件，支持月/天/时智能切换
  • 👥 成员管理 - 显示已加入成员头像，支持添加新成员
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • 🔧 插槽支持 - 支持自定义头部和底部内容
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛队伍招募
  • 团队活动成员收集
  • 在线游戏组队功能
  • 体育赛事报名系统

# 引入

import PressMatchScheduleNotFull from 'press-next/press-match-schedule-not-full/press-match-schedule-not-full';

# 代码演示

# 基础用法

<template>
  <PressMatchScheduleNotFull
    :team-name="teamName"
    :end-time="endTime"
    :countdown-text="countdownText"
    :team-required-members="6"
    :team-current-members="members.length"
    :members="members"
    @on-add-member="handleAddMember"
    @on-invite="handleInvite"
    @on-countdown-end="handleCountdownEnd"
  />
</template>

<script setup lang="ts">
import PressMatchScheduleNotFull from 'press-next/press-match-schedule-not-full/press-match-schedule-not-full';

const teamName = '深圳大学';
const countdownText = '报名截止';
const members = [
  { id: 1, name: '成员1', avatar: 'https://placehold.co/40x40' },
  { id: 2, name: '成员2', avatar: 'https://placehold.co/40x40' },
  { id: 3, name: '成员3', avatar: 'https://placehold.co/40x40' },
];

// 设置倒计时结束时间：29天23小时59分后
const endTime = Date.now() + 29 * 24 * 60 * 60 * 1000 + 23 * 60 * 60 * 1000 + 59 * 60 * 1000;

const handleAddMember = () => {
  console.log('添加成员');
};

const handleInvite = () => {
  console.log('邀请好友');
};

const handleCountdownEnd = () => {
  console.log('倒计时结束');
};
</script>

# 自定义插槽

<template>
  <PressMatchScheduleNotFull
    :team-name="teamName"
    :end-time="endTime"
    :members="members"
  >
    <template #header>
      <div class="custom-header">
        <img src="your-brand-logo.png" alt="品牌Logo">
      </div>
    </template>
    <template #footer>
      <div class="custom-footer">
        <button @click="handleCustomAction">自定义按钮</button>
      </div>
    </template>
  </PressMatchScheduleNotFull>
</template>

# 自定义主题

<template>
  <PressMatchScheduleNotFull
    custom-class="my-custom-theme"
    :team-name="teamName"
    :end-time="endTime"
    :members="members"
  />
</template>

<style>
.my-custom-theme {
  /* 卡片样式 */
  --snf-header-wrap-bg: linear-gradient(227deg, #667eea 0%, #764ba2 100%);
  --snf-teamname-color: #ffffff;
  
  /* 倒计时样式（由 PressMatchCountDownMini 组件控制） */
  --pcdm-item-bg: linear-gradient(88deg, #667eea 0%, #764ba2 100%);
  --pcdm-number-color: #ffffff;
  --pcdm-unit-color: #ffffff;
  
  /* 按钮样式 */
  --snf-invite-button-border-radius: .4rem;
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
team-name 队伍名称 string '深圳大学'
end-time 倒计时结束时间戳（毫秒） number Date.now() + 29天23小时59分
countdown-text 倒计时文本 string '报名截止'
brand-img 品牌图片地址 string ''
team-required-members 队伍所需成员数 number 6
team-current-members 队伍当前成员数 number 3
members 成员列表 Member[] []
team-tips 提示文本 string '否则将失去参赛资格'
invite-button-text 邀请按钮文本 string '邀请好友'
bg-color 按钮颜色 string -
button-type 按钮类型 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain 是否为朴素按钮 boolean false
button-size 按钮尺寸 'normal' | 'large' | 'small' | 'mini' 'large'
button-open-type 微信开放能力 string ''
icon 按钮图标 string -
button-custom-style 自定义按钮样式 object {}

# Member 数据结构

interface Member {
  id: string | number; // 成员ID
  name: string; // 成员姓名
  avatar: string; // 头像URL
}

# Slots

名称 说明
header 自定义头部品牌区域内容
footer 自定义底部按钮区域内容

# Events

事件名 说明 回调参数
on-add-member 点击添加成员时触发 -
on-invite 点击邀请按钮时触发 -
on-countdown-end 倒计时结束时触发 -

# 注意事项

# 使用建议

  1. 倒计时智能模式：组件基于 PressMatchCountDownMini 子组件实现倒计时，根据时间长度自动切换月/天/时显示模式，会自动更新，无需手动管理定时器
    • ≥30天：显示"月 天:时"格式
    • 1-29天：显示"天 时:分"格式
    • <1天：显示"时 分:秒"格式
  2. 倒计时样式定制：倒计时部分的样式由 PressMatchCountDownMini 组件控制，使用 --pcdm-* 前缀的CSS变量进行定制
  3. 成员数量：team-current-members 应该与 members 数组长度保持一致，或者用于显示超出显示限制的总人数
  4. 头像加载：建议为成员头像设置默认占位图，避免加载失败时显示空白
  5. 时间戳格式：end-time 接收毫秒级时间戳
  6. 响应式适配：在小屏幕设备上，建议适当调整 --snf-member-size 等尺寸变量

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 倒计时基于高性能的 PressMatchCountDownMini 子组件
  • 使用 v-memo 指令优化成员列表渲染
  • 大量成员时考虑虚拟滚动
  • 头像图片建议使用 CDN 加速
  • 样式使用CSS变量，便于动态主题切换

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

# 样式变量

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

注意：倒计时部分的样式由 PressMatchCountDownMini 组件控制，请使用 --pcdm-* 前缀的CSS变量进行定制。详见 PressMatchCountDownMini 文档。

# 间距系统 (Spacing)

名称 默认值 描述
--snf-header-wrap-padding 0.28rem 0.48rem 头部区域内边距
--snf-content-padding 0.4rem 0.54rem 内容卡片内边距
--snf-content-margin-top -0.5rem 内容区域上边距
--snf-countdown-wrap-margin-top $spacing-sm 倒计时容器上边距
--snf-countdown-wrap-gap 0 倒计时与文本之间的间距
--snf-desc-margin-bottom $spacing-xs 描述文本下边距
--snf-tips-margin-bottom $spacing-lg 提示文本下边距
--snf-members-gap 0.06rem 成员头像之间的间距
--snf-invite-button-margin-top 0.4rem 邀请按钮上边距

# 块状系统 (Box Model)

名称 默认值 描述
--snf-card-width 100% 卡片宽度
--snf-card-height 5.84rem 卡片高度
--snf-header-height 2.26rem 头部区域高度
--snf-header-wrap-height 2.86rem 头部包装区域高度
--snf-teamname-max-width 4rem 队伍名称最大宽度
--snf-brand-width 100% 品牌图标宽度
--snf-brand-height 3.18rem 品牌图标高度
--snf-brand-top -0.32rem 品牌图标上边距
--snf-brand-left 0 品牌图标左边距
--snf-brand-right 0 品牌图标右边距
--snf-members-display grid 成员列表显示方式
--snf-member-overflow hidden 成员溢出处理
--snf-member-size 0.8rem 成员头像尺寸
--snf-avatar-size 100% 成员头像图片尺寸
--snf-placeholder-width 0.8rem 空位占位符宽度
--snf-invite-button-width 100% 邀请按钮宽度
--snf-invite-button-height 0.88rem 邀请按钮高度

# 边框属性 (Border)

名称 默认值 描述
--snf-member-border-color $color-divider-default 成员头像边框颜色
--snf-placeholder-border-color $color-divider-default 空位占位符边框颜色

# 颜色系统 (Colors)

名称 默认值 描述
--snf-teamname-color $color-text-invert-light 队伍名称文字颜色
--snf-countdown-text-color $color-text-invert-light 倒计时文本颜色
--snf-countdown-mini-unit-color $color-text-invert-light 倒计时单位颜色（用于PressMatchCountDownMini）
--snf-countdown-mini-separator-color $color-text-invert-light 倒计时分隔符颜色（用于PressMatchCountDownMini）
--snf-desc-color $color-text-primary 描述文本颜色
--snf-tips-color $color-text-invert-default 提示文本颜色
--snf-placeholder-color $color-text-invert-default 空位占位符文字颜色
--snf-placeholder-icon-color $color-border-secondary 空位占位符图标颜色
--snf-header-wrap-bg linear-gradient(227deg, #4b83ff 5.1%, #2d55a9 51.64%, #2c3b6e 98.45%) 头部区域背景渐变
--snf-content-bg $color-surface-default 内容区域背景色
--snf-placeholder-bg $color-surface-secondary 空位占位符背景色

# 字体系统 (Typography)

名称 默认值 描述
--snf-teamname-font-size $font-size-xl 队伍名称字体大小
--snf-teamname-font-weight $font-weight-bold 队伍名称字体粗细
--snf-countdown-text-font-size $font-size-sm 倒计时文本字体大小
--snf-countdown-text-font-weight $font-weight-regular 倒计时文本字体粗细
--snf-content-text-align center 内容文本对齐方式
--snf-desc-font-size $font-size-lg 描述文本字体大小
--snf-desc-font-weight $font-weight-bold 描述文本字体粗细
--snf-tips-font-size $font-size-sm 提示文本字体大小
--snf-tips-font-weight $font-weight-regular 提示文本字体粗细
--snf-placeholder-font-size $font-size-md 空位占位符字体大小
--snf-placeholder-font-weight $font-weight-regular 空位占位符字体粗细
--snf-placeholder-icon-size 0.4rem 空位占位符图标大小
--snf-invite-button-font-size $font-size-lg 邀请按钮字体大小

# 圆角系统 (Border Radius)

名称 默认值 描述
--snf-header-wrap-border-radius $border-radius-sm 头部包装圆角
--snf-content-border-radius $border-radius-sm 内容区域圆角
--snf-member-radius $border-radius-circle 成员头像容器圆角
--snf-avatar-radius $border-radius-circle 成员头像圆角
--snf-placeholder-radius $border-radius-circle 空位占位符圆角
--snf-invite-button-border-radius $border-radius-999 邀请按钮圆角

# 阴影系统 (Shadow)

名称 默认值 描述
--snf-content-box-shadow inset 0 1px 1px #ecf3fa 内容区域阴影

# 其他属性 (Others)

名称 默认值 描述
--snf-card-position relative 卡片定位方式
--snf-header-position relative 头部定位方式
--snf-teamname-position relative 队伍名称定位方式
--snf-teamname-z-index 101 队伍名称层级
--snf-countdown-wrap-position relative 倒计时容器定位方式
--snf-countdown-wrap-z-index 101 倒计时容器层级
--snf-brand-position absolute 品牌图标定位方式
--snf-content-position relative 内容区域定位方式
--snf-member-position relative 成员头像定位方式
--snf-placeholder-position relative 空位占位符定位方式
--snf-content-backdrop-filter blur(13.5914px) 内容背景模糊效果
--snf-members-columns 6 成员列表列数

← MatchScheduleNotKickoff →