From 3df0de6532ad1c438acf24d739b980764b090271 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 27 Jun 2024 11:35:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=AE=B5=E8=90=BD=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat/ExecutionDetailDialog.vue         | 83 +++++++------------
 .../ai-chat/ParagraphSourceDialog.vue         | 49 +----------
 .../ai-chat/component/ParagraphCard.vue       | 58 +++++++++++++
 ui/src/views/application-workflow/index.vue   |  2 +-
 ui/src/workflow/common/CustomLine.vue         |  4 +-
 5 files changed, 95 insertions(+), 101 deletions(-)
 create mode 100644 ui/src/components/ai-chat/component/ParagraphCard.vue

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 386546c66..848691c05 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -1,5 +1,12 @@
 <template>
-  <el-dialog title="执行详情" v-model="dialogVisible" destroy-on-close align-center @click.stop>
+  <el-dialog
+    class="execution-details-dialog"
+    title="执行详情"
+    v-model="dialogVisible"
+    destroy-on-close
+    align-center
+    @click.stop
+  >
     <el-scrollbar>
       <div class="execution-details">
         <template v-for="(item, index) in arraySort(detail, 'index')" :key="index">
@@ -49,52 +56,7 @@
                             v-for="(paragraph, paragraphIndex) in item.paragraph_list"
                             :key="paragraphIndex"
                           >
-                            <CardBox
-                              shadow="never"
-                              :title="paragraph.title || '-'"
-                              class="paragraph-source-card cursor mb-8"
-                              :class="paragraph.is_active ? '' : 'disabled'"
-                              :showIcon="false"
-                            >
-                              <template #icon>
-                                <AppAvatar class="mr-12 avatar-light" :size="22">
-                                  {{ paragraphIndex + 1 + '' }}</AppAvatar
-                                >
-                              </template>
-                              <div class="active-button primary">
-                                {{ paragraph.similarity?.toFixed(3) }}
-                              </div>
-                              <template #description>
-                                <el-scrollbar height="150">
-                                  <MdPreview
-                                    ref="editorRef"
-                                    editorId="preview-only"
-                                    :modelValue="paragraph.content"
-                                  />
-                                </el-scrollbar>
-                              </template>
-                              <template #footer>
-                                <div class="footer-content flex-between">
-                                  <el-text>
-                                    <el-icon>
-                                      <Document />
-                                    </el-icon>
-                                    {{ paragraph?.document_name }}
-                                  </el-text>
-                                  <div class="flex align-center">
-                                    <AppAvatar class="mr-8" shape="square" :size="18">
-                                      <img
-                                        src="@/assets/icon_document.svg"
-                                        style="width: 58%"
-                                        alt=""
-                                      />
-                                    </AppAvatar>
-
-                                    <span class="ellipsis"> {{ paragraph?.dataset_name }}</span>
-                                  </div>
-                                </div>
-                              </template>
-                            </CardBox>
+                            <ParagraphCard :data="paragraph" :index="paragraphIndex" />
                           </template>
                         </template>
                         <template v-else> - </template>
@@ -193,6 +155,7 @@
 <script setup lang="ts">
 import { ref, watch, onBeforeUnmount } from 'vue'
 import { cloneDeep } from 'lodash'
+import ParagraphCard from './component/ParagraphCard.vue'
 import { arraySort } from '@/utils/utils'
 import { iconComponent } from '@/workflow/icons/utils'
 import { WorkflowType } from '@/enums/workflow'
