@tmagic/editor 1.4.5 → 1.4.6

package/dist/tmagic-editor.js

@@ -8,9 +8,9 @@ import * as monaco from 'monaco-editor';
 import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { toLine, guid, getNodePath, getValueByKeyPath, setValueByKeyPath, isPage, isPageFragment, isPop, isNumber, calcValueByFontsize, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
-import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
+import { Watcher, DepTargetType, createRelatedTargetForCopy, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
@@ -505,388 +505,94 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-function BaseFormConfig() {
-  return [
-    {
-      name: "id",
-      type: "hidden"
-    },
-    {
-      name: "type",
-      text: "类型",
-      type: "hidden",
-      defaultValue: "base"
-    },
-    {
-      name: "title",
-      text: "名称",
-      rules: [
-        {
-          required: true,
-          message: "请输入名称"
+const compose = (middleware, isAsync) => {
+  if (!Array.isArray(middleware))
+    throw new TypeError("Middleware 必须是一个数组!");
+  for (const fn of middleware) {
+    if (typeof fn !== "function")
+      throw new TypeError("Middleware 必须由函数组成!");
+  }
+  return (args, next) => {
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i) {
+      if (i <= index) {
+        const error = new Error("next() 被多次调用");
+        if (isAsync) {
+          return Promise.reject(error);
         }
-      ]
-    },
-    {
-      name: "description",
-      text: "描述"
-    }
-  ];
-}
-
-const HttpFormConfig = [
-  {
-    name: "autoFetch",
-    text: "自动请求",
-    type: "switch",
-    defaultValue: true
-  },
-  {
-    name: "responseOptions",
-    items: [
-      {
-        name: "dataPath",
-        text: "数据路径"
+        throw error;
       }
-    ]
-  },
-  {
-    type: "fieldset",
-    name: "options",
-    legend: "HTTP 配置",
-    items: [
-      {
-        name: "url",
-        text: "URL"
-      },
-      {
-        name: "method",
-        text: "Method",
-        type: "select",
-        options: [
-          { text: "GET", value: "GET" },
-          { text: "POST", value: "POST" },
-          { text: "PUT", value: "PUT" },
-          { text: "DELETE", value: "DELETE" }
-        ]
-      },
-      {
-        name: "params",
-        type: "key-value",
-        defaultValue: {},
-        text: "参数"
-      },
-      {
-        name: "data",
-        type: "key-value",
-        defaultValue: {},
-        advanced: true,
-        text: "请求体"
-      },
-      {
-        name: "headers",
-        type: "key-value",
-        defaultValue: {},
-        text: "请求头"
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next)
+        fn = next;
+      if (!fn) {
+        if (isAsync) {
+          return Promise.resolve();
+        }
+        return;
       }
-    ]
-  }
-];
+      if (isAsync) {
+        try {
+          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+        } catch (err) {
+          return Promise.reject(err);
+        }
+      }
+      try {
+        return fn(...args, dispatch.bind(null, i + 1));
+      } catch (err) {
+        throw err;
+      }
+    }
+  };
+};
 
-const fillConfig$1 = (config) => [
-  ...BaseFormConfig(),
-  ...config,
-  {
-    type: "tab",
-    items: [
-      {
-        title: "数据定义",
-        items: [
-          {
-            name: "fields",
-            type: "data-source-fields",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "方法定义",
-        items: [
-          {
-            name: "methods",
-            type: "data-source-methods",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "事件配置",
-        items: [
-          {
-            name: "events",
-            src: "datasource",
-            type: "event-select"
-          }
-        ]
-      },
-      {
-        title: "mock数据",
-        items: [
-          {
-            name: "mocks",
-            type: "data-source-mocks",
-            defaultValue: () => []
-          }
-        ]
-      },
-      {
-        title: "请求参数裁剪",
-        display: (formState, { model }) => model.type === "http",
-        items: [
-          {
-            name: "beforeRequest",
-            type: "vs-code",
-            parse: true,
-            height: "600px"
-          }
-        ]
-      },
-      {
-        title: "响应数据裁剪",
-        display: (formState, { model }) => model.type === "http",
-        items: [
-          {
-            name: "afterResponse",
-            type: "vs-code",
-            parse: true,
-            height: "600px"
-          }
-        ]
+const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
+const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+  try {
+    let beforeArgs = args;
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = beforeMethod(...beforeArgs) || [];
+      if (isError(beforeArgs))
+        throw beforeArgs;
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
       }
-    ]
-  }
-];
-const getFormConfig = (type, configs) => {
-  switch (type) {
-    case "base":
-      return fillConfig$1([]);
-    case "http":
-      return fillConfig$1(HttpFormConfig);
-    default:
-      return fillConfig$1(configs[type] || []);
+    }
+    let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = afterMethod(returnValue, ...beforeArgs);
+      if (isError(returnValue))
+        throw returnValue;
+    }
+    return returnValue;
+  } catch (error) {
+    throw error;
   }
 };
-const getFormValue = (type, values) => {
-  if (type !== "http") {
-    return values;
-  }
-  return {
-    beforeRequest: `(options, context) => {
-  /**
-   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
-   *
-   * options: HttpOptions
-   *
-   * interface HttpOptions {
-   *  // 请求链接
-   *  url: string;
-   *  // query参数
-   *  params?: Record<string, string>;
-   *  // body数据
-   *  data?: Record<string, any>;
-   *  // 请求头
-   *  headers?: Record<string, string>;
-   *  // 请求方法 GET/POST
-   *  method?: Method;
-   * }
-   *
-   * context：上下文对象
-   *
-   * interface Content {
-   *  app: AppCore;
-   *  dataSource: HttpDataSource;
-   * }
-   *
-   * return: HttpOptions
-   */
-
-  // 此处的返回值会作为这个接口的入参
-  return options;
-}`,
-    afterResponse: `(response, context) => {
-  /**
-   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
-
-    * context：上下文对象
-    *
-    * interface Content {
-    *  app: AppCore;
-    *  dataSource: HttpDataSource;
-    * }
-    *
-    */
-
-  // 此处的返回值会作为这个接口的返回值
-  return response;
-}`,
-    ...values
-  };
-};
-const getDisplayField = (dataSources, key) => {
-  const displayState = [];
-  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
-  let index = 0;
-  for (const match of matches) {
-    if (typeof match.index === "undefined")
-      break;
-    displayState.push({
-      type: "text",
-      value: key.substring(index, match.index)
-    });
-    let dsText = "";
-    let ds;
-    let fields;
-    match[1].split(".").forEach((item, index2) => {
-      if (index2 === 0) {
-        ds = dataSources.find((ds2) => ds2.id === item);
-        dsText += ds?.title || item;
-        fields = ds?.fields;
-        return;
-      }
-      const field = fields?.find((field2) => field2.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
-    });
-    displayState.push({
-      type: "var",
-      value: dsText
-    });
-    index = match.index + match[0].length;
-  }
-  if (index < key.length) {
-    displayState.push({
-      type: "text",
-      value: key.substring(index)
-    });
-  }
-  return displayState;
-};
-const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
-  const child = [];
-  fields.forEach((field) => {
-    if (!dataSourceFieldType.length) {
-      dataSourceFieldType.push("any");
-    }
-    const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
-    const item = {
-      label: field.title || field.name,
-      value: field.name,
-      children
-    };
-    const fieldType = field.type || "any";
-    if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
-      child.push(item);
-      return;
-    }
-    if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
-      return;
-    }
-    if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
-      return;
-    }
-    child.push(item);
-  });
-  return child;
-};
-
-const compose = (middleware, isAsync) => {
-  if (!Array.isArray(middleware))
-    throw new TypeError("Middleware 必须是一个数组!");
-  for (const fn of middleware) {
-    if (typeof fn !== "function")
-      throw new TypeError("Middleware 必须由函数组成!");
-  }
-  return (args, next) => {
-    let index = -1;
-    return dispatch(0);
-    function dispatch(i) {
-      if (i <= index) {
-        const error = new Error("next() 被多次调用");
-        if (isAsync) {
-          return Promise.reject(error);
-        }
-        throw error;
-      }
-      index = i;
-      let fn = middleware[i];
-      if (i === middleware.length && next)
-        fn = next;
-      if (!fn) {
-        if (isAsync) {
-          return Promise.resolve();
-        }
-        return;
-      }
-      if (isAsync) {
-        try {
-          return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
-        } catch (err) {
-          return Promise.reject(err);
-        }
-      }
-      try {
-        return fn(...args, dispatch.bind(null, i + 1));
-      } catch (err) {
-        throw err;
-      }
-    }
-  };
-};
-
-const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
-const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-const doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-  try {
-    let beforeArgs = args;
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = beforeMethod(...beforeArgs) || [];
-      if (isError(beforeArgs))
-        throw beforeArgs;
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
-    }
-    let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = afterMethod(returnValue, ...beforeArgs);
-      if (isError(returnValue))
-        throw returnValue;
-    }
-    return returnValue;
-  } catch (error) {
-    throw error;
-  }
-};
-const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-  try {
-    let beforeArgs = args;
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = await beforeMethod(...beforeArgs) || [];
-      if (isError(beforeArgs))
-        throw beforeArgs;
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
-    }
-    let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(returnValue, ...beforeArgs);
-      if (isError(returnValue))
-        throw returnValue;
-    }
-    return returnValue;
-  } catch (error) {
-    throw error;
+const doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+  try {
+    let beforeArgs = args;
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = await beforeMethod(...beforeArgs) || [];
+      if (isError(beforeArgs))
+        throw beforeArgs;
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
+      }
+    }
+    let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
+      if (isError(returnValue))
+        throw returnValue;
+    }
+    return returnValue;
+  } catch (error) {
+    throw error;
   }
 };
 class BaseService extends EventEmitter {
@@ -962,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()
+}
+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 }))
+    ]);
+  }
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit("props-configs-change");
+  }
+  async fillConfig(config, labelWidth) {
+    return fillConfig(config, typeof labelWidth !== "function" ? labelWidth : "80px");
+  }
+  async setPropsConfig(type, config) {
+    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+  }
+  /**
+   * 获取指点类型的组件属性表单配置
+   * @param type 组件类型
+   * @returns 组件属性表单配置
+   */
+  async getPropsConfig(type) {
+    if (type === "area") {
+      return await this.getPropsConfig("button");
+    }
+    return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
+  }
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  async setPropsValue(type, value) {
+    this.state.propsValueMap[toLine(type)] = value;
+  }
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  async getPropsValue(componentType, { inputEvent, ...defaultValue } = {}) {
+    const type = toLine(componentType);
+    if (type === "area") {
+      const value = await this.getPropsValue("button");
+      value.className = "action-area";
+      value.text = "";
+      if (value.style) {
+        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+      }
+      return value;
+    }
+    const id = this.createId(type);
+    const defaultPropsValue = this.getDefaultPropsValue(type);
+    const data = this.setNewItemId(
+      cloneDeep({
+        type,
+        ...defaultValue
+      })
+    );
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
     };
