goelia-ai-admin/src/layout/components/ai/layoutAi.vue

<template>
  <div id="coze-chat-container"></div>
</template>

<script>
import {createCozeToken} from '@/api/oms/ai'
import { mapState } from "vuex";
export default {
  name: "CozeChat",
  computed: {
    ...mapState("user", ["token", "userId", "name","loginName"]),
  },
  data: function() {
    return {
      botId: "",
      cozeToken: "",
    };
  },

  mounted() {
    this.getToken().then(() => {
      console.log('初始化获取Token');
      this.initCozeChat();
    });
  },

  methods: {
    /**
     * 获取授权
     * @returns {Promise<unknown>}
     */
    getToken() {
      let data={
        userId: this.userId,
        token: this.token,
        userName: this.loginName,
      }
      return new Promise((resolve, reject) => {
        createCozeToken(data).then(res => {
          console.log('扣子Token获取结果', res);
          if (res.code === 0) {
            this.cozeToken = res.data.accessToken;
            this.botId = res.data.botId;
            resolve();
          } else {
            console.error('获取扣子Token失败');
            reject(new Error('获取 Token 失败'));
          }
        }).catch(error => {
          console.error('获取 Token 时发生错误', error);
          reject(error);
        });
      });
    },
    initCozeChat() {
      if (window.CozeWebSDK) {
        new window.CozeWebSDK.WebChatClient({
          config: {
            bot_id: this.botId,
          },
          auth: {
            type: 'token',
            token: this.cozeToken,
            onRefreshToken: () => {
              this.getToken().then(() => {
                console.log('刷新Token');
                return this.cozeToken;
              });
            },
          },
          ui: {
            chatBot: {
              title: 'OMS智能客服',
              uploadable: false,
            },
            base: {
              layout: 'pc',
              icon: 'https://gloria-pim-oss.tos-cn-guangzhou.volces.com/omsCoaz.png',
            },
            footer: {
              isShow: true,
              expressionText: '广州市格风服饰有限公司',
              // linkvars: {
              //   name: {
              //     text: 'WuXi SwiftWings Tech Company Ltd.',
              //     link: 'https://www.swiftwings.cn/main/index.html#/home'
              //   }
              // },
            }
          },
          userInfo: {
            id: this.userId+"",
            url: 'https://public-swings.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250221163447.png',
            nickname: this.name,
          },
        });
      } else {
        const script = document.createElement("script");
        script.src = "https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.3/libs/cn/index.js";
        script.onload = this.initCozeChat;
        document.body.appendChild(script);
      }
    },


  },
};
</script>

<style scoped>
#coze-chat-container {
  position: absolute;
  right: 10px;
  bottom: 20px;
}
</style>