Press Next

# MatchMessagesBase AI 数据流基础格式组件

AI 办赛的基础容器组件，通过插槽机制组合其他 AI 办赛组件，提供统一的布局和样式。主要用于承载消息列表、控制按钮、追问等功能模块。

# 引入

import PressMatchMessagesBase from "press-next/press-match-messages-base/press-match-messages-base";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesBase
    :title="title"
    :ctrls-more="ctrlsMore"
    :container-class="containerClass"
    @ctrls-more-click="handleCtrlsMoreClick"
  >
    <!-- 内容插槽：渲染消息列表和控制按钮 -->
    <template #content>
      <PressMatchMessagesList :items="items" />
      <PressMatchMessagesCtrls
        :content="ctrlsContent"
        @ctrls-button-click="handleButtonClick"
      />
    </template>

    <!-- 追问插槽：渲染快速问题 -->
    <template #question>
      <PressMatchMessagesQuestion
        :quick-questions="quickQuestions"
        @question-clicked="handleQuestionClicked"
      />
    </template>
  </PressMatchMessagesBase>
</template>

<script setup>
import PressMatchMessagesBase from "press-next/press-match-messages-base/press-match-messages-base";
import PressMatchMessagesList from "press-next/press-match-messages-list/press-match-messages-list";
import PressMatchMessagesCtrls from "press-next/press-match-messages-ctrls/press-match-messages-ctrls";
import PressMatchMessagesQuestion from "press-next/press-match-messages-question/press-match-messages-question";

// 组件数据
const title = "好的，我重新为您整理线下办赛步骤：";
const ctrlsMore = "更多比赛";
const containerClass = "ai-match-container";

// 消息列表数据
const items = [
  { label: "比赛赛制", value: "小组循环积分赛" },
  { label: "比赛类型", value: "团队赛（四人）" },
  { label: "比赛模式", value: "极速对决" },
];

// 控制按钮数据
const ctrlsContent = {
  ctrlsBtns: [
    {
      id: 1,
      buttonText: "一键创建",
      type: "primary",
      bgColor: "linear-gradient(280deg, #966FFB -12.57%, #6736F3 105.32%)",
    },
    {
      id: 2,
      buttonText: "补充比赛设置",
      type: "default",
      bgColor: "rgba(211, 212, 252, 0.48)",
    },
  ],
};

// 快速问题数据
const quickQuestions = [
  { id: 1, text: "赛制区别解释" },
  { id: 2, text: "大型赛事一般选择什么赛制？" },
  { id: 3, text: "参赛人数少于100人一般选择什么赛制？" },
];

// 事件处理
const handleCtrlsMoreClick = () => {
  console.log("更多按钮被点击");
};

const handleButtonClick = (payload) => {
  console.log("控制按钮被点击:", payload);
};

const handleQuestionClicked = (question) => {
  console.log("快速问题被点击:", question);
};
</script>

# API

# Props

参数 说明 类型 默认值
title 标题文本 string ''
ctrlsMore 更多按钮文本 string ''
containerClass 容器类名 string | string[] | object ''

# Slots

插槽名 说明
content 内容插槽，用于渲染消息列表、控制按钮等
question 追问插槽，用于渲染快速问题组件

# Events

事件名 说明 参数
ctrls-more-click 更多按钮点击 -

# 插槽使用说明

# content 插槽

用于渲染主要内容，通常包含：

  • PressMatchMessagesList: 消息列表组件
  • PressMatchMessagesCtrls: 控制按钮组件
  • 其他自定义内容组件

# question 插槽

用于渲染追问相关内容，通常包含：

  • PressMatchMessagesQuestion: 快速问题组件

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

# 样式变量

名称 默认值 描述
--pmmb-base-padding .32rem 内边距
--pmmb-base-gap .4rem 间隙
--pmmb-base-radius .16rem 圆角
--pmmb-base-bg #fff 背景色
--pmmb-base-title-color #212124 标题颜色
--pmmb-base-ctrls-color rgba(#212124, .75) 控制按钮颜色
--pmmb-base-shadow rgba(#cdd4f9, .6) 阴影颜色
--pmmb-base-title-font-size .28rem 标题字体大小
--pmmb-base-ctrls-font-size .24rem 控制按钮字体大小
--pmmb-base-title-icon url('...') 标题图标

# 设计理念

该组件采用插槽设计模式，作为 AI 办赛功能的基础容器：

  1. 容器职责: 提供统一的布局结构和样式
  2. 插槽机制: 通过 content 和 question 插槽组合不同功能组件
  3. 样式统一: 提供一致的视觉效果和交互体验
  4. 灵活组合: 支持根据业务需求灵活组合不同的子组件

← MatchMessagesCommon →