@@ -219,10 +182,28 @@ onBeforeUnmount(() => {
 defineExpose({ open })
 </script>
 <style lang="scss">
-.execution-details {
-  max-height: calc(100vh - 260px);
-  .arrow-icon {
-    transition: 0.2s;
+.execution-details-dialog {
+  padding: 0;
+
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .execution-details {
+    max-height: calc(100vh - 260px);
+    .arrow-icon {
+      transition: 0.2s;
+    }
+  }
+}
+@media only screen and (max-width: 768px) {
+  .execution-details-dialog {
+    width: 90% !important;
+    .footer-content {
+      display: block;
+    }
   }
 }
 </style>
diff --git a/ui/src/components/ai-chat/ParagraphSourceDialog.vue b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
index 4543e92c3..4034c7cac 100644
--- a/ui/src/components/ai-chat/ParagraphSourceDialog.vue
+++ b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
@@ -19,46 +19,7 @@
             </el-form-item>
             <el-form-item label="引用分段">
               <template v-for="(item, index) in detail.paragraph_list" :key="index">
-                <CardBox
-                  shadow="never"
-                  :title="item.title || '-'"
-                  class="paragraph-source-card cursor mb-8"
-                  :class="item.is_active ? '' : 'disabled'"
-                  :showIcon="false"
-                >
-                  <template #icon>
-                    <AppAvatar class="mr-12 avatar-light" :size="22">
-                      {{ index + 1 + '' }}</AppAvatar
-                    >
-                  </template>
-                  <div class="active-button primary">{{ item.similarity?.toFixed(3) }}</div>
-                  <template #description>
-                    <el-scrollbar height="150">
-                      <MdPreview
-                        ref="editorRef"
-                        editorId="preview-only"
-                        :modelValue="item.content"
-                      />
-                    </el-scrollbar>
-                  </template>
-                  <template #footer>
-                    <div class="footer-content flex-between">
-                      <el-text>
-                        <el-icon>
-                          <Document />
-                        </el-icon>
-                        {{ item?.document_name }}
-                      </el-text>
-                      <div class="flex align-center">
-                        <AppAvatar class="mr-8" shape="square" :size="18">
-                          <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-                        </AppAvatar>
-
-                        <span class="ellipsis"> {{ item?.dataset_name }}</span>
-                      </div>
-                    </div>
-                  </template>
-                </CardBox>
+                <ParagraphCard :data="item" :index="index" />
               </template>
             </el-form-item>
           </el-form>
@@ -71,9 +32,9 @@
 import { ref, watch, onBeforeUnmount } from 'vue'
 import { cloneDeep } from 'lodash'
 import { arraySort } from '@/utils/utils'
+import ParagraphCard from './component/ParagraphCard.vue'
 const emit = defineEmits(['refresh'])
 
-const ParagraphDialogRef = ref()
 const dialogVisible = ref(false)
 const detail = ref<any>({})
 
@@ -109,9 +70,6 @@ defineExpose({ open })
   .paragraph-source-height {
     max-height: calc(100vh - 260px);
   }
-  .paragraph-source-card {
-    height: 260px;
-  }
 }
 @media only screen and (max-width: 768px) {
   .paragraph-source {
@@ -119,9 +77,6 @@ defineExpose({ open })
     .footer-content {
       display: block;
     }
-    .paragraph-source-card {
-      height: 285px;
-    }
   }
 }
 </style>
diff --git a/ui/src/components/ai-chat/component/ParagraphCard.vue b/ui/src/components/ai-chat/component/ParagraphCard.vue
new file mode 100644
index 000000000..104e66242
--- /dev/null
+++ b/ui/src/components/ai-chat/component/ParagraphCard.vue
@@ -0,0 +1,58 @@
+<template>
+  <CardBox
+    shadow="never"
+    :title="data.title || '-'"
+    class="paragraph-source-card cursor mb-8 paragraph-source-card-height"
+    :class="data.is_active ? '' : 'disabled'"
+    :showIcon="false"
+  >
+    <template #icon>
+      <AppAvatar class="mr-12 avatar-light" :size="22"> {{ index + 1 + '' }}</AppAvatar>
+    </template>
+    <div class="active-button primary">{{ data.similarity?.toFixed(3) }}</div>
+    <template #description>
+      <el-scrollbar height="150">
+        <MdPreview ref="editorRef" editorId="preview-only" :modelValue="data.content" />
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <div class="footer-content flex-between">
+        <el-text>
+          <el-icon>
+            <Document />
+          </el-icon>
+          {{ data?.document_name }}
+        </el-text>
+        <div class="flex align-center" style="line-height: 32px;">
+          <AppAvatar class="mr-8" shape="square" :size="18">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+
+          <span class="ellipsis"> {{ data?.dataset_name }}</span>
+        </div>
+      </div>
+    </template>
+  </CardBox>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  index: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+<style lang="scss" scoped>
+.paragraph-source-card-height {
+  height: 260px;
+}
+@media only screen and (max-width: 768px) {
+  .paragraph-source-card-height {
+      height: 285px;
+    }
+}
+</style>
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 6cffaf100..ca4bf1703 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -117,8 +117,8 @@ function publicHandle() {
         work_flow: getGraphData()
       }
       applicationApi.putPublishApplication(id as String, obj, loading).then(() => {
-        MsgSuccess('发布成功')
         getDetail()
+        MsgSuccess('发布成功')
       })
     })
     .catch((res: any) => {
diff --git a/ui/src/workflow/common/CustomLine.vue b/ui/src/workflow/common/CustomLine.vue
index 02747cf04..48146e5a9 100644
--- a/ui/src/workflow/common/CustomLine.vue
+++ b/ui/src/workflow/common/CustomLine.vue
@@ -2,8 +2,8 @@
   <div class="custom-edge cursor" @mouseup.stop @click.stop v-show="props.model.isHovered">
     <svg
       @click="deleteEdge"
-      width="100%"
-      height="100%"
+      width="22"
+      height="22"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"