-    this.get("dataSources").push(newConfig);
-    this.emit("add", newConfig);
-    return newConfig;
   }
-  update(config) {
-    const dataSources = this.get("dataSources");
-    const index = dataSources.findIndex((ds) => ds.id === config.id);
-    dataSources[index] = cloneDeep(config);
-    this.emit("update", config);
+  createId(type) {
+    return `${type}_${guid()}`;
+  }
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
+   * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  setNewItemId(config, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = this.createId(config.type || "component");
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        this.setNewItemId(item);
+      }
+    }
     return config;
   }
-  remove(id) {
-    const dataSources = this.get("dataSources");
-    const index = dataSources.findIndex((ds) => ds.id === id);
-    dataSources.splice(index, 1);
-    this.emit("remove", id);
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  getDefaultPropsValue(type) {
+    return ["page", "container"].includes(type) ? {
+      type,
+      layout: "absolute",
+      style: {},
+      name: type,
+      items: []
+    } : {
+      type,
+      style: {},
+      name: type
+    };
   }
-  createId() {
-    return `ds_${guid()}`;
+  resetState() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
   }
-  getDataSourceById(id) {
-    return this.get("dataSources").find((ds) => ds.id === id);
+  /**
+   * 替换关联ID
+   * @param originConfigs 原组件配置
+   * @param targetConfigs 待替换的组件配置
+   */
+  replaceRelateId(originConfigs, targetConfigs) {
+    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);
+      }
+    });
   }
