@tmagic/editor 1.4.4 → 1.4.6

package/dist/tmagic-editor.js

@@ -8,13 +8,13 @@ import * as monaco from 'monaco-editor';
 import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
+import { Watcher, DepTargetType, createRelatedTargetForCopy, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
@@ -505,362 +505,94 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-function BaseFormConfig() {
-  return [
-    {
-      name: "id",
-      type: "hidden"
-    },
-    {
-      name: "type",
-      text: "类型",
-      type: "hidden",
-      defaultValue: "base"
-    },
-    {
-      name: "title",
-      text: "名称",
-      rules: [
-        {
-          required: true,
-          message: "请输入名称"
+const compose = (middleware, isAsync) => {
+  if (!Array.isArray(middleware))
+    throw new TypeError("Middleware 必须是一个数组!");
+  for (const fn of middleware) {
+    if (typeof fn !== "function")
+      throw new TypeError("Middleware 必须由函数组成!");
+  }
+  return (args, next) => {
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i) {
+      if (i <= index) {
+        const error = new Error("next() 被多次调用");
+        if (isAsync) {
+          return Promise.reject(error);
         }
-      ]
-    },
-    {
-      name: "description",
-      text: "描述"
-    }
-  ];
-}
-
-const HttpFormConfig = [
-  {
-    name: "autoFetch",
-    text: "自动请求",
-    type: "switch",
-    defaultValue: true
-  },
-  {
-    name: "responseOptions",
-    items: [
-      {
-        name: "dataPath",
-        text: "数据路径"
+        throw error;
       }
-    ]
-  },
-  {
-    type: "fieldset",
-    name: "options",
-    legend: "HTTP 配置",
-    items: [
-      {
-        name: "url",
-        text: "URL"
-      },
-      {
-        name: "method",
-        text: "Method",
-        type: "select",
-        options: [
-          { text: "GET", value: "GET" },
-          { text: "POST", value: "POST" },
-          { text: "PUT", value: "PUT" },
-          { text: "DELETE", value: "DELETE" }
-        ]
-      },
-      {
-        name: "params",
-        type: "key-value",
-        defaultValue: {},
-        text: "参数"
-      },
-      {
-        name: "data",
-        type: "key-value",
-        defaultValue: {},
-        advanced: true,
-        text: "请求体"
-      },
-      {
-        name: "headers",
-        type: "key-value",
-        defaultValue: {},
-        text: "请求头"
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next)
+        fn = next;
+      if (!fn) {
+        if (isAsync) {
+          return Promise.resolve();
+        }
+        return;
       }
-    ]
-  }
-];
+      if (isAsync) {
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+      try {
+        return fn(...args, dispatch.bind(null, i + 1));
+      } catch (err) {
+        throw err;
+      }
+    }
+  };
+};
 
-const fillConfig$1 = (config) => [
-  ...BaseFormConfig(),
-  ...config,
-  {
-    type: "tab",
-    items: [
-      {
-        title: "数据定义",
-        items: [
-          {
-            name: "fields",
-            type: "data-source-fields",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "方法定义",
-        items: [
-          {
-            name: "methods",
-            type: "data-source-methods",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "事件配置",
-        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 EventEmitter {
@@ -936,590 +668,500 @@ class BaseService extends EventEmitter {
   }
 }
 
-const canUsePluginMethods$6 = {
-  async: [],
-  sync: [
-    "getFormConfig",
-    "setFormConfig",
-    "getFormValue",
-    "setFormValue",
-    "getFormEvent",
-    "setFormEvent",
-    "getFormMethod",
-    "setFormMethod",
-    "add",
-    "update",
-    "remove",
-    "createId"
-  ]
-};
-class DataSource extends BaseService {
-  state = reactive({
-    datasourceTypeList: [],
-    dataSources: [],
-    editable: true,
-    configs: {},
-    values: {},
-    events: {},
-    methods: {}
-  });
-  constructor() {
-    super(canUsePluginMethods$6.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+class Dep extends BaseService {
+  watcher = new Watcher({ initialTargets: reactive({}) });
+  removeTargets(type = DepTargetType.DEFAULT) {
+    this.watcher.removeTargets(type);
+    this.emit("remove-target");
   }
-  set(name, value) {
-    this.state[name] = value;
+  getTargets(type = DepTargetType.DEFAULT) {
+    return this.watcher.getTargets(type);
   }
-  get(name) {
-    return this.state[name];
+  getTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.getTarget(id, type);
   }
-  getFormConfig(type = "base") {
-    return getFormConfig(toLine(type), this.get("configs"));
+  addTarget(target) {
+    this.watcher.addTarget(target);
+    this.emit("add-target", target);
   }
-  setFormConfig(type, config) {
-    this.get("configs")[toLine(type)] = config;
+  removeTarget(id, type = DepTargetType.DEFAULT) {
+    this.watcher.removeTarget(id, type);
+    this.emit("remove-target");
   }
-  getFormValue(type = "base") {
-    return getFormValue(toLine(type), this.get("values")[type]);
+  clearTargets() {
+    this.watcher.clearTargets();
   }
-  setFormValue(type, value) {
-    this.get("values")[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")[toLine(type)] || [];
+  clear(nodes) {
+    return this.watcher.clear(nodes);
   }
-  setFormEvent(type, value = []) {
-    this.get("events")[toLine(type)] = value;
+  clearByType(type, nodes) {
+    return this.watcher.clearByType(type, nodes);
   }
-  getFormMethod(type = "base") {
-    return this.get("methods")[toLine(type)] || [];
+  hasTarget(id, type = DepTargetType.DEFAULT) {
+    return this.watcher.hasTarget(id, type);
   }
-  setFormMethod(type, value = []) {
-    this.get("methods")[toLine(type)] = value;
+  hasSpecifiedTypeTarget(type = 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 = 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] = cloneDeep(config);
-    this.emit("update", config);
-    return config;
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(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_${guid()}`;
+  async setPropsConfig(type, config) {
+    this.state.propsConfigMap[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 cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
+  }
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  async setPropsValue(type, value) {
+    this.state.propsValueMap[toLine(type)] = value;
+  }
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+    const type = toLine(componentType);
+    if (type === "area") {
+      const value = await this.getPropsValue("button");
+      value.className = "action-area";
+      value.text = "";
+      if (value.style) {
+        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+      }
+      return value;
+    }
+    const id = this.createId(type);
+    const defaultPropsValue = this.getDefaultPropsValue(type);
+    const data = this.setNewItemId(
+      cloneDeep({
+        type,
+        ...defaultValue
+      })
+    );
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+    };
+  }
+  createId(type) {
+    return `${type}_${guid()}`;
+  }
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
+   * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  setNewItemId(config, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = this.createId(config.type || "component");
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        this.setNewItemId(item);
+      }
+    }
+    return config;
+  }
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  getDefaultPropsValue(type) {
+    return ["page", "container"].includes(type) ? {
+      type,
+      layout: "absolute",
+      style: {},
+      name: type,
+      items: []
+    } : {
+      type,
+      style: {},
+      name: type
+    };
   }
   resetState() {
-    this.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(DepTargetType.RELATED_COMP_WHEN_COPY);
+    depService.collect(originConfigs, true, DepTargetType.RELATED_COMP_WHEN_COPY);
+    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
+    if (!target)
+      return;
+    originConfigs.forEach((config) => {
+      const newId = relateIdMap[config.id];
+      const path = getNodePath(newId, targetConfigs);
+      const targetConfig = path[path.length - 1];
+      if (!targetConfig)
+        return;
+      target.deps[config.id]?.keys?.forEach((fullKey) => {
+        const relateOriginId = getValueByKeyPath(fullKey, config);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId)
+          return;
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
+      });
+      if (config.items && Array.isArray(config.items)) {
+        this.replaceRelateId(config.items, targetConfigs);
+      }
+    });
+  }
+  /**
+   * 清除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, 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 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 = 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;
+  }
+  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 info = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.info("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}`);
   }
-};
-const warn = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.warn("magic editor: ", ...args);
+  /**
+   * 设置存储项，支持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";
@@ -1588,6 +1230,8 @@ var DragType = /* @__PURE__ */ ((DragType2) => {
 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 [];
@@ -1634,11 +1278,13 @@ const getMiddleTop = (node, parentNode, stage) => {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
+  const { scrollTop = 0, wrapperHeight } = stage.mask;
+  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
   if (isPage(parentNode)) {
-    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) {
@@ -1739,8 +1385,12 @@ const fixNodeLeft = (config, parent, doc) => {
   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 = calcValueByFontsize(doc, parentEl.offsetWidth);
+    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+      return calcParentOffsetWidth - calcElOffsetWidth;
+    }
   }
   return config.style.left;
 };
@@ -1768,1421 +1418,1855 @@ const traverseNode = (node, cb, parents = []) => {
   }
 };
 
-class Dep extends BaseService {
-  watcher = new Watcher({ initialTargets: reactive({}) });
-  removeTargets(type = DepTargetType.DEFAULT) {
-    this.watcher.removeTargets(type);
-    this.emit("remove-target");
-  }
-  getTargets(type = DepTargetType.DEFAULT) {
-    return this.watcher.getTargets(type);
-  }
-  getTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.getTarget(id, type);
-  }
-  addTarget(target) {
-    this.watcher.addTarget(target);
-    this.emit("add-target", target);
-  }
-  removeTarget(id, type = DepTargetType.DEFAULT) {
-    this.watcher.removeTarget(id, type);
-    this.emit("remove-target");
-  }
-  clearTargets() {
-    this.watcher.clearTargets();
-  }
-  collect(nodes, deep = false, type) {
-    this.watcher.collect(nodes, deep, type);
-    this.emit("collected", nodes, deep);
-  }
-  clear(nodes) {
-    return this.watcher.clear(nodes);
-  }
-  clearByType(type, nodes) {
-    return this.watcher.clearByType(type, nodes);
-  }
-  hasTarget(id, type = DepTargetType.DEFAULT) {
-    return this.watcher.hasTarget(id, type);
-  }
-  hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
-    return this.watcher.hasSpecifiedTypeTarget(type);
-  }
-}
-const depService = new Dep();
-
-const canUsePluginMethods$5 = {
-  async: [
-    "setPropsConfig",
-    "getPropsConfig",
-    "setPropsValue",
-    "getPropsValue",
-    "fillConfig",
-    "getDefaultPropsValue"
-  ],
-  sync: ["createId", "setNewItemId"]
-};
-class Props extends BaseService {
-  state = reactive({
-    propsConfigMap: {},
-    propsValueMap: {},
-    relateIdMap: {}
-  });
-  constructor() {
-    super([
-      ...canUsePluginMethods$5.async.map((methodName) => ({ name: methodName, isAsync: true })),
-      ...canUsePluginMethods$5.sync.map((methodName) => ({ name: methodName, isAsync: false }))
-    ]);
-  }
-  setPropsConfigs(configs) {
-    Object.keys(configs).forEach((type) => {
-      this.setPropsConfig(toLine(type), configs[type]);
-    });
-    this.emit("props-configs-change");
-  }
-  async fillConfig(config, labelWidth) {
-    return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
-  }
-  async setPropsConfig(type, config) {
-    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
-  }
-  /**
-   * 获取指点类型的组件属性表单配置
-   * @param type 组件类型
-   * @returns 组件属性表单配置
-   */
-  async getPropsConfig(type) {
-    if (type === "area") {
-      return await this.getPropsConfig("button");
+const beforePaste = (position, config) => {
+  if (!config[0]?.style)
+    return config;
+  const curNode = editorService.get("node");
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  const pasteConfigs = config.map((configItem) => {
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
+    if (!isEmpty(pastePosition) && curNode?.items) {
+      pastePosition = getPositionInContainer(pastePosition, curNode.id);
     }
-    return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
-  }
-  setPropsValues(values) {
-    Object.keys(values).forEach((type) => {
-      this.setPropsValue(toLine(type), values[type]);
-    });
-  }
-  /**
-   * 为指点类型组件设置组件初始值
-   * @param type 组件类型
-   * @param value 组件初始值
-   */
-  async setPropsValue(type, value) {
-    this.state.propsValueMap[toLine(type)] = value;
-  }
-  /**
-   * 获取指定类型的组件初始值
-   * @param type 组件类型
-   * @returns 组件初始值
-   */
-  async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
-    const type = toLine(componentType);
-    if (type === "area") {
-      const value = await this.getPropsValue("button");
-      value.className = "action-area";
-      value.text = "";
-      if (value.style) {
-        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+    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;
       }
-      return value;
+      if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+        pasteConfig.style.top = Number(top) + offsetY;
+      }
+      pasteConfig.style = {
+        ...pasteConfig.style,
+        ...pastePosition
+      };
     }
-    const id = this.createId(type);
-    const defaultPropsValue = this.getDefaultPropsValue(type);
-    const data = this.setNewItemId(
-      cloneDeep({
-        type,
-        ...defaultValue
-      })
+    const root = editorService.get("root");
+    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+    }
+    return pasteConfig;
+  });
+  return pasteConfigs;
+};
+const getPositionInContainer = (position = {}, id) => {
+  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 (isPage(node)) {
+    parentNode = editorService.get("root");
+  } else if (curNode?.items) {
+    parentNode = curNode;
+  } else if (curNode?.id) {
+    parentNode = editorService.getParentById(curNode.id, false);
+  }
+  return parentNode;
+};
+const getDefaultConfig = async (addNode, parentNode) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
+};
+
+const canUsePluginMethods$4 = {
+  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 = 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$4.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+      ["select", "update", "moveLayer"]
     );
-    return {
-      id,
-      ...defaultPropsValue,
-      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
-    };
-  }
-  createId(type) {
-    return `${type}_${guid()}`;
   }
   /**
-   * 将组件与组件的子元素配置中的id都设置成一个新的ID
-   * 如果没有相同ID并且force为false则保持不变
-   * @param {Object} config 组件配置
-   * @param {Boolean} force 是否强制设置新的ID
+   * 设置当前指点节点配置
+   * @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 && 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(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target)
-      return;
-    originConfigs.forEach((config) => {
-      const newId = relateIdMap[config.id];
-      const targetConfig = targetConfigs.find((targetConfig2) => targetConfig2.id === newId);
-      if (!targetConfig)
+  getNodeInfo(id, raw = true) {
+    let root = this.get("root");
+    if (raw) {
+      root = 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 = 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 (isPage(item) || isPageFragment(item)) {
+        info.page = item;
         return;
-      target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = getValueByKeyPath(fullKey, config);
-        const relateTargetId = relateIdMap[relateOriginId];
-        if (!relateTargetId)
-          return;
-        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映射
+   * 根据ID获取指点节点配置
+   * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
+   * @returns 组件节点配置
    */
-  getRelateIdMap() {
-    return this.state.relateIdMap;
+  getNodeById(id, raw = true) {
+    const { node } = this.getNodeInfo(id, raw);
+    return node;
   }
   /**
-   * 记录setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @param newId 分配的新ID
+   * 根据ID获取指点节点的父节点配置
+   * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
+   * @returns 指点组件的父节点配置
    */
-  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, 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 cloneDeep(this.elementList[this.listCursor - 1]);
-  }
-}
-
-class History extends BaseService {
-  state = 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;
+  getParentById(id, raw = true) {
+    const { parent } = this.getNodeInfo(id, raw);
+    return parent;
   }
-  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;
+  /**
+   * 只有容器拥有布局
+   */
+  async getLayout(parent, node) {
+    if (node && typeof node !== "function" && isFixed(node))
+      return Layout.FIXED;
+    if (parent.layout) {
+      return parent.layout;
     }
-    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;
+    if (!parent.style?.position) {
+      return Layout.RELATIVE;
+    }
+    return Layout.ABSOLUTE;
   }
-  push(state) {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo)
-      return null;
-    undoRedo.pushElement(state);
-    this.emit("change", state);
-    return state;
+  /**
+   * 选中指定节点（将指定节点设置成当前选中状态）
+   * @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(toRaw(page));
+    } else {
+      historyService.resetState();
+    }
+    if (node?.id) {
+      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+        "editor:select",
+        {
+          node,
+          page,
+          parent
+        },
+        getNodePath(node.id, this.get("root")?.items)
+      );
+    }
+    this.emit("select", node);
+    return node;
   }
-  undo() {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo)
-      return null;
-    const state = undoRedo.undo();
-    this.emit("change", state);
-    return state;
+  async selectNextNode() {
+    const node = toRaw(this.get("node"));
+    if (!node || isPage(node) || node.type === NodeType.ROOT)
+      return node;
+    const parent = 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;
   }
-  redo() {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo)
-      return null;
-    const state = undoRedo.redo();
-    this.emit("change", state);
-    return state;
+  async selectNextPage() {
+    const root = toRaw(this.get("root"));
+    const page = 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;
   }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
+  /**
+   * 高亮指定节点
+   * @param config 指定节点配置或者ID
+   * @returns 当前高亮的节点配置
+   */
+  highlight(config) {
+    const { node } = this.selectedConfigExceptionHandler(config);
+    const currentHighlightNode = this.get("highlightNode");
+    if (currentHighlightNode === node)
+      return;
+    this.set("highlightNode", node);
   }
-  getUndoRedo() {
-    if (!this.state.pageId)
-      return null;
-    return this.state.pageSteps[this.state.pageId];
+  /**
+   * 多选
+   * @param ids 指定节点ID
+   * @returns 加入多选的节点配置
+   */
+  multiSelect(ids) {
+    const nodes = [];
+    const idsUnique = uniq(ids);
+    idsUnique.forEach((id) => {
+      const { node } = this.getNodeInfo(id);
+      if (!node)
+        return;
+      nodes.push(node);
+    });
+    this.set("nodes", nodes);
   }
-  setCanUndoRedo() {
-    const undoRedo = this.getUndoRedo();
-    this.state.canRedo = undoRedo?.canRedo() || false;
-    this.state.canUndo = undoRedo?.canUndo() || false;
+  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);
   }
-}
-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 })));
+  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 === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
+      throw new Error("app下不能添加组件");
+    }
+    if (parent.id !== curNode.id && !(isPage(node) || 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(toRaw(parent), node);
+    node.style = getInitPositionStyle(node.style, layout);
+    await stage?.add({
+      config: cloneDeep(node),
+      parent: cloneDeep(parent),
+      parentId: parent.id,
+      root: 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: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    }
+    this.addModifiedNodeId(node.id);
+    return node;
   }
   /**
-   * 获取数据存储对象，可以通过
-   * const storageService = new StorageService();
-   * storageService.usePlugin({
-   *    // 替换存储对象为 sessionStorage
-   *    async afterGetStorage(): Promise<Storage> {
-   *      return window.sessionStorage;
-   *    },
-   * });
+   * 向指点容器添加组件节点
+   * @param addConfig 将要添加的组件节点配置
+   * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+   * @returns 添加后的节点
    */
-  getStorage() {
-    return this.storage;
-  }
-  getNamespace() {
-    return this.namespace;
+  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({ ...toRaw(await propsService.getPropsValue(type, config)) });
+    } else {
+      addNodes.push(...addNode);
+    }
+    const newNodes = await Promise.all(
+      addNodes.map((node) => {
+        const root = this.get("root");
+        if ((isPage(node) || 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 (isPage(newNodes[0])) {
+        this.state.pageLength += 1;
+      } else if (isPageFragment(newNodes[0])) {
+        this.state.pageFragmentLength += 1;
+      } else {
+        stage?.select(newNodes[0].id);
+      }
+    }
+    if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
+      this.pushHistoryState();
+    }
+    this.emit("add", newNodes);
+    return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
-  /**
-   * 清理，支持storageService.usePlugin
-   */
-  clear() {
-    const storage = this.getStorage();
-    storage.clear();
+  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: 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 (isPage(node)) {
+      this.state.pageLength -= 1;
+      await selectDefault(getPageList(root));
+    } else if (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 (!(isPage(nodes[0]) || 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 = cloneDeep(toRaw(info.node));
+    let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
+      if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+        return "";
+      }
+      if (isObject(srcValue) && Array.isArray(objValue)) {
+        return srcValue;
+      }
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
+    if (!newConfig.type)
+      throw new Error("配置缺少type值");
+    if (newConfig.type === 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: cloneDeep(newConfig),
+      parentId: parent.id,
+      root: cloneDeep(root)
+    });
+    if (isPage(newConfig) || 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 !== 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;
-    });
-    return {
-      protocol,
-      item
-    };
-  }
-}
-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 = 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"]
-    );
+  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 = cloneDeep(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: cloneDeep(node),
+      parentId: parent.id,
+      root: cloneDeep(root)
+    });
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
   }
   /**
-   * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
-   * @param value MNode
+   * 将组件节点配置存储到localStorage中
+   * @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]);
-    }
-    if (name === "root") {
-      if (Array.isArray(value)) {
-        throw new Error("root 不能为数组");
-      }
-      if (value && 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);
-    }
+  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'
-   * @returns MNode
+   * 复制时会带上组件关联的依赖
+   * @param config 组件节点配置
+   * @returns
    */
-  get(name) {
-    return this.state[name];
+  copyWithRelated(config) {
+    const copyNodes = Array.isArray(config) ? config : [config];
+    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
+    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
+    const customTarget = depService.getTarget(
+      DepTargetType.RELATED_COMP_WHEN_COPY,
+      DepTargetType.RELATED_COMP_WHEN_COPY
+    );
+    if (customTarget) {
+      Object.keys(customTarget.deps).forEach((nodeId) => {
+        const node = this.getNodeById(nodeId);
+        if (!node)
+          return;
+        customTarget.deps[nodeId].keys.forEach((key) => {
+          const relateNodeId = get(node, key);
+          const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
+          if (!isExist) {
+            const relateNode = this.getNodeById(relateNodeId);
+            if (relateNode) {
+              copyNodes.push(relateNode);
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
+      protocol: Protocol.OBJECT
+    });
   }
   /**
-   * 根据id获取组件、组件的父组件以及组件所属的页面节点
-   * @param {number | string} id 组件id
-   * @param {boolean} raw 是否使用toRaw
-   * @returns {EditorNodeInfo}
+   * 从localStorage中获取节点，然后添加到当前容器中
+   * @param position 粘贴的坐标
+   * @returns 添加后的组件节点配置
    */
-  getNodeInfo(id, raw = true) {
-    let root = this.get("root");
-    if (raw) {
-      root = toRaw(root);
+  async paste(position = {}) {
+    const config = storageService.getItem(COPY_STORAGE_KEY);
+    if (!Array.isArray(config))
+      return;
+    const node = this.get("node");
+    let parent = null;
+    if (config.length === 1 && config[0].id === node?.id) {
+      parent = this.get("parent");
+      if (parent?.type === NodeType.ROOT) {
+        parent = this.get("page");
+      }
     }
-    const info = {
-      node: null,
-      parent: null,
-      page: null
-    };
-    if (!root)
-      return info;
-    if (id === root.id) {
-      info.node = root;
-      return info;
+    const pasteConfigs = await this.doPaste(config, position);
+    propsService.replaceRelateId(config, pasteConfigs);
+    return this.add(pasteConfigs, parent);
+  }
+  async doPaste(config, position = {}) {
+    propsService.clearRelateId();
+    const pasteConfigs = beforePaste(position, cloneDeep(config));
+    return pasteConfigs;
+  }
+  async doAlignCenter(config) {
+    const parent = this.getParentById(config.id);
+    if (!parent)
+      throw new Error("找不到父节点");
+    const node = cloneDeep(toRaw(config));
+    const layout = await this.getLayout(parent, node);
+    if (layout === Layout.RELATIVE) {
+      return config;
     }
-    const path = 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 (isPage(item) || isPageFragment(item)) {
-        info.page = item;
-        return;
+    if (!node.style)
+      return config;
+    const stage = this.get("stage");
+    const doc = stage?.renderer.contentWindow?.document;
+    if (doc) {
+      const el = doc.getElementById(`${node.id}`);
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
+      if (parentEl && el) {
+        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
+        node.style.right = "";
       }
-    });
-    return info;
+    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
+      node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = "";
+    }
+    return node;
   }
   /**
-   * 根据ID获取指点节点配置
-   * @param id 组件ID
-   * @param {boolean} raw 是否使用toRaw
-   * @returns 组件节点配置
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
    */
-  getNodeById(id, raw = true) {
-    const { node } = this.getNodeInfo(id, raw);
-    return node;
+  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 id 组件ID
-   * @param {boolean} raw 是否使用toRaw
-   * @returns 指点组件的父节点配置
+   * 移动当前选中节点位置
+   * @param offset 偏移量
    */
-  getParentById(id, raw = true) {
-    const { parent } = this.getNodeInfo(id, raw);
-    return parent;
+  async moveLayer(offset) {
+    const root = this.get("root");
+    if (!root)
+      throw new Error("root为空");
+    const parent = this.get("parent");
+    if (!parent)
+      throw new Error("父节点为空");
+    const node = this.get("node");
+    if (!node)
+      throw new Error("当前节点为空");
+    const brothers = parent.items || [];
+    const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
+    const layout = await this.getLayout(parent, node);
+    const isRelative = layout === Layout.RELATIVE;
+    let offsetIndex;
+    if (offset === LayerOffset.TOP) {
+      offsetIndex = isRelative ? 0 : brothers.length;
+    } else if (offset === LayerOffset.BOTTOM) {
+      offsetIndex = isRelative ? brothers.length : 0;
+    } else {
+      offsetIndex = index + (isRelative ? -offset : offset);
+    }
+    if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) {
+      return;
+    }
+    brothers.splice(index, 1);
+    brothers.splice(offsetIndex, 0, node);
+    const grandparent = this.getParentById(parent.id);
+    this.get("stage")?.update({
+      config: cloneDeep(toRaw(parent)),
+      parentId: grandparent?.id,
+      root: cloneDeep(root)
+    });
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+    this.emit("move-layer", offset);
   }
   /**
-   * 只有容器拥有布局
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
    */
-  async 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;
+  async moveToContainer(config, targetId) {
+    const root = this.get("root");
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false);
+    const stage = this.get("stage");
+    if (root && node && parent && stage) {
+      const index = getNodeIndex(node.id, parent);
+      parent.items?.splice(index, 1);
+      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
+      const layout = await this.getLayout(target);
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
+      target.items.push(newConfig);
+      await stage.select(targetId);
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+      return newConfig;
     }
-    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(toRaw(page));
-    } else {
-      historyService.resetState();
+  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;
+      }
     }
-    if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
-        "editor:select",
-        {
-          node,
-          page,
-          parent
-        },
-        getNodePath(node.id, this.get("root")?.items)
-      );
+    const layout = await this.getLayout(parent);
+    const newLayout = await this.getLayout(targetParent);
+    if (newLayout !== layout) {
+      setLayout(config, newLayout);
     }
-    this.emit("select", node);
-    return node;
-  }
-  async selectNextNode() {
-    const node = toRaw(this.get("node"));
-    if (!node || isPage(node) || node.type === NodeType.ROOT)
-      return node;
-    const parent = 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;
-  }
-  async selectNextPage() {
-    const root = toRaw(this.get("root"));
-    const page = 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;
+    parent.items?.splice(index, 1);
+    targetParent.items?.splice(targetIndex, 0, config);
+    const page = this.get("page");
+    const root = this.get("root");
+    const stage = this.get("stage");
+    if (stage && page && root) {
+      stage.update({
+        config: cloneDeep(page),
+        parentId: root.id,
+        root: cloneDeep(root)
+      });
+    }
+    this.addModifiedNodeId(config.id);
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
   }
   /**
-   * 高亮指定节点
-   * @param config 指定节点配置或者ID
-   * @returns 当前高亮的节点配置
+   * 撤销当前操作
+   * @returns 上一次数据
    */
-  highlight(config) {
-    const { node } = this.selectedConfigExceptionHandler(config);
-    const currentHighlightNode = this.get("highlightNode");
-    if (currentHighlightNode === node)
-      return;
-    this.set("highlightNode", node);
+  async undo() {
+    const value = historyService.undo();
+    await this.changeHistoryState(value);
+    return value;
   }
   /**
-   * 多选
-   * @param ids 指定节点ID
-   * @returns 加入多选的节点配置
+   * 恢复到下一步
+   * @returns 下一步数据
    */
-  multiSelect(ids) {
-    const nodes = [];
-    const idsUnique = uniq(ids);
-    idsUnique.forEach((id) => {
-      const { node } = this.getNodeInfo(id);
-      if (!node)
-        return;
-      nodes.push(node);
-    });
-    this.set("nodes", nodes);
+  async redo() {
+    const value = historyService.redo();
+    await this.changeHistoryState(value);
+    return value;
   }
-  selectRoot() {
-    const root = this.get("root");
-    if (!root)
+  async move(left, top) {
+    const node = toRaw(this.get("node"));
+    if (!node || isPage(node))
       return;
-    this.set("nodes", [root]);
-    this.set("parent", null);
+    const { style, id, type } = node;
+    if (!style || !["absolute", "fixed"].includes(style.position))
+      return;
+    const update = (style2) => this.update({
+      id,
+      type,
+      style: style2
+    });
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: ""
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: ""
+        });
+      }
+    }
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: ""
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: ""
+        });
+      }
+    }
+  }
+  resetState() {
+    this.set("root", null);
+    this.set("node", null);
+    this.set("nodes", []);
     this.set("page", null);
+    this.set("parent", null);
     this.set("stage", null);
     this.set("highlightNode", null);
+    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
+    this.set("pageLength", 0);
   }
-  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 === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
-      throw new Error("app下不能添加组件");
+  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);
     }
-    if (parent.id !== curNode.id && !(isPage(node) || isPageFragment(node))) {
-      const index = parent.items.indexOf(curNode);
-      parent.items?.splice(index + 1, 0, node);
-    } else {
-      parent.items?.push(node);
+  }
+  pushHistoryState() {
+    const curNode = cloneDeep(toRaw(this.get("node")));
+    const page = this.get("page");
+    if (!this.isHistoryStateChange && curNode && page) {
+      historyService.push({
+        data: cloneDeep(toRaw(page)),
+        modifiedNodeIds: this.get("modifiedNodeIds"),
+        nodeId: curNode.id
+      });
     }
-    const layout = await this.getLayout(toRaw(parent), node);
-    node.style = getInitPositionStyle(node.style, layout);
-    await stage?.add({
-      config: cloneDeep(node),
-      parent: cloneDeep(parent),
-      parentId: parent.id,
-      root: 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: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    this.isHistoryStateChange = false;
+  }
+  async changeHistoryState(value) {
+    if (!value)
+      return;
+    this.isHistoryStateChange = true;
+    await this.update(value.data);
+    this.set("modifiedNodeIds", value.modifiedNodeIds);
+    setTimeout(async () => {
+      if (!value.nodeId)
+        return;
+      await this.select(value.nodeId);
+      this.get("stage")?.select(value.nodeId);
+    }, 0);
+    this.emit("history-change", value.data);
+  }
+  async toggleFixedPosition(dist, src, root) {
+    const newConfig = cloneDeep(dist);
+    if (!isPop(src) && newConfig.style?.position) {
+      if (isFixed(newConfig) && !isFixed(src)) {
+        newConfig.style = change2Fixed(newConfig, root);
+      } else if (!isFixed(newConfig) && isFixed(src)) {
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
+      }
     }
-    this.addModifiedNodeId(node.id);
-    return node;
+    return newConfig;
   }
-  /**
-   * 向指点容器添加组件节点
-   * @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({ ...toRaw(await propsService.getPropsValue(type, config)) });
+  selectedConfigExceptionHandler(config) {
+    let id;
+    if (typeof config === "string" || typeof config === "number") {
+      id = config;
     } else {
-      addNodes.push(...addNode);
+      id = config.id;
     }
-    const newNodes = await Promise.all(
-      addNodes.map((node) => {
-        const root = this.get("root");
-        if ((isPage(node) || 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 (isPage(newNodes[0])) {
-        this.state.pageLength += 1;
-      } else if (isPageFragment(newNodes[0])) {
-        this.state.pageFragmentLength += 1;
-      } else {
-        stage?.select(newNodes[0].id);
-      }
+    if (!id) {
+      throw new Error("没有ID，无法选中");
     }
-    if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
-      this.pushHistoryState();
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node)
+      throw new Error("获取不到组件信息");
+    if (node.id === this.state.root?.id) {
+      throw new Error("不能选根节点");
     }
-    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: cloneDeep(root) });
-    const selectDefault = async (pages) => {
-      if (pages[0]) {
-        await this.select(pages[0]);
-        stage?.select(pages[0].id);
-      } else {
-        this.selectRoot();
-        historyService.resetPage();
-      }
+    return {
+      node,
+      parent,
+      page
     };
-    const rootItems = root.items || [];
-    if (isPage(node)) {
-      this.state.pageLength -= 1;
-      await selectDefault(getPageList(root));
-    } else if (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();
+  }
+}
+const editorService = new Editor();
+
+function BaseFormConfig() {
+  return [
+    {
+      name: "id",
+      type: "hidden"
+    },
+    {
+      name: "type",
+      text: "类型",
+      type: "hidden",
+      defaultValue: "base"
+    },
+    {
+      name: "title",
+      text: "名称",
+      rules: [
+        {
+          required: true,
+          message: "请输入名称"
+        }
+      ]
+    },
+    {
+      name: "description",
+      text: "描述"
     }
+  ];
+}
+
+const HttpFormConfig = [
+  {
+    name: "autoFetch",
+    text: "自动请求",
+    type: "switch",
+    defaultValue: true
+  },
+  {
+    name: "responseOptions",
+    items: [
+      {
+        name: "dataPath",
+        text: "数据路径"
+      }
+    ]
+  },
+  {
+    type: "fieldset",
+    name: "options",
+    legend: "HTTP 配置",
+    items: [
+      {
+        name: "url",
+        text: "URL"
+      },
+      {
+        name: "method",
+        text: "Method",
+        type: "select",
+        options: [
+          { text: "GET", value: "GET" },
+          { text: "POST", value: "POST" },
+          { text: "PUT", value: "PUT" },
+          { text: "DELETE", value: "DELETE" }
+        ]
+      },
+      {
+        name: "params",
+        type: "key-value",
+        defaultValue: {},
+        text: "参数"
+      },
+      {
+        name: "data",
+        type: "key-value",
+        defaultValue: {},
+        advanced: true,
+        text: "请求体"
+      },
+      {
+        name: "headers",
+        type: "key-value",
+        defaultValue: {},
+        text: "请求头"
+      }
+    ]
+  }
+];
+
+const fillConfig$1 = (config) => [
+  ...BaseFormConfig(),
+  ...config,
+  {
+    type: "tab",
+    items: [
+      {
+        title: "数据定义",
+        items: [
+          {
+            name: "fields",
+            type: "data-source-fields",
+            defaultValue: () => []
+          }
+        ]
+      },
+      {
+        title: "方法定义",
+        items: [
+          {
+            name: "methods",
+            type: "data-source-methods",
+            defaultValue: () => []
+          }
+        ]
+      },
+      {
+        title: "事件配置",
+        items: [
+          {
+            name: "events",
+            src: "datasource",
+            type: "event-select"
+          }
+        ]
+      },
+      {
+        title: "mock数据",
+        items: [
+          {
+            name: "mocks",
+            type: "data-source-mocks",
+            defaultValue: () => []
+          }
+        ]
+      },
+      {
+        title: "请求参数裁剪",
+        display: (formState, { model }) => model.type === "http",
+        items: [
+          {
+            name: "beforeRequest",
+            type: "vs-code",
+            parse: true,
+            height: "600px"
+          }
+        ]
+      },
+      {
+        title: "响应数据裁剪",
+        display: (formState, { model }) => model.type === "http",
+        items: [
+          {
+            name: "afterResponse",
+            type: "vs-code",
+            parse: true,
+            height: "600px"
+          }
+        ]
+      }
+    ]
+  }
+];
+const getFormConfig = (type, configs) => {
+  switch (type) {
+    case "base":
+      return fillConfig$1([]);
+    case "http":
+      return fillConfig$1(HttpFormConfig);
+    default:
+      return fillConfig$1(configs[type] || []);
+  }
+};
+const getFormValue = (type, values) => {
+  if (type !== "http") {
+    return values;
   }
+  return {
+    beforeRequest: `(options, context) => {
   /**
-   * 删除组件
-   * @param {Object} node
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * options: HttpOptions
+   *
+   * interface HttpOptions {
+   *  // 请求链接
+   *  url: string;
+   *  // query参数
+   *  params?: Record<string, string>;
+   *  // body数据
+   *  data?: Record<string, any>;
+   *  // 请求头
+   *  headers?: Record<string, string>;
+   *  // 请求方法 GET/POST
+   *  method?: Method;
+   * }
+   *
+   * context：上下文对象
+   *
+   * interface Content {
+   *  app: AppCore;
+   *  dataSource: HttpDataSource;
+   * }
+   *
+   * return: HttpOptions
    */
-  async remove(nodeOrNodeList) {
-    const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
-    await Promise.all(nodes.map((node) => this.doRemove(node)));
-    if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
-      this.pushHistoryState();
-    }
-    this.emit("remove", nodes);
-  }
-  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 = cloneDeep(toRaw(info.node));
-    let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
-      if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
-        return "";
-      }
-      if (isObject(srcValue) && Array.isArray(objValue)) {
-        return srcValue;
-      }
-      if (Array.isArray(srcValue)) {
-        return srcValue;
+
+  // 此处的返回值会作为这个接口的入参
+  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}`;
     });
-    if (!newConfig.type)
-      throw new Error("配置缺少type值");
-    if (newConfig.type === NodeType.ROOT) {
-      this.set("root", newConfig);
-      return newConfig;
+    displayState.push({
+      type: "var",
+      value: dsText
+    });
+    index = match.index + match[0].length;
+  }
+  if (index < key.length) {
+    displayState.push({
+      type: "text",
+      value: key.substring(index)
+    });
+  }
+  return displayState;
+};
+const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
+  const child = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push("any");
+    }
+    const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
+    const item = {
+      label: field.title || field.name,
+      value: field.name,
+      children
+    };
+    const fieldType = field.type || "any";
+    if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
+      return;
     }
-    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);
+    if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
+      return;
     }
-    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: cloneDeep(newConfig),
-      parentId: parent.id,
-      root: cloneDeep(root)
-    });
-    if (isPage(newConfig) || isPageFragment(newConfig)) {
-      this.set("page", newConfig);
+    if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+      return;
     }
-    this.addModifiedNodeId(newConfig.id);
+    child.push(item);
+  });
+  return child;
+};
+
+const canUsePluginMethods$3 = {
+  async: [],
+  sync: [
+    "getFormConfig",
+    "setFormConfig",
+    "getFormValue",
+    "setFormValue",
+    "getFormEvent",
+    "setFormEvent",
+    "getFormMethod",
+    "setFormMethod",
+    "add",
+    "update",
+    "remove",
+    "createId"
+  ]
+};
+class DataSource extends BaseService {
+  state = reactive({
+    datasourceTypeList: [],
+    dataSources: [],
+    editable: true,
+    configs: {},
+    values: {},
+    events: {},
+    methods: {}
+  });
+  constructor() {
+    super(canUsePluginMethods$3.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+  }
+  set(name, value) {
+    this.state[name] = value;
+  }
+  get(name) {
+    return this.state[name];
+  }
+  getFormConfig(type = "base") {
+    return getFormConfig(toLine(type), this.get("configs"));
+  }
+  setFormConfig(type, config) {
+    this.get("configs")[toLine(type)] = config;
+  }
+  getFormValue(type = "base") {
+    return getFormValue(toLine(type), this.get("values")[type]);
+  }
+  setFormValue(type, value) {
+    this.get("values")[toLine(type)] = value;
+  }
+  getFormEvent(type = "base") {
+    return this.get("events")[toLine(type)] || [];
+  }
+  setFormEvent(type, value = []) {
+    this.get("events")[toLine(type)] = value;
+  }
+  getFormMethod(type = "base") {
+    return this.get("methods")[toLine(type)] || [];
+  }
+  setFormMethod(type, value = []) {
+    this.get("methods")[toLine(type)] = value;
+  }
+  add(config) {
+    const newConfig = {
+      ...config,
+      id: config.id && !this.getDataSourceById(config.id) ? config.id : this.createId()
+    };
+    this.get("dataSources").push(newConfig);
+    this.emit("add", newConfig);
     return newConfig;
   }
-  /**
-   * 更新节点
-   * @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 !== 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] = cloneDeep(config);
+    this.emit("update", config);
+    return config;
+  }
+  remove(id) {
+    const dataSources = this.get("dataSources");
+    const index = dataSources.findIndex((ds) => ds.id === id);
+    dataSources.splice(index, 1);
+    this.emit("remove", id);
+  }
+  createId() {
+    return `ds_${guid()}`;
+  }
+  getDataSourceById(id) {
+    return this.get("dataSources").find((ds) => ds.id === id);
   }
-  /**
-   * 将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 = cloneDeep(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: cloneDeep(node),
-      parentId: parent.id,
-      root: 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(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_COMP_WHEN_COPY,
-      DepTargetType.RELATED_COMP_WHEN_COPY
-    );
+    depService.clearByType(DepTargetType.RELATED_DS_WHEN_COPY);
+    depService.collect(copyNodes, true, DepTargetType.RELATED_DS_WHEN_COPY);
+    const customTarget = depService.getTarget(DepTargetType.RELATED_DS_WHEN_COPY, 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 = get(node, key);
-          const isExist = copyNodes.find((node2) => node2.id === relateNodeId);
+          const [relateDsId] = 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 === 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, cloneDeep(config));
-    return pasteConfigs;
-  }
-  async doAlignCenter(config) {
-    const parent = this.getParentById(config.id);
-    if (!parent)
-      throw new Error("找不到父节点");
-    const node = cloneDeep(toRaw(config));
-    const layout = await this.getLayout(parent, node);
-    if (layout === Layout.RELATIVE) {
-      return config;
-    }
-    if (!node.style)
-      return config;
-    const stage = this.get("stage");
-    const doc = stage?.renderer.contentWindow?.document;
-    if (doc) {
-      const el = doc.getElementById(`${node.id}`);
-      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
-      if (parentEl && el) {
-        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
-        node.style.right = "";
-      }
-    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
-      node.style.left = (parent.style.width - node.style.width) / 2;
-      node.style.right = "";
-    }
-    return node;
-  }
-  /**
-   * 将指点节点设置居中
-   * @param config 组件节点配置
-   * @returns 当前组件节点配置
-   */
-  async alignCenter(config) {
-    const nodes = Array.isArray(config) ? config : [config];
-    const stage = this.get("stage");
-    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
-    const newNode = await this.update(newNodes);
-    if (newNodes.length > 1) {
-      await stage?.multiSelect(newNodes.map((node) => node.id));
-    } else {
-      await stage?.select(newNodes[0].id);
-    }
-    return newNode;
-  }
-  /**
-   * 移动当前选中节点位置
-   * @param offset 偏移量
-   */
-  async moveLayer(offset) {
-    const root = this.get("root");
-    if (!root)
-      throw new Error("root为空");
-    const parent = this.get("parent");
-    if (!parent)
-      throw new Error("父节点为空");
-    const node = this.get("node");
-    if (!node)
-      throw new Error("当前节点为空");
-    const brothers = parent.items || [];
-    const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
-    const layout = await this.getLayout(parent, node);
-    const isRelative = layout === Layout.RELATIVE;
-    let offsetIndex;
-    if (offset === LayerOffset.TOP) {
-      offsetIndex = isRelative ? 0 : brothers.length;
-    } else if (offset === LayerOffset.BOTTOM) {
-      offsetIndex = isRelative ? brothers.length : 0;
-    } else {
-      offsetIndex = index + (isRelative ? -offset : offset);
-    }
-    if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) {
-      return;
-    }
-    brothers.splice(index, 1);
-    brothers.splice(offsetIndex, 0, node);
-    const grandparent = this.getParentById(parent.id);
-    this.get("stage")?.update({
-      config: cloneDeep(toRaw(parent)),
-      parentId: grandparent?.id,
-      root: cloneDeep(root)
-    });
-    this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
-    this.emit("move-layer", offset);
-  }
-  /**
-   * 移动到指定容器中
-   * @param config 需要移动的节点
-   * @param targetId 容器ID
-   */
-  async moveToContainer(config, targetId) {
-    const root = this.get("root");
-    const { node, parent } = this.getNodeInfo(config.id, false);
-    const target = this.getNodeById(targetId, false);
-    const stage = this.get("stage");
-    if (root && node && parent && stage) {
-      const index = getNodeIndex(node.id, parent);
-      parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
-      const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
-        if (Array.isArray(srcValue)) {
-          return srcValue;
+          ]
+        },
+        {
+          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: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
-      await this.select(newConfig);
-      stage.select(newConfig.id);
-      this.addModifiedNodeId(target.id);
-      this.addModifiedNodeId(parent.id);
-      this.pushHistoryState();
-      return newConfig;
-    }
-  }
-  async dragTo(config, targetParent, targetIndex) {
-    if (!targetParent || !Array.isArray(targetParent.items))
-      return;
-    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-    if (!parent || !curNode)
-      throw new Error("找不要删除的节点");
-    const index = getNodeIndex(curNode.id, parent);
-    if (typeof index !== "number" || index === -1)
-      throw new Error("找不要删除的节点");
-    if (parent.id === targetParent.id) {
-      if (index === targetIndex)
-        return;
-      if (index < targetIndex) {
-        targetIndex -= 1;
-      }
-    }
-    const layout = await this.getLayout(parent);
-    const newLayout = await this.getLayout(targetParent);
-    if (newLayout !== layout) {
-      setLayout(config, newLayout);
-    }
-    parent.items?.splice(index, 1);
-    targetParent.items?.splice(targetIndex, 0, config);
-    const page = this.get("page");
-    const root = this.get("root");
-    const stage = this.get("stage");
-    if (stage && page && root) {
-      stage.update({
-        config: cloneDeep(page),
-        parentId: root.id,
-        root: cloneDeep(root)
-      });
-    }
-    this.addModifiedNodeId(config.id);
-    this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
-    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
-  }
-  /**
-   * 撤销当前操作
-   * @returns 上一次数据
-   */
-  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 = toRaw(this.get("node"));
-    if (!node || isPage(node))
-      return;
-    const { style, id, type } = node;
-    if (!style || !["absolute", "fixed"].includes(style.position))
-      return;
-    const update = (style2) => this.update({
-      id,
-      type,
-      style: style2
-    });
-    if (top) {
-      if (isNumber(style.top)) {
-        update({
-          ...style,
-          top: Number(style.top) + Number(top),
-          bottom: ""
-        });
-      } else if (isNumber(style.bottom)) {
-        update({
-          ...style,
-          bottom: Number(style.bottom) - Number(top),
-          top: ""
-        });
-      }
+      ]
     }
-    if (left) {
-      if (isNumber(style.left)) {
-        update({
-          ...style,
-          left: Number(style.left) + Number(left),
-          right: ""
-        });
-      } else if (isNumber(style.right)) {
-        update({
-          ...style,
-          right: Number(style.right) - Number(left),
-          left: ""
-        });
-      }
+  ]
+};
+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 = cloneDeep(toRaw(this.get("node")));
-    const page = this.get("page");
-    if (!this.isHistoryStateChange && curNode && page) {
-      historyService.push({
-        data: cloneDeep(toRaw(page)),
-        modifiedNodeIds: this.get("modifiedNodeIds"),
-        nodeId: curNode.id
-      });
+  ]
+};
+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 = cloneDeep(dist);
-    if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
-        newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
-        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
-      }
-    }
-    return newConfig;
+];
+
+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 (!isEmpty(pastePosition) && curNode?.items) {
-      pastePosition = getPositionInContainer(pastePosition, curNode.id);
-    }
-    if (pastePosition.left && configItem.style?.left) {
-      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-    }
-    if (pastePosition.top && configItem.style?.top) {
-      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-    }
-    const pasteConfig = propsService.setNewItemId(configItem, false);
-    if (pasteConfig.style) {
-      const { left, top } = pasteConfig.style;
-      if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-        pasteConfig.style.left = Number(left) + offsetX;
-      }
-      if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-        pasteConfig.style.top = Number(top) + offsetY;
-      }
-      pasteConfig.style = {
-        ...pasteConfig.style,
-        ...pastePosition
-      };
-    }
-    const root = editorService.get("root");
-    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
-      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
-    }
-    return pasteConfig;
-  });
-  return pasteConfigs;
 };
-const 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 (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(toRaw(parentNode), addNode);
-  const newNode = { ...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__ */ defineComponent({
@@ -3572,7 +3656,6 @@ const useCodeBlockEdit = (codeBlockService) => {
     if (!codeId.value)
       return;
     await codeBlockService?.setCodeDslById(codeId.value, values);
-    tMagicMessage.success("代码块保存成功");
     codeBlockEditor.value?.hide();
   };
   return {
@@ -3774,7 +3857,7 @@ const useStage = (stageOptions) => {
   const stage = new StageCore({
     render: stageOptions.render,
     runtimeUrl: stageOptions.runtimeUrl,
-    zoom: zoom.value,
+    zoom: stageOptions.zoom ?? zoom.value,
     autoScrollIntoView: stageOptions.autoScrollIntoView,
     isContainer: stageOptions.isContainer,
     containerHighlightClassName: stageOptions.containerHighlightClassName,
@@ -4355,33 +4438,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
     });
     const dataSources = 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 = computed(() => {
       const valueIsKey = props.config.value === "key";
       return {
@@ -4392,7 +4448,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           const options = dataSources.value?.map((ds) => ({
             label: ds.title || ds.id,
             value: valueIsKey ? ds.id : `${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);
         }
@@ -4444,7 +4500,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$q, [
         (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-          style: { "width": "100%" },
           config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
           model: _ctx.model,
           name: _ctx.name,
@@ -5631,24 +5686,41 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     const eventsService = services?.eventsService;
     const codeBlockService = services?.codeBlockService;
     const eventNameConfig = computed(() => {
+      const fieldType = props.config.src === "component" ? "select" : "cascader";
       const defaultEventNameConfig = {
         name: "name",
         text: "事件",
-        type: "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: 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 };
@@ -8614,8 +8686,8 @@ const usePasteMenu = (menu) => ({
       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 = calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+      const initialTop = 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();
@@ -9612,7 +9684,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               class: "m-editor-sidebar-content",
               key: config.$key ?? index
             }, [
-              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+                key: 0,
+                ref_for: true
+              }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
                 config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                   name: "component-list-panel-header",
                   fn: withCtx(() => [
@@ -9745,7 +9820,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               }, {
                 body: withCtx(() => [
                   createElementVNode("div", _hoisted_5$1, [
-                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
+                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+                      key: 0,
+                      ref_for: true
+                    }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
                   ])
                 ]),
                 _: 2
@@ -10566,17 +10644,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           position = "absolute";
           top = e.clientY - containerRect.top + scrollTop;
           left = e.clientX - containerRect.left + scrollLeft;
-          if (parentEl && doc) {
+          if (parentEl) {
             const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-            left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
-            top = top - 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: calcValueByFontsize(doc, top / zoom.value),
+          left: calcValueByFontsize(doc, left / zoom.value)
         };
         config.data.inputEvent = e;
         services?.editorService.add(config.data, parent);
@@ -10707,7 +10785,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 
 const canUsePluginMethods$1 = {
   async: ["setCodeDslById", "setEditStatus", "setCombineIds", "setUndeleteableList", "deleteCodeDslByIds"],
-  sync: []
+  sync: ["setCodeDslByIdSync"]
 };
 class CodeBlock extends BaseService {
   state = reactive({
@@ -10718,7 +10796,10 @@ class CodeBlock extends BaseService {
     paramsColConfig: void 0
   });
   constructor() {
-    super(canUsePluginMethods$1.async.map((methodName) => ({ name: methodName, isAsync: true })));
+    super([
+      ...canUsePluginMethods$1.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      ...canUsePluginMethods$1.sync.map((methodName) => ({ name: methodName, isAsync: false }))
+    ]);
   }
   /**
    * 设置活动的代码块dsl数据源
@@ -10758,17 +10839,29 @@ class CodeBlock extends BaseService {
    * @returns {void}
    */
   async setCodeDslById(id, codeConfig) {
+    this.setCodeDslByIdSync(id, codeConfig, true);
+  }
+  /**
+   * 为了兼容历史原因
+   * 设置代码块ID和代码内容到源dsl
+   * @param {Id} id 代码块id
+   * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+   * @param {boolean} force 是否强制写入，默认true
+   * @returns {void}
+   */
+  setCodeDslByIdSync(id, codeConfig, force = true) {
     const codeDsl = this.getCodeDsl();
     if (!codeDsl) {
       throw new Error("dsl中没有codeBlocks");
     }
-    const codeConfigProcessed = codeConfig;
-    if (codeConfig.content) {
+    if (codeDsl[id] && !force)
+      return;
+    const codeConfigProcessed = cloneDeep(codeConfig);
+    if (codeConfigProcessed.content) {
       const parseDSL = getConfig("parseDSL");
-      if (typeof codeConfig.content === "string") {
-        codeConfig.content = parseDSL(codeConfig.content);
+      if (typeof codeConfigProcessed.content === "string") {
+        codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
       }
-      codeConfigProcessed.content = codeConfig.content;
     }
     const existContent = codeDsl[id] || {};
     codeDsl[id] = {
@@ -10880,6 +10973,51 @@ class CodeBlock extends BaseService {
       return newId;
     return await this.getUniqueId();
   }
+  /**
+   * 复制时会带上组件关联的代码块
+   * @param config 组件节点配置
+   * @returns
+   */
+  copyWithRelated(config) {
+    const copyNodes = Array.isArray(config) ? config : [config];
+    depService.clearByType(DepTargetType.RELATED_CODE_WHEN_COPY);
+    depService.collect(copyNodes, true, DepTargetType.RELATED_CODE_WHEN_COPY);
+    const customTarget = depService.getTarget(
+      DepTargetType.RELATED_CODE_WHEN_COPY,
+      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 = 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;
@@ -11221,6 +11359,7 @@ class StageOverlay extends BaseService {
   createStage(stageOptions = {}) {
     return useStage({
       ...stageOptions,
+      zoom: 1,
       runtimeUrl: "",
       autoScrollIntoView: false,
       render: async (stage) => {
@@ -11650,7 +11789,17 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   dataSourceService.on("update", dataSourceUpdateHandler);
   dataSourceService.on("remove", dataSourceRemoveHandler);
   if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
+    depService.addTarget(createRelatedTargetForCopy(props.collectorOptions, DepTargetType.RELATED_COMP_WHEN_COPY));
+  }
+  if (props.collectorOptionsForCode && !depService.hasTarget(DepTargetType.RELATED_CODE_WHEN_COPY)) {
+    depService.addTarget(
+      createRelatedTargetForCopy(props.collectorOptionsForCode, DepTargetType.RELATED_CODE_WHEN_COPY)
+    );
+  }
+  if (props.collectorOptionsForDataSource && !depService.hasTarget(DepTargetType.RELATED_DS_WHEN_COPY)) {
+    depService.addTarget(
+      createRelatedTargetForCopy(props.collectorOptionsForDataSource, DepTargetType.RELATED_DS_WHEN_COPY)
+    );
   }
   onBeforeUnmount(() => {
     depService.off("add-target", targetAddHandler);
@@ -11701,6 +11850,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     codeOptions: {},
     disabledDragStart: { type: Boolean },
     collectorOptions: {},
+    collectorOptionsForCode: {},
+    collectorOptionsForDataSource: {},
     guidesOptions: {},
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },
@@ -11906,4 +12057,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };