@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.21

package/src/utils/config.ts

@@ -16,14 +16,22 @@
  * limitations under the License.
  */
 
+import { ref } from 'vue';
+
 import { EditorInstallOptions } from '@editor/type';
 
 let $TMAGIC_EDITOR: EditorInstallOptions = {} as any;
 
+// 用 ref 持有 flat 全局开关：const 引用本身不可变，符合 `import/no-mutable-exports`；
+// 通过 `.value` 改值仍保持模块级响应式语义，与 editor/plugin.ts、design/index.ts 里
+// 的同名变量写法对齐。
+const isGlobalFlat = ref(false);
+
 const setEditorConfig = (option: EditorInstallOptions): void => {
   $TMAGIC_EDITOR = option;
+  isGlobalFlat.value = option.flat ?? false;
 };
 
 const getEditorConfig = <K extends keyof EditorInstallOptions>(key: K): EditorInstallOptions[K] => $TMAGIC_EDITOR[key];
 
-export { getEditorConfig, setEditorConfig };
+export { getEditorConfig, isGlobalFlat, setEditorConfig };

package/src/utils/const.ts

@@ -5,10 +5,11 @@ export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 
-export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+export const DEFAULT_LEFT_COLUMN_WIDTH = 345;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-export const MIN_LEFT_COLUMN_WIDTH = 200;
+// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为 345
+export const MIN_LEFT_COLUMN_WIDTH = 345;
 export const MIN_CENTER_COLUMN_WIDTH = 400;
 export const MIN_RIGHT_COLUMN_WIDTH = 300;
 

package/src/utils/content-menu.ts

@@ -2,24 +2,29 @@ import { computed, markRaw, type ShallowRef } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { cloneDeep, Id, MContainer, NodeType } from '@tmagic/core';
-import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, isPage, isPageOrFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { MenuButton, Services } from '@editor/type';
+import type { HistoryOpSource, MenuButton, Services } from '@editor/type';
 
 import { COPY_STORAGE_KEY } from './editor';
 
-export const useDeleteMenu = (): MenuButton => ({
+/**
+ * 共享的右键菜单项构造器（画布 ViewerMenu 与图层树 LayerMenu 共用）。
+ * `historySource` 用于标记本次操作的途径，调用方按所在面板传入：
+ * 画布传 `'stage-contextmenu'`，树形面板传 `'tree-contextmenu'`。
+ */
+export const useDeleteMenu = (historySource?: HistoryOpSource): MenuButton => ({
   type: 'button',
   text: '删除',
   icon: Delete,
   display: ({ editorService }) => {
     const node = editorService.get('node');
-    return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
+    return node?.type !== NodeType.ROOT && !isPageOrFragment(node);
   },
   handler: ({ editorService }) => {
     const nodes = editorService.get('nodes');
-    nodes && editorService.remove(nodes);
+    nodes && editorService.remove(nodes, { historySource });
   },
 });
 
@@ -33,7 +38,10 @@ export const useCopyMenu = (): MenuButton => ({
   },
 });
 
-export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu> | null>): MenuButton => ({
+export const usePasteMenu = (
+  historySource?: HistoryOpSource,
+  menu?: ShallowRef<InstanceType<typeof ContentMenu> | null>,
+): MenuButton => ({
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),
@@ -52,14 +60,14 @@ export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu>
       const initialTop =
         calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
         uiService.get('zoom');
-      editorService.paste({ left: initialLeft, top: initialTop });
+      editorService.paste({ left: initialLeft, top: initialTop }, undefined, { historySource });
     } else {
-      editorService.paste();
+      editorService.paste(undefined, undefined, { historySource });
     }
   },
 });
 
