Press Next

# PressmatchMessagesGrouping AI 办赛智能分组组件

AI 办赛智能分组组件，用于展示智能分组结果，包括分组信息、队伍数量和分组评估等功能。

# 引入

import PressPressmatchMessagesGrouping from "press-next/press-pressmatch-messages-grouping/press-pressmatch-messages-grouping";

# 代码演示

# 基础用法

<template>
  <PressPressmatchMessagesGrouping :content="content" />
</template>

<script setup lang="ts">
import PressPressmatchMessagesGrouping from "press-next/press-pressmatch-messages-grouping/press-pressmatch-messages-grouping";
import type { GroupingContent } from "press-next/press-pressmatch-messages-grouping/demo-data";

const content: GroupingContent = {
  text: "AI智能分组已完成",
  items: [
    { id: 1, title: "A组", num: 8 },
    { id: 2, title: "B组", num: 8 },
    { id: 3, title: "C组", num: 8 },
    { id: 4, title: "D组", num: 8 },
  ],
  describe: "本次分组基于选手实力评估，平均分差控制在",
  score: 150,
};
</script>

# API

# Props

参数 说明 类型 默认值
content 分组内容 GroupingContent -

# GroupingContent 类型

属性 说明 类型
text 标题文本 string
items 分组项目 GroupingItem[]
describe 描述文本 string
score 评估分数 number

# GroupingItem 类型

属性 说明 类型
id 项目 ID string | number
title 组别名称 string
num 队伍数量 number

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-grouping-spacing-sm .16rem 小间距
--pmm-grouping-spacing-md .24rem 中等间距
--pmm-grouping-spacing-lg .32rem 大间距
--pmm-grouping-item-width 1.16rem item宽度
--pmm-grouping-item-height 1.2rem item高度
--pmm-grouping-item-title-height .4rem item标题高度
--pmm-grouping-item-bg rgba(211, 212, 252, 0.5) item背景色
--pmm-grouping-font-color1 rgba(33, 33, 36, 0.75) 普通文字颜色
--pmm-grouping-font-color2 #483081 重点颜色
--pmm-grouping-font-color3 rgba(72, 48, 129, 0.6) 辅助颜色
--pmm-grouping-font-size-sm .2rem 小号字体
--pmm-grouping-font-size-md .24rem 正常字体
--pmm-grouping-font-size-lg .28rem 大字体
--pmm-grouping-font-size-xl .36rem 分数字体大小
--pmm-grouping-radius .08rem 圆角

← MatchMessagesInform →