From d1531fc593123024c816df9db5157334e3b96d64 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Jun 2024 13:31:40 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat/ExecutionDetailDialog.vue         | 83 +++++++++++++++++++
 ui/src/components/ai-chat/KnowledgeSource.vue | 21 ++++-
 ui/src/styles/app.scss                        |  4 +
 3 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/components/ai-chat/ExecutionDetailDialog.vue

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
new file mode 100644
index 000000000..39ca92b3b
--- /dev/null
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-dialog title="执行详情" v-model="dialogVisible" destroy-on-close append-to-body align-center>
+    <el-scrollbar>
+      <div class="paragraph-source-height">
+        <el-card class="mb-8" shadow="never" style="--el-card-padding: 12px 16px">
+          <div class="flex-between cursor">
+            <div class="flex align-center">
+              <el-icon class="mr-8"><CaretRight /></el-icon>
+              开始
+            </div>
+            <div class="flex align-center">
+              <span class="mr-16 color-secondary">6.01s</span>
+              <el-icon class="success" :size="16"><CircleCheck /></el-icon>
+            </div>
+          </div>
+          <el-collapse-transition>
+            <div class="card-never border-r-4 mt-8">
+              <div class="p-8-12">参数输入</div>
+              <div class="p-8-12 border-t-dashed lighter">如何快速开始</div>
+            </div>
+          </el-collapse-transition>
+        </el-card>
+      </div>
+    </el-scrollbar>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue'
+import { cloneDeep } from 'lodash'
+import { arraySort } from '@/utils/utils'
+import { MdPreview } from 'md-editor-v3'
+const emit = defineEmits(['refresh'])
+
+const dialogVisible = ref(false)
+const detail = ref<any>({})
+
+const current = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any, id?: string) => {
+  detail.value = cloneDeep(data)
+
+  dialogVisible.value = true
+}
+onBeforeUnmount(() => {
+  dialogVisible.value = false
+})
+defineExpose({ open })
+</script>
+<style lang="scss">
+.paragraph-source {
+  padding: 0;
+
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .paragraph-source-height {
+    max-height: calc(100vh - 260px);
+  }
+  .paragraph-source-card {
+    height: 260px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .paragraph-source {
+    width: 90% !important;
+    .footer-content {
+      display: block;
+    }
+    .paragraph-source-card {
+      height: 285px;
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/ai-chat/KnowledgeSource.vue b/ui/src/components/ai-chat/KnowledgeSource.vue
index e158e9271..2b49428b1 100644
--- a/ui/src/components/ai-chat/KnowledgeSource.vue
+++ b/ui/src/components/ai-chat/KnowledgeSource.vue
@@ -7,7 +7,7 @@
       引用分段 {{ data.paragraph_list?.length || 0 }}</el-button
     >
   </div>
-  <div class="mt-8 mb-12">
+  <div class="mt-8">
     <el-space wrap>
       <el-button
         v-for="(dataset, index) in data.dataset_list"
@@ -20,16 +20,25 @@
     </el-space>
   </div>
 
-  <div class="border-t color-secondary" style="padding-top: 12px">
-    <span class="mr-8"> 消耗 tokens: {{ data?.message_tokens + data?.answer_tokens }} </span>
-    <span> 耗时: {{ data?.run_time?.toFixed(2) }} s</span>
+  <div class="border-t color-secondary flex-between mt-12" style="padding-top: 12px">
+    <div>
+      <span class="mr-8"> 消耗 tokens: {{ data?.message_tokens + data?.answer_tokens }} </span>
+      <span> 耗时: {{ data?.run_time?.toFixed(2) }} s</span>
+    </div>
+    <el-button type="primary" link @click="openExecutionDetail(data)">
+      <el-icon class="mr-4"><Document /></el-icon>
+      执行详情</el-button
+    >
   </div>
   <!-- 知识库引用 dialog -->
   <ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
+  <!-- 执行详情 dialog -->
+  <ExecutionDetailDialog ref="ExecutionDetialDialogRef" />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import ParagraphSourceDialog from './ParagraphSourceDialog.vue'
+import ExecutionDetailDialog from './ExecutionDetailDialog.vue'
 
 const props = defineProps({
   data: {
@@ -39,9 +48,13 @@ const props = defineProps({
 })
 
 const ParagraphSourceDialogRef = ref()
+const ExecutionDetialDialogRef = ref()
 function openParagraph(row: any, id?: string) {
   ParagraphSourceDialogRef.value.open(row, id)
 }
+function openExecutionDetail(row: any, id?: string) {
+  ExecutionDetialDialogRef.value.open(row)
+}
 </script>
 <style lang="scss" scoped>
 .source_dataset-button {
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 46b3d2fec..a39ac0b48 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -288,6 +288,10 @@ h5 {
   border-radius: 4px;
 }
 
+.border-t-dashed {
+  border-top: 1px dashed var(--el-border-color);
+}
+
 .cursor {
   cursor: pointer;
 }

From d10c3e1c6c39017a78a421a6dc43817b169a16fa Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Jun 2024 15:25:40 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/application-workflow/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 5f48c1fc0..9ddbeb780 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -134,6 +134,7 @@ const clickShowDebug = () => {
       const workflow = new WorkFlowInstanse(graphData)
       try {
         workflow.is_valid()
+        getDetail()
         showDebug.value = true
       } catch (e: any) {
         MsgError(e.toString())

From 6c579bd6984684201540811d18c15b021c3b1194 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Jun 2024 16:05:46 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat/ExecutionDetailDialog.vue         | 66 +++++++------------
 ui/src/components/ai-chat/KnowledgeSource.vue | 16 ++++-
 ui/src/components/ai-chat/index.vue           |  2 +-
 ui/src/utils/application.ts                   |  4 ++
 ui/src/views/application-workflow/index.vue   |  1 +
 5 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 39ca92b3b..49234c0f8 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -2,24 +2,26 @@
   <el-dialog title="执行详情" v-model="dialogVisible" destroy-on-close append-to-body align-center>
     <el-scrollbar>
       <div class="paragraph-source-height">
-        <el-card class="mb-8" shadow="never" style="--el-card-padding: 12px 16px">
-          <div class="flex-between cursor">
-            <div class="flex align-center">
-              <el-icon class="mr-8"><CaretRight /></el-icon>
-              开始
+        <template v-for="(item, index) in arraySort(detail, 'index')" :key="index">
+          <el-card class="mb-8" shadow="never" style="--el-card-padding: 12px 16px">
+            <div class="flex-between cursor">
+              <div class="flex align-center">
+                <el-icon class="mr-8"><CaretRight /></el-icon>
+                开始
+              </div>
+              <div class="flex align-center">
+                <span class="mr-16 color-secondary">6.01s</span>
+                <el-icon class="success" :size="16"><CircleCheck /></el-icon>
+              </div>
             </div>
-            <div class="flex align-center">
-              <span class="mr-16 color-secondary">6.01s</span>
-              <el-icon class="success" :size="16"><CircleCheck /></el-icon>
-            </div>
-          </div>
-          <el-collapse-transition>
-            <div class="card-never border-r-4 mt-8">
-              <div class="p-8-12">参数输入</div>
-              <div class="p-8-12 border-t-dashed lighter">如何快速开始</div>
-            </div>
-          </el-collapse-transition>
-        </el-card>
+            <el-collapse-transition>
+              <div class="card-never border-r-4 mt-8">
+                <div class="p-8-12">参数输入</div>
+                <div class="p-8-12 border-t-dashed lighter">如何快速开始</div>
+              </div>
+            </el-collapse-transition>
+          </el-card>
+        </template>
       </div>
     </el-scrollbar>
   </el-dialog>
@@ -42,7 +44,7 @@ watch(dialogVisible, (bool) => {
   }
 })
 
-const open = (data: any, id?: string) => {
+const open = (data: any) => {
   detail.value = cloneDeep(data)
 
   dialogVisible.value = true
@@ -53,31 +55,7 @@ onBeforeUnmount(() => {
 defineExpose({ open })
 </script>
 <style lang="scss">
-.paragraph-source {
-  padding: 0;
-
-  .el-dialog__header {
-    padding: 24px 24px 0 24px;
-  }
-  .el-dialog__body {
-    padding: 8px !important;
-  }
-  .paragraph-source-height {
-    max-height: calc(100vh - 260px);
-  }
-  .paragraph-source-card {
-    height: 260px;
-  }
-}
-@media only screen and (max-width: 768px) {
-  .paragraph-source {
-    width: 90% !important;
-    .footer-content {
-      display: block;
-    }
-    .paragraph-source-card {
-      height: 285px;
-    }
-  }
+.paragraph-source-height {
+  max-height: calc(100vh - 260px);
 }
 </style>
diff --git a/ui/src/components/ai-chat/KnowledgeSource.vue b/ui/src/components/ai-chat/KnowledgeSource.vue
index 2b49428b1..7b9eeea05 100644
--- a/ui/src/components/ai-chat/KnowledgeSource.vue
+++ b/ui/src/components/ai-chat/KnowledgeSource.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex align-center mt-16">
+  <div class="flex align-center mt-16" v-if="!isWorkFlow(props.type)">
     <span class="mr-4 color-secondary">知识来源</span>
     <el-divider direction="vertical" />
     <el-button type="primary" class="mr-8" link @click="openParagraph(data)">
@@ -7,7 +7,7 @@
       引用分段 {{ data.paragraph_list?.length || 0 }}</el-button
     >
   </div>
-  <div class="mt-8">
+  <div class="mt-8" v-if="!isWorkFlow(props.type)">
     <el-space wrap>
       <el-button
         v-for="(dataset, index) in data.dataset_list"
@@ -25,7 +25,12 @@
       <span class="mr-8"> 消耗 tokens: {{ data?.message_tokens + data?.answer_tokens }} </span>
       <span> 耗时: {{ data?.run_time?.toFixed(2) }} s</span>
     </div>
-    <el-button type="primary" link @click="openExecutionDetail(data)">
+    <el-button
+      v-if="isWorkFlow(props.type)"
+      type="primary"
+      link
+      @click="openExecutionDetail(data.execution_details)"
+    >
       <el-icon class="mr-4"><Document /></el-icon>
       执行详情</el-button
     >
@@ -39,11 +44,16 @@
 import { ref } from 'vue'
 import ParagraphSourceDialog from './ParagraphSourceDialog.vue'
 import ExecutionDetailDialog from './ExecutionDetailDialog.vue'
+import { isWorkFlow } from '@/utils/application'
 
 const props = defineProps({
   data: {
     type: Object,
     default: () => {}
+  },
+  type: {
+    type: String,
+    default: ''
   }
 })
 
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index acf080c92..cb3bb1d76 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -75,7 +75,7 @@
                 <MdRenderer :source="item.answer_text"></MdRenderer>
                 <!-- 知识来源 -->
                 <div v-if="showSource(item)">
-                  <KnowledgeSource :data="item" />
+                  <KnowledgeSource :data="item" :type="props.data.type" />
                 </div>
               </el-card>
               <div class="flex-between mt-8" v-if="log">
diff --git a/ui/src/utils/application.ts b/ui/src/utils/application.ts
index b88917356..b66840bcc 100644
--- a/ui/src/utils/application.ts
+++ b/ui/src/utils/application.ts
@@ -4,3 +4,7 @@ export const defaultIcon = '/ui/favicon.ico'
 export function isAppIcon(url: string | undefined) {
   return url === defaultIcon ? '' : url
 }
+
+export function isWorkFlow(type: string) {
+  return type === 'WORK_FLOW'
+}
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 9ddbeb780..08b40dd13 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -87,6 +87,7 @@ import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'
 import { WorkFlowInstanse } from '@/workflow/common/validate'
+
 const { application } = useStore()
 const route = useRoute()
 

From 60a6ffddef8a6177daf22b46eb6506a7e082f34c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Jun 2024 16:29:01 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/ai-chat/ExecutionDetailDialog.vue         | 6 +++---
 ui/src/components/ai-chat/index.vue                         | 3 ++-
 ui/src/layout/components/breadcrumb/index.vue               | 4 ++--
 ui/src/layout/components/sidebar/SidebarItem.vue            | 6 +++---
 ui/src/utils/application.ts                                 | 2 +-
 .../views/application/component/CreateApplicationDialog.vue | 5 +++--
 ui/src/views/application/index.vue                          | 5 +----
 7 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 49234c0f8..45bfc9b1c 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -7,7 +7,7 @@
             <div class="flex-between cursor">
               <div class="flex align-center">
                 <el-icon class="mr-8"><CaretRight /></el-icon>
-                开始
+                {{ item && item.name }}
               </div>
               <div class="flex align-center">
                 <span class="mr-16 color-secondary">6.01s</span>
@@ -34,13 +34,13 @@ import { MdPreview } from 'md-editor-v3'
 const emit = defineEmits(['refresh'])
 
 const dialogVisible = ref(false)
-const detail = ref<any>({})
+const detail = ref<any[]>([])
 
 const current = ref('')
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
-    detail.value = {}
+    detail.value = []
   }
 })
 
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index cb3bb1d76..e753b6ee8 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -153,6 +153,7 @@ import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
 import useStore from '@/stores'
 import MdRenderer from '@/components/markdown-renderer/MdRenderer.vue'
+import { isWorkFlow } from '@/utils/application'
 import { MdPreview } from 'md-editor-v3'
 import { debounce } from 'lodash'
 defineOptions({ name: 'AiChat' })
@@ -335,7 +336,7 @@ function getChartOpenId(chat?: any) {
         }
       })
   } else {
-    if (obj.type === 'WORK_FLOW') {
+    if (isWorkFlow(obj.type)) {
       const submitObj = {
         work_flow: obj.work_flow
       }
diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
index 96476fcfb..4dcd41b6a 100644
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -120,7 +120,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
-import { isAppIcon } from '@/utils/application'
+import { isAppIcon, isWorkFlow } from '@/utils/application'
 import useStore from '@/stores'
 const { common, dataset, application } = useStore()
 const route = useRoute()
@@ -162,7 +162,7 @@ function changeMenu(id: string) {
     } else if (isApplication.value) {
       const type = list.value?.filter((v) => v.id === id)?.[0]?.type
       if (
-        type === 'WORK_FLOW' &&
+        isWorkFlow(type) &&
         (lastMatched.name === 'AppSetting' || lastMatched.name === 'AppHitTest')
       ) {
         router.push({ path: `/application/${id}/${type}/overview` })
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index 443bcb2aa..059166934 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
-
+import { isWorkFlow } from '@/utils/application'
 const props = defineProps<{
   menu: RouteRecordRaw
   activeMenu: any
@@ -30,7 +30,7 @@ const {
 } = route as any
 
 function showMenu() {
-  if (type === 'WORK_FLOW') {
+  if (isWorkFlow(type)) {
     return props.menu.name !== 'AppHitTest'
   } else {
     return true
@@ -38,7 +38,7 @@ function showMenu() {
 }
 
 function clickHandle(item: any) {
-  if (type === 'WORK_FLOW' && item.name === 'AppSetting') {
+  if (isWorkFlow(type) && item.name === 'AppSetting') {
     router.push({ path: `/application/${id}/workflow` })
   }
 }
diff --git a/ui/src/utils/application.ts b/ui/src/utils/application.ts
index b66840bcc..4666da70b 100644
--- a/ui/src/utils/application.ts
+++ b/ui/src/utils/application.ts
@@ -5,6 +5,6 @@ export function isAppIcon(url: string | undefined) {
   return url === defaultIcon ? '' : url
 }
 
-export function isWorkFlow(type: string) {
+export function isWorkFlow(type: string | undefined) {
   return type === 'WORK_FLOW'
 }
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
index 3806c6e50..e05b78e4b 100644
--- a/ui/src/views/application/component/CreateApplicationDialog.vue
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -49,7 +49,7 @@
               <el-card
                 shadow="never"
                 class="mb-16"
-                :class="applicationForm.type === 'WORK_FLOW' ? 'active' : ''"
+                :class="isWorkFlow(applicationForm.type) ? 'active' : ''"
               >
                 <el-radio value="WORK_FLOW" size="large">
                   <p class="mb-4">高级编排</p>
@@ -80,6 +80,7 @@ import type { ApplicationFormType } from '@/api/type/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import applicationApi from '@/api/application'
 import { MsgSuccess } from '@/utils/message'
+import { isWorkFlow } from '@/utils/application'
 import { t } from '@/locales'
 const router = useRouter()
 
@@ -174,7 +175,7 @@ const submitHandle = async (formEl: FormInstance | undefined) => {
       applicationApi.postApplication(applicationForm.value, loading).then((res) => {
         console.log(res)
         MsgSuccess(t('views.application.applicationForm.buttons.createSuccess'))
-        if (applicationForm.value.type === 'WORK_FLOW') {
+        if (isWorkFlow(applicationForm.value.type)) {
           router.push({ path: `/application/${res.data.id}/workflow` })
         } else {
           router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index ff4ea0dc5..f73431d0f 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -115,6 +115,7 @@ import CreateApplicationDialog from './component/CreateApplicationDialog.vue'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { isAppIcon } from '@/utils/application'
 import { useRouter } from 'vue-router'
+import { isWorkFlow } from '@/utils/application'
 import useStore from '@/stores'
 import { t } from '@/locales'
 const { application } = useStore()
@@ -133,10 +134,6 @@ const paginationConfig = reactive({
 
 const searchValue = ref('')
 
-function isWorkFlow(type: string) {
-  return type === 'WORK_FLOW'
-}
-
 function settingApplication(row: any) {
   if (isWorkFlow(row.type)) {
     router.push({ path: `/application/${row.id}/workflow` })

From fc92754e7b8bf437c580c5e4b8b0c45c5523e0d6 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Jun 2024 17:49:19 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat/ExecutionDetailDialog.vue         | 34 +++++++++++++------
 ui/src/components/ai-chat/KnowledgeSource.vue |  2 +-
 ui/src/enums/workflow.ts                      |  9 +++++
 ui/src/utils/utils.ts                         |  2 +-
 ui/src/views/application-workflow/index.vue   |  4 +--
 ui/src/workflow/common/NodeContainer.vue      |  3 +-
 ui/src/workflow/common/app-node.ts            |  5 +--
 ui/src/workflow/common/data.ts                | 31 +++++++++--------
 ui/src/workflow/common/validate.ts            | 16 +++++----
 ui/src/workflow/nodes/ai-chat-node/index.vue  |  1 +
 ui/src/workflow/nodes/question-node/index.vue |  1 +
 11 files changed, 68 insertions(+), 40 deletions(-)
 create mode 100644 ui/src/enums/workflow.ts

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 45bfc9b1c..2cbba13fa 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -1,22 +1,30 @@
 <template>
-  <el-dialog title="执行详情" v-model="dialogVisible" destroy-on-close append-to-body align-center>
+  <el-dialog title="执行详情" v-model="dialogVisible" destroy-on-close align-center @click.stop>
     <el-scrollbar>
-      <div class="paragraph-source-height">
+      <div class="execution-details">
         <template v-for="(item, index) in arraySort(detail, 'index')" :key="index">
           <el-card class="mb-8" shadow="never" style="--el-card-padding: 12px 16px">
-            <div class="flex-between cursor">
+            <div class="flex-between cursor" @click="current = index">
               <div class="flex align-center">
-                <el-icon class="mr-8"><CaretRight /></el-icon>
-                {{ item && item.name }}
+                <el-icon class="mr-8 arrow-icon" :class="current === index ? 'rotate-90' : ''"
+                  ><CaretRight
+                /></el-icon>
+                <component :is="iconComponent(`${item.type}-icon`)" class="mr-8" :size="24" />
+                <h4>{{ item.name }}</h4>
               </div>
               <div class="flex align-center">
-                <span class="mr-16 color-secondary">6.01s</span>
+                <span
+                  class="mr-16 color-secondary"
+                  v-if="item.type === WorkflowType.Question || item.type === WorkflowType.AiChat"
+                  >{{ item?.message_tokens + item?.answer_tokens }} tokens</span
+                >
+                <span class="mr-16 color-secondary">{{ item?.run_time?.toFixed(2) }} s</span>
                 <el-icon class="success" :size="16"><CircleCheck /></el-icon>
               </div>
             </div>
             <el-collapse-transition>
-              <div class="card-never border-r-4 mt-8">
-                <div class="p-8-12">参数输入</div>
+              <div class="card-never border-r-4 mt-8" v-if="current === index">
+                <h5 class="p-8-12">参数输入</h5>
                 <div class="p-8-12 border-t-dashed lighter">如何快速开始</div>
               </div>
             </el-collapse-transition>
@@ -30,13 +38,14 @@
 import { ref, watch, onBeforeUnmount } from 'vue'
 import { cloneDeep } from 'lodash'
 import { arraySort } from '@/utils/utils'
+import { iconComponent } from '@/workflow/icons/utils'
+import { WorkflowType } from '@/enums/workflow'
 import { MdPreview } from 'md-editor-v3'
-const emit = defineEmits(['refresh'])
 
 const dialogVisible = ref(false)
 const detail = ref<any[]>([])
 
-const current = ref('')
+const current = ref<number | string>('')
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -55,7 +64,10 @@ onBeforeUnmount(() => {
 defineExpose({ open })
 </script>
 <style lang="scss">
-.paragraph-source-height {
+.execution-details {
   max-height: calc(100vh - 260px);
+  .arrow-icon {
+    transition: 0.2s;
+  }
 }
 </style>
diff --git a/ui/src/components/ai-chat/KnowledgeSource.vue b/ui/src/components/ai-chat/KnowledgeSource.vue
index 7b9eeea05..51dbbb3a3 100644
--- a/ui/src/components/ai-chat/KnowledgeSource.vue
+++ b/ui/src/components/ai-chat/KnowledgeSource.vue
@@ -62,7 +62,7 @@ const ExecutionDetialDialogRef = ref()
 function openParagraph(row: any, id?: string) {
   ParagraphSourceDialogRef.value.open(row, id)
 }
-function openExecutionDetail(row: any, id?: string) {
+function openExecutionDetail(row: any) {
   ExecutionDetialDialogRef.value.open(row)
 }
 </script>
diff --git a/ui/src/enums/workflow.ts b/ui/src/enums/workflow.ts
new file mode 100644
index 000000000..3b3567553
--- /dev/null
+++ b/ui/src/enums/workflow.ts
@@ -0,0 +1,9 @@
+export enum WorkflowType {
+  Base = 'base-node',
+  Start = 'start-node',
+  AiChat = 'ai-chat-node',
+  SearchDataset = 'search-dataset-node',
+  Question = 'question-node',
+  Condition = 'condition-node',
+  Reply = 'reply-node'
+}
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
index 67448f519..818a18115 100644
--- a/ui/src/utils/utils.ts
+++ b/ui/src/utils/utils.ts
@@ -62,7 +62,7 @@ export function relatedObject(list: any, val: any, attr: string) {
 }
 
 // 排序
-export function arraySort(list: Array<string>, property: any, desc?: boolean) {
+export function arraySort(list: Array<any>, property: any, desc?: boolean) {
   return list.sort((a: any, b: any) => {
     return desc ? b[property] - a[property] : a[property] - b[property]
   })
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 08b40dd13..b0ae80ad8 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -29,7 +29,7 @@
         <h5 class="title">基础组件</h5>
         <template v-for="(item, index) in menuNodes" :key="index">
           <div class="workflow-dropdown-item cursor flex p-8-12" @mousedown="onmousedown(item)">
-            <component :is="iconComponent(item.icon)" class="mr-8 mt-4" :size="32" />
+            <component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" />
             <div class="pre-line">
               <div class="lighter">{{ item.label }}</div>
               <el-text type="info" size="small">{{ item.text }}</el-text>
@@ -244,7 +244,7 @@ onBeforeUnmount(() => {
 }
 
 .workflow-debug-container {
-  z-index: 10000;
+  z-index: 2000;
   position: relative;
   border-radius: 8px;
   border: 1px solid #ffffff;
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index a7d470cdf..25f9c4c5d 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -55,6 +55,7 @@
 import { ref } from 'vue'
 import { iconComponent } from '../icons/utils'
 import { copyClick } from '@/utils/clipboard'
+import { WorkflowType } from '@/enums/workflow'
 const height = ref<{
   stepContainerHeight: number
   inputContainerHeight: number
@@ -79,7 +80,7 @@ const props = defineProps<{
 }>()
 
 function showOperate(type: string) {
-  return type !== 'base-node' && type !== 'start-node'
+  return type !== WorkflowType.Base && type !== WorkflowType.Start
 }
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/workflow/common/app-node.ts b/ui/src/workflow/common/app-node.ts
index c54fb2b4c..c5955a79b 100644
--- a/ui/src/workflow/common/app-node.ts
+++ b/ui/src/workflow/common/app-node.ts
@@ -6,6 +6,7 @@ import { HtmlResize } from '@logicflow/extension'
 import { createApp, h } from 'vue'
 import directives from '@/directives'
 import i18n from '@/locales'
+import { WorkflowType } from '@/enums/workflow'
 
 class AppNode extends HtmlResize.view {
   isMounted
@@ -141,8 +142,8 @@ class AppNodeModel extends HtmlResize.model {
     const { id, x, y, width } = this
     const anchors: any = []
 
-    if (this.type !== 'base-node') {
-      if (this.type !== 'start-node') {
+    if (this.type !== WorkflowType.Base) {
+      if (this.type !== WorkflowType.Start) {
         anchors.push({
           x: x - width / 2 + 10,
           y: y,
diff --git a/ui/src/workflow/common/data.ts b/ui/src/workflow/common/data.ts
index 20abb418b..e56f823d4 100644
--- a/ui/src/workflow/common/data.ts
+++ b/ui/src/workflow/common/data.ts
@@ -1,11 +1,13 @@
+import { WorkflowType } from '@/enums/workflow'
+
 /**
  * 说明
  * type 与 nodes 文件对应
  */
 export const baseNodes = [
   {
-    id: 'base-node',
-    type: 'base-node',
+    id: WorkflowType.Base,
+    type: WorkflowType.Base,
     x: 200,
     y: 270,
     properties: {
@@ -20,8 +22,8 @@ export const baseNodes = [
     }
   },
   {
-    id: 'start-node',
-    type: 'start-node',
+    id: WorkflowType.Start,
+    type: WorkflowType.Start,
     x: 180,
     y: 720,
     properties: {
@@ -32,7 +34,7 @@ export const baseNodes = [
           label: '用户问题',
           value: 'question',
           globeLabel: '{{开始.question}}',
-          globeValue: "{{content['start-node'].question}}"
+          globeValue: `{{content['${WorkflowType.Start}'].question}}`
         }
       ]
     }
@@ -41,10 +43,9 @@ export const baseNodes = [
 
 export const menuNodes = [
   {
-    type: 'ai-chat-node',
+    type: WorkflowType.AiChat,
     text: '与 AI 大模型进行对话',
     label: 'AI 对话',
-    icon: 'ai-chat-node-icon',
     properties: {
       stepName: 'AI 对话',
       fields: [
@@ -56,10 +57,9 @@ export const menuNodes = [
     }
   },
   {
-    type: 'search-dataset-node',
+    type: WorkflowType.SearchDataset,
     text: '关联知识库，查找与问题相关的分段',
     label: '知识库检索',
-    icon: 'search-dataset-node-icon',
     properties: {
       stepName: '知识库检索',
       fields: [
@@ -77,10 +77,9 @@ export const menuNodes = [
     }
   },
   {
-    type: 'question-node',
+    type: WorkflowType.Question,
     text: '根据历史聊天记录优化完善当前问题，更利于匹配知识库分段',
     label: '问题优化',
-    icon: 'question-node-icon',
     properties: {
       stepName: '问题优化',
       fields: [
@@ -92,20 +91,18 @@ export const menuNodes = [
     }
   },
   {
-    type: 'condition-node',
+    type: WorkflowType.Condition,
     text: '根据不同条件执行不同的节点',
     label: '判断器',
-    icon: 'condition-node-icon',
     properties: {
       width: 600,
       stepName: '判断器'
     }
   },
   {
-    type: 'reply-node',
+    type: WorkflowType.Reply,
     text: '指定回复内容，引用变量会转换为字符串进行输出',
     label: '指定回复',
-    icon: 'reply-node-icon',
     properties: {
       stepName: '指定回复'
     }
@@ -125,3 +122,7 @@ export const compareList = [
   { value: 'len_lt', label: '长度小于' },
   { value: 'lt', label: '小于' }
 ]
+
+export function isWorkFlow(type: string | undefined) {
+  return type === 'WORK_FLOW'
+}
diff --git a/ui/src/workflow/common/validate.ts b/ui/src/workflow/common/validate.ts
index a5459c910..24a96a7c1 100644
--- a/ui/src/workflow/common/validate.ts
+++ b/ui/src/workflow/common/validate.ts
@@ -1,4 +1,6 @@
-const end_nodes = ['ai-chat-node', 'reply-node']
+import { WorkflowType } from '@/enums/workflow'
+
+const end_nodes = [WorkflowType.AiChat, WorkflowType.Reply]
 export class WorkFlowInstanse {
   nodes
   edges
@@ -10,7 +12,7 @@ export class WorkFlowInstanse {
    * 校验开始节点
    */
   private is_valid_start_node() {
-    const start_node_list = this.nodes.filter((item) => item.id === 'start-node')
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Start)
     if (start_node_list.length == 0) {
       throw '开始节点必填'
     } else if (start_node_list.length > 1) {
@@ -21,7 +23,7 @@ export class WorkFlowInstanse {
    * 校验基本信息节点
    */
   private is_valid_base_node() {
-    const start_node_list = this.nodes.filter((item) => item.id === 'base-node')
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Base)
     if (start_node_list.length == 0) {
       throw '基本信息节点必填'
     } else if (start_node_list.length > 1) {
@@ -43,7 +45,7 @@ export class WorkFlowInstanse {
    * @returns
    */
   get_start_node() {
-    const start_node_list = this.nodes.filter((item) => item.id === 'start-node')
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Start)
     return start_node_list[0]
   }
   /**
@@ -51,7 +53,7 @@ export class WorkFlowInstanse {
    * @returns 基本节点
    */
   get_base_node() {
-    const base_node_list = this.nodes.filter((item) => item.id === 'base-node')
+    const base_node_list = this.nodes.filter((item) => item.id === WorkflowType.Base)
     return base_node_list[0]
   }
 
@@ -86,7 +88,7 @@ export class WorkFlowInstanse {
   }
   private is_valid_nodes() {
     for (const node of this.nodes) {
-      if (node.type !== 'base-node' && node.type !== 'start-node') {
+      if (node.type !== WorkflowType.Base && node.type !== WorkflowType.Start) {
         console.log(node.properties.stepName)
         if (!this.edges.some((edge) => edge.targetNodeId === node.id)) {
           throw `未在流程中的节点:${node.properties.stepName}`
@@ -99,7 +101,7 @@ export class WorkFlowInstanse {
    * @param node 节点
    */
   private is_valid_node(node: any) {
-    if (node.type === 'condition-node') {
+    if (node.type === WorkflowType.Condition) {
       const branch_list = node.properties.node_data.branch
       for (const branch of branch_list) {
         const source_anchor_id = `${node.id}_${branch.id}_right`
diff --git a/ui/src/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
index f48537d61..bd64db2d2 100644
--- a/ui/src/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@@ -8,6 +8,7 @@
         @mousedown.stop
         @keydown.stop
         @click.stop
+        @wheel.stop
         :model="chat_data"
         label-position="top"
         require-asterisk-position="right"
diff --git a/ui/src/workflow/nodes/question-node/index.vue b/ui/src/workflow/nodes/question-node/index.vue
index de4c0ca89..c9895fe23 100644
--- a/ui/src/workflow/nodes/question-node/index.vue
+++ b/ui/src/workflow/nodes/question-node/index.vue
@@ -8,6 +8,7 @@
         @mousedown.stop
         @keydown.stop
         @click.stop
+        @wheel.stop
         :model="form_data"
         label-position="top"
         require-asterisk-position="right"