@tmagic/editor 1.4.5 → 1.4.7

package/dist/tmagic-editor.js

@@ -8,9 +8,9 @@ import * as monaco from 'monaco-editor';
 import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
+import { Target, Watcher, DepTargetType, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
@@ -505,388 +505,94 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-function BaseFormConfig() {
-  return [
-    {
-      name: "id",
-      type: "hidden"
-    },
-    {
-      name: "type",
-      text: "类型",
-      type: "hidden",
-      defaultValue: "base"
-    },
-    {
-      name: "title",
-      text: "名称",
-      rules: [
-        {
-          required: true,
-          message: "请输入名称"
+const compose = (middleware, isAsync) => {
+  if (!Array.isArray(middleware))
+    throw new TypeError("Middleware 必须是一个数组!");
+  for (const fn of middleware) {
+    if (typeof fn !== "function")
+      throw new TypeError("Middleware 必须由函数组成!");
+  }
+  return (args, next) => {
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i) {
+      if (i <= index) {
+        const error = new Error("next() 被多次调用");
+        if (isAsync) {
+          return Promise.reject(error);
         }
-      ]
-    },
-    {
-      name: "description",
-      text: "描述"
-    }
-  ];
-}
-
-const HttpFormConfig = [
-  {
-    name: "autoFetch",
-    text: "自动请求",
-    type: "switch",
-    defaultValue: true
-  },
-  {
-    name: "responseOptions",
-    items: [
-      {
-        name: "dataPath",
-        text: "数据路径"
+        throw error;
       }
-    ]
-  },
-  {
-    type: "fieldset",
-    name: "options",
-    legend: "HTTP 配置",
-    items: [
-      {
-        name: "url",
-        text: "URL"
-      },
-      {
-        name: "method",
-        text: "Method",
-        type: "select",
-        options: [
-          { text: "GET", value: "GET" },
-          { text: "POST", value: "POST" },
-          { text: "PUT", value: "PUT" },
-          { text: "DELETE", value: "DELETE" }
-        ]
-      },
-      {
-        name: "params",
-        type: "key-value",
-        defaultValue: {},
-        text: "参数"
-      },
-      {
-        name: "data",
-        type: "key-value",
-        defaultValue: {},
-        advanced: true,
-        text: "请求体"
-      },
-      {
-        name: "headers",
-        type: "key-value",
-        defaultValue: {},
-        text: "请求头"
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next)
+        fn = next;
+      if (!fn) {
+        if (isAsync) {
+          return Promise.resolve();
+        }
+        return;
       }
-    ]
-  }
-];
+      if (isAsync) {
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+      try {
+        return fn(...args, dispatch.bind(null, i + 1));
+      } catch (err) {
+        throw err;
+      }
+    }
+  };
+};
 
-const fillConfig$1 = (config) => [
-  ...BaseFormConfig(),
-  ...config,
-  {
-    type: "tab",
-    items: [
-      {
-        title: "数据定义",
-        items: [
-          {
-            name: "fields",
-            type: "data-source-fields",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "方法定义",
-        items: [
-          {
-            name: "methods",
-            type: "data-source-methods",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "事件配置",
-        items: [
-          {
-            name: "events",
-            src: "datasource",
-            type: "event-select"
-          }
-        ]
-      },
-      {
-        title: "mock数据",
-        items: [
-          {
-            name: "mocks",
-            type: "data-source-mocks",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "请求参数裁剪",
-        display: (formState, { model }) => model.type === "http",
-        items: [
-          {
-            name: "beforeRequest",
-            type: "vs-code",
-            parse: true,
-            height: "600px"
-          }
-        ]
-      },
-      {
-        title: "响应数据裁剪",
-        display: (formState, { model }) => model.type === "http",
-        items: [
-          {
-            name: "afterResponse",
-            type: "vs-code",
-            parse: true,
-            height: "600px"
-          }
-        ]
+const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
+const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+  try {
+    let beforeArgs = args;
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = beforeMethod(...beforeArgs) || [];
+      if (isError(beforeArgs))
+        throw beforeArgs;
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
       }
-    ]
-  }
-];
-const getFormConfig = (type, configs) => {
-  switch (type) {
-    case "base":
-      return fillConfig$1([]);
-    case "http":
-      return fillConfig$1(HttpFormConfig);
-    default:
-      return fillConfig$1(configs[type] || []);
+    }
+    let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = afterMethod(returnValue, ...beforeArgs);
+      if (isError(returnValue))
+        throw returnValue;
+    }
+    return returnValue;
+  } catch (error) {
+    throw error;
   }
 };
-const getFormValue = (type, values) => {
-  if (type !== "http") {
-    return values;
-  }
-  return {
-    beforeRequest: `(options, context) => {
-  /**
-   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
-   *
-   * options: HttpOptions
-   *
-   * interface HttpOptions {
-   *  // 请求链接
-   *  url: string;
-   *  // query参数
-   *  params?: Record<string, string>;
-   *  // body数据
-   *  data?: Record<string, any>;
-   *  // 请求头
-   *  headers?: Record<string, string>;
-   *  // 请求方法 GET/POST
-   *  method?: Method;
-   * }
-   *
-   * context：上下文对象
-   *
-   * interface Content {
-   *  app: AppCore;
-   *  dataSource: HttpDataSource;
-   * }
-   *
-   * return: HttpOptions
-   */
-
-  // 此处的返回值会作为这个接口的入参
-  return options;
-}`,
-    afterResponse: `(response, context) => {
-  /**
-   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
-
-    * context：上下文对象
-    *
-    * interface Content {
-    *  app: AppCore;
-    *  dataSource: HttpDataSource;
-    * }
-    *
-    */
-
-  // 此处的返回值会作为这个接口的返回值
-  return response;
-}`,
-    ...values
-  };
-};
-const getDisplayField = (dataSources, key) => {
-  const displayState = [];
-  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
-  let index = 0;
-  for (const match of matches) {
-    if (typeof match.index === "undefined")
-      break;
-    displayState.push({
-      type: "text",
-      value: key.substring(index, match.index)
-    });
-    let dsText = "";
-    let ds;
-    let fields;
-    match[1].split(".").forEach((item, index2) => {
-      if (index2 === 0) {
-        ds = dataSources.find((ds2) => ds2.id === item);
-        dsText += ds?.title || item;
-        fields = ds?.fields;
-        return;
-      }
-      const field = fields?.find((field2) => field2.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
-    });
-    displayState.push({
-      type: "var",
-      value: dsText
-    });
-    index = match.index + match[0].length;
-  }
-  if (index < key.length) {
-    displayState.push({
-      type: "text",
-      value: key.substring(index)
-    });
-  }
-  return displayState;
-};
-const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
-  const child = [];
-  fields.forEach((field) => {
-    if (!dataSourceFieldType.length) {
-      dataSourceFieldType.push("any");
-    }
-    const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
-    const item = {
-      label: field.title || field.name,
-      value: field.name,
-      children
-    };
-    const fieldType = field.type || "any";
-    if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
-      child.push(item);
-      return;
-    }
-    if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
-      return;
-    }
-    if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
-      return;
-    }
-    child.push(item);
-  });
-  return child;
-};
-
-const compose = (middleware, isAsync) => {
-  if (!Array.isArray(middleware))
-    throw new TypeError("Middleware 必须是一个数组!");
-  for (const fn of middleware) {
-    if (typeof fn !== "function")
-      throw new TypeError("Middleware 必须由函数组成!");
-  }
-  return (args, next) => {
-    let index = -1;
-    return dispatch(0);
-    function dispatch(i) {
-      if (i <= index) {
-        const error = new Error("next() 被多次调用");
-        if (isAsync) {
-          return Promise.reject(error);
-        }
-        throw error;
-      }
-      index = i;
-      let fn = middleware[i];
-      if (i === middleware.length && next)
-        fn = next;
-      if (!fn) {
-        if (isAsync) {
-          return Promise.resolve();
-        }
-        return;
-      }
-      if (isAsync) {
-        try {
-          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
-        } catch (err) {
-          return Promise.reject(err);
-        }
-      }
-      try {
-        return fn(...args, dispatch.bind(null, i + 1));
-      } catch (err) {
-        throw err;
-      }
-    }
-  };
-};
-
-const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
-const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-  try {
-    let beforeArgs = args;
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = beforeMethod(...beforeArgs) || [];
-      if (isError(beforeArgs))
-        throw beforeArgs;
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
-    }
-    let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = afterMethod(returnValue, ...beforeArgs);
-      if (isError(returnValue))
-        throw returnValue;
-    }
-    return returnValue;
-  } catch (error) {
-    throw error;
-  }
-};
-const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-  try {
-    let beforeArgs = args;
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = await beforeMethod(...beforeArgs) || [];
-      if (isError(beforeArgs))
-        throw beforeArgs;
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
-    }
-    let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(returnValue, ...beforeArgs);
-      if (isError(returnValue))
-        throw returnValue;
-    }
-    return returnValue;
-  } catch (error) {
-    throw error;
+const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+  try {
+    let beforeArgs = args;
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = await beforeMethod(...beforeArgs) || [];
+      if (isError(beforeArgs))
+        throw beforeArgs;
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
+      }
+    }
+    let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
+      if (isError(returnValue))
+        throw returnValue;
+    }
+    return returnValue;
+  } catch (error) {
+    throw error;
   }
 };
 class BaseService extends EventEmitter {
@@ -963,1077 +669,204 @@ class BaseService extends EventEmitter {
 }
 
 const canUsePluginMethods$6 = {
-  async: [],
-  sync: [
-    "getFormConfig",
-    "setFormConfig",
-    "getFormValue",
-    "setFormValue",
-    "getFormEvent",
-    "setFormEvent",
-    "getFormMethod",
-    "setFormMethod",
-    "add",
-    "update",
-    "remove",
-    "createId"
-  ]
+  async: [
+    "setPropsConfig",
+    "getPropsConfig",
+    "setPropsValue",
+    "getPropsValue",
+    "fillConfig",
+    "getDefaultPropsValue"
+  ],
+  sync: ["createId", "setNewItemId"]
 };
-class DataSource extends BaseService {
+class Props extends BaseService {
   state = reactive({
-    datasourceTypeList: [],
-    dataSources: [],
-    editable: true,
-    configs: {},
-    values: {},
-    events: {},
-    methods: {}
+    propsConfigMap: {},
+    propsValueMap: {},
+    relateIdMap: {}
   });
   constructor() {
-    super(canUsePluginMethods$6.sync.map((methodName) => ({ name: methodName, isAsync: false })));
-  }
-  set(name, value) {
-    this.state[name] = value;
-  }
-  get(name) {
-    return this.state[name];
+    super([
+      ...canUsePluginMethods$6.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      ...canUsePluginMethods$6.sync.map((methodName) => ({ name: methodName, isAsync: false }))
+    ]);
   }
-  getFormConfig(type = "base") {
-    return getFormConfig(toLine(type), this.get("configs"));
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit("props-configs-change");
   }
-  setFormConfig(type, config) {
-    this.get("configs")[toLine(type)] = config;
+  async fillConfig(config, labelWidth) {
+    return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
   }
-  getFormValue(type = "base") {
-    return getFormValue(toLine(type), this.get("values")[type]);
+  async setPropsConfig(type, config) {
+    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
   }
-  setFormValue(type, value) {
-    this.get("values")[toLine(type)] = value;
-  }
-  getFormEvent(type = "base") {
-    return this.get("events")[toLine(type)] || [];
-  }
-  setFormEvent(type, value = []) {
-    this.get("events")[toLine(type)] = value;
+  /**
+   * 获取指点类型的组件属性表单配置
+   * @param type 组件类型
+   * @returns 组件属性表单配置
+   */
+  async getPropsConfig(type) {
+    if (type === "area") {
+      return await this.getPropsConfig("button");
+    }
+    return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
   }
-  getFormMethod(type = "base") {
-    return this.get("methods")[toLine(type)] || [];
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
   }
-  setFormMethod(type, value = []) {
-    this.get("methods")[toLine(type)] = value;
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  async setPropsValue(type, value) {
+    this.state.propsValueMap[toLine(type)] = value;
   }
-  add(config) {
-    const newConfig = {
-      ...config,
-      id: this.createId()
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+    const type = toLine(componentType);
+    if (type === "area") {
+      const value = await this.getPropsValue("button");
+      value.className = "action-area";
+      value.text = "";
+      if (value.style) {
+        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+      }
+      return value;
+    }
+    const id = this.createId(type);
+    const defaultPropsValue = this.getDefaultPropsValue(type);
+    const data = this.setNewItemId(
+      cloneDeep({
+        type,
+        ...defaultValue
+      })
+    );
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
     };
-    this.get("dataSources").push(newConfig);
-    this.emit("add", newConfig);
-    return newConfig;
   }
-  update(config) {
-    const dataSources = this.get("dataSources");
-    const index = dataSources.findIndex((ds) => ds.id === config.id);
-    dataSources[index] = cloneDeep(config);
-    this.emit("update", config);
+  createId(type) {
+    return `${type}_${guid()}`;
+  }
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
+   * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  setNewItemId(config, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = this.createId(config.type || "component");
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        this.setNewItemId(item);
+      }
+    }
     return config;
   }
-  remove(id) {
-    const dataSources = this.get("dataSources");
-    const index = dataSources.findIndex((ds) => ds.id === id);
-    dataSources.splice(index, 1);
-    this.emit("remove", id);
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  getDefaultPropsValue(type) {
+    return ["page", "container"].includes(type) ? {
+      type,
+      layout: "absolute",
+      style: {},
+      name: type,
+      items: []
+    } : {
+      type,
+      style: {},
+      name: type
+    };
   }
-  createId() {
-    return `ds_${guid()}`;
+  resetState() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
   }
-  getDataSourceById(id) {
-    return this.get("dataSources").find((ds) => ds.id === id);
+  /**
+   * 替换关联ID
+   * @param originConfigs 原组件配置
+   * @param targetConfigs 待替换的组件配置
+   */
+  replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
+    const relateIdMap = this.getRelateIdMap();
+    if (Object.keys(relateIdMap).length === 0)
+      return;
+    const target = new Target({
+      ...collectorOptions
+    });
+    const coperWatcher = new Watcher();
+    coperWatcher.addTarget(target);
+    coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
+    originConfigs.forEach((config) => {
+      const newId = relateIdMap[config.id];
+      const path = getNodePath(newId, targetConfigs);
+      const targetConfig = path[path.length - 1];
+      if (!targetConfig)
+        return;
+      target.deps[config.id]?.keys?.forEach((fullKey) => {
+        const relateOriginId = getValueByKeyPath(fullKey, config);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId)
+          return;
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
+      });
+      if (config.items && Array.isArray(config.items)) {
+        this.replaceRelateId(config.items, targetConfigs, collectorOptions);
+      }
+    });
   }
-  resetState() {
-    this.set("dataSources", []);
+  /**
+   * 清除setNewItemId前后映射关系
+   */
+  clearRelateId() {
+    this.state.relateIdMap = {};
   }
   destroy() {
-    this.removeAllListeners();
     this.resetState();
+    this.removeAllListeners();
     this.removeAllPlugins();
   }
   usePlugin(options) {
     super.usePlugin(options);
   }
+  /**
+   * 获取setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @returns 新旧ID映射
+   */
+  getRelateIdMap() {
+    return this.state.relateIdMap;
+  }
+  /**
+   * 记录setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @param newId 分配的新ID
+   */
+  setRelateId(oldId, newId) {
+    this.state.relateIdMap[oldId] = newId;
+  }
 }
-const dataSourceService = new DataSource();
-
-const arrayOptions = [
-  { text: "包含", value: "include" },
-  { text: "不包含", value: "not_include" }
-];
-const eqOptions = [
-  { text: "等于", value: "=" },
-  { text: "不等于", value: "!=" }
-];
-const numberOptions = [
-  { text: "大于", value: ">" },
-  { text: "大于等于", value: ">=" },
-  { text: "小于", value: "<" },
-  { text: "小于等于", value: "<=" },
-  { text: "在范围内", value: "between" },
-  { text: "不在范围内", value: "not_between" }
-];
-const styleTabConfig = {
-  title: "样式",
-  items: [
-    {
-      name: "style",
-      items: [
-        {
-          type: "fieldset",
-          legend: "位置",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "position",
-              text: "固定定位",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "checkbox",
-                activeValue: "fixed",
-                inactiveValue: "absolute",
-                defaultValue: "absolute"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "left",
-              text: "left",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "top",
-              text: "top",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              },
-              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
-            },
-            {
-              type: "data-source-field-select",
-              name: "right",
-              text: "right",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "bottom",
-              text: "bottom",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              },
-              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "盒子",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "width",
-              text: "宽度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "height",
-              text: "高度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              text: "overflow",
-              name: "overflow",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "visible", value: "visible" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "clip", value: "clip" },
-                  { text: "scroll", value: "scroll" },
-                  { text: "auto", value: "auto" },
-                  { text: "overlay", value: "overlay" }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "边框",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "borderWidth",
-              text: "宽度",
-              defaultValue: "0",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "borderColor",
-              text: "颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "borderStyle",
-              text: "样式",
-              defaultValue: "none",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "none", value: "none" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "dotted", value: "dotted" },
-                  { text: "dashed", value: "dashed" },
-                  { text: "solid", value: "solid" },
-                  { text: "double", value: "double" },
-                  { text: "groove", value: "groove" },
-                  { text: "ridge", value: "ridge" },
-                  { text: "inset", value: "inset" },
-                  { text: "outset", value: "outset" }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "背景",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "backgroundImage",
-              text: "背景图",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundColor",
-              text: "背景颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "colorPicker"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundRepeat",
-              text: "背景图重复",
-              defaultValue: "no-repeat",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "repeat", value: "repeat" },
-                  { text: "repeat-x", value: "repeat-x" },
-                  { text: "repeat-y", value: "repeat-y" },
-                  { text: "no-repeat", value: "no-repeat" },
-                  { text: "inherit", value: "inherit" }
-                ]
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundSize",
-              text: "背景图大小",
-              defaultValue: "100% 100%",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "字体",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "color",
-              text: "颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "colorPicker"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "fontSize",
-              text: "大小",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "fontWeight",
-              text: "粗细",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "变形",
-          name: "transform",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "rotate",
-              text: "旋转角度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "scale",
-              text: "缩放",
-              checkStrictly: false,
-              dataSourceFieldType: ["number", "string"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-const eventTabConfig = {
-  title: "事件",
-  items: [
-    {
-      name: "events",
-      src: "component",
-      labelWidth: "100px",
-      type: "event-select"
-    }
-  ]
-};
-const advancedTabConfig = {
-  title: "高级",
-  lazy: true,
-  items: [
-    {
-      name: "created",
-      text: "created",
-      type: "code-select"
-    },
-    {
-      name: "mounted",
-      text: "mounted",
-      type: "code-select"
-    }
-  ]
-};
-const displayTabConfig = {
-  title: "显示条件",
-  display: (vm, { model }) => model.type !== "page",
-  items: [
-    {
-      type: "groupList",
-      name: "displayConds",
-      titlePrefix: "条件组",
-      expandAll: true,
-      items: [
-        {
-          type: "table",
-          name: "cond",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "field",
-              value: "key",
-              label: "字段",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number", "boolean", "any"]
-            },
-            {
-              type: "select",
-              options: (mForm, { model }) => {
-                const [id, ...fieldNames] = model.field;
-                const ds = dataSourceService.getDataSourceById(id);
-                let fields = ds?.fields || [];
-                let type = "";
-                (fieldNames || []).forEach((fieldName) => {
-                  const field = fields.find((f) => f.name === fieldName);
-                  fields = field?.fields || [];
-                  type = field?.type || "";
-                });
-                if (type === "array") {
-                  return arrayOptions;
-                }
-                if (type === "boolean") {
-                  return [
-                    { text: "是", value: "is" },
-                    { text: "不是", value: "not" }
-                  ];
-                }
-                if (type === "number") {
-                  return [...eqOptions, ...numberOptions];
-                }
-                if (type === "string") {
-                  return [...arrayOptions, ...eqOptions];
-                }
-                return [...arrayOptions, ...eqOptions, ...numberOptions];
-              },
-              label: "条件",
-              name: "op"
-            },
-            {
-              label: "值",
-              items: [
-                {
-                  name: "value",
-                  type: (mForm, { model }) => {
-                    const [id, ...fieldNames] = model.field;
-                    const ds = dataSourceService.getDataSourceById(id);
-                    let fields = ds?.fields || [];
-                    let type = "";
-                    (fieldNames || []).forEach((fieldName) => {
-                      const field = fields.find((f) => f.name === fieldName);
-                      fields = field?.fields || [];
-                      type = field?.type || "";
-                    });
-                    if (type === "number") {
-                      return "number";
-                    }
-                    if (type === "boolean") {
-                      return "select";
-                    }
-                    return "text";
-                  },
-                  options: [
-                    { text: "true", value: true },
-                    { text: "false", value: false }
-                  ],
-                  display: (vm, { model }) => !["between", "not_between"].includes(model.op)
-                },
-                {
-                  name: "range",
-                  type: "number-range",
-                  display: (vm, { model }) => ["between", "not_between"].includes(model.op)
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-const fillConfig = (config = [], labelWidth = "80px") => [
-  {
-    type: "tab",
-    labelWidth,
-    items: [
-      {
-        title: "属性",
-        items: [
-          // 组件类型，必须要有
-          {
-            text: "type",
-            name: "type",
-            type: "hidden"
-          },
-          // 组件id，必须要有
-          {
-            name: "id",
-            type: "display",
-            text: "id"
-          },
-          {
-            name: "name",
-            text: "组件名称"
-          },
-          ...config
-        ]
-      },
-      { ...styleTabConfig },
-      { ...eventTabConfig },
-      { ...advancedTabConfig },
-      { ...displayTabConfig }
-    ]
-  }
-];
-
-const log = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.log("magic editor: ", ...args);
-  }
-};
-const info = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.info("magic editor: ", ...args);
-  }
-};
-const warn = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.warn("magic editor: ", ...args);
-  }
-};
-const debug = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.debug("magic editor: ", ...args);
-  }
-};
-const error = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.error("magic editor: ", ...args);
-  }
-};
-
-var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
-  ColumnLayout2["LEFT"] = "left";
-  ColumnLayout2["CENTER"] = "center";
-  ColumnLayout2["RIGHT"] = "right";
-  return ColumnLayout2;
-})(ColumnLayout || {});
-var SideItemKey = /* @__PURE__ */ ((SideItemKey2) => {
-  SideItemKey2["COMPONENT_LIST"] = "component-list";
-  SideItemKey2["LAYER"] = "layer";
-  SideItemKey2["CODE_BLOCK"] = "code-block";
-  SideItemKey2["DATA_SOURCE"] = "data-source";
-  return SideItemKey2;
-})(SideItemKey || {});
-var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
-  LayerOffset2["TOP"] = "top";
-  LayerOffset2["BOTTOM"] = "bottom";
-  return LayerOffset2;
-})(LayerOffset || {});
-var Layout = /* @__PURE__ */ ((Layout2) => {
-  Layout2["FLEX"] = "flex";
-  Layout2["FIXED"] = "fixed";
-  Layout2["RELATIVE"] = "relative";
-  Layout2["ABSOLUTE"] = "absolute";
-  return Layout2;
-})(Layout || {});
-var Keys = /* @__PURE__ */ ((Keys2) => {
-  Keys2["ESCAPE"] = "Space";
-  return Keys2;
-})(Keys || {});
-const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
-var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
-  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
-  CodeDeleteErrorType2["BIND"] = "bind";
-  return CodeDeleteErrorType2;
-})(CodeDeleteErrorType || {});
-const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
-var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
-  KeyBindingCommand2["COPY_NODE"] = "tmagic-system-copy-node";
-  KeyBindingCommand2["PASTE_NODE"] = "tmagic-system-paste-node";
-  KeyBindingCommand2["DELETE_NODE"] = "tmagic-system-delete-node";
-  KeyBindingCommand2["CUT_NODE"] = "tmagic-system-cut-node";
-  KeyBindingCommand2["UNDO"] = "tmagic-system-undo";
-  KeyBindingCommand2["REDO"] = "tmagic-system-redo";
-  KeyBindingCommand2["ZOOM_IN"] = "tmagic-system-zoom-in";
-  KeyBindingCommand2["ZOOM_OUT"] = "tmagic-system-zoom-out";
-  KeyBindingCommand2["ZOOM_RESET"] = "tmagic-system-zoom-reset";
-  KeyBindingCommand2["ZOOM_FIT"] = "tmagic-system-zoom-fit";
-  KeyBindingCommand2["MOVE_UP_1"] = "tmagic-system-move-up-1";
-  KeyBindingCommand2["MOVE_DOWN_1"] = "tmagic-system-move-down-1";
-  KeyBindingCommand2["MOVE_LEFT_1"] = "tmagic-system-move-left-1";
-  KeyBindingCommand2["MOVE_RIGHT_1"] = "tmagic-system-move-right-1";
-  KeyBindingCommand2["MOVE_UP_10"] = "tmagic-system-move-up-10";
-  KeyBindingCommand2["MOVE_DOWN_10"] = "tmagic-system-move-down-10";
-  KeyBindingCommand2["MOVE_LEFT_10"] = "tmagic-system-move-left-10";
-  KeyBindingCommand2["MOVE_RIGHT_10"] = "tmagic-system-move-right-10";
-  KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
-  return KeyBindingCommand2;
-})(KeyBindingCommand || {});
-var DragType = /* @__PURE__ */ ((DragType2) => {
-  DragType2["COMPONENT_LIST"] = "component-list";
-  DragType2["LAYER_TREE"] = "layer-tree";
-  return DragType2;
-})(DragType || {});
-const UI_SELECT_MODE_EVENT_NAME = "ui-select";
-
-const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-const getPageList = (root) => {
-  if (!root)
-    return [];
-  if (!Array.isArray(root.items))
-    return [];
-  return root.items.filter((item) => isPage(item));
-};
-const getPageFragmentList = (root) => {
-  if (!root)
-    return [];
-  if (!Array.isArray(root.items))
-    return [];
-  return root.items.filter((item) => isPageFragment(item));
-};
-const getPageNameList = (pages) => pages.map((page) => page.name || "index");
-const generatePageName = (pageNameList, type) => {
-  let pageLength = pageNameList.length;
-  if (!pageLength)
-    return `${type}_index`;
-  let pageName = `${type}_${pageLength}`;
-  while (pageNameList.includes(pageName)) {
-    pageLength += 1;
-    pageName = `${type}_${pageLength}`;
-  }
-  return pageName;
-};
-const generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
-const isFixed = (node) => node.style?.position === "fixed";
-const getNodeIndex = (id, parent) => {
-  const items = parent?.items || [];
-  return items.findIndex((item) => `${item.id}` === `${id}`);
-};
-const getRelativeStyle = (style = {}) => ({
-  ...style,
-  position: "relative",
-  top: 0,
-  left: 0
-});
-const getMiddleTop = (node, parentNode, stage) => {
-  let height = node.style?.height || 0;
-  if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
-    return node.style?.top;
-  if (!isNumber(height)) {
-    height = 0;
-  }
-  const { height: parentHeight } = parentNode.style;
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
-  }
-  return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
-};
-const getInitPositionStyle = (style = {}, layout) => {
-  if (layout === Layout.ABSOLUTE) {
-    const newStyle = {
-      ...style,
-      position: "absolute"
-    };
-    if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") {
-      newStyle.left = 0;
-    }
-    return newStyle;
-  }
-  if (layout === Layout.RELATIVE) {
-    return getRelativeStyle(style);
-  }
-  return style;
-};
-const setChildrenLayout = (node, layout) => {
-  node.items?.forEach((child) => {
-    setLayout(child, layout);
-  });
-  return node;
-};
-const setLayout = (node, layout) => {
-  if (isPop(node))
-    return;
-  const style = node.style || {};
-  if (style.position === "fixed")
-    return;
-  if (layout !== Layout.RELATIVE) {
-    style.position = "absolute";
-  } else {
-    node.style = getRelativeStyle(style);
-    node.style.right = "auto";
-    node.style.bottom = "auto";
-  }
-  return node;
-};
-const change2Fixed = (node, root) => {
-  const path = getNodePath(node.id, root.items);
-  const offset = {
-    left: 0,
-    top: 0
-  };
-  path.forEach((value) => {
-    offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
-    offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
-  });
-  return {
-    ...node.style || {},
-    ...offset
-  };
-};
-const Fixed2Other = async (node, root, getLayout) => {
-  const path = getNodePath(node.id, root.items);
-  const cur = path.pop();
-  const offset = {
-    left: cur?.style?.left || 0,
-    top: cur?.style?.top || 0,
-    right: "",
-    bottom: ""
-  };
-  path.forEach((value) => {
-    offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
-    offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
-  });
-  const style = node.style || {};
-  const parent = path.pop();
-  if (!parent) {
-    return getRelativeStyle(style);
-  }
-  const layout = await getLayout(parent);
-  if (layout !== Layout.RELATIVE) {
-    return {
-      ...style,
-      ...offset,
-      position: "absolute"
-    };
-  }
-  return getRelativeStyle(style);
-};
-const getGuideLineFromCache = (key) => {
-  if (!key)
-    return [];
-  const guideLineCacheData = globalThis.localStorage.getItem(key);
-  if (guideLineCacheData) {
-    try {
-      return JSON.parse(guideLineCacheData) || [];
-    } catch (e) {
-      console.error(e);
-    }
-  }
-  return [];
-};
-const fixNodeLeft = (config, parent, doc) => {
-  if (!doc || !config.style || !isNumber(config.style.left))
-    return config.style?.left;
-  const el = doc.getElementById(`${config.id}`);
-  const parentEl = doc.getElementById(`${parent.id}`);
-  const left = Number(config.style?.left) || 0;
-  if (el && parentEl) {
-    const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
-    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
-    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
-      return calcParentOffsetWidth - calcElOffsetWidth;
-    }
-  }
-  return config.style.left;
-};
-const fixNodePosition = (config, parent, stage) => {
-  if (config.style?.position !== "absolute") {
-    return config.style;
-  }
-  return {
-    ...config.style || {},
-    top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
-  };
-};
-const serializeConfig = (config) => serialize(config, {
-  space: 2,
-  unsafe: true
-}).replace(/"(\w+)":\s/g, "$1: ");
-const traverseNode = (node, cb, parents = []) => {
-  cb(node, parents);
-  if (node.items?.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item, cb, [...parents]);
-    });
-  }
-};
-
-class Dep extends BaseService {
-  watcher = new Watcher({ initialTargets: reactive({}) });
-  removeTargets(type = DepTargetType.DEFAULT) {
-    this.watcher.removeTargets(type);
-    this.emit("remove-target");
-  }
-  getTargets(type = DepTargetType.DEFAULT) {
-    return this.watcher.getTargets(type);
-  }
-  getTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.getTarget(id, type);
-  }
-  addTarget(target) {
-    this.watcher.addTarget(target);
-    this.emit("add-target", target);
-  }
-  removeTarget(id, type = DepTargetType.DEFAULT) {
-    this.watcher.removeTarget(id, type);
-    this.emit("remove-target");
-  }
-  clearTargets() {
-    this.watcher.clearTargets();
-  }
-  collect(nodes, deep = false, type) {
-    this.watcher.collect(nodes, deep, type);
-    this.emit("collected", nodes, deep);
-  }
-  clear(nodes) {
-    return this.watcher.clear(nodes);
-  }
-  clearByType(type, nodes) {
-    return this.watcher.clearByType(type, nodes);
-  }
-  hasTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.hasTarget(id, type);
-  }
-  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
-    return this.watcher.hasSpecifiedTypeTarget(type);
-  }
-}
-const depService = new Dep();
-
-const canUsePluginMethods$5 = {
-  async: [
-    "setPropsConfig",
-    "getPropsConfig",
-    "setPropsValue",
-    "getPropsValue",
-    "fillConfig",
-    "getDefaultPropsValue"
-  ],
-  sync: ["createId", "setNewItemId"]
-};
-class Props extends BaseService {
-  state = reactive({
-    propsConfigMap: {},
-    propsValueMap: {},
-    relateIdMap: {}
-  });
-  constructor() {
-    super([
-      ...canUsePluginMethods$5.async.map((methodName) => ({ name: methodName, isAsync: true })),
-      ...canUsePluginMethods$5.sync.map((methodName) => ({ name: methodName, isAsync: false }))
-    ]);
-  }
-  setPropsConfigs(configs) {
-    Object.keys(configs).forEach((type) => {
-      this.setPropsConfig(toLine(type), configs[type]);
-    });
-    this.emit("props-configs-change");
-  }
-  async fillConfig(config, labelWidth) {
-    return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
-  }
-  async setPropsConfig(type, config) {
-    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
-  }
-  /**
-   * 获取指点类型的组件属性表单配置
-   * @param type 组件类型
-   * @returns 组件属性表单配置
-   */
-  async getPropsConfig(type) {
-    if (type === "area") {
-      return await this.getPropsConfig("button");
-    }
-    return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
-  }
-  setPropsValues(values) {
-    Object.keys(values).forEach((type) => {
-      this.setPropsValue(toLine(type), values[type]);
-    });
-  }
-  /**
-   * 为指点类型组件设置组件初始值
-   * @param type 组件类型
-   * @param value 组件初始值
-   */
-  async setPropsValue(type, value) {
-    this.state.propsValueMap[toLine(type)] = value;
-  }
-  /**
-   * 获取指定类型的组件初始值
-   * @param type 组件类型
-   * @returns 组件初始值
-   */
-  async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
-    const type = toLine(componentType);
-    if (type === "area") {
-      const value = await this.getPropsValue("button");
-      value.className = "action-area";
-      value.text = "";
-      if (value.style) {
-        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
-      }
-      return value;
-    }
-    const id = this.createId(type);
-    const defaultPropsValue = this.getDefaultPropsValue(type);
-    const data = this.setNewItemId(
-      cloneDeep({
-        type,
-        ...defaultValue
-      })
-    );
-    return {
-      id,
-      ...defaultPropsValue,
-      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
-    };
-  }
-  createId(type) {
-    return `${type}_${guid()}`;
-  }
-  /**
-   * 将组件与组件的子元素配置中的id都设置成一个新的ID
-   * 如果没有相同ID并且force为false则保持不变
-   * @param {Object} config 组件配置
-   * @param {Boolean} force 是否强制设置新的ID
-   */
-  /* eslint no-param-reassign: ["error", { "props": false }] */
-  setNewItemId(config, force = true) {
-    if (force || editorService.getNodeById(config.id)) {
-      const newId = this.createId(config.type || "component");
-      this.setRelateId(config.id, newId);
-      config.id = newId;
-    }
-    if (config.items && Array.isArray(config.items)) {
-      for (const item of config.items) {
-        this.setNewItemId(item);
-      }
-    }
-    return config;
-  }
-  /**
-   * 获取默认属性配置
-   * @param type 组件类型
-   * @returns Object
-   */
-  getDefaultPropsValue(type) {
-    return ["page", "container"].includes(type) ? {
-      type,
-      layout: "absolute",
-      style: {},
-      name: type,
-      items: []
-    } : {
-      type,
-      style: {},
-      name: type
-    };
-  }
-  resetState() {
-    this.state.propsConfigMap = {};
-    this.state.propsValueMap = {};
-  }
-  /**
-   * 替换关联ID
-   * @param originConfigs 原组件配置
-   * @param targetConfigs 待替换的组件配置
-   */
-  replaceRelateId(originConfigs, targetConfigs) {
-    const relateIdMap = this.getRelateIdMap();
-    if (Object.keys(relateIdMap).length === 0)
-      return;
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target)
-      return;
-    originConfigs.forEach((config) => {
-      const newId = relateIdMap[config.id];
-      const targetConfig = targetConfigs.find((targetConfig2) => targetConfig2.id === newId);
-      if (!targetConfig)
-        return;
-      target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = getValueByKeyPath(fullKey, config);
-        const relateTargetId = relateIdMap[relateOriginId];
-        if (!relateTargetId)
-          return;
-        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
-      });
-    });
-  }
-  /**
-   * 清除setNewItemId前后映射关系
-   */
-  clearRelateId() {
-    this.state.relateIdMap = {};
-  }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-  usePlugin(options) {
-    super.usePlugin(options);
-  }
-  /**
-   * 获取setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @returns 新旧ID映射
-   */
-  getRelateIdMap() {
-    return this.state.relateIdMap;
-  }
-  /**
-   * 记录setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @param newId 分配的新ID
-   */
-  setRelateId(oldId, newId) {
-    this.state.relateIdMap[oldId] = newId;
-  }
-}
-const propsService = new Props();
+const propsService = new Props();
 
 class UndoRedo {
   elementList;
@@ -2159,137 +992,462 @@ class History extends BaseService {
       return null;
     return this.state.pageSteps[this.state.pageId];
   }
-  setCanUndoRedo() {
-    const undoRedo = this.getUndoRedo();
-    this.state.canRedo = undoRedo?.canRedo() || false;
-    this.state.canUndo = undoRedo?.canUndo() || false;
+  setCanUndoRedo() {
+    const undoRedo = this.getUndoRedo();
+    this.state.canRedo = undoRedo?.canRedo() || false;
+    this.state.canUndo = undoRedo?.canUndo() || false;
+  }
+}
+const historyService = new History();
+
+var Protocol = /* @__PURE__ */ ((Protocol2) => {
+  Protocol2["OBJECT"] = "object";
+  Protocol2["JSON"] = "json";
+  Protocol2["STRING"] = "string";
+  Protocol2["NUMBER"] = "number";
+  Protocol2["BOOLEAN"] = "boolean";
+  return Protocol2;
+})(Protocol || {});
+const canUsePluginMethods$5 = {
+  async: [],
+  sync: ["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]
+};
+class WebStorage extends BaseService {
+  storage = globalThis.localStorage;
+  namespace = "tmagic";
+  constructor() {
+    super(canUsePluginMethods$5.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+  }
+  /**
+   * 获取数据存储对象，可以通过
+   * const storageService = new StorageService();
+   * storageService.usePlugin({
+   *    // 替换存储对象为 sessionStorage
+   *    async afterGetStorage(): Promise<Storage> {
+   *      return window.sessionStorage;
+   *    },
+   * });
+   */
+  getStorage() {
+    return this.storage;
+  }
+  getNamespace() {
+    return this.namespace;
+  }
+  /**
+   * 清理，支持storageService.usePlugin
+   */
+  clear() {
+    const storage = this.getStorage();
+    storage.clear();
+  }
+  /**
+   * 获取存储项，支持storageService.usePlugin
+   */
+  getItem(key, options = {}) {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
+    const { protocol = options.protocol, item } = this.getValueAndProtocol(
+      storage.getItem(`${options.namespace || namespace}:${key}`)
+    );
+    if (item === null)
+      return null;
+    switch (protocol) {
+      case "object" /* OBJECT */:
+        return getConfig("parseDSL")(`(${item})`);
+      case "json" /* JSON */:
+        return JSON.parse(item);
+      case "number" /* NUMBER */:
+        return Number(item);
+      case "boolean" /* BOOLEAN */:
+        return Boolean(item);
+      default:
+        return item;
+    }
+  }
+  /**
+   * 获取指定索引位置的key
+   */
+  key(index) {
+    const storage = this.getStorage();
+    return storage.key(index);
+  }
+  /**
+   * 移除存储项，支持storageService.usePlugin
+   */
+  removeItem(key, options = {}) {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
+    storage.removeItem(`${options.namespace || namespace}:${key}`);
+  }
+  /**
+   * 设置存储项，支持storageService.usePlugin
+   */
+  setItem(key, value, options = {}) {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
+    let item = value;
+    const protocol = options.protocol ? `${options.protocol}:` : "";
+    if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
+      item = `${protocol}${value}`;
+    } else {
+      item = `${protocol}${serialize(value)}`;
+    }
+    storage.setItem(`${options.namespace || namespace}:${key}`, item);
+  }
+  destroy() {
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
+  getValueAndProtocol(value) {
+    let protocol = "";
+    if (value === null) {
+      return {
+        item: value,
+        protocol
+      };
+    }
+    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol = $1;
+      return $3;
+    });
+    return {
+      protocol,
+      item
+    };
+  }
+}
+const storageService = new WebStorage();
+
+var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+  ColumnLayout2["LEFT"] = "left";
+  ColumnLayout2["CENTER"] = "center";
+  ColumnLayout2["RIGHT"] = "right";
+  return ColumnLayout2;
+})(ColumnLayout || {});
+var SideItemKey = /* @__PURE__ */ ((SideItemKey2) => {
+  SideItemKey2["COMPONENT_LIST"] = "component-list";
+  SideItemKey2["LAYER"] = "layer";
+  SideItemKey2["CODE_BLOCK"] = "code-block";
+  SideItemKey2["DATA_SOURCE"] = "data-source";
+  return SideItemKey2;
+})(SideItemKey || {});
+var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+  LayerOffset2["TOP"] = "top";
+  LayerOffset2["BOTTOM"] = "bottom";
+  return LayerOffset2;
+})(LayerOffset || {});
+var Layout = /* @__PURE__ */ ((Layout2) => {
+  Layout2["FLEX"] = "flex";
+  Layout2["FIXED"] = "fixed";
+  Layout2["RELATIVE"] = "relative";
+  Layout2["ABSOLUTE"] = "absolute";
+  return Layout2;
+})(Layout || {});
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["ESCAPE"] = "Space";
+  return Keys2;
+})(Keys || {});
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
+  CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
+  CodeDeleteErrorType2["BIND"] = "bind";
+  return CodeDeleteErrorType2;
+})(CodeDeleteErrorType || {});
+const CODE_DRAFT_STORAGE_KEY = "magicCodeDraft";
+var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
+  KeyBindingCommand2["COPY_NODE"] = "tmagic-system-copy-node";
+  KeyBindingCommand2["PASTE_NODE"] = "tmagic-system-paste-node";
+  KeyBindingCommand2["DELETE_NODE"] = "tmagic-system-delete-node";
+  KeyBindingCommand2["CUT_NODE"] = "tmagic-system-cut-node";
+  KeyBindingCommand2["UNDO"] = "tmagic-system-undo";
+  KeyBindingCommand2["REDO"] = "tmagic-system-redo";
+  KeyBindingCommand2["ZOOM_IN"] = "tmagic-system-zoom-in";
+  KeyBindingCommand2["ZOOM_OUT"] = "tmagic-system-zoom-out";
+  KeyBindingCommand2["ZOOM_RESET"] = "tmagic-system-zoom-reset";
+  KeyBindingCommand2["ZOOM_FIT"] = "tmagic-system-zoom-fit";
+  KeyBindingCommand2["MOVE_UP_1"] = "tmagic-system-move-up-1";
+  KeyBindingCommand2["MOVE_DOWN_1"] = "tmagic-system-move-down-1";
+  KeyBindingCommand2["MOVE_LEFT_1"] = "tmagic-system-move-left-1";
+  KeyBindingCommand2["MOVE_RIGHT_1"] = "tmagic-system-move-right-1";
+  KeyBindingCommand2["MOVE_UP_10"] = "tmagic-system-move-up-10";
+  KeyBindingCommand2["MOVE_DOWN_10"] = "tmagic-system-move-down-10";
+  KeyBindingCommand2["MOVE_LEFT_10"] = "tmagic-system-move-left-10";
+  KeyBindingCommand2["MOVE_RIGHT_10"] = "tmagic-system-move-right-10";
+  KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
+  return KeyBindingCommand2;
+})(KeyBindingCommand || {});
+var DragType = /* @__PURE__ */ ((DragType2) => {
+  DragType2["COMPONENT_LIST"] = "component-list";
+  DragType2["LAYER_TREE"] = "layer-tree";
+  return DragType2;
+})(DragType || {});
+const UI_SELECT_MODE_EVENT_NAME = "ui-select";
+
+const COPY_STORAGE_KEY = "$MagicEditorCopyData";
+const COPY_CODE_STORAGE_KEY = "$MagicEditorCopyCode";
+const COPY_DS_STORAGE_KEY = "$MagicEditorCopyDataSource";
+const getPageList = (root) => {
+  if (!root)
+    return [];
+  if (!Array.isArray(root.items))
+    return [];
+  return root.items.filter((item) => isPage(item));
+};
+const getPageFragmentList = (root) => {
+  if (!root)
+    return [];
+  if (!Array.isArray(root.items))
+    return [];
+  return root.items.filter((item) => isPageFragment(item));
+};
+const getPageNameList = (pages) => pages.map((page) => page.name || "index");
+const generatePageName = (pageNameList, type) => {
+  let pageLength = pageNameList.length;
+  if (!pageLength)
+    return `${type}_index`;
+  let pageName = `${type}_${pageLength}`;
+  while (pageNameList.includes(pageName)) {
+    pageLength += 1;
+    pageName = `${type}_${pageLength}`;
+  }
+  return pageName;
+};
+const generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
+const isFixed = (node) => node.style?.position === "fixed";
+const getNodeIndex = (id, parent) => {
+  const items = parent?.items || [];
+  return items.findIndex((item) => `${item.id}` === `${id}`);
+};
+const getRelativeStyle = (style = {}) => ({
+  ...style,
+  position: "relative",
+  top: 0,
+  left: 0
+});
+const getMiddleTop = (node, parentNode, stage) => {
+  let height = node.style?.height || 0;
+  if (!stage || typeof node.style?.top !== "undefined" || !parentNode.style)
+    return node.style?.top;
+  if (!isNumber(height)) {
+    height = 0;
+  }
+  const { height: parentHeight } = parentNode.style;
+  const { scrollTop = 0, wrapperHeight } = stage.mask;
+  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+  if (isPage(parentNode)) {
+    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
   }
-}
-const historyService = new History();
-
-var Protocol = /* @__PURE__ */ ((Protocol2) => {
-  Protocol2["OBJECT"] = "object";
-  Protocol2["JSON"] = "json";
-  Protocol2["STRING"] = "string";
-  Protocol2["NUMBER"] = "number";
-  Protocol2["BOOLEAN"] = "boolean";
-  return Protocol2;
-})(Protocol || {});
-const canUsePluginMethods$4 = {
-  async: [],
-  sync: ["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]
+  return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
-class WebStorage extends BaseService {
-  storage = globalThis.localStorage;
-  namespace = "tmagic";
-  constructor() {
-    super(canUsePluginMethods$4.sync.map((methodName) => ({ name: methodName, isAsync: false })));
-  }
-  /**
-   * 获取数据存储对象，可以通过
-   * const storageService = new StorageService();
-   * storageService.usePlugin({
-   *    // 替换存储对象为 sessionStorage
-   *    async afterGetStorage(): Promise<Storage> {
-   *      return window.sessionStorage;
-   *    },
-   * });
-   */
-  getStorage() {
-    return this.storage;
+const getInitPositionStyle = (style = {}, layout) => {
+  if (layout === Layout.ABSOLUTE) {
+    const newStyle = {
+      ...style,
+      position: "absolute"
+    };
+    if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") {
+      newStyle.left = 0;
+    }
+    return newStyle;
   }
-  getNamespace() {
-    return this.namespace;
+  if (layout === Layout.RELATIVE) {
+    return getRelativeStyle(style);
   }
-  /**
-   * 清理，支持storageService.usePlugin
-   */
-  clear() {
-    const storage = this.getStorage();
-    storage.clear();
+  return style;
+};
+const setChildrenLayout = (node, layout) => {
+  node.items?.forEach((child) => {
+    setLayout(child, layout);
+  });
+  return node;
+};
+const setLayout = (node, layout) => {
+  if (isPop(node))
+    return;
+  const style = node.style || {};
+  if (style.position === "fixed")
+    return;
+  if (layout !== Layout.RELATIVE) {
+    style.position = "absolute";
+  } else {
+    node.style = getRelativeStyle(style);
+    node.style.right = "auto";
+    node.style.bottom = "auto";
   }
-  /**
-   * 获取存储项，支持storageService.usePlugin
-   */
-  getItem(key, options = {}) {
-    const storage = this.getStorage();
-    const namespace = this.getNamespace();
-    const { protocol = options.protocol, item } = this.getValueAndProtocol(
-      storage.getItem(`${options.namespace || namespace}:${key}`)
-    );
-    if (item === null)
-      return null;
-    switch (protocol) {
-      case "object" /* OBJECT */:
-        return getConfig("parseDSL")(`(${item})`);
-      case "json" /* JSON */:
-        return JSON.parse(item);
-      case "number" /* NUMBER */:
-        return Number(item);
-      case "boolean" /* BOOLEAN */:
-        return Boolean(item);
-      default:
-        return item;
-    }
+  return node;
+};
+const change2Fixed = (node, root) => {
+  const path = getNodePath(node.id, root.items);
+  const offset = {
+    left: 0,
+    top: 0
+  };
+  path.forEach((value) => {
+    offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
+  });
+  return {
+    ...node.style || {},
+    ...offset
+  };
+};
+const Fixed2Other = async (node, root, getLayout) => {
+  const path = getNodePath(node.id, root.items);
+  const cur = path.pop();
+  const offset = {
+    left: cur?.style?.left || 0,
+    top: cur?.style?.top || 0,
+    right: "",
+    bottom: ""
+  };
+  path.forEach((value) => {
+    offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
+  });
+  const style = node.style || {};
+  const parent = path.pop();
+  if (!parent) {
+    return getRelativeStyle(style);
   }
-  /**
-   * 获取指定索引位置的key
-   */
-  key(index) {
-    const storage = this.getStorage();
-    return storage.key(index);
+  const layout = await getLayout(parent);
+  if (layout !== Layout.RELATIVE) {
+    return {
+      ...style,
+      ...offset,
+      position: "absolute"
+    };
   }
-  /**
-   * 移除存储项，支持storageService.usePlugin
-   */
-  removeItem(key, options = {}) {
-    const storage = this.getStorage();
-    const namespace = this.getNamespace();
-    storage.removeItem(`${options.namespace || namespace}:${key}`);
+  return getRelativeStyle(style);
+};
+const getGuideLineFromCache = (key) => {
+  if (!key)
+    return [];
+  const guideLineCacheData = globalThis.localStorage.getItem(key);
+  if (guideLineCacheData) {
+    try {
+      return JSON.parse(guideLineCacheData) || [];
+    } catch (e) {
+      console.error(e);
+    }
   }
-  /**
-   * 设置存储项，支持storageService.usePlugin
-   */
-  setItem(key, value, options = {}) {
-    const storage = this.getStorage();
-    const namespace = this.getNamespace();
-    let item = value;
-    const protocol = options.protocol ? `${options.protocol}:` : "";
-    if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
-      item = `${protocol}${value}`;
-    } else {
-      item = `${protocol}${serialize(value)}`;
+  return [];
+};
+const fixNodeLeft = (config, parent, doc) => {
+  if (!doc || !config.style || !isNumber(config.style.left))
+    return config.style?.left;
+  const el = doc.getElementById(`${config.id}`);
+  const parentEl = doc.getElementById(`${parent.id}`);
+  const left = Number(config.style?.left) || 0;
+  if (el && parentEl) {
+    const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
+    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+      return calcParentOffsetWidth - calcElOffsetWidth;
     }
-    storage.setItem(`${options.namespace || namespace}:${key}`, item);
   }
-  destroy() {
-    this.removeAllListeners();
-    this.removeAllPlugins();
+  return config.style.left;
+};
+const fixNodePosition = (config, parent, stage) => {
+  if (config.style?.position !== "absolute") {
+    return config.style;
   }
-  usePlugin(options) {
-    super.usePlugin(options);
+  return {
+    ...config.style || {},
+    top: getMiddleTop(config, parent, stage),
+    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+  };
+};
+const serializeConfig = (config) => serialize(config, {
+  space: 2,
+  unsafe: true
+}).replace(/"(\w+)":\s/g, "$1: ");
+const traverseNode = (node, cb, parents = []) => {
+  cb(node, parents);
+  if (node.items?.length) {
+    parents.push(node);
+    node.items.forEach((item) => {
+      traverseNode(item, cb, [...parents]);
+    });
   }
-  getValueAndProtocol(value) {
-    let protocol = "";
-    if (value === null) {
-      return {
-        item: value,
-        protocol
+};
+
+const beforePaste = (position, config, doc) => {
+  if (!config[0]?.style)
+    return config;
+  const curNode = editorService.get("node");
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  const pasteConfigs = config.map((configItem) => {
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
+    if (!isEmpty(pastePosition) && curNode?.items) {
+      pastePosition = getPositionInContainer(pastePosition, curNode.id, doc);
+    }
+    if (pastePosition.left && configItem.style?.left) {
+      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+    }
+    if (pastePosition.top && configItem.style?.top) {
+      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+    }
+    const pasteConfig = propsService.setNewItemId(configItem, false);
+    if (pasteConfig.style) {
+      const { left, top } = pasteConfig.style;
+      if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+        pasteConfig.style.left = Number(left) + offsetX;
+      }
+      if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+        pasteConfig.style.top = Number(top) + offsetY;
+      }
+      pasteConfig.style = {
+        ...pasteConfig.style,
+        ...pastePosition
       };
     }
-    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-      protocol = $1;
-      return $3;
-    });
-    return {
-      protocol,
-      item
-    };
+    const root = editorService.get("root");
+    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+    }
+    return pasteConfig;
+  });
+  return pasteConfigs;
+};
+const getPositionInContainer = (position = {}, id, doc) => {
+  let { left = 0, top = 0 } = position;
+  const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const parentElRect = parentEl?.getBoundingClientRect();
+  left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
+  top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
+  return {
+    left,
+    top
+  };
+};
+const getAddParent = (node) => {
+  const curNode = editorService.get("node");
+  let parentNode;
+  if (isPage(node)) {
+    parentNode = editorService.get("root");
+  } else if (curNode?.items) {
+    parentNode = curNode;
+  } else if (curNode?.id) {
+    parentNode = editorService.getParentById(curNode.id, false);
   }
-}
-const storageService = new WebStorage();
+  return parentNode;
+};
+const getDefaultConfig = async (addNode, parentNode) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
+};
 
-const canUsePluginMethods$3 = {
+const canUsePluginMethods$4 = {
   async: [
     "getLayout",
     "highlight",
@@ -2334,7 +1492,7 @@ class Editor extends BaseService {
   isHistoryStateChange = false;
   constructor() {
     super(
-      canUsePluginMethods$3.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      canUsePluginMethods$4.async.map((methodName) => ({ name: methodName, isAsync: true })),
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ["select", "update", "moveLayer"]
     );
@@ -2773,448 +1931,1311 @@ class Editor extends BaseService {
     this.pushHistoryState();
   }
   /**
-   * 将组件节点配置存储到localStorage中
-   * @param config 组件节点配置
-   * @returns
+   * 将组件节点配置存储到localStorage中
+   * @param config 组件节点配置
+   * @returns
+   */
+  copy(config) {
+    storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+      protocol: Protocol.OBJECT
+    });
+  }
+  /**
+   * 复制时会带上组件关联的依赖
+   * @param config 组件节点配置
+   * @returns
+   */
+  copyWithRelated(config, collectorOptions) {
+    const copyNodes = Array.isArray(config) ? config : [config];
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new Watcher();
+      coperWatcher.addTarget(customTarget);
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+      Object.keys(customTarget.deps).forEach((nodeId) => {
+        const node = this.getNodeById(nodeId);
+        if (!node)
+          return;
+        customTarget.deps[nodeId].keys.forEach((key) => {
+          const relateNodeId = get(node, key);
+          const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
+          if (!isExist) {
+            const relateNode = this.getNodeById(relateNodeId);
+            if (relateNode) {
+              copyNodes.push(relateNode);
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
+      protocol: Protocol.OBJECT
+    });
+  }
+  /**
+   * 从localStorage中获取节点，然后添加到当前容器中
+   * @param position 粘贴的坐标
+   * @returns 添加后的组件节点配置
+   */
+  async paste(position = {}, collectorOptions) {
+    const config = storageService.getItem(COPY_STORAGE_KEY);
+    if (!Array.isArray(config))
+      return;
+    const node = this.get("node");
+    let parent = null;
+    if (config.length === 1 && config[0].id === node?.id) {
+      parent = this.get("parent");
+      if (parent?.type === NodeType.ROOT) {
+        parent = this.get("page");
+      }
+    }
+    const pasteConfigs = await this.doPaste(config, position);
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      propsService.replaceRelateId(config, pasteConfigs, collectorOptions);
+    }
+    return this.add(pasteConfigs, parent);
+  }
+  async doPaste(config, position = {}) {
+    propsService.clearRelateId();
+    const doc = this.get("stage")?.renderer.contentWindow?.document;
+    const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
+    return pasteConfigs;
+  }
+  async doAlignCenter(config) {
+    const parent = this.getParentById(config.id);
+    if (!parent)
+      throw new Error("找不到父节点");
+    const node = cloneDeep(toRaw(config));
+    const layout = await this.getLayout(parent, node);
+    if (layout === Layout.RELATIVE) {
+      return config;
+    }
+    if (!node.style)
+      return config;
+    const stage = this.get("stage");
+    const doc = stage?.renderer.contentWindow?.document;
+    if (doc) {
+      const el = doc.getElementById(`${node.id}`);
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
+      if (parentEl && el) {
+        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
+        node.style.right = "";
+      }
+    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
+      node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = "";
+    }
+    return node;
+  }
+  /**
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
+   */
+  async alignCenter(config) {
+    const nodes = Array.isArray(config) ? config : [config];
+    const stage = this.get("stage");
+    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
+    const newNode = await this.update(newNodes);
+    if (newNodes.length > 1) {
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+    } else {
+      await stage?.select(newNodes[0].id);
+    }
+    return newNode;
+  }
+  /**
+   * 移动当前选中节点位置
+   * @param offset 偏移量
+   */
+  async moveLayer(offset) {
+    const root = this.get("root");
+    if (!root)
+      throw new Error("root为空");
+    const parent = this.get("parent");
+    if (!parent)
+      throw new Error("父节点为空");
+    const node = this.get("node");
+    if (!node)
+      throw new Error("当前节点为空");
+    const brothers = parent.items || [];
+    const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
+    const layout = await this.getLayout(parent, node);
+    const isRelative = layout === Layout.RELATIVE;
+    let offsetIndex;
+    if (offset === LayerOffset.TOP) {
+      offsetIndex = isRelative ? 0 : brothers.length;
+    } else if (offset === LayerOffset.BOTTOM) {
+      offsetIndex = isRelative ? brothers.length : 0;
+    } else {
+      offsetIndex = index + (isRelative ? -offset : offset);
+    }
+    if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) {
+      return;
+    }
+    brothers.splice(index, 1);
+    brothers.splice(offsetIndex, 0, node);
+    const grandparent = this.getParentById(parent.id);
+    this.get("stage")?.update({
+      config: cloneDeep(toRaw(parent)),
+      parentId: grandparent?.id,
+      root: cloneDeep(root)
+    });
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+    this.emit("move-layer", offset);
+  }
+  /**
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
+   */
+  async moveToContainer(config, targetId) {
+    const root = this.get("root");
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false);
+    const stage = this.get("stage");
+    if (root && node && parent && stage) {
+      const index = getNodeIndex(node.id, parent);
+      parent.items?.splice(index, 1);
+      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
+      const layout = await this.getLayout(target);
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
+      target.items.push(newConfig);
+      await stage.select(targetId);
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+      return newConfig;
+    }
+  }
+  async dragTo(config, targetParent, targetIndex) {
+    if (!targetParent || !Array.isArray(targetParent.items))
+      return;
+    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
+    if (!parent || !curNode)
+      throw new Error("找不要删除的节点");
+    const index = getNodeIndex(curNode.id, parent);
+    if (typeof index !== "number" || index === -1)
+      throw new Error("找不要删除的节点");
+    if (parent.id === targetParent.id) {
+      if (index === targetIndex)
+        return;
+      if (index < targetIndex) {
+        targetIndex -= 1;
+      }
+    }
+    const layout = await this.getLayout(parent);
+    const newLayout = await this.getLayout(targetParent);
+    if (newLayout !== layout) {
+      setLayout(config, newLayout);
+    }
+    parent.items?.splice(index, 1);
+    targetParent.items?.splice(targetIndex, 0, config);
+    const page = this.get("page");
+    const root = this.get("root");
+    const stage = this.get("stage");
+    if (stage && page && root) {
+      stage.update({
+        config: cloneDeep(page),
+        parentId: root.id,
+        root: cloneDeep(root)
+      });
+    }
+    this.addModifiedNodeId(config.id);
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
+  }
+  /**
+   * 撤销当前操作
+   * @returns 上一次数据
    */
-  copy(config) {
-    storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
-      protocol: Protocol.OBJECT
-    });
+  async undo() {
+    const value = historyService.undo();
+    await this.changeHistoryState(value);
+    return value;
   }
   /**
-   * 复制时会带上组件关联的依赖
-   * @param config 组件节点配置
-   * @returns
+   * 恢复到下一步
+   * @returns 下一步数据
    */
-  copyWithRelated(config) {
-    const copyNodes = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_COMP_WHEN_COPY,
-      DepTargetType.RELATED_COMP_WHEN_COPY
-    );
-    if (customTarget) {
-      Object.keys(customTarget.deps).forEach((nodeId) => {
-        const node = this.getNodeById(nodeId);
-        if (!node)
-          return;
-        customTarget.deps[nodeId].keys.forEach((key) => {
-          const relateNodeId = get(node, key);
-          const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
-          if (!isExist) {
-            const relateNode = this.getNodeById(relateNodeId);
-            if (relateNode) {
-              copyNodes.push(relateNode);
-            }
-          }
+  async redo() {
+    const value = historyService.redo();
+    await this.changeHistoryState(value);
+    return value;
+  }
+  async move(left, top) {
+    const node = toRaw(this.get("node"));
+    if (!node || isPage(node))
+      return;
+    const { style, id, type } = node;
+    if (!style || !["absolute", "fixed"].includes(style.position))
+      return;
+    const update = (style2) => this.update({
+      id,
+      type,
+      style: style2
+    });
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: ""
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: ""
+        });
+      }
+    }
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: ""
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: ""
         });
+      }
+    }
+  }
+  resetState() {
+    this.set("root", null);
+    this.set("node", null);
+    this.set("nodes", []);
+    this.set("page", null);
+    this.set("parent", null);
+    this.set("stage", null);
+    this.set("highlightNode", null);
+    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
+    this.set("pageLength", 0);
+  }
+  destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
+  resetModifiedNodeId() {
+    this.get("modifiedNodeIds").clear();
+  }
+  usePlugin(options) {
+    super.usePlugin(options);
+  }
+  addModifiedNodeId(id) {
+    if (!this.isHistoryStateChange) {
+      this.get("modifiedNodeIds").set(id, id);
+    }
+  }
+  pushHistoryState() {
+    const curNode = cloneDeep(toRaw(this.get("node")));
+    const page = this.get("page");
+    if (!this.isHistoryStateChange && curNode && page) {
+      historyService.push({
+        data: cloneDeep(toRaw(page)),
+        modifiedNodeIds: this.get("modifiedNodeIds"),
+        nodeId: curNode.id
       });
     }
-    storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
-      protocol: Protocol.OBJECT
-    });
+    this.isHistoryStateChange = false;
+  }
+  async changeHistoryState(value) {
+    if (!value)
+      return;
+    this.isHistoryStateChange = true;
+    await this.update(value.data);
+    this.set("modifiedNodeIds", value.modifiedNodeIds);
+    setTimeout(async () => {
+      if (!value.nodeId)
+        return;
+      await this.select(value.nodeId);
+      this.get("stage")?.select(value.nodeId);
+    }, 0);
+    this.emit("history-change", value.data);
+  }
+  async toggleFixedPosition(dist, src, root) {
+    const newConfig = cloneDeep(dist);
+    if (!isPop(src) && newConfig.style?.position) {
+      if (isFixed(newConfig) && !isFixed(src)) {
+        newConfig.style = change2Fixed(newConfig, root);
+      } else if (!isFixed(newConfig) && isFixed(src)) {
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
+      }
+    }
+    return newConfig;
+  }
+  selectedConfigExceptionHandler(config) {
+    let id;
+    if (typeof config === "string" || typeof config === "number") {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error("没有ID，无法选中");
+    }
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node)
+      throw new Error("获取不到组件信息");
+    if (node.id === this.state.root?.id) {
+      throw new Error("不能选根节点");
+    }
+    return {
+      node,
+      parent,
+      page
+    };
+  }
+}
+const editorService = new Editor();
+
+function BaseFormConfig() {
+  return [
+    {
+      name: "id",
+      type: "hidden"
+    },
+    {
+      name: "type",
+      text: "类型",
+      type: "hidden",
+      defaultValue: "base"
+    },
+    {
+      name: "title",
+      text: "名称",
+      rules: [
+        {
+          required: true,
+          message: "请输入名称"
+        }
+      ]
+    },
+    {
+      name: "description",
+      text: "描述"
+    }
+  ];
+}
+
+const HttpFormConfig = [
+  {
+    name: "autoFetch",
+    text: "自动请求",
+    type: "switch",
+    defaultValue: true
+  },
+  {
+    name: "responseOptions",
+    items: [
+      {
+        name: "dataPath",
+        text: "数据路径"
+      }
+    ]
+  },
+  {
+    type: "fieldset",
+    name: "options",
+    legend: "HTTP 配置",
+    items: [
+      {
+        name: "url",
+        text: "URL"
+      },
+      {
+        name: "method",
+        text: "Method",
+        type: "select",
+        options: [
+          { text: "GET", value: "GET" },
+          { text: "POST", value: "POST" },
+          { text: "PUT", value: "PUT" },
+          { text: "DELETE", value: "DELETE" }
+        ]
+      },
+      {
+        name: "params",
+        type: "key-value",
+        defaultValue: {},
+        text: "参数"
+      },
+      {
+        name: "data",
+        type: "key-value",
+        defaultValue: {},
+        advanced: true,
+        text: "请求体"
+      },
+      {
+        name: "headers",
+        type: "key-value",
+        defaultValue: {},
+        text: "请求头"
+      }
+    ]
   }
-  /**
-   * 从localStorage中获取节点，然后添加到当前容器中
-   * @param position 粘贴的坐标
-   * @returns 添加后的组件节点配置
-   */
-  async paste(position = {}) {
-    const config = storageService.getItem(COPY_STORAGE_KEY);
-    if (!Array.isArray(config))
-      return;
-    const node = this.get("node");
-    let parent = null;
-    if (config.length === 1 && config[0].id === node?.id) {
-      parent = this.get("parent");
-      if (parent?.type === NodeType.ROOT) {
-        parent = this.get("page");
+];
+
+const fillConfig$1 = (config) => [
+  ...BaseFormConfig(),
+  ...config,
+  {
+    type: "tab",
+    items: [
+      {
+        title: "数据定义",
+        items: [
+          {
+            name: "fields",
+            type: "data-source-fields",
+            defaultValue: () => []
+          }
+        ]
+      },
+      {
+        title: "方法定义",
+        items: [
+          {
+            name: "methods",
+            type: "data-source-methods",
+            defaultValue: () => []
+          }
+        ]
+      },
+      {
+        title: "事件配置",
+        items: [
+          {
+            name: "events",
+            src: "datasource",
+            type: "event-select"
+          }
+        ]
+      },
+      {
+        title: "mock数据",
+        items: [
+          {
+            name: "mocks",
+            type: "data-source-mocks",
+            defaultValue: () => []
+          }
+        ]
+      },
+      {
+        title: "请求参数裁剪",
+        display: (formState, { model }) => model.type === "http",
+        items: [
+          {
+            name: "beforeRequest",
+            type: "vs-code",
+            parse: true,
+            height: "600px"
+          }
+        ]
+      },
+      {
+        title: "响应数据裁剪",
+        display: (formState, { model }) => model.type === "http",
+        items: [
+          {
+            name: "afterResponse",
+            type: "vs-code",
+            parse: true,
+            height: "600px"
+          }
+        ]
       }
-    }
-    const pasteConfigs = await this.doPaste(config, position);
-    propsService.replaceRelateId(config, pasteConfigs);
-    return this.add(pasteConfigs, parent);
+    ]
   }
-  async doPaste(config, position = {}) {
-    propsService.clearRelateId();
-    const pasteConfigs = beforePaste(position, cloneDeep(config));
-    return pasteConfigs;
+];
+const getFormConfig = (type, configs) => {
+  switch (type) {
+    case "base":
+      return fillConfig$1([]);
+    case "http":
+      return fillConfig$1(HttpFormConfig);
+    default:
+      return fillConfig$1(configs[type] || []);
   }
-  async doAlignCenter(config) {
-    const parent = this.getParentById(config.id);
-    if (!parent)
-      throw new Error("找不到父节点");
-    const node = cloneDeep(toRaw(config));
-    const layout = await this.getLayout(parent, node);
-    if (layout === Layout.RELATIVE) {
-      return config;
-    }
-    if (!node.style)
-      return config;
-    const stage = this.get("stage");
-    const doc = stage?.renderer.contentWindow?.document;
-    if (doc) {
-      const el = doc.getElementById(`${node.id}`);
-      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
-      if (parentEl && el) {
-        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
-        node.style.right = "";
-      }
-    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
-      node.style.left = (parent.style.width - node.style.width) / 2;
-      node.style.right = "";
-    }
-    return node;
+};
+const getFormValue = (type, values) => {
+  if (type !== "http") {
+    return values;
   }
+  return {
+    beforeRequest: `(options, context) => {
   /**
-   * 将指点节点设置居中
-   * @param config 组件节点配置
-   * @returns 当前组件节点配置
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * options: HttpOptions
+   *
+   * interface HttpOptions {
+   *  // 请求链接
+   *  url: string;
+   *  // query参数
+   *  params?: Record<string, string>;
+   *  // body数据
+   *  data?: Record<string, any>;
+   *  // 请求头
+   *  headers?: Record<string, string>;
+   *  // 请求方法 GET/POST
+   *  method?: Method;
+   * }
+   *
+   * context：上下文对象
+   *
+   * interface Content {
+   *  app: AppCore;
+   *  dataSource: HttpDataSource;
+   * }
+   *
+   * return: HttpOptions
    */
-  async alignCenter(config) {
-    const nodes = Array.isArray(config) ? config : [config];
-    const stage = this.get("stage");
-    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
-    const newNode = await this.update(newNodes);
-    if (newNodes.length > 1) {
-      await stage?.multiSelect(newNodes.map((node) => node.id));
-    } else {
-      await stage?.select(newNodes[0].id);
-    }
-    return newNode;
-  }
+
+  // 此处的返回值会作为这个接口的入参
+  return options;
+}`,
+    afterResponse: `(response, context) => {
   /**
-   * 移动当前选中节点位置
-   * @param offset 偏移量
-   */
-  async moveLayer(offset) {
-    const root = this.get("root");
-    if (!root)
-      throw new Error("root为空");
-    const parent = this.get("parent");
-    if (!parent)
-      throw new Error("父节点为空");
-    const node = this.get("node");
-    if (!node)
-      throw new Error("当前节点为空");
-    const brothers = parent.items || [];
-    const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
-    const layout = await this.getLayout(parent, node);
-    const isRelative = layout === Layout.RELATIVE;
-    let offsetIndex;
-    if (offset === LayerOffset.TOP) {
-      offsetIndex = isRelative ? 0 : brothers.length;
-    } else if (offset === LayerOffset.BOTTOM) {
-      offsetIndex = isRelative ? brothers.length : 0;
-    } else {
-      offsetIndex = index + (isRelative ? -offset : offset);
-    }
-    if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) {
-      return;
-    }
-    brothers.splice(index, 1);
-    brothers.splice(offsetIndex, 0, node);
-    const grandparent = this.getParentById(parent.id);
-    this.get("stage")?.update({
-      config: cloneDeep(toRaw(parent)),
-      parentId: grandparent?.id,
-      root: cloneDeep(root)
+   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
+
+    * context：上下文对象
+    *
+    * interface Content {
+    *  app: AppCore;
+    *  dataSource: HttpDataSource;
+    * }
+    *
+    */
+
+  // 此处的返回值会作为这个接口的返回值
+  return response;
+}`,
+    ...values
+  };
+};
+const getDisplayField = (dataSources, key) => {
+  const displayState = [];
+  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === "undefined")
+      break;
+    displayState.push({
+      type: "text",
+      value: key.substring(index, match.index)
+    });
+    let dsText = "";
+    let ds;
+    let fields;
+    match[1].replaceAll(/\[(\d+)\]/g, ".$1").split(".").forEach((item, index2) => {
+      if (index2 === 0) {
+        ds = dataSources.find((ds2) => ds2.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+      if (isNumber(item)) {
+        dsText += `[${item}]`;
+      } else {
+        const field = fields?.find((field2) => field2.name === item);
+        fields = field?.fields;
+        dsText += `.${field?.title || item}`;
+      }
     });
-    this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
-    this.emit("move-layer", offset);
+    displayState.push({
+      type: "var",
+      value: dsText
+    });
+    index = match.index + match[0].length;
   }
-  /**
-   * 移动到指定容器中
-   * @param config 需要移动的节点
-   * @param targetId 容器ID
-   */
-  async moveToContainer(config, targetId) {
-    const root = this.get("root");
-    const { node, parent } = this.getNodeInfo(config.id, false);
-    const target = this.getNodeById(targetId, false);
-    const stage = this.get("stage");
-    if (root && node && parent && stage) {
-      const index = getNodeIndex(node.id, parent);
-      parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
-      const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
-        if (Array.isArray(srcValue)) {
-          return srcValue;
-        }
-      });
-      newConfig.style = getInitPositionStyle(newConfig.style, layout);
-      target.items.push(newConfig);
-      await stage.select(targetId);
-      const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
-      await this.select(newConfig);
-      stage.select(newConfig.id);
-      this.addModifiedNodeId(target.id);
-      this.addModifiedNodeId(parent.id);
-      this.pushHistoryState();
-      return newConfig;
-    }
+  if (index < key.length) {
+    displayState.push({
+      type: "text",
+      value: key.substring(index)
+    });
   }
-  async dragTo(config, targetParent, targetIndex) {
-    if (!targetParent || !Array.isArray(targetParent.items))
+  return displayState;
+};
+const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
+  const child = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push("any");
+    }
+    const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
+    const item = {
+      label: field.title || field.name,
+      value: field.name,
+      children
+    };
+    const fieldType = field.type || "any";
+    if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
       return;
-    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-    if (!parent || !curNode)
-      throw new Error("找不要删除的节点");
-    const index = getNodeIndex(curNode.id, parent);
-    if (typeof index !== "number" || index === -1)
-      throw new Error("找不要删除的节点");
-    if (parent.id === targetParent.id) {
-      if (index === targetIndex)
-        return;
-      if (index < targetIndex) {
-        targetIndex -= 1;
-      }
     }
-    const layout = await this.getLayout(parent);
-    const newLayout = await this.getLayout(targetParent);
-    if (newLayout !== layout) {
-      setLayout(config, newLayout);
+    if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
+      return;
     }
-    parent.items?.splice(index, 1);
-    targetParent.items?.splice(targetIndex, 0, config);
-    const page = this.get("page");
-    const root = this.get("root");
-    const stage = this.get("stage");
-    if (stage && page && root) {
-      stage.update({
-        config: cloneDeep(page),
-        parentId: root.id,
-        root: cloneDeep(root)
-      });
+    if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+      return;
     }
-    this.addModifiedNodeId(config.id);
-    this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
-    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
+    child.push(item);
+  });
+  return child;
+};
+
+const canUsePluginMethods$3 = {
+  async: [],
+  sync: [
+    "getFormConfig",
+    "setFormConfig",
+    "getFormValue",
+    "setFormValue",
+    "getFormEvent",
+    "setFormEvent",
+    "getFormMethod",
+    "setFormMethod",
+    "add",
+    "update",
+    "remove",
+    "createId"
+  ]
+};
+class DataSource extends BaseService {
+  state = reactive({
+    datasourceTypeList: [],
+    dataSources: [],
+    editable: true,
+    configs: {},
+    values: {},
+    events: {},
+    methods: {}
+  });
+  constructor() {
+    super(canUsePluginMethods$3.sync.map((methodName) => ({ name: methodName, isAsync: false })));
   }
-  /**
-   * 撤销当前操作
-   * @returns 上一次数据
-   */
-  async undo() {
-    const value = historyService.undo();
-    await this.changeHistoryState(value);
-    return value;
+  set(name, value) {
+    this.state[name] = value;
   }
-  /**
-   * 恢复到下一步
-   * @returns 下一步数据
-   */
-  async redo() {
-    const value = historyService.redo();
-    await this.changeHistoryState(value);
-    return value;
+  get(name) {
+    return this.state[name];
   }
-  async move(left, top) {
-    const node = toRaw(this.get("node"));
-    if (!node || isPage(node))
-      return;
-    const { style, id, type } = node;
-    if (!style || !["absolute", "fixed"].includes(style.position))
-      return;
-    const update = (style2) => this.update({
-      id,
-      type,
-      style: style2
-    });
-    if (top) {
-      if (isNumber(style.top)) {
-        update({
-          ...style,
-          top: Number(style.top) + Number(top),
-          bottom: ""
-        });
-      } else if (isNumber(style.bottom)) {
-        update({
-          ...style,
-          bottom: Number(style.bottom) - Number(top),
-          top: ""
-        });
-      }
-    }
-    if (left) {
-      if (isNumber(style.left)) {
-        update({
-          ...style,
-          left: Number(style.left) + Number(left),
-          right: ""
-        });
-      } else if (isNumber(style.right)) {
-        update({
-          ...style,
-          right: Number(style.right) - Number(left),
-          left: ""
-        });
-      }
-    }
+  getFormConfig(type = "base") {
+    return getFormConfig(toLine(type), this.get("configs"));
   }
-  resetState() {
-    this.set("root", null);
-    this.set("node", null);
-    this.set("nodes", []);
-    this.set("page", null);
-    this.set("parent", null);
-    this.set("stage", null);
-    this.set("highlightNode", null);
-    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
-    this.set("pageLength", 0);
+  setFormConfig(type, config) {
+    this.get("configs")[toLine(type)] = config;
+  }
+  getFormValue(type = "base") {
+    return getFormValue(toLine(type), this.get("values")[type]);
+  }
+  setFormValue(type, value) {
+    this.get("values")[toLine(type)] = value;
+  }
+  getFormEvent(type = "base") {
+    return this.get("events")[toLine(type)] || [];
+  }
+  setFormEvent(type, value = []) {
+    this.get("events")[toLine(type)] = value;
+  }
+  getFormMethod(type = "base") {
+    return this.get("methods")[toLine(type)] || [];
+  }
+  setFormMethod(type, value = []) {
+    this.get("methods")[toLine(type)] = value;
+  }
+  add(config) {
+    const newConfig = {
+      ...config,
+      id: config.id && !this.getDataSourceById(config.id) ? config.id : this.createId()
+    };
+    this.get("dataSources").push(newConfig);
+    this.emit("add", newConfig);
+    return newConfig;
+  }
+  update(config) {
+    const dataSources = this.get("dataSources");
+    const index = dataSources.findIndex((ds) => ds.id === config.id);
+    dataSources[index] = cloneDeep(config);
+    this.emit("update", config);
+    return config;
+  }
+  remove(id) {
+    const dataSources = this.get("dataSources");
+    const index = dataSources.findIndex((ds) => ds.id === id);
+    dataSources.splice(index, 1);
+    this.emit("remove", id);
+  }
+  createId() {
+    return `ds_${guid()}`;
+  }
+  getDataSourceById(id) {
+    return this.get("dataSources").find((ds) => ds.id === id);
+  }
+  resetState() {
+    this.set("dataSources", []);
   }
   destroy() {
     this.removeAllListeners();
     this.resetState();
     this.removeAllPlugins();
   }
-  resetModifiedNodeId() {
-    this.get("modifiedNodeIds").clear();
-  }
   usePlugin(options) {
     super.usePlugin(options);
   }
-  addModifiedNodeId(id) {
-    if (!this.isHistoryStateChange) {
-      this.get("modifiedNodeIds").set(id, id);
-    }
-  }
-  pushHistoryState() {
-    const curNode = cloneDeep(toRaw(this.get("node")));
-    const page = this.get("page");
-    if (!this.isHistoryStateChange && curNode && page) {
-      historyService.push({
-        data: cloneDeep(toRaw(page)),
-        modifiedNodeIds: this.get("modifiedNodeIds"),
-        nodeId: curNode.id
+  /**
+   * 复制时会带上组件关联的数据源
+   * @param config 组件节点配置
+   * @returns
+   */
+  copyWithRelated(config, collectorOptions) {
+    const copyNodes = Array.isArray(config) ? config : [config];
+    const copyData = [];
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new Watcher();
+      coperWatcher.addTarget(customTarget);
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+      Object.keys(customTarget.deps).forEach((nodeId) => {
+        const node = editorService.getNodeById(nodeId);
+        if (!node)
+          return;
+        customTarget.deps[nodeId].keys.forEach((key) => {
+          const [relateDsId] = get(node, key);
+          const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
+          if (!isExist) {
+            const relateDs = this.getDataSourceById(relateDsId);
+            if (relateDs) {
+              copyData.push(relateDs);
+            }
+          }
+        });
       });
     }
-    this.isHistoryStateChange = false;
-  }
-  async changeHistoryState(value) {
-    if (!value)
-      return;
-    this.isHistoryStateChange = true;
-    await this.update(value.data);
-    this.set("modifiedNodeIds", value.modifiedNodeIds);
-    setTimeout(async () => {
-      if (!value.nodeId)
-        return;
-      await this.select(value.nodeId);
-      this.get("stage")?.select(value.nodeId);
-    }, 0);
-    this.emit("history-change", value.data);
+    storageService.setItem(COPY_DS_STORAGE_KEY, copyData, {
+      protocol: Protocol.OBJECT
+    });
   }
-  async toggleFixedPosition(dist, src, root) {
-    const newConfig = cloneDeep(dist);
-    if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
-        newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
-        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
+  /**
+   * 粘贴数据源
+   * @returns
+   */
+  paste() {
+    const dataSource = storageService.getItem(COPY_DS_STORAGE_KEY);
+    dataSource.forEach((item) => {
+      if (!this.getDataSourceById(item.id)) {
+        this.add(item);
       }
+    });
+  }
+}
+const dataSourceService = new DataSource();
+
+const arrayOptions = [
+  { text: "包含", value: "include" },
+  { text: "不包含", value: "not_include" }
+];
+const eqOptions = [
+  { text: "等于", value: "=" },
+  { text: "不等于", value: "!=" }
+];
+const numberOptions = [
+  { text: "大于", value: ">" },
+  { text: "大于等于", value: ">=" },
+  { text: "小于", value: "<" },
+  { text: "小于等于", value: "<=" },
+  { text: "在范围内", value: "between" },
+  { text: "不在范围内", value: "not_between" }
+];
+const styleTabConfig = {
+  title: "样式",
+  items: [
+    {
+      name: "style",
+      items: [
+        {
+          type: "fieldset",
+          legend: "位置",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "position",
+              text: "固定定位",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "checkbox",
+                activeValue: "fixed",
+                inactiveValue: "absolute",
+                defaultValue: "absolute"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "left",
+              text: "left",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "top",
+              text: "top",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              },
+              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
+            },
+            {
+              type: "data-source-field-select",
+              name: "right",
+              text: "right",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "bottom",
+              text: "bottom",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              },
+              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+            }
+          ]
+        },
+        {
+          type: "fieldset",
+          legend: "盒子",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "width",
+              text: "宽度",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "height",
+              text: "高度",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              text: "overflow",
+              name: "overflow",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "select",
+                options: [
+                  { text: "visible", value: "visible" },
+                  { text: "hidden", value: "hidden" },
+                  { text: "clip", value: "clip" },
+                  { text: "scroll", value: "scroll" },
+                  { text: "auto", value: "auto" },
+                  { text: "overlay", value: "overlay" }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          type: "fieldset",
+          legend: "边框",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "borderWidth",
+              text: "宽度",
+              defaultValue: "0",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "borderColor",
+              text: "颜色",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "borderStyle",
+              text: "样式",
+              defaultValue: "none",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "select",
+                options: [
+                  { text: "none", value: "none" },
+                  { text: "hidden", value: "hidden" },
+                  { text: "dotted", value: "dotted" },
+                  { text: "dashed", value: "dashed" },
+                  { text: "solid", value: "solid" },
+                  { text: "double", value: "double" },
+                  { text: "groove", value: "groove" },
+                  { text: "ridge", value: "ridge" },
+                  { text: "inset", value: "inset" },
+                  { text: "outset", value: "outset" }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          type: "fieldset",
+          legend: "背景",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "backgroundImage",
+              text: "背景图",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "backgroundColor",
+              text: "背景颜色",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "colorPicker"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "backgroundRepeat",
+              text: "背景图重复",
+              defaultValue: "no-repeat",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "select",
+                options: [
+                  { text: "repeat", value: "repeat" },
+                  { text: "repeat-x", value: "repeat-x" },
+                  { text: "repeat-y", value: "repeat-y" },
+                  { text: "no-repeat", value: "no-repeat" },
+                  { text: "inherit", value: "inherit" }
+                ]
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "backgroundSize",
+              text: "背景图大小",
+              defaultValue: "100% 100%",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        },
+        {
+          type: "fieldset",
+          legend: "字体",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "color",
+              text: "颜色",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "colorPicker"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "fontSize",
+              text: "大小",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "fontWeight",
+              text: "粗细",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number"],
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        },
+        {
+          type: "fieldset",
+          legend: "变形",
+          name: "transform",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "rotate",
+              text: "旋转角度",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              type: "data-source-field-select",
+              name: "scale",
+              text: "缩放",
+              checkStrictly: false,
+              dataSourceFieldType: ["number", "string"],
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        }
+      ]
     }
-    return newConfig;
-  }
-  selectedConfigExceptionHandler(config) {
-    let id;
-    if (typeof config === "string" || typeof config === "number") {
-      id = config;
-    } else {
-      id = config.id;
+  ]
+};
+const eventTabConfig = {
+  title: "事件",
+  items: [
+    {
+      name: "events",
+      src: "component",
+      labelWidth: "100px",
+      type: "event-select"
     }
-    if (!id) {
-      throw new Error("没有ID，无法选中");
+  ]
+};
+const advancedTabConfig = {
+  title: "高级",
+  lazy: true,
+  items: [
+    {
+      name: "created",
+      text: "created",
+      type: "code-select"
+    },
+    {
+      name: "mounted",
+      text: "mounted",
+      type: "code-select"
     }
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node)
-      throw new Error("获取不到组件信息");
-    if (node.id === this.state.root?.id) {
-      throw new Error("不能选根节点");
+  ]
+};
+const displayTabConfig = {
+  title: "显示条件",
+  display: (vm, { model }) => model.type !== "page",
+  items: [
+    {
+      type: "groupList",
+      name: "displayConds",
+      titlePrefix: "条件组",
+      expandAll: true,
+      items: [
+        {
+          type: "table",
+          name: "cond",
+          items: [
+            {
+              type: "data-source-field-select",
+              name: "field",
+              value: "key",
+              label: "字段",
+              checkStrictly: false,
+              dataSourceFieldType: ["string", "number", "boolean", "any"]
+            },
+            {
+              type: "select",
+              options: (mForm, { model }) => {
+                const [id, ...fieldNames] = model.field;
+                const ds = dataSourceService.getDataSourceById(id);
+                let fields = ds?.fields || [];
+                let type = "";
+                (fieldNames || []).forEach((fieldName) => {
+                  const field = fields.find((f) => f.name === fieldName);
+                  fields = field?.fields || [];
+                  type = field?.type || "";
+                });
+                if (type === "array") {
+                  return arrayOptions;
+                }
+                if (type === "boolean") {
+                  return [
+                    { text: "是", value: "is" },
+                    { text: "不是", value: "not" }
+                  ];
+                }
+                if (type === "number") {
+                  return [...eqOptions, ...numberOptions];
+                }
+                if (type === "string") {
+                  return [...arrayOptions, ...eqOptions];
+                }
+                return [...arrayOptions, ...eqOptions, ...numberOptions];
+              },
+              label: "条件",
+              name: "op"
+            },
+            {
+              label: "值",
+              items: [
+                {
+                  name: "value",
+                  type: (mForm, { model }) => {
+                    const [id, ...fieldNames] = model.field;
+                    const ds = dataSourceService.getDataSourceById(id);
+                    let fields = ds?.fields || [];
+                    let type = "";
+                    (fieldNames || []).forEach((fieldName) => {
+                      const field = fields.find((f) => f.name === fieldName);
+                      fields = field?.fields || [];
+                      type = field?.type || "";
+                    });
+                    if (type === "number") {
+                      return "number";
+                    }
+                    if (type === "boolean") {
+                      return "select";
+                    }
+                    return "text";
+                  },
+                  options: [
+                    { text: "true", value: true },
+                    { text: "false", value: false }
+                  ],
+                  display: (vm, { model }) => !["between", "not_between"].includes(model.op)
+                },
+                {
+                  name: "range",
+                  type: "number-range",
+                  display: (vm, { model }) => ["between", "not_between"].includes(model.op)
+                }
+              ]
+            }
+          ]
+        }
+      ]
     }
-    return {
-      node,
-      parent,
-      page
-    };
+  ]
+};
+const fillConfig = (config = [], labelWidth = "80px") => [
+  {
+    type: "tab",
+    labelWidth,
+    items: [
+      {
+        title: "属性",
+        items: [
+          // 组件类型，必须要有
+          {
+            text: "type",
+            name: "type",
+            type: "hidden"
+          },
+          // 组件id，必须要有
+          {
+            name: "id",
+            type: "display",
+            text: "id"
+          },
+          {
+            name: "name",
+            text: "组件名称"
+          },
+          ...config
+        ]
+      },
+      { ...styleTabConfig },
+      { ...eventTabConfig },
+      { ...advancedTabConfig },
+      { ...displayTabConfig }
+    ]
   }
-}
-const editorService = new Editor();
+];
 
-const beforePaste = (position, config) => {
-  if (!config[0]?.style)
-    return config;
-  const curNode = editorService.get("node");
-  const { left: referenceLeft, top: referenceTop } = config[0].style;
-  const pasteConfigs = config.map((configItem) => {
-    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-    let pastePosition = positionClone;
-    if (!isEmpty(pastePosition) && curNode?.items) {
-      pastePosition = getPositionInContainer(pastePosition, curNode.id);
-    }
-    if (pastePosition.left && configItem.style?.left) {
-      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-    }
-    if (pastePosition.top && configItem.style?.top) {
-      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-    }
-    const pasteConfig = propsService.setNewItemId(configItem, false);
-    if (pasteConfig.style) {
-      const { left, top } = pasteConfig.style;
-      if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-        pasteConfig.style.left = Number(left) + offsetX;
-      }
-      if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-        pasteConfig.style.top = Number(top) + offsetY;
-      }
-      pasteConfig.style = {
-        ...pasteConfig.style,
-        ...pastePosition
-      };
-    }
-    const root = editorService.get("root");
-    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
-      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
-    }
-    return pasteConfig;
-  });
-  return pasteConfigs;
+const log = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.log("magic editor: ", ...args);
+  }
 };
-const getPositionInContainer = (position = {}, id) => {
-  let { left = 0, top = 0 } = position;
-  const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
-  const parentElRect = parentEl?.getBoundingClientRect();
-  left = left - (parentElRect?.left || 0);
-  top = top - (parentElRect?.top || 0);
-  return {
-    left,
-    top
-  };
+const info = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.info("magic editor: ", ...args);
+  }
 };
-const getAddParent = (node) => {
-  const curNode = editorService.get("node");
-  let parentNode;
-  if (isPage(node)) {
-    parentNode = editorService.get("root");
-  } else if (curNode?.items) {
-    parentNode = curNode;
-  } else if (curNode?.id) {
-    parentNode = editorService.getParentById(curNode.id, false);
+const warn = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.warn("magic editor: ", ...args);
   }
-  return parentNode;
 };
-const getDefaultConfig = async (addNode, parentNode) => {
-  const { type, inputEvent, ...config } = addNode;
-  const layout = await editorService.getLayout(toRaw(parentNode), addNode);
-  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
-  newNode.style = getInitPositionStyle(newNode.style, layout);
-  return newNode;
+const debug = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.debug("magic editor: ", ...args);
+  }
+};
+const error = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.error("magic editor: ", ...args);
+  }
 };
 
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
@@ -3604,7 +3625,6 @@ const useCodeBlockEdit = (codeBlockService) => {
     if (!codeId.value)
       return;
     await codeBlockService?.setCodeDslById(codeId.value, values);
-    tMagicMessage.success("代码块保存成功");
     codeBlockEditor.value?.hide();
   };
   return {
@@ -3806,7 +3826,7 @@ const useStage = (stageOptions) => {
   const stage = new StageCore({
     render: stageOptions.render,
     runtimeUrl: stageOptions.runtimeUrl,
-    zoom: zoom.value,
+    zoom: stageOptions.zoom ?? zoom.value,
     autoScrollIntoView: stageOptions.autoScrollIntoView,
     isContainer: stageOptions.isContainer,
     containerHighlightClassName: stageOptions.containerHighlightClassName,
@@ -4582,7 +4602,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
       let result = [];
       const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
-      const keys = dsKey.split(".");
+      const keys = dsKey.replaceAll(/\[(\d+)\]/g, ".$1").split(".");
       const dsId = keys.shift();
       const ds = dataSources.value.find((ds2) => ds2.id === dsId);
       if (!ds) {
@@ -4592,6 +4612,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       let fields = ds.fields || [];
       let key = keys.shift();
       while (key) {
+        if (isNumber(key)) {
+          key = keys.shift();
+          continue;
+        }
         for (const field of fields) {
           if (field.name === key) {
             fields = field.fields || [];
@@ -5635,13 +5659,17 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     const eventsService = services?.eventsService;
     const codeBlockService = services?.codeBlockService;
     const eventNameConfig = computed(() => {
-      const fieldType = props.config.src === "component" ? "select" : "cascader";
       const defaultEventNameConfig = {
         name: "name",
         text: "事件",
-        type: fieldType,
+        type: (mForm, { formValue }) => {
+          if (props.config.src !== "component" || formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+            return "cascader";
+          }
+          return "select";
+        },
         labelWidth: "40px",
-        checkStrictly: true,
+        checkStrictly: () => props.config.src !== "component",
         valueSeparator: ".",
         options: (mForm, { formValue }) => {
           let events = [];
@@ -5649,6 +5677,29 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             return events;
           if (props.config.src === "component") {
             events = eventsService.getEvent(formValue.type);
+            if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
+              const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
+              if (pageFragment) {
+                events = [
+                  {
+                    label: pageFragment.name || "迭代器容器",
+                    value: pageFragment.id,
+                    children: events
+                  }
+                ];
+                pageFragment.items.forEach((node) => {
+                  traverseNode(node, (node2) => {
+                    const nodeEvents = node2.type && eventsService.getEvent(node2.type) || [];
+                    events.push({
+                      label: `${node2.name}_${node2.id}`,
+                      value: `${node2.id}`,
+                      children: nodeEvents
+                    });
+                  });
+                });
+                return events;
+              }
+            }
             return events.map((option) => ({
               text: option.label,
               value: option.value
@@ -5707,7 +5758,11 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         name: "to",
         text: "联动组件",
         type: "ui-select",
-        display: (mForm, { model }) => model.actionType === ActionType.COMP
+        display: (mForm, { model }) => model.actionType === ActionType.COMP,
+        onChange: (MForm, v, { model }) => {
+          model.method = "";
+          return v;
+        }
       };
       return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
     });
@@ -5715,15 +5770,43 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       const defaultCompActionConfig = {
         name: "method",
         text: "动作",
-        type: "select",
+        type: (mForm, { model }) => {
+          const to = editorService?.getNodeById(model.to);
+          if (to && to.type === "page-fragment-container" && to.pageFragmentId) {
+            return "cascader";
+          }
+          return "select";
+        },
+        checkStrictly: () => props.config.src !== "component",
         display: (mForm, { model }) => model.actionType === ActionType.COMP,
         options: (mForm, { model }) => {
           const node = editorService?.getNodeById(model.to);
           if (!node?.type)
             return [];
-          return eventsService?.getMethod(node.type).map((option) => ({
-            text: option.label,
-            value: option.value
+          let methods = [];
+          methods = eventsService?.getMethod(node.type) || [];
+          if (node.type === "page-fragment-container" && node.pageFragmentId) {
+            const pageFragment = editorService?.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
+            if (pageFragment) {
+              methods = [];
+              pageFragment.items.forEach((node2) => {
+                traverseNode(node2, (node3) => {
+                  const nodeMethods = node3.type && eventsService?.getMethod(node3.type) || [];
+                  if (nodeMethods.length) {
+                    methods.push({
+                      label: `${node3.name}_${node3.id}`,
+                      value: `${node3.id}`,
+                      children: nodeMethods
+                    });
+                  }
+                });
+              });
+              return methods;
+            }
+          }
+          return methods.map((method) => ({
+            text: method.label,
+            value: method.value
           }));
         }
       };
@@ -7619,7 +7702,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const selected = computed(() => nodeStatus.value.selected);
     const visible = computed(() => nodeStatus.value.visible);
     const draggable = computed(() => nodeStatus.value.draggable);
-    const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+    const hasChildren = computed(
+      () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible)
+    );
     const handleDragStart = (event) => {
       treeEmit?.("node-dragstart", event, props.data);
     };
@@ -7850,24 +7935,38 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const { codeBlockService, depService, editorService } = services || {};
     const codeList = computed(
-      () => Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
-        const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
-          name: dep.name,
+      () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+        const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
+        const pageList = editorService?.get("root")?.items.map((page) => ({
+          name: page.devconfig?.tabName || page.name,
           type: "node",
-          id: `${target.id}_${id}`,
-          key: id,
-          items: dep.keys.map((key) => {
-            const data2 = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: "key" };
-            return data2;
-          })
-        }));
+          id: `${codeId}_${page.id}`,
+          key: page.id,
+          items: []
+        })) || [];
+        if (target) {
+          Object.entries(target.deps).forEach(([id, dep]) => {
+            const page = pageList.find((page2) => page2.key === dep.data?.pageId);
+            page?.items?.push({
+              name: dep.name,
+              type: "node",
+              id: `${page.id}_${id}`,
+              key: id,
+              items: dep.keys.map((key) => {
+                const data2 = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: "key" };
+                return data2;
+              })
+            });
+          });
+        }
         const data = {
-          id: target.id,
-          key: target.id,
-          name: target.name,
+          id: codeId,
+          key: codeId,
+          name: code.name,
           type: "code",
-          codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-          items: compNodes
+          codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+          // 只有一个页面不显示页面分类
+          items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || []
         };
         return data;
       })
@@ -8182,13 +8281,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       key: id,
       items: getKeyTreeConfig(dep, type, `${parentKey}_${id}`)
     });
-    const mergeChildren = (dsId, items, deps, type) => {
+    const mergeChildren = (dsId, pageItems, deps, type) => {
       Object.entries(deps).forEach(([id, dep]) => {
-        const nodeItem = items.find((item) => item.key === id);
+        const page = pageItems.find((page2) => page2.key === dep.data?.pageId);
+        const nodeItem = page?.items.find((item) => item.key === id);
         if (nodeItem) {
           nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
         } else {
-          items.push(getNodeTreeConfig(id, dep, type, dsId));
+          page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
         }
       });
     };
@@ -8197,7 +8297,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         const dsDeps = dsDep.value[ds.id]?.deps || {};
         const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
         const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
-        const items = [];
+        const items = editorService?.get("root")?.items.map((page) => ({
+          name: page.devconfig?.tabName || page.name,
+          type: "node",
+          id: `${ds.id}_${page.id}`,
+          key: page.id,
+          items: []
+        })) || [];
         mergeChildren(ds.id, items, dsDeps);
         mergeChildren(ds.id, items, dsMethodDeps, "method");
         mergeChildren(ds.id, items, dsCondDeps, "cond");
@@ -8206,7 +8312,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           key: ds.id,
           name: ds.title,
           type: "ds",
-          items
+          // 只有一个页面不显示页面分类
+          items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
         };
       })
     );
@@ -10734,7 +10841,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 
 const canUsePluginMethods$1 = {
   async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
-  sync: []
+  sync: ["setCodeDslByIdSync"]
 };
 class CodeBlock extends BaseService {
   state = reactive({
@@ -10745,7 +10852,10 @@ class CodeBlock extends BaseService {
     paramsColConfig: void 0
   });
   constructor() {
-    super(canUsePluginMethods$1.async.map((methodName) => ({ name: methodName, isAsync: true })));
+    super([
+      ...canUsePluginMethods$1.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      ...canUsePluginMethods$1.sync.map((methodName) => ({ name: methodName, isAsync: false }))
+    ]);
   }
   /**
    * 设置活动的代码块dsl数据源
@@ -10785,17 +10895,29 @@ class CodeBlock extends BaseService {
    * @returns {void}
    */
   async setCodeDslById(id, codeConfig) {
+    this.setCodeDslByIdSync(id, codeConfig, true);
+  }
+  /**
+   * 为了兼容历史原因
+   * 设置代码块ID和代码内容到源dsl
+   * @param {Id} id 代码块id
+   * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+   * @param {boolean} force 是否强制写入，默认true
+   * @returns {void}
+   */
+  setCodeDslByIdSync(id, codeConfig, force = true) {
     const codeDsl = this.getCodeDsl();
     if (!codeDsl) {
       throw new Error("dsl中没有codeBlocks");
     }
-    const codeConfigProcessed = codeConfig;
-    if (codeConfig.content) {
+    if (codeDsl[id] && !force)
+      return;
+    const codeConfigProcessed = cloneDeep(codeConfig);
+    if (codeConfigProcessed.content) {
       const parseDSL = getConfig("parseDSL");
-      if (typeof codeConfig.content === "string") {
-        codeConfig.content = parseDSL(codeConfig.content);
+      if (typeof codeConfigProcessed.content === "string") {
+        codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
       }
-      codeConfigProcessed.content = codeConfig.content;
     }
     const existContent = codeDsl[id] || {};
     codeDsl[id] = {
@@ -10907,6 +11029,51 @@ class CodeBlock extends BaseService {
       return newId;
     return await this.getUniqueId();
   }
+  /**
+   * 复制时会带上组件关联的代码块
+   * @param config 组件节点配置
+   * @returns
+   */
+  copyWithRelated(config, collectorOptions) {
+    const copyNodes = Array.isArray(config) ? config : [config];
+    const copyData = {};
+    if (collectorOptions && typeof collectorOptions.isTarget === "function") {
+      const customTarget = new Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new Watcher();
+      coperWatcher.addTarget(customTarget);
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+      Object.keys(customTarget.deps).forEach((nodeId) => {
+        const node = editorService.getNodeById(nodeId);
+        if (!node)
+          return;
+        customTarget.deps[nodeId].keys.forEach((key) => {
+          const relateCodeId = get(node, key);
+          const isExist = Object.keys(copyData).find((codeId) => codeId === relateCodeId);
+          if (!isExist) {
+            const relateCode = this.getCodeContentById(relateCodeId);
+            if (relateCode) {
+              copyData[relateCodeId] = relateCode;
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_CODE_STORAGE_KEY, copyData, {
+      protocol: Protocol.OBJECT
+    });
+  }
+  /**
+   * 粘贴代码块
+   * @returns
+   */
+  paste() {
+    const codeDsl = storageService.getItem(COPY_CODE_STORAGE_KEY);
+    Object.keys(codeDsl).forEach((codeId) => {
+      this.setCodeDslByIdSync(codeId, codeDsl[codeId], false);
+    });
+  }
   resetState() {
     this.state.codeDsl = null;
     this.state.editable = true;
@@ -10951,6 +11118,140 @@ class ComponentList extends BaseService {
 }
 const componentListService = new ComponentList();
 
+globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
+  const start = Date.now();
+  return setTimeout(() => {
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start));
+      }
+    });
+  }, 1);
+};
+class IdleTask extends EventEmitter {
+  taskList = [];
+  taskHandle = null;
+  enqueueTask(taskHandler, taskData) {
+    this.taskList.push({
+      handler: taskHandler,
+      data: taskData
+    });
+    if (!this.taskHandle) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+    }
+  }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  once(eventName, listener) {
+    return super.once(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
+  runTaskQueue(deadline) {
+    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+      const task = this.taskList.shift();
+      task.handler(task.data);
+    }
+    if (this.taskList.length) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+    } else {
+      this.taskHandle = 0;
+      this.emit("finish");
+    }
+  }
+}
+
+const idleTask = new IdleTask();
+class Dep extends BaseService {
+  watcher = new Watcher({ initialTargets: reactive({}) });
+  removeTargets(type = DepTargetType.DEFAULT) {
+    this.watcher.removeTargets(type);
+    const targets = this.watcher.getTargets(type);
+    if (!targets)
+      return;
+    for (const target of Object.values(targets)) {
+      this.emit("remove-target", target.id);
+    }
+  }
+  getTargets(type = DepTargetType.DEFAULT) {
+    return this.watcher.getTargets(type);
+  }
+  getTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
+  }
+  addTarget(target) {
+    this.watcher.addTarget(target);
+    this.emit("add-target", target);
+  }
+  removeTarget(id, type = DepTargetType.DEFAULT) {
+    this.watcher.removeTarget(id, type);
+    this.emit("remove-target", id);
+  }
+  clearTargets() {
+    this.watcher.clearTargets();
+  }
+  collect(nodes, depExtendedData = {}, deep = false, type) {
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      this.collectNode(node, target, depExtendedData, deep);
+    });
+    this.emit("collected", nodes, deep);
+  }
+  collectIdle(nodes, depExtendedData = {}, deep = false, type) {
+    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+      idleTask.enqueueTask(
+        ({ node: node2, deep: deep2, target: target2 }) => {
+          this.collectNode(node2, target2, depExtendedData, deep2);
+        },
+        {
+          node,
+          deep,
+          target
+        }
+      );
+    });
+    idleTask.once("finish", () => {
+      this.emit("collected", nodes, deep);
+    });
+  }
+  collectNode(node, target, depExtendedData = {}, deep = false) {
+    if (isPage(node)) {
+      Object.entries(target.deps).forEach(([depKey, dep]) => {
+        if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
+          delete target.deps[depKey];
+        }
+      });
+    } else {
+      this.watcher.removeTargetDep(target, node);
+    }
+    this.watcher.collectItem(node, target, depExtendedData, deep);
+  }
+  clear(nodes) {
+    return this.watcher.clear(nodes);
+  }
+  clearByType(type, nodes) {
+    return this.watcher.clearByType(type, nodes);
+  }
+  hasTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
+  }
+  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
+    return this.watcher.hasSpecifiedTypeTarget(type);
+  }
+  on(eventName, listener) {
+    return super.on(eventName, listener);
+  }
+  once(eventName, listener) {
+    return super.once(eventName, listener);
+  }
+  emit(eventName, ...args) {
+    return super.emit(eventName, ...args);
+  }
+}
+const depService = new Dep();
+
 let eventMap = reactive({});
 let methodMap = reactive({});
 class Events extends BaseService {
@@ -11248,6 +11549,7 @@ class StageOverlay extends BaseService {
   createStage(stageOptions = {}) {
     return useStage({
       ...stageOptions,
+      zoom: 1,
       runtimeUrl: "",
       autoScrollIntoView: false,
       render: async (stage) => {
@@ -11569,15 +11871,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       delete root.dataSourceCondDeps[id];
     }
   };
-  const depUpdateHandler = (node) => {
-    updateNodeWhenDataSourceChange([node]);
-  };
   const collectedHandler = (nodes) => {
     updateNodeWhenDataSourceChange(nodes);
   };
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
-  depService.on("dep-update", depUpdateHandler);
   depService.on("collected", collectedHandler);
   const initDataSourceDepTarget = (ds) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -11599,7 +11897,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       initDataSourceDepTarget(ds);
     });
     if (Array.isArray(value.items)) {
-      depService.collect(value.items, true);
+      value.items.forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
     } else {
       depService.clear();
       delete value.dataSourceDeps;
@@ -11622,17 +11922,29 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       emit("update:modelValue", value);
     }
   };
+  const collectIdle = (nodes, deep) => {
+    nodes.forEach((node) => {
+      let pageId;
+      if (isPage(node)) {
+        pageId = node.id;
+      } else {
+        const info = editorService.getNodeInfo(node.id);
+        pageId = info.page?.id;
+      }
+      depService.collectIdle([node], { pageId }, deep);
+    });
+  };
   const nodeAddHandler = (nodes) => {
-    depService.collect(nodes);
+    collectIdle(nodes, true);
   };
   const nodeUpdateHandler = (nodes) => {
-    depService.collect(nodes);
+    collectIdle(nodes, false);
   };
   const nodeRemoveHandler = (nodes) => {
     depService.clear(nodes);
   };
   const historyChangeHandler = (page) => {
-    depService.collect([page], true);
+    depService.collectIdle([page], { pageId: page.id }, true);
   };
   editorService.on("history-change", historyChangeHandler);
   editorService.on("root-change", rootChangeHandler);
@@ -11659,7 +11971,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     const root = editorService.get("root");
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
-    depService.collect(root?.items || [], true);
+    (root?.items || []).forEach((page) => {
+      depService.collectIdle([page], { pageId: page.id }, true);
+    });
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
     updateNodeWhenDataSourceChange(nodes);
@@ -11676,13 +11990,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   dataSourceService.on("add", dataSourceAddHandler);
   dataSourceService.on("update", dataSourceUpdateHandler);
   dataSourceService.on("remove", dataSourceRemoveHandler);
-  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
-  }
   onBeforeUnmount(() => {
     depService.off("add-target", targetAddHandler);
     depService.off("remove-target", targetRemoveHandler);
-    depService.off("dep-update", depUpdateHandler);
     depService.off("collected", collectedHandler);
     editorService.off("history-change", historyChangeHandler);
     editorService.off("root-change", rootChangeHandler);
@@ -11727,7 +12037,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     stageRect: {},
     codeOptions: {},
     disabledDragStart: { type: Boolean },
-    collectorOptions: {},
     guidesOptions: {},
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },
@@ -11933,4 +12242,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };