From 0b4458484ccfcd88bd1a7ca9a50ba3b795df9d3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?= <908705107@qq.com> Date: Tue, 9 Jun 2026 22:11:22 +0800 Subject: [PATCH] Lazy load workflow node components --- .../ai-platform/workflow/editor/index.vue | 86 +++++++++--------- .../workflow/shared/workflowNodeTypes.ts | 87 ++++++++++--------- 2 files changed, 88 insertions(+), 85 deletions(-) diff --git a/web/apps/web-ele/src/views/ai-platform/workflow/editor/index.vue b/web/apps/web-ele/src/views/ai-platform/workflow/editor/index.vue index c70e285..3e20efc 100644 --- a/web/apps/web-ele/src/views/ai-platform/workflow/editor/index.vue +++ b/web/apps/web-ele/src/views/ai-platform/workflow/editor/index.vue @@ -3,6 +3,7 @@ import type { AIWorkflow } from '#/api/ai-platform/ai-platform'; import { computed, + defineAsyncComponent, markRaw, nextTick, onMounted, @@ -84,54 +85,55 @@ import ContextMenu from './components/ContextMenu.vue'; import Panel from './components/Panel.vue'; import VersionHistoryPanel from './components/VersionHistoryPanel.vue'; import AddButtonEdge from './edges/AddButtonEdge.vue'; -import AppCreateNode from './nodes/AppCreateNode.vue'; -import AppDesignNode from './nodes/AppDesignNode.vue'; -import AppSettingsNode from './nodes/AppSettingsNode.vue'; -import AppUpdateNode from './nodes/AppUpdateNode.vue'; -import ChoiceNode from './nodes/ChoiceNode.vue'; -import CodeNode from './nodes/CodeNode.vue'; -import ConditionNode from './nodes/ConditionNode.vue'; -import ConfirmNode from './nodes/ConfirmNode.vue'; -import DashboardBasicInfoNode from './nodes/DashboardBasicInfoNode.vue'; -import DashboardCreateNode from './nodes/DashboardCreateNode.vue'; -import DashboardDesignNode from './nodes/DashboardDesignNode.vue'; -import DashboardPublishNode from './nodes/DashboardPublishNode.vue'; -import DbDeleteNode from './nodes/DbDeleteNode.vue'; -import DbInsertNode from './nodes/DbInsertNode.vue'; -import DbQueryNode from './nodes/DbQueryNode.vue'; -import DbSqlNode from './nodes/DbSqlNode.vue'; -import DbUpdateNode from './nodes/DbUpdateNode.vue'; -import EndNode from './nodes/EndNode.vue'; -import FormBasicInfoNode from './nodes/FormBasicInfoNode.vue'; -import FormCreateNode from './nodes/FormCreateNode.vue'; -import FormDatabaseCreateNode from './nodes/FormDatabaseCreateNode.vue'; -import FormDatabaseDesignNode from './nodes/FormDatabaseDesignNode.vue'; -import FormDataNode from './nodes/FormDataNode.vue'; -import FormListDesignNode from './nodes/FormListDesignNode.vue'; -import FormPublishNode from './nodes/FormPublishNode.vue'; -import FormUIDesignNode from './nodes/FormUIDesignNode.vue'; -import HttpNode from './nodes/HttpNode.vue'; -import IntentNode from './nodes/IntentNode.vue'; -import KnowledgeRetrievalNode from './nodes/KnowledgeRetrievalNode.vue'; -import LLMNode from './nodes/LLMNode.vue'; -import LoopNode from './nodes/LoopNode.vue'; -import MergeNode from './nodes/MergeNode.vue'; -import MessageNode from './nodes/MessageNode.vue'; -import ParallelNode from './nodes/ParallelNode.vue'; -import QuestionNode from './nodes/QuestionNode.vue'; -import SnowflakeCortexAnalystNode from './nodes/SnowflakeCortexAnalystNode.vue'; -import SnowflakeCortexLLMNode from './nodes/SnowflakeCortexLLMNode.vue'; -import StartNode from './nodes/StartNode.vue'; -import SubflowNode from './nodes/SubflowNode.vue'; -import SystemSummaryNode from './nodes/SystemSummaryNode.vue'; -import TemplateNode from './nodes/TemplateNode.vue'; -import TextToSqlNode from './nodes/TextToSqlNode.vue'; import '@vue-flow/minimap/dist/style.css'; import '@vue-flow/core/dist/style.css'; import '@vue-flow/core/dist/theme-default.css'; import '@vue-flow/controls/dist/style.css'; +const AppCreateNode = defineAsyncComponent(() => import('./nodes/AppCreateNode.vue')); +const AppDesignNode = defineAsyncComponent(() => import('./nodes/AppDesignNode.vue')); +const AppSettingsNode = defineAsyncComponent(() => import('./nodes/AppSettingsNode.vue')); +const AppUpdateNode = defineAsyncComponent(() => import('./nodes/AppUpdateNode.vue')); +const ChoiceNode = defineAsyncComponent(() => import('./nodes/ChoiceNode.vue')); +const CodeNode = defineAsyncComponent(() => import('./nodes/CodeNode.vue')); +const ConditionNode = defineAsyncComponent(() => import('./nodes/ConditionNode.vue')); +const ConfirmNode = defineAsyncComponent(() => import('./nodes/ConfirmNode.vue')); +const DashboardBasicInfoNode = defineAsyncComponent(() => import('./nodes/DashboardBasicInfoNode.vue')); +const DashboardCreateNode = defineAsyncComponent(() => import('./nodes/DashboardCreateNode.vue')); +const DashboardDesignNode = defineAsyncComponent(() => import('./nodes/DashboardDesignNode.vue')); +const DashboardPublishNode = defineAsyncComponent(() => import('./nodes/DashboardPublishNode.vue')); +const DbDeleteNode = defineAsyncComponent(() => import('./nodes/DbDeleteNode.vue')); +const DbInsertNode = defineAsyncComponent(() => import('./nodes/DbInsertNode.vue')); +const DbQueryNode = defineAsyncComponent(() => import('./nodes/DbQueryNode.vue')); +const DbSqlNode = defineAsyncComponent(() => import('./nodes/DbSqlNode.vue')); +const DbUpdateNode = defineAsyncComponent(() => import('./nodes/DbUpdateNode.vue')); +const EndNode = defineAsyncComponent(() => import('./nodes/EndNode.vue')); +const FormBasicInfoNode = defineAsyncComponent(() => import('./nodes/FormBasicInfoNode.vue')); +const FormCreateNode = defineAsyncComponent(() => import('./nodes/FormCreateNode.vue')); +const FormDatabaseCreateNode = defineAsyncComponent(() => import('./nodes/FormDatabaseCreateNode.vue')); +const FormDatabaseDesignNode = defineAsyncComponent(() => import('./nodes/FormDatabaseDesignNode.vue')); +const FormDataNode = defineAsyncComponent(() => import('./nodes/FormDataNode.vue')); +const FormListDesignNode = defineAsyncComponent(() => import('./nodes/FormListDesignNode.vue')); +const FormPublishNode = defineAsyncComponent(() => import('./nodes/FormPublishNode.vue')); +const FormUIDesignNode = defineAsyncComponent(() => import('./nodes/FormUIDesignNode.vue')); +const HttpNode = defineAsyncComponent(() => import('./nodes/HttpNode.vue')); +const IntentNode = defineAsyncComponent(() => import('./nodes/IntentNode.vue')); +const KnowledgeRetrievalNode = defineAsyncComponent(() => import('./nodes/KnowledgeRetrievalNode.vue')); +const LLMNode = defineAsyncComponent(() => import('./nodes/LLMNode.vue')); +const LoopNode = defineAsyncComponent(() => import('./nodes/LoopNode.vue')); +const MergeNode = defineAsyncComponent(() => import('./nodes/MergeNode.vue')); +const MessageNode = defineAsyncComponent(() => import('./nodes/MessageNode.vue')); +const ParallelNode = defineAsyncComponent(() => import('./nodes/ParallelNode.vue')); +const QuestionNode = defineAsyncComponent(() => import('./nodes/QuestionNode.vue')); +const SnowflakeCortexAnalystNode = defineAsyncComponent(() => import('./nodes/SnowflakeCortexAnalystNode.vue')); +const SnowflakeCortexLLMNode = defineAsyncComponent(() => import('./nodes/SnowflakeCortexLLMNode.vue')); +const StartNode = defineAsyncComponent(() => import('./nodes/StartNode.vue')); +const SubflowNode = defineAsyncComponent(() => import('./nodes/SubflowNode.vue')); +const SystemSummaryNode = defineAsyncComponent(() => import('./nodes/SystemSummaryNode.vue')); +const TemplateNode = defineAsyncComponent(() => import('./nodes/TemplateNode.vue')); +const TextToSqlNode = defineAsyncComponent(() => import('./nodes/TextToSqlNode.vue')); + const appContextStore = useAppContextStore(); const route = useRoute(); diff --git a/web/apps/web-ele/src/views/ai-platform/workflow/shared/workflowNodeTypes.ts b/web/apps/web-ele/src/views/ai-platform/workflow/shared/workflowNodeTypes.ts index 1bdfce5..68f29bf 100644 --- a/web/apps/web-ele/src/views/ai-platform/workflow/shared/workflowNodeTypes.ts +++ b/web/apps/web-ele/src/views/ai-platform/workflow/shared/workflowNodeTypes.ts @@ -1,48 +1,49 @@ -import { markRaw } from 'vue'; +import { defineAsyncComponent, markRaw } from 'vue'; import AddButtonEdge from '../editor/edges/AddButtonEdge.vue'; -import AppCreateNode from '../editor/nodes/AppCreateNode.vue'; -import AppDesignNode from '../editor/nodes/AppDesignNode.vue'; -import AppSettingsNode from '../editor/nodes/AppSettingsNode.vue'; -import AppUpdateNode from '../editor/nodes/AppUpdateNode.vue'; -import ChoiceNode from '../editor/nodes/ChoiceNode.vue'; -import CodeNode from '../editor/nodes/CodeNode.vue'; -import ConditionNode from '../editor/nodes/ConditionNode.vue'; -import ConfirmNode from '../editor/nodes/ConfirmNode.vue'; -import DashboardBasicInfoNode from '../editor/nodes/DashboardBasicInfoNode.vue'; -import DashboardCreateNode from '../editor/nodes/DashboardCreateNode.vue'; -import DashboardDesignNode from '../editor/nodes/DashboardDesignNode.vue'; -import DashboardPublishNode from '../editor/nodes/DashboardPublishNode.vue'; -import DbDeleteNode from '../editor/nodes/DbDeleteNode.vue'; -import DbInsertNode from '../editor/nodes/DbInsertNode.vue'; -import DbQueryNode from '../editor/nodes/DbQueryNode.vue'; -import DbSqlNode from '../editor/nodes/DbSqlNode.vue'; -import DbUpdateNode from '../editor/nodes/DbUpdateNode.vue'; -import EndNode from '../editor/nodes/EndNode.vue'; -import FormBasicInfoNode from '../editor/nodes/FormBasicInfoNode.vue'; -import FormCreateNode from '../editor/nodes/FormCreateNode.vue'; -import FormDatabaseCreateNode from '../editor/nodes/FormDatabaseCreateNode.vue'; -import FormDatabaseDesignNode from '../editor/nodes/FormDatabaseDesignNode.vue'; -import FormDataNode from '../editor/nodes/FormDataNode.vue'; -import FormListDesignNode from '../editor/nodes/FormListDesignNode.vue'; -import FormPublishNode from '../editor/nodes/FormPublishNode.vue'; -import FormUIDesignNode from '../editor/nodes/FormUIDesignNode.vue'; -import HttpNode from '../editor/nodes/HttpNode.vue'; -import IntentNode from '../editor/nodes/IntentNode.vue'; -import KnowledgeRetrievalNode from '../editor/nodes/KnowledgeRetrievalNode.vue'; -import LLMNode from '../editor/nodes/LLMNode.vue'; -import LoopNode from '../editor/nodes/LoopNode.vue'; -import MergeNode from '../editor/nodes/MergeNode.vue'; -import MessageNode from '../editor/nodes/MessageNode.vue'; -import ParallelNode from '../editor/nodes/ParallelNode.vue'; -import QuestionNode from '../editor/nodes/QuestionNode.vue'; -import SnowflakeCortexAnalystNode from '../editor/nodes/SnowflakeCortexAnalystNode.vue'; -import SnowflakeCortexLLMNode from '../editor/nodes/SnowflakeCortexLLMNode.vue'; -import StartNode from '../editor/nodes/StartNode.vue'; -import SubflowNode from '../editor/nodes/SubflowNode.vue'; -import SystemSummaryNode from '../editor/nodes/SystemSummaryNode.vue'; -import TemplateNode from '../editor/nodes/TemplateNode.vue'; -import TextToSqlNode from '../editor/nodes/TextToSqlNode.vue'; + +const AppCreateNode = defineAsyncComponent(() => import('../editor/nodes/AppCreateNode.vue')); +const AppDesignNode = defineAsyncComponent(() => import('../editor/nodes/AppDesignNode.vue')); +const AppSettingsNode = defineAsyncComponent(() => import('../editor/nodes/AppSettingsNode.vue')); +const AppUpdateNode = defineAsyncComponent(() => import('../editor/nodes/AppUpdateNode.vue')); +const ChoiceNode = defineAsyncComponent(() => import('../editor/nodes/ChoiceNode.vue')); +const CodeNode = defineAsyncComponent(() => import('../editor/nodes/CodeNode.vue')); +const ConditionNode = defineAsyncComponent(() => import('../editor/nodes/ConditionNode.vue')); +const ConfirmNode = defineAsyncComponent(() => import('../editor/nodes/ConfirmNode.vue')); +const DashboardBasicInfoNode = defineAsyncComponent(() => import('../editor/nodes/DashboardBasicInfoNode.vue')); +const DashboardCreateNode = defineAsyncComponent(() => import('../editor/nodes/DashboardCreateNode.vue')); +const DashboardDesignNode = defineAsyncComponent(() => import('../editor/nodes/DashboardDesignNode.vue')); +const DashboardPublishNode = defineAsyncComponent(() => import('../editor/nodes/DashboardPublishNode.vue')); +const DbDeleteNode = defineAsyncComponent(() => import('../editor/nodes/DbDeleteNode.vue')); +const DbInsertNode = defineAsyncComponent(() => import('../editor/nodes/DbInsertNode.vue')); +const DbQueryNode = defineAsyncComponent(() => import('../editor/nodes/DbQueryNode.vue')); +const DbSqlNode = defineAsyncComponent(() => import('../editor/nodes/DbSqlNode.vue')); +const DbUpdateNode = defineAsyncComponent(() => import('../editor/nodes/DbUpdateNode.vue')); +const EndNode = defineAsyncComponent(() => import('../editor/nodes/EndNode.vue')); +const FormBasicInfoNode = defineAsyncComponent(() => import('../editor/nodes/FormBasicInfoNode.vue')); +const FormCreateNode = defineAsyncComponent(() => import('../editor/nodes/FormCreateNode.vue')); +const FormDatabaseCreateNode = defineAsyncComponent(() => import('../editor/nodes/FormDatabaseCreateNode.vue')); +const FormDatabaseDesignNode = defineAsyncComponent(() => import('../editor/nodes/FormDatabaseDesignNode.vue')); +const FormDataNode = defineAsyncComponent(() => import('../editor/nodes/FormDataNode.vue')); +const FormListDesignNode = defineAsyncComponent(() => import('../editor/nodes/FormListDesignNode.vue')); +const FormPublishNode = defineAsyncComponent(() => import('../editor/nodes/FormPublishNode.vue')); +const FormUIDesignNode = defineAsyncComponent(() => import('../editor/nodes/FormUIDesignNode.vue')); +const HttpNode = defineAsyncComponent(() => import('../editor/nodes/HttpNode.vue')); +const IntentNode = defineAsyncComponent(() => import('../editor/nodes/IntentNode.vue')); +const KnowledgeRetrievalNode = defineAsyncComponent(() => import('../editor/nodes/KnowledgeRetrievalNode.vue')); +const LLMNode = defineAsyncComponent(() => import('../editor/nodes/LLMNode.vue')); +const LoopNode = defineAsyncComponent(() => import('../editor/nodes/LoopNode.vue')); +const MergeNode = defineAsyncComponent(() => import('../editor/nodes/MergeNode.vue')); +const MessageNode = defineAsyncComponent(() => import('../editor/nodes/MessageNode.vue')); +const ParallelNode = defineAsyncComponent(() => import('../editor/nodes/ParallelNode.vue')); +const QuestionNode = defineAsyncComponent(() => import('../editor/nodes/QuestionNode.vue')); +const SnowflakeCortexAnalystNode = defineAsyncComponent(() => import('../editor/nodes/SnowflakeCortexAnalystNode.vue')); +const SnowflakeCortexLLMNode = defineAsyncComponent(() => import('../editor/nodes/SnowflakeCortexLLMNode.vue')); +const StartNode = defineAsyncComponent(() => import('../editor/nodes/StartNode.vue')); +const SubflowNode = defineAsyncComponent(() => import('../editor/nodes/SubflowNode.vue')); +const SystemSummaryNode = defineAsyncComponent(() => import('../editor/nodes/SystemSummaryNode.vue')); +const TemplateNode = defineAsyncComponent(() => import('../editor/nodes/TemplateNode.vue')); +const TextToSqlNode = defineAsyncComponent(() => import('../editor/nodes/TextToSqlNode.vue')); export const workflowNodeTypes = { start: markRaw(StartNode),