基于umi使用ChatUI Pro(2)配置界面_自定义卡片_组件传值

界面配置

根据提供的api在config下配置

    avatarWhiteList: [], // 头像白名单 
    navbar: {}, // 导航 
    robot: {}, // 机器人信息 
    user: {}, // 发送者信息 
    agent: {}, // 客服信息 
    feedback: {}, // 点赞点踩&反馈 
    messages: [], // 初始化消息 
    toolbar: [], // 加号扩展 
    quickReplies: [], // 快捷短语 
    inputType: '', // 输入方式 
    placeholder: '', // 输入框占位符 
    sidebar: '', // 侧边栏

官网给的图

navbar和sidebar需要通过Card组件来实现

最开始看官网，以为pro版本内置了自己的卡片，其实只有一部分，需要自定义卡片实现

需要在config下配置component属性

比如写个tabs组件tabs.js

    import React, { useState } from 'react';
    import '@chatui/core/es/styles/index.less';
    // 引入组件
    import {
      Tabs,
      Tab,
      Card,
      CardMedia,
      CardTitle,
      CardText,
      CardActions,
      Button,
    } from '@chatui/core';
    // 引入样式
    import '@chatui/core/dist/index.css';

    export default function ({ data, ctx, meta }) {
      console.log(data, 'data', ctx, meta); //传递给组件的信息
      return (
        <div>
          <h3>基础用法</h3>
          <Card>
            <Tabs>
              <Tab label="标签1">
                <p>内容1</p>
              </Tab>
              <Tab label="标签2">
                <p>内容2</p>
              </Tab>
              <Tab label="标签3">
                <p>内容3</p>
              </Tab>
            </Tabs>
          </Card>
          <Card size="xl">
            <CardMedia image="//gw.alicdn.com/tfs/TB1Xv5_vlr0gK0jSZFnXXbRRXXa-427-240.png" />
            <CardTitle>Card title</CardTitle>
            <CardText>Card content</CardText>
            <CardActions>
              <Button>Default button</Button>
              <Button color="primary">Primary button</Button>
            </CardActions>
          </Card>
        </div>
      );
    }

在index.js中引入并配置

    import MyTabs from './component/tabs'
    
    const bot = new window.ChatSDK({
        components : {
        'my-tabs' : MyTabs  //这里的my-tabs是设置的code唯一标识
        },
        sidebar: [ //在sidebar中的code中配置，相当于使用组件
          {
            title: '测试',
            code: 'my-tabs',
            data: [
              {
                lable: '疫情问题' ,
                list: [
                  '传播途径',
                  '在家消毒',
                ],
              },
              {
                lable: '法人问题',
                list: [
                  '社会团体',
                  '民办非企业',
                ],
              }
            ],
         },
       ]      
    })
    这里的data就是相当于传给组件的信息，在tabs.js中，可以直接拿到

遇到的坑：

在使用组件时，会报错。因为Pro 已经包含了 React、ChatUI，开发的时候需要 externals 掉 需要在umirc.ts配置文件中配置。这是ChatUI Pro自带的问题

```

    export default defineConfig({
      "externals": {
        "react": "React",
        "react-dom": "ReactDOM",
        "@chatui/core": "ChatUI"
      }
    })
```

这样就相当于自定义卡片，在sidebar侧边栏渲染出来