@tmagic/editor 1.4.4 → 1.4.6

package/dist/tmagic-editor.umd.cjs

@@ -510,362 +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: "事件配置",
-          display: false,
-          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 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 {
@@ -941,590 +673,500 @@
     }
   }
 
-  const canUsePluginMethods$6 = {
-    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$6.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+  class Dep extends BaseService {
+    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
+    removeTargets(type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTargets(type);
+      this.emit("remove-target");
     }
-    set(name, value) {
-      this.state[name] = value;
+    getTargets(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTargets(type);
     }
-    get(name) {
-      return this.state[name];
+    getTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTarget(id, type);
     }
-    getFormConfig(type = "base") {
-      return getFormConfig(utils.toLine(type), this.get("configs"));
+    addTarget(target) {
+      this.watcher.addTarget(target);
+      this.emit("add-target", target);
     }
-    setFormConfig(type, config) {
-      this.get("configs")[utils.toLine(type)] = config;
+    removeTarget(id, type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTarget(id, type);
+      this.emit("remove-target");
     }
-    getFormValue(type = "base") {
-      return getFormValue(utils.toLine(type), this.get("values")[type]);
+    clearTargets() {
+      this.watcher.clearTargets();
     }
-    setFormValue(type, value) {
-      this.get("values")[utils.toLine(type)] = value;
+    collect(nodes, deep = false, type) {
+      this.watcher.collect(nodes, deep, type);
+      this.emit("collected", nodes, deep);
     }
-    getFormEvent(type = "base") {
-      return this.get("events")[utils.toLine(type)] || [];
+    clear(nodes) {
+      return this.watcher.clear(nodes);
     }
-    setFormEvent(type, value = []) {
-      this.get("events")[utils.toLine(type)] = value;
+    clearByType(type, nodes) {
+      return this.watcher.clearByType(type, nodes);
     }
-    getFormMethod(type = "base") {
-      return this.get("methods")[utils.toLine(type)] || [];
+    hasTarget(id, type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasTarget(id, type);
     }
-    setFormMethod(type, value = []) {
-      this.get("methods")[utils.toLine(type)] = value;
+    hasSpecifiedTypeTarget(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.hasSpecifiedTypeTarget(type);
     }
-    add(config) {
-      const newConfig = {
-        ...config,
-        id: this.createId()
-      };
-      this.get("dataSources").push(newConfig);
-      this.emit("add", newConfig);
-      return newConfig;
+  }
+  const depService = new Dep();
+
+  const canUsePluginMethods$6 = {
+    async: [
+      "setPropsConfig",
+      "getPropsConfig",
+      "setPropsValue",
+      "getPropsValue",
+      "fillConfig",
+      "getDefaultPropsValue"
+    ],
+    sync: ["createId", "setNewItemId"]
+  };
+  class Props extends BaseService {
+    state = vue.reactive({
+      propsConfigMap: {},
+      propsValueMap: {},
+      relateIdMap: {}
+    });
+    constructor() {
+      super([
+        ...canUsePluginMethods$6.async.map((methodName) => ({ name: methodName, isAsync: true })),
+        ...canUsePluginMethods$6.sync.map((methodName) => ({ name: methodName, isAsync: false }))
+      ]);
     }
-    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;
+    setPropsConfigs(configs) {
+      Object.keys(configs).forEach((type) => {
+        this.setPropsConfig(utils.toLine(type), configs[type]);
+      });
+      this.emit("props-configs-change");
     }
-    remove(id) {
-      const dataSources = this.get("dataSources");
-      const index = dataSources.findIndex((ds) => ds.id === id);
-      dataSources.splice(index, 1);
-      this.emit("remove", id);
+    async fillConfig(config, labelWidth) {
+      return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
     }
-    createId() {
-      return `ds_${utils.guid()}`;
+    async setPropsConfig(type, config) {
+      this.state.propsConfigMap[utils.toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
     }
-    getDataSourceById(id) {
-      return this.get("dataSources").find((ds) => ds.id === id);
+    /**
+     * 获取指点类型的组件属性表单配置
+     * @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.set("dataSources", []);
+      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;
+      depService.clearByType(dep.DepTargetType.RELATED_COMP_WHEN_COPY);
+      depService.collect(originConfigs, true, dep.DepTargetType.RELATED_COMP_WHEN_COPY);
+      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 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);
+        }
+      });
+    }
+    /**
+     * 清除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 propsService = new Props();
 
-  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)
-                  }
-                ]
-              }
-            ]
-          }
-        ]
+  class UndoRedo {
+    elementList;
+    listCursor;
+    listMaxSize;
+    constructor(listMaxSize = 20) {
+      const minListMaxSize = 2;
+      this.elementList = [];
+      this.listCursor = 0;
+      this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
+    }
+    pushElement(element) {
+      this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, lodashEs.cloneDeep(element));
+      this.listCursor += 1;
+      if (this.elementList.length > this.listMaxSize) {
+        this.elementList.shift();
+        this.listCursor -= 1;
       }
-    ]
-  };
-  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 }
-      ]
     }
-  ];
+    canUndo() {
+      return this.listCursor > 1;
+    }
+    // 返回undo后的当前元素
+    undo() {
+      if (!this.canUndo()) {
+        return null;
+      }
+      this.listCursor -= 1;
+      return this.getCurrentElement();
+    }
+    canRedo() {
+      return this.elementList.length > this.listCursor;
+    }
+    // 返回redo后的当前元素
+    redo() {
+      if (!this.canRedo()) {
+        return null;
+      }
+      this.listCursor += 1;
+      return this.getCurrentElement();
+    }
+    getCurrentElement() {
+      if (this.listCursor < 1) {
+        return null;
+      }
+      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
+    }
+  }
 
-  const log = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.log("magic editor: ", ...args);
+  class History extends BaseService {
+    state = vue.reactive({
+      pageSteps: {},
+      pageId: void 0,
+      canRedo: false,
+      canUndo: false
+    });
+    constructor() {
+      super([]);
+      this.on("change", this.setCanUndoRedo);
     }
-  };
-  const info = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.info("magic editor: ", ...args);
+    reset() {
+      this.state.pageSteps = {};
+      this.resetPage();
+    }
+    resetPage() {
+      this.state.pageId = void 0;
+      this.state.canRedo = false;
+      this.state.canUndo = false;
+    }
+    changePage(page) {
+      if (!page)
+        return;
+      this.state.pageId = page.id;
+      if (!this.state.pageSteps[this.state.pageId]) {
+        const undoRedo = new UndoRedo();
+        undoRedo.pushElement({
+          data: page,
+          modifiedNodeIds: /* @__PURE__ */ new Map(),
+          nodeId: page.id
+        });
+        this.state.pageSteps[this.state.pageId] = undoRedo;
+      }
+      this.setCanUndoRedo();
+      this.emit("page-change", this.state.pageSteps[this.state.pageId]);
+    }
+    resetState() {
+      this.state.pageId = void 0;
+      this.state.pageSteps = {};
+      this.state.canRedo = false;
+      this.state.canUndo = false;
+    }
+    push(state) {
+      const undoRedo = this.getUndoRedo();
+      if (!undoRedo)
+        return null;
+      undoRedo.pushElement(state);
+      this.emit("change", state);
+      return state;
     }
+    undo() {
+      const undoRedo = this.getUndoRedo();
+      if (!undoRedo)
+        return null;
+      const state = undoRedo.undo();
+      this.emit("change", state);
+      return state;
+    }
+    redo() {
+      const undoRedo = this.getUndoRedo();
+      if (!undoRedo)
+        return null;
+      const state = undoRedo.redo();
+      this.emit("change", state);
+      return state;
+    }
+    destroy() {
+      this.resetState();
+      this.removeAllListeners();
+      this.removeAllPlugins();
+    }
+    getUndoRedo() {
+      if (!this.state.pageId)
+        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;
+    }
+  }
+  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"]
   };
-  const warn = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.warn("magic editor: ", ...args);
+  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);
     }
-  };
-  const debug = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.debug("magic editor: ", ...args);
+    destroy() {
+      this.removeAllListeners();
+      this.removeAllPlugins();
     }
-  };
-  const error = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.error("magic editor: ", ...args);
+    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";
@@ -1593,6 +1235,8 @@
   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 [];
@@ -1639,11 +1283,13 @@
       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)) {
-      const { scrollTop = 0, wrapperHeight } = stage.mask;
-      return (wrapperHeight - height) / 2 + scrollTop;
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
     }
-    return (parentHeight - height) / 2;
+    return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
   };
   const getInitPositionStyle = (style = {}, layout) => {
     if (layout === Layout.ABSOLUTE) {
@@ -1744,8 +1390,12 @@
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
     const left = Number(config.style?.left) || 0;
-    if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
-      return parentEl.offsetWidth - el.offsetWidth;
+    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;
   };
@@ -1773,1421 +1423,1855 @@
     }
   };
 
-  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 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 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 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 depService = new Dep();
+    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$5 = {
+  const canUsePluginMethods$4 = {
     async: [
-      "setPropsConfig",
-      "getPropsConfig",
-      "setPropsValue",
-      "getPropsValue",
-      "fillConfig",
-      "getDefaultPropsValue"
+      "getLayout",
+      "highlight",
+      "select",
+      "multiSelect",
+      "doAdd",
+      "add",
+      "doRemove",
+      "remove",
+      "doUpdate",
+      "update",
+      "sort",
+      "copy",
+      "paste",
+      "doPaste",
+      "doAlignCenter",
+      "alignCenter",
+      "moveLayer",
+      "moveToContainer",
+      "dragTo",
+      "undo",
+      "redo",
+      "move"
     ],
-    sync: ["createId", "setNewItemId"]
+    sync: []
   };
-  class Props extends BaseService {
+  class Editor extends BaseService {
     state = vue.reactive({
-      propsConfigMap: {},
-      propsValueMap: {},
-      relateIdMap: {}
+      root: null,
+      page: null,
+      parent: null,
+      node: null,
+      nodes: [],
+      stage: null,
+      stageLoading: true,
+      highlightNode: null,
+      modifiedNodeIds: /* @__PURE__ */ new Map(),
+      pageLength: 0,
+      pageFragmentLength: 0,
+      disabledMultiSelect: false
     });
-    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
-        })
+    isHistoryStateChange = false;
+    constructor() {
+      super(
+        canUsePluginMethods$4.async.map((methodName) => ({ name: methodName, isAsync: true })),
+        // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+        ["select", "update", "moveLayer"]
       );
-      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
+     * 设置当前指点节点配置
+     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
+     * @param value MNode
      */
-    /* 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;
+    set(name, value) {
+      const preValue = this.state[name];
+      this.state[name] = value;
+      if (name === "nodes" && Array.isArray(value)) {
+        this.set("node", value[0]);
       }
-      if (config.items && Array.isArray(config.items)) {
-        for (const item of config.items) {
-          this.setNewItemId(item);
+      if (name === "root") {
+        if (Array.isArray(value)) {
+          throw new Error("root 不能为数组");
+        }
+        if (value && lodashEs.isObject(value)) {
+          const app = value;
+          this.state.pageLength = getPageList(app).length || 0;
+          this.state.pageFragmentLength = getPageFragmentList(app).length || 0;
+          this.state.stageLoading = this.state.pageLength !== 0;
+        } else {
+          this.state.pageLength = 0;
+          this.state.pageFragmentLength = 0;
+          this.state.stageLoading = false;
         }
+        this.emit("root-change", value, preValue);
       }
-      return config;
     }
     /**
-     * 获取默认属性配置
-     * @param type 组件类型
-     * @returns Object
+     * 获取当前指点节点配置
+     * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
+     * @returns MNode
      */
-    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 = {};
+    get(name) {
+      return this.state[name];
     }
     /**
-     * 替换关联ID
-     * @param originConfigs 原组件配置
-     * @param targetConfigs 待替换的组件配置
+     * 根据id获取组件、组件的父组件以及组件所属的页面节点
+     * @param {number | string} id 组件id
+     * @param {boolean} raw 是否使用toRaw
+     * @returns {EditorNodeInfo}
      */
-    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)
+    getNodeInfo(id, raw = true) {
+      let root = this.get("root");
+      if (raw) {
+        root = vue.toRaw(root);
+      }
+      const info = {
+        node: null,
+        parent: null,
+        page: null
+      };
+      if (!root)
+        return info;
+      if (id === root.id) {
+        info.node = root;
+        return info;
+      }
+      const path = utils.getNodePath(id, root.items);
+      if (!path.length)
+        return info;
+      path.unshift(root);
+      info.node = path[path.length - 1];
+      info.parent = path[path.length - 2];
+      path.forEach((item) => {
+        if (utils.isPage(item) || utils.isPageFragment(item)) {
+          info.page = item;
           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);
-        });
+        }
       });
+      return info;
     }
     /**
-     * 清除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();
-
-  class UndoRedo {
-    elementList;
-    listCursor;
-    listMaxSize;
-    constructor(listMaxSize = 20) {
-      const minListMaxSize = 2;
-      this.elementList = [];
-      this.listCursor = 0;
-      this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
-    }
-    pushElement(element) {
-      this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, lodashEs.cloneDeep(element));
-      this.listCursor += 1;
-      if (this.elementList.length > this.listMaxSize) {
-        this.elementList.shift();
-        this.listCursor -= 1;
-      }
-    }
-    canUndo() {
-      return this.listCursor > 1;
-    }
-    // 返回undo后的当前元素
-    undo() {
-      if (!this.canUndo()) {
-        return null;
-      }
-      this.listCursor -= 1;
-      return this.getCurrentElement();
-    }
-    canRedo() {
-      return this.elementList.length > this.listCursor;
-    }
-    // 返回redo后的当前元素
-    redo() {
-      if (!this.canRedo()) {
-        return null;
-      }
-      this.listCursor += 1;
-      return this.getCurrentElement();
-    }
-    getCurrentElement() {
-      if (this.listCursor < 1) {
-        return null;
-      }
-      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
-    }
-  }
-
-  class History extends BaseService {
-    state = vue.reactive({
-      pageSteps: {},
-      pageId: void 0,
-      canRedo: false,
-      canUndo: false
-    });
-    constructor() {
-      super([]);
-      this.on("change", this.setCanUndoRedo);
-    }
-    reset() {
-      this.state.pageSteps = {};
-      this.resetPage();
-    }
-    resetPage() {
-      this.state.pageId = void 0;
-      this.state.canRedo = false;
-      this.state.canUndo = false;
-    }
-    changePage(page) {
-      if (!page)
-        return;
-      this.state.pageId = page.id;
-      if (!this.state.pageSteps[this.state.pageId]) {
-        const undoRedo = new UndoRedo();
-        undoRedo.pushElement({
-          data: page,
-          modifiedNodeIds: /* @__PURE__ */ new Map(),
-          nodeId: page.id
-        });
-        this.state.pageSteps[this.state.pageId] = undoRedo;
-      }
-      this.setCanUndoRedo();
-      this.emit("page-change", this.state.pageSteps[this.state.pageId]);
-    }
-    resetState() {
-      this.state.pageId = void 0;
-      this.state.pageSteps = {};
-      this.state.canRedo = false;
-      this.state.canUndo = false;
-    }
-    push(state) {
-      const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
-      undoRedo.pushElement(state);
-      this.emit("change", state);
-      return state;
+     * 根据ID获取指点节点配置
+     * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
+     * @returns 组件节点配置
+     */
+    getNodeById(id, raw = true) {
+      const { node } = this.getNodeInfo(id, raw);
+      return node;
     }
-    undo() {
-      const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
-      const state = undoRedo.undo();
-      this.emit("change", state);
-      return state;
+    /**
+     * 根据ID获取指点节点的父节点配置
+     * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
+     * @returns 指点组件的父节点配置
+     */
+    getParentById(id, raw = true) {
+      const { parent } = this.getNodeInfo(id, raw);
+      return parent;
     }
-    redo() {
-      const undoRedo = this.getUndoRedo();
-      if (!undoRedo)
-        return null;
-      const state = undoRedo.redo();
-      this.emit("change", state);
-      return state;
+    /**
+     * 只有容器拥有布局
+     */
+    async getLayout(parent, node) {
+      if (node && typeof node !== "function" && isFixed(node))
+        return Layout.FIXED;
+      if (parent.layout) {
+        return parent.layout;
+      }
+      if (!parent.style?.position) {
+        return Layout.RELATIVE;
+      }
+      return Layout.ABSOLUTE;
     }
-    destroy() {
-      this.resetState();
-      this.removeAllListeners();
-      this.removeAllPlugins();
+    /**
+     * 选中指定节点（将指定节点设置成当前选中状态）
+     * @param config 指定节点配置或者ID
+     * @returns 当前选中的节点配置
+     */
+    async select(config) {
+      const { node, page, parent } = this.selectedConfigExceptionHandler(config);
+      this.set("nodes", node ? [node] : []);
+      this.set("page", page);
+      this.set("parent", parent);
+      if (page) {
+        historyService.changePage(vue.toRaw(page));
+      } else {
+        historyService.resetState();
+      }
+      if (node?.id) {
+        this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+          "editor:select",
+          {
+            node,
+            page,
+            parent
+          },
+          utils.getNodePath(node.id, this.get("root")?.items)
+        );
+      }
+      this.emit("select", node);
+      return node;
     }
-    getUndoRedo() {
-      if (!this.state.pageId)
-        return null;
-      return this.state.pageSteps[this.state.pageId];
+    async selectNextNode() {
+      const node = vue.toRaw(this.get("node"));
+      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT)
+        return node;
+      const parent = vue.toRaw(this.getParentById(node.id));
+      if (!parent)
+        return node;
+      const index = getNodeIndex(node.id, parent);
+      const nextNode = parent.items[index + 1] || parent.items[0];
+      await this.select(nextNode);
+      this.get("stage")?.select(nextNode.id);
+      return nextNode;
     }
-    setCanUndoRedo() {
-      const undoRedo = this.getUndoRedo();
-      this.state.canRedo = undoRedo?.canRedo() || false;
-      this.state.canUndo = undoRedo?.canUndo() || false;
+    async selectNextPage() {
+      const root = vue.toRaw(this.get("root"));
+      const page = vue.toRaw(this.get("page"));
+      if (!page)
+        throw new Error("page不能为空");
+      if (!root)
+        throw new Error("root不能为空");
+      const index = getNodeIndex(page.id, root);
+      const nextPage = root.items[index + 1] || root.items[0];
+      await this.select(nextPage);
+      this.get("stage")?.select(nextPage.id);
+      return nextPage;
     }
-  }
-  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"]
-  };
-  class WebStorage extends BaseService {
-    storage = globalThis.localStorage;
-    namespace = "tmagic";
-    constructor() {
-      super(canUsePluginMethods$4.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+    /**
+     * 高亮指定节点
+     * @param config 指定节点配置或者ID
+     * @returns 当前高亮的节点配置
+     */
+    highlight(config) {
+      const { node } = this.selectedConfigExceptionHandler(config);
+      const currentHighlightNode = this.get("highlightNode");
+      if (currentHighlightNode === node)
+        return;
+      this.set("highlightNode", node);
     }
     /**
-     * 获取数据存储对象，可以通过
-     * const storageService = new StorageService();
-     * storageService.usePlugin({
-     *    // 替换存储对象为 sessionStorage
-     *    async afterGetStorage(): Promise<Storage> {
-     *      return window.sessionStorage;
-     *    },
-     * });
+     * 多选
+     * @param ids 指定节点ID
+     * @returns 加入多选的节点配置
      */
-    getStorage() {
-      return this.storage;
+    multiSelect(ids) {
+      const nodes = [];
+      const idsUnique = lodashEs.uniq(ids);
+      idsUnique.forEach((id) => {
+        const { node } = this.getNodeInfo(id);
+        if (!node)
+          return;
+        nodes.push(node);
+      });
+      this.set("nodes", nodes);
     }
-    getNamespace() {
-      return this.namespace;
+    selectRoot() {
+      const root = this.get("root");
+      if (!root)
+        return;
+      this.set("nodes", [root]);
+      this.set("parent", null);
+      this.set("page", null);
+      this.set("stage", null);
+      this.set("highlightNode", null);
+    }
+    async doAdd(node, parent) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root为空");
+      const curNode = this.get("node");
+      const stage = this.get("stage");
+      if (!curNode)
+        throw new Error("当前选中节点为空");
+      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
+        throw new Error("app下不能添加组件");
+      }
+      if (parent.id !== curNode.id && !(utils.isPage(node) || utils.isPageFragment(node))) {
+        const index = parent.items.indexOf(curNode);
+        parent.items?.splice(index + 1, 0, node);
+      } else {
+        parent.items?.push(node);
+      }
+      const layout = await this.getLayout(vue.toRaw(parent), node);
+      node.style = getInitPositionStyle(node.style, layout);
+      await stage?.add({
+        config: lodashEs.cloneDeep(node),
+        parent: lodashEs.cloneDeep(parent),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(root)
+      });
+      const newStyle = fixNodePosition(node, parent, stage);
+      if (newStyle && (newStyle.top !== node.style.top || newStyle.left !== node.style.left)) {
+        node.style = newStyle;
+        await stage?.update({ config: lodashEs.cloneDeep(node), parentId: parent.id, root: lodashEs.cloneDeep(root) });
+      }
+      this.addModifiedNodeId(node.id);
+      return node;
     }
     /**
-     * 清理，支持storageService.usePlugin
+     * 向指点容器添加组件节点
+     * @param addConfig 将要添加的组件节点配置
+     * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+     * @returns 添加后的节点
      */
-    clear() {
-      const storage = this.getStorage();
-      storage.clear();
+    async add(addNode, parent) {
+      const stage = this.get("stage");
+      const addNodes = [];
+      if (!Array.isArray(addNode)) {
+        const { type, inputEvent, ...config } = addNode;
+        if (!type)
+          throw new Error("组件类型不能为空");
+        addNodes.push({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
+      } else {
+        addNodes.push(...addNode);
+      }
+      const newNodes = await Promise.all(
+        addNodes.map((node) => {
+          const root = this.get("root");
+          if ((utils.isPage(node) || utils.isPageFragment(node)) && root) {
+            return this.doAdd(node, root);
+          }
+          const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+          if (!parentNode)
+            throw new Error("未找到父元素");
+          return this.doAdd(node, parentNode);
+        })
+      );
+      if (newNodes.length > 1) {
+        const newNodeIds = newNodes.map((node) => node.id);
+        stage?.multiSelect(newNodeIds);
+        await this.multiSelect(newNodeIds);
+      } else {
+        await this.select(newNodes[0]);
+        if (utils.isPage(newNodes[0])) {
+          this.state.pageLength += 1;
+        } else if (utils.isPageFragment(newNodes[0])) {
+          this.state.pageFragmentLength += 1;
+        } else {
+          stage?.select(newNodes[0].id);
+        }
+      }
+      if (!(utils.isPage(newNodes[0]) || utils.isPageFragment(newNodes[0]))) {
+        this.pushHistoryState();
+      }
+      this.emit("add", newNodes);
+      return Array.isArray(addNode) ? newNodes : newNodes[0];
+    }
+    async doRemove(node) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root不能为空");
+      const { parent, node: curNode } = this.getNodeInfo(node.id, false);
+      if (!parent || !curNode)
+        throw new Error("找不要删除的节点");
+      const index = getNodeIndex(curNode.id, parent);
+      if (typeof index !== "number" || index === -1)
+        throw new Error("找不要删除的节点");
+      parent.items?.splice(index, 1);
+      const stage = this.get("stage");
+      stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
+      const selectDefault = async (pages) => {
+        if (pages[0]) {
+          await this.select(pages[0]);
+          stage?.select(pages[0].id);
+        } else {
+          this.selectRoot();
+          historyService.resetPage();
+        }
+      };
+      const rootItems = root.items || [];
+      if (utils.isPage(node)) {
+        this.state.pageLength -= 1;
+        await selectDefault(getPageList(root));
+      } else if (utils.isPageFragment(node)) {
+        this.state.pageFragmentLength -= 1;
+        await selectDefault(getPageFragmentList(root));
+      } else {
+        await this.select(parent);
+        stage?.select(parent.id);
+        this.addModifiedNodeId(parent.id);
+      }
+      if (!rootItems.length) {
+        this.resetModifiedNodeId();
+        historyService.reset();
+      }
     }
     /**
-     * 获取存储项，支持storageService.usePlugin
+     * 删除组件
+     * @param {Object} node
      */
-    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;
+    async remove(nodeOrNodeList) {
+      const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+      await Promise.all(nodes.map((node) => this.doRemove(node)));
+      if (!(utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))) {
+        this.pushHistoryState();
       }
+      this.emit("remove", nodes);
     }
-    /**
-     * 获取指定索引位置的key
-     */
-    key(index) {
-      const storage = this.getStorage();
-      return storage.key(index);
+    async doUpdate(config) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root为空");
+      if (!config?.id)
+        throw new Error("没有配置或者配置缺少id值");
+      const info = this.getNodeInfo(config.id, false);
+      if (!info.node)
+        throw new Error(`获取不到id为${config.id}的节点`);
+      const node = lodashEs.cloneDeep(vue.toRaw(info.node));
+      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
+      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
+        if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+          return "";
+        }
+        if (lodashEs.isObject(srcValue) && Array.isArray(objValue)) {
+          return srcValue;
+        }
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      if (!newConfig.type)
+        throw new Error("配置缺少type值");
+      if (newConfig.type === schema.NodeType.ROOT) {
+        this.set("root", newConfig);
+        return newConfig;
+      }
+      const { parent } = info;
+      if (!parent)
+        throw new Error("获取不到父级节点");
+      const parentNodeItems = parent.items;
+      const index = getNodeIndex(newConfig.id, parent);
+      if (!parentNodeItems || typeof index === "undefined" || index === -1)
+        throw new Error("更新的节点未找到");
+      const newLayout = await this.getLayout(newConfig);
+      const layout = await this.getLayout(node);
+      if (Array.isArray(newConfig.items) && newLayout !== layout) {
+        newConfig = setChildrenLayout(newConfig, newLayout);
+      }
+      parentNodeItems[index] = newConfig;
+      const nodes = this.get("nodes");
+      const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
+      nodes.splice(targetIndex, 1, newConfig);
+      this.set("nodes", [...nodes]);
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(newConfig),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(root)
+      });
+      if (utils.isPage(newConfig) || utils.isPageFragment(newConfig)) {
+        this.set("page", newConfig);
+      }
+      this.addModifiedNodeId(newConfig.id);
+      return newConfig;
     }
     /**
-     * 移除存储项，支持storageService.usePlugin
+     * 更新节点
+     * @param config 新的节点配置，配置中需要有id信息
+     * @returns 更新后的节点配置
      */
-    removeItem(key, options = {}) {
-      const storage = this.getStorage();
-      const namespace = this.getNamespace();
-      storage.removeItem(`${options.namespace || namespace}:${key}`);
+    async update(config) {
+      const nodes = Array.isArray(config) ? config : [config];
+      const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+      if (newNodes[0]?.type !== schema.NodeType.ROOT) {
+        this.pushHistoryState();
+      }
+      this.emit("update", newNodes);
+      return Array.isArray(config) ? newNodes : newNodes[0];
     }
     /**
-     * 设置存储项，支持storageService.usePlugin
+     * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
+     * @param id1 组件ID
+     * @param id2 组件ID
+     * @returns void
      */
-    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;
+    async sort(id1, id2) {
+      const root = this.get("root");
+      if (!root)
+        throw new Error("root为空");
+      const node = this.get("node");
+      if (!node)
+        throw new Error("当前节点为空");
+      const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
+      if (!parent)
+        throw new Error("父节点为空");
+      const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
+      if (index2 < 0)
+        return;
+      const index1 = parent.items.findIndex((node2) => `${node2.id}` === `${id1}`);
+      parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
+      await this.update(parent);
+      await this.select(node);
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(node),
+        parentId: parent.id,
+        root: lodashEs.cloneDeep(root)
       });
-      return {
-        protocol,
-        item
-      };
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
     }
-  }
-  const storageService = new WebStorage();
-
-  const canUsePluginMethods$3 = {
-    async: [
-      "getLayout",
-      "highlight",
-      "select",
-      "multiSelect",
-      "doAdd",
-      "add",
-      "doRemove",
-      "remove",
-      "doUpdate",
-      "update",
-      "sort",
-      "copy",
-      "paste",
-      "doPaste",
-      "doAlignCenter",
-      "alignCenter",
-      "moveLayer",
-      "moveToContainer",
-      "dragTo",
-      "undo",
-      "redo",
-      "move"
-    ],
-    sync: []
-  };
-  class Editor extends BaseService {
-    state = vue.reactive({
-      root: null,
-      page: null,
-      parent: null,
-      node: null,
-      nodes: [],
-      stage: null,
-      stageLoading: true,
-      highlightNode: null,
-      modifiedNodeIds: /* @__PURE__ */ new Map(),
-      pageLength: 0,
-      pageFragmentLength: 0,
-      disabledMultiSelect: false
-    });
-    isHistoryStateChange = false;
-    constructor() {
-      super(
-        canUsePluginMethods$3.async.map((methodName) => ({ name: methodName, isAsync: true })),
-        // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
-        ["select", "update", "moveLayer"]
-      );
+    /**
+     * 将组件节点配置存储到localStorage中
+     * @param config 组件节点配置
+     * @returns
+     */
+    copy(config) {
+      storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+        protocol: Protocol.OBJECT
+      });
     }
     /**
-     * 设置当前指点节点配置
-     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
-     * @param value MNode
+     * 复制时会带上组件关联的依赖
+     * @param config 组件节点配置
+     * @returns
      */
-    set(name, value) {
-      const preValue = this.state[name];
-      this.state[name] = value;
-      if (name === "nodes" && Array.isArray(value)) {
-        this.set("node", value[0]);
+    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);
+              }
+            }
+          });
+        });
       }
-      if (name === "root") {
-        if (Array.isArray(value)) {
-          throw new Error("root 不能为数组");
+      storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
+        protocol: Protocol.OBJECT
+      });
+    }
+    /**
+     * 从localStorage中获取节点，然后添加到当前容器中
+     * @param position 粘贴的坐标
+     * @returns 添加后的组件节点配置
+     */
+    async paste(position = {}) {
+      const config = storageService.getItem(COPY_STORAGE_KEY);
+      if (!Array.isArray(config))
+        return;
+      const node = this.get("node");
+      let parent = null;
+      if (config.length === 1 && config[0].id === node?.id) {
+        parent = this.get("parent");
+        if (parent?.type === schema.NodeType.ROOT) {
+          parent = this.get("page");
         }
-        if (value && lodashEs.isObject(value)) {
-          const app = value;
-          this.state.pageLength = getPageList(app).length || 0;
-          this.state.pageFragmentLength = getPageFragmentList(app).length || 0;
-          this.state.stageLoading = this.state.pageLength !== 0;
-        } else {
-          this.state.pageLength = 0;
-          this.state.pageFragmentLength = 0;
-          this.state.stageLoading = false;
+      }
+      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 = "";
         }
-        this.emit("root-change", value, preValue);
+      } 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 name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
-     * @returns MNode
+     * 将指点节点设置居中
+     * @param config 组件节点配置
+     * @returns 当前组件节点配置
      */
