From cdc5fae4777c87ea8a0ee018bfbc940f90496ed8 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 5 Dec 2025 16:37:59 +0800
Subject: [PATCH] feat: Execution records and details function

---
 .../assets/workflow/icon_knowledge-base.svg   |  3 +
 ui/src/components/app-icon/KnowledgeIcon.vue  |  2 +-
 ui/src/styles/app.scss                        |  4 +
 .../component/action/Result.vue               | 11 ++-
 .../ExecutionDetailDrawer.vue                 | 63 ++++++++-------
 .../ExecutionRecordDrawer.vue                 | 76 ++++++++++++++++++-
 ui/src/views/knowledge/KnowledgeSetting.vue   |  2 +-
 .../component/KnowledgeListContainer.vue      |  2 +-
 ui/src/workflow/icons/base-node-icon.vue      |  2 +-
 .../icons/knowledge-base-node-icon.vue        |  4 +-
 ui/src/workflow/icons/reply-node-icon.vue     |  2 +-
 .../icons/speech-to-text-node-icon.vue        |  2 +-
 .../icons/text-to-speech-node-icon.vue        |  2 +-
 13 files changed, 128 insertions(+), 47 deletions(-)
 create mode 100644 ui/src/assets/workflow/icon_knowledge-base.svg

diff --git a/ui/src/assets/workflow/icon_knowledge-base.svg b/ui/src/assets/workflow/icon_knowledge-base.svg
new file mode 100644
index 000000000..a7ea575c8
--- /dev/null
+++ b/ui/src/assets/workflow/icon_knowledge-base.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.31251 1.875H13.4375C13.4785 1.875 13.5192 1.88308 13.5571 1.89878C13.595 1.91449 13.6295 1.9375 13.6585 1.96652C13.6875 1.99554 13.7105 2.02999 13.7262 2.0679C13.7419 2.10582 13.75 2.14646 13.75 2.18749V2.8125C13.75 2.85354 13.7419 2.89418 13.7262 2.93209C13.7105 2.97 13.6875 3.00445 13.6585 3.03347C13.6295 3.06249 13.595 3.08551 13.5571 3.10121C13.5192 3.11692 13.4785 3.125 13.4375 3.12499H5.31251C5.27147 3.125 5.23083 3.11692 5.19292 3.10121C5.155 3.08551 5.12055 3.06249 5.09153 3.03347C5.06251 3.00445 5.03949 2.97 5.02379 2.93209C5.00808 2.89418 5 2.85354 5 2.8125V2.18749C5 2.14646 5.00808 2.10582 5.02379 2.0679C5.03949 2.02999 5.06251 1.99554 5.09153 1.96652C5.12055 1.9375 5.155 1.91449 5.19292 1.89878C5.23083 1.88308 5.27147 1.875 5.31251 1.875ZM5.31251 6.875H13.4375C13.4785 6.87499 13.5192 6.88308 13.5571 6.89878C13.595 6.91448 13.6295 6.9375 13.6585 6.96652C13.6875 6.99554 13.7105 7.02999 13.7262 7.06791C13.7419 7.10583 13.75 7.14646 13.75 7.1875V7.8125C13.75 7.85354 13.7419 7.89417 13.7262 7.93209C13.7105 7.97001 13.6875 8.00446 13.6585 8.03348C13.6295 8.0625 13.595 8.08552 13.5571 8.10122C13.5192 8.11693 13.4785 8.12501 13.4375 8.125H5.31251C5.27147 8.12501 5.23083 8.11693 5.19292 8.10122C5.155 8.08552 5.12055 8.0625 5.09153 8.03348C5.06251 8.00446 5.03949 7.97001 5.02378 7.93209C5.00808 7.89417 5 7.85354 5 7.8125V7.1875C5 7.14646 5.00808 7.10583 5.02378 7.06791C5.03949 7.02999 5.06251 6.99554 5.09153 6.96652C5.12055 6.9375 5.155 6.91448 5.19292 6.89878C5.23083 6.88308 5.27147 6.87499 5.31251 6.875ZM1.56251 6.875H3.43751C3.47855 6.875 3.51919 6.88308 3.5571 6.89878C3.59501 6.91449 3.62946 6.93751 3.65848 6.96653C3.6875 6.99555 3.71052 7.03 3.72622 7.06791C3.74193 7.10583 3.75001 7.14647 3.75001 7.1875V7.8125C3.75001 7.85353 3.74193 7.89417 3.72622 7.93209C3.71052 7.97 3.6875 8.00445 3.65848 8.03347C3.62946 8.06249 3.59501 8.08551 3.5571 8.10122C3.51919 8.11692 3.47855 8.125 3.43751 8.125H1.56251C1.52147 8.12501 1.48083 8.11693 1.44292 8.10122C1.405 8.08552 1.37055 8.0625 1.34153 8.03348C1.31251 8.00446 1.28949 7.97001 1.27378 7.93209C1.25808 7.89417 1.25 7.85354 1.25 7.8125V7.1875C1.25 7.14646 1.25808 7.10583 1.27378 7.06791C1.28949 7.02999 1.31251 6.99554 1.34153 6.96652C1.37055 6.9375 1.405 6.91448 1.44292 6.89878C1.48083 6.88308 1.52147 6.87499 1.56251 6.875ZM1.56251 1.875H3.43751C3.47855 1.875 3.51918 1.88308 3.5571 1.89879C3.59501 1.91449 3.62946 1.93751 3.65848 1.96653C3.6875 1.99555 3.71051 2.02999 3.72622 2.06791C3.74192 2.10582 3.75001 2.14646 3.75001 2.18749V2.8125C3.75001 2.89538 3.71708 2.97486 3.65848 3.03347C3.59987 3.09207 3.52039 3.12499 3.43751 3.12499H1.56251C1.52147 3.125 1.48083 3.11692 1.44292 3.10121C1.405 3.08551 1.37055 3.06249 1.34153 3.03347C1.31251 3.00445 1.28949 2.97 1.27379 2.93209C1.25808 2.89418 1.25 2.85354 1.25 2.8125V2.18749C1.25 2.14646 1.25808 2.10582 1.27379 2.0679C1.28949 2.02999 1.31251 1.99554 1.34153 1.96652C1.37055 1.9375 1.405 1.91449 1.44292 1.89878C1.48083 1.88308 1.52147 1.875 1.56251 1.875ZM1.56251 11.875H3.43751C3.47855 11.875 3.51918 11.8831 3.5571 11.8988C3.59501 11.9145 3.62946 11.9375 3.65848 11.9665C3.6875 11.9956 3.71051 12.03 3.72622 12.0679C3.74192 12.1058 3.75001 12.1465 3.75001 12.1875V12.8125C3.75001 12.8954 3.71708 12.9749 3.65848 13.0335C3.59987 13.0921 3.52039 13.125 3.43751 13.125H1.56251C1.52147 13.125 1.48083 13.1169 1.44292 13.1012C1.405 13.0855 1.37055 13.0625 1.34153 13.0335C1.31251 13.0045 1.28949 12.97 1.27379 12.9321C1.25808 12.8942 1.25 12.8535 1.25 12.8125V12.1875C1.25 12.1465 1.25808 12.1058 1.27379 12.0679C1.28949 12.03 1.31251 11.9955 1.34153 11.9665C1.37055 11.9375 1.405 11.9145 1.44292 11.8988C1.48083 11.8831 1.52147 11.875 1.56251 11.875ZM5.31251 11.875H13.4375C13.4785 11.875 13.5192 11.8831 13.5571 11.8988C13.595 11.9145 13.6295 11.9375 13.6585 11.9665C13.6875 11.9955 13.7105 12.03 13.7262 12.0679C13.7419 12.1058 13.75 12.1465 13.75 12.1875V12.8125C13.75 12.8535 13.7419 12.8942 13.7262 12.9321C13.7105 12.97 13.6875 13.0045 13.6585 13.0335C13.6295 13.0625 13.595 13.0855 13.5571 13.1012C13.5192 13.1169 13.4785 13.125 13.4375 13.125H5.31251C5.27147 13.125 5.23083 13.1169 5.19292 13.1012C5.155 13.0855 5.12055 13.0625 5.09153 13.0335C5.06251 13.0045 5.03949 12.97 5.02379 12.9321C5.00808 12.8942 5 12.8535 5 12.8125V12.1875C5 12.1465 5.00808 12.1058 5.02379 12.0679C5.03949 12.03 5.06251 11.9955 5.09153 11.9665C5.12055 11.9375 5.155 11.9145 5.19292 11.8988C5.23083 11.8831 5.27147 11.875 5.31251 11.875Z" fill="white"/>
+</svg>
diff --git a/ui/src/components/app-icon/KnowledgeIcon.vue b/ui/src/components/app-icon/KnowledgeIcon.vue
index 43e707151..cc5508397 100644
--- a/ui/src/components/app-icon/KnowledgeIcon.vue
+++ b/ui/src/components/app-icon/KnowledgeIcon.vue
@@ -13,7 +13,7 @@
   </el-avatar>
   <el-avatar
     v-else-if="type == 4"