-  resetState() {
-    this.set("dataSources", []);
+  /**
+   * 清除setNewItemId前后映射关系
+   */
+  clearRelateId() {
+    this.state.relateIdMap = {};
   }
   destroy() {
-    this.removeAllListeners();
     this.resetState();
+    this.removeAllListeners();
     this.removeAllPlugins();
   }
   usePlugin(options) {
     super.usePlugin(options);
   }
+  /**
+   * 获取setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @returns 新旧ID映射
+   */
+  getRelateIdMap() {
+    return this.state.relateIdMap;
+  }
+  /**
+   * 记录setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @param newId 分配的新ID
+   */
+  setRelateId(oldId, newId) {
+    this.state.relateIdMap[oldId] = newId;
+  }
 }
-const dataSourceService = new DataSource();
+const 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;
     }
-  ]
+  }
+  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;
+  }
+  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 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 }
-    ]
+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;
+    }
   }
-];
-
-const log = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.log("magic editor: ", ...args);
+  /**
+   * 获取指定索引位置的key
+   */
+  key(index) {
+    const storage = this.getStorage();
+    return storage.key(index);
   }
-};
-const info = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.info("magic editor: ", ...args);
+  /**
+   * 移除存储项，支持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";
@@ -1614,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 [];
@@ -1800,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 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 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 depService = new Dep();
+  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$5 = {
+const canUsePluginMethods$4 = {
   async: [
-    "setPropsConfig",
-    "getPropsConfig",
-    "setPropsValue",
-    "getPropsValue",
-    "fillConfig",
-    "getDefaultPropsValue"
+    "getLayout",
+    "highlight",
+    "select",
+    "multiSelect",
+    "doAdd",
+    "add",
+    "doRemove",
+    "remove",
+    "doUpdate",
+    "update",
+    "sort",
+    "copy",
+    "paste",
+    "doPaste",
+    "doAlignCenter",
+    "alignCenter",
+    "moveLayer",
+    "moveToContainer",
+    "dragTo",
+    "undo",
+    "redo",
+    "move"
   ],
-  sync: ["createId", "setNewItemId"]
+  sync: []
 };
-class Props extends BaseService {
+class Editor extends BaseService {
   state = reactive({
-    propsConfigMap: {},
-    propsValueMap: {},
-    relateIdMap: {}
+    root: null,
+    page: null,
+    parent: null,
+    node: null,
+    nodes: [],
+    stage: null,
+    stageLoading: true,
+    highlightNode: null,
+    modifiedNodeIds: /* @__PURE__ */ new Map(),
+    pageLength: 0,
+    pageFragmentLength: 0,
+    disabledMultiSelect: false
   });
+  isHistoryStateChange = false;
   constructor() {
-    super([
-      ...canUsePluginMethods$5.async.map((methodName) => ({ name: methodName, isAsync: true })),
-      ...canUsePluginMethods$5.sync.map((methodName) => ({ name: methodName, isAsync: false }))
-    ]);
-  }
-  setPropsConfigs(configs) {
-    Object.keys(configs).forEach((type) => {
-      this.setPropsConfig(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]);
+    super(
+      canUsePluginMethods$4.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+      ["select", "update", "moveLayer"]
+    );
   }
   /**
-   * 获取指点类型的组件属性表单配置
-   * @param type 组件类型
-   * @returns 组件属性表单配置
+   * 设置当前指点节点配置
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
+   * @param value MNode
    */
-  async getPropsConfig(type) {
-    if (type === "area") {
-      return await this.getPropsConfig("button");
+  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);
     }
-    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 组件初始值
+   * 获取当前指点节点配置
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
+   * @returns MNode
    */
-  async setPropsValue(type, value) {
-    this.state.propsValueMap[toLine(type)] = value;
+  get(name) {
+    return this.state[name];
   }
   /**
-   * 获取指定类型的组件初始值
-   * @param type 组件类型
-   * @returns 组件初始值
+   * 根据id获取组件、组件的父组件以及组件所属的页面节点
+   * @param {number | string} id 组件id
+   * @param {boolean} raw 是否使用toRaw
+   * @returns {EditorNodeInfo}
    */
-  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;
+  getNodeInfo(id, raw = true) {
+    let root = this.get("root");
+    if (raw) {
+      root = toRaw(root);
     }
-    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)
+    const info = {
+      node: null,
+      parent: null,
+      page: null
     };
-  }
-  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 (!root)
+      return info;
+    if (id === root.id) {
+      info.node = root;
+      return info;
     }
-    if (config.items && Array.isArray(config.items)) {
-      for (const item of config.items) {
-        this.setNewItemId(item);
+    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;
       }
-    }
-    return config;
+    });
+    return info;
   }
   /**
-   * 获取默认属性配置
-   * @param type 组件类型
-   * @returns Object
+   * 根据ID获取指点节点配置
+   * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
+   * @returns 组件节点配置
    */
-  getDefaultPropsValue(type) {
-    return ["page", "container"].includes(type) ? {
-      type,
-      layout: "absolute",
-      style: {},
-      name: type,
-      items: []
-    } : {
-      type,
-      style: {},
-      name: type
-    };
+  getNodeById(id, raw = true) {
+    const { node } = this.getNodeInfo(id, raw);
+    return node;
   }
-  resetState() {
-    this.state.propsConfigMap = {};
-    this.state.propsValueMap = {};
+  /**
+   * 根据ID获取指点节点的父节点配置
+   * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
+   * @returns 指点组件的父节点配置
+   */
+  getParentById(id, raw = true) {
+    const { parent } = this.getNodeInfo(id, raw);
+    return parent;
   }
   /**
-   * 替换关联ID
-   * @param originConfigs 原组件配置
-   * @param targetConfigs 待替换的组件配置
+   * 只有容器拥有布局
    */
-  replaceRelateId(originConfigs, targetConfigs) {
-    const relateIdMap = this.getRelateIdMap();
-    if (Object.keys(relateIdMap).length === 0)
-      return;
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target)
-      return;
-    originConfigs.forEach((config) => {
-      const newId = relateIdMap[config.id];
-      const targetConfig = targetConfigs.find((targetConfig2) => targetConfig2.id === newId);
-      if (!targetConfig)
-        return;
-      target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = getValueByKeyPath(fullKey, config);
-        const relateTargetId = relateIdMap[relateOriginId];
-        if (!relateTargetId)
-          return;
-        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
-      });
-    });
+  async getLayout(parent, node) {
+    if (node && typeof node !== "function" && isFixed(node))
+      return Layout.FIXED;
+    if (parent.layout) {
+      return parent.layout;
+    }
+    if (!parent.style?.position) {
+      return Layout.RELATIVE;
+    }
+    return Layout.ABSOLUTE;
   }
   /**
-   * 清除setNewItemId前后映射关系
+   * 选中指定节点（将指定节点设置成当前选中状态）
+   * @param config 指定节点配置或者ID
+   * @returns 当前选中的节点配置
    */