-    get(name) {
-      return this.state[name];
+    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;
     }
     /**
-     * 根据id获取组件、组件的父组件以及组件所属的页面节点
-     * @param {number | string} id 组件id
-     * @param {boolean} raw 是否使用toRaw
-     * @returns {EditorNodeInfo}
+     * 移动当前选中节点位置
+     * @param offset 偏移量
      */
-    getNodeInfo(id, raw = true) {
-      let root = this.get("root");
-      if (raw) {
-        root = vue.toRaw(root);
-      }
-      const info = {
-        node: null,
-        parent: null,
-        page: null
-      };
+    async moveLayer(offset) {
+      const root = this.get("root");
       if (!root)
-        return info;
-      if (id === root.id) {
-        info.node = root;
-        return info;
+        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);
       }
-      const path = utils.getNodePath(id, root.items);
-      if (!path.length)
-        return info;
-      path.unshift(root);
-      info.node = path[path.length - 1];
-      info.parent = path[path.length - 2];
-      path.forEach((item) => {
-        if (utils.isPage(item) || utils.isPageFragment(item)) {
-          info.page = item;
+      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;
         }
-      });
-      return info;
+      }
+      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 });
     }
     /**
-     * 根据ID获取指点节点配置
-     * @param id 组件ID
-     * @param {boolean} raw 是否使用toRaw
-     * @returns 组件节点配置
+     * 撤销当前操作
+     * @returns 上一次数据
      */
