MatchRoundSetItem 轮次设置项

# MatchRoundSetItem 轮次设置项

轮次设置项组件，用于显示比赛轮次的设置信息，包括轮次名称、开赛时间、决胜方式和操作按钮。

# 引入

import PressMatchRoundSetItem from 'press-next/press-match-round-set-item/press-match-round-set-item';

# 代码演示

# 使用 Demo 数据

<template>
  <PressMatchRoundSetItem
    v-bind="mockData"
    @click="handleItemClick"
    @action-click="handleActionClick"
  />
</template>

<script setup>
import { getMockData } from './demo-data';

const mockData = getMockData();

const handleItemClick = () => {
  console.log('点击轮次设置项');
};

const handleActionClick = () => {
  console.log('点击操作按钮');
};
</script>

# 基础用法

<PressMatchRoundSetItem
  round-name="32进16"
  time-text="3月18日 12:00"
  format-text="一局胜负"
  action-text="整轮开赛"
  :editable="true"
  @click="handleItemClick"
  @action-click="handleActionClick"
/>

# 自定义列宽度

<PressMatchRoundSetItem
  round-name="32进16"
  time-text="3月18日 12:00"
  format-text="一局胜负"
  action-text="整轮开赛"
  :columns="[
    { key: 'rounds', width: '2.02rem' },
    { key: 'settings', width: '2.24rem' },
    { key: 'ways', width: '1.64rem' },
    { key: 'operate', width: '1.2rem' }
  ]"
  @click="handleItemClick"
  @action-click="handleActionClick"
/>

# 已开赛状态

<PressMatchRoundSetItem
  round-name="256进128"
  time-text="3月18日 10:00"
  format-text="两局三胜"
  action-text="已开赛"
  :disabled="true"
  :show-time-icon="false"
  :show-format-icon="false"
/>

# 选中状态

<PressMatchRoundSetItem
  round-name="64进32"
  time-text="3月18日 10:00"
  format-text="一局胜负"
  action-text="已开赛"
  :selected="true"
  :disabled="true"
/>

# Demo Data

组件提供了完整的 demo-data 支持，包含以下功能：

# 导入 Demo 数据

import { 
  getMockData, 
  getTableColumns, 
  generateRoundSetItems,
  type RoundSetItemData,
  type Column 
} from './demo-data';

# Demo 数据函数

函数名	说明	返回类型
`getMockData()`	获取单个轮次设置项的模拟数据	`RoundSetItemData & { columns: Column[] }`
`getTableColumns()`	获取表格列配置	`Column[]`
`generateRoundSetItems(count?)`	生成多个轮次设置项数据	`RoundSetItemData[]`

# 数据接口

interface RoundSetItemData {
  roundName: string;
  timeText: string;
  formatText: string;
  actionText: string;
  selected?: boolean;
  disabled?: boolean;
  editable?: boolean;
  showTimeIcon?: boolean;
  showFormatIcon?: boolean;
  hasStarted?: boolean;
  canSetTime?: boolean;
  canSetBo?: boolean;
  bo_type?: number;
}

# API

# Props

参数	说明	类型	默认值
round-name	轮次名称	`string`	`'轮次名称'`
time-text	开赛时间文本	`string`	`'3月18日 12:00'`
format-text	决胜方式文本	`string`	`'一局胜负'`
action-text	操作文本	`string`	`'整轮开赛'`
selected	是否选中	`boolean`	`false`
disabled	是否禁用	`boolean`	`false`
editable	是否可编辑	`boolean`	`true`
show-time-icon	是否显示时间图标	`boolean`	`true`
show-format-icon	是否显示决胜方式图标	`boolean`	`true`
columns	列配置，用于设置各区域宽度	`Column[]`	`getTableColumns()`

# Column 接口

参数	说明	类型	默认值
key	列标识	`string`	-
width	列宽度，如 '1.2rem' 或 'auto'	`string`	-
minWidth	最小宽度	`string`	-

