From 2e1a9aee10140d3161be3e5d334a88d9d8352b78 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 30 May 2024 18:27:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E7=BC=96=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/app-avatar/index.vue        |  1 +
 ui/src/directives/clickoutside.ts             |  7 +++
 ui/src/styles/app.scss                        |  3 ++
 ui/src/views/application-workflow/index.vue   | 43 ++++++++++++++++++-
 ui/src/views/chat/embed/index.vue             | 13 ++----
 .../dataset/component/UploadComponent.vue     |  4 +-
 ui/src/views/dataset/step/ResultSuccess.vue   |  8 ++--
 .../team/component/PermissionSetting.vue      |  9 +---
 8 files changed, 64 insertions(+), 24 deletions(-)
 create mode 100644 ui/src/directives/clickoutside.ts

diff --git a/ui/src/components/app-avatar/index.vue b/ui/src/components/app-avatar/index.vue
index b267d404a..0df1cbbc2 100644
--- a/ui/src/components/app-avatar/index.vue
+++ b/ui/src/components/app-avatar/index.vue
@@ -2,6 +2,7 @@
   <el-avatar
     :size="30"
     :style="{ background: props.pinyinColor && getAvatarColour(firstUserName) }"
+    style="flex-shrink: 0"
     v-bind="$attrs"
   >
     <slot> {{ firstUserName }} </slot>
diff --git a/ui/src/directives/clickoutside.ts b/ui/src/directives/clickoutside.ts
new file mode 100644
index 000000000..0e93cf7a9
--- /dev/null
+++ b/ui/src/directives/clickoutside.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue'
+import { ClickOutside as vClickOutside } from 'element-plus'
+export default {
+  install: (app: App) => {
+    app.directive('click-outside', vClickOutside)
+  }
+}
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 0e15126dc..b8277844e 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -111,6 +111,9 @@ h4 {
 .w-240 {
   width: 240px;
 }
+.w-280 {
+  width: 280px;
+}
 .w-500 {
   width: 500px;
 }
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index e640729a2..ea3fe0ab3 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -6,11 +6,28 @@
         <h4>创建应用</h4>
       </div>
       <div>
-        <el-button> 添加组件 </el-button>
+        <el-button icon="Plus" @click="showPopover = !showPopover" v-click-outside="clickoutside">
+          添加组件
+        </el-button>
         <el-button> 调试 </el-button>
         <el-button type="primary"> 保存 </el-button>
       </div>
     </div>
+    <!-- 下拉框 -->
+    <el-collapse-transition>
+      <div v-show="showPopover" class="workflow-dropdown-menu border">
+        <p class="title">基础组件</p>
+        <div class="flex p-16">
+          <AppAvatar class="mr-8 mt-4" shape="square" :size="32">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+          <div class="pre-line">
+            <div>通用型</div>
+            <el-text type="info" size="small">可以通过上传文件或手动录入方式构建知识库</el-text>
+          </div>
+        </div>
+      </div>
+    </el-collapse-transition>
     <div class="workflow-main">
       <workflow />
     </div>
@@ -21,11 +38,17 @@ import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 
 import Workflow from '@/components/workflow/index.vue'
 
+const showPopover = ref(false)
+
+function clickoutside() {
+  showPopover.value = false
+}
+
 onMounted(() => {})
 
 onBeforeUnmount(() => {})
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .application-workflow {
   .header {
     background: #ffffff;
@@ -34,5 +57,21 @@ onBeforeUnmount(() => {})
     width: 100vw;
     height: calc(100vh - var(--app-header-height) - 70px);
   }
+  .workflow-dropdown-menu {
+    position: absolute;
+    top: 110px;
+    right: 24px;
+    z-index: 99;
+    width: 240px;
+    box-shadow: 0px 4px 8px 0px #1f23291a;
+    background: #ffffff;
+    border-radius: 4px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      padding: 8px 12px 0;
+    }
+  }
 }
 </style>
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index 572a2a916..35c1941aa 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-embed" v-loading="loading" @click="closePopover($event)">
+  <div class="chat-embed" v-loading="loading">
     <div class="chat-embed__header">
       <div class="chat-width">
         <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
@@ -27,7 +27,7 @@
     </div>
 
     <el-collapse-transition>
-      <div v-show="show" class="chat-popover w-full" id="chat-popover">
+      <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
         <div class="border-b p-16-24">
           <span>历史记录</span>
         </div>
@@ -104,13 +104,8 @@ function handleScroll(event: any) {
   }
 }
 
-function closePopover(event: any) {
-  const popover = document.getElementById('chat-popover')
-  if (popover) {
-    if (!popover.contains(event.target)) {
-      show.value = false
-    }
-  }
+function clickoutside() {
+  show.value = false
 }
 
 function newChat() {
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index 4cc3779ed..3c35c2c3f 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -90,7 +90,9 @@
               <img :src="getImgUrl(item && item?.name)" alt="" width="40" />
               <div class="ml-8">
                 <p>{{ item && item?.name }}</p>
-                <el-text type="info">{{ filesize(item && item?.size) || '0K' }}</el-text>
+                <el-text type="info" size="small">{{
+                  filesize(item && item?.size) || '0K'
+                }}</el-text>
               </div>
             </div>
             <el-button text @click="deleteFile(index)">
diff --git a/ui/src/views/dataset/step/ResultSuccess.vue b/ui/src/views/dataset/step/ResultSuccess.vue
index 6d571cab9..d8ed40c6f 100644
--- a/ui/src/views/dataset/step/ResultSuccess.vue
+++ b/ui/src/views/dataset/step/ResultSuccess.vue
@@ -30,10 +30,10 @@
       >
         <div class="flex-between">
           <div class="flex">
-            <img :src="getImgUrl(item && item?.name)" alt="" width="40"/>
+            <img :src="getImgUrl(item && item?.name)" alt="" width="40" />
             <div class="ml-8">
               <p>{{ item && item?.name }}</p>
-              <el-text type="info">{{ filesize(item && item?.char_length) }}</el-text>
+              <el-text type="info" size="small">{{ filesize(item && item?.char_length) }}</el-text>
             </div>
           </div>
           <div>
@@ -65,8 +65,8 @@ const props = defineProps({
   }
 })
 const router = useRouter()
-const paragraph_count = computed(
-  () => props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.paragraph_count), 0)
+const paragraph_count = computed(() =>
+  props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.paragraph_count), 0)
 )
 
 const char_length = computed(
diff --git a/ui/src/views/team/component/PermissionSetting.vue b/ui/src/views/team/component/PermissionSetting.vue
index b13dbab39..1f1924b53 100644
--- a/ui/src/views/team/component/PermissionSetting.vue
+++ b/ui/src/views/team/component/PermissionSetting.vue
@@ -18,15 +18,8 @@
               class="mr-12"
               shape="square"
               :size="24"
-              style="flex-shrink: 0"
             />
-            <AppAvatar
-              v-else-if="isDataset"
-              class="mr-12"
-              shape="square"
-              :size="24"
-              style="flex-shrink: 0"
-            >
+            <AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
             </AppAvatar>
             <auto-tooltip :content="row?.name">