建议node版本22以上，其他版本的也可以尝试，但vite至少需要18以上哦；

版本更新记录

| 版本号 | 变更内容 | | ------ | ------------------------------------------------------------------------------ | | 1.0.22 | -添加刷新按钮 | | 1.0.21 | - 调整动画间隔 | | 1.0.20 | - 添加iframe获取语音的权限 | | 1.0.19 | - 添加白色系对话框边框，调整关闭按钮的圆角度数，调整小铁匠动画间隔 | | 1.0.18 | - 调试sso登录完成，请不要使用1.0.17版本 | | 1.0.17 | - 添加sso登录判断 | | 1.0.16 | - 调整小铁匠动画间隔，间歇性消失，随机播放 | | 1.0.15 | - 调整小铁匠动画间隔，随机播放 | | 1.0.14 | - 调试实际接入时的色系问题 | | 1.0.13 | - 添加dark参数，适配暗色系 | | 1.0.12 | - 添加dark参数，适配暗色系，但推送时忘记打包了，所以依然是旧版本，请弃用该版本 | | 1.0.11 | - 补充文档说明，请仔细查看文档，该文档没有一个字是多余的 | | 1.0.10 | - 监听resize事件，调整元素位置 | | 1.0.9 | - 压缩图片素材，修改引入图片方式 | | 1.0.8 | - 压缩图片素材，修改打包文件目录结构 | | 1.0.7 | - 减少数字人图标素材 - 请弃用该版本 | | 1.0.6 | - 减少数字人图标素材 - 请弃用该版本 | | 1.0.5 | - 修改数字人图标素材 - 自动登录；该版本不能使用，包体积过大 | | 1.0.4 | - 完善 README | | 1.0.3 | - 移除冗余依赖 |

yl-ai-modal （使用vue3封装的组件）

使用方法

安装依赖 npm i yl-ai-modal -S

不管是vue还是react，都需要在vite配置文件中需添加：（webpack脚手架如果有类似参数的话，请自行搜索，关键字是：不参与预构建）

// vite.config.js:
import vue from '@vitejs/plugin-vue';

export default defineConfig(() => {
  return {
    plugins: [vue()],
    //注意：这里一定要添加
    optimizeDeps: {
      exclude: ['yl-ai-modal']
    }
  }
})

vue3组件（react组件也一样，引入script部分）：

<template>
  <button @click="init">大模型对话</button>
</template>

<script setup>
//引入组件
import 'yl-ai-modal/dist/yl-ai-modal.css'
import ylAiModal from 'yl-ai-modal'

let aiModalHandle = null;
// 初始化或销毁
const init = () => {
  if (aiModalHandle) {
    aiModalHandle.destroy();
    aiModalHandle = null;
  } else {
    // 初始化弹框
    aiModalHandle = ylAiModal({
      /*
        必填参数：系统url
        其他可拼接参数需要拼接在url后
        accessToken 登录token 必传
        refreshToken 刷新token 必传
        dark=true 适配黑色系 可选
      */
      // url: 'https://192.168.10.1:8080?accessToken=123456&refreshToken=123456&dark=true',
    });
  }
};
// 如果你需要手动打开对话框
const open = () => {
  if (aiModalHandle) {
    aiModalHandle.open();
  }
};
// 如果你需要手动隐藏对话框
const close = () => {
  if (aiModalHandle) {
    aiModalHandle.close();
  }
};
</script>

react 组件使用： 比如在index.tsx中：

import 'yl-ai-modal/dist/yl-ai-modal.css'
import ylAiModal from 'yl-ai-modal'

export default App() => {
  const init = () => {
    ylAiModal({
      //传入 url
      url: 'https://www.antdv.com/docs/vue/introduce-cn/',
    });
  }
  //初始化
  init()

  /*
    或者
    useEffect(() => {
      init()
    })
  */
  // 如果需要手动调用 打开或关闭弹框的方法，请参考上面vue3组件的使用文档
}