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

src/router/index.ts

@@ -35,6 +35,17 @@ export const router = createRouter({
         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',
       name: 'permission',

src/router/routes/modules/agent.ts

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

src/views/Agent/Chat/index.vue

@@ -1,7 +1,26 @@
 <template>
-  <div class="app-container">
+  <!--    -->
-    <!-- 聊天组件 -->
+  <div>
-    <div id="coze-chat-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>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
@@ -9,11 +28,6 @@
 import { ref, onMounted } from 'vue';
 import { getChatAgent } from '@/api/all/agent';
 
-const cozeConfig = ref({
-  botId: '7522056630889381923',
-  title: 'AI客服',
-});
-
 // 存储认证令牌
 const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
 
@@ -43,7 +57,7 @@ const loadScript = (src) =>
   });
 
 const query = reactive({
-  id: 0,
+  id: 1,
 });
 
 let cozeWebSDKConfig = reactive({
@@ -52,101 +66,21 @@ let cozeWebSDKConfig = reactive({
   userInfo: {},
   ui: {},
 });
-
+let cozeWebSDK = null;
 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);
-  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 = () => {