-  clearRelateId() {
-    this.state.relateIdMap = {};
+  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;
   }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
+  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;
   }
-  usePlugin(options) {
-    super.usePlugin(options);
+  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;
   }
   /**
-   * 获取setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @returns 新旧ID映射
+   * 高亮指定节点
+   * @param config 指定节点配置或者ID
+   * @returns 当前高亮的节点配置
    */
-  getRelateIdMap() {
-    return this.state.relateIdMap;
+  highlight(config) {
+    const { node } = this.selectedConfigExceptionHandler(config);
+    const currentHighlightNode = this.get("highlightNode");
+    if (currentHighlightNode === node)
+      return;
+    this.set("highlightNode", node);
   }
   /**
-   * 记录setNewItemId前后映射关系
-   * @param oldId 原组件ID
-   * @param newId 分配的新ID
+   * 多选
+   * @param ids 指定节点ID
+   * @returns 加入多选的节点配置
    */
-  setRelateId(oldId, newId) {
-    this.state.relateIdMap[oldId] = newId;
+  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);
   }
-}
-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;
+  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);
   }
-  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;
+  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;
   }
-  canUndo() {
-    return this.listCursor > 1;
+  /**
+   * 向指点容器添加组件节点
+   * @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)) });
+    } 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];
   }
-  // 返回undo后的当前元素
-  undo() {
-    if (!this.canUndo()) {
-      return null;
+  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();
     }
-    this.listCursor -= 1;
-    return this.getCurrentElement();
   }
-  canRedo() {
-    return this.elementList.length > this.listCursor;
+  /**
+   * 删除组件
+   * @param {Object} node
+   */
+  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);
   }
-  // 返回redo后的当前元素
-  redo() {
-    if (!this.canRedo()) {
-      return null;
+  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;
     }
-    this.listCursor += 1;
-    return this.getCurrentElement();
+    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;
   }
-  getCurrentElement() {
-    if (this.listCursor < 1) {
-      return null;
+  /**
+   * 更新节点
+   * @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();
     }
-    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);
+    this.emit("update", newNodes);
+    return Array.isArray(config) ? newNodes : newNodes[0];
   }
-  reset() {
-    this.state.pageSteps = {};
-    this.resetPage();
+  /**
+   * 将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();
   }
-  resetPage() {
-    this.state.pageId = void 0;
-    this.state.canRedo = false;
-    this.state.canUndo = false;
+  /**
+   * 将组件节点配置存储到localStorage中
+   * @param config 组件节点配置
+   * @returns
+   */
+  copy(config) {
+    storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+      protocol: Protocol.OBJECT
+    });
   }
-  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
+  /**
+   * 复制时会带上组件关联的依赖
+   * @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
+    );
+    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);
+            }
+          }
+        });
       });
-      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$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 })));
+    storageService.setItem(COPY_STORAGE_KEY, copyNodes, {
+      protocol: Protocol.OBJECT
+    });
   }
   /**
-   * 获取数据存储对象，可以通过
-   * const storageService = new StorageService();
-   * storageService.usePlugin({
-   *    // 替换存储对象为 sessionStorage
-   *    async afterGetStorage(): Promise<Storage> {
-   *      return window.sessionStorage;
-   *    },
-   * });
+   * 从localStorage中获取节点，然后添加到当前容器中
+   * @param position 粘贴的坐标
+   * @returns 添加后的组件节点配置
    */
-  getStorage() {
-    return this.storage;
+  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);
   }
-  getNamespace() {
-    return this.namespace;
+  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 = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
+        node.style.right = "";
+      }
+    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
+      node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = "";
+    }
+    return node;
   }
   /**
-   * 清理，支持storageService.usePlugin
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
    */
-  clear() {
-    const storage = this.getStorage();
-    storage.clear();
+  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;
   }
   /**
-   * 获取存储项，支持storageService.usePlugin
+   * 移动当前选中节点位置
+   * @param offset 偏移量
    */
-  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 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);
   }
   /**
-   * 获取指定索引位置的key
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
    */
