feat(agent): 重构聊天页面实现，新增Coze SDK集成和API接口，优化路由权限配置

src/views/Agent/Chat/index.vue

@@ -1,57 +1,166 @@
 <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 id="coze-chat-container"></div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
-import CozeChat from './components/CozeChat.vue';
+import { getChatAgent } from '@/api/all/agent';
 
-export default {
-  components: { CozeChat },
-  setup() {
-    const cozeConfig = ref({
-      botId: '7522056630889381923',
-      title: 'AI客服',
-    });
+const cozeConfig = ref({
+  botId: '7522056630889381923',
+  title: 'AI客服',
+});
 
-    // 存储认证令牌
-    const authToken = ref('');
+// 存储认证令牌
+const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
 
-    // 模拟从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();
-    });
-  },
+// 模拟从API获取token
+const fetchToken = async () => {
+  // 实际开发中应替换为真实的 API 请求
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('pat_' + Math.random().toString(36).substring(2, 15));
+    }, 500);
+  });
 };
+
+// 刷新token
+const refreshToken = async () => {
+  authToken.value = await fetchToken();
+};
+
+// 动态加载脚本函数
+const loadScript = (src) =>
+  new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+
+const query = reactive({
+  id: 0,
+});
+
+let cozeWebSDKConfig = reactive({
+  config: {},
+  auth: {},
+  userInfo: {},
+  ui: {},
+});
+
+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) {
+    console.log(data, 'data');
+    Object.assign(cozeWebSDKConfig, data);
+    console.log(data, 'data');
+  } else {
+    console.log('获取机器人配置失败');
+  }
+};
+
+const showChatPage = () => {
+  // 显示聊天页面
+  console.log(cozeWebSDK, 'chatClient');
+  cozeWebSDK.showChatBot();
+};
+
+onMounted(() => {
+  initChat();
+});
 </script>
 
-<style>
+<style scoped>
 .app-container {
   max-width: 800px;
   margin: 0 auto;