康鲁杰
2025-05-29 0d9844060912192819486a499ad987d216e33b6e
easegen-front/src/views/dialogue/index.vue
@@ -1,43 +1,69 @@
<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>