-  key(index) {
-    const storage = this.getStorage();
-    return storage.key(index);
+  async moveToContainer(config, targetId) {
+    const root = this.get("root");
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false);
+    const stage = this.get("stage");
+    if (root && node && parent && stage) {
+      const index = getNodeIndex(node.id, parent);
+      parent.items?.splice(index, 1);
+      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
+      const layout = await this.getLayout(target);
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
+      target.items.push(newConfig);
+      await stage.select(targetId);
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+      return newConfig;
+    }
+  }
+  async dragTo(config, targetParent, targetIndex) {
+    if (!targetParent || !Array.isArray(targetParent.items))
+      return;
+    const { parent, node: curNode } = this.getNodeInfo(config.id, false);
+    if (!parent || !curNode)
+      throw new Error("找不要删除的节点");
+    const index = getNodeIndex(curNode.id, parent);
+    if (typeof index !== "number" || index === -1)
+      throw new Error("找不要删除的节点");
+    if (parent.id === targetParent.id) {
+      if (index === targetIndex)
+        return;
+      if (index < targetIndex) {
+        targetIndex -= 1;
+      }
+    }
+    const layout = await this.getLayout(parent);
+    const newLayout = await this.getLayout(targetParent);
+    if (newLayout !== layout) {
+      setLayout(config, newLayout);
+    }
+    parent.items?.splice(index, 1);
+    targetParent.items?.splice(targetIndex, 0, config);
+    const page = this.get("page");
+    const root = this.get("root");
+    const stage = this.get("stage");
+    if (stage && page && root) {
+      stage.update({
+        config: cloneDeep(page),
+        parentId: root.id,
+        root: cloneDeep(root)
+      });
+    }
+    this.addModifiedNodeId(config.id);
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
+    this.emit("drag-to", { index, targetIndex, config, parent, targetParent });
   }
   /**
-   * 移除存储项，支持storageService.usePlugin
+   * 撤销当前操作
+   * @returns 上一次数据
    */
-  removeItem(key, options = {}) {
-    const storage = this.getStorage();
-    const namespace = this.getNamespace();
-    storage.removeItem(`${options.namespace || namespace}:${key}`);
+  async undo() {
+    const value = historyService.undo();
+    await this.changeHistoryState(value);
+    return value;
   }
   /**
-   * 设置存储项，支持storageService.usePlugin
+   * 恢复到下一步
+   * @returns 下一步数据
    */
-  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)}`;
+  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: ""
+        });
+      }
     }
-    storage.setItem(`${options.namespace || namespace}:${key}`, item);
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: ""
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: ""
+        });
+      }
+    }
+  }
+  resetState() {
+    this.set("root", null);
+    this.set("node", null);
+    this.set("nodes", []);
+    this.set("page", null);
+    this.set("parent", null);
+    this.set("stage", null);
+    this.set("highlightNode", null);
+    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
+    this.set("pageLength", 0);
   }
   destroy() {
     this.removeAllListeners();
+    this.resetState();
     this.removeAllPlugins();
   }
+  resetModifiedNodeId() {
+    this.get("modifiedNodeIds").clear();
+  }
   usePlugin(options) {
     super.usePlugin(options);
   }
-  getValueAndProtocol(value) {
-    let protocol = "";
-    if (value === null) {
-      return {
-        item: value,
-        protocol
-      };
+  addModifiedNodeId(id) {
+    if (!this.isHistoryStateChange) {
+      this.get("modifiedNodeIds").set(id, id);
+    }
+  }
+  pushHistoryState() {
+    const curNode = cloneDeep(toRaw(this.get("node")));
+    const page = this.get("page");
+    if (!this.isHistoryStateChange && curNode && page) {
+      historyService.push({
+        data: cloneDeep(toRaw(page)),
+        modifiedNodeIds: this.get("modifiedNodeIds"),
+        nodeId: curNode.id
+      });
+    }
+    this.isHistoryStateChange = false;
+  }
+  async changeHistoryState(value) {
+    if (!value)
+      return;
+    this.isHistoryStateChange = true;
+    await this.update(value.data);
+    this.set("modifiedNodeIds", value.modifiedNodeIds);
+    setTimeout(async () => {
+      if (!value.nodeId)
+        return;
+      await this.select(value.nodeId);
+      this.get("stage")?.select(value.nodeId);
+    }, 0);
+    this.emit("history-change", value.data);
+  }
+  async toggleFixedPosition(dist, src, root) {
+    const newConfig = cloneDeep(dist);
+    if (!isPop(src) && newConfig.style?.position) {
+      if (isFixed(newConfig) && !isFixed(src)) {
+        newConfig.style = change2Fixed(newConfig, root);
+      } else if (!isFixed(newConfig) && isFixed(src)) {
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
+      }
+    }
+    return newConfig;
+  }
+  selectedConfigExceptionHandler(config) {
+    let id;
+    if (typeof config === "string" || typeof config === "number") {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error("没有ID，无法选中");
+    }
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node)
+      throw new Error("获取不到组件信息");
+    if (node.id === this.state.root?.id) {
+      throw new Error("不能选根节点");
     }
-    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-      protocol = $1;
-      return $3;
-    });
     return {
-      protocol,
-      item
+      node,
+      parent,
+      page
     };
   }
 }
-const storageService = new WebStorage();
+const editorService = new Editor();
 
-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"]
-    );
-  }
-  /**
-   * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
-   * @param value MNode
-   */
-  set(name, value) {
-    const preValue = this.state[name];
-    this.state[name] = value;
-    if (name === "nodes" && Array.isArray(value)) {
-      this.set("node", value[0]);
+function BaseFormConfig() {
+  return [
+    {
+      name: "id",
+      type: "hidden"
+    },
+    {
+      name: "type",
+      text: "类型",
+      type: "hidden",
+      defaultValue: "base"
+    },
+    {
+      name: "title",
+      text: "名称",
+      rules: [
+        {
+          required: true,
+          message: "请输入名称"
+        }
+      ]
+    },
+    {
+      name: "description",
+      text: "描述"
     }
-    if (name === "root") {
-      if (Array.isArray(value)) {
-        throw new Error("root 不能为数组");
+  ];
+}
+
+const HttpFormConfig = [
+  {
+    name: "autoFetch",
+    text: "自动请求",
+    type: "switch",
+    defaultValue: true
+  },
+  {
+    name: "responseOptions",
+    items: [
+      {
+        name: "dataPath",
+        text: "数据路径"
       }
-      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;
+    ]
+  },
+  {
+    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"
+          }
+        ]
       }
-      this.emit("root-change", value, preValue);
-    }
+    ]
   }
-  /**
-   * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
-   * @returns MNode
-   */
-  get(name) {
-    return this.state[name];
+];
+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) => {
   /**
-   * 根据id获取组件、组件的父组件以及组件所属的页面节点
-   * @param {number | string} id 组件id
-   * @param {boolean} raw 是否使用toRaw
-   * @returns {EditorNodeInfo}
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * 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
    */
-  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 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}`;
     });
