perf: Execution details

ui/package.json

@@ -28,6 +28,7 @@
     "cropperjs": "^1.6.2",
     "dingtalk-jsapi": "^3.1.0",
     "echarts": "^5.6.0",
+    "el-table-infinite-scroll": "^3.0.8",
     "element-plus": "^2.11.7",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",

ui/src/components/app-table-infinite-scroll/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-table
+    :max-height="tableHeight"
+    v-bind="$attrs"
+    ref="appTableRef"
+    :height="tableHeight + 'px'"
+    v-el-table-infinite-scroll="load"
+    :infinite-scroll-disabled="disabled"
+  >
+    <slot></slot>
+  </el-table>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, watch, computed, onMounted } from 'vue'
+import { default as vElTableInfiniteScroll } from 'el-table-infinite-scroll'
+defineOptions({ name: 'AppTableInfiniteScroll' })
+
+const props = defineProps({
+  paginationConfig: {
+    type: Object,
+    required: true,
+    default: () => ({
+      current_page: 1,
+      page_size: 50,
+      total: 0,
+    }),
+  }, // option: { current_page , page_size, total  }
+  maxTableHeight: {
+    type: Number,
+    default: 300,
+  },
+})
+const emit = defineEmits(['changePage'])
+
+const appTableRef = ref()
+
+const tableHeight = ref<number | string>('')
+const disabled = ref(false)
+
+const load = () => {
+  if (disabled.value) return
+
+  // props.paginationConfig.current_page++;
+  if (props.paginationConfig.current_page <= props.paginationConfig.total) {
+    emit('changePage')
+  }
+
+  if (props.paginationConfig.current_page === props.paginationConfig.total) {
+    disabled.value = true
+  }
+}
+defineExpose({})
+
+onMounted(() => {
+  tableHeight.value = window.innerHeight - props.maxTableHeight
+  window.onresize = () => {
+    return (() => {
+      tableHeight.value = window.innerHeight - props.maxTableHeight
+    })()
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>

ui/src/locales/lang/en-US/workflow.ts

@@ -536,5 +536,6 @@ You are a master of problem optimization, adept at accurately inferring user int
   SystemPromptPlaceholder: 'System Prompt, can reference variables in the system, such as',
   UserPromptPlaceholder: 'User Prompt, can reference variables in the system, such as',
   ExecutionRecord: 'Execution Record',
+  initiator: 'Initiator',
   debug: {},
 }

ui/src/locales/lang/zh-CN/workflow.ts

@@ -537,5 +537,6 @@ export default {
   SystemPromptPlaceholder: '系统提示词，可以引用系统中的变量：如',
   UserPromptPlaceholder: '用户提示词，可以引用系统中的变量：如',
   ExecutionRecord: '执行记录',
+  initiator: '发起人',
   debug: {},
 }

ui/src/locales/lang/zh-Hant/workflow.ts

@@ -469,13 +469,13 @@ export default {
       loopIndex: '下標',
       loopItem: '循環元素',
     },
-    loopBodyNode: {label: '循環體', text: '循環體'},
+    loopBodyNode: { label: '循環體', text: '循環體' },
     loopContinueNode: {
       label: 'Continue',
       text: '用於終止當前循環，執行下次循環',
       isContinue: 'Continue',
     },
-    loopBreakNode: {label: 'Break', text: '終止當前循環，跳出循環體', isBreak: 'Break'},
+    loopBreakNode: { label: 'Break', text: '終止當前循環，跳出循環體', isBreak: 'Break' },
     variableSplittingNode: {
       label: '變量拆分',
       text: '通過配置 JSON Path 表達式，對輸入的 JSON 格式變量進行解析和拆分',
@@ -520,5 +520,6 @@ export default {
   SystemPromptPlaceholder: '系統提示詞，可以引用系統中的變量：如',
   UserPromptPlaceholder: '用戶提示詞，可以引用系統中的變量：如',
   ExecutionRecord: '執行記錄',
+  initiator: '發起人',
   debug: {},
 }

ui/src/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-drawer
+    v-model="drawer"
+    :title="$t('workflow.ExecutionRecord')"
+    direction="rtl"
+    size="800px"
+    :before-close="close"
+  >
+    <div class="flex mb-16">
+      <div class="flex-between complex-search">
+        <el-select
+          v-model="filter_type"
+          class="complex-search__left"
+          @change="changeFilterHandle"
+          style="width: 120px"
+        >
+          <el-option :label="$t('workflow.initiator')" value="user_name" />
+        </el-select>
+        <!-- <el-select
+          v-if="filter_type === 'status'"
+          v-model="filter_status"
+          @change="changeStatusHandle"
+          style="width: 220px"
+          clearable
+        >
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select> -->
+        <el-input
+          v-model="query.user_name"
+          @change="getList"
+          :placeholder="$t('common.search')"
+          prefix-icon="Search"
+          style="width: 220px"
+          clearable
+        />
+      </div>
+    </div>
+
+    <app-table-infinite-scroll
+      :data="data"
+      class="w-full"
+      v-loading="loading"
+      @changePage="changePage"
+      :maxTableHeight="200"
+    >
+      <el-table-column prop="user_name" :label="$t('workflow.initiator')">
+        <template #default="{ row }">
+          {{ row.user_name }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="state" label="状态" width="180">
+        <template #default="{ row }">
+          {{ row.state }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="run_time" label="运行时间">
+        <template #default="{ row }">
+          {{ row.run_time }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <span @click="toDetails(row)">执行详情</span>
+        </template>
+      </el-table-column>
+    </app-table-infinite-scroll>
+  </el-drawer>
+</template>
+<script setup lang="ts">
+import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+import AppTableInfiniteScroll from '@/components/app-table-infinite-scroll/index.vue'
+import { computed, ref, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+const drawer = ref<boolean>(false)
+const route = useRoute()
+const toDetails = (row: any) => {}
+
+const apiType = computed(() => {
+  if (route.path.includes('shared')) {
+    return 'systemShare'
+  } else if (route.path.includes('resource-management')) {
+    return 'systemManage'
+  } else {
+    return 'workspace'
+  }
+})
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 50,
+  total: 0,
+})
+const query = ref<any>({
+  user_name: '',
+})
+const loading = ref(false)
+const filter_type = ref<string>('user_name')
+const active_knowledge_id = ref<string>('')
+const data = ref<Array<any>>([])
+const changeFilterHandle = () => {
+  query.value = { user_name: '' }
+}
+const changePage = () => {
+  paginationConfig.current_page += 1
+  getList()
+}
+
+const getList = () => {
+  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 = ok.data.records
+    })
+}
+const open = (knowledge_id: string) => {
+  drawer.value = true
+  active_knowledge_id.value = knowledge_id
+  getList()
+}
+const close = () => {
+  drawer.value = false
+}
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/knowledge-workflow/component/list-action/index.vue

@@ -1,83 +0,0 @@
-<template>
-  <el-drawer v-model="drawer" title="执行记录" direction="rtl" size="800px" :before-close="close">
-    <el-table v-if="active == 'list'" :data="data" style="width: 100%">
-      <el-table-column prop="meta" label="发起人" width="180">
-        <template #default="{ row }">
-          {{ row.meta.user_name }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="sate" label="状态" width="180">
-        <template #default="{ row }">
-          {{ row.state }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="run_time" label="运行时间">
-        <template #default="{ row }">
-          {{ row.run_time }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作">
-        <template #default="{ row }">
-          <span @click="details(row)">执行详情</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <Result
-      v-if="active == 'details'"
-      :id="active_action_id"
-      :knowledge_id="active_knowledge_id"
-    ></Result> -->
-  </el-drawer>
-</template>
-<script setup lang="ts">
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-import { computed, ref, reactive } from 'vue'
-import Result from '../action/Result.vue'
-import { useRoute, useRouter } from 'vue-router'
-const drawer = ref<boolean>(false)
-const active_knowledge_id = ref<string>()
-const active_action_id = ref<string>()
-const active = ref<'list' | 'details'>('list')
-const route = useRoute()
-const details = (row: any) => {
-  active_action_id.value = row.id
-  active.value = 'details'
-}
-
-const apiType = computed(() => {
-  if (route.path.includes('shared')) {
-    return 'systemShare'
-  } else if (route.path.includes('resource-management')) {
-    return 'systemManage'
-  } else {
-    return 'workspace'
-  }
-})
-const paginationConfig = reactive({
-  current_page: 1,
-  page_size: 30,
-  total: 0,
-})
-const query = ref<any>({
-  user_name: '',
-})
-const data = ref<Array<any>>([])
-const page = () => {
-  loadSharedApi({ type: 'knowledge', systemType: apiType.value })
-    .getWorkflowActionPage(active_knowledge_id.value, paginationConfig, query.value)
-    .then((ok: any) => {
-      paginationConfig.total = ok.data?.total
-      data.value = ok.data.records
-    })
-}
-const open = (knowledge_id: string) => {
-  drawer.value = true
-  active_knowledge_id.value = knowledge_id
-  page()
-}
-const close = () => {
-  drawer.value = false
-}
-defineExpose({ open, close })
-</script>
-<style lang="scss" scoped></style>

ui/src/views/knowledge-workflow/index.vue

@@ -54,7 +54,7 @@
               </el-dropdown-item>
               <el-dropdown-item @click="openListAction">
                 <AppIcon iconName="app-history-outlined" class="color-secondary"></AppIcon>
-                执行记录
+                {{ $t('workflow.ExecutionRecord') }}
               </el-dropdown-item>
               <el-dropdown-item @click="openHistory">
                 <AppIcon iconName="app-history-outlined" class="color-secondary"></AppIcon>
@@ -129,7 +129,7 @@
       </div>
     </el-collapse-transition>
     <DebugVue ref="DebugRef"></DebugVue>
-    <ListAction ref="ListActionRef"></ListAction>
+    <ExecutionRecord ref="ListActionRef"></ExecutionRecord>
     <!-- 发布历史 -->
     <PublishHistory
       v-if="showHistory"
@@ -145,7 +145,7 @@ import { useRouter, useRoute } from 'vue-router'
 import type { Action } from 'element-plus'
 import Workflow from '@/workflow/index.vue'
 import DropdownMenu from '@/components/workflow-dropdown-menu/index.vue'
-import ListAction from '@/views/knowledge-workflow/component/list-action/index.vue'
+import ExecutionRecord from '@/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue'
 import PublishHistory from '@/views/knowledge-workflow/component/PublishHistory.vue'
 import { isAppIcon, resetUrl } from '@/utils/common'
 import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'
@@ -194,7 +194,7 @@ const isDefaultTheme = computed(() => {
   return theme.isDefaultTheme()
 })
 const DebugRef = ref<InstanceType<typeof DebugVue>>()
-const ListActionRef = ref<InstanceType<typeof ListAction>>()
+const ListActionRef = ref<InstanceType<typeof ExecutionRecord>>()
 let interval: any
 const workflowRef = ref()
 const workflowMainRef = ref()