@tmagic/editor 1.4.5 → 1.4.7

package/dist/tmagic-editor.umd.cjs

@@ -510,388 +510,94 @@
     }
   });
 
-  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 events.EventEmitter {
@@ -968,1077 +674,204 @@
   }
 
   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 = vue.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(utils.toLine(type), this.get("configs"));
+    setPropsConfigs(configs) {
+      Object.keys(configs).forEach((type) => {
+        this.setPropsConfig(utils.toLine(type), configs[type]);
+      });
+      this.emit("props-configs-change");
     }
-    setFormConfig(type, config) {
-      this.get("configs")[utils.toLine(type)] = config;
+    async fillConfig(config, labelWidth) {
+      return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
     }
-    getFormValue(type = "base") {
-      return getFormValue(utils.toLine(type), this.get("values")[type]);
+    async setPropsConfig(type, config) {
+      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
     }
-    setFormValue(type, value) {
-      this.get("values")[utils.toLine(type)] = value;
-    }
-    getFormEvent(type = "base") {
-      return this.get("events")[utils.toLine(type)] || [];
-    }
-    setFormEvent(type, value = []) {
-      this.get("events")[utils.toLine(type)] = value;
+    /**
+     * 获取指点类型的组件属性表单配置
+     * @param type 组件类型
+     * @returns 组件属性表单配置
+     */
+    async getPropsConfig(type) {
+      if (type === "area") {
+        return await this.getPropsConfig("button");
+      }
+      return lodashEs.cloneDeep(this.state.propsConfigMap[utils.toLine(type)] || await this.fillConfig([]));
     }
-    getFormMethod(type = "base") {
-      return this.get("methods")[utils.toLine(type)] || [];
+    setPropsValues(values) {
+      Object.keys(values).forEach((type) => {
+        this.setPropsValue(utils.toLine(type), values[type]);
+      });
     }
-    setFormMethod(type, value = []) {
-      this.get("methods")[utils.toLine(type)] = value;
+    /**
+     * 为指点类型组件设置组件初始值
+     * @param type 组件类型
+     * @param value 组件初始值
+     */
+    async setPropsValue(type, value) {
+      this.state.propsValueMap[utils.toLine(type)] = value;
     }
-    add(config) {
-      const newConfig = {
-        ...config,
-        id: this.createId()
+    /**
+     * 获取指定类型的组件初始值
+     * @param type 组件类型
+     * @returns 组件初始值
+     */
+    async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+      const type = utils.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(
+        lodashEs.cloneDeep({
+          type,
+          ...defaultValue
+        })
+      );
+      return {
+        id,
+        ...defaultPropsValue,
+        ...lodashEs.mergeWith({}, lodashEs.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] = lodashEs.cloneDeep(config);
-      this.emit("update", config);
+    createId(type) {
+      return `${type}_${utils.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_${utils.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 dep.Target({
+        ...collectorOptions
+      });
+      const coperWatcher = new dep.Watcher();
+      coperWatcher.addTarget(target);
+      coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
+      originConfigs.forEach((config) => {
+        const newId = relateIdMap[config.id];
+        const path = utils.getNodePath(newId, targetConfigs);
+        const targetConfig = path[path.length - 1];
+        if (!targetConfig)
+          return;
+        target.deps[config.id]?.keys?.forEach((fullKey) => {
+          const relateOriginId = utils.getValueByKeyPath(fullKey, config);
+          const relateTargetId = relateIdMap[relateOriginId];
+          if (!relateTargetId)
+            return;
+          utils.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) => utils.isPage(item));
-  };
-  const getPageFragmentList = (root) => {
-    if (!root)
-      return [];
-    if (!Array.isArray(root.items))
-      return [];
-    return root.items.filter((item) => utils.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 (!utils.isNumber(height)) {
-      height = 0;
-    }
-    const { height: parentHeight } = parentNode.style;
-    const { scrollTop = 0, wrapperHeight } = stage.mask;
-    const wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-    const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-    if (utils.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 (utils.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 = utils.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 = utils.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 || !utils.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 = utils.calcValueByFontsize(doc, parentEl.offsetWidth);
-      const calcElOffsetWidth = utils.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 dep.Watcher({ initialTargets: vue.reactive({}) });
-    removeTargets(type = dep.DepTargetType.DEFAULT) {
-      this.watcher.removeTargets(type);
-      this.emit("remove-target");
-    }
-    getTargets(type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.getTargets(type);
-    }
-    getTarget(id, type = dep.DepTargetType.DEFAULT) {
-      return this.watcher.getTarget(id, type);
-    }
-    addTarget(target) {
-      this.watcher.addTarget(target);
-      this.emit("add-target", target);
-    }
-    removeTarget(id, type = dep.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 = dep.DepTargetType.DEFAULT) {
-      return this.watcher.hasTarget(id, type);
-    }
-    hasSpecifiedTypeTarget(type = dep.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 = vue.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(utils.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[utils.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 lodashEs.cloneDeep(this.state.propsConfigMap[utils.toLine(type)] || await this.fillConfig([]));
-    }
-    setPropsValues(values) {
-      Object.keys(values).forEach((type) => {
-        this.setPropsValue(utils.toLine(type), values[type]);
-      });
-    }
-    /**
-     * 为指点类型组件设置组件初始值
-     * @param type 组件类型
-     * @param value 组件初始值
-     */
-    async setPropsValue(type, value) {
-      this.state.propsValueMap[utils.toLine(type)] = value;
-    }
-    /**
-     * 获取指定类型的组件初始值
-     * @param type 组件类型
-     * @returns 组件初始值
-     */
-    async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
-      const type = utils.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(
-        lodashEs.cloneDeep({
-          type,
-          ...defaultValue
-        })
-      );
-      return {
-        id,
-        ...defaultPropsValue,
-        ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
-      };
-    }
-    createId(type) {
-      return `${type}_${utils.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(dep.DepTargetType.RELATED_COMP_WHEN_COPY, dep.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 = utils.getValueByKeyPath(fullKey, config);
-          const relateTargetId = relateIdMap[relateOriginId];
-          if (!relateTargetId)
-            return;
-          utils.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;
@@ -2164,137 +997,462 @@
         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) => utils.isPage(item));
+  };
+  const getPageFragmentList = (root) => {
+    if (!root)
+      return [];
+    if (!Array.isArray(root.items))
+      return [];
+    return root.items.filter((item) => utils.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 (!utils.isNumber(height)) {
+      height = 0;
+    }
+    const { height: parentHeight } = parentNode.style;
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    const wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+    const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+    if (utils.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 (utils.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 = utils.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 = utils.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 || !utils.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 = utils.calcValueByFontsize(doc, parentEl.offsetWidth);
+      const calcElOffsetWidth = utils.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 (!lodashEs.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 ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
+        pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.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 - utils.calcValueByFontsize(doc, parentElRect?.left || 0);
+    top = top - utils.calcValueByFontsize(doc, parentElRect?.top || 0);
+    return {
+      left,
+      top
+    };
+  };
+  const getAddParent = (node) => {
+    const curNode = editorService.get("node");
+    let parentNode;
+    if (utils.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(vue.toRaw(parentNode), addNode);
+    const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout);
+    return newNode;
+  };
 
-  const canUsePluginMethods$3 = {
+  const canUsePluginMethods$4 = {
     async: [
       "getLayout",
       "highlight",
@@ -2339,7 +1497,7 @@
     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"]
       );
@@ -2778,448 +1936,1311 @@
       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 dep.Target({
+          ...collectorOptions
+        });
+        const coperWatcher = new dep.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 = lodashEs.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 === schema.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, lodashEs.cloneDeep(config), doc);
+      return pasteConfigs;
+    }
+    async doAlignCenter(config) {
+      const parent = this.getParentById(config.id);
+      if (!parent)
+        throw new Error("找不到父节点");
+      const node = lodashEs.cloneDeep(vue.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 = utils.calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
+          node.style.right = "";
+        }
+      } else if (parent.style && utils.isNumber(parent.style?.width) && utils.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: lodashEs.cloneDeep(vue.toRaw(parent)),
+        parentId: grandparent?.id,
+        root: lodashEs.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: lodashEs.cloneDeep(root) });
+        const layout = await this.getLayout(target);
+        const newConfig = lodashEs.mergeWith(lodashEs.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: lodashEs.cloneDeep(target), parentId: targetParent?.id, root: lodashEs.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: lodashEs.cloneDeep(page),
+          parentId: root.id,
+          root: lodashEs.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(dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
-      const customTarget = depService.getTarget(
-        dep.DepTargetType.RELATED_COMP_WHEN_COPY,
-        dep.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 = lodashEs.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 = vue.toRaw(this.get("node"));
+      if (!node || utils.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 (utils.isNumber(style.top)) {
+          update({
+            ...style,
+            top: Number(style.top) + Number(top),
+            bottom: ""
+          });
+        } else if (utils.isNumber(style.bottom)) {
+          update({
+            ...style,
+            bottom: Number(style.bottom) - Number(top),
+            top: ""
+          });
+        }
+      }
+      if (left) {
+        if (utils.isNumber(style.left)) {
+          update({
+            ...style,
+            left: Number(style.left) + Number(left),
+            right: ""
+          });
+        } else if (utils.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 = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
+      const page = this.get("page");
+      if (!this.isHistoryStateChange && curNode && page) {
+        historyService.push({
+          data: lodashEs.cloneDeep(vue.toRaw(page)),
+          modifiedNodeIds: this.get("modifiedNodeIds"),
+          nodeId: curNode.id
         });
       }
-      storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
-        protocol: Protocol.OBJECT
-      });
+      this.isHistoryStateChange = false;
     }
-    /**
-     * 从localStorage中获取节点，然后添加到当前容器中
-     * @param position 粘贴的坐标
-     * @returns 添加后的组件节点配置
-     */
-    async paste(position = {}) {
-      const config = storageService.getItem(COPY_STORAGE_KEY);
-      if (!Array.isArray(config))
+    async changeHistoryState(value) {
+      if (!value)
         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 === schema.NodeType.ROOT) {
-          parent = this.get("page");
+      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 = lodashEs.cloneDeep(dist);
+      if (!utils.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: "请求头"
         }
-      }
-      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, lodashEs.cloneDeep(config));
-      return pasteConfigs;
+      ]
     }
-    async doAlignCenter(config) {
-      const parent = this.getParentById(config.id);
-      if (!parent)
-        throw new Error("找不到父节点");
-      const node = lodashEs.cloneDeep(vue.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 = utils.calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
-          node.style.right = "";
+  ];
+
+  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"
+            }
+          ]
         }
-      } else if (parent.style && utils.isNumber(parent.style?.width) && utils.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;
+  ];
+  const getFormConfig = (type, configs) => {
+    switch (type) {
+      case "base":
+        return fillConfig$1([]);
+      case "http":
+        return fillConfig$1(HttpFormConfig);
+      default:
+        return fillConfig$1(configs[type] || []);
     }
-    /**
-     * 移动当前选中节点位置
-     * @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: lodashEs.cloneDeep(vue.toRaw(parent)),
-        parentId: grandparent?.id,
-        root: lodashEs.cloneDeep(root)
+  };
+  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].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 (utils.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: lodashEs.cloneDeep(root) });
-        const layout = await this.getLayout(target);
-        const newConfig = lodashEs.mergeWith(lodashEs.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: lodashEs.cloneDeep(target), parentId: targetParent?.id, root: lodashEs.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: lodashEs.cloneDeep(page),
-          parentId: root.id,
-          root: lodashEs.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 = vue.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 = vue.toRaw(this.get("node"));
-      if (!node || utils.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 (utils.isNumber(style.top)) {
-          update({
-            ...style,
-            top: Number(style.top) + Number(top),
-            bottom: ""
-          });
-        } else if (utils.isNumber(style.bottom)) {
-          update({
-            ...style,
-            bottom: Number(style.bottom) - Number(top),
-            top: ""
-          });
-        }
-      }
-      if (left) {
-        if (utils.isNumber(style.left)) {
-          update({
-            ...style,
-            left: Number(style.left) + Number(left),
-            right: ""
-          });
-        } else if (utils.isNumber(style.right)) {
-          update({
-            ...style,
-            right: Number(style.right) - Number(left),
-            left: ""
-          });
-        }
-      }
+    getFormConfig(type = "base") {
+      return getFormConfig(utils.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")[utils.toLine(type)] = config;
+    }
+    getFormValue(type = "base") {
+      return getFormValue(utils.toLine(type), this.get("values")[type]);
+    }
+    setFormValue(type, value) {
+      this.get("values")[utils.toLine(type)] = value;
+    }
+    getFormEvent(type = "base") {
+      return this.get("events")[utils.toLine(type)] || [];
+    }
+    setFormEvent(type, value = []) {
+      this.get("events")[utils.toLine(type)] = value;
+    }
+    getFormMethod(type = "base") {
+      return this.get("methods")[utils.toLine(type)] || [];
+    }
+    setFormMethod(type, value = []) {
+      this.get("methods")[utils.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] = lodashEs.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_${utils.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 = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
-      const page = this.get("page");
-      if (!this.isHistoryStateChange && curNode && page) {
-        historyService.push({
-          data: lodashEs.cloneDeep(vue.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 dep.Target({
+          ...collectorOptions
+        });
+        const coperWatcher = new dep.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] = lodashEs.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 = lodashEs.cloneDeep(dist);
-      if (!utils.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 (!lodashEs.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 ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
-        pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.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 (utils.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(vue.toRaw(parentNode), addNode);
-    const newNode = { ...vue.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__ */ vue.defineComponent({
@@ -3609,7 +3630,6 @@
       if (!codeId.value)
         return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
-      design.tMagicMessage.success("代码块保存成功");
       codeBlockEditor.value?.hide();
     };
     return {
@@ -3811,7 +3831,7 @@
     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,
@@ -4587,7 +4607,7 @@
       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) {
@@ -4597,6 +4617,10 @@
         let fields = ds.fields || [];
         let key = keys.shift();
         while (key) {
+          if (utils.isNumber(key)) {
+            key = keys.shift();
+            continue;
+          }
           for (const field of fields) {
             if (field.name === key) {
               fields = field.fields || [];
@@ -5640,13 +5664,17 @@
       const eventsService = services?.eventsService;
       const codeBlockService = services?.codeBlockService;
       const eventNameConfig = vue.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 = [];
@@ -5654,6 +5682,29 @@
               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
@@ -5712,7 +5763,11 @@
           name: "to",
           text: "联动组件",
           type: "ui-select",
-          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
+          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
+          onChange: (MForm, v, { model }) => {
+            model.method = "";
+            return v;
+          }
         };
         return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
       });
@@ -5720,15 +5775,43 @@
         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 === schema.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
             }));
           }
         };
@@ -7624,7 +7707,9 @@
       const selected = vue.computed(() => nodeStatus.value.selected);
       const visible = vue.computed(() => nodeStatus.value.visible);
       const draggable = vue.computed(() => nodeStatus.value.draggable);
-      const hasChildren = vue.computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+      const hasChildren = vue.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);
       };
@@ -7855,24 +7940,38 @@
       const services = vue.inject("services");
       const { codeBlockService, depService, editorService } = services || {};
       const codeList = vue.computed(
-        () => Object.values(depService?.getTargets(dep.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, dep.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;
         })
@@ -8187,13 +8286,14 @@
         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));
           }
         });
       };