-    getNodeById(id, raw = true) {
-      const { node } = this.getNodeInfo(id, raw);
-      return node;
+    async undo() {
+      const value = historyService.undo();
+      await this.changeHistoryState(value);
+      return value;
     }
     /**
-     * 根据ID获取指点节点的父节点配置
-     * @param id 组件ID
-     * @param {boolean} raw 是否使用toRaw
-     * @returns 指点组件的父节点配置
+     * 恢复到下一步
+     * @returns 下一步数据
      */
-    getParentById(id, raw = true) {
-      const { parent } = this.getNodeInfo(id, raw);
-      return parent;
+    async redo() {
+      const value = historyService.redo();
+      await this.changeHistoryState(value);
+      return value;
     }
-    /**
-     * 只有容器拥有布局
-     */
-    async getLayout(parent, node) {
-      if (node && typeof node !== "function" && isFixed(node))
-        return Layout.FIXED;
-      if (parent.layout) {
-        return parent.layout;
+    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 (!parent.style?.position) {
-        return Layout.RELATIVE;
+      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: ""
+          });
+        }
       }
-      return Layout.ABSOLUTE;
     }
-    /**
-     * 选中指定节点（将指定节点设置成当前选中状态）
-     * @param config 指定节点配置或者ID
-     * @returns 当前选中的节点配置
-     */
-    async select(config) {
-      const { node, page, parent } = this.selectedConfigExceptionHandler(config);
-      this.set("nodes", node ? [node] : []);
-      this.set("page", page);
-      this.set("parent", parent);
-      if (page) {
-        historyService.changePage(vue.toRaw(page));
+    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
+        });
+      }
+      this.isHistoryStateChange = false;
+    }
+    async changeHistoryState(value) {
+      if (!value)
+        return;
+      this.isHistoryStateChange = true;
+      await this.update(value.data);
+      this.set("modifiedNodeIds", value.modifiedNodeIds);
+      setTimeout(async () => {
+        if (!value.nodeId)
+          return;
+        await this.select(value.nodeId);
+        this.get("stage")?.select(value.nodeId);
+      }, 0);
+      this.emit("history-change", value.data);
+    }
+    async toggleFixedPosition(dist, src, root) {
+      const newConfig = 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 {
-        historyService.resetState();
+        id = config.id;
       }
-      if (node?.id) {
-        this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
-          "editor:select",
+      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: [
           {
-            node,
-            page,
-            parent
-          },
-          utils.getNodePath(node.id, this.get("root")?.items)
-        );
+            required: true,
+            message: "请输入名称"
+          }
+        ]
+      },
+      {
+        name: "description",
+        text: "描述"
       }
