更新记录

1.0.3（2024-11-28） 下载此版本

1.去除uView对项目依赖 2.自定义封装基础组件

1.0.2（2024-11-27） 下载此版本

1.完善组件文档

1.0.1（2024-11-27） 下载此版本

1.支持H5，小程序，APP对话。 2.丰富的对话组件，包含语音识别功能 3.支持v2, v3项目

平台兼容性

byt-AIDialogue 插件文档

一、引入样式文件

在项目的uni.scss文件中引入

@import '@/uni_modules/byt-AIDialogue/index.scss';

二、全局注册组件

"custom": {
  "^byt-(.*)": "@/uni_modules/byt-AIDialogue/components/byt-$1/byt-$1.vue",
  "qiun-data-charts":"@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}

为了减少主包的大小，可以采用局部注册秋云图表，修改byt-chart组件

import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
export default {
    name: 'byt-chart',
    components: {
        qiunDataCharts
    },
    ...
}

三、调用组件的方式

1、页面调用

在pages.json注册两个页面

// ai对话示例组件主页面
{
    "path": "uni_modules/byt-AIDialogue/pages/listHome",
    "style": {
        "navigationBarTitleText": "ai对话智能体列表",
        "navigationStyle": "custom",
        "enablePullDownRefresh": false,
        "disableScroll": true,
        "app-plus": {
            "bounce": "none" // 将回弹属性关掉
        }
    }
},
// ai对话示例组件对话页面
{
    "path": "uni_modules/byt-AIDialogue/pages/index",
    "style": {
        "navigationBarTitleText": "ai对话",
        "navigationStyle": "custom",
        "enablePullDownRefresh": false,
        "disableScroll": true,
        "app-plus": {
            "bounce": "none" // 将回弹属性关掉
        }
    }
},

2、组件调用

1、组件地址引入调用

import BytAIDialogue from "/uni_modules/byt-AIDialogue/components/byt-AIDialogue/byt-AIDialogue.vue"

2、也可以直接调用

<byt-AIDialogue></byt-AIDialogue>

3、组件props

props: {
    config: {
        type: Object,
        default: () => ({
            // 主体内容
            main: {
                // 背景色
                // (1.数字类型， 1-4
                background: 1,
                // (2.对象类型 { type: 'image' | 'linear' | 'coLor' }
                // background: {
                //  type: 'image',
                //  url: "https://img.yummall.cn/baiyetong/byt-uni-ui/role_icon_1.svg", // 1-4
                // },
                // background: {
                //  type: 'linear',
                //  url: "-webkit-linear-gradient(top, #ffffff, #f3f4f8 120rpx)", // 1-4
                // },
                // background: {
                //  type: 'color',
                //  url: "rgb(217 224 255)", // 1-4
                // },
                // 背景角色
                role: 1, // 1-4 
            },
            // 头部启动栏
            startup: {
                // 我是红商AI助手。您可以输入任何想要创作图像的主题，我们将为您创作。
                tip: "我是红商AI助手。您有任何关于红商集团的问题，我可以随时帮您解答。",
                avatar: "https://img.yummall.cn/baiyetong/byt-uni-ui/role_icon_1.svg" // 1,2
            },
            // 猜你喜欢
            guess: false,
            // 音频识别
            audio: true,
            // 消息类型
            message: {
                username: true,
                userName: "用户名称1号",
                userAvatar: "https://gw.alicdn.com/bao/uploaded/i1/3164711246/O1CN01iC78Hr1L4iVYmXKXQ_!!3164711246.jpg_210x210q75.jpg_.webp",
                autoName: 'AI助手',
                answerWait: "AI助手思考中",
                greeting: "您好！有什么可以帮助您的？",
                typeWhiteList: ['text', 'activity', 'coupon', 'goods', 'chart', 'table', 'action',
                    "image"
                ],
                avatar: "https://img.yummall.cn/baiyetong/byt-uni-ui/role_icon_1.svg", // 1,2
            }
        })
    },
    applyId: {
        type: String,
        default: null
    },
    applyName: {
        type: String,
        default: 'AI助手'
    },
    width: {
        type: String,
        default: '750rpx'
    },
    height: {
        type: String,
        default: '100vh'
    },
    // 是否显示返回按钮
    backShow: {
        type: Boolean,
        default: true
    }
},

3、大屏悬浮窗(不支持小程序)

1、组件地址引入调用

import BytFloating from "/uni_modules/byt-AIDialogue/components/byt-floating/byt-floating.vue"

2、也可以直接调用

{
    floatingWindowShow: false,
    floatingWindowType: 1,
}

 <!-- #ifdef VUE2 -->
    <byt-floating :type.sync="floatingWindowType" :typeButton="true" :show.sync="floatingWindowShow"></byt-floating>
    <!-- #endif -->
    <!-- #ifdef VUE3 -->
    <byt-floating v-model:type="floatingWindowType" :typeButton="true" v-model:show="floatingWindowShow"></byt-floating>
    <!-- #endif -->

3、组件props

   props: {
        // 弹窗显示
        show: {
            type: Boolean,
            default: false
        },
        // 模式1、悬浮拖动，2、吸附，3、全屏
        type: {
            type: Number,
            default: 1
        },
        // 是否显示组件默认类型切换按钮 ,如果这个设置为true则必须给type双向绑定变量才可以 type.sync
        typeButton: {
            type: Boolean,
            default: false
        }
    },

四、如何修改组件

1.api接口相关

在common/api.js中定义了对应的对话请求接口

在common/config.js中定义了开发环境和生产环境下的请求地址