feat(agent): 重构聊天页面布局,调整路由配置,优化Coze SDK集成逻辑

This commit is contained in:
林志军
2025-07-11 18:30:44 +08:00
parent f7ff8b2bd5
commit 53a19496a4
3 changed files with 48 additions and 110 deletions

View File

@ -35,6 +35,17 @@ export const router = createRouter({
id: MENU_GROUP_IDS.WORK_BENCH_ID, id: MENU_GROUP_IDS.WORK_BENCH_ID,
}, },
}, },
{
path: '/agent/chat',
name: 'Chat',
component: () => import('@/views/Agent/chat'),
meta: {
hideSidebar: true,
requiresAuth: false,
requireLogin: true,
id: MENU_GROUP_IDS.WORK_BENCH_ID,
},
},
{ {
path: '/permission', path: '/permission',
name: 'permission', name: 'permission',

View File

@ -13,7 +13,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
name: 'Agent', name: 'Agent',
redirect: 'agent/listData', redirect: 'agent/listData',
meta: { meta: {
locale: '品牌资产管理', locale: '扣子智能体',
icon: IconRepository, icon: IconRepository,
requiresAuth: true, requiresAuth: true,
requireLogin: true, requireLogin: true,
@ -21,14 +21,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
id: MENU_GROUP_IDS.PROPERTY_ID, id: MENU_GROUP_IDS.PROPERTY_ID,
}, },
children: [ children: [
{
path: 'chat',
name: 'Chat',
meta: {
hideInMenu: true,
},
component: () => import('@/views/Agent/Chat'),
},
], ],
} }
]; ];

View File

@ -1,19 +1,33 @@
<template> <template>
<div class="app-container"> <!-- -->
<!-- 聊天组件 --> <div>
<a-row class="grid-demo">
<a-col :span="24">
<div>24 - 100%</div>
</a-col>
</a-row>
<a-row class="grid-demo">
<a-col :span="4">
<a-space direction="vertical">
<a-space class="w-240px">1</a-space>
<a-space>2</a-space>
</a-space>
</a-col>
<a-col :span="20">
<div>
<div id="coze-chat-container"></div> <div id="coze-chat-container"></div>
</div> </div>
</a-col>
</a-row>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { getChatAgent } from '@/api/all/agent'; import { getChatAgent } from '@/api/all/agent';
const cozeConfig = ref({
botId: '7522056630889381923',
title: 'AI客服',
});
// 存储认证令牌 // 存储认证令牌
const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg'); const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
@ -43,7 +57,7 @@ const loadScript = (src) =>
}); });
const query = reactive({ const query = reactive({
id: 0, id: 1,
}); });
let cozeWebSDKConfig = reactive({ let cozeWebSDKConfig = reactive({
@ -52,101 +66,21 @@ let cozeWebSDKConfig = reactive({
userInfo: {}, userInfo: {},
ui: {}, ui: {},
}); });
let cozeWebSDK = null;
const initChat = async () => { const initChat = async () => {
try {
await getChat();
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
bot_id: cozeConfig.value.botId,
},
componentProps: {
container: document.getElementById('coze-chat-container'),
},
auth: {
type: 'token',
token: authToken.value,
onRefreshToken: async () => {
const newToken = await fetchToken();
authToken.value = newToken;
return newToken;
},
},
ui: {
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
zIndex: 1000,
},
asstBtn: {
isNeed: false,
},
footer: {
isShow: true,
expressionText: '内容由AI生成无法确保真实准确仅供参考。',
},
chatBot: {
title: '智能体聊天室',
uploadable: true,
width: 800,
el: document.getElementById('coze-chat-container'),
onHide: () => {
// todo...
},
onShow: () => {
// todo...
},
},
feedback: {
isNeedFeedback: true,
feedbackPanel: {
title: '您对这个回答有什么看法?请告诉我们',
placeholder: '请详细描述您的问题...',
tags: [
{
label: '信息不正确',
},
{
label: '涉及敏感信息',
isNeedDetail: true,
},
],
},
},
},
feedback: {
isNeedFeedback: true,
feedbackPanel: {
title: '您对这个回答有什么看法?请告诉我们',
placeholder: '请详细描述您的问题...',
tags: [
{
label: '信息不正确',
},
{
label: '涉及敏感信息',
isNeedDetail: true,
},
],
},
},
});
} catch (error) {
console.error('加载 Coze SDK 失败:', error);
}
showChatPage();
};
const getChat = async () => {
const { code, data } = await getChatAgent(query.id); const { code, data } = await getChatAgent(query.id);
if (code == 200) { if (code != 200) {
console.log(data, 'data'); return false;
Object.assign(cozeWebSDKConfig, data);
console.log(data, 'data');
} else {
console.log('获取机器人配置失败');
} }
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
let config = data;
config.ui.chatBot.el = document.getElementById('coze-chat-container');
config.ui.width = '900px';
config.auth.onRefreshToken = function () {
return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
};
cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
showChatPage();
}; };
const showChatPage = () => { const showChatPage = () => {