Lazy load workflow node components

This commit is contained in:
2026-06-09 22:11:22 +08:00
parent 0de22fa7e1
commit 0b4458484c
2 changed files with 88 additions and 85 deletions
@@ -3,6 +3,7 @@ import type { AIWorkflow } from '#/api/ai-platform/ai-platform';
import { import {
computed, computed,
defineAsyncComponent,
markRaw, markRaw,
nextTick, nextTick,
onMounted, onMounted,
@@ -84,54 +85,55 @@ import ContextMenu from './components/ContextMenu.vue';
import Panel from './components/Panel.vue'; import Panel from './components/Panel.vue';
import VersionHistoryPanel from './components/VersionHistoryPanel.vue'; import VersionHistoryPanel from './components/VersionHistoryPanel.vue';
import AddButtonEdge from './edges/AddButtonEdge.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/minimap/dist/style.css';
import '@vue-flow/core/dist/style.css'; import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css'; import '@vue-flow/core/dist/theme-default.css';
import '@vue-flow/controls/dist/style.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 appContextStore = useAppContextStore();
const route = useRoute(); const route = useRoute();
@@ -1,48 +1,49 @@
import { markRaw } from 'vue'; import { defineAsyncComponent, markRaw } from 'vue';
import AddButtonEdge from '../editor/edges/AddButtonEdge.vue'; import AddButtonEdge from '../editor/edges/AddButtonEdge.vue';
import AppCreateNode from '../editor/nodes/AppCreateNode.vue';
import AppDesignNode from '../editor/nodes/AppDesignNode.vue'; const AppCreateNode = defineAsyncComponent(() => import('../editor/nodes/AppCreateNode.vue'));
import AppSettingsNode from '../editor/nodes/AppSettingsNode.vue'; const AppDesignNode = defineAsyncComponent(() => import('../editor/nodes/AppDesignNode.vue'));
import AppUpdateNode from '../editor/nodes/AppUpdateNode.vue'; const AppSettingsNode = defineAsyncComponent(() => import('../editor/nodes/AppSettingsNode.vue'));
import ChoiceNode from '../editor/nodes/ChoiceNode.vue'; const AppUpdateNode = defineAsyncComponent(() => import('../editor/nodes/AppUpdateNode.vue'));
import CodeNode from '../editor/nodes/CodeNode.vue'; const ChoiceNode = defineAsyncComponent(() => import('../editor/nodes/ChoiceNode.vue'));
import ConditionNode from '../editor/nodes/ConditionNode.vue'; const CodeNode = defineAsyncComponent(() => import('../editor/nodes/CodeNode.vue'));
import ConfirmNode from '../editor/nodes/ConfirmNode.vue'; const ConditionNode = defineAsyncComponent(() => import('../editor/nodes/ConditionNode.vue'));
import DashboardBasicInfoNode from '../editor/nodes/DashboardBasicInfoNode.vue'; const ConfirmNode = defineAsyncComponent(() => import('../editor/nodes/ConfirmNode.vue'));
import DashboardCreateNode from '../editor/nodes/DashboardCreateNode.vue'; const DashboardBasicInfoNode = defineAsyncComponent(() => import('../editor/nodes/DashboardBasicInfoNode.vue'));
import DashboardDesignNode from '../editor/nodes/DashboardDesignNode.vue'; const DashboardCreateNode = defineAsyncComponent(() => import('../editor/nodes/DashboardCreateNode.vue'));
import DashboardPublishNode from '../editor/nodes/DashboardPublishNode.vue'; const DashboardDesignNode = defineAsyncComponent(() => import('../editor/nodes/DashboardDesignNode.vue'));
import DbDeleteNode from '../editor/nodes/DbDeleteNode.vue'; const DashboardPublishNode = defineAsyncComponent(() => import('../editor/nodes/DashboardPublishNode.vue'));
import DbInsertNode from '../editor/nodes/DbInsertNode.vue'; const DbDeleteNode = defineAsyncComponent(() => import('../editor/nodes/DbDeleteNode.vue'));
import DbQueryNode from '../editor/nodes/DbQueryNode.vue'; const DbInsertNode = defineAsyncComponent(() => import('../editor/nodes/DbInsertNode.vue'));
import DbSqlNode from '../editor/nodes/DbSqlNode.vue'; const DbQueryNode = defineAsyncComponent(() => import('../editor/nodes/DbQueryNode.vue'));
import DbUpdateNode from '../editor/nodes/DbUpdateNode.vue'; const DbSqlNode = defineAsyncComponent(() => import('../editor/nodes/DbSqlNode.vue'));
import EndNode from '../editor/nodes/EndNode.vue'; const DbUpdateNode = defineAsyncComponent(() => import('../editor/nodes/DbUpdateNode.vue'));
import FormBasicInfoNode from '../editor/nodes/FormBasicInfoNode.vue'; const EndNode = defineAsyncComponent(() => import('../editor/nodes/EndNode.vue'));
import FormCreateNode from '../editor/nodes/FormCreateNode.vue'; const FormBasicInfoNode = defineAsyncComponent(() => import('../editor/nodes/FormBasicInfoNode.vue'));
import FormDatabaseCreateNode from '../editor/nodes/FormDatabaseCreateNode.vue'; const FormCreateNode = defineAsyncComponent(() => import('../editor/nodes/FormCreateNode.vue'));
import FormDatabaseDesignNode from '../editor/nodes/FormDatabaseDesignNode.vue'; const FormDatabaseCreateNode = defineAsyncComponent(() => import('../editor/nodes/FormDatabaseCreateNode.vue'));
import FormDataNode from '../editor/nodes/FormDataNode.vue'; const FormDatabaseDesignNode = defineAsyncComponent(() => import('../editor/nodes/FormDatabaseDesignNode.vue'));
import FormListDesignNode from '../editor/nodes/FormListDesignNode.vue'; const FormDataNode = defineAsyncComponent(() => import('../editor/nodes/FormDataNode.vue'));
import FormPublishNode from '../editor/nodes/FormPublishNode.vue'; const FormListDesignNode = defineAsyncComponent(() => import('../editor/nodes/FormListDesignNode.vue'));
import FormUIDesignNode from '../editor/nodes/FormUIDesignNode.vue'; const FormPublishNode = defineAsyncComponent(() => import('../editor/nodes/FormPublishNode.vue'));
import HttpNode from '../editor/nodes/HttpNode.vue'; const FormUIDesignNode = defineAsyncComponent(() => import('../editor/nodes/FormUIDesignNode.vue'));
import IntentNode from '../editor/nodes/IntentNode.vue'; const HttpNode = defineAsyncComponent(() => import('../editor/nodes/HttpNode.vue'));
import KnowledgeRetrievalNode from '../editor/nodes/KnowledgeRetrievalNode.vue'; const IntentNode = defineAsyncComponent(() => import('../editor/nodes/IntentNode.vue'));
import LLMNode from '../editor/nodes/LLMNode.vue'; const KnowledgeRetrievalNode = defineAsyncComponent(() => import('../editor/nodes/KnowledgeRetrievalNode.vue'));
import LoopNode from '../editor/nodes/LoopNode.vue'; const LLMNode = defineAsyncComponent(() => import('../editor/nodes/LLMNode.vue'));
import MergeNode from '../editor/nodes/MergeNode.vue'; const LoopNode = defineAsyncComponent(() => import('../editor/nodes/LoopNode.vue'));
import MessageNode from '../editor/nodes/MessageNode.vue'; const MergeNode = defineAsyncComponent(() => import('../editor/nodes/MergeNode.vue'));
import ParallelNode from '../editor/nodes/ParallelNode.vue'; const MessageNode = defineAsyncComponent(() => import('../editor/nodes/MessageNode.vue'));
import QuestionNode from '../editor/nodes/QuestionNode.vue'; const ParallelNode = defineAsyncComponent(() => import('../editor/nodes/ParallelNode.vue'));
import SnowflakeCortexAnalystNode from '../editor/nodes/SnowflakeCortexAnalystNode.vue'; const QuestionNode = defineAsyncComponent(() => import('../editor/nodes/QuestionNode.vue'));
import SnowflakeCortexLLMNode from '../editor/nodes/SnowflakeCortexLLMNode.vue'; const SnowflakeCortexAnalystNode = defineAsyncComponent(() => import('../editor/nodes/SnowflakeCortexAnalystNode.vue'));
import StartNode from '../editor/nodes/StartNode.vue'; const SnowflakeCortexLLMNode = defineAsyncComponent(() => import('../editor/nodes/SnowflakeCortexLLMNode.vue'));
import SubflowNode from '../editor/nodes/SubflowNode.vue'; const StartNode = defineAsyncComponent(() => import('../editor/nodes/StartNode.vue'));
import SystemSummaryNode from '../editor/nodes/SystemSummaryNode.vue'; const SubflowNode = defineAsyncComponent(() => import('../editor/nodes/SubflowNode.vue'));
import TemplateNode from '../editor/nodes/TemplateNode.vue'; const SystemSummaryNode = defineAsyncComponent(() => import('../editor/nodes/SystemSummaryNode.vue'));
import TextToSqlNode from '../editor/nodes/TextToSqlNode.vue'; const TemplateNode = defineAsyncComponent(() => import('../editor/nodes/TemplateNode.vue'));
const TextToSqlNode = defineAsyncComponent(() => import('../editor/nodes/TextToSqlNode.vue'));
export const workflowNodeTypes = { export const workflowNodeTypes = {
start: markRaw(StartNode), start: markRaw(StartNode),