-    class="avatar-purple"
+    class="avatar-orange"
     shape="square"
     :size="size"
   >
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 911802053..c98483900 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -428,6 +428,10 @@ h5 {
   background: #3370ff;
 }
 
+.avatar-orange {
+  background: #ff8800;
+}
+
 .layout-bg {
   background: var(--app-layout-bg-color);
 }
diff --git a/ui/src/views/knowledge-workflow/component/action/Result.vue b/ui/src/views/knowledge-workflow/component/action/Result.vue
index 7f5b998e3..77188ad2b 100644
--- a/ui/src/views/knowledge-workflow/component/action/Result.vue
+++ b/ui/src/views/knowledge-workflow/component/action/Result.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onUnmounted, ref, computed } from 'vue'
+import { onUnmounted, ref, computed, watch } from 'vue'
 
 import ExecutionDetailContent from '@/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue'
 import { useRoute } from 'vue-router'
@@ -83,6 +83,15 @@ const stopPolling = () => {
 
 // 启动轮询
 pollingTimer = setTimeout(getKnowledgeWorkflowAction, 0)
+
+watch(
+  () => props.id,
+  () => {
+    stopPolling()
+    pollingTimer = setTimeout(getKnowledgeWorkflowAction, 0)
+  },
+)
+
 onUnmounted(() => {
   stopPolling()
 })
diff --git a/ui/src/views/knowledge-workflow/component/execution-record/ExecutionDetailDrawer.vue b/ui/src/views/knowledge-workflow/component/execution-record/ExecutionDetailDrawer.vue
index 2b4750502..9b187538a 100644
--- a/ui/src/views/knowledge-workflow/component/execution-record/ExecutionDetailDrawer.vue
+++ b/ui/src/views/knowledge-workflow/component/execution-record/ExecutionDetailDrawer.vue
@@ -28,16 +28,22 @@
           <el-row :gutter="16" class="lighter">
             <el-col :span="6">
               <p class="color-secondary mb-4">{{ $t('workflow.initiator') }}</p>
-              <p>{{ detail?.meta.user_name || '-' }}</p>
+              <p>{{ props.currentContent?.meta.user_name || '-' }}</p>
             </el-col>
             <el-col :span="6">
               <p class="color-secondary mb-4">{{ $t('common.status.label') }}</p>
               <p>
-                <el-text class="color-text-primary" v-if="detail?.state === 'SUCCESS'">
+                <el-text
+                  class="color-text-primary"
+                  v-if="props.currentContent?.state === 'SUCCESS'"
+                >
                   <el-icon class="color-success"><SuccessFilled /></el-icon>
                   {{ $t('common.status.success') }}
                 </el-text>
-                <el-text class="color-text-primary" v-else-if="detail?.state === 'FAILURE'">
+                <el-text
+                  class="color-text-primary"
+                  v-else-if="props.currentContent?.state === 'FAILURE'"
+                >
                   <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
                   {{ $t('common.status.fail') }}
                 </el-text>
@@ -49,15 +55,26 @@
             </el-col>
             <el-col :span="6">
               <p class="color-secondary mb-4">{{ $t('chat.KnowledgeSource.consumeTime') }}</p>
-              <p>{{ detail?.run_time != undefined ? detail?.run_time + 's' : '-' }}</p>
+              <p>
+                {{
+                  props.currentContent?.run_time != undefined
+                    ? props.currentContent?.run_time + 's'
+                    : '-'
+                }}
+              </p>
             </el-col>
             <el-col :span="6">
               <p class="color-secondary mb-4">{{ $t('chat.executionDetails.createTime') }}</p>
-              <p>{{ datetimeFormat(detail?.create_time) }}</p>
+              <p>{{ datetimeFormat(props.currentContent?.create_time) }}</p>
             </el-col>
           </el-row>
         </el-card>
-        <Result :knowledge_id="knowledge_id" :id="action_id" is-record />
+        <Result
+          :knowledge_id="props.currentContent.knowledge_id"
+          :id="currentId"
+          is-record
+          v-if="props.currentContent"
+        />
       </el-scrollbar>
     </div>
     <template #footer>
@@ -82,10 +99,10 @@ import { t } from '@/locales'
 const props = withDefaults(
   defineProps<{
     /**
-     * 当前的id
+     * 当前的action_id
      */
     currentId: string
-    currentContent: string
+    currentContent: any
     /**
      * 下一条
      */
@@ -102,7 +119,7 @@ const props = withDefaults(
   {},
 )
 
-const emit = defineEmits(['update:currentId', 'update:currentContent', 'refresh'])
+const emit = defineEmits(['update:currentId', 'update:currentContent'])
 
 const route = useRoute()
 
@@ -118,42 +135,22 @@ const apiType = computed(() => {
 
 const loading = ref(false)
 const visible = ref(false)
-const action_id = ref<string>('')
-const knowledge_id = ref<string>('')
-const detail = ref<any>(null)
 
-function closeHandle() {
-  action_id.value = ''
-  knowledge_id.value = ''
-  detail.value = null
-}
-
-function getRecord() {
-  if (props.currentId && visible.value) {
-  }
-}
+function closeHandle() {}
 
 watch(
   () => props.currentId,
-  () => {
-    action_id.value = ''
-    knowledge_id.value = ''
-    detail.value = null
-  },
+  () => {},
 )
 
 watch(visible, (bool) => {
   if (!bool) {
     emit('update:currentId', '')
-    emit('update:currentContent', '')
-    emit('refresh')
+    emit('update:currentContent', null)
   }
 })
 
-const open = (row: any) => {
-  action_id.value = row.id
-  knowledge_id.value = row.knowledge_id
-  detail.value = row
+const open = () => {
   visible.value = true
 }
 
diff --git a/ui/src/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue b/ui/src/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue
index 711149fab..f5d5fed3b 100644
--- a/ui/src/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue
+++ b/ui/src/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue
@@ -47,6 +47,7 @@
       @changePage="changePage"
       :maxTableHeight="150"
       :paginationConfig="paginationConfig"
+      :row-class-name="setRowClass"
     >
       <el-table-column prop="user_name" :label="$t('workflow.initiator')">
         <template #default="{ row }">
@@ -94,7 +95,15 @@
         </template>
       </el-table-column>
     </app-table-infinite-scroll>
-    <ExecutionDetailDrawer ref="ExecutionDetailDrawerRef" />
+    <ExecutionDetailDrawer
+      ref="ExecutionDetailDrawerRef"
+      v-model:currentId="currentId"
+      v-model:currentContent="currentContent"
+      :next="nextRecord"
+      :pre="preRecord"
+      :pre_disable="pre_disable"
+      :next_disable="next_disable"
+    />
   </el-drawer>
 </template>
 <script setup lang="ts">
@@ -104,6 +113,7 @@ import ExecutionDetailDrawer from './ExecutionDetailDrawer.vue'
 import { computed, ref, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { datetimeFormat } from '@/utils/time'
+import type { Dict } from '@/api/type/common'
 const drawer = ref<boolean>(false)
 const route = useRoute()
 
@@ -118,7 +128,7 @@ const apiType = computed(() => {
 })
 const paginationConfig = reactive({
   current_page: 1,
-  page_size: 50,
+  page_size: 10,
   total: 0,
 })
 const query = ref<any>({
@@ -129,10 +139,22 @@ const loading = ref(false)
 const filter_type = ref<string>('user_name')
 const active_knowledge_id = ref<string>('')
 const data = ref<Array<any>>([])
+const tableIndexMap = computed<Dict<number>>(() => {
+  return data.value
+    .map((row, index) => ({
+      [row.id]: index,
+    }))
+    .reduce((pre, next) => ({ ...pre, ...next }), {})
+})
 const ExecutionDetailDrawerRef = ref<any>()
+const currentId = ref<string>('')
+const currentContent = ref<string>('')
 
 const toDetails = (row: any) => {
-  ExecutionDetailDrawerRef.value.open(row)
+  currentContent.value = row
+  currentId.value = row.id
+
+  ExecutionDetailDrawerRef.value?.open()
 }
 
 const changeFilterHandle = () => {
@@ -144,13 +166,59 @@ const changePage = () => {
 }
 
 const getList = () => {
-  loadSharedApi({ type: 'knowledge', systemType: apiType.value })
+  return loadSharedApi({ type: 'knowledge', systemType: apiType.value })
     .getWorkflowActionPage(active_knowledge_id.value, paginationConfig, query.value, loading)
     .then((ok: any) => {
       paginationConfig.total = ok.data?.total
       data.value = data.value.concat(ok.data.records)
     })
 }
+
+const setRowClass = ({ row }: any) => {
+  return currentId.value === row?.id ? 'highlight' : ''
+}
+
+/**
+ * 下一页
+ */
+const nextRecord = () => {
+  const index = tableIndexMap.value[currentId.value] + 1
+  if (index >= data.value.length) {
+    if (index >= paginationConfig.total - 1) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page + 1
+    getList().then(() => {
+      currentId.value = data.value[index].id
+      currentContent.value = data.value[index]
+    })
+  } else {
+    currentId.value = data.value[index].id
+    currentContent.value = data.value[index]
+  }
+}
+const pre_disable = computed(() => {
+  const index = tableIndexMap.value[currentId.value] - 1
+  return index < 0
+})
+
+const next_disable = computed(() => {
+  const index = tableIndexMap.value[currentId.value] + 1
+  return index >= data.value.length && index >= paginationConfig.total - 1
+})
+/**
+ * 上一页
+ */
+const preRecord = () => {
+  const index = tableIndexMap.value[currentId.value] - 1
+  console.log('index', index)
+
+  if (index >= 0) {
+    currentId.value = data.value[index].id
+    currentContent.value = data.value[index]
+  }
+}
+
 const open = (knowledge_id: string) => {
   active_knowledge_id.value = knowledge_id
   getList()
diff --git a/ui/src/views/knowledge/KnowledgeSetting.vue b/ui/src/views/knowledge/KnowledgeSetting.vue
index 5577a4ec1..26412461c 100644
--- a/ui/src/views/knowledge/KnowledgeSetting.vue
+++ b/ui/src/views/knowledge/KnowledgeSetting.vue
@@ -86,7 +86,7 @@
                   v-if="detail?.type === 4"
                 >
                   <div class="flex align-center">
-                    <el-avatar class="mr-8 avatar-purple" shape="square" :size="32">
+                    <el-avatar class="mr-8 avatar-orange" shape="square" :size="32">
                       <img src="@/assets/knowledge/logo_workflow.svg" style="width: 60%" alt="" />
                     </el-avatar>
                     <div>
diff --git a/ui/src/views/knowledge/component/KnowledgeListContainer.vue b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
index 4a6dadc6f..8450b33e1 100644
--- a/ui/src/views/knowledge/component/KnowledgeListContainer.vue
+++ b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
@@ -99,7 +99,7 @@
               </el-dropdown-item>
               <el-dropdown-item @click="openCreateDialog(CreateWorkflowKnowledgeDialog)">
                 <div class="flex">
-                  <el-avatar class="avatar-purple mt-4" shape="square" :size="32">
+                  <el-avatar class="avatar-orange mt-4" shape="square" :size="32">
                     <img src="@/assets/knowledge/logo_workflow.svg" style="width: 60%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
diff --git a/ui/src/workflow/icons/base-node-icon.vue b/ui/src/workflow/icons/base-node-icon.vue
index 26324a400..c101e520c 100644
--- a/ui/src/workflow/icons/base-node-icon.vue
+++ b/ui/src/workflow/icons/base-node-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-avatar shape="square" style="background: #FF8800;">
+  <el-avatar shape="square avatar-orange">
     <img src="@/assets/workflow/icon_hi.svg" style="width: 75%" alt="" />
   </el-avatar>
 </template>
diff --git a/ui/src/workflow/icons/knowledge-base-node-icon.vue b/ui/src/workflow/icons/knowledge-base-node-icon.vue
index 9165d9e30..83c531b86 100644
--- a/ui/src/workflow/icons/knowledge-base-node-icon.vue
+++ b/ui/src/workflow/icons/knowledge-base-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-avatar shape="square" style="background: #ff8800">
-    <img src="@/assets/workflow/icon_hi.svg" style="width: 75%" alt="" />
+  <el-avatar shape="square avatar-orange">
+    <img src="@/assets/workflow/icon_knowledge-base.svg" style="width: 75%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/reply-node-icon.vue b/ui/src/workflow/icons/reply-node-icon.vue
index f9f15d92f..0cb32fbe3 100644
--- a/ui/src/workflow/icons/reply-node-icon.vue
+++ b/ui/src/workflow/icons/reply-node-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-avatar shape="square" style="background: #FF8800">
+  <el-avatar shape="square avatar-orange">
     <img src="@/assets/workflow/icon_reply.svg" style="width: 65%" alt="" />
   </el-avatar>
 </template>
diff --git a/ui/src/workflow/icons/speech-to-text-node-icon.vue b/ui/src/workflow/icons/speech-to-text-node-icon.vue
index a747bae2b..516dc8e16 100644
--- a/ui/src/workflow/icons/speech-to-text-node-icon.vue
+++ b/ui/src/workflow/icons/speech-to-text-node-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-avatar shape="square" style="background: #FF8800">
+  <el-avatar shape="square avatar-orange">
     <img src="@/assets/workflow/icon_speech_to_text.svg" style="width: 70%" alt="" />
   </el-avatar>
 </template>
diff --git a/ui/src/workflow/icons/text-to-speech-node-icon.vue b/ui/src/workflow/icons/text-to-speech-node-icon.vue
index 42be2028f..7ef8cd2bc 100644
--- a/ui/src/workflow/icons/text-to-speech-node-icon.vue
+++ b/ui/src/workflow/icons/text-to-speech-node-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-avatar shape="square" style="background: #ff8800">
+  <el-avatar shape="square avatar-orange">
     <img src="@/assets/workflow/icon_text_to_speech.svg" style="width: 70%" alt="" />
   </el-avatar>
 </template>