77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<h1>我的应用</h1>
|
|||
|
|
|
|||
|
|
<!-- 聊天组件 -->
|
|||
|
|
<CozeChat :bot-id="cozeConfig.botId" :title="cozeConfig.title" :token="authToken" />
|
|||
|
|
|
|||
|
|
<!-- Token刷新按钮（示例） -->
|
|||
|
|
<button @click="refreshToken" class="refresh-btn">刷新Token</button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from 'vue';
|
|||
|
|
import CozeChat from './components/CozeChat.vue';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: { CozeChat },
|
|||
|
|
setup() {
|
|||
|
|
const cozeConfig = ref({
|
|||
|
|
botId: '7522056630889381923',
|
|||
|
|
title: 'AI客服',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 存储认证令牌
|
|||
|
|
const authToken = ref('');
|
|||
|
|
|
|||
|
|
// 模拟从API获取token
|
|||
|
|
const fetchToken = async () => {
|
|||
|
|
return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
|
|||
|
|
// 实际项目中应调用后端API
|
|||
|
|
// return new Promise((resolve) => {
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// // 生成模拟token
|
|||
|
|
// const mockToken = 'pat_' + Math.random().toString(36).substring(2, 15);
|
|||
|
|
// resolve(mockToken);
|
|||
|
|
// }, 500);
|
|||
|
|
// });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 刷新token
|
|||
|
|
const refreshToken = async () => {
|
|||
|
|
authToken.value = await fetchToken();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 初始化时获取token
|
|||
|
|
onMounted(async () => {
|
|||
|
|
authToken.value = await fetchToken();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.app-container {
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background: #2ecc71;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn:hover {
|
|||
|
|
background: #27ae60;
|
|||
|
|
}
|
|||
|
|
</style>
|