starfish-editor-custom 1.0.0

package/dist/main.js

@@ -0,0 +1,3319 @@
+import { reactive, toRaw, defineComponent, defineAsyncComponent, computed, ref, watch, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createVNode, createTextVNode, createElementBlock, Fragment, renderList, toDisplayString, inject, Transition, withDirectives, vShow, getCurrentInstance, createCommentVNode, resolveDynamicComponent, nextTick, normalizeStyle, renderSlot, withModifiers, mergeProps, onMounted, onUnmounted, createStaticVNode, provide, createSlots } from "vue";
+import "element-plus/dist/index.css";
+import "jsoneditor/dist/jsoneditor.min.css";
+import StarfishForm, { Dynamicform } from "starfish-form";
+import mitt from "mitt";
+import { ElNotification } from "element-plus";
+import { nanoid } from "nanoid";
+import "starfish-form/dist/style.css";
+import { ElMessage, ElButton, ElFooter, ElLoadingDirective, ElNotification as ElNotification$1, ElFormItem, ElForm, ElEmpty, ElScrollbar, ElTabPane, ElTabs, ElInput, ElTooltip, ElTree, ElDrawer, ElUpload } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/footer/style/css";
+import "element-plus/es/components/button/style/css";
+import Clipboard from "clipboard";
+import "element-plus/es/components/message/style/css";
+import "element-plus/es/components/tabs/style/css";
+import "element-plus/es/components/tab-pane/style/css";
+import "element-plus/es/components/scrollbar/style/css";
+import "element-plus/es/components/empty/style/css";
+import "element-plus/es/components/form/style/css";
+import "element-plus/es/components/form-item/style/css";
+import "element-plus/es/components/loading/style/css";
+import "element-plus/es/components/notification/style/css";
+import "element-plus/es/components/input/style/css";
+import "element-plus/es/components/upload/style/css";
+import "element-plus/es/components/drawer/style/css";
+import "element-plus/es/components/tree/style/css";
+import "element-plus/es/components/tooltip/style/css";
+import Gesto from "gesto";
+import KeyController from "keycon";
+var index = "";
+var vm = mitt();
+const state$4 = reactive({
+  historyList: [],
+  index: -1,
+  maxStep: 20,
+  historyFlag: false
+});
+class History {
+  setValue(value) {
+    state$4.historyList.push(value);
+    if (state$4.historyList.length > state$4.maxStep) {
+      state$4.historyList = state$4.historyList.slice(state$4.historyList.length - state$4.maxStep);
+    }
+    state$4.index = state$4.historyList.length - 1;
+  }
+  back() {
+    if (state$4.index == -1)
+      return;
+    state$4.index -= 1;
+    if (state$4.index > -1) {
+      state$4.historyFlag = true;
+      formStore == null ? void 0 : formStore.set("allFormList", state$4.historyList[state$4.index].allFormList);
+      formStore == null ? void 0 : formStore.set("currentIndex", state$4.historyList[state$4.index].currentIndex);
+      formStore == null ? void 0 : formStore.set("curControl", state$4.historyList[state$4.index].curControl);
+      formStore == null ? void 0 : formStore.set("currentId", state$4.historyList[state$4.index].currentId);
+    } else {
+      state$4.historyFlag = true;
+      formStore == null ? void 0 : formStore.set("allFormList", []);
+      formStore == null ? void 0 : formStore.set("currentIndex", -1);
+      formStore == null ? void 0 : formStore.set("curControl", {});
+      formStore == null ? void 0 : formStore.set("currentId", "");
+    }
+  }
+  go() {
+    if (state$4.index >= state$4.historyList.length - 1) {
+      return;
+    }
+    state$4.index += 1;
+    state$4.historyFlag = true;
+    formStore == null ? void 0 : formStore.set("allFormList", state$4.historyList[state$4.index].allFormList);
+    formStore == null ? void 0 : formStore.set("currentIndex", state$4.historyList[state$4.index].currentIndex);
+    formStore == null ? void 0 : formStore.set("curControl", state$4.historyList[state$4.index].curControl);
+  }
+  get(name) {
+    return state$4[name];
+  }
+  set(name, value) {
+    state$4[name] = value;
+  }
+}
+var hisContrl = new History();
+const state$3 = reactive({
+  allFormList: [],
+  curControl: {},
+  currentIndex: -1,
+  currentId: "",
+  preview: false,
+  previewShow: false,
+  save: true,
+  formUpdate: false,
+  AllFormResult: [],
+  formResult: {},
+  globalDatas: {},
+  globalFormList: []
+});
+class Form {
+  updateAllFormList(allFormList) {
+    console.log("allForm", allFormList);
+    state$3.allFormList = allFormList;
+    if (state$3.currentIndex != -1) {
+      state$3.curControl = allFormList[state$3.currentIndex];
+    }
+  }
+  setHistory() {
+    hisContrl == null ? void 0 : hisContrl.setValue({
+      allFormList: window.VueContext.$Flex.deepClone(state$3.allFormList),
+      currentIndex: state$3.currentIndex,
+      currentId: state$3.currentId,
+      curControl: window.VueContext.$Flex.deepClone(state$3.allFormList[state$3.currentIndex])
+    });
+  }
+  setFormCurrentIndex(index2) {
+    state$3.currentIndex = index2;
+  }
+  setFormCurrentId(id) {
+    state$3.currentId = id;
+    if (id) {
+      const result2 = this.getCurrentItem(id);
+      state$3.curControl = result2 || {};
+    } else {
+      state$3.curControl = {};
+    }
+  }
+  getCurrentItem(id) {
+    let result2;
+    state$3.allFormList.find((item) => {
+      if (item.id == id) {
+        result2 = item;
+        return item;
+      } else if (item.layout) {
+        const res = this.getLayoutCurCtrol(item, id);
+        if (res) {
+          result2 = res;
+          return item;
+        }
+      }
+    });
+    return result2;
+  }
+  getLayoutCurCtrol(item, id) {
+    let result2;
+    if (item.ControlType == "TableLayout") {
+      const trs = item.data.trs;
+      if (trs && trs.length > 0) {
+        trs.find((trItem) => {
+          return trItem.tds.find((tdItem) => {
+            return tdItem.list.find((listItem) => {
+              if (listItem.layout) {
+                if (listItem.id == id) {
+                  result2 = listItem;
+                } else {
+                  result2 = this.getLayoutCurCtrol(listItem, id);
+                }
+                return result2;
+              } else if (listItem.id == id) {
+                result2 = listItem;
+                return result2;
+              }
+            });
+          });
+        });
+      }
+    } else if (item.ControlType == "Grid") {
+      const columns = item.data.columns;
+      if (columns && columns.length > 0) {
+        columns.find((colItem) => {
+          return colItem.list.find((listItem) => {
+            if (listItem.layout) {
+              if (listItem.id == id) {
+                result2 = listItem;
+              } else {
+                result2 = this.getLayoutCurCtrol(listItem, id);
+              }
+              return result2;
+            } else if (listItem.id == id) {
+              result2 = listItem;
+              return result2;
+            }
+          });
+        });
+      }
+    } else if (item.ControlType == "Collapse" || item.ControlType == "Tabs") {
+      const items = item.data.items;
+      if (items && items.length > 0) {
+        items.find((colItem) => {
+          return colItem.list.find((listItem) => {
+            if (listItem.layout) {
+              if (listItem.id == id) {
+                result2 = listItem;
+              } else {
+                result2 = this.getLayoutCurCtrol(listItem, id);
+              }
+              return result2;
+            } else if (listItem.id == id) {
+              result2 = listItem;
+              return result2;
+            }
+          });
+        });
+      }
+    }
+    return result2;
+  }
+  handleDynamicForm() {
+    state$3.formResult = this.getDynamicForm(state$3.AllFormResult);
+    console.log("formResult", state$3.formResult);
+  }
+  getDynamicForm(list) {
+    const data = {};
+    list.forEach((item) => {
+      if (item.layout) {
+        if (item.ControlType == "Grid" && item.data.columns) {
+          item.data.columns.forEach((colItem) => {
+            Object.assign(data, this.getDynamicForm(colItem.list));
+          });
+        } else if (item.ControlType == "TableLayout") {
+          const trs = item.data.trs;
+          if (trs && trs.length > 0) {
+            trs.forEach((trItem) => {
+              trItem.tds.forEach((tdItem) => {
+                Object.assign(data, this.getDynamicForm(tdItem.list));
+              });
+            });
+          }
+        } else if (item.ControlType == "Collapse" || item.ControlType == "Tabs") {
+          const items = item.data.items;
+          if (items) {
+            items.forEach((colItem) => {
+              Object.assign(data, this.getDynamicForm(colItem.list));
+            });
+          }
+        }
+      } else if (!item.layout) {
+        if (item.data.itemConfig) {
+          if (typeof item.data.itemConfig.value == "string") {
+            data[item.data.fieldName] = item.data.itemConfig.value;
+          } else {
+            data[item.data.fieldName] = [...item.data.itemConfig.value];
+          }
+        } else {
+          data[item.data.fieldName] = item.data.default;
+        }
+      }
+    });
+    return data;
+  }
+  openPreview(preview) {
+    state$3.preview = preview;
+  }
+  setSave(type) {
+    state$3.save = type;
+  }
+  setFormUpdate(type) {
+    state$3.formUpdate = type;
+  }
+  getControlItems() {
+    return state$3.curControl && state$3.curControl.controlItems;
+  }
+  getAllFormList() {
+    return state$3.allFormList;
+  }
+  setAllFormList(item) {
+    state$3.allFormList.push(item);
+  }
+  set(name, value) {
+    state$3[name] = value;
+  }
+  get(name) {
+    return state$3[name];
+  }
+}
+var formStore = new Form();
+class Flex {
+  constructor() {
+    this.lastClickTime = 0;
+    this.openTanc = false;
+  }
+  clickCountLimit() {
+    let isCanGo = false;
+    if (window.clickCountLimitMock) {
+      return true;
+    }
+    if (!this.lastClickTime) {
+      this.lastClickTime = new Date().getTime();
+      isCanGo = true;
+    } else {
+      const shicha = new Date().getTime() - this.lastClickTime;
+      this.lastClickTime = new Date().getTime();
+      isCanGo = shicha >= 1e3;
+    }
+    if (!isCanGo) {
+      console.log("\u624B\u6B8B\u515A\u70B9\u51FB\u592A\u5FEB\u4E86");
+    }
+    return isCanGo;
+  }
+  generateMixed(size) {
+    return nanoid(size);
+  }
+  controlFormRule(controlItems) {
+    const rules = {};
+    controlItems.forEach((item) => {
+      const rule = [];
+      if (item.data.required) {
+        rule.push({
+          required: true,
+          message: "\u8BF7\u8F93\u5165" + item.data.label,
+          trigger: "blur"
+        });
+        rules[item.data.fieldName] = rule;
+      }
+      if (item.ControlType === "JsonEditor") {
+        rules[item.data.fieldName] = this.getJsonValidate();
+      }
+    });
+    return rules;
+  }
+  deepClone(target) {
+    let result2;
+    if (typeof target === "object") {
+      if (Array.isArray(target)) {
+        result2 = [];
+        for (let i = 0; i < target.length; i++) {
+          if (Object.prototype.hasOwnProperty.call(target, i)) {
+            result2.push(this.deepClone(target[i]));
+          }
+        }
+      } else if (target === null) {
+        result2 = null;
+      } else if (target.constructor === RegExp) {
+        result2 = target;
+      } else {
+        result2 = {};
+        for (const i in target) {
+          if (Object.prototype.hasOwnProperty.call(target, i)) {
+            result2[i] = this.deepClone(target[i]);
+          }
+        }
+      }
+    } else {
+      result2 = target;
+    }
+    return result2;
+  }
+  tryParseJson(json) {
+    try {
+      return JSON.parse(json);
+    } catch (E) {
+      if (json && json.startsWith && json.startsWith('"[')) {
+        return [];
+      }
+      return {};
+    }
+  }
+  open(message, title = "Success", type = "success") {
+    ElNotification({
+      title: title || "Success",
+      message,
+      type
+    });
+  }
+  getJsonValidate() {
+    return this.deepClone([
+      {
+        validator: (rule, value, callback) => {
+          try {
+            JSON.parse(value);
+            callback();
+          } catch (e) {
+            console.error(e);
+            return callback(new Error("\u8BF7\u8F93\u5165\u6B63\u786E\u7684json\u683C\u5F0F"));
+          }
+        },
+        trigger: "blur"
+      }
+    ]);
+  }
+  getDataType(data) {
+    const str = Object.prototype.toString.call(data);
+    const reg = /\[object (.*)\]/;
+    return str.match(reg)[1];
+  }
+  jsonToForm(item) {
+    var _a, _b;
+    if (!item.data || !item.controlItems) {
+      item = this.deepClone(item);
+      const currentComponent = window.VApp.$formcomponents[item.ControlType];
+      item.formConfig = ((_a = window.VApp.$formcomponents[item.ControlType]) == null ? void 0 : _a.formConfig) || {};
+      if (!item.data) {
+        item.data = item.formConfig.data();
+      }
+      if (!item.data.fieldName) {
+        item.data.fieldName = item.ControlType + "_" + this.generateMixed();
+      }
+      if (item.layout) {
+        if (item.ControlType == "Grid" && item.data.columns && item.data.columns.length > 0) {
+          item.data.columns = item.data.columns.map((colItem) => {
+            if (colItem.list && colItem.list.length > 0) {
+              colItem.list = this.jsonToForm(colItem.list);
+            }
+            return colItem;
+          });
+        } else if (item.ControlType == "TableLayout" && item.data.trs && item.data.trs.length > 0) {
+          item.data.trs = item.data.trs.map((trItem) => {
+            trItem.tds.forEach((tdItem) => {
+              if (tdItem.list && tdItem.list.length > 0) {
+                tdItem.list = this.jsonToForm(tdItem.list);
+              }
+              return tdItem;
+            });
+            return trItem;
+          });
+        } else if ((item.ControlType == "Collapse" || item.ControlType == "Tabs") && item.data.items && item.data.items.length > 0) {
+          item.data.items = item.data.items.map((colItem) => {
+            if (colItem.list && colItem.list.length > 0) {
+              colItem.list = this.jsonToForm(colItem.list);
+            }
+            return colItem;
+          });
+        }
+      }
+      const dynamicList = (_b = formStore == null ? void 0 : formStore.get("globalFormList")) == null ? void 0 : _b.filter((item2) => {
+        if (item2.dynamic) {
+          return item2;
+        }
+      });
+      item.id = this.generateMixed();
+      let controlItems = item.formConfig.morenConfig().concat(dynamicList);
+      if (currentComponent.actionType && currentComponent.actionType.length > 0) {
+        console.log(controlItems);
+        controlItems.find((item2) => {
+          if (item2.ControlType == "Action") {
+            item2.data.formConfig = {
+              value: {},
+              items: []
+            };
+            currentComponent.actionType.forEach((action2, index2) => {
+              item2.data.formConfig.items.push({
+                label: action2,
+                value: action2,
+                id: index2 + 1
+              });
+            });
+          }
+        });
+      } else {
+        controlItems = controlItems.filter((item2) => {
+          if (item2.ControlType !== "Action") {
+            return item2;
+          }
+        });
+      }
+      item.rules = this.controlFormRule(controlItems);
+      item.controlItems = controlItems;
+    }
+    return item;
+  }
+  initFormToJson(formlist) {
+    const jsonData = [];
+    formlist.forEach((item) => {
+      if (item.layout) {
+        if (item.ControlType == "Grid" && item.data.columns && item.data.columns.length > 0) {
+          item.data.columns = item.data.columns.map((colItem) => {
+            colItem.list = this.initFormToJson(colItem.list);
+            return colItem;
+          });
+        } else if (item.ControlType == "TableLayout" && item.data.trs && item.data.trs.length > 0) {
+          item.data.trs = item.data.trs.map((trItem) => {
+            trItem.tds.forEach((tdItem) => {
+              if (tdItem.list && tdItem.list.length > 0) {
+                tdItem.list = this.initFormToJson(tdItem.list);
+              }
+              return tdItem;
+            });
+            return trItem;
+          });
+        } else if ((item.ControlType == "Collapse" || item.ControlType == "Tabs") && item.data.items && item.data.items.length > 0) {
+          item.data.items = item.data.items.map((colItem) => {
+            colItem.list = this.initFormToJson(colItem.list);
+            return colItem;
+          });
+        }
+      }
+      const obj = {
+        ControlType: item.ControlType,
+        nameCn: item.nameCn,
+        id: item.id,
+        layout: !!item.layout,
+        data: item.data
+      };
+      jsonData.push(obj);
+    });
+    return jsonData;
+  }
+  funcExec(action, proxy, argus = []) {
+    const actionObj = JSON.parse(action || "{}");
+    const funcStr = actionObj.funcStr;
+    eval(`(function(${this.getField(actionObj.methods)}){${funcStr}}).apply(proxy, argus)`);
+  }
+  getField(methods) {
+    if (methods == "onChange") {
+      return "value, oldValue, subFormData";
+    } else if (["onForce", "onBlur", "onClick"].includes(methods)) {
+      return "field";
+    } else {
+      return "";
+    }
+  }
+  getFormDataList(item, result2 = [], fieldName) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    if (!item.layout) {
+      if (item.data.fieldName != fieldName) {
+        if (item.nameCn == "\u5F00\u5173") {
+          result2.push({
+            value: (_a = item == null ? void 0 : item.data) == null ? void 0 : _a.fieldName,
+            label: ((_b = item == null ? void 0 : item.data) == null ? void 0 : _b.label) + "-" + ((_c = item == null ? void 0 : item.data) == null ? void 0 : _c.fieldName),
+            switch: true
+          });
+          return;
+        }
+        if (item.data.itemConfig) {
+          let multiple = false;
+          if (Array.isArray(item.data.itemConfig.value)) {
+            multiple = true;
+          }
+          const options = item.data.itemConfig.items;
+          result2.push({
+            value: (_d = item == null ? void 0 : item.data) == null ? void 0 : _d.fieldName,
+            label: ((_e = item == null ? void 0 : item.data) == null ? void 0 : _e.label) + "-" + ((_f = item == null ? void 0 : item.data) == null ? void 0 : _f.fieldName),
+            multiple,
+            options
+          });
+          return;
+        }
+        result2.push({
+          value: (_g = item == null ? void 0 : item.data) == null ? void 0 : _g.fieldName,
+          label: ((_h = item == null ? void 0 : item.data) == null ? void 0 : _h.label) + "-" + ((_i = item == null ? void 0 : item.data) == null ? void 0 : _i.fieldName)
+        });
+      }
+    } else {
+      if (item.data.fieldName != fieldName) {
+        result2.push({
+          value: (_j = item == null ? void 0 : item.data) == null ? void 0 : _j.fieldName,
+          label: ((_k = item == null ? void 0 : item.data) == null ? void 0 : _k.label) + "-" + ((_l = item == null ? void 0 : item.data) == null ? void 0 : _l.fieldName)
+        });
+        if (item.ControlType == "Grid" && item.data.columns) {
+          item.data.columns.forEach((colItem) => {
+            colItem.list.forEach((listItem) => {
+              this.getFormDataList(listItem, result2, fieldName);
+            });
+          });
+        } else if (item.ControlType == "TableLayout" && item.data.trs) {
+          item.data.trs.forEach((trItem) => {
+            trItem.tds.forEach((tdItem) => {
+              tdItem.list.forEach((listItem) => {
+                this.getFormDataList(listItem, result2, fieldName);
+              });
+            });
+          });
+        } else if ((item.ControlType == "Collapse" || item.ControlType == "Tabs") && item.data.items) {
+          item.data.items.forEach((colItem) => {
+            colItem.list.forEach((listItem) => {
+              this.getFormDataList(listItem, result2, fieldName);
+            });
+          });
+        }
+      }
+    }
+  }
+}
+var flex = new Flex();
+const DEFAUTL_LEFT_COLUMN_WIDTH = 300;
+const DEFAUTL_RIGHT_COLUMN_WIDTH = 400;
+const defaultColumnWidth = {
+  left: DEFAUTL_LEFT_COLUMN_WIDTH,
+  center: window.document.body.clientWidth - DEFAUTL_LEFT_COLUMN_WIDTH - DEFAUTL_RIGHT_COLUMN_WIDTH,
+  right: DEFAUTL_RIGHT_COLUMN_WIDTH
+};
+const DIALOG_WIDTH = 500;
+const scale = 1;
+const state$2 = reactive({
+  columnWidth: defaultColumnWidth,
+  dialogWidth: DIALOG_WIDTH,
+  scale,
+  isFullscreen: false,
+  pageType: "PC",
+  rightClose: false,
+  leftClose: false
+});
+class Ui {
+  get(name) {
+    return state$2[name];
+  }
+  set(name, value) {
+    if (name === "columnWidth") {
+      this.setColumnWidth(value);
+    } else if (name === "scale") {
+      this.setScale(Number(value));
+    } else if (name == "isFullscreen") {
+      state$2[name] = value;
+      state$2.pageType = "";
+    } else if (name == "pageType") {
+      state$2[name] = value;
+      state$2.isFullscreen = true;
+    } else {
+      state$2[name] = value;
+    }
+  }
+  setScale(size) {
+    const range = [0.2, 1.5];
+    if (size >= range[0] && size <= range[1]) {
+      state$2.scale = size;
+    }
+  }
+  setColumnWidth({ left, center, right }) {
+    const columnWidth = {
+      ...toRaw(this.get("columnWidth"))
+    };
+    if (left && left >= 0) {
+      columnWidth.left = left;
+    } else {
+      columnWidth.left = defaultColumnWidth.left;
+    }
+    if (right != void 0 && right >= 0) {
+      columnWidth.right = right;
+    } else {
+      columnWidth.right = defaultColumnWidth.right;
+    }
+    if (!center || center == "auto") {
+      const bodyWidth = window.document.body.clientWidth;
+      columnWidth.center = bodyWidth - ((columnWidth == null ? void 0 : columnWidth.left) || 0) - ((columnWidth == null ? void 0 : columnWidth.right) || 0);
+      if (columnWidth.center <= 0) {
+        columnWidth.left = defaultColumnWidth.left;
+        columnWidth.center = defaultColumnWidth.center;
+        columnWidth.right = defaultColumnWidth.right;
+      }
+    } else {
+      columnWidth.center = center;
+    }
+    state$2.columnWidth = columnWidth;
+  }
+}
+var uiControl = new Ui();
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$c = defineComponent({
+  components: {
+    Dynamicform,
+    JsonCode: defineAsyncComponent(() => import("./jsonCode.js"))
+  },
+  setup() {
+    const previewShow = computed(() => formStore.get("previewShow"));
+    const allFormList = computed(() => formStore.get("AllFormResult"));
+    const formResult = computed(() => formStore.get("formResult"));
+    const globalDatas = computed(() => formStore == null ? void 0 : formStore.get("globalDatas"));
+    const pageType = computed(() => uiControl == null ? void 0 : uiControl.get("pageType"));
+    const codeDialog = ref();
+    const code = ref();
+    let clipboard;
+    const dynamicform = ref();
+    const previewDialog = ref();
+    const handlePreviewShow = () => {
+      formStore.set("previewShow", false);
+    };
+    watch(previewShow, async () => {
+      if (!previewShow.value) {
+        previewDialog.value.close();
+      } else {
+        previewDialog.value.init("\u8868\u5355\u9884\u89C8", "icon-biaodan");
+        previewDialog.value.show();
+        previewDialog.value.isFullScreen = true;
+      }
+    });
+    const JsonViewerDialog = ref();
+    return {
+      code,
+      pageType,
+      codeDialog,
+      globalDatas,
+      dialogWidth: computed(() => uiControl == null ? void 0 : uiControl.get("dialogWidth")),
+      previewShow,
+      previewDialog,
+      handlePreviewShow,
+      JsonViewerDialog,
+      allFormList,
+      formResult,
+      dynamicform,
+      resetForm() {
+        dynamicform.value.reset();
+      },
+      closeDialog() {
+        previewDialog.value.close();
+      },
+      getData() {
+        var _a;
+        (_a = dynamicform.value) == null ? void 0 : _a.getValidate().then((valide) => {
+          if (valide) {
+            console.log("formResult", formResult.value);
+            code.value = JSON.stringify((formResult == null ? void 0 : formResult.value) || {}, null, 4);
+            codeDialog.value.show();
+            codeDialog.value.init("\u8868\u5355\u6570\u636E", "icon-biaodan");
+          } else {
+            ElMessage({
+              type: "error",
+              message: "\u6821\u9A8C\u5931\u8D25"
+            });
+          }
+        });
+      },
+      closeCodeDialog() {
+        codeDialog.value.close();
+      },
+      copyJson() {
+        if (!clipboard) {
+          clipboard = new Clipboard(".copy_btn");
+        }
+        clipboard.on("success", () => {
+          ElMessage({
+            type: "success",
+            message: "\u590D\u5236\u6210\u529F"
+          });
+        });
+        clipboard.on("error", () => {
+          ElMessage({
+            type: "error",
+            message: "\u590D\u5236\u5931\u8D25"
+          });
+        });
+        setTimeout(() => {
+          clipboard.destroy();
+        }, 2e4);
+      },
+      saveFile(fileName = "demo.json") {
+        let content = "data:application/json;charset=utf-8,";
+        try {
+          const result2 = code.value;
+          content += result2;
+          const encodedUri = encodeURI(content);
+          const actions = document.createElement("a");
+          actions.setAttribute("href", encodedUri);
+          actions.setAttribute("download", fileName);
+          actions.click();
+          ElMessage({
+            type: "success",
+            message: "\u6587\u4EF6\u4FDD\u5B58\u6210\u529F"
+          });
+        } catch (e) {
+          ElMessage({
+            type: "error",
+            message: "\u6587\u4EF6\u4FDD\u5B58\u5931\u8D25"
+          });
+        }
+      }
+    };
+  }
+});
+const _hoisted_1$b = { class: "custom_code" };
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dynamicform = resolveComponent("dynamicform");
+  const _component_el_button = ElButton;
+  const _component_el_footer = ElFooter;
+  const _component_JsonCode = resolveComponent("JsonCode");
+  const _component_custom_dialog = resolveComponent("custom-dialog");
+  const _component_CustomDialog = resolveComponent("CustomDialog");
+  return openBlock(), createBlock(_component_CustomDialog, {
+    ref: "previewDialog",
+    showDialog: _ctx.previewShow,
+    onClose: _ctx.handlePreviewShow,
+    dialogclass: "previewDialog"
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass(["page_box", _ctx.pageType + "_layout"])
+      }, [
+        createVNode(_component_dynamicform, {
+          formResult: _ctx.formResult,
+          allFormList: _ctx.allFormList,
+          globalConfig: _ctx.globalDatas,
+          ref: "dynamicform"
+        }, null, 8, ["formResult", "allFormList", "globalConfig"])
+      ], 2),
+      createVNode(_component_el_footer, {
+        class: "my-Footer",
+        style: { "text-align": "center" }
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_button, {
+            type: "primary",
+            onClick: _ctx.resetForm
+          }, {
+            default: withCtx(() => _cache[1] || (_cache[1] = [
+              createTextVNode("\u91CD\u7F6E\u8868\u5355", -1)
+            ])),
+            _: 1,
+            __: [1]
+          }, 8, ["onClick"]),
+          createVNode(_component_el_button, {
+            type: "primary",
+            onClick: _ctx.getData
+          }, {
+            default: withCtx(() => _cache[2] || (_cache[2] = [
+              createTextVNode("\u83B7\u53D6\u6570\u636E", -1)
+            ])),
+            _: 1,
+            __: [2]
+          }, 8, ["onClick"]),
+          createVNode(_component_el_button, { onClick: _ctx.closeDialog }, {
+            default: withCtx(() => _cache[3] || (_cache[3] = [
+              createTextVNode("\u5173\u95ED", -1)
+            ])),
+            _: 1,
+            __: [3]
+          }, 8, ["onClick"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_custom_dialog, {
+        ref: "codeDialog",
+        dialogclass: "codeDialog",
+        width: "1000"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$b, [
+            createVNode(_component_JsonCode, {
+              value: _ctx.code,
+              "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.code = $event)
+            }, null, 8, ["value"])
+          ]),
+          createVNode(_component_el_footer, {
+            class: "my-Footer",
+            style: { "text-align": "center", "position": "absolute", "bottom": "0", "width": "100%", "display": "flex", "align-items": "center" }
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_button, {
+                type: "primary",
+                onClick: _ctx.copyJson,
+                class: "copy_btn",
+                "data-clipboard-action": "copy",
+                "data-clipboard-text": _ctx.code
+              }, {
+                default: withCtx(() => _cache[4] || (_cache[4] = [
+                  createTextVNode("\u590D\u5236json", -1)
+                ])),
+                _: 1,
+                __: [4]
+              }, 8, ["onClick", "data-clipboard-text"]),
+              createVNode(_component_el_button, {
+                type: "primary",
+                onClick: _ctx.saveFile
+              }, {
+                default: withCtx(() => _cache[5] || (_cache[5] = [
+                  createTextVNode("\u4FDD\u5B58\u4E3A\u6587\u4EF6", -1)
+                ])),
+                _: 1,
+                __: [5]
+              }, 8, ["onClick"]),
+              createVNode(_component_el_button, { onClick: _ctx.closeCodeDialog }, {
+                default: withCtx(() => _cache[6] || (_cache[6] = [
+                  createTextVNode("\u5173\u95ED", -1)
+                ])),
+                _: 1,
+                __: [6]
+              }, 8, ["onClick"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 512)
+    ]),
+    _: 1
+  }, 8, ["showDialog", "onClose"]);
+}
+var __unplugin_components_5 = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
+var FormPreview = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  "default": __unplugin_components_5
+}, Symbol.toStringTag, { value: "Module" }));
+const _sfc_main$b = defineComponent({
+  setup() {
+    const keyList = reactive([
+      {
+        key: "ctrl + C",
+        value: "\u590D\u5236\u7EC4\u4EF6"
+      },
+      {
+        key: "ctrl + V",
+        value: "\u7C98\u8D34\u7EC4\u4EF6"
+      },
+      {
+        key: "ctrl + X",
+        value: "\u88C1\u526A\u7EC4\u4EF6"
+      },
+      {
+        key: "delete",
+        value: "\u5220\u9664\u7EC4\u4EF6"
+      },
+      {
+        key: "ctrl + E",
+        value: "\u6E05\u7A7A\u753B\u5E03"
+      },
+      {
+        key: "ctrl + \u2191",
+        value: "\u7EC4\u4EF6\u4E0A\u79FB"
+      },
+      {
+        key: "ctrl + \u2193",
+        value: "\u7EC4\u4EF6\u4E0B\u79FB"
+      },
+      {
+        key: "\u2191",
+        value: "\u9009\u4E2D\u4E0A\u79FB"
+      },
+      {
+        key: "\u2193",
+        value: "\u9009\u4E2D\u4E0B\u79FB"
+      }
+    ]);
+    return {
+      keyList
+    };
+  }
+});
+const _hoisted_1$a = { class: "shortCutKey" };
+const _hoisted_2$7 = { class: "keyContent" };
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+    _cache[0] || (_cache[0] = createElementVNode("div", { class: "title" }, "\u5FEB\u6377\u952E", -1)),
+    createElementVNode("div", _hoisted_2$7, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.keyList, (item, index2) => {
+        return openBlock(), createElementBlock("div", { key: index2 }, [
+          createElementVNode("span", null, toDisplayString(item.key), 1),
+          createElementVNode("span", null, toDisplayString(item.value), 1)
+        ]);
+      }), 128))
+    ]),
+    _cache[1] || (_cache[1] = createElementVNode("div", { class: "san" }, null, -1))
+  ]);
+}
+var shortcutKey = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
+const _sfc_main$a = defineComponent({
+  components: {
+    shortcutKey
+  },
+  setup() {
+    const { uiControl: uiControl2 } = inject("control") || {};
+    const controllerSize = ref();
+    const shortCutShow = ref(false);
+    const handleCanvasSize = (size) => {
+      if (!size) {
+        uiControl2 == null ? void 0 : uiControl2.set("scale", 1);
+      } else {
+        uiControl2 == null ? void 0 : uiControl2.set("scale", ((uiControl2 == null ? void 0 : uiControl2.get("scale")) || 1) + size);
+      }
+    };
+    const handleShortCutHidden = () => {
+      shortCutShow.value = false;
+    };
+    const handleShortcutShow = () => {
+      shortCutShow.value = true;
+    };
+    return {
+      size: computed(() => (uiControl2 == null ? void 0 : uiControl2.get("scale")) || 1),
+      handleCanvasSize,
+      controllerSize,
+      shortCutShow,
+      handleShortCutHidden,
+      handleShortcutShow
+    };
+  }
+});
+const _hoisted_1$9 = {
+  class: "controller_edit_size",
+  ref: "controllerSize"
+};
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_shortcutKey = resolveComponent("shortcutKey");
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+    createElementVNode("span", {
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleCanvasSize(0.1))
+    }, _cache[5] || (_cache[5] = [
+      createElementVNode("i", { class: "iconfontui icon-jiahao" }, null, -1)
+    ])),
+    createElementVNode("span", null, toDisplayString(parseInt(String(_ctx.size * 100))) + "%", 1),
+    createElementVNode("span", {
+      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleCanvasSize(-0.1))
+    }, _cache[6] || (_cache[6] = [
+      createElementVNode("i", { class: "iconfontui icon-jianhao" }, null, -1)
+    ])),
+    createElementVNode("span", {
+      onMouseover: _cache[2] || (_cache[2] = (...args) => _ctx.handleShortcutShow && _ctx.handleShortcutShow(...args)),
+      onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.handleShortCutHidden && _ctx.handleShortCutHidden(...args))
+    }, [
+      _cache[7] || (_cache[7] = createElementVNode("i", { class: "iconfontui icon-jianpan_o" }, null, -1)),
+      createVNode(Transition, { name: "slide-fade" }, {
+        default: withCtx(() => [
+          withDirectives(createVNode(_component_shortcutKey, null, null, 512), [
+            [vShow, _ctx.shortCutShow]
+          ])
+        ]),
+        _: 1
+      })
+    ], 32),
+    createElementVNode("span", {
+      onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleCanvasSize()),
+      title: "\u590D\u4F4D"
+    }, _cache[8] || (_cache[8] = [
+      createElementVNode("i", { class: "iconfontui icon-huanyuan" }, null, -1)
+    ]))
+  ], 512);
+}
+var ControllEditSize = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
+const globalFormList = [
+  {
+    ControlType: "RadioGroup",
+    nameCn: "\u9009\u62E9\u5668",
+    data: {
+      fieldName: "labelalign",
+      label: "\u6807\u7B7E\u5BF9\u9F50\u65B9\u5F0F",
+      showRule: "{}",
+      rule: "[]",
+      itemConfig: {
+        value: "right",
+        items: [
+          {
+            label: "Top",
+            value: "top",
+            select: true,
+            id: 1
+          },
+          {
+            label: "Left",
+            value: "left",
+            id: 2
+          },
+          {
+            label: "Right",
+            value: "right",
+            select: false,
+            id: 4
+          }
+        ],
+        id: 4
+      }
+    }
+  },
+  {
+    ControlType: "RadioGroup",
+    nameCn: "\u9009\u62E9\u5668",
+    data: {
+      fieldName: "size",
+      label: "\u7EC4\u4EF6\u5C3A\u5BF8",
+      showRule: "{}",
+      rule: "[]",
+      itemConfig: {
+        value: "small",
+        items: [
+          {
+            label: "large",
+            value: "large",
+            select: false,
+            id: 1
+          },
+          {
+            label: "default",
+            value: "default",
+            select: false,
+            id: 2
+          },
+          {
+            label: "small",
+            value: "small",
+            select: true,
+            id: 3
+          }
+        ],
+        id: 3
+      }
+    }
+  },
+  {
+    ControlType: "InputNumber",
+    data: {
+      fieldName: "labelWidth",
+      label: "\u6807\u7B7E\u5BBD\u5EA6",
+      tip: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      default: 100
+    }
+  },
+  {
+    ControlType: "Text",
+    nameCn: "\u6587\u672C\u6846",
+    data: {
+      fieldName: "suffix",
+      label: "\u8868\u5355\u9879\u540E\u7F00",
+      tip: "",
+      placeholder: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      default: ":"
+    }
+  },
+  {
+    ControlType: "FormStyle",
+    nameCn: "\u6587\u672C\u6846",
+    data: {
+      fieldName: "styles",
+      label: "\u8868\u5355\u6837\u5F0F\u8868",
+      tip: "",
+      placeholder: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      default: ""
+    }
+  },
+  {
+    ControlType: "Selecteds",
+    nameCn: "\u6587\u672C\u6846",
+    dynamic: true,
+    data: {
+      fieldName: "csslist",
+      label: "\u81EA\u5B9A\u4E49Class",
+      tip: "",
+      placeholder: "",
+      showRule: "{}",
+      required: false,
+      rule: "[]",
+      itemConfig: {
+        value: [],
+        items: []
+      }
+    }
+  }
+];
+var Loading_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main$9 = {};
+const _hoisted_1$8 = { class: "loading" };
+function _sfc_render$9(_ctx, _cache) {
+  const _directive_loading = ElLoadingDirective;
+  return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$8, null, 512)), [
+    [_directive_loading, true]
+  ]);
+}
+var Loading = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-1e4ed2fd"]]);
+const _sfc_main$8 = defineComponent({
+  props: {
+    column: {
+      type: Boolean,
+      default: true
+    },
+    panel: {
+      type: Array,
+      default: () => ["form", "json", "global"]
+    }
+  },
+  components: {
+    ControllEditSize,
+    jsonEnter: defineAsyncComponent({
+      loader: () => import("./jsonEditor.js"),
+      loadingComponent: Loading
+    }),
+    globalFormComponent: defineAsyncComponent({
+      loader: () => import("./globalFormList.js"),
+      loadingComponent: Loading
+    })
+  },
+  setup(props, { emit }) {
+    const { proxy: proxy2 } = getCurrentInstance();
+    const { uiControl: uiControl2, hisContrl: hisContrl2, formStore: formStore2 } = inject("control") || {};
+    const moduleIsHidden = ref(true);
+    const show = ref(true);
+    const ruleForm = ref();
+    const editRight = ref();
+    const activeName = ref("form");
+    const jsonCenter = ref();
+    let jsonEditor = null;
+    const isTransition = ref(true);
+    const controlItems = computed(() => formStore2 == null ? void 0 : formStore2.getControlItems());
+    const curControl = computed(() => formStore2 == null ? void 0 : formStore2.get("curControl"));
+    const newCurControl = computed(
+      () => proxy2.$Flex.deepClone(formStore2 == null ? void 0 : formStore2.get("curControl"))
+    );
+    const historyFlag = computed(() => hisContrl2 == null ? void 0 : hisContrl2.get("historyFlag"));
+    const save = computed(() => formStore2 == null ? void 0 : formStore2.get("save"));
+    const currentIndex = computed(() => formStore2 == null ? void 0 : formStore2.get("currentIndex"));
+    const handleEditBtn = () => {
+      moduleIsHidden.value = !moduleIsHidden.value;
+      if (moduleIsHidden.value) {
+        uiControl2 == null ? void 0 : uiControl2.set("columnWidth", { right: void 0 });
+      } else {
+        uiControl2 == null ? void 0 : uiControl2.set("columnWidth", { right: 0 });
+      }
+    };
+    const globalData = formStore2 == null ? void 0 : formStore2.getDynamicForm(globalFormList);
+    formStore2 == null ? void 0 : formStore2.set("globalDatas", globalData);
+    formStore2 == null ? void 0 : formStore2.set("globalFormList", globalFormList);
+    const globalFormLists = computed(() => formStore2 == null ? void 0 : formStore2.get("globalFormList"));
+    const globalDatas = computed(() => formStore2 == null ? void 0 : formStore2.get("globalDatas"));
+    const handleMouseDown = async () => {
+      formStore2 == null ? void 0 : formStore2.setFormCurrentId("");
+      formStore2 == null ? void 0 : formStore2.setFormCurrentIndex(-1);
+    };
+    const preview = computed(() => formStore2 == null ? void 0 : formStore2.get("preview"));
+    const allFormList = computed(
+      () => formStore2 == null ? void 0 : formStore2.getAllFormList()
+    );
+    const checkNowFormValidate = function(content) {
+      return new Promise((resolve) => {
+        ruleForm.value.validate((valid) => {
+          if (!valid) {
+            ElNotification$1({
+              title: "Error",
+              message: content,
+              type: "error"
+            });
+            resolve(false);
+          } else {
+            resolve(true);
+          }
+        });
+      });
+    };
+    function checkLayoutForm(curControl2) {
+      if (curControl2.ControlType == "TableLayout") {
+        const trs = curControl2.data.trs || [];
+        for (let i = 0; i < trs.length; i++) {
+          const tds = trs[i].tds;
+          for (let j = 0; j < tds.length; j++) {
+            const state2 = checkFormValidate(tds[j].list);
+            if (!state2) {
+              return state2;
+            }
+          }
+        }
+      } else if (curControl2.ControlType == "Grid") {
+        const columns = curControl2.data.columns || [];
+        for (let i = 0; i < columns.length; i++) {
+          const list = columns[i].list;
+          const state2 = checkFormValidate(list);
+          if (!state2) {
+            return state2;
+          }
+        }
+      }
+      return true;
+    }
+    const checkFormValidate = async (list) => {
+      var _a;
+      if (!list)
+        return;
+      const len = list.length;
+      for (let i = 0; i < len; ++i) {
+        let validate = true;
+        const curControl2 = list[i];
+        (_a = curControl2.controlItems) == null ? void 0 : _a.forEach((item) => {
+          if (item.data.required) {
+            validate = !!curControl2.data[item.data.fieldName];
+          }
+        });
+        if (validate && curControl2.layout) {
+          validate = checkLayoutForm(curControl2);
+        }
+        if (!validate) {
+          formStore2 == null ? void 0 : formStore2.setFormCurrentId(curControl2.id);
+          activeName.value = "form";
+          await nextTick();
+          const valid = await checkNowFormValidate(
+            "\u8BF7\u68C0\u67E5\u52A8\u6001\u8868\u5355\u8F93\u5165\u683C\u5F0F\u95EE\u9898"
+          );
+          if (!valid) {
+            return false;
+          }
+        }
+      }
+      return true;
+    };
+    const formUpdate = computed(() => formStore2 == null ? void 0 : formStore2.get("formUpdate"));
+    const newAllmainlist = computed(
+      () => proxy2.$Flex.deepClone(formStore2 == null ? void 0 : formStore2.get("allFormList"))
+    );
+    const checkValidates = async (formSave = false, type) => {
+      const curControlIndex = formStore2 == null ? void 0 : formStore2.get("currentIndex");
+      if (type && preview.value)
+        return;
+      if (preview.value || save.value || formUpdate.value) {
+        const ispreview = await checkFormValidate(allFormList.value);
+        if (ispreview) {
+          formStore2 == null ? void 0 : formStore2.setFormCurrentIndex(curControlIndex);
+        }
+        formStore2 == null ? void 0 : formStore2.setSave(true);
+        formStore2 == null ? void 0 : formStore2.setFormUpdate(false);
+        if (ispreview) {
+          const result2 = initFormToJson(allFormList.value);
+          formStore2 == null ? void 0 : formStore2.set("AllFormResult", result2);
+          formStore2 == null ? void 0 : formStore2.handleDynamicForm();
+          emit("save");
+        }
+        if (!formSave) {
+          formStore2 == null ? void 0 : formStore2.set("previewShow", ispreview);
+          formStore2 == null ? void 0 : formStore2.set("preview", false);
+        } else if (ispreview) {
+          ElNotification$1({
+            title: "Success",
+            message: type ? "\u5DF2\u81EA\u52A8\u4FDD\u5B58" : "\u4FDD\u5B58\u6210\u529F",
+            type: "success"
+          });
+        }
+      }
+    };
+    const initFormToJson = (formlist) => {
+      return window.VueContext.$Flex.initFormToJson(toRaw(formlist));
+    };
+    function complareControl(newControl, oldContrl) {
+      if (newControl !== oldContrl)
+        return false;
+      let same = true;
+      for (const key in newControl) {
+        if (newControl[key] !== oldContrl[key]) {
+          same = false;
+        }
+      }
+      return same;
+    }
+    function initJsonToForm(list) {
+      return toRaw(list).map((item) => {
+        return proxy2.$Flex.jsonToForm(item);
+      });
+    }
+    function handleClick(tab) {
+      if (tab.props.name == "json" && jsonCenter.value) {
+        jsonEditor = jsonCenter.value.initJsonCenter();
+      } else if (tab.props.name == "form" && jsonEditor) {
+        try {
+          const list = proxy2.$Flex.tryParseJson(jsonEditor.getText());
+          let newAllList = [];
+          newAllList = initJsonToForm(list);
+          formStore2 == null ? void 0 : formStore2.updateAllFormList(newAllList);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+    function onEditor(editor) {
+      jsonEditor = editor;
+    }
+    proxy2.$EventBus.on("openPreview", async () => {
+      checkValidates();
+    });
+    proxy2.$EventBus.on("setSave", async (type) => {
+      checkValidates(true, type);
+    });
+    watch(
+      () => {
+        var _a;
+        return [newAllmainlist.value, (_a = newCurControl.value) == null ? void 0 : _a.data];
+      },
+      ([, b], [, d]) => {
+        if (activeName.value == "json" && jsonCenter.value) {
+          jsonCenter.value.initJsonCenter();
+        }
+        if (historyFlag.value) {
+          hisContrl2 == null ? void 0 : hisContrl2.set("historyFlag", false);
+          return;
+        }
+        if (!complareControl(b, d)) {
+          formStore2 == null ? void 0 : formStore2.setHistory();
+        }
+      },
+      {
+        deep: true
+      }
+    );
+    watch(
+      () => {
+        var _a;
+        return (_a = curControl.value) == null ? void 0 : _a.data;
+      },
+      async () => {
+        if (!formUpdate.value) {
+          formStore2 == null ? void 0 : formStore2.setFormUpdate(true);
+        }
+      },
+      { deep: true }
+    );
+    return {
+      globalFormLists,
+      globalDatas,
+      jsonCenter,
+      handleClick,
+      jsonEditor,
+      onEditor,
+      activeName,
+      handleMouseDown,
+      moduleIsHidden,
+      handleEditBtn,
+      isTransition,
+      editRight,
+      controlItems,
+      curControl,
+      ruleForm,
+      show,
+      currentIndex
+    };
+  }
+});
+const _hoisted_1$7 = {
+  class: "editor_pages_right editor_pages_right_visible",
+  ref: "editRight"
+};
+const _hoisted_2$6 = {
+  key: 0,
+  class: "json"
+};
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ControllEditSize = resolveComponent("ControllEditSize");
+  const _component_el_form_item = ElFormItem;
+  const _component_el_form = ElForm;
+  const _component_el_empty = ElEmpty;
+  const _component_el_scrollbar = ElScrollbar;
+  const _component_el_tab_pane = ElTabPane;
+  const _component_jsonEnter = resolveComponent("jsonEnter");
+  const _component_globalFormComponent = resolveComponent("globalFormComponent");
+  const _component_el_tabs = ElTabs;
+  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+    _ctx.column ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "editor_container",
+      onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMouseDown && _ctx.handleMouseDown(...args))
+    }, [
+      createVNode(_component_ControllEditSize)
+    ], 32)) : createCommentVNode("", true),
+    createVNode(_component_el_tabs, {
+      modelValue: _ctx.activeName,
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.activeName = $event),
+      class: "demo-tabs",
+      onTabClick: _ctx.handleClick,
+      style: { "height": "100%" }
+    }, {
+      default: withCtx(() => [
+        _ctx.panel.includes("form") ? (openBlock(), createBlock(_component_el_tab_pane, {
+          key: 0,
+          label: "\u7EC4\u4EF6\u914D\u7F6E",
+          name: "form"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_scrollbar, { class: "dynamic" }, {
+              default: withCtx(() => [
+                createVNode(_component_el_form, {
+                  ref: "ruleForm",
+                  model: _ctx.curControl && (_ctx.curControl.data || {}),
+                  rules: _ctx.curControl && _ctx.curControl.rules,
+                  "label-width": "120px",
+                  "status-icon": true
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.controlItems, (item) => {
+                      return openBlock(), createBlock(_component_el_form_item, {
+                        key: item.id,
+                        control: item.ControlType,
+                        prop: item.data.fieldName
+                      }, {
+                        default: withCtx(() => [
+                          _ctx.show && item.ControlType === "JsonEditor" || item.ControlType !== "JsonEditor" ? (openBlock(), createBlock(resolveDynamicComponent(item.ControlType), {
+                            key: 0,
+                            drag: false,
+                            data: _ctx.curControl.data,
+                            item,
+                            size: _ctx.globalDatas.size,
+                            labelWidth: _ctx.globalDatas.labelWidth,
+                            labelalign: _ctx.globalDatas.labelalign
+                          }, null, 8, ["data", "item", "size", "labelWidth", "labelalign"])) : createCommentVNode("", true)
+                        ]),
+                        _: 2
+                      }, 1032, ["control", "prop"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                }, 8, ["model", "rules"]),
+                !_ctx.curControl || !_ctx.curControl.data ? (openBlock(), createBlock(_component_el_empty, {
+                  key: 0,
+                  "image-size": 200,
+                  description: "\u6CA1\u6709\u9009\u4E2D\u8868\u5355\u63A7\u4EF6"
+                })) : createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        _ctx.panel.includes("json") ? (openBlock(), createBlock(_component_el_tab_pane, {
+          key: 1,
+          label: "JSON\u914D\u7F6E",
+          name: "json"
+        }, {
+          default: withCtx(() => [
+            _ctx.activeName == "json" ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
+              createVNode(_component_jsonEnter, {
+                ref: "jsonCenter",
+                onEditor: _ctx.onEditor
+              }, null, 8, ["onEditor"])
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        _ctx.panel.includes("global") ? (openBlock(), createBlock(_component_el_tab_pane, {
+          key: 2,
+          label: "\u8868\u5355\u914D\u7F6E",
+          name: "global"
+        }, {
+          default: withCtx(() => [
+            _ctx.activeName == "global" ? (openBlock(), createBlock(_component_el_scrollbar, {
+              key: 0,
+              class: "form_tab3"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_globalFormComponent)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ]),
+      _: 1
+    }, 8, ["modelValue", "onTabClick"]),
+    createElementVNode("div", {
+      class: "editor_right_accept",
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleEditBtn && _ctx.handleEditBtn(...args))
+    }, [
+      createElementVNode("i", {
+        class: normalizeClass([
+          "iconfontui icon-jiantou_xiangyouliangci",
+          _ctx.moduleIsHidden ? "icon-jiantou_xiangyouliangci" : "icon-jiantou_xiangzuoliangci"
+        ])
+      }, null, 2)
+    ])
+  ], 512);
+}
+var __unplugin_components_4 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+const state$1 = reactive({
+  form: state$3,
+  copyContent: {},
+  curList: []
+});
+class ShortCut {
+  copy(list) {
+    if (state$1.form.currentIndex > -1) {
+      state$1.copyContent = list[state$1.form.currentIndex];
+    }
+  }
+  paste(list) {
+    if (state$1.copyContent) {
+      const pasteControl = window.VueContext.$Flex.deepClone(state$1.copyContent);
+      if (pasteControl.data) {
+        pasteControl.data.fieldName = pasteControl.ControlType + "_" + window.VueContext.$Flex.generateMixed();
+        pasteControl.id = window.VueContext.$Flex.generateMixed();
+        list.push(pasteControl);
+        state$1.form.formUpdate = true;
+      }
+    }
+  }
+  delete(list) {
+    list.splice(state$1.form.currentIndex, 1);
+    state$1.form.curControl = {};
+    state$1.form.formUpdate = true;
+    state$1.form.currentIndex = -1;
+    state$1.form.currentId = "";
+  }
+  onTop(list) {
+    if (state$1.form.currentIndex > 0) {
+      const temp = list.splice(state$1.form.currentIndex, 1);
+      state$1.form.currentIndex -= 1;
+      list.splice(state$1.form.currentIndex, 0, ...temp);
+    }
+  }
+  onBottom(list) {
+    if (state$1.form.currentIndex < list.length - 1) {
+      const temp = list.splice(state$1.form.currentIndex, 1);
+      state$1.form.currentIndex += 1;
+      list.splice(state$1.form.currentIndex, 0, ...temp);
+    }
+  }
+  clear() {
+    state$1.form.allFormList.length = 0;
+    state$1.form.formUpdate = true;
+  }
+  moveTop() {
+    if (state$1.form.currentIndex > 0) {
+      state$1.form.currentIndex -= 1;
+    }
+  }
+  moveBottom(list) {
+    if (state$1.form.currentIndex < list.length - 1) {
+      state$1.form.currentIndex += 1;
+    }
+  }
+  set(name, value) {
+    state$1[name] = value;
+  }
+  get(name) {
+    return state$1[name];
+  }
+  commit(event) {
+    this[event](state$1.curList);
+  }
+}
+var store = new ShortCut();
+function clearCanvas() {
+  store.commit("clear");
+}
+function copy() {
+  store.commit("copy");
+}
+function paste() {
+  store.commit("paste");
+}
+function cut() {
+  store.commit("copy");
+  store.commit("delete");
+}
+function onDelete() {
+  store.commit("delete");
+}
+function onTop() {
+  store.commit("onTop");
+}
+function onBottom() {
+  store.commit("onBottom");
+}
+const result = {
+  copy,
+  paste,
+  cut,
+  delete: onDelete,
+  onTop,
+  onBottom,
+  clearCanvas
+};
+const _sfc_main$7 = defineComponent({
+  props: {
+    active: Boolean,
+    currentIndex: Number,
+    len: {
+      type: Number,
+      default: 0
+    },
+    inline: Boolean,
+    layout: Boolean,
+    currentId: String,
+    item: Object
+  },
+  setup(props, context) {
+    const isShow = ref(false);
+    const editForm = ref();
+    const { store: store2 } = inject("control") || {};
+    const { emit } = context;
+    const copyContent = computed(() => store2 == null ? void 0 : store2.get("copyContent"));
+    const handleShortCut = (e) => {
+      if (props.active) {
+        e.preventDefault();
+        isShow.value = true;
+        const x = e.offsetX;
+        const y = e.offsetY;
+        nextTick(() => {
+          editForm.value.style.left = x + "px";
+          editForm.value.style.top = y + "px";
+        });
+      }
+    };
+    watch(
+      () => props.active,
+      () => {
+        if (!props.active) {
+          isShow.value = props.active;
+        }
+      }
+    );
+    const handleMenu = () => {
+      isShow.value = false;
+    };
+    const handleActive = (type) => {
+      if (type === "copy") {
+        copy();
+      } else if (type === "paste") {
+        emit("paste");
+        paste();
+      } else if (type === "cut") {
+        cut();
+      } else if (type === "delete") {
+        onDelete();
+      } else if (type === "top") {
+        onTop();
+      } else if (type === "bottom") {
+        onBottom();
+      }
+    };
+    const handleCopyAndPaste = () => {
+      copy();
+      emit("paste");
+      paste();
+    };
+    document.addEventListener("click", () => {
+      isShow.value = false;
+    });
+    const handleColumn = () => {
+      var _a;
+      const td = {
+        tds: [
+          {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          },
+          {
+            colspan: 1,
+            rowspan: 1,
+            list: []
+          }
+        ]
+      };
+      (_a = props.item) == null ? void 0 : _a.data.trs.push(td);
+    };
+    const handleRow = () => {
+      var _a;
+      (_a = props.item) == null ? void 0 : _a.data.trs.forEach((trs) => {
+        trs.tds.push({
+          colspan: 1,
+          rowspan: 1,
+          list: []
+        });
+      });
+    };
+    return {
+      isShow,
+      handleShortCut,
+      handleMenu,
+      editForm,
+      handleActive,
+      handleCopyAndPaste,
+      copyContent,
+      handleColumn,
+      handleRow
+    };
+  }
+});
+const _hoisted_1$6 = {
+  class: "editForm",
+  ref: "editForm"
+};
+const _hoisted_2$5 = {
+  key: 0,
+  class: "editbar"
+};
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "shape",
+      _ctx.active ? _ctx.layout ? "shape_border shape_border_layout" : "shape_border" : _ctx.layout ? "noactive_layout" : ""
+    ]),
+    onContextmenu: _cache[12] || (_cache[12] = (...args) => _ctx.handleShortCut && _ctx.handleShortCut(...args)),
+    onClick: _cache[13] || (_cache[13] = (...args) => _ctx.handleMenu && _ctx.handleMenu(...args)),
+    style: normalizeStyle({ display: _ctx.inline ? "inline-block" : "block" })
+  }, [
+    createVNode(Transition, {
+      name: "fade",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: withCtx(() => [
+        withDirectives(createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("span", {
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleActive("copy"))
+          }, "\u590D\u5236"),
+          createElementVNode("span", {
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleActive("cut"))
+          }, "\u526A\u5207"),
+          createElementVNode("span", {
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handleActive("delete"))
+          }, "\u5220\u9664"),
+          _ctx.copyContent ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleActive("paste"))
+          }, "\u7C98\u8D34")) : createCommentVNode("", true),
+          _ctx.currentIndex != 0 ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleActive("top"))
+          }, "\u4E0A\u79FB")) : createCommentVNode("", true),
+          _ctx.currentIndex != _ctx.len - 1 ? (openBlock(), createElementBlock("span", {
+            key: 2,
+            onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleActive("bottom"))
+          }, "\u4E0B\u79FB")) : createCommentVNode("", true)
+        ], 512), [
+          [vShow, _ctx.isShow && _ctx.active]
+        ])
+      ]),
+      _: 1
+    }),
+    renderSlot(_ctx.$slots, "default"),
+    _ctx.active ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+      _ctx.currentIndex != 0 ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: "iconfontui icon-xiangshang1",
+        onClick: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.handleActive("top"), ["stop"]))
+      })) : createCommentVNode("", true),
+      _ctx.currentIndex != _ctx.len - 1 ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: "iconfontui icon-xiangxia1",
+        onClick: _cache[7] || (_cache[7] = withModifiers(($event) => _ctx.handleActive("bottom"), ["stop"]))
+      })) : createCommentVNode("", true),
+      _ctx.item && _ctx.item.ControlType == "TableLayout" ? (openBlock(), createElementBlock("span", {
+        key: 2,
+        class: "iconfontui icon--charulie",
+        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.handleRow && _ctx.handleRow(...args))
+      })) : createCommentVNode("", true),
+      _ctx.item && _ctx.item.ControlType == "TableLayout" ? (openBlock(), createElementBlock("span", {
+        key: 3,
+        class: "iconfontui icon--charuhang",
+        onClick: _cache[9] || (_cache[9] = (...args) => _ctx.handleColumn && _ctx.handleColumn(...args))
+      })) : createCommentVNode("", true),
+      createElementVNode("span", {
+        class: "iconfontui icon-fuzhi",
+        onClick: _cache[10] || (_cache[10] = withModifiers((...args) => _ctx.handleCopyAndPaste && _ctx.handleCopyAndPaste(...args), ["stop"]))
+      }),
+      createElementVNode("span", {
+        class: "iconfontui icon-shanchu1",
+        onClick: _cache[11] || (_cache[11] = withModifiers(($event) => _ctx.handleActive("delete"), ["stop"]))
+      })
+    ])) : createCommentVNode("", true)
+  ], 38);
+}
+var __unplugin_components_0$1 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+var Shape = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  "default": __unplugin_components_0$1
+}, Symbol.toStringTag, { value: "Module" }));
+const _sfc_main$6 = defineComponent({
+  setup() {
+    const { proxy: proxy2 } = getCurrentInstance();
+    const { uiControl: uiControl2, store: store2, formStore: formStore2 } = inject("control") || {};
+    const formcomponents = proxy2.$formcomponents;
+    const canvasBox = ref();
+    const canvasSize = ref(1);
+    const dragDom = ref();
+    const pasteShow = ref(false);
+    const editForm = ref();
+    const globalDatas = computed(() => formStore2 == null ? void 0 : formStore2.get("globalDatas"));
+    const fullScreen = computed(() => uiControl2 == null ? void 0 : uiControl2.get("isFullscreen"));
+    const pageType = computed(() => uiControl2 == null ? void 0 : uiControl2.get("pageType"));
+    const dynamicList = computed(
+      () => {
+        var _a;
+        return (_a = formStore2 == null ? void 0 : formStore2.get("globalFormList")) == null ? void 0 : _a.filter((item) => {
+          if (item.dynamic) {
+            return item;
+          }
+        });
+      }
+    );
+    const allmainList = computed({
+      get() {
+        return formStore2 == null ? void 0 : formStore2.get("allFormList");
+      },
+      set(value) {
+        value = value.map((item) => {
+          console.log(formcomponents[item.ControlType]);
+          if (!item.data && !item.controlItems) {
+            item = proxy2.$Flex.deepClone(item);
+            const currentComponent = formcomponents[item.ControlType];
+            item.formConfig = currentComponent.formConfig;
+            item.data = item.formConfig.data();
+            if (!item.data.fieldName) {
+              item.data.fieldName = item.ControlType + "_" + proxy2.$Flex.generateMixed();
+            }
+            item.id = proxy2.$Flex.generateMixed();
+            let controlItems = item.formConfig.morenConfig().concat(dynamicList.value);
+            if (currentComponent.actionType && currentComponent.actionType.length > 0) {
+              console.log(controlItems);
+              controlItems.find((item2) => {
+                if (item2.ControlType == "Action") {
+                  item2.data.formConfig = {
+                    value: {},
+                    items: []
+                  };
+                  currentComponent.actionType.forEach(
+                    (action2, index2) => {
+                      item2.data.formConfig.items.push({
+                        label: action2,
+                        value: action2,
+                        id: index2 + 1
+                      });
+                    }
+                  );
+                }
+              });
+            } else {
+              controlItems = controlItems.filter((item2) => {
+                if (item2.ControlType !== "Action") {
+                  return item2;
+                }
+              });
+            }
+            item.rules = proxy2.$Flex.controlFormRule(controlItems, item);
+            item.controlItems = controlItems;
+          }
+          return item;
+        });
+        console.log("value", value);
+        formStore2 == null ? void 0 : formStore2.updateAllFormList(value);
+      }
+    });
+    const currentId = computed(() => {
+      return formStore2 == null ? void 0 : formStore2.get("currentId");
+    });
+    const handleCanvasScale = () => {
+      canvasBox.value.style.transform = `scale(${canvasSize.value})`;
+    };
+    const handleCanvasSize = (size) => {
+      if (proxy2.$Flex.clickCountLimit()) {
+        if (size === "add" && canvasSize.value < 1.5) {
+          canvasSize.value = Number((canvasSize.value + 0.1).toFixed(2));
+        } else if (size === "cut" && canvasSize.value > 0.5) {
+          canvasSize.value = Number((canvasSize.value - 0.1).toFixed(2));
+        } else if (size === "restore") {
+          canvasSize.value = 1;
+        }
+        handleCanvasScale();
+      }
+    };
+    const chooseClick = (e) => {
+      var _a;
+      formStore2 == null ? void 0 : formStore2.setFormCurrentId((_a = allmainList.value[e.oldIndex]) == null ? void 0 : _a.id);
+      formStore2 == null ? void 0 : formStore2.setFormCurrentIndex(e.oldIndex);
+      store2 == null ? void 0 : store2.set("curList", allmainList.value);
+    };
+    const changePos = (e) => {
+      var _a;
+      formStore2 == null ? void 0 : formStore2.setFormCurrentId((_a = allmainList.value[e.newIndex]) == null ? void 0 : _a.id);
+      formStore2 == null ? void 0 : formStore2.setFormCurrentIndex(e.newIndex);
+      store2 == null ? void 0 : store2.set("curList", allmainList.value);
+    };
+    const addControl = (e) => {
+      var _a;
+      formStore2 == null ? void 0 : formStore2.setFormCurrentId((_a = allmainList.value[e.newIndex]) == null ? void 0 : _a.id);
+      formStore2 == null ? void 0 : formStore2.setFormCurrentIndex(e.newIndex);
+      store2 == null ? void 0 : store2.set("curList", allmainList.value);
+    };
+    const handlePaste = () => {
+      pasteShow.value = false;
+      paste();
+    };
+    const handleNoDraggable = (e) => {
+      if (pasteShow.value) {
+        pasteShow.value = false;
+      }
+      e.preventDefault();
+      const path = e.path;
+      for (let i = 0; i < path.length; i++) {
+        if (path[i].getAttribute && path[i].getAttribute("class") && path[i].getAttribute("class").indexOf("shape") >= 0) {
+          return;
+        }
+      }
+      const x = e.offsetX;
+      const y = e.offsetY;
+      nextTick(() => {
+        editForm.value.style.left = x + "px";
+        editForm.value.style.top = y + "px";
+        pasteShow.value = true;
+      });
+    };
+    return {
+      scale: computed(() => uiControl2 == null ? void 0 : uiControl2.get("scale")),
+      globalDatas,
+      canvasBox,
+      editForm,
+      handleCanvasSize,
+      pageType,
+      canvasSize,
+      dragDom,
+      chooseClick,
+      addControl,
+      changePos,
+      allmainList,
+      currentId,
+      handleNoDraggable,
+      handlePaste,
+      pasteShow,
+      fullScreen,
+      onEditorCenter: (e) => {
+        if (e && e.path && e.path[0].className == "editor_pages_center") {
+          formStore2 == null ? void 0 : formStore2.setFormCurrentId("");
+          pasteShow.value = false;
+        }
+      }
+    };
+  }
+});
+const _hoisted_1$5 = {
+  class: "editForm",
+  ref: "editForm"
+};
+const _hoisted_2$4 = {
+  key: 0,
+  class: "form-empty"
+};
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a;
+  const _component_Shape = __unplugin_components_0$1;
+  const _component_draggable = resolveComponent("draggable");
+  return openBlock(), createElementBlock("div", {
+    class: "editor_pages_center",
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onEditorCenter && _ctx.onEditorCenter(...args)),
+    tabindex: "1"
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(["canvasBox", [
+        _ctx.fullScreen ? "fullScreenBox" : "",
+        _ctx.pageType + "_layout",
+        (_a = _ctx.globalDatas.csslist) == null ? void 0 : _a.join(" ")
+      ]]),
+      ref: "canvasBox",
+      style: normalizeStyle(`--scale:${_ctx.scale} `)
+    }, [
+      createElementVNode("div", {
+        class: "draggable_container",
+        ref: "dragDom",
+        onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleNoDraggable && _ctx.handleNoDraggable(...args))
+      }, [
+        withDirectives(createElementVNode("div", _hoisted_1$5, [
+          createElementVNode("span", {
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handlePaste && _ctx.handlePaste(...args))
+          }, "\u7C98\u8D34")
+        ], 512), [
+          [vShow, _ctx.pasteShow]
+        ]),
+        createVNode(_component_draggable, {
+          class: "dragArea",
+          animation: "300",
+          ghostClass: "itemGhost",
+          modelValue: _ctx.allmainList,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.allmainList = $event),
+          onAdd: _ctx.addControl,
+          group: "starfish-form",
+          onChoose: _ctx.chooseClick,
+          "item-key": "id",
+          onUpdate: _ctx.changePos
+        }, {
+          item: withCtx(({ element, index: index2 }) => [
+            createVNode(_component_Shape, {
+              active: _ctx.currentId == element.id,
+              currentIndex: index2,
+              currentId: element.id,
+              item: element,
+              len: _ctx.allmainList.length
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(element.ControlType), mergeProps({
+                  drag: true,
+                  item: element,
+                  data: {}
+                }, _ctx.globalDatas), null, 16, ["item"]))
+              ]),
+              _: 2
+            }, 1032, ["active", "currentIndex", "currentId", "item", "len"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "onAdd", "onChoose", "onUpdate"]),
+        _ctx.allmainList.length == 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4, " \u4ECE\u5DE6\u4FA7\u62D6\u62FD\u6765\u6DFB\u52A0\u5B57\u6BB5 ")) : createCommentVNode("", true)
+      ], 544)
+    ], 6)
+  ]);
+}
+var __unplugin_components_3 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const _sfc_main$5 = defineComponent({
+  props: {
+    basicFields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    layoutFields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    const formcomponents = this.$formcomponents;
+    const lastFormComponents = [];
+    for (const key in formcomponents) {
+      const item = formcomponents[key];
+      if (item.isHide) {
+        continue;
+      }
+      const model = {};
+      model.ControlType = item.ControlType;
+      model.icon = item.icon;
+      model.nameCn = item.nameCn;
+      model.layout = !!item.layout;
+      if (item.rule) {
+        model.rule = item.rule;
+      }
+      lastFormComponents.push(model);
+    }
+    return {
+      formcomponents: lastFormComponents,
+      filterContent: ""
+    };
+  },
+  computed: {
+    newcomponentlist() {
+      return this.formcomponents.filter((item) => {
+        if (item.nameCn && item.nameCn.indexOf(this.filterContent) != -1 && !item.layout) {
+          if (this.basicFields.length == 0) {
+            return true;
+          } else if (this.basicFields.length > 0) {
+            let isHave = false;
+            this.basicFields.find((fieldItem) => {
+              if (fieldItem.toLocaleLowerCase() == item.ControlType.toLocaleLowerCase()) {
+                isHave = true;
+                return fieldItem;
+              }
+            });
+            return isHave;
+          }
+        }
+      });
+    },
+    layoutList() {
+      return this.formcomponents.filter((item) => {
+        if (item.nameCn && item.nameCn.indexOf(this.filterContent) != -1 && item.layout) {
+          if (this.layoutFields.length == 0) {
+            return true;
+          } else if (this.layoutFields.length > 0) {
+            let isHave = false;
+            this.layoutFields.find((fieldItem) => {
+              if (fieldItem.toLocaleLowerCase() == item.ControlType.toLocaleLowerCase()) {
+                isHave = true;
+                return fieldItem;
+              }
+            });
+            return isHave;
+          }
+        }
+      });
+    }
+  },
+  methods: {
+    clickAddControl(item) {
+      formStore.setAllFormList(this.$Flex.jsonToForm(item));
+    }
+  }
+});
+const _hoisted_1$4 = { class: "filter" };
+const _hoisted_2$3 = ["alt", "onClick"];
+const _hoisted_3$3 = { class: "form-item" };
+const _hoisted_4$2 = { class: "item-text" };
+const _hoisted_5$2 = ["alt", "onClick"];
+const _hoisted_6$2 = { class: "form-item" };
+const _hoisted_7$1 = { class: "item-text" };
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input = ElInput;
+  const _component_el_button = ElButton;
+  const _component_draggable = resolveComponent("draggable");
+  const _component_el_scrollbar = ElScrollbar;
+  return openBlock(), createBlock(_component_el_scrollbar, { class: "editor_pages_left" }, {
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1$4, [
+        createVNode(_component_el_input, {
+          placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u8FC7\u6EE4",
+          size: "",
+          modelValue: _ctx.filterContent,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filterContent = $event)
+        }, null, 8, ["modelValue"])
+      ]),
+      _ctx.newcomponentlist.length > 0 ? (openBlock(), createBlock(_component_el_button, {
+        key: 0,
+        text: ""
+      }, {
+        default: withCtx(() => _cache[1] || (_cache[1] = [
+          createTextVNode("\u57FA\u7840\u63A7\u4EF6", -1)
+        ])),
+        _: 1,
+        __: [1]
+      })) : createCommentVNode("", true),
+      createVNode(_component_draggable, {
+        class: "dragArea list-group",
+        list: _ctx.newcomponentlist,
+        group: { name: "starfish-form", pull: "clone", put: false },
+        sort: false,
+        "item-key": "id"
+      }, {
+        item: withCtx(({ element }) => [
+          createElementVNode("div", {
+            class: "list-group-item",
+            alt: element.nameCn,
+            onClick: withModifiers(($event) => _ctx.clickAddControl(element), ["stop"])
+          }, [
+            createElementVNode("div", _hoisted_3$3, [
+              createElementVNode("span", {
+                class: normalizeClass(["iconfontui", element.icon])
+              }, null, 2)
+            ]),
+            createElementVNode("div", _hoisted_4$2, toDisplayString(element.nameCn), 1)
+          ], 8, _hoisted_2$3)
+        ]),
+        _: 1
+      }, 8, ["list"]),
+      _ctx.layoutList.length > 0 ? (openBlock(), createBlock(_component_el_button, {
+        key: 1,
+        text: ""
+      }, {
+        default: withCtx(() => _cache[2] || (_cache[2] = [
+          createTextVNode("\u5E03\u5C40\u63A7\u4EF6", -1)
+        ])),
+        _: 1,
+        __: [2]
+      })) : createCommentVNode("", true),
+      createVNode(_component_draggable, {
+        class: "dragArea list-group",
+        list: _ctx.layoutList,
+        group: { name: "starfish-form", pull: "clone", put: false },
+        sort: false,
+        "item-key": "id"
+      }, {
+        item: withCtx(({ element }) => [
+          createElementVNode("div", {
+            class: "list-group-item",
+            alt: element.nameCn,
+            onClick: withModifiers(($event) => _ctx.clickAddControl(element), ["stop"])
+          }, [
+            createElementVNode("div", _hoisted_6$2, [
+              createElementVNode("span", {
+                class: normalizeClass(["iconfontui", element.icon])
+              }, null, 2)
+            ]),
+            createElementVNode("div", _hoisted_7$1, toDisplayString(element.nameCn), 1)
+          ], 8, _hoisted_5$2)
+        ]),
+        _: 1
+      }, 8, ["list"])
+    ]),
+    _: 1
+  });
+}
+var __unplugin_components_2 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const _sfc_main$4 = defineComponent({
+  components: {
+    JsonCode: defineAsyncComponent(() => import("./jsonCode.js"))
+  },
+  props: {
+    menu: {
+      type: Object,
+      default: () => ({ left: [], right: [], column: true })
+    }
+  },
+  setup(props) {
+    const { proxy: proxy2 } = getCurrentInstance();
+    const { hisContrl: hisContrl2, uiControl: uiControl2, formStore: formStore2 } = inject("control") || {};
+    const clearIsDisable = computed(
+      () => {
+        var _a;
+        return ((_a = formStore2 == null ? void 0 : formStore2.get("allFormList")) == null ? void 0 : _a.length) == 0;
+      }
+    );
+    const historyIndex = computed(() => hisContrl2 == null ? void 0 : hisContrl2.get("index"));
+    const historyLen = computed(
+      () => (hisContrl2 == null ? void 0 : hisContrl2.get("historyList").length) || 0
+    );
+    const fullscreen = computed(() => uiControl2 == null ? void 0 : uiControl2.get("isFullscreen"));
+    const allFormList = computed(() => formStore2 == null ? void 0 : formStore2.get("allFormList"));
+    const pageType = computed(() => uiControl2 == null ? void 0 : uiControl2.get("pageType"));
+    const supportFullScreen = ref(!!document.fullscreenEnabled);
+    const jsonDialog = ref();
+    const tree = ref();
+    const treeRef = ref();
+    const filterText = ref();
+    const code = ref();
+    const propsData = ref({
+      value: "id",
+      label: "label",
+      children: "children"
+    });
+    const initTree = () => {
+      if (allFormList.value && allFormList.value.length > 0) {
+        const treeList = toRaw(allFormList.value).map((item) => {
+          return toTree(item);
+        });
+        return treeList;
+      } else {
+        return [];
+      }
+    };
+    function toTree(item) {
+      if (!item.layout) {
+        return {
+          id: item.id,
+          label: item.nameCn,
+          icon: item.icon
+        };
+      } else {
+        let children;
+        if (item.ControlType == "Grid") {
+          children = item.data.columns.map(
+            (colItem) => {
+              const children2 = colItem.list.map((listItem) => {
+                return toTree(listItem);
+              });
+              return {
+                id: "",
+                label: "GridChild",
+                children: children2
+              };
+            }
+          );
+        } else if (item.ControlType == "TableLayout") {
+          children = item.data.trs.map((trItem) => {
+            const children2 = trItem.tds.map((tdItem) => {
+              const children3 = tdItem.list.map((listItem) => {
+                return toTree(listItem);
+              });
+              return {
+                id: "",
+                label: "\u5217",
+                children: children3
+              };
+            });
+            return {
+              id: "",
+              label: "\u884C",
+              children: children2
+            };
+          });
+        } else if (item.ControlType == "Collapse" || item.ControlType == "Tabs") {
+          children = item.data.items.map((colItem) => {
+            const children2 = colItem.list.map((listItem) => {
+              return toTree(listItem);
+            });
+            return {
+              id: "",
+              label: item.nameCn + "-child",
+              children: children2
+            };
+          });
+        }
+        return {
+          id: item.id,
+          label: item.nameCn,
+          children
+        };
+      }
+    }
+    const dialog = ref(false);
+    const timer = null;
+    const filterNode = (value, data) => {
+      if (!value)
+        return true;
+      return data.label.includes(value);
+    };
+    const handleFormSave = (type) => {
+      proxy2.$EventBus.emit("setSave", type);
+    };
+    const handleFormPre = () => {
+      formStore2 == null ? void 0 : formStore2.set("preview", true);
+      proxy2.$EventBus.emit("openPreview");
+    };
+    const handleImportJson = () => {
+      try {
+        const result2 = JSON.parse(code.value);
+        const formList = result2.map((item) => {
+          return window.VueContext.$Flex.jsonToForm(item);
+        });
+        code.value = JSON.stringify(formList, null, 4);
+      } catch (e) {
+        code.value = JSON.stringify({});
+        console.error(e);
+        ElMessage({
+          type: "error",
+          message: "\u5BFC\u5165\u5931\u8D25\uFF0C\u6570\u636E\u683C\u5F0F\u4E0D\u5BF9"
+        });
+      }
+    };
+    watch(filterText, (val) => {
+      var _a;
+      (_a = treeRef.value) == null ? void 0 : _a.filter(val);
+    });
+    onMounted(() => {
+    });
+    onUnmounted(() => {
+      clearInterval(timer);
+    });
+    return {
+      code,
+      supportFullScreen,
+      handleFormSave,
+      handleFormPre,
+      jsonDialog,
+      pageType,
+      historyIndex,
+      historyLen,
+      fullscreen,
+      clearIsDisable,
+      filterText,
+      propsData,
+      dialog,
+      tree,
+      treeRef,
+      filterNode,
+      btnIsShow(type, btn) {
+        if (props.menu[type].length == 0) {
+          return true;
+        }
+        return props.menu[type].includes(btn);
+      },
+      updatePageType(type) {
+        uiControl2 == null ? void 0 : uiControl2.set("pageType", type);
+      },
+      handleClear: () => {
+        clearCanvas();
+        formStore2 == null ? void 0 : formStore2.setFormCurrentId("");
+      },
+      handleBack: () => {
+        hisContrl2 == null ? void 0 : hisContrl2.back();
+      },
+      handleForward: () => {
+        hisContrl2 == null ? void 0 : hisContrl2.go();
+      },
+      handleFullScreen: () => {
+        const value = !(uiControl2 == null ? void 0 : uiControl2.get("isFullscreen"));
+        uiControl2 == null ? void 0 : uiControl2.set("isFullscreen", value);
+        if (value) {
+          const element = document.documentElement;
+          if (element.requestFullscreen) {
+            element.requestFullscreen();
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+          } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+          } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+          }
+        } else {
+          const doc = document;
+          if (doc.exitFullscreen) {
+            doc.exitFullscreen();
+          } else if (doc.mozCancelFullScreen) {
+            doc.mozCancelFullScreen();
+          } else if (doc.webkitExitFullscreen) {
+            doc.webkitExitFullscreen();
+          } else if (doc.msExitFullscreen) {
+            doc.msExitFullscreen();
+          }
+        }
+      },
+      handleTree() {
+        dialog.value = true;
+        tree.value = initTree();
+      },
+      handleClose() {
+        dialog.value = false;
+      },
+      myClick(currentNode) {
+        formStore2 == null ? void 0 : formStore2.setFormCurrentId(currentNode.id);
+      },
+      ImportJson() {
+        jsonDialog.value.show();
+        jsonDialog.value.init("json\u5BFC\u5165", "icon-biaodan");
+      },
+      handleChange(file) {
+        const reader = new FileReader();
+        reader.readAsText(file.raw);
+        reader.onload = (e) => {
+          code.value = e.currentTarget.result;
+          handleImportJson();
+        };
+      },
+      closeCodeDialog() {
+        jsonDialog.value.close();
+      },
+      saveJson() {
+        debugger;
+        formStore2 == null ? void 0 : formStore2.updateAllFormList(JSON.parse(code.value));
+        jsonDialog.value.close();
+      },
+      exportJson(fileName = `demo.json`) {
+        let content = "data:application/json;charset=utf-8,";
+        try {
+          const result2 = JSON.stringify(
+            window.VueContext.$Flex.initFormToJson(allFormList.value)
+          );
+          content += result2;
+          const encodedUri = encodeURI(content);
+          const actions = document.createElement("a");
+          actions.setAttribute("href", encodedUri);
+          actions.setAttribute("download", fileName);
+          actions.click();
+          ElMessage({
+            type: "success",
+            message: "\u5BFC\u51FA\u6210\u529F"
+          });
+        } catch (e) {
+          ElMessage({
+            type: "error",
+            message: "\u5BFC\u51FA\u5931\u8D25,\u6570\u636E\u683C\u5F0F\u4E0D\u5BF9"
+          });
+        }
+      }
+    };
+  }
+});
+const _hoisted_1$3 = { class: "nav_list" };
+const _hoisted_2$2 = { class: "detailBtn" };
+const _hoisted_3$2 = { class: "pageBtn" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "el-button-group"
+};
+const _hoisted_5$1 = { class: "demo-drawer__content" };
+const _hoisted_6$1 = { class: "custom-tree-node" };
+const _hoisted_7 = { class: "custom_code" };
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tooltip = ElTooltip;
+  const _component_el_input = ElInput;
+  const _component_el_tree = ElTree;
+  const _component_el_drawer = ElDrawer;
+  const _component_JsonCode = resolveComponent("JsonCode");
+  const _component_el_button = ElButton;
+  const _component_el_upload = ElUpload;
+  const _component_el_footer = ElFooter;
+  const _component_custom_dialog = resolveComponent("custom-dialog");
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    createElementVNode("div", _hoisted_2$2, [
+      _ctx.btnIsShow("left", "save") ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 0,
+        class: "box-item",
+        effect: "dark",
+        content: "\u4FDD\u5B58",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["iconfontui icon-baocun", _ctx.clearIsDisable ? "noactive" : ""]),
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleFormSave())
+          }, null, 2)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.btnIsShow("left", "preview") ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 1,
+        class: "box-item",
+        effect: "dark",
+        content: "\u9884\u89C8",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["iconfontui icon-icon_yulan", _ctx.clearIsDisable ? "noactive" : ""]),
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleFormPre())
+          }, null, 2)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      !_ctx.fullscreen && _ctx.btnIsShow("left", "fullscreen") && _ctx.supportFullScreen ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 2,
+        class: "box-item",
+        effect: "dark",
+        content: "\u5168\u5C4F",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: "iconfontui icon-quanping",
+            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handleFullScreen())
+          })
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.fullscreen && _ctx.btnIsShow("left", "fullscreen") && _ctx.supportFullScreen ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 3,
+        class: "box-item",
+        effect: "dark",
+        content: "\u975E\u5168\u5C4F",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: "iconfontui icon-suoxiao1",
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleFullScreen())
+          })
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.btnIsShow("left", "delete") ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 4,
+        class: "box-item",
+        effect: "dark",
+        content: "\u6E05\u7A7A",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["iconfontui icon-shanchu1", _ctx.clearIsDisable ? "noactive" : ""]),
+            onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleClear())
+          }, null, 2)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.btnIsShow("left", "tree") ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 5,
+        class: "box-item",
+        effect: "dark",
+        content: "\u7EC4\u4EF6\u7ED3\u6784\u6811",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: "iconfontui icon-tree",
+            onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleTree())
+          })
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.btnIsShow("left", "undo") ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 6,
+        class: "box-item",
+        effect: "dark",
+        content: "\u64A4\u9500",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["iconfontui icon-24gl-undo3", _ctx.historyIndex == -1 ? "noactive" : ""]),
+            onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleBack())
+          }, null, 2)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      _ctx.btnIsShow("left", "redo") ? (openBlock(), createBlock(_component_el_tooltip, {
+        key: 7,
+        class: "box-item",
+        effect: "dark",
+        content: "\u91CD\u505A",
+        placement: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("span", {
+            class: normalizeClass(["iconfontui icon-24gl-redo3", _ctx.historyIndex == _ctx.historyLen - 1 ? "noactive" : ""]),
+            onClick: _cache[7] || (_cache[7] = ($event) => _ctx.handleForward())
+          }, null, 2)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true)
+    ]),
+    createElementVNode("div", _hoisted_3$2, [
+      _ctx.btnIsShow("right", "viewport") ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+        _ctx.btnIsShow("left", "redo") ? (openBlock(), createBlock(_component_el_tooltip, {
+          key: 0,
+          class: "box-item",
+          effect: "dark",
+          content: "PC",
+          placement: "top"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.pageType == "PC" ? "info" : ""),
+              onClick: _cache[8] || (_cache[8] = ($event) => _ctx.updatePageType("PC"))
+            }, _cache[16] || (_cache[16] = [
+              createElementVNode("i", { class: "iconfontui icon-diannao" }, null, -1)
+            ]), 2)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        _ctx.btnIsShow("left", "redo") ? (openBlock(), createBlock(_component_el_tooltip, {
+          key: 1,
+          class: "box-item",
+          effect: "dark",
+          content: "Pad",
+          placement: "top"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.pageType == "Pad" ? "info" : ""),
+              onClick: _cache[9] || (_cache[9] = ($event) => _ctx.updatePageType("Pad"))
+            }, _cache[17] || (_cache[17] = [
+              createElementVNode("i", { class: "iconfontui icon-pingbandiannao" }, null, -1)
+            ]), 2)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        _ctx.btnIsShow("left", "redo") ? (openBlock(), createBlock(_component_el_tooltip, {
+          key: 2,
+          class: "box-item",
+          effect: "dark",
+          content: "H5",
+          placement: "top"
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.pageType == "H5" ? "info" : ""),
+              onClick: _cache[10] || (_cache[10] = ($event) => _ctx.updatePageType("H5"))
+            }, _cache[18] || (_cache[18] = [
+              createElementVNode("i", { class: "iconfontui icon-shouji" }, null, -1)
+            ]), 2)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        createVNode(_component_el_tooltip, {
+          class: "box-item",
+          effect: "dark",
+          content: "\u5BFC\u5165json",
+          placement: "top"
+        }, {
+          default: withCtx(() => [
+            _ctx.btnIsShow("right", "json-import") ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              type: "text",
+              plain: "",
+              onClick: _cache[11] || (_cache[11] = (...args) => _ctx.ImportJson && _ctx.ImportJson(...args))
+            }, _cache[19] || (_cache[19] = [
+              createElementVNode("i", { class: "iconfontui icon-daoru" }, null, -1)
+            ]))) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        createVNode(_component_el_tooltip, {
+          class: "box-item",
+          effect: "dark",
+          content: "\u5BFC\u51FAjson",
+          placement: "top"
+        }, {
+          default: withCtx(() => [
+            _ctx.btnIsShow("right", "json-export") ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              type: "text",
+              plain: "",
+              onClick: _cache[12] || (_cache[12] = (...args) => _ctx.exportJson && _ctx.exportJson(...args))
+            }, _cache[20] || (_cache[20] = [
+              createElementVNode("i", { class: "iconfontui icon-daochu" }, null, -1)
+            ]))) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ])) : createCommentVNode("", true)
+    ]),
+    createVNode(_component_el_drawer, {
+      ref: "drawerRef",
+      modelValue: _ctx.dialog,
+      "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => _ctx.dialog = $event),
+      title: "\u8868\u5355\u7ED3\u6784\u6811",
+      "before-close": _ctx.handleClose,
+      direction: "ltr",
+      "custom-class": "demo-drawer"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_5$1, [
+          createVNode(_component_el_input, {
+            modelValue: _ctx.filterText,
+            "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => _ctx.filterText = $event),
+            placeholder: "Filter keyword"
+          }, null, 8, ["modelValue"]),
+          createVNode(_component_el_tree, {
+            data: _ctx.tree,
+            props: _ctx.propsData,
+            ref: "treeRef",
+            "default-expand-all": "",
+            "filter-node-method": _ctx.filterNode,
+            onNodeClick: _ctx.myClick,
+            style: { "margin-top": "20px" }
+          }, {
+            default: withCtx(({ node, data }) => [
+              createElementVNode("span", _hoisted_6$1, [
+                createElementVNode("i", {
+                  class: normalizeClass(["iconfontui", data.icon]),
+                  style: { "font-size": "12px", "margin-right": "5px" }
+                }, null, 2),
+                createElementVNode("span", null, toDisplayString(node.label), 1)
+              ])
+            ]),
+            _: 1
+          }, 8, ["data", "props", "filter-node-method", "onNodeClick"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue", "before-close"]),
+    createVNode(_component_custom_dialog, {
+      ref: "jsonDialog",
+      width: 800,
+      dialogclass: "codeDialog"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_7, [
+          createVNode(_component_JsonCode, {
+            value: _ctx.code,
+            "onUpdate:value": _cache[15] || (_cache[15] = ($event) => _ctx.code = $event)
+          }, null, 8, ["value"]),
+          createVNode(_component_el_upload, {
+            accept: "application/json",
+            class: "upload-demo",
+            action: "https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15",
+            "on-change": _ctx.handleChange
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_button, { type: "primary" }, {
+                default: withCtx(() => _cache[21] || (_cache[21] = [
+                  createTextVNode("\u5BFC\u5165json\u6587\u4EF6", -1)
+                ])),
+                _: 1,
+                __: [21]
+              })
+            ]),
+            _: 1
+          }, 8, ["on-change"])
+        ]),
+        createVNode(_component_el_footer, {
+          class: "my-Footer",
+          style: { "text-align": "center" }
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_button, {
+              type: "primary",
+              onClick: _ctx.saveJson
+            }, {
+              default: withCtx(() => _cache[22] || (_cache[22] = [
+                createTextVNode("\u786E\u5B9A", -1)
+              ])),
+              _: 1,
+              __: [22]
+            }, 8, ["onClick"]),
+            createVNode(_component_el_button, { onClick: _ctx.closeCodeDialog }, {
+              default: withCtx(() => _cache[23] || (_cache[23] = [
+                createTextVNode("\u5173\u95ED", -1)
+              ])),
+              _: 1,
+              __: [23]
+            }, 8, ["onClick"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 512)
+  ]);
+}
+var __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = defineComponent({
+  setup() {
+    return {
+      onLink() {
+        window.open("https://github.com/haixin-fang/vue-form-design");
+      }
+    };
+  }
+});
+const _hoisted_1$2 = { class: "header_nav" };
+const _hoisted_2$1 = { class: "logo" };
+const _hoisted_3$1 = {
+  version: "1.0",
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+  "color-interpolation-filters": "sRGB",
+  style: { "margin": "auto" }
+};
+const _hoisted_4 = { fill: "rgba(0, 0, 0, .9)" };
+const _hoisted_5 = {
+  x: "0",
+  y: "0",
+  width: "60",
+  height: "69.34652458334297",
+  filtersec: "colorsb4782532531",
+  class: "image-svg-svg primary",
+  style: { "overflow": "visible" }
+};
+const _hoisted_6 = { class: "starfish-link" };
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+    createElementVNode("div", _hoisted_2$1, [
+      (openBlock(), createElementBlock("svg", _hoisted_3$1, [
+        createElementVNode("g", _hoisted_4, [
+          createElementVNode("g", null, [
+            createElementVNode("g", null, [
+              _cache[2] || (_cache[2] = createElementVNode("rect", {
+                fill: "#ffffff",
+                "fill-opacity": "0",
+                "stroke-width": "2",
+                x: "0",
+                y: "0",
+                width: "60",
+                height: "69.34652458334297",
+                class: "image-rect"
+              }, null, -1)),
+              (openBlock(), createElementBlock("svg", _hoisted_5, _cache[1] || (_cache[1] = [
+                createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.190000534057617 8.3100004196167"><g><g fill-rule="evenodd"><path fill="#054ba3" d="M1.8 2.4L0 2.08v4.15L1.8 2.4z"></path><path fill="#0691ca" d="M4.21 1.72L3.6 0 0 2.08l4.21-.36z"></path><path fill="#054ba3" d="M5.4 5.9l1.79.33V2.08L5.4 5.9z"></path><path fill="#0691ca" d="M2.98 6.59l.62 1.72 3.59-2.08-4.21.36z"></path><path fill="#44c2f4" d="M0 6.23l3.6 2.08-2.42-3.47L0 6.23z"></path><path fill="#054ba3" d="M6.01 3.47l1.18-1.39L3.6 0l2.41 3.47z"></path></g></g></svg>', 1)
+              ])))
+            ])
+          ]),
+          _cache[3] || (_cache[3] = createElementVNode("g", { transform: "translate(67,17.723264694213867)" }, [
+            createElementVNode("g", {
+              "data-gra": "path-name",
+              "fill-rule": "",
+              class: "tp-name iconsvg-namesvg"
+            }, [
+              createElementVNode("g", { transform: "scale(1)" }, [
+                createElementVNode("g", null, [
+                  createElementVNode("path", {
+                    d: "M9.58 1.95L7.93 1.95Q3.45 1.85 0.19 1.56L0.19 1.56 0.92-3.7Q5.69-3.26 8.56-3.16L8.56-3.16 10.21-3.16Q13.33-3.16 14.57-3.94 15.81-4.72 16.1-6.18L16.1-6.18Q16.15-6.42 16.15-6.86L16.15-6.86Q16.15-8.07 15.76-8.46L15.76-8.46Q15.42-9 14.64-9.19 13.86-9.39 11.67-9.63L11.67-9.63 10.55-9.78Q8.02-9.97 5.74-10.65L5.74-10.65Q3.94-11.33 3.06-12.62 2.19-13.91 2.19-16.05L2.19-16.05Q2.19-16.49 2.29-17.56L2.29-17.56Q2.63-20.52 3.99-22.2 5.35-23.88 7.78-24.61 10.21-25.34 14.06-25.34L14.06-25.34 16.05-25.34 22.91-25.29 22.28-20.14 13.42-20.14Q11.28-20.14 10.16-19.92 9.05-19.7 8.54-19.19 8.02-18.68 7.88-17.7L7.88-17.7Q7.83-17.46 7.83-17.07L7.83-17.07Q7.83-16.29 8.27-15.76L8.27-15.76Q8.75-15.17 9.7-14.96 10.65-14.74 13.23-14.44L13.23-14.44Q16.29-14.15 18.24-13.52L18.24-13.52Q19.94-12.94 20.84-11.53 21.74-10.12 21.74-7.88L21.74-7.88Q21.74-6.81 21.64-6.23L21.64-6.23Q21.06-1.7 18.24 0.12 15.42 1.95 9.58 1.95L9.58 1.95ZM30.79-20.14L24.71-20.14 25.34-25.34 31.47-25.34 32.29-32.25 37.89-32.25 37.06-25.34 45.33-25.34 44.7-20.14 36.43-20.14 34.92-7.73Q34.87-7.39 34.87-6.81L34.87-6.81Q34.87-3.55 38.08-3.55L38.08-3.55Q39.44-3.55 42.95-3.65L42.95-3.65 42.31 1.65Q40.37 1.75 37.45 1.75L37.45 1.75Q33.46 1.75 31.27-0.05 29.08-1.85 29.08-5.4L29.08-5.4Q29.08-5.79 29.18-6.86L29.18-6.86 30.79-20.14ZM68.28 1.75L54.18 1.75Q50.53 1.75 48.34-0.32 46.16-2.38 46.16-5.69L46.16-5.69Q46.16-6.42 46.2-6.81L46.2-6.81Q46.64-9.82 47.76-11.6 48.88-13.37 50.99-14.18 53.11-14.98 56.56-14.98L56.56-14.98 64.73-14.98 64.78-15.37Q64.83-15.61 64.83-16.05L64.83-16.05Q64.83-17.95 63.57-19.11 62.3-20.28 59.63-20.28L59.63-20.28 58.36-20.28Q54.03-20.28 50.58-20.04L50.58-20.04 51.31-25 52.72-25.1Q53.5-25.14 55.47-25.24 57.44-25.34 58.9-25.34L58.9-25.34 60.21-25.34Q65.22-25.34 67.8-22.96 70.38-20.57 70.38-16.58L70.38-16.58Q70.38-16.15 70.28-15.08L70.28-15.08 68.28 1.75ZM51.8-6.81L51.75-6.23Q51.75-4.81 52.55-4.06 53.35-3.31 54.86-3.31L54.86-3.31 63.32-3.31 64.15-10.12 56.08-10.16Q54.23-10.21 53.13-9.46 52.04-8.71 51.8-6.81L51.8-6.81ZM92.5-25.19L91.63-20.04Q88.61-20.14 87.74-20.14L87.74-20.14Q84.63-20.14 83.07-18.65 81.51-17.17 81.12-13.76L81.12-13.76 79.18 1.75 73.59 1.75 75.48-13.62Q76.21-19.79 79.2-22.57 82.19-25.34 88.37-25.34L88.37-25.34Q90.8-25.34 92.5-25.19L92.5-25.19ZM105.1-26.46L104.96-25.34 120.52-25.34 117.16 1.75 111.57 1.75 114.29-20.14 104.32-20.14 101.65 1.75 96.06 1.75 98.73-20.14 93.09-20.14 93.72-25.34 99.36-25.34 99.61-27.33Q100.68-35.94 109.53-35.94L109.53-35.94Q111.72-35.94 114.63-35.7L114.63-35.7 113.86-30.54 112.25-30.64Q109.92-30.74 109.43-30.74L109.43-30.74Q107.29-30.74 106.32-29.69 105.34-28.65 105.1-26.46L105.1-26.46ZM131.46 1.95L129.81 1.95Q125.33 1.85 122.08 1.56L122.08 1.56 122.8-3.7Q127.57-3.26 130.44-3.16L130.44-3.16 132.09-3.16Q135.21-3.16 136.45-3.94 137.69-4.72 137.98-6.18L137.98-6.18Q138.03-6.42 138.03-6.86L138.03-6.86Q138.03-8.07 137.64-8.46L137.64-8.46Q137.3-9 136.52-9.19 135.74-9.39 133.55-9.63L133.55-9.63 132.43-9.78Q129.91-9.97 127.62-10.65L127.62-10.65Q125.82-11.33 124.94-12.62 124.07-13.91 124.07-16.05L124.07-16.05Q124.07-16.49 124.17-17.56L124.17-17.56Q124.51-20.52 125.87-22.2 127.23-23.88 129.66-24.61 132.09-25.34 135.94-25.34L135.94-25.34 137.93-25.34 144.79-25.29 144.16-20.14 135.3-20.14Q133.16-20.14 132.05-19.92 130.93-19.7 130.42-19.19 129.91-18.68 129.76-17.7L129.76-17.7Q129.71-17.46 129.71-17.07L129.71-17.07Q129.71-16.29 130.15-15.76L130.15-15.76Q130.63-15.17 131.58-14.96 132.53-14.74 135.11-14.44L135.11-14.44Q138.17-14.15 140.12-13.52L140.12-13.52Q141.82-12.94 142.72-11.53 143.62-10.12 143.62-7.88L143.62-7.88Q143.62-6.81 143.52-6.23L143.52-6.23Q142.94-1.7 140.12 0.12 137.3 1.95 131.46 1.95L131.46 1.95ZM147.41 1.75L151.99-35.75 157.58-35.75 156.31-25.34 162.93-25.34Q173-25.34 173-16.1L173-16.1Q173-14.98 172.85-13.67L172.85-13.67 170.95 1.75 165.36 1.75 167.26-13.81Q167.35-14.79 167.35-15.17L167.35-15.17Q167.35-20.14 162.3-20.14L162.3-20.14 155.68-20.14 153.01 1.75 147.41 1.75Z",
+                    transform: "translate(-0.1899999976158142, 35.939998626708984)"
+                  })
+                ])
+              ])
+            ])
+          ], -1))
+        ])
+      ]))
+    ]),
+    createElementVNode("div", _hoisted_6, [
+      (openBlock(), createElementBlock("svg", {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onLink && _ctx.onLink(...args))
+      }, _cache[4] || (_cache[4] = [
+        createElementVNode("path", {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M12 2.23999C6.475 2.23999 2 6.71499 2 12.24C2 16.665 4.8625 20.4025 8.8375 21.7275C9.3375 21.815 9.525 21.515 9.525 21.2525C9.525 21.015 9.5125 20.2275 9.5125 19.39C7 19.8525 6.35 18.7775 6.15 18.215C6.0375 17.9275 5.55 17.04 5.125 16.8025C4.775 16.615 4.275 16.1525 5.1125 16.14C5.9 16.1275 6.4625 16.865 6.65 17.165C7.55 18.6775 8.9875 18.2525 9.5625 17.99C9.65 17.34 9.9125 16.9025 10.2 16.6525C7.975 16.4025 5.65 15.54 5.65 11.715C5.65 10.6275 6.0375 9.72749 6.675 9.02749C6.575 8.77749 6.225 7.75249 6.775 6.37749C6.775 6.37749 7.6125 6.11499 9.525 7.40249C10.325 7.17749 11.175 7.06499 12.025 7.06499C12.875 7.06499 13.725 7.17749 14.525 7.40249C16.4375 6.10249 17.275 6.37749 17.275 6.37749C17.825 7.75249 17.475 8.77749 17.375 9.02749C18.0125 9.72749 18.4 10.615 18.4 11.715C18.4 15.5525 16.0625 16.4025 13.8375 16.6525C14.2 16.965 14.5125 17.565 14.5125 18.5025C14.5125 19.84 14.5 20.915 14.5 21.2525C14.5 21.515 14.6875 21.8275 15.1875 21.7275C17.1727 21.0573 18.8977 19.7815 20.1198 18.0795C21.3419 16.3776 21.9995 14.3352 22 12.24C22 6.71499 17.525 2.23999 12 2.23999Z",
+          fill: "currentColor"
+        }, null, -1)
+      ])))
+    ])
+  ]);
+}
+var __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = defineComponent({
+  props: {
+    type: {
+      type: String
+    }
+  },
+  setup(props) {
+    const target = ref();
+    const { uiControl: uiControl2 } = inject("control") || {};
+    let getso;
+    onMounted(() => {
+      if (!target.value)
+        return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true
+      }).on("drag", (e) => {
+        if (!target.value || !uiControl2)
+          return;
+        let { right, left } = {
+          ...toRaw(uiControl2 == null ? void 0 : uiControl2.get("columnWidth"))
+        };
+        if (props.type == "right") {
+          right -= e.deltaX;
+        } else {
+          left += e.deltaX;
+        }
+        uiControl2 == null ? void 0 : uiControl2.set("columnWidth", { left, right });
+      });
+    });
+    onUnmounted(() => {
+      getso == null ? void 0 : getso.unset();
+    });
+    return {
+      target
+    };
+  }
+});
+const _hoisted_1$1 = {
+  class: "starfish-editor-resizer",
+  ref: "target"
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, null, 512);
+}
+var Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = defineComponent({
+  props: {
+    headerShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {
+    Resizer
+  },
+  setup() {
+    const { uiControl: uiControl2 } = inject("control") || {};
+    const columnWidth = computed(
+      () => (uiControl2 == null ? void 0 : uiControl2.get("columnWidth")) || {}
+    );
+    const leftClose = computed(() => uiControl2 == null ? void 0 : uiControl2.get("leftClose"));
+    const rightClose = computed(() => uiControl2 == null ? void 0 : uiControl2.get("rightClose"));
+    function onLeftArrow() {
+      uiControl2 == null ? void 0 : uiControl2.set("leftClose", !leftClose.value);
+    }
+    function onRightArrow() {
+      uiControl2 == null ? void 0 : uiControl2.set("rightClose", !rightClose.value);
+    }
+    return {
+      columnWidth,
+      leftClose,
+      rightClose,
+      onLeftArrow,
+      onRightArrow
+    };
+  }
+});
+const _hoisted_1 = { class: "starfish-editor" };
+const _hoisted_2 = { class: "starfish-editor-nav" };
+const _hoisted_3 = { class: "starfish-editor-framework-center" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a, _b;
+  const _component_resizer = resolveComponent("resizer");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "nav")
+    ]),
+    createElementVNode("div", {
+      class: normalizeClass(["starfish-editor-content", !_ctx.headerShow ? "starfish-editor-content-page" : ""])
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass(["starfish-editor-framework-left", _ctx.leftClose ? "hide-status" : ""]),
+        style: normalizeStyle(`width:${_ctx.leftClose ? 0 : (_a = _ctx.columnWidth) == null ? void 0 : _a.left}px`)
+      }, [
+        renderSlot(_ctx.$slots, "left"),
+        createElementVNode("div", {
+          class: "container-left-arrow",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onLeftArrow && _ctx.onLeftArrow(...args))
+        })
+      ], 6),
+      createVNode(_component_resizer, { type: "left" }),
+      createElementVNode("div", _hoisted_3, [
+        renderSlot(_ctx.$slots, "navlist"),
+        renderSlot(_ctx.$slots, "workspace")
+      ]),
+      createVNode(_component_resizer, { type: "right" }),
+      createElementVNode("div", {
+        class: normalizeClass(["starfish-editor-framework-right", _ctx.rightClose ? "hide-status" : ""]),
+        style: normalizeStyle(`width:${_ctx.rightClose ? 0 : (_b = _ctx.columnWidth) == null ? void 0 : _b.right}px`)
+      }, [
+        renderSlot(_ctx.$slots, "propsPanel"),
+        createElementVNode("div", {
+          class: "container-right-arrow",
+          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onRightArrow && _ctx.onRightArrow(...args))
+        })
+      ], 6)
+    ], 2),
+    renderSlot(_ctx.$slots, "other")
+  ]);
+}
+var Framework = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const state = reactive({
+  action: [
+    {
+      funcName: "mounted",
+      type: "mounted",
+      methods: "mounted",
+      funcStr: "",
+      disabled: true
+    },
+    {
+      funcName: "updated",
+      type: "updated",
+      methods: "updated",
+      funcStr: "",
+      disabled: true
+    }
+  ],
+  currentAction: null
+});
+class Action {
+  set(name, value) {
+    state[name] = value;
+  }
+  get(name) {
+    return state[name];
+  }
+}
+var actionContrl = new Action();
+function listenGlobalKeyDown(list, dom) {
+  const keycons = new KeyController(dom);
+  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+  const ctrl = isMac ? "meta" : "ctrl";
+  keycons.keyup("delete", (e) => {
+    e.inputEvent.preventDefault();
+    list.delete();
+  }).keyup("backspace", (e) => {
+    e.inputEvent.preventDefault();
+    list.delete();
+  }).keydown([ctrl, "c"], (e) => {
+    e.inputEvent.preventDefault();
+    list.copy();
+  }).keydown([ctrl, "e"], (e) => {
+    e.inputEvent.preventDefault();
+    list.clearCanvas();
+  }).keydown([ctrl, "v"], (e) => {
+    e.inputEvent.preventDefault();
+    list.paste();
+  }).keydown([ctrl, "z"], (e) => {
+    e.inputEvent.preventDefault();
+    hisContrl == null ? void 0 : hisContrl.back();
+  }).keydown([ctrl, "x"], (e) => {
+    e.inputEvent.preventDefault();
+    list.cut();
+  }).keydown([ctrl, "up"], (e) => {
+    e.inputEvent.preventDefault();
+    list.onTop();
+  }).keydown([ctrl, "down"], (e) => {
+    e.inputEvent.preventDefault();
+    list.onBottom();
+  });
+  return keycons;
+}
+var starfishEditor_vue_vue_type_style_index_0_lang = "";
+const _sfc_main = defineComponent({
+  name: "StarfishEditor",
+  components: {
+    Framework,
+    NavList: __unplugin_components_1,
+    ComponentList: __unplugin_components_2,
+    Workspace: __unplugin_components_3,
+    PropsPanel: __unplugin_components_4,
+    FormPreview: defineAsyncComponent(() => Promise.resolve().then(function() {
+      return FormPreview;
+    })),
+    Nav: __unplugin_components_0
+  },
+  props: {
+    basicFields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    layoutFields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    shortcutDisabled: {
+      type: Boolean,
+      default: false
+    },
+    headerShow: {
+      type: Boolean,
+      default: true
+    },
+    menu: {
+      type: Object,
+      default: () => ({ left: [], right: [], column: true })
+    },
+    panel: {
+      type: Array,
+      default: () => ["form", "json", "global"]
+    }
+  },
+  setup(props, { emit }) {
+    const workspace = ref();
+    const formPreview = ref();
+    let dom;
+    const mouseenterHandler = () => {
+      dom == null ? void 0 : dom.focus();
+    };
+    const mouseleaveHandler = () => {
+      dom == null ? void 0 : dom.blur();
+    };
+    const control = {
+      uiControl,
+      hisContrl,
+      formStore,
+      actionContrl,
+      store
+    };
+    let keycons;
+    onMounted(() => {
+      var _a;
+      dom = (_a = workspace.value) == null ? void 0 : _a.$el;
+      if (!props.shortcutDisabled) {
+        dom.addEventListener("mouseenter", mouseenterHandler);
+        dom.addEventListener("mouseleave", mouseleaveHandler);
+        keycons = listenGlobalKeyDown(result, dom);
+      }
+    });
+    onUnmounted(() => {
+      if (!props.shortcutDisabled) {
+        dom.removeEventListener("mouseenter", mouseenterHandler);
+        dom.removeEventListener("mouseleave", mouseleaveHandler);
+        keycons.destroy();
+      }
+    });
+    provide("control", control);
+    return {
+      workspace,
+      formPreview,
+      onSave() {
+        emit("save", formStore == null ? void 0 : formStore.get("AllFormResult"));
+      },
+      getJson() {
+        window.VApp.$EventBus.emit("setSave");
+      },
+      setJson(jsonList) {
+        const newJson = jsonList.map((json) => {
+          return window.VApp.$Flex.jsonToForm(json);
+        });
+        formStore.updateAllFormList(newJson);
+        formStore == null ? void 0 : formStore.set("save", true);
+      }
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Nav = __unplugin_components_0;
+  const _component_nav_list = __unplugin_components_1;
+  const _component_component_list = __unplugin_components_2;
+  const _component_workspace = __unplugin_components_3;
+  const _component_props_panel = __unplugin_components_4;
+  const _component_form_preview = __unplugin_components_5;
+  const _component_framework = resolveComponent("framework");
+  return openBlock(), createBlock(_component_framework, { headerShow: _ctx.headerShow }, createSlots({
+    navlist: withCtx(() => [
+      createVNode(_component_nav_list, { menu: _ctx.menu }, null, 8, ["menu"])
+    ]),
+    left: withCtx(() => [
+      createVNode(_component_component_list, {
+        "basic-fields": _ctx.basicFields,
+        "layout-fields": _ctx.layoutFields
+      }, null, 8, ["basic-fields", "layout-fields"])
+    ]),
+    workspace: withCtx(() => [
+      createVNode(_component_workspace, { ref: "workspace" }, null, 512)
+    ]),
+    other: withCtx(() => [
+      createVNode(_component_form_preview, { ref: "formPreview" }, null, 512)
+    ]),
+    _: 2
+  }, [
+    _ctx.headerShow ? {
+      name: "nav",
+      fn: withCtx(() => [
+        createVNode(_component_Nav)
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.panel.length > 0 ? {
+      name: "propsPanel",
+      fn: withCtx(() => [
+        createVNode(_component_props_panel, {
+          onSave: _ctx.onSave,
+          column: _ctx.menu.column,
+          panel: _ctx.panel
+        }, null, 8, ["onSave", "column", "panel"])
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1032, ["headerShow"]);
+}
+var StarfishEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+var main = {
+  install: (app) => {
+    app.config.globalProperties.$EventBus = vm;
+    app.config.globalProperties.$Flex = flex;
+    window.VApp = app.config.globalProperties;
+    window.VueContext = {
+      $Flex: flex
+    };
+    app.use(StarfishForm);
+    const starfishformlist = app.config.globalProperties.$formcomponents;
+    for (const key in starfishformlist) {
+      app.component(key, starfishformlist[key]);
+    }
+    app.component(
+      "CustomDialog",
+      defineAsyncComponent(() => import("./CustomDialog.js"))
+    );
+    app.component(
+      "ConditionSelect",
+      defineAsyncComponent(() => import("./ConditionSelect.js"))
+    );
+    app.component(
+      "HighConditionSelect",
+      defineAsyncComponent(() => import("./ConditionModule.js"))
+    );
+    app.component(
+      "draggable",
+      defineAsyncComponent({
+        loader: () => import("vuedraggable"),
+        loadingComponent: Loading
+      })
+    );
+    app.component(
+      "Shape",
+      defineAsyncComponent(() => Promise.resolve().then(function() {
+        return Shape;
+      }))
+    );
+    app.component(
+      "FormStyle",
+      defineAsyncComponent(() => import("./formStyle.js"))
+    );
+    app.component("StarfishEditor", StarfishEditor);
+  }
+};
+export { _export_sfc as _, formStore as f, main as m };