@@ -8202,7 +8302,13 @@
           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");
@@ -8211,7 +8317,8 @@
             key: ds.id,
             name: ds.title,
             type: "ds",
-            items
+            // 只有一个页面不显示页面分类
+            items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || []
           };
         })
       );
@@ -10739,7 +10846,7 @@
 
   const canUsePluginMethods$1 = {
     async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
-    sync: []
+    sync: ["setCodeDslByIdSync"]
   };
   class CodeBlock extends BaseService {
     state = vue.reactive({
@@ -10750,7 +10857,10 @@
       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数据源
@@ -10790,17 +10900,29 @@
      * @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 = lodashEs.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] = {
@@ -10912,6 +11034,51 @@
         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 dep.Target({
+          ...collectorOptions
+        });
+        const coperWatcher = new dep.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 = lodashEs.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;
@@ -10956,6 +11123,140 @@
   }
   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 events.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 dep.Watcher({ initialTargets: vue.reactive({}) });
+    removeTargets(type = dep.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 = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTargets(type);
+    }
+    getTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTarget(id, type);
+    }
+    addTarget(target) {
+      this.watcher.addTarget(target);
+      this.emit("add-target", target);
+    }
+    removeTarget(id, type = dep.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 (utils.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 = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasTarget(id, type);
+    }
+    hasSpecifiedTypeTarget(type = dep.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 = vue.reactive({});
   let methodMap = vue.reactive({});
   class Events extends BaseService {
@@ -11253,6 +11554,7 @@
     createStage(stageOptions = {}) {
       return useStage({
         ...stageOptions,
+        zoom: 1,
         runtimeUrl: "",
         autoScrollIntoView: false,
         render: async (stage) => {
@@ -11574,15 +11876,11 @@
         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(dep.createDataSourceTarget(ds, vue.reactive({})));
@@ -11604,7 +11902,9 @@
         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;
@@ -11627,17 +11927,29 @@
         emit("update:modelValue", value);
       }
     };
+    const collectIdle = (nodes, deep) => {
+      nodes.forEach((node) => {
+        let pageId;
+        if (utils.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);
@@ -11664,7 +11976,9 @@
       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(dep.DepTargetType.DATA_SOURCE);
       const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
       updateNodeWhenDataSourceChange(nodes);
@@ -11681,13 +11995,9 @@
     dataSourceService.on("add", dataSourceAddHandler);
     dataSourceService.on("update", dataSourceUpdateHandler);
     dataSourceService.on("remove", dataSourceRemoveHandler);
-    if (props.collectorOptions && !depService.hasTarget(dep.DepTargetType.RELATED_COMP_WHEN_COPY)) {
-      depService.addTarget(dep.createRelatedCompTarget(props.collectorOptions));
-    }
     vue.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);
@@ -11732,7 +12042,6 @@
       stageRect: {},
       codeOptions: {},
       disabledDragStart: { type: Boolean },
-      collectorOptions: {},
       guidesOptions: {},
       disabledMultiSelect: { type: Boolean },
       disabledPageFragment: { type: Boolean },
@@ -11943,6 +12252,8 @@
     get: () => dep.DepTargetType
   });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
+  exports.COPY_CODE_STORAGE_KEY = COPY_CODE_STORAGE_KEY;
+  exports.COPY_DS_STORAGE_KEY = COPY_DS_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockEditor = _sfc_main$J;
   exports.CodeBlockList = _sfc_main$l;
@@ -11964,6 +12275,7 @@
   exports.DragType = DragType;
   exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
+  exports.FloatingBox = _sfc_main$N;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
   exports.Icon = _sfc_main$U;
   exports.KeyBindingCommand = KeyBindingCommand;