chore: lazy load workflow run detail

web/apps/web-ele/src/views/ai-platform/workflow-runs/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { WorkflowRunListItem } from '#/api/ai-platform/ai-platform';
 
-import { ref } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 
 import { Page } from '@vben/common-ui/es/page';
 import { Eye } from '@vben/icons';
@@ -23,7 +23,10 @@ import {
   useSearchFormSchema,
   useZqTableColumns,
 } from './data';
-import DetailDialog from './modules/detail-dialog.vue';
+
+const DetailDialog = defineAsyncComponent(
+  () => import('./modules/detail-dialog.vue'),
+);
 
 defineOptions({ name: 'WorkflowRunHistory' });
 

web/apps/web-ele/src/views/ai-platform/workflow-runs/modules/detail-dialog.vue

@@ -3,7 +3,7 @@ import type { Edge, Node } from '@vue-flow/core';
 
 import type { WorkflowRun } from '#/api/ai-platform/ai-platform';
 
-import { computed, ref } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { ExternalLink } from '@vben/icons';
@@ -19,7 +19,6 @@ import { useAppContextStore } from '#/store/app-context';
 import { definitionToFlowElements } from '../../workflow/shared/loadDefinition';
 import { applyRunReplay } from '../../workflow/shared/useRunReplay';
 import RunStatusTag from '../components/RunStatusTag.vue';
-import WorkflowReadonlyCanvas from '../components/WorkflowReadonlyCanvas.vue';
 import {
   formatDuration,
   formatTime,
@@ -28,6 +27,10 @@ import {
   getTriggerOptions,
 } from '../data';
 
+const WorkflowReadonlyCanvas = defineAsyncComponent(
+  () => import('../components/WorkflowReadonlyCanvas.vue'),
+);
+
 const router = useRouter();
 const appContextStore = useAppContextStore();
 const triggerOptions = getTriggerOptions();