-    return info;
-  }
-  /**
-   * 根据ID获取指点节点配置
-   * @param id 组件ID
-   * @param {boolean} raw 是否使用toRaw
-   * @returns 组件节点配置
-   */
-  getNodeById(id, raw = true) {
-    const { node } = this.getNodeInfo(id, raw);
-    return node;
+    displayState.push({
+      type: "var",
+      value: dsText
+    });
+    index = match.index + match[0].length;
   }
-  /**
-   * 根据ID获取指点节点的父节点配置
-   * @param id 组件ID
-   * @param {boolean} raw 是否使用toRaw
-   * @returns 指点组件的父节点配置
-   */
-  getParentById(id, raw = true) {
-    const { parent } = this.getNodeInfo(id, raw);
-    return parent;
+  if (index < key.length) {
+    displayState.push({
+      type: "text",
+      value: key.substring(index)
+    });
   }
-  /**
-   * 只有容器拥有布局
-   */
-  async getLayout(parent, node) {
-    if (node && typeof node !== "function" && isFixed(node))
-      return Layout.FIXED;
-    if (parent.layout) {
-      return parent.layout;
+  return displayState;
+};
+const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
+  const child = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push("any");
     }
-    if (!parent.style?.position) {
-      return Layout.RELATIVE;
+    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;
     }
-    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();
+    if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
+      return;
     }
-    if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
-        "editor:select",
-        {
-          node,
-          page,
-          parent
-        },
-        getNodePath(node.id, this.get("root")?.items)
-      );
+    if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+      return;
     }
-    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;
+    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 })));
   }
-  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;
+  set(name, value) {
+    this.state[name] = value;
   }
-  /**
-   * 高亮指定节点
-   * @param config 指定节点配置或者ID
-   * @returns 当前高亮的节点配置
-   */
-  highlight(config) {
-    const { node } = this.selectedConfigExceptionHandler(config);
-    const currentHighlightNode = this.get("highlightNode");
-    if (currentHighlightNode === node)
-      return;
-    this.set("highlightNode", node);
+  get(name) {
+    return this.state[name];
   }
-  /**
-   * 多选
-   * @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);
+  getFormConfig(type = "base") {
+    return getFormConfig(toLine(type), this.get("configs"));
   }
-  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);
+  setFormConfig(type, config) {
+    this.get("configs")[toLine(type)] = config;
   }
-  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;
+  getFormValue(type = "base") {
+    return getFormValue(toLine(type), this.get("values")[type]);
   }
-  /**
-   * 向指点容器添加组件节点
-   * @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)) });
-    } 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];
+  setFormValue(type, value) {
+    this.get("values")[toLine(type)] = value;
   }
-  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();
-    }
+  getFormEvent(type = "base") {
+    return this.get("events")[toLine(type)] || [];
   }
-  /**
-   * 删除组件
-   * @param {Object} node
-   */
-  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);
+  setFormEvent(type, value = []) {
+    this.get("events")[toLine(type)] = value;
   }
