| | |
| | | <template> |
| | | <div> |
| | | <div class="remote-container"></div> |
| | | </div> |
| | | <div> |
| | | <div class="remote-container" classNamev> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import DUIX from 'duix-guiji-light' |
| | | import {getDuixSign} from "../../api/dialogue"; |
| | | import * as pptTemplateApi from "../../api/pptTemplate"; |
| | | |
| | | import DUIX from 'duix-guiji-light'; |
| | | import {getDuixSign} from "../../api/dialogue/index.ts"; |
| | | export default { |
| | | name: "index" |
| | | } |
| | | const tempConversationId ='dev-'+ Math.random().toString(36).substring(2, 11); |
| | | const duix = new DUIX() |
| | | name: "index", |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | this.initDuix(); |
| | | }); |
| | | }, |
| | | methods: { |
| | | |
| | | getDuixSign().then(res => { |
| | | if (res.code === 200) { |
| | | duix.init({ |
| | | sign: res.data.sign, |
| | | containerLable: '.remote-container', |
| | | conversationId: tempConversationId, |
| | | }) |
| | | } |
| | | }) |
| | | duix.on('getDuixSign', () => { |
| | | // start session |
| | | duix.start({ |
| | | conversationId: tempConversationId, |
| | | openAsr: true |
| | | }).then(res => { |
| | | console.info(res) |
| | | }) |
| | | }) |
| | | async initDuix() { |
| | | // 1. 检查容器是否存在 |
| | | const container = document.querySelector('.remote-container'); |
| | | if (!container) { |
| | | console.error("错误:未找到 .remote-container 元素"); |
| | | return; |
| | | } |
| | | |
| | | // 2. 获取 Token |
| | | let token; |
| | | try { |
| | | const res = await getDuixSign(); |
| | | token = res.data?.sign || res.sign || res; |
| | | if (!token) throw new Error("Token 为空"); |
| | | } catch (err) { |
| | | console.error("获取签名失败:", err); |
| | | return; |
| | | } |
| | | |
| | | // 3. 初始化 DUIX |
| | | const duix = new DUIX(); |
| | | const conversationId = 'dev-'+ Math.random().toString(36).substring(2, 11);; |
| | | |
| | | try { |
| | | await duix.init({ |
| | | sign: token, |
| | | containerLable: '.remote-container', // 注意:可能是 containerLabel(检查拼写) |
| | | conversationId: conversationId, |
| | | }); |
| | | // 4. 监听事件 |
| | | duix.on('getDuixSign', () => { |
| | | duix.start({conversationId, openAsr: true}) |
| | | .then(() => console.log("DUIX 启动成功")) |
| | | .catch(err => console.error("DUIX 启动失败:", err)); |
| | | }); |
| | | } catch (initErr) { |
| | | console.error("DUIX 初始化失败:", initErr); |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .remote-container{ |
| | | .remote-container { |
| | | width: 500px; |
| | | height: 500px; |
| | | border: 1px solid red; /* 调试时高亮容器 */ |
| | | } |
| | | </style> |