<template>
|
<div>
|
<div class="remote-container" classNamev>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import DUIX from 'duix-guiji-light';
|
import {getDuixSign} from "../../api/dialogue/index.ts";
|
export default {
|
name: "index",
|
mounted() {
|
this.$nextTick(() => {
|
this.initDuix();
|
});
|
},
|
methods: {
|
|
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 {
|
width: 500px;
|
height: 500px;
|
border: 1px solid red; /* 调试时高亮容器 */
|
}
|
</style>
|