# Events

事件名	说明	回调参数
click	点击整行时触发	-
action-click	点击操作按钮时触发	-
time-click	点击时间时触发	-
format-click	点击决胜方式时触发	-

# 样式定制

# CSS 变量

组件提供了丰富的 CSS 变量用于样式定制，所有变量都使用 --mrsi- 前缀，采用语义化命名规范：

/* 定位系统 */
--mrsi-item-area-position: relative;         /* 项目定位方式 */

/* 间距系统 */
--mrsi-content-cell-padding-left: .24rem;    /* 内容首项单元格左边距 */
--mrsi-content-area-padding: 0;              /* 内容区域内边距 */
--mrsi-content-area-margin-bottom: .02rem;   /* 内容区域下边距 */
--mrsi-time-icon-area-margin-left: $spacing-xs; /* 时间图标左边距 */
--mrsi-format-icon-area-margin-right: $spacing-xs; /* 决胜方式图标右边距 */

/* 尺寸系统 */
--mrsi-content-area-width: 100%;             /* 内容区域宽度 */
--mrsi-content-area-height: 1rem;            /* 内容区域高度 */
--mrsi-container-area-width: 100%;           /* 容器宽度 */
--mrsi-container-area-height: 100%;          /* 容器高度 */
--mrsi-round-column-area-min-width: 1.48rem; /* 轮次列最小宽度 */
--mrsi-time-column-area-min-width: 1.94rem;  /* 时间列最小宽度 */
--mrsi-format-column-area-min-width: 1.6rem; /* 决胜方式列最小宽度 */
--mrsi-action-column-area-min-width: 1.6rem; /* 操作列最小宽度 */
--mrsi-time-icon-area-width: .24rem;         /* 时间图标宽度 */
--mrsi-time-icon-area-height: .24rem;        /* 时间图标高度 */
--mrsi-format-icon-area-width: .24rem;       /* 决胜方式图标宽度 */
--mrsi-format-icon-area-height: .24rem;      /* 决胜方式图标高度 */

/* 颜色系统 */
--mrsi-item-area-bg: $color-surface-default; /* 项目背景色 */
--mrsi-item-area-selected-bg: $color-surface-brand-light; /* 选中状态背景色 */
--mrsi-item-area-text-color: $color-text-primary; /* 项目文字颜色 */
--mrsi-item-area-disabled-text-color: #9fabb6; /* 禁用状态文字颜色 */
--mrsi-round-area-text-color: $color-text-primary; /* 轮次文字颜色 */
--mrsi-time-area-text-color: $color-text-primary; /* 时间文字颜色 */
--mrsi-format-area-text-color: $color-text-secondary; /* 决胜方式文字颜色 */
--mrsi-action-area-text-color: $color-text-brand; /* 操作文字颜色 */
--mrsi-action-area-disabled-text-color: $color-text-secondary; /* 禁用状态操作文字颜色 */

/* 字体系统 */
--mrsi-round-area-text-font-size: $font-size-sm; /* 轮次文字大小 */
--mrsi-round-area-text-font-weight: $font-weight-regular; /* 轮次文字字重 */
--mrsi-time-area-text-font-size: $font-size-sm; /* 时间文字大小 */
--mrsi-time-area-text-font-weight: $font-weight-regular; /* 时间文字字重 */
--mrsi-time-icon-area-size: .24rem;          /* 时间图标字体大小 */
--mrsi-format-area-text-font-size: $font-size-sm; /* 决胜方式文字大小 */
--mrsi-format-area-text-font-weight: $font-weight-regular; /* 决胜方式文字字重 */
--mrsi-format-icon-area-size: .24rem;        /* 决胜方式图标字体大小 */
--mrsi-action-area-text-font-size: $font-size-sm; /* 操作文字大小 */
--mrsi-action-area-text-font-weight: $font-weight-regular; /* 操作文字字重 */

/* 文本对齐 */
--mrsi-time-area-text-align: left;           /* 时间文字对齐方式 */
--mrsi-action-area-text-align: left;         /* 操作文字对齐方式 */

/* 其他属性 */
--mrsi-item-area-disabled-opacity: 0.6;      /* 禁用状态透明度 */
--mrsi-item-area-overflow-x: scroll;         /* 项目水平溢出处理方式 */
--mrsi-container-area-scrollbar-width: none; /* 容器滚动条宽度 */
--mrsi-container-area-scrollbar-style: none; /* 容器滚动条样式 */
--mrsi-container-area-webkit-scrollbar-display: none; /* 容器Webkit滚动条显示 */
--mrsi-action-area-cursor: pointer;          /* 操作区域光标样式 */
--mrsi-action-area-disabled-cursor: not-allowed; /* 禁用状态光标样式 */

/* 弹性布局 */
--mrsi-flex-area-shrink-none: 0;             /* 防止收缩 */

# 主题定制示例

/* 深色主题 */
.dark-theme {
  --mrsi-item-bg: #1a1a1a;
  --mrsi-item-selected-bg: #2d3748;
  --mrsi-round-text-color: #ffffff;
  --mrsi-time-text-color: #ffffff;
  --mrsi-format-text-color: #a0aec0;
  --mrsi-action-text-color: #63b3ed;
}

/* 紧凑布局 */
.compact-layout {
  --mrsi-content-height: 0.8rem;
  --mrsi-content-padding: 0 $spacing-xs;
  --mrsi-round-column-min-width: 1.2rem;
  --mrsi-time-column-min-width: 1.3rem;
  --mrsi-format-column-min-width: 1.3rem;
  --mrsi-action-column-min-width: 1.3rem;
}

/* 自定义品牌色 */
.custom-brand {
  --mrsi-item-selected-bg: #fff2ee;
  --mrsi-action-text-color: #ff6b35;
}

# 设计系统集成

组件完全集成了设计系统，使用语义化变量：

颜色系统: 引用 $color-surface-*、$color-text-*、$color-border-* 等语义变量
字体系统: 使用 $font-size-*、$font-weight-* 标准字体变量
间距系统: 遵循 $spacing-* 标准间距规范

# 功能特性

# 🎯 状态管理

支持选中、禁用、可编辑等多种状态
视觉反馈清晰，状态切换流畅
支持不同状态下的样式定制

# 📱 响应式设计

各区域最小宽度保证内容完整显示
图标和文字对齐优化
兼容不同屏幕尺寸

# 🔧 灵活配置

支持显示/隐藏图标
可自定义各区域文本内容
支持多种交互事件
支持列宽度配置：通过 columns 属性可以精确控制各区域的宽度，与表头组件保持同步

# 📏 宽度同步

支持与 press-match-table-header 组件的宽度配置保持同步
通过相同的 columns 配置可确保表头和内容项的列宽度一致
支持固定宽度、最小宽度和自适应宽度等多种设置方式

# 使用场景

比赛轮次设置和管理
赛程时间安排展示
决胜方式配置界面
需要展示多列信息的列表项
与表格表头组件配合使用，确保列宽度同步

# 注意事项

操作按钮在禁用状态下会自动切换光标样式
选中状态会改变背景色以提供视觉反馈
图标显示可通过 props 控制，建议根据实际需求设置
文本对齐方式已针对不同区域进行优化
样式变量支持运行时动态修改，便于实现主题切换功能
宽度配置优先级：当同时设置了 columns 配置和 CSS 变量时，columns 配置的优先级更高
列配置顺序：columns 数组的顺序对应轮次、时间、决胜方式、操作四个区域（索引 0-3）
与表头同步：建议与 press-match-table-header 使用相同的 columns 配置以确保宽度同步

← MatchResultItem MatchRoundSetList →