feat: Execution records and details function

2025-12-26 01:33:05 +00:00 · 2025-12-05 16:37:59 +08:00 · 2025-12-05 16:37:59 +08:00 · cdc5fae477
parent 3eff896f2d
commit cdc5fae477
13 changed files with 128 additions and 47 deletions
--- a/ui/src/assets/workflow/icon_knowledge-base.svg
+++ 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>
--- 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"
  >
--- 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);
 }
--- 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()
 })
--- 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
 }

--- 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()
--- 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>
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>