From f7ff8b2bd5ebe2f749b236947b2e56ebdedf4733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=BF=97=E5=86=9B?= <543024265@qq.com>
Date: Fri, 11 Jul 2025 14:40:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(agent):=20=E9=87=8D=E6=9E=84=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E9=A1=B5=E9=9D=A2=E5=AE=9E=E7=8E=B0=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9ECoze=20SDK=E9=9B=86=E6=88=90=E5=92=8CAPI=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=8C=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/agent.ts               |   6 +
 src/permission/permission.ts       |   5 +-
 src/router/routes/modules/agent.ts |   5 +-
 src/views/Agent/Chat/index.vue     | 189 +++++++++++++++++++++++------
 4 files changed, 159 insertions(+), 46 deletions(-)
 create mode 100644 src/api/all/agent.ts

diff --git a/src/api/all/agent.ts b/src/api/all/agent.ts
new file mode 100644
index 0000000..69be57a
--- /dev/null
+++ b/src/api/all/agent.ts
@@ -0,0 +1,6 @@
+// 投放账号计划
+import Http from '@/api';
+// 获取聊天智能体
+export const getChatAgent = (id: number) => {
+  return Http.get(`/v1/agent/getChatAgent/${id}`);
+};
diff --git a/src/permission/permission.ts b/src/permission/permission.ts
index 7c12722..13418fd 100644
--- a/src/permission/permission.ts
+++ b/src/permission/permission.ts
@@ -5,6 +5,7 @@ export function checkRoutePermission(routeName: string) {
   const allowAccessRoutes = userStore.allowAccessRoutes;
 
   if (!routeName) return false;
-
-  return allowAccessRoutes.includes(routeName);
+  // todo
+  return true;
+  // return allowAccessRoutes.includes(routeName);
 }
diff --git a/src/router/routes/modules/agent.ts b/src/router/routes/modules/agent.ts
index 1cd422c..da1a73c 100644
--- a/src/router/routes/modules/agent.ts
+++ b/src/router/routes/modules/agent.ts
@@ -25,10 +25,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'chat',
         name: 'Chat',
         meta: {
-          locale: '品牌信息',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
+          hideInMenu: true,
         },
         component: () => import('@/views/Agent/Chat'),
       },
diff --git a/src/views/Agent/Chat/index.vue b/src/views/Agent/Chat/index.vue
index 9b98eeb..c22dae3 100644
--- a/src/views/Agent/Chat/index.vue
+++ b/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;