-  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);
+  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;
   }
-  /**
-   * 将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();
+  remove(id) {
+    const dataSources = this.get("dataSources");
+    const index = dataSources.findIndex((ds) => ds.id === id);
+    dataSources.splice(index, 1);
+    this.emit("remove", id);
   }
-  /**
-   * 将组件节点配置存储到localStorage中
-   * @param config 组件节点配置
-   * @returns
-   */
-  copy(config) {
-    storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
-      protocol: Protocol.OBJECT
-    });
+  createId() {
+    return `ds_${guid()}`;
+  }
+  getDataSourceById(id) {
+    return this.get("dataSources").find((ds) => ds.id === id);
+  }
+  resetState() {
+    this.set("dataSources", []);
+  }
+  destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
+  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 = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
-        node.style.right = "";
-      }
-    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
-      node.style.left = (parent.style.width - node.style.width) / 2;
-      node.style.right = "";
-    }
-    return node;
-  }
-  /**
-   * 将指点节点设置居中
-   * @param config 组件节点配置
-   * @returns 当前组件节点配置
-   */
-  async alignCenter(config) {
-    const nodes = Array.isArray(config) ? config : [config];
-    const stage = this.get("stage");
-    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
-    const newNode = await this.update(newNodes);
-    if (newNodes.length > 1) {
-      await stage?.multiSelect(newNodes.map((node) => node.id));
-    } else {
-      await stage?.select(newNodes[0].id);
-    }
-    return newNode;
-  }
-  /**
-   * 移动当前选中节点位置
-   * @param offset 偏移量
-   */
-  async moveLayer(offset) {
-    const root = this.get("root");
-    if (!root)
-      throw new Error("root为空");
-    const parent = this.get("parent");
-    if (!parent)
-      throw new Error("父节点为空");
-    const node = this.get("node");
-    if (!node)
-      throw new Error("当前节点为空");
-    const brothers = parent.items || [];
-    const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
-    const layout = await this.getLayout(parent, node);
-    const isRelative = layout === Layout.RELATIVE;
-    let offsetIndex;
-    if (offset === LayerOffset.TOP) {
-      offsetIndex = isRelative ? 0 : brothers.length;
-    } else if (offset === LayerOffset.BOTTOM) {
-      offsetIndex = isRelative ? brothers.length : 0;
-    } else {
-      offsetIndex = index + (isRelative ? -offset : offset);
-    }
-    if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) {
-      return;
-    }
-    brothers.splice(index, 1);
-    brothers.splice(offsetIndex, 0, node);
-    const grandparent = this.getParentById(parent.id);
-    this.get("stage")?.update({
-      config: cloneDeep(toRaw(parent)),
-      parentId: grandparent?.id,
-      root: cloneDeep(root)
-    });
-    this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
-    this.emit("move-layer", offset);
-  }
-  /**
-   * 移动到指定容器中
-   * @param config 需要移动的节点
-   * @param targetId 容器ID
-   */
-  async moveToContainer(config, targetId) {
-    const root = this.get("root");
-    const { node, parent } = this.getNodeInfo(config.id, false);
-    const target = this.getNodeById(targetId, false);
-    const stage = this.get("stage");
-    if (root && node && parent && stage) {
-      const index = getNodeIndex(node.id, parent);
-      parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
-      const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
-        if (Array.isArray(srcValue)) {
-          return srcValue;
+          ]
+        },
+        {
+          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({
@@ -3604,7 +3656,6 @@ const useCodeBlockEdit = (codeBlockService) => {
     if (!codeId.value)
       return;
     await codeBlockService?.setCodeDslById(codeId.value, values);
-    tMagicMessage.success("代码块保存成功");
     codeBlockEditor.value?.hide();
   };
   return {
@@ -3806,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,
@@ -10734,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({
@@ -10745,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数据源
@@ -10785,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] = {
@@ -10907,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;
@@ -11248,6 +11359,7 @@ class StageOverlay extends BaseService {
   createStage(stageOptions = {}) {
     return useStage({
       ...stageOptions,
+      zoom: 1,
       runtimeUrl: "",
       autoScrollIntoView: false,
       render: async (stage) => {
@@ -11677,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);
@@ -11728,6 +11850,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     codeOptions: {},
     disabledDragStart: { type: Boolean },
     collectorOptions: {},
+    collectorOptionsForCode: {},
+    collectorOptionsForDataSource: {},
     guidesOptions: {},
     disabledMultiSelect: { type: Boolean },
     disabledPageFragment: { type: Boolean },
@@ -11933,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, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, _sfc_main$N as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };