AIGC应用平台+知识库模块

jeecgboot-vue3/src/views/super/airag/aiapp/chat/AiChatIcon.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="footer">
+    <div v-if="!showChat" class="footer-icon" @click="chatClick">
+      <Icon icon="ant-design:comment-outlined" size="22"></Icon>
+    </div>
+    <div v-if="showChat" class="footer-close-icon" @click="chatClick">
+      <Icon icon="ant-design:close-outlined" size="20"></Icon>
+    </div>
+    <div v-if="showChat" class="ai-chat">
+      <AiChat ref="aiChatRef"></AiChat>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import AiChat from './AiChat.vue';
+  import { useRouter } from 'vue-router';
+
+  //aiChat<61><74>ref
+  const aiChatRef = ref();
+  //Ӧ<><D3A6>id
+  const appId = ref<string>('');
+
+  //<2F>Ƿ<EFBFBD><C7B7><EFBFBD>ʾ<EFBFBD><CABE><EFBFBD><EFBFBD>
+  const showChat = ref<any>(false);
+  const router = useRouter();
+  //<2F>ж<EFBFBD><D0B6>Ƿ<EFBFBD>Ϊ<EFBFBD><CEAA>ʼ<EFBFBD><CABC>
+  const isInit = ref<boolean>(false);
+  
+  /**
+   * chatͼ<74><CDBC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>¼<EFBFBD>
+   */
+  function chatClick() {
+    showChat.value = !showChat.value;
+    if(showChat.value && !isInit.value){
+      setTimeout(()=>{
+        isInit.value = true;
+        aiChatRef.value.initChat(appId.value);
+      },100)
+    }
+  }
+
+  onMounted(() => {
+    let params: any = router.currentRoute.value.params;
+    appId.value = params?.appId;
+    isInit.value = false;
+  });
+</script>
+
+<style scoped lang="less">
+  .footer {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    left: unset;
+    top: unset;
+
+    .footer-icon {
+      cursor: pointer;
+      background-color: #155eef;
+      color: white;
+      border-radius: 100%;
+      padding: 20px;
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px 0;
+    }
+    .footer-close-icon {
+      color: #0a3069;
+      height: 48px;
+      position: absolute;
+      right: 10px;
+      top: 20px;
+      cursor: pointer;
+      z-index: 9999;
+    }
+    .ai-chat {
+      border: 1px solid #eeeeee;
+      width: calc(100vh - 20px);
+      height: calc(100vh - 200px);
+    }
+  }
+</style>