-      this.emit("select", node);
-      return node;
+    ];
+  }
+
+  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: "请求头"
+        }
+      ]
     }
-    async selectNextNode() {
-      const node = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT)
-        return node;
-      const parent = vue.toRaw(this.getParentById(node.id));
-      if (!parent)
-        return node;
-      const index = getNodeIndex(node.id, parent);
-      const nextNode = parent.items[index + 1] || parent.items[0];
-      await this.select(nextNode);
-      this.get("stage")?.select(nextNode.id);
-      return nextNode;
+  ];
+
+  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"
+            }
+          ]
+        }
+      ]
     }
-    async selectNextPage() {
-      const root = vue.toRaw(this.get("root"));
-      const page = vue.toRaw(this.get("page"));
-      if (!page)
-        throw new Error("page不能为空");
-      if (!root)
-        throw new Error("root不能为空");
-      const index = getNodeIndex(page.id, root);
-      const nextPage = root.items[index + 1] || root.items[0];
-      await this.select(nextPage);
-      this.get("stage")?.select(nextPage.id);
-      return nextPage;
+  ];
+  const getFormConfig = (type, configs) => {
+    switch (type) {
+      case "base":
+        return fillConfig$1([]);
+      case "http":
+        return fillConfig$1(HttpFormConfig);
+      default:
+        return fillConfig$1(configs[type] || []);
     }
-    /**
-     * 高亮指定节点
-     * @param config 指定节点配置或者ID
-     * @returns 当前高亮的节点配置
-     */
-    highlight(config) {
-      const { node } = this.selectedConfigExceptionHandler(config);
-      const currentHighlightNode = this.get("highlightNode");
-      if (currentHighlightNode === node)
-        return;
-      this.set("highlightNode", node);
+  };
+  const getFormValue = (type, values) => {
+    if (type !== "http") {
+      return values;
     }
-    /**
-     * 多选
-     * @param ids 指定节点ID
-     * @returns 加入多选的节点配置
-     */
-    multiSelect(ids) {
-      const nodes = [];
-      const idsUnique = lodashEs.uniq(ids);
-      idsUnique.forEach((id) => {
-        const { node } = this.getNodeInfo(id);
-        if (!node)
-          return;
-        nodes.push(node);
+    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)
       });
-      this.set("nodes", nodes);
-    }
-    selectRoot() {
-      const root = this.get("root");
-      if (!root)
-        return;
-      this.set("nodes", [root]);
-      this.set("parent", null);
-      this.set("page", null);
-      this.set("stage", null);
-      this.set("highlightNode", null);
-    }
-    async doAdd(node, parent) {
-      const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
-      const curNode = this.get("node");
-      const stage = this.get("stage");
-      if (!curNode)
-        throw new Error("当前选中节点为空");
-      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
-        throw new Error("app下不能添加组件");
-      }
-      if (parent.id !== curNode.id && !(utils.isPage(node) || utils.isPageFragment(node))) {
-        const index = parent.items.indexOf(curNode);
-        parent.items?.splice(index + 1, 0, node);
-      } else {
-        parent.items?.push(node);
-      }
-      const layout = await this.getLayout(vue.toRaw(parent), node);
-      node.style = getInitPositionStyle(node.style, layout);
-      await stage?.add({
-        config: lodashEs.cloneDeep(node),
-        parent: lodashEs.cloneDeep(parent),
-        parentId: parent.id,
-        root: lodashEs.cloneDeep(root)
+      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}`;
       });
-      const newStyle = fixNodePosition(node, parent, stage);
-      if (newStyle && (newStyle.top !== node.style.top || newStyle.left !== node.style.left)) {
-        node.style = newStyle;
-        await stage?.update({ config: lodashEs.cloneDeep(node), parentId: parent.id, root: lodashEs.cloneDeep(root) });
-      }
-      this.addModifiedNodeId(node.id);
-      return node;
+      displayState.push({
+        type: "var",
+        value: dsText
+      });
+      index = match.index + match[0].length;
     }
-    /**
-     * 向指点容器添加组件节点
-     * @param addConfig 将要添加的组件节点配置
-     * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
-     * @returns 添加后的节点
-     */
-    async add(addNode, parent) {
-      const stage = this.get("stage");
-      const addNodes = [];
-      if (!Array.isArray(addNode)) {
-        const { type, inputEvent, ...config } = addNode;
-        if (!type)
-          throw new Error("组件类型不能为空");
-        addNodes.push({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
-      } else {
-        addNodes.push(...addNode);
+    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;
       }
-      const newNodes = await Promise.all(
-        addNodes.map((node) => {
-          const root = this.get("root");
-          if ((utils.isPage(node) || utils.isPageFragment(node)) && root) {
-            return this.doAdd(node, root);
-          }
-          const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
-          if (!parentNode)
-            throw new Error("未找到父元素");
-          return this.doAdd(node, parentNode);
-        })
-      );
-      if (newNodes.length > 1) {
-        const newNodeIds = newNodes.map((node) => node.id);
-        stage?.multiSelect(newNodeIds);
-        await this.multiSelect(newNodeIds);
-      } else {
-        await this.select(newNodes[0]);
-        if (utils.isPage(newNodes[0])) {
-          this.state.pageLength += 1;
-        } else if (utils.isPageFragment(newNodes[0])) {
-          this.state.pageFragmentLength += 1;
-        } else {
-          stage?.select(newNodes[0].id);
-        }
+      if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
+        return;
       }
-      if (!(utils.isPage(newNodes[0]) || utils.isPageFragment(newNodes[0]))) {
-        this.pushHistoryState();
+      if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+        return;
       }
-      this.emit("add", newNodes);
-      return Array.isArray(addNode) ? newNodes : newNodes[0];
+      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 })));
     }
-    async doRemove(node) {
-      const root = this.get("root");
-      if (!root)
-        throw new Error("root不能为空");
-      const { parent, node: curNode } = this.getNodeInfo(node.id, false);
-      if (!parent || !curNode)
-        throw new Error("找不要删除的节点");
-      const index = getNodeIndex(curNode.id, parent);
-      if (typeof index !== "number" || index === -1)
-        throw new Error("找不要删除的节点");
-      parent.items?.splice(index, 1);
-      const stage = this.get("stage");
-      stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
-      const selectDefault = async (pages) => {
-        if (pages[0]) {
-          await this.select(pages[0]);
-          stage?.select(pages[0].id);
-        } else {
-          this.selectRoot();
-          historyService.resetPage();
-        }
-      };
-      const rootItems = root.items || [];
-      if (utils.isPage(node)) {
-        this.state.pageLength -= 1;
-        await selectDefault(getPageList(root));
-      } else if (utils.isPageFragment(node)) {
-        this.state.pageFragmentLength -= 1;
-        await selectDefault(getPageFragmentList(root));
-      } else {
-        await this.select(parent);
-        stage?.select(parent.id);
-        this.addModifiedNodeId(parent.id);
-      }
-      if (!rootItems.length) {
-        this.resetModifiedNodeId();
-        historyService.reset();
-      }
+    set(name, value) {
+      this.state[name] = value;
     }
-    /**
-     * 删除组件
-     * @param {Object} node
-     */
-    async remove(nodeOrNodeList) {
-      const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
-      await Promise.all(nodes.map((node) => this.doRemove(node)));
-      if (!(utils.isPage(nodes[0]) || utils.isPageFragment(nodes[0]))) {
-        this.pushHistoryState();
-      }
-      this.emit("remove", nodes);
+    get(name) {
+      return this.state[name];
     }
-    async doUpdate(config) {
-      const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
-      if (!config?.id)
-        throw new Error("没有配置或者配置缺少id值");
-      const info = this.getNodeInfo(config.id, false);
-      if (!info.node)
-        throw new Error(`获取不到id为${config.id}的节点`);
-      const node = lodashEs.cloneDeep(vue.toRaw(info.node));
-      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
-      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
-        if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
-          return "";
-        }
-        if (lodashEs.isObject(srcValue) && Array.isArray(objValue)) {
-          return srcValue;
-        }
-        if (Array.isArray(srcValue)) {
-          return srcValue;
-        }
-      });
-      if (!newConfig.type)
-        throw new Error("配置缺少type值");
-      if (newConfig.type === schema.NodeType.ROOT) {
-        this.set("root", newConfig);
-        return newConfig;
-      }
-      const { parent } = info;
-      if (!parent)
-        throw new Error("获取不到父级节点");
-      const parentNodeItems = parent.items;
-      const index = getNodeIndex(newConfig.id, parent);
-      if (!parentNodeItems || typeof index === "undefined" || index === -1)
-        throw new Error("更新的节点未找到");
-      const newLayout = await this.getLayout(newConfig);
-      const layout = await this.getLayout(node);
-      if (Array.isArray(newConfig.items) && newLayout !== layout) {
-        newConfig = setChildrenLayout(newConfig, newLayout);
-      }
-      parentNodeItems[index] = newConfig;
-      const nodes = this.get("nodes");
-      const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
-      nodes.splice(targetIndex, 1, newConfig);
-      this.set("nodes", [...nodes]);
-      this.get("stage")?.update({
-        config: lodashEs.cloneDeep(newConfig),
-        parentId: parent.id,
-        root: lodashEs.cloneDeep(root)
-      });
-      if (utils.isPage(newConfig) || utils.isPageFragment(newConfig)) {
-        this.set("page", newConfig);
-      }
-      this.addModifiedNodeId(newConfig.id);
+    getFormConfig(type = "base") {
+      return getFormConfig(utils.toLine(type), this.get("configs"));
+    }
+    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;
     }
-    /**
-     * 更新节点
-     * @param config 新的节点配置，配置中需要有id信息
-     * @returns 更新后的节点配置
-     */
-    async update(config) {
-      const nodes = Array.isArray(config) ? config : [config];
-      const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
-      if (newNodes[0]?.type !== schema.NodeType.ROOT) {
-        this.pushHistoryState();
-      }
-      this.emit("update", newNodes);
-      return Array.isArray(config) ? newNodes : newNodes[0];
+    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);
     }
-    /**
-     * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
-     * @param id1 组件ID
-     * @param id2 组件ID
-     * @returns void
-     */
-    async sort(id1, id2) {
-      const root = this.get("root");
-      if (!root)
-        throw new Error("root为空");
-      const node = this.get("node");
-      if (!node)
-        throw new Error("当前节点为空");
-      const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
-      if (!parent)
-        throw new Error("父节点为空");
-      const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
-      if (index2 < 0)
-        return;
-      const index1 = parent.items.findIndex((node2) => `${node2.id}` === `${id1}`);
-      parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
-      await this.update(parent);
-      await this.select(node);
-      this.get("stage")?.update({
-        config: lodashEs.cloneDeep(node),
-        parentId: parent.id,
-        root: lodashEs.cloneDeep(root)
-      });
-      this.addModifiedNodeId(parent.id);
-      this.pushHistoryState();
+    resetState() {
+      this.set("dataSources", []);
     }
-    /**
-     * 将组件节点配置存储到localStorage中
-     * @param config 组件节点配置
-     * @returns
-     */
-    copy(config) {
-      storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
-        protocol: Protocol.OBJECT
-      });
+    destroy() {
+      this.removeAllListeners();
+      this.resetState();
+      this.removeAllPlugins();
+    }
+    usePlugin(options) {
+      super.usePlugin(options);
     }
     /**
-     * 复制时会带上组件关联的依赖
+     * 复制时会带上组件关联的数据源
      * @param config 组件节点配置
      * @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
-      );
+      depService.clearByType(dep.DepTargetType.RELATED_DS_WHEN_COPY);
+      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_DS_WHEN_COPY);
+      const customTarget = depService.getTarget(dep.DepTargetType.RELATED_DS_WHEN_COPY, dep.DepTargetType.RELATED_DS_WHEN_COPY);
+      const copyData = [];
       if (customTarget) {
         Object.keys(customTarget.deps).forEach((nodeId) => {
-          const node = this.getNodeById(nodeId);
+          const node = editorService.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);
+            const [relateDsId] = lodashEs.get(node, key);
+            const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
             if (!isExist) {
-              const relateNode = this.getNodeById(relateNodeId);
-              if (relateNode) {
-                copyNodes.push(relateNode);
+              const relateDs = this.getDataSourceById(relateDsId);
+              if (relateDs) {
+                copyData.push(relateDs);
+              }
+            }
+          });
+        });
+      }
+      storageService.setItem(COPY_DS_STORAGE_KEY, copyData, {
+        protocol: Protocol.OBJECT
+      });
+    }
+    /**
+     * 粘贴数据源
+     * @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" }
+                  ]
+                }
               }
-            }
-          });
-        });
-      }
-      storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
-        protocol: Protocol.OBJECT
-      });
-    }
-    /**
-     * 从localStorage中获取节点，然后添加到当前容器中
-     * @param position 粘贴的坐标
-     * @returns 添加后的组件节点配置
-     */
-    async paste(position = {}) {
-      const config = storageService.getItem(COPY_STORAGE_KEY);
-      if (!Array.isArray(config))
-        return;
-      const node = this.get("node");
-      let parent = null;
-      if (config.length === 1 && config[0].id === node?.id) {
-        parent = this.get("parent");
-        if (parent?.type === schema.NodeType.ROOT) {
-          parent = this.get("page");
-        }
-      }
-      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 = (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;
+            ]
+          },
+          {
+            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"
+                }
+              }
+            ]
           }
-        });
-        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 上一次数据
-     */
-    async undo() {
-      const value = historyService.undo();
-      await this.changeHistoryState(value);
-      return value;
-    }
-    /**
-     * 恢复到下一步
-     * @returns 下一步数据
-     */
-    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: ""
-          });
-        }
+    ]
+  };
+  const eventTabConfig = {
+    title: "事件",
+    items: [
+      {
+        name: "events",
+        src: "component",
+        labelWidth: "100px",
+        type: "event-select"
       }
-    }
-    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);
+    ]
+  };
+  const advancedTabConfig = {
+    title: "高级",
+    lazy: true,
+    items: [
+      {
+        name: "created",
+        text: "created",
+        type: "code-select"
+      },
+      {
+        name: "mounted",
+        text: "mounted",
+        type: "code-select"
       }
-    }
-    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
-        });
+    ]
+  };
+  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)
+                  }
+                ]
+              }
+            ]
+          }
+        ]
       }
-      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);
+    ]
+  };
+  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 }
+      ]
     }
-    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;
+  ];
+
+  const log = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("magic editor: ", ...args);
     }
-    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 info = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.info("magic editor: ", ...args);
     }
-  }
-  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 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 warn = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.warn("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 debug = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.debug("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 error = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.error("magic editor: ", ...args);
+    }
   };
 
   const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
@@ -3577,7 +3661,6 @@
       if (!codeId.value)
         return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
-      design.tMagicMessage.success("代码块保存成功");
       codeBlockEditor.value?.hide();
     };
     return {
@@ -3779,7 +3862,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,
@@ -4360,33 +4443,6 @@
         return value[0].replace(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
       });
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
-      const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
-        const child = [];
-        fields.forEach((field) => {
-          if (!dataSourceFieldType.length) {
-            dataSourceFieldType.push("any");
-          }
-          const children = getOptionChildren(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 cascaderConfig = vue.computed(() => {
         const valueIsKey = props.config.value === "key";
         return {
@@ -4397,7 +4453,7 @@
             const options = dataSources.value?.map((ds) => ({
               label: ds.title || ds.id,
               value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-              children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+              children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType)
             })) || [];
             return options.filter((option) => option.children.length);
           }
@@ -4449,7 +4505,6 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-            style: { "width": "100%" },
             config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
             model: _ctx.model,
             name: _ctx.name,
@@ -5636,24 +5691,41 @@
       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: "select",
+          type: fieldType,
           labelWidth: "40px",
+          checkStrictly: true,
+          valueSeparator: ".",
           options: (mForm, { formValue }) => {
             let events = [];
             if (!eventsService || !dataSourceService)
               return events;
             if (props.config.src === "component") {
               events = eventsService.getEvent(formValue.type);
-            } else if (props.config.src === "datasource") {
+              return events.map((option) => ({
+                text: option.label,
+                value: option.value
+              }));
+            }
+            if (props.config.src === "datasource") {
               events = dataSourceService.getFormEvent(formValue.type);
+              const dataSource = dataSourceService.getDataSourceById(formValue.id);
+              const fields = dataSource?.fields || [];
+              if (fields.length > 0) {
+                return [
+                  ...events,
+                  {
+                    label: "数据变化",
+                    value: utils.DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+                    children: getCascaderOptionsFromFields(fields)
+                  }
+                ];
+              }
+              return events;
             }
-            return events.map((option) => ({
-              text: option.label,
-              value: option.value
-            }));
           }
         };
         return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
@@ -8619,8 +8691,8 @@
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
         const parentRect = stage?.container?.getBoundingClientRect();
-        const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
-        const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+        const initialLeft = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+        const initialTop = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
         services?.editorService?.paste({ left: initialLeft, top: initialTop });
       } else {
         services?.editorService?.paste();
@@ -9617,7 +9689,10 @@
                 class: "m-editor-sidebar-content",
                 key: config.$key ?? index
               }, [
-                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
                   config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                     name: "component-list-panel-header",
                     fn: vue.withCtx(() => [
@@ -9750,7 +9825,10 @@
                 }, {
                   body: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_5$1, [
-                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
+                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                        key: 0,
+                        ref_for: true
+                      }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
                     ])
                   ]),
                   _: 2
@@ -10571,17 +10649,17 @@
             position = "absolute";
             top = e.clientY - containerRect.top + scrollTop;
             left = e.clientX - containerRect.left + scrollLeft;
-            if (parentEl && doc) {
+            if (parentEl) {
               const { left: parentLeft, top: parentTop } = StageCore.getOffset(parentEl);
-              left = left - StageCore.calcValueByFontsize(doc, parentLeft) * zoom.value;
-              top = top - StageCore.calcValueByFontsize(doc, parentTop) * zoom.value;
+              left = left - parentLeft * zoom.value;
+              top = top - parentTop * zoom.value;
             }
           }
           config.data.style = {
             ...style,
             position,
-            top: top / zoom.value,
-            left: left / zoom.value
+            top: utils.calcValueByFontsize(doc, top / zoom.value),
+            left: utils.calcValueByFontsize(doc, left / zoom.value)
           };
           config.data.inputEvent = e;
           services?.editorService.add(config.data, parent);
@@ -10712,7 +10790,7 @@
 
   const canUsePluginMethods$1 = {
     async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
-    sync: []
+    sync: ["setCodeDslByIdSync"]
   };
   class CodeBlock extends BaseService {
     state = vue.reactive({
@@ -10723,7 +10801,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数据源
@@ -10763,17 +10844,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] = {
@@ -10885,6 +10978,51 @@
         return newId;
       return await this.getUniqueId();
     }
+    /**
+     * 复制时会带上组件关联的代码块
+     * @param config 组件节点配置
+     * @returns
+     */
+    copyWithRelated(config) {
+      const copyNodes = Array.isArray(config) ? config : [config];
+      depService.clearByType(dep.DepTargetType.RELATED_CODE_WHEN_COPY);
+      depService.collect(copyNodes, true, dep.DepTargetType.RELATED_CODE_WHEN_COPY);
+      const customTarget = depService.getTarget(
+        dep.DepTargetType.RELATED_CODE_WHEN_COPY,
+        dep.DepTargetType.RELATED_CODE_WHEN_COPY
+      );
+      const copyData = {};
+      if (customTarget) {
+        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;
@@ -11226,6 +11364,7 @@
     createStage(stageOptions = {}) {
       return useStage({
         ...stageOptions,
+        zoom: 1,
         runtimeUrl: "",
         autoScrollIntoView: false,
         render: async (stage) => {
@@ -11655,7 +11794,17 @@
     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));
+      depService.addTarget(dep.createRelatedTargetForCopy(props.collectorOptions, dep.DepTargetType.RELATED_COMP_WHEN_COPY));
+    }
+    if (props.collectorOptionsForCode && !depService.hasTarget(dep.DepTargetType.RELATED_CODE_WHEN_COPY)) {
+      depService.addTarget(
+        dep.createRelatedTargetForCopy(props.collectorOptionsForCode, dep.DepTargetType.RELATED_CODE_WHEN_COPY)
+      );
+    }
+    if (props.collectorOptionsForDataSource && !depService.hasTarget(dep.DepTargetType.RELATED_DS_WHEN_COPY)) {
+      depService.addTarget(
+        dep.createRelatedTargetForCopy(props.collectorOptionsForDataSource, dep.DepTargetType.RELATED_DS_WHEN_COPY)
+      );
     }
     vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
@@ -11706,6 +11855,8 @@
       codeOptions: {},
       disabledDragStart: { type: Boolean },
       collectorOptions: {},
+      collectorOptionsForCode: {},
+      collectorOptionsForDataSource: {},
       guidesOptions: {},
       disabledMultiSelect: { type: Boolean },
       disabledPageFragment: { type: Boolean },
@@ -11911,11 +12062,13 @@
     }
   };
 
-  Object.defineProperty(exports, 'DepTargetType', {
+  Object.defineProperty(exports, "DepTargetType", {
     enumerable: true,
     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;
@@ -11937,6 +12090,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;
@@ -11975,6 +12129,7 @@
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getAddParent = getAddParent;
+  exports.getCascaderOptionsFromFields = getCascaderOptionsFromFields;
   exports.getConfig = getConfig;
   exports.getDefaultConfig = getDefaultConfig;
   exports.getDisplayField = getDisplayField;