MatchMessagesMode AI 办赛选择模式组件

# MatchMessagesMode AI 办赛选择模式组件

AI 办赛选择模式组件，用于展示不同的比赛模式选项，支持 2x2 网格布局。

# 引入

import PressMatchMessagesMode from "press-next/press-match-messages-mode/press-match-messages-mode";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesMode
    :mode-list="modeList"
    :title="title"
    @mode-click="handleModeClick"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesMode from "press-next/press-match-messages-mode/press-match-messages-mode";
import type { ModeItem } from "press-next/press-match-messages-mode/demo-data";

const title = "选择比赛模式";

const modeList: ModeItem[] = [
  { id: 1, name: "快速模式", description: "快速创建比赛" },
  { id: 2, name: "自定义模式", description: "自定义比赛设置" },
  { id: 3, name: "模板模式", description: "使用预设模板" },
  { id: 4, name: "高级模式", description: "高级比赛配置" },
];

const handleModeClick = (mode: ModeItem) => {
  console.log("选择的模式:", mode);
};
</script>

# API

# Props

参数	说明	类型	默认值
mode-list	模式选项列表	ModeItem[]	`[]`
title	标题文本	string	`''`

# Events

事件名	说明	参数
mode-click	点击模式选项	mode: ModeItem 模式项

# ModeItem 类型

属性	说明	类型
id	唯一标识	string \| number
name	模式名称	string
description	模式描述	string

# 主题定制

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

# 样式变量

名称	默认值	描述
--pmm-mode-spacing-sm	.16rem	小间距
--pmm-mode-spacing-md	.24rem	中等间距
--pmm-mode-item-padding	.2rem .28rem	项目内边距
--pmm-mode-item-height	.72rem	项目高度
--pmm-mode-item-bg	rgba(211, 212, 252, 0.5)	项目背景色
--pmm-mode-item-color	#483081	项目文字颜色
--pmm-mode-title-color	#212124	标题文字颜色
--pmm-mode-item-font-size	.24rem	项目字体大小
--pmm-mode-title-font-size	.24rem	标题字体大小
--pmm-mode-item-radius	.08rem	项目圆角

← MatchMessagesMap MatchMessagesPoster →