perf: 优化智能体与工作流幕布渲染性能

- 分阶段加载智能体配置并按需缓存 MCP 工具

- 合并画布状态更新与节点尺寸监听，启用大图可视区域渲染和静态连线

- 隔离 Tinyflow Store 实例并补充数据同步与回归测试

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import {
   computed,
+  onActivated,
   onBeforeUnmount,
   onDeactivated,
   onMounted,
   onUnmounted,
   ref,
+  shallowRef,
 } from 'vue';
 import {useRoute} from 'vue-router';
 
@@ -52,6 +54,8 @@ import {
 
 import '@tinyflow-ai/vue/dist/index.css';
 
+const WORKFLOW_VISIBLE_RENDER_NODE_THRESHOLD = 40;
+
 const props = withDefaults(
   defineProps<{
     shareMode?: boolean;
@@ -67,6 +71,9 @@ onMounted(async () => {
   document.addEventListener('keydown', handleKeydown);
   await initializeWorkflow();
 });
+onActivated(() => {
+  document.addEventListener('keydown', handleKeydown);
+});
 onBeforeUnmount(() => {
   captureCurrentWorkflowDraft();
 });
@@ -77,6 +84,7 @@ onUnmounted(() => {
   }
 });
 onDeactivated(() => {
+  document.removeEventListener('keydown', handleKeydown);
   captureCurrentWorkflowDraft();
 });
 // variables
@@ -85,7 +93,12 @@ const workflowId = ref(route.query.id);
 const workflowInfo = ref<any>({});
 const initializationError = ref(false);
 const runParams = ref<any>(null);
-const tinyFlowData = ref<any>(null);
+const tinyFlowData = shallowRef<any>(null);
+const onlyRenderVisibleWorkflowElements = computed(
+  () =>
+    (tinyFlowData.value?.nodes?.length || 0) >=
+    WORKFLOW_VISIBLE_RENDER_NODE_THRESHOLD,
+);
 const llmList = ref<any>([]);
 const knowledgeList = ref<any>([]);
 const codeEngineList = ref<any[]>([
@@ -476,7 +489,8 @@ function persistPendingWorkflowDraft() {
     draftWriteTimer = undefined;
     return;
   }
-  const content = pendingDraftContent;
+  const content = normalizeWorkflowStartNodes(pendingDraftContent);
+  lastObservedWorkflowContent = content;
   pendingDraftContent = null;
   draftWriteTimer = undefined;
   const persisted = writeWorkflowDraft({
@@ -491,8 +505,8 @@ function persistPendingWorkflowDraft() {
 }
 
 function scheduleWorkflowDraft(content: any) {
-  lastObservedWorkflowContent = normalizeWorkflowStartNodes(content);
-  pendingDraftContent = lastObservedWorkflowContent;
+  lastObservedWorkflowContent = content;
+  pendingDraftContent = content;
   if (draftWriteTimer) {
     clearTimeout(draftWriteTimer);
   }
@@ -942,11 +956,13 @@ function onAsyncExecute(info: any) {
       ref="tinyflowRef"
       v-else-if="showTinyFlow"
       class="tiny-flow-container"
-      :data="JSON.parse(JSON.stringify(tinyFlowData))"
+      :data="tinyFlowData"
+      :edge-animated="false"
+      :only-render-visible-elements="onlyRenderVisibleWorkflowElements"
       :theme="isDark ? 'dark' : 'light'"
       :provider="provider"
       :custom-nodes="customNode"
-      :on-data-change="scheduleWorkflowDraft"
+      :on-data-commit="scheduleWorkflowDraft"
       :on-node-execute="runIndependently"
       :on-run-test="runWorkflow"
     />