-const moveTo = async (id: Id, { editorService }: Services) => {
+const moveTo = async (id: Id, { editorService }: Services, historySource?: HistoryOpSource) => {
   const nodes = editorService.get('nodes') || [];
   const parent = editorService.getNodeById(id) as MContainer;
 
@@ -69,10 +77,11 @@ const moveTo = async (id: Id, { editorService }: Services) => {
   // 不要再走 remove + add 两步，否则会被切成两条历史（且语义也不正确）。
   await editorService.moveToContainer(cloneDeep(nodes), parent.id, {
     doNotSwitchPage: true,
+    historySource,
   });
 };
 
-export const useMoveToMenu = ({ editorService }: Services): MenuButton => {
+export const useMoveToMenu = ({ editorService }: Services, historySource?: HistoryOpSource): MenuButton => {
   const root = computed(() => editorService.get('root'));
 
   return {
@@ -89,7 +98,7 @@ export const useMoveToMenu = ({ editorService }: Services): MenuButton => {
         text: `${page.name}(${page.id})`,
         type: 'button',
         handler: (services: Services) => {
-          moveTo(page.id, services);
+          moveTo(page.id, services, historySource);
         },
       })),
   };

package/src/utils/data-source/index.ts

@@ -10,6 +10,7 @@ const dataSourceFormConfig: TabConfig = {
   items: [
     {
       title: '数据定义',
+      status: 'fields',
       items: [
         {
           name: 'fields',
@@ -20,6 +21,7 @@ const dataSourceFormConfig: TabConfig = {
     },
     {
       title: '方法定义',
+      status: 'methods',
       items: [
         {
           name: 'methods',
@@ -233,19 +235,37 @@ export const getCascaderOptionsFromFields = (
   return result;
 };
 
-export const getFieldType = (ds: DataSourceSchema | undefined, fieldNames: string[]) => {
-  let fields = ds?.fields;
-  let type = '';
-
-  for (const fieldName of fieldNames) {
-    if (!fields?.length) return '';
-
-    const field = fields.find((f) => f.name === fieldName);
-    if (!field) return '';
+/**
+ * 按字段名路径下钻 DataSchema。
+ * @param skipNumberIndices 为 true 时跳过数字段（模板路径中的数组下标，如 arr[0].x）
+ */
+export const resolveFieldByPath = (
+  fields: DataSchema[] | undefined,
+  fieldNames: string[],
+  options: { skipNumberIndices?: boolean } = {},
+): { ok: boolean; field?: DataSchema; fields: DataSchema[]; failedName?: string } => {
+  let currentFields = fields || [];
+  let field: DataSchema | undefined;
 
-    type = field.type || '';
-    fields = field.fields;
+  for (const name of fieldNames) {
+    if (options.skipNumberIndices && isNumber(name)) {
+      continue;
+    }
+    if (!currentFields.length) {
+      return { ok: false, fields: currentFields, failedName: name };
+    }
+    field = currentFields.find((item) => item.name === name);
+    if (!field) {
+      return { ok: false, fields: currentFields, failedName: name };
+    }
+    currentFields = field.fields || [];
   }
 
-  return type;
+  return { field, ok: true, fields: currentFields };
+};
+
+export const getFieldType = (ds: DataSourceSchema | undefined, fieldNames: string[]) => {
+  const { ok, field } = resolveFieldByPath(ds?.fields, fieldNames);
+  if (!ok) return '';
+  return field?.type || '';
 };

package/src/utils/dep/collect-worker-client.ts

@@ -0,0 +1,149 @@
+import serialize from 'serialize-javascript';
+
+import type { Id, MApp } from '@tmagic/core';
+
+import { error } from '../logger';
+
+import type { CollectWorkerPayload, CollectWorkerRequest, CollectWorkerResponse, DepsData } from './worker';
+import CollectWorker from './worker.ts?worker&inline';
+
+export interface CollectWorkerResult {
+  deps: DepsData;
+  nodeIds: Id[];
+}
+
+/**
+ * 依赖收集 worker 的主线程客户端
+ *
+ * 依赖收集需要深度遍历整棵节点树并对每个属性做匹配，节点/数据源多时会长时间占用主线程导致页面卡死，
+ * 这里把遍历匹配放到 worker 中执行，主线程只负责把结果写回 target。
+ *
+ * 全量收集与增量收集共用一个常驻 worker：增量收集调用频繁（每次节点更新都会触发），
+ * 按次创建 worker 的启动开销无法接受，也容易漏掉销毁导致线程泄漏。
+ */
+export class CollectWorkerClient {
+  private worker: Worker | null = null;
+
+  private seed = 0;
+
+  private pending = new Map<number, (response: CollectWorkerResponse | null) => void>();
+
+  public get isSupported() {
+    return typeof Worker !== 'undefined';
+  }
+
+  /**
+   * 在 worker 中全量收集整个 DSL 的依赖，target 由 worker 根据 DSL 重建
+   * @returns 收集结果，返回 null 表示 worker 不可用或执行失败
+   */
+  public collectDsl(dsl: MApp): Promise<DepsData | null> {
+    return this.request((id) => ({ id, dsl: serialize(dsl) })).then((response) => response?.deps || null);
+  }
+
+  /**
+   * 在 worker 中增量收集指定节点的依赖，target 以可序列化描述的形式传入
+   * @returns 收集结果，返回 null 表示 worker 不可用或执行失败，调用方需要回退到主线程收集
+   */
+  public collect(payload: CollectWorkerPayload): Promise<CollectWorkerResult | null> {
+    return this.request((id) => ({ id, payload: serialize(payload) })).then((response) =>
+      response ? { deps: response.deps || {}, nodeIds: response.nodeIds || [] } : null,
+    );
+  }
+
+  public terminate() {
+    this.worker?.terminate();
+    this.worker = null;
+    this.settleAllPending();
+  }
+
+  /**
+   * 丢弃在途请求并重建 worker
+   * clearIdleTasks / reset 中断收集时调用，避免已 abort 的长任务继续占着常驻 worker 拖慢后续收集
+   */
+  public abort() {
+    this.terminate();
+  }
+
+  /**
+   * worker 按收到的顺序逐个处理请求，因此请求间不会互相打断，用 id 把结果分发回各自的调用方
+   */
+  private request(createRequest: (id: number) => CollectWorkerRequest): Promise<CollectWorkerResponse | null> {
+    const worker = this.getWorker();
+
+    if (!worker) {
+      return Promise.resolve(null);
+    }
+
+    this.seed += 1;
+    const id = this.seed;
+
+    return new Promise<CollectWorkerResponse | null>((resolve) => {
+      this.pending.set(id, resolve);
+
+      try {
+        // 节点配置中可能存在函数等无法结构化克隆的值，需要先序列化再传递
+        worker.postMessage(createRequest(id));
+      } catch (e) {
+        error('magic editor: 依赖收集 worker 通信失败', e);
+        this.pending.delete(id);
+        resolve(null);
+      }
+    });
+  }
+
+  private getWorker() {
+    if (!this.isSupported) {
+      return null;
+    }
+
+    if (this.worker) {
+      return this.worker;
+    }
+
+    try {
+      const worker: Worker = new CollectWorker();
+      worker.onmessage = (e: MessageEvent<CollectWorkerResponse>) => {
+        this.handleResponse(e.data);
+      };
+      // worker 整体异常时无法定位到具体请求，只能结算全部在途请求并重建 worker
+      worker.onerror = () => {
+        this.handleFatalError();
+      };
+      worker.onmessageerror = () => {
+        this.handleFatalError();
+      };
+      this.worker = worker;
+    } catch (e) {
+      error('magic editor: 依赖收集 worker 创建失败', e);
+      return null;
+    }
+
+    return this.worker;
+  }
+
+  private handleResponse(response: CollectWorkerResponse) {
+    const resolve = this.pending.get(response?.id);
+
+    if (!resolve) {
+      return;
+    }
+
+    this.pending.delete(response.id);
+    resolve(response.failed ? null : response);
+  }
+
+  private handleFatalError() {
+    this.worker?.terminate();
+    this.worker = null;
+    this.settleAllPending();
+  }
+
+  private settleAllPending() {
+    const resolvers = [...this.pending.values()];
+    this.pending.clear();
+
+    for (const resolve of resolvers) {
+      resolve(null);
+    }
+  }
+}

package/src/utils/dep/idle-task.ts

@@ -1,5 +1,7 @@
 import { EventEmitter } from 'events';
 
+import { error } from '../logger';
+
 export interface IdleTaskEvents {
   finish: [];
   'hight-level-finish': [];
@@ -11,6 +13,18 @@ type TaskList<T> = {
   data: T;
 }[];
 
+/**
+ * 回调因 timeout 触发（主线程一直没有空闲）时，单次回调执行任务的时间预算，单位 ms
+ * 参考一帧内可让出的余量：既保证队列有进展，又不长时间阻塞主线程
+ */
+const TIMEOUT_RUN_BUDGET = 5;
+
+/**
+ * 回调因 timeout 触发时，每两次读取时钟之间执行的任务数
+ * 与空闲时间 <=5ms 时的批量保持一致，避免每个任务都读一次时钟
+ */
+const TIMEOUT_BATCH_SIZE = 10;
+
 globalThis.requestIdleCallback =
   globalThis.requestIdleCallback ||
   function (cb) {
@@ -25,6 +39,12 @@ globalThis.requestIdleCallback =
     }, 1);
   };
 
+globalThis.cancelIdleCallback =
+  globalThis.cancelIdleCallback ||
+  function (handle) {
+    clearTimeout(handle as unknown as ReturnType<typeof setTimeout>);
+  };
+
 export class IdleTask<T = any> extends EventEmitter {
   private taskList: TaskList<T> = [];
 
@@ -58,7 +78,7 @@ export class IdleTask<T = any> extends EventEmitter {
     this.taskHandle = null;
 
     this.emit('update-task-length', {
-      length: this.taskList.length + this.hightLevelTaskList.length,
+      length: this.getTaskLength(),
       hightLevelLength: this.hightLevelTaskList.length,
     });
   }
@@ -82,51 +102,100 @@ export class IdleTask<T = any> extends EventEmitter {
   }
 
   private runTaskQueue(deadline: IdleDeadline) {
-    const { hightLevelTaskList, taskList } = this;
-
-    // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
-    // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
-    // 执行不完不会影响配置，但是会影响画布渲染
-    while (deadline.timeRemaining() > 0 && (taskList.length || hightLevelTaskList.length)) {
-      const timeRemaining = deadline.timeRemaining();
-      let times = 0;
-      if (timeRemaining <= 5) {
-        times = 10;
-      } else if (timeRemaining <= 10) {
-        times = 100;
-      } else if (timeRemaining <= 15) {
-        times = 300;
-      } else {
-        times = 600;
+    // 本次回调已触发，句柄随之失效；置空后 clearTasks / enqueueTask 才能正确判断是否需要重新调度
+    this.taskHandle = null;
+
+    try {
+      // 主线程一直没有空闲时，回调只会因 timeout 触发，此时 deadline.timeRemaining() 恒为 0（规范行为）。
+      // 若仍以它作为循环条件，一个任务都执行不了，而 finishRun 又会接着重新调度，
+      // 队列就会无限空转下去：依赖收集永远不结束，collecting 卡在 true，画布也不再更新。
+      // 这种情况下改用自有时间预算推进，既保证有进展，又不会像放开循环那样长时间阻塞主线程。
+      if (deadline.didTimeout) {
+        const start = Date.now();
+        do {
+          this.runTaskBatch(TIMEOUT_BATCH_SIZE);
+        } while (this.getTaskLength() && Date.now() - start < TIMEOUT_RUN_BUDGET);
+
+        return;
       }
 
-      for (let i = 0; i < times; i++) {
-        const task = hightLevelTaskList.length > 0 ? hightLevelTaskList.shift() : taskList.shift();
-        if (task) {
-          task.handler(task.data);
+      // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
+      // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
+      // 执行不完不会影响配置，但是会影响画布渲染
+      while (deadline.timeRemaining() > 0 && this.getTaskLength()) {
+        const timeRemaining = deadline.timeRemaining();
+        let times = 0;
+        if (timeRemaining <= 5) {
+          times = 10;
+        } else if (timeRemaining <= 10) {
+          times = 100;
+        } else if (timeRemaining <= 15) {
+          times = 300;
+        } else {
+          times = 600;
         }
 
-        if (hightLevelTaskList.length === 0 && taskList.length === 0) {
-          break;
-        }
+        this.runTaskBatch(times);
       }
+    } finally {
+      // 必须放在 finally 中：一旦这里被跳过，taskHandle 会一直是真值，
+      // enqueueTask 也就不会再重新调度，剩余任务与任务数将永久停在当前状态
+      this.finishRun();
     }
+  }
 
-    if (!hightLevelTaskList.length) {
-      this.emit('hight-level-finish');
+  /**
+   * 执行一批任务，队列被清空时提前结束
+   */
+  private runTaskBatch(times: number) {
+    for (let i = 0; i < times; i++) {
+      // 每次都从实例上取队列，任务执行过程中调用 clearTasks 能立即生效，不会继续消费已被清空的旧队列
+      const task = this.hightLevelTaskList.length > 0 ? this.hightLevelTaskList.shift() : this.taskList.shift();
+      if (task) {
+        this.runTask(task);
+      }
+
+      if (!this.getTaskLength()) {
+        break;
+      }
     }
+  }
+
+  /**
+   * 单个任务失败不能中断整个队列，否则后续任务永远不会被执行，
+   * 依赖收集会停在半路（收集中状态与剩余任务数都不再变化）
+   */
+  private runTask(task: TaskList<T>[number]) {
+    try {
+      task.handler(task.data);
+    } catch (e) {
+      error('magic editor: 空闲任务执行失败', e);
+    }
+  }
 
-    if (hightLevelTaskList.length || taskList.length) {
-      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
-    } else {
-      this.taskHandle = 0;
+  private finishRun() {
+    try {
+      if (!this.hightLevelTaskList.length) {
+        this.emit('hight-level-finish');
+      }
+    } finally {
+      if (this.getTaskLength()) {
+        // 任务执行或事件监听中可能已经重新调度过
+        if (!this.taskHandle) {
+          this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
+        }
+      } else {
+        this.emit('finish');
+      }
 
-      this.emit('finish');
+      this.emit('update-task-length', {
+        length: this.getTaskLength(),
+        hightLevelLength: this.hightLevelTaskList.length,
+      });
     }
+  }
 
-    this.emit('update-task-length', {
-      length: taskList.length + hightLevelTaskList.length,
-      hightLevelLength: hightLevelTaskList.length,
-    });
+  private getTaskLength() {
+    return this.taskList.length + this.hightLevelTaskList.length;
   }
 }

package/src/utils/dep/worker.ts

@@ -3,30 +3,85 @@ import {
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
+  createTargetByDescriptor,
   type DepData,
+  type DepExtendedData,
   DepTargetType,
   type Id,
   type MApp,
+  type TargetDescriptor,
+  type TargetNode,
   traverseTarget,
   Watcher,
 } from '@tmagic/core';
 
 import { error } from '../logger';
 
-onmessage = (e) => {
-  const watcher = new Watcher({ initialTargets: {} });
+export type DepsData = Record<string, Record<Id, DepData>>;
 
-  const { dsl } = e.data;
+/** 全量收集请求：worker 中根据 DSL 重建代码块/数据源 target */
+export interface DslCollectRequest {
+  /** 请求 id，用于把结果与调用方对应起来 */
+  id: number;
+  /** serialize-javascript 序列化后的 MApp */
+  dsl: string;
+}
 
+export interface CollectWorkerPayload {
+  /** 待收集的节点 */
+  nodes: TargetNode[];
+  /** 参与本次收集的 target 描述，worker 中据此重建 target */
+  targets: TargetDescriptor[];
+  depExtendedData: DepExtendedData;
+  deep: boolean;
+}
+
+/** 增量收集请求：target 由主线程以可序列化描述的形式传入 */
+export interface NodesCollectRequest {
+  id: number;
+  /** serialize-javascript 序列化后的 CollectWorkerPayload */
+  payload: string;
+}
+
+export type CollectWorkerRequest = DslCollectRequest | NodesCollectRequest;
+
+export interface CollectWorkerResponse {
+  id: number;
+  /** 收集结果，结构为 { [target.type]: { [target.id]: deps } } */
+  deps: DepsData;
+  /** 增量收集时本次覆盖到的节点 id（deep=true 时含子孙），主线程据此删除旧依赖 */
+  nodeIds?: Id[];
+  /** 收集失败，调用方需要回退到主线程收集 */
+  failed?: boolean;
+}
+
+/**
+ * 收集本次会覆盖到的节点 id
+ * 必须与 deep 一致：deep=false 时不能带上子孙 id，否则写回阶段 removeDep 会清掉未重收的子节点依赖
+ */
+const getNodeIds = (nodes: TargetNode[], deep: boolean, ids: Id[] = []) => {
+  for (const node of nodes) {
+    ids.push(node.id);
+
+    if (deep && Array.isArray(node.items) && node.items.length) {
+      getNodeIds(node.items, deep, ids);
+    }
+  }
+
+  return ids;
+};
+
+const collectDsl = ({ id, dsl }: DslCollectRequest) => {
   try {
     // eslint-disable-next-line no-eval
     const mApp: MApp = eval(`(${dsl})`);
 
     if (!mApp) {
-      postMessage({});
+      postMessage({ id, deps: {} });
+      return;
     }
 
-    watcher.clearTargets();
+    const watcher = new Watcher({ initialTargets: {} });
 
     if (mApp.codeBlocks) {
       for (const [id, code] of Object.entries(mApp.codeBlocks)) {
@@ -48,7 +103,7 @@ onmessage = (e) => {
       watcher.collectItems(page, targets, { pageId: page.id }, true);
     }
 
-    const data: Record<string, Record<Id, DepData>> = {
+    const deps: DepsData = {
       [DepTargetType.DATA_SOURCE]: {},
       [DepTargetType.DATA_SOURCE_METHOD]: {},
       [DepTargetType.DATA_SOURCE_COND]: {},
@@ -56,12 +111,61 @@ onmessage = (e) => {
     };
 
     traverseTarget(watcher.getTargetsList(), (target) => {
-      data[target.type][target.id] = target.deps;
+      deps[target.type][target.id] = target.deps;
     });
 
-    postMessage(data);
+    const response: CollectWorkerResponse = { id, deps };
+    postMessage(response);
   } catch (e: any) {
     error(e);
-    postMessage({});
+    const response: CollectWorkerResponse = { id, deps: {}, failed: true };
+    postMessage(response);
   }
 };
+
+const collectNodes = ({ id, payload }: NodesCollectRequest) => {
+  try {
+    // eslint-disable-next-line no-eval
+    const { nodes, targets: descriptors, depExtendedData, deep }: CollectWorkerPayload = eval(`(${payload})`);
+
+    const watcher = new Watcher({ initialTargets: {} });
+    // worker 中 target 均为新建（deps 为空），无需删除阶段，直接批量收集
+    const targets = descriptors.map((descriptor) => createTargetByDescriptor(descriptor));
+
+    for (const node of nodes) {
+      watcher.collectItems(node, targets, depExtendedData, deep);
+    }
+
+    const deps: DepsData = {};
+    for (const target of targets) {
+      if (!deps[target.type]) {
+        deps[target.type] = {};
+      }
+      deps[target.type][target.id] = target.deps;
+    }
+
+    const response: CollectWorkerResponse = { id, deps, nodeIds: getNodeIds(nodes, deep) };
+    postMessage(response);
+  } catch (e: any) {
+    error(e);
+    const response: CollectWorkerResponse = { id, deps: {}, nodeIds: [], failed: true };
+    postMessage(response);
+  }
+};
+
+/**
+ * 依赖收集 worker
+ *
+ * 依赖收集需要深度遍历整棵节点树并对每个属性做 target 匹配，节点/数据源多时会长时间占用主线程导致页面卡死，
+ * 因此把遍历匹配放到 worker 中执行。
+ * 全量与增量收集共用一个常驻 worker：收集逻辑只打进一份 inline worker 产物，
+ * 也不会因为频繁收集而反复创建线程，每个请求用 id 与调用方对应。
+ */
+onmessage = (e: MessageEvent<CollectWorkerRequest>) => {
+  if ('dsl' in e.data) {
+    collectDsl(e.data);
+    return;
+  }
+
+  collectNodes(e.data);
+};