feat: 添加语音项目跳转的功能支持

public/config.js

@@ -64,3 +64,10 @@ window.XIAOSHU_URL = 'http://smartai.com:8401';
  */
 window.DEFAULT_CHAT_AGENT_NAME = '智能问答';
 window.DEFAULT_CHAT_AGENT_ID = '90d533729c0211efbf6b0242ac160006';
+
+/**
+ * 临时配置项：语音项目地址
+ * 为了做内网演示，新添加的一个特殊的链接地址
+ */
+window.WEB_LINK_AUDIO_LINK = 'http://192.168.20.116:3001';
+window.WEB_LINK_OPEN_MODE = 2; // 1 直接跳转 2 内网嵌入

src/base/store/use-recent-agents.js

@@ -59,8 +59,9 @@ export const useRecentAgentStore = defineStore('recent_agents', {
      * @param {string} id
      * @param {string} name
      * @param {string} icon
+     * @param {string} mode
      */
-    addItem(id, name, icon) {
+    addItem(id, name, icon, mode) {
       /**
        * 检查是否已经存在，如果已经存在，则将其提到前位
        * 如果不存在，则在首位添加记录
@@ -69,6 +70,7 @@ export const useRecentAgentStore = defineStore('recent_agents', {
         id: id,
         name: name,
         icon: icon,
+        mode: mode,
         active_time: Date.now()
       };
 

src/modules/conversation-board/BoardAgentList.vue

@@ -7,7 +7,7 @@
       :desc="item.description"
       :id="item.id"
       :icon="item.icon"
-      @active="handleActive"
+      @active="handleActive($event, item, index)"
     />
   </div>
 </template>
@@ -21,8 +21,12 @@ const props = defineProps({
 
 const emit = defineEmits(['itemActive']);
 
-const handleActive = (target_id) => {
-  emit('itemActive', target_id);
+const handleActive = (target_id, item, index) => {
+  emit('itemActive', {
+    id: target_id,
+    agent: item,
+    index: index
+  });
 };
 </script>
 

src/router/index.js

@@ -17,7 +17,7 @@ const router = createRouter({
  */
 
 /** 免验证白名单 */
-const whiteList = ['/login', '/reg', '/denied', '/'];
+const whiteList = ['/login', '/reg', '/denied', '/', '/chat/voice'];
 
 /**
  * 需要登录的链接

src/router/route.js

@@ -5,13 +5,15 @@ import Home from '../views/Home.vue';
  */
 export const systemRoutes = [
   // { path: '/', component: Home, redirect: '/chat/qa' },
-  // { path: '/', component: Home, redirect: '/xiaoshu' },
-  { path: '/', component: Home },
+  { path: '/', component: Home, redirect: '/xiaoshu' },
+  // { path: '/', component: Home },
 
   // 登录与注册 白名单页面
   { path: '/login', component: () => import('../views/Login.vue') },
   { path: '/reg', component: () => import('../views/Register.vue') },
 
+  { path: '/chat/voice', component: () => import('../views/ConversationVoice.vue') },
+
   /**
    * 设置
    */

src/views/ConversationBoard.vue

@@ -20,7 +20,11 @@ import ConversationBoardContainer from './conversation/ConversationBoardContaine
 
 import bg_image from '../assets/chat/board-bg.png';
 
+import { getConfigField } from '../config/index';
+import useOpenWebLink from './conversation/use-open-mode-web-link';
+
 const router = useRouter();
+const openWebLink = useOpenWebLink();
 
 const content_style = {
   backgroundImage: `url(${bg_image})`,
@@ -28,12 +32,34 @@ const content_style = {
   backgroundSize: 'contain'
 };
 
-const handleAgentActive = (target_id) => {
-  router.push({
-    path: '/chat/qa',
-    query: {
-      agent: target_id
-    }
-  });
+const handleAgentActive = ({ id, agent, index }) => {
+  const target_id = id;
+  // -->> advanced-chat
+  // -->> agent-chat
+  // -->> chat
+  // -->> workflow
+  // -->> web_link
+  // -->> agent-dialog
+
+  if (agent.mode === 'web_link') {
+    // 直接跳转链接
+    // const target_link = getConfigField('WEB_LINK_AUDIO_LINK');
+    // const open_mode = getConfigField('WEB_LINK_OPEN_MODE');
+
+    // if (open_mode === 1) {
+    //   window.open(target_link);
+    // } else {
+    //   // 页面嵌入：和
+    // }
+
+    openWebLink();
+  } else {
+    router.push({
+      path: '/chat/qa',
+      query: {
+        agent: target_id
+      }
+    });
+  }
 };
 </script>

src/views/ConversationVoice.vue

@@ -0,0 +1,75 @@
+<template>
+  <LayoutExperience>
+    <ContentContainer :containerStyle="containerStyle">
+      <ChatAsideMenu />
+
+      <div class="voice-container">
+        <iframe :src="iframe_src" style="background-color: #f0f2f5" @load="handleIframeLoad"></iframe>
+
+        <div v-if="!is_loaded" class="iframe-loading-mask">
+          <div>
+            <a-spin />
+          </div>
+        </div>
+      </div>
+    </ContentContainer>
+  </LayoutExperience>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUpdate, watch } from 'vue';
+import LayoutExperience from './layout/LayoutExperience.vue';
+import ContentContainer from './layout/ContentContainer.vue';
+
+import ChatAsideMenu from './conversation/ChatAsideMenu.vue';
+
+import { getConfigField } from '../config/index';
+
+const containerStyle = {
+  paddingLeft: 0,
+  paddingRight: 0
+};
+
+const iframe_src = getConfigField('WEB_LINK_AUDIO_LINK');
+
+const is_loaded = ref(false);
+
+const handleIframeLoad = () => {
+  setTimeout(() => {
+    is_loaded.value = true;
+  }, 1000);
+};
+</script>
+<style scoped>
+.voice-container {
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+
+  height: calc(100% - 52px);
+  padding-top: 52px;
+
+  position: relative;
+}
+
+.voice-container iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #f0f2f5;
+}
+
+.iframe-loading-mask {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #f0f2f5;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>SmartAI</div>
-  <div class="box">
+  <!-- <div class="box">
     <MindMap
       :content="test_mk_str"
       :box_style="box_style"
@@ -8,87 +8,87 @@
       :progress="progress"
       @extend="extend"
     ></MindMap>
-  </div>
+  </div> -->
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
-import MindMap from '../components/MindMap.vue';
-// 系统第一页
+// import MindMap from '../components/MindMap.vue';
+// // 系统第一页
 
-const mindMap_content = ref();
-const test_mk_str = `
-# markmap
+// const mindMap_content = ref();
+// const test_mk_str = `
+// # markmap
 
-- beautiful
-- useful
-- easy
-  - hard
-  - code
-- interactive
-  - age
-  - name
-  - job
-    - shaa
-    - hhe
-    - nihao
-      - jfksaj
-    - zheg
-`;
-const test_mk_str_extend = `
-# markmap
+// - beautiful
+// - useful
+// - easy
+//   - hard
+//   - code
+// - interactive
+//   - age
+//   - name
+//   - job
+//     - shaa
+//     - hhe
+//     - nihao
+//       - jfksaj
+//     - zheg
+// `;
+// const test_mk_str_extend = `
+// # markmap
 
-- beautiful
-- useful
-- easy
-  - hard
-  - code
-- interactive
-  - age
-  - name
-  - job
-    - shaa
-    - hhe
-    - nihao
-      - jfksaj
-    - zheg
-      - 张三
-      - 李四
-      - 王五
-      - 赵六
-      - 孙七
-`;
+// - beautiful
+// - useful
+// - easy
+//   - hard
+//   - code
+// - interactive
+//   - age
+//   - name
+//   - job
+//     - shaa
+//     - hhe
+//     - nihao
+//       - jfksaj
+//     - zheg
+//       - 张三
+//       - 李四
+//       - 王五
+//       - 赵六
+//       - 孙七
+// `;
 
-const box_style = ref({
-  width: '100%',
-  height: '100%'
-});
-const svg_style = ref({
-  width: '100%',
-  height: '100%'
-});
-const progress = ref(0);
-const target_node = ref(null);
-const root_full = ref(null);
-let timer_progress = null;
+// const box_style = ref({
+//   width: '100%',
+//   height: '100%'
+// });
+// const svg_style = ref({
+//   width: '100%',
+//   height: '100%'
+// });
+// const progress = ref(0);
+// const target_node = ref(null);
+// const root_full = ref(null);
+// let timer_progress = null;
 
-const extend = (item) => {
-  console.log(item);
-  target_node.value = item.node;
-  root_full.value = item.full;
-  progress.value = 0;
-  timer_progress = setInterval(() => {
-    if (progress.value < 100) {
-      progress.value += 1;
-    }
-    if (progress.value == 100) {
-      mindMap_content.value = test_mk_str_extend;
-    }
-  }, 30);
-};
-onMounted(() => {
-  mindMap_content.value = test_mk_str;
-});
+// const extend = (item) => {
+//   console.log(item);
+//   target_node.value = item.node;
+//   root_full.value = item.full;
+//   progress.value = 0;
+//   timer_progress = setInterval(() => {
+//     if (progress.value < 100) {
+//       progress.value += 1;
+//     }
+//     if (progress.value == 100) {
+//       mindMap_content.value = test_mk_str_extend;
+//     }
+//   }, 30);
+// };
+// onMounted(() => {
+//   mindMap_content.value = test_mk_str;
+// });
 </script>
 <style scoped>
 .box {

src/views/conversation/ChatAsideMenu.vue

@@ -35,9 +35,8 @@
           v-for="item of agents_list"
           :label="item.name"
           :img="item.icon"
-          :id="item.id"
           :key="item.id"
-          @active="handleAgentClick(item.id)"
+          @active="handleAgentClick(item)"
           @delete="handleAgentDelete(item.id)"
         />
       </div>
@@ -57,6 +56,10 @@ import { usePlatformInformation } from '../../base/store/use-platform-informatio
 import ChatAsideBtn from './ChatAsideBtn.vue';
 import ChatAsideAgent from './ChatAsideAgent.vue';
 
+import useOpenWebLink from './use-open-mode-web-link';
+
+const openWebLink = useOpenWebLink();
+
 const should_render = ref(false);
 onMounted(() => {
   setTimeout(() => {
@@ -96,7 +99,8 @@ const agents_list = computed(() => {
     arr.push({
       id: item.id,
       icon: getIconIntelligent(item.icon),
-      name: item.name
+      name: item.name,
+      mode: item.mode
     });
   }
 
@@ -111,15 +115,21 @@ const handleMenuClick = (path) => {
 
 /**
  * 点击最近使用的Agent
- * @param agent_id
+ * @param item
  */
-const handleAgentClick = (agent_id) => {
-  router.push({
-    path: '/chat/qa',
-    query: {
-      agent: agent_id
-    }
-  });
+const handleAgentClick = (item) => {
+  if (item.mode === 'web_link') {
+    openWebLink();
+  } else {
+    const agent_id = item.id;
+
+    router.push({
+      path: '/chat/qa',
+      query: {
+        agent: agent_id
+      }
+    });
+  }
 };
 
 /**

src/views/conversation/ConversationBoardContainer.vue

@@ -58,13 +58,19 @@ const { api_status, api_message, list_agents, getAgentList } = useAgentList4Boar
 const recentAgents = useRecentAgentStore();
 const allAgents = useAllAgentStore();
 
-const handleItemActive = (target_id) => {
+const handleItemActive = ({ id, agent, index }) => {
+  const target_id = id;
+
   const target_info = allAgents.getInfo(target_id);
 
   // 添加记录
-  recentAgents.addItem(target_id, target_info.name, target_info.icon);
+  recentAgents.addItem(target_id, target_info.name, target_info.icon, target_info.mode);
 
-  emit('agentActive', target_id);
+  emit('agentActive', {
+    id: id,
+    agent: agent,
+    index: index
+  });
 };
 
 /**

src/views/conversation/use-open-mode-web-link.js

@@ -0,0 +1,22 @@
+import { useRouter } from 'vue-router';
+
+import { getConfigField } from '../../config/index';
+
+export default function useOpenWebLink() {
+  const router = useRouter();
+
+  return function openWebLink() {
+    // 直接跳转链接
+    const target_link = getConfigField('WEB_LINK_AUDIO_LINK');
+    const open_mode = getConfigField('WEB_LINK_OPEN_MODE');
+
+    if (open_mode === 1) {
+      window.open(target_link);
+    } else {
+      // 页面嵌入：和
+      router.push({
+        path: '/chat/voice'
+      });
+    }
+  };
+}