epic-designer-gold 1.0.5 → 1.0.7

package/dist/index-CD00bJyK.js

@@ -0,0 +1,839 @@
+import { defineComponent as re, inject as A, ref as M, computed as q, watch as fe, openBlock as H, createElementBlock as F, Fragment as he, withDirectives as Ce, createElementVNode as V, normalizeClass as pe, toDisplayString as Qe, unref as u, createVNode as B, createCommentVNode as ie, withCtx as Z, createTextVNode as de, vShow as Te, createBlock as ve, mergeProps as Ke, useAttrs as Xe, provide as Ye, onUnmounted as qe, resolveComponent as Ge, createSlots as je, renderList as Ne, shallowRef as et, watchEffect as tt, nextTick as ze, normalizeStyle as ye, renderSlot as ot, onMounted as nt } from "vue";
+import { p as oe, o as D, g as te, a as we, h as st, d as ke, q as lt } from "./pluginManager-BCnrHPYv.js";
+import { u as $e, a as at, b as _e, _ as it, c as rt, d as ct, e as dt, w as ut, f as ht } from "./index-GIYb626z.js";
+import { ElDropdown as ft, ElDropdownMenu as pt, ElDropdownItem as ue } from "element-plus";
+import { _ as me } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
+import { d as vt } from "./vuedraggable.umd-D2S7Eo7p.js";
+const mt = { class: "epic-widget-action-item whitespace-nowrap" }, gt = {
+  key: 0,
+  class: "flex items-center"
+}, xt = {
+  key: 0,
+  title: "单元格操作",
+  class: "epic-widget-action-item pointer-events-auto"
+}, yt = /* @__PURE__ */ re({
+  __name: "previewWidgets",
+  setup(ne, { expose: U }) {
+    const v = A("pageManager", {}), o = A("pageSchema"), t = A("designer"), b = A("designerProps"), a = A("revoke"), m = M(null), I = M(null), w = M(null), P = M(!1), i = M(!1), r = M(!0), h = M("top"), { canvasScale: c, disabledZoom: $ } = $e();
+    let s = null;
+    const Y = q(() => {
+      const e = t.state.checkedNode;
+      return !(!(e != null && e.id) || b.value.lockDefaultSchemaEdit && v.defaultComponentIds.value.includes(e == null ? void 0 : e.id) || e.type === "table-cell");
+    }), Q = q(() => {
+      const e = t.state.checkedNode;
+      return (e == null ? void 0 : e.type) === "eTd";
+    });
+    q(() => {
+      const e = t.state.checkedNode;
+      return (e == null ? void 0 : e.type) === "table";
+    });
+    const O = q(() => {
+      var S, C, R, f, J, X;
+      const e = v.componentInstances.value, l = (S = t.state.checkedNode) == null ? void 0 : S.id;
+      if ((R = (C = t.state.checkedNode) == null ? void 0 : C.componentProps) != null && R.hidden)
+        return null;
+      const x = oe.getComponentConfingByType((f = t.state.checkedNode) == null ? void 0 : f.type) ?? null;
+      if (!l || !(e != null && e[l]))
+        return null;
+      if (x != null && x.defaultSchema.input && ((J = t.state.checkedNode) == null ? void 0 : J.noFormItem) !== !0)
+        return (X = e[l + "formItem"]) == null ? void 0 : X.$el;
+      const n = e[l];
+      return !(n != null && n.$el) || (n == null ? void 0 : n.$el.nodeName) === "#text" || !(n != null && n.$el.getBoundingClientRect) ? null : n == null ? void 0 : n.$el;
+    }), g = q(() => {
+      var S, C, R, f;
+      const e = v.componentInstances.value, l = (S = t.state.hoverNode) == null ? void 0 : S.id, x = oe.getComponentConfingByType((C = t.state.hoverNode) == null ? void 0 : C.type) ?? null;
+      if (!l || !(e != null && e[l]))
+        return null;
+      if (x != null && x.defaultSchema.input && ((R = t.state.hoverNode) == null ? void 0 : R.noFormItem) !== !0)
+        return (f = e[l + "formItem"]) == null ? void 0 : f.$el;
+      const n = e[l];
+      return (n == null ? void 0 : n.$el.nodeName) === "#text" ? null : n == null ? void 0 : n.$el;
+    }), { mutationObserver: k, observerConfig: y } = Re(K), { startTimedQuery: j, stopTimedQuery: ce } = at(K);
+    fe(
+      () => O.value,
+      (e) => {
+        if (e) {
+          P.value = !0, k.observe(e, y);
+          const l = e.parentNode;
+          l && (l.ondragstart = () => {
+            r.value = !1, j();
+          }, l.ondragend = () => {
+            r.value = !0, ce();
+          }), K();
+        } else
+          P.value = !1;
+      }
+    );
+    const { mutationObserver: z, observerConfig: L } = Re(be);
+    fe(
+      () => g.value,
+      (e) => {
+        e && (z.observe(e, L), be());
+      }
+    );
+    let W = 0;
+    fe(
+      () => {
+        var e;
+        return (e = t.state.hoverNode) == null ? void 0 : e.id;
+      },
+      (e) => {
+        if (e) {
+          i.value = !0, clearTimeout(W);
+          return;
+        }
+        W = setTimeout(() => {
+          i.value = !1;
+        }, 300);
+      }
+    );
+    let ee = 0, se = 0;
+    function K() {
+      const e = O.value;
+      if (!e || !s) return;
+      const { top: l, left: x } = s == null ? void 0 : s.getBoundingClientRect(), { top: n, left: S, width: C, height: R } = e.getBoundingClientRect(), f = $.value ? 1 : c.value, J = n - l + ((s == null ? void 0 : s.scrollTop) ?? 0) * f, X = S - x + ((s == null ? void 0 : s.scrollLeft) ?? 0) * f, G = R / f;
+      m.value && (m.value.style.width = `${C / f}px`, m.value.style.height = `${G}px`, m.value.style.top = `${J / f}px`, m.value.style.left = `${X / f}px`, Ae(J, X)), w.value && (J < 45 && G < 100 ? (w.value.style.top = "", w.value.style.bottom = "-30px", w.value.style["border-radius"] = "0px 0px 4px 4px", h.value = "bottom") : J < 45 ? (w.value.style.top = "0px", w.value.style["border-radius"] = "0px 0px 4px 0", h.value = "center") : (w.value.style.top = "-30px", w.value.style["border-radius"] = "4px 4px 0px 0px", h.value = "top"));
+    }
+    function Ae(e, l) {
+      const x = O.value;
+      if (!s || !x) return;
+      const n = s.getBoundingClientRect(), { width: S } = x.getBoundingClientRect(), C = $.value ? 1 : c.value, R = e / C - n.top;
+      let f = l / C - n.left + S / C;
+      f < n.width && (f = 0);
+      const J = s.scrollTop - n.height / 3 + 60, X = s.scrollTop + n.height / 3 * 2, G = s.scrollLeft - n.width + 200, le = s.scrollLeft + n.width - 200;
+      Math.abs(R - ee) < 10 && Math.abs(f - se) < 10 || (ee = R, se = f, !(R > J && R < X && f > G && f < le) && (s.scrollTop = R, s.scrollLeft = f));
+    }
+    function be() {
+      var G, le;
+      const e = g.value;
+      if (!e) return;
+      const { top: l, left: x } = (s == null ? void 0 : s.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: n, left: S, width: C, height: R } = ((G = e.getBoundingClientRect) == null ? void 0 : G.call(e)) ?? ((le = e.nextElementSibling) == null ? void 0 : le.getBoundingClientRect()), f = $.value ? 1 : c.value, J = n - l + ((s == null ? void 0 : s.scrollTop) ?? 0) * f, X = S - x + ((s == null ? void 0 : s.scrollLeft) ?? 0) * f;
+      I.value && (I.value.style.width = `${C / f}px`, I.value.style.height = `${R / f}px`, I.value.style.top = `${J / f}px`, I.value.style.left = `${X / f}px`);
+    }
+    function Re(e) {
+      const l = window.MutationObserver, x = {
+        childList: !0,
+        attributes: !0,
+        subtree: !0
+      };
+      return {
+        mutationObserver: new l(e),
+        observerConfig: x
+      };
+    }
+    function Ue(e) {
+      var l, x, n, S, C, R, f, J, X, G, le, De, Be, Me, Le, Ee, He, Ie;
+      if (e === "right") {
+        const d = t.state.matched.find((N) => N.type === "eTable"), _ = D(o.schemas, (d == null ? void 0 : d.id) ?? "root"), T = (x = D(o.schemas, ((l = t.state.checkedNode) == null ? void 0 : l.id) ?? "root")) == null ? void 0 : x.index;
+        (n = _.list) == null || n[0].children.forEach((N) => {
+          var E;
+          (E = N.children) == null || E.splice(T + 1, 0, {
+            type: "eTd",
+            id: "eTd_" + te(),
+            children: []
+          });
+        }), a.push(o.schemas, "添加右列");
+      } else if (e === "left") {
+        const d = t.state.matched.find((N) => N.type === "eTable"), _ = D(o.schemas, (d == null ? void 0 : d.id) ?? "root"), T = (C = D(o.schemas, ((S = t.state.checkedNode) == null ? void 0 : S.id) ?? "root")) == null ? void 0 : C.index;
+        (R = _.list) == null || R[0].children.forEach((N) => {
+          var E;
+          T === 0 ? N.children.unshift({
+            type: "eTd",
+            id: "eTd_" + te(),
+            children: []
+          }) : (E = N.children) == null || E.splice(T - 1, 0, {
+            type: "eTd",
+            id: "eTd_" + te(),
+            children: []
+          });
+        }), a.push(o.schemas, "添加左列");
+      } else if (e === "top") {
+        const d = t.state.matched.find((p) => p.type === "eTable"), _ = t.state.matched.find((p) => p.type === "eTr"), T = D(o.schemas, (d == null ? void 0 : d.id) ?? "root"), N = D(o.schemas, (_ == null ? void 0 : _.id) ?? "root"), E = D(o.schemas, ((f = t.state.checkedNode) == null ? void 0 : f.id) ?? "root");
+        N.index === 0 ? (J = T.list) == null || J[0].children.unshift({
+          type: "eTr",
+          id: "eTr_" + te(),
+          children: we(E.list).map((p) => (p.id = "eTd_" + te(), p.children = [], p))
+        }) : (X = T.list) == null || X[0].children.splice(N.index - 1, 0, {
+          type: "eTr",
+          id: "eTr_" + te(),
+          children: we(E.list).map((p) => (p.id = "eTd_" + te(), p.children = [], p))
+        }), a.push(o.schemas, "添加上列");
+      } else if (e === "bottom") {
+        const d = t.state.matched.find((p) => p.type === "eTable"), _ = t.state.matched.find((p) => p.type === "eTr"), T = D(o.schemas, (d == null ? void 0 : d.id) ?? "root"), N = D(o.schemas, (_ == null ? void 0 : _.id) ?? "root"), E = D(o.schemas, ((G = t.state.checkedNode) == null ? void 0 : G.id) ?? "root");
+        (le = T.list) == null || le[0].children.splice(N.index + 1, 0, {
+          type: "eTr",
+          id: "eTr_" + te(),
+          children: we(E.list).map((p) => (p.id = "eTd_" + te(), p.children = [], p))
+        }), a.push(o.schemas, "添加下列");
+      } else if (e === "merge-right") {
+        t.state.matched.find((N) => N.type === "eTr");
+        const d = D(o.schemas, ((De = t.state.checkedNode) == null ? void 0 : De.id) ?? "root");
+        if (d.index === d.list.length - 1)
+          return;
+        const _ = d.list[d.index], T = d.list[d.index + 1];
+        _.colspan = (_.colspan || 1) + (T.colspan || 1), d.list.splice(d.index + 1, 1), a.push(o.schemas, "向右合并");
+      } else if (e === "merge-bottom") {
+        const d = t.state.matched.find((p) => p.type === "eTable"), _ = t.state.matched.find((p) => p.type === "eTr");
+        D(o.schemas, (d == null ? void 0 : d.id) ?? "root");
+        const T = D(o.schemas, (_ == null ? void 0 : _.id) ?? "root"), E = D(o.schemas, ((Be = t.state.checkedNode) == null ? void 0 : Be.id) ?? "root").index;
+        if (T.index !== T.list.length - 1) {
+          const p = T.list[T.index];
+          let ge = 0, xe = 0;
+          p.children.forEach((ae, Se) => {
+            ae.colSpan || (ae.colSpan = 1), xe = xe + ae.colSpan, xe === E + 1 && (ge = Se);
+          }), p.children[ge].rowSpan = (p.children[ge].rowSpan || 1) + 1;
+          const Ze = T.list[T.index + p.children[ge].rowSpan - 1];
+          let Oe = 0, Ve = 0;
+          p.children.forEach((ae, Se) => {
+            ae.colSpan || (ae.colSpan = 1), Ve = Ve + ae.colSpan, xe === E + 1 && (Oe = Se);
+          }), Ze.children.splice(Oe, 1);
+        }
+        a.push(o.schemas, "向下合并");
+      } else if (e === "delete-col") {
+        const d = t.state.matched.find((N) => N.type === "eTable"), _ = D(o.schemas, (d == null ? void 0 : d.id) ?? "root"), T = (Le = D(o.schemas, ((Me = t.state.checkedNode) == null ? void 0 : Me.id) ?? "root")) == null ? void 0 : Le.index;
+        (Ee = _.list) == null || Ee[0].children.forEach((N) => {
+          var E;
+          (E = N.children) == null || E.splice(T, 1);
+        }), a.push(o.schemas, "删除当前列");
+      } else if (e === "delete-row") {
+        const d = t.state.matched.find((E) => E.type === "eTable"), _ = t.state.matched.find((E) => E.type === "eTr"), T = D(o.schemas, (d == null ? void 0 : d.id) ?? "root"), N = D(o.schemas, (_ == null ? void 0 : _.id) ?? "root");
+        D(o.schemas, ((He = t.state.checkedNode) == null ? void 0 : He.id) ?? "root"), (Ie = T.list) == null || Ie[0].children.splice(N.index, 1), a.push(o.schemas, "删除当前行");
+      }
+    }
+    function Pe() {
+      var C;
+      const e = D(o.schemas, ((C = t.state.checkedNode) == null ? void 0 : C.id) ?? "root");
+      if (!e)
+        return !1;
+      const { list: l, schema: x, index: n } = e, S = st(x);
+      l.splice(n + 1, 0, S), t.setCheckedNode(S), a.push(o.schemas, "复制组件");
+    }
+    function Fe() {
+      var S;
+      const e = D(o.schemas, ((S = t.state.checkedNode) == null ? void 0 : S.id) ?? "root");
+      if (!e)
+        return !1;
+      let { list: l, schema: x, index: n } = e;
+      l.splice(n, 1), n === l.length && n--, t.setCheckedNode(l[n]), a.push(o.schemas, "删除组件");
+    }
+    function Je(e) {
+      s = e, s == null || s.addEventListener("scroll", () => {
+        K();
+      }), _e(O, K), _e(g, be);
+    }
+    return U({
+      handleInit: Je
+    }), (e, l) => {
+      var x, n, S, C, R;
+      return H(), F(he, null, [
+        Ce(V("div", {
+          ref_key: "selectorRef",
+          ref: m,
+          class: pe(["epic-checked-widget absolute pointer-events-none z-20", h.value + " " + (r.value ? "transition-all" : "")])
+        }, [
+          V("div", {
+            class: "epic-widget-action-box",
+            ref_key: "actionBoxRef",
+            ref: w
+          }, [
+            V("div", mt, Qe((n = u(oe).getComponentConfingByType(((x = u(t).state.checkedNode) == null ? void 0 : x.type) ?? "")) == null ? void 0 : n.defaultSchema.label), 1),
+            Y.value ? (H(), F("div", gt, [
+              Y.value && !Q.value ? (H(), F("div", {
+                key: 0,
+                title: "复制",
+                class: "epic-widget-action-item pointer-events-auto",
+                onClick: Pe
+              }, [
+                B(u(me), { name: "icon--epic--copy-all-outline-rounded" })
+              ])) : ie("", !0),
+              B(u(ft), {
+                onCommand: Ue,
+                trigger: "click"
+              }, {
+                dropdown: Z(() => [
+                  B(u(pt), null, {
+                    default: Z(() => [
+                      B(u(ue), { command: "left" }, {
+                        default: Z(() => l[0] || (l[0] = [
+                          de("添加左列")
+                        ])),
+                        _: 1
+                      }),
+                      B(u(ue), { command: "right" }, {
+                        default: Z(() => l[1] || (l[1] = [
+                          de("添加右列")
+                        ])),
+                        _: 1
+                      }),
+                      B(u(ue), { command: "top" }, {
+                        default: Z(() => l[2] || (l[2] = [
+                          de("添加上列")
+                        ])),
+                        _: 1
+                      }),
+                      B(u(ue), { command: "bottom" }, {
+                        default: Z(() => l[3] || (l[3] = [
+                          de("添加下列")
+                        ])),
+                        _: 1
+                      }),
+                      B(u(ue), {
+                        command: "delete-row",
+                        divided: ""
+                      }, {
+                        default: Z(() => l[4] || (l[4] = [
+                          de("删除当前行")
+                        ])),
+                        _: 1
+                      }),
+                      B(u(ue), { command: "delete-col" }, {
+                        default: Z(() => l[5] || (l[5] = [
+                          de("删除当前列")
+                        ])),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: Z(() => [
+                  Q.value ? (H(), F("div", xt, [
+                    B(u(me), { name: "icon--epic--window-outline" })
+                  ])) : ie("", !0)
+                ]),
+                _: 1
+              }),
+              Y.value && !Q.value ? (H(), F("div", {
+                key: 1,
+                title: "删除",
+                class: "epic-widget-action-item pointer-events-auto",
+                onClick: Fe
+              }, [
+                B(u(me), { name: "icon--epic--delete-outline-rounded" })
+              ])) : ie("", !0)
+            ])) : ie("", !0)
+          ], 512)
+        ], 2), [
+          [Te, P.value && ((S = u(t).state.checkedNode) == null ? void 0 : S.id) !== "root"]
+        ]),
+        Ce(V("div", {
+          ref_key: "hoverWidgetRef",
+          ref: I,
+          class: "epic-hover-widget absolute transition-all pointer-events-none z-998"
+        }, null, 512), [
+          [Te, i.value && ((C = u(t).state.checkedNode) == null ? void 0 : C.id) !== ((R = u(t).state.hoverNode) == null ? void 0 : R.id)]
+        ])
+      ], 64);
+    };
+  }
+}), _t = /* @__PURE__ */ re({
+  name: "EditNodeItem",
+  __name: "editNodeItem",
+  props: {
+    schemas: {}
+  },
+  emits: ["update:schemas"],
+  setup(ne, { emit: U }) {
+    const v = A("designer"), o = A("pageSchema"), t = A("revoke"), b = ne, a = U, m = q({
+      get() {
+        return b.schemas;
+      },
+      set(r) {
+        a("update:schemas", r);
+      }
+    });
+    function I(r) {
+      v.setCheckedNode(m.value[r]), v.setDisableHover(!0);
+    }
+    function w() {
+      v.setDisableHover(), t.push(o.schemas, "拖拽组件");
+    }
+    function P() {
+      t.push(o.schemas, "插入组件");
+    }
+    function i(r) {
+      var h, c, $;
+      return r.id === ((h = o.schemas[0]) == null ? void 0 : h.id) || ($ = (c = oe.getComponentConfingByType(r.type)) == null ? void 0 : c.editConstraints) != null && $.immovable ? "unmover-item" : "draggable-item";
+    }
+    return (r, h) => (H(), ve(u(vt), Ke({
+      modelValue: m.value,
+      "onUpdate:modelValue": h[0] || (h[0] = (c) => m.value = c),
+      "item-key": "id",
+      "component-data": {
+        type: "transition-group"
+      },
+      class: "epic-draggable-range"
+    }, {
+      animation: 200,
+      group: "edit-draggable",
+      handle: ".draggable-item",
+      ghostClass: "moveing"
+    }, {
+      onStart: h[1] || (h[1] = (c) => I(c.oldIndex)),
+      onEnd: h[2] || (h[2] = (c) => w()),
+      onAdd: h[3] || (h[3] = (c) => {
+        I(c.newIndex), P();
+      })
+    }), {
+      item: Z(({ element: c, index: $ }) => [
+        (H(), F("div", {
+          class: pe(["widget-box", i(c)]),
+          key: $
+        }, [
+          B(We, { schema: c }, null, 8, ["schema"])
+        ], 2))
+      ]),
+      _: 1
+    }, 16, ["modelValue"]));
+  }
+}), We = /* @__PURE__ */ re({
+  name: "ENodeItem",
+  __name: "nodeItem",
+  props: {
+    schema: {},
+    name: {}
+  },
+  setup(ne) {
+    const U = Xe(), v = A("designer"), o = A("pageManager", {}), t = A("pageSchema", {}), b = M(null);
+    Ye("nodeAttrs", U);
+    const a = ne, m = q(() => {
+      var $, s, Y, Q, O;
+      const i = o.componentInstances.value, r = ($ = a.schema) == null ? void 0 : $.id, h = oe.getComponentConfingByType((s = a.schema) == null ? void 0 : s.type) ?? null;
+      if (!r || !(i != null && i[r]))
+        return null;
+      if (h != null && h.defaultSchema.input && ((Y = a.schema) == null ? void 0 : Y.noFormItem) !== !0)
+        return (Q = i[r + "formItem"]) == null ? void 0 : Q.$el;
+      const c = i[r];
+      return ((O = c == null ? void 0 : c.$el) == null ? void 0 : O.nodeName) === "#text" ? null : c == null ? void 0 : c.$el;
+    });
+    fe(
+      () => m.value,
+      (i) => {
+        i == null || i.addEventListener("click", I, !1), i == null || i.addEventListener("mouseover", w, !1), i == null || i.addEventListener("mouseout", P, !1);
+      }
+    ), qe(() => {
+      var i, r, h;
+      (i = m.value) == null || i.removeEventListener("click", I, !1), (r = m.value) == null || r.removeEventListener("mouseover", w, !1), (h = m.value) == null || h.removeEventListener("mouseout", P, !1);
+    });
+    function I(i) {
+      i.stopPropagation(), v.setCheckedNode(a.schema);
+    }
+    function w(i) {
+      var r;
+      a.schema.id !== ((r = t.schemas[0]) == null ? void 0 : r.id) && (i.stopPropagation(), v.setHoverNode(a.schema));
+    }
+    function P(i) {
+      i.stopPropagation(), v.setHoverNode(null);
+    }
+    return (i, r) => {
+      var c, $;
+      const h = Ge("ENodeItem");
+      return H(), ve(u(it), {
+        ref_key: "nodeRef",
+        ref: b,
+        componentSchema: a.schema
+      }, je({ _: 2 }, [
+        ($ = (c = u(oe).getComponentConfingByType(a.schema.type)) == null ? void 0 : c.editConstraints) != null && $.childImmovable ? {
+          name: "edit-node",
+          fn: Z(() => [
+            (H(!0), F(he, null, Ne(a.schema.children, (s) => (H(), ve(h, {
+              key: s.id,
+              schema: s
+            }, null, 8, ["schema"]))), 128))
+          ]),
+          key: "0"
+        } : {
+          name: "edit-node",
+          fn: Z(() => [
+            a.schema.children ? (H(), ve(_t, {
+              key: 0,
+              schemas: a.schema.children,
+              "onUpdate:schemas": r[0] || (r[0] = (s) => a.schema.children = s)
+            }, null, 8, ["schemas"])) : ie("", !0)
+          ]),
+          key: "1"
+        }
+      ]), 1032, ["componentSchema"]);
+    };
+  }
+}), bt = { class: "min-w-750px rounded h-full" }, St = /* @__PURE__ */ re({
+  __name: "previewJson",
+  setup(ne, { expose: U }) {
+    const v = oe.getComponent("modal"), o = oe.getComponent("monacoEditor"), t = {
+      theme: "vs-light",
+      selectOnLineNumbers: !0,
+      minimap: {
+        enabled: !1
+      },
+      readOnly: !0
+    }, b = M(null), a = M(!1), m = A("pageSchema");
+    function I() {
+      a.value = !1;
+    }
+    function w() {
+      a.value = !0, b.value ? b.value.setValue(JSON.stringify(m, null, 2)) : setTimeout(() => {
+        w();
+      }, 300);
+    }
+    function P(i = "epic-data.json") {
+      const r = JSON.stringify(m, null, 2);
+      var h = `data:text/json;charset=utf-8,${encodeURIComponent(r)}`, c = document.createElement("a");
+      c.setAttribute("href", h), c.setAttribute("download", i), c.click();
+    }
+    return U({
+      handleOpen: w
+    }), (i, r) => (H(), ve(u(v), {
+      modelValue: a.value,
+      "onUpdate:modelValue": r[0] || (r[0] = (h) => a.value = h),
+      title: "查看数据",
+      class: "w-900px",
+      width: "900px",
+      onClose: I,
+      onOk: P,
+      okText: "导出数据"
+    }, {
+      default: Z(() => [
+        V("div", bt, [
+          B(u(o), {
+            ref_key: "monacoEditorRef",
+            ref: b,
+            class: "editor h-full",
+            autoToggleTheme: "",
+            readOnly: "",
+            config: t,
+            language: "json"
+          }, null, 512)
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+}), wt = { class: "epic-edit-toolbar flex items-center justify-between px-2" }, kt = { class: "flex-1 h-full flex items-center" }, Ct = {
+  key: 0,
+  class: "epic-divider"
+}, Tt = ["title", "onClick"], Nt = { class: "flex-1 h-full flex items-center justify-end" }, $t = {
+  key: 0,
+  class: "flex items-center ml-12px"
+}, Rt = { class: "pr-8px w-82px cursor-pointer" }, Dt = { class: "epic-device h-28px items-center gap-1 rounded-md border p-2px flex" }, Bt = ["title", "onClick"], Mt = /* @__PURE__ */ re({
+  __name: "toolbar",
+  setup(ne) {
+    const U = oe.getComponent("select"), { canvasScale: v, disabledZoom: o } = $e(), t = M("pc"), b = A("pageSchema"), a = A("designer"), m = A("revoke"), I = M(null), w = [
+      {
+        icon: "icon--epic--computer-outline-rounded",
+        title: "pc",
+        key: "pc"
+      },
+      {
+        icon: "icon--epic--tablet-android-outline-rounded",
+        title: "平板",
+        key: "pad"
+      },
+      {
+        icon: "icon--epic--phone-iphone-outline-sharp",
+        title: "手机",
+        key: "mobile"
+      }
+    ], P = q(() => [
+      // {
+      //   icon: "icon--epic--code",
+      //   title: "查看数据",
+      //   on: () => handlePreview(),
+      // },
+      // {
+      //   icon: "icon--epic--exit-to-app-rounded",
+      //   title: "导入数据",
+      //   on: handleOpenFileSelector,
+      // },
+      {
+        icon: "icon--epic--trash",
+        title: "清空",
+        on: s
+      },
+      {
+        icon: "icon--epic--undo",
+        title: "撤销",
+        on: c,
+        disabled: !m.recordList.value.length,
+        divider: !0
+      },
+      {
+        icon: "icon--epic--redo",
+        title: "重做",
+        on: $,
+        disabled: !m.undoList.value.length
+      }
+    ]), i = M(null), r = q({
+      get() {
+        return `${(v.value * 100).toFixed(0)}%`;
+      },
+      set(g) {
+        const k = parseFloat(g);
+        v.value = k / 100;
+      }
+    }), h = [
+      {
+        label: "60%",
+        value: "60%"
+      },
+      {
+        label: "80%",
+        value: "80%"
+      },
+      {
+        label: "100%",
+        value: "100%"
+      },
+      {
+        label: "120%",
+        value: "120%"
+      },
+      {
+        label: "140%",
+        value: "140%"
+      }
+    ];
+    function c() {
+      const g = m.undo();
+      g && (ke(b.schemas, g), a.setCheckedNode(b.schemas[0]));
+    }
+    function $() {
+      const g = m.redo();
+      g && (ke(b.schemas, g), a.setCheckedNode(b.schemas[0]));
+    }
+    function s() {
+      a.reset();
+    }
+    function Y(g) {
+      var j;
+      const k = (j = g.target.files) == null ? void 0 : j[0];
+      if (!k) return;
+      g.target.value = null;
+      const y = new FileReader();
+      y.readAsText(k), y.onload = (ce) => {
+        var z;
+        Q((z = ce.target) == null ? void 0 : z.result);
+      };
+    }
+    function Q(g) {
+      try {
+        let k = JSON.parse(g ?? "");
+        k.schemas || (k = lt(k)), ke(b, k);
+      } catch (k) {
+        console.error(k);
+      }
+    }
+    function O(g) {
+      a.handleToggleDeviceMode(g), t.value = g;
+      const k = {
+        pc: {},
+        pad: {
+          width: "780px",
+          mode: g
+        },
+        mobile: {
+          width: "390px",
+          height: "844px",
+          mode: g
+        }
+      };
+      b.canvas = k[g], console.log("%c [ pageSchema ]-248", "font-size:13px; background:pink; color:#bf2c9f;", b);
+    }
+    return (g, k) => (H(), F(he, null, [
+      V("div", wt, [
+        V("div", kt, [
+          (H(!0), F(he, null, Ne(P.value, (y, j) => (H(), F(he, { key: j }, [
+            y.divider ? (H(), F("div", Ct)) : ie("", !0),
+            V("div", {
+              title: y.title,
+              class: pe(["epic-action-item text-base h-90% px-10px flex items-center cursor-pointer", { disabled: y.disabled }]),
+              onClick: y.on
+            }, [
+              B(u(me), {
+                name: y.icon
+              }, null, 8, ["name"])
+            ], 10, Tt)
+          ], 64))), 128))
+        ]),
+        Ce(V("input", {
+          type: "file",
+          ref_key: "fileRef",
+          ref: i,
+          accept: ".json,.txt",
+          onChange: Y
+        }, null, 544), [
+          [Te, !1]
+        ]),
+        V("div", Nt, [
+          u(o) ? ie("", !0) : (H(), F("div", $t, [
+            V("div", Rt, [
+              B(u(U), {
+                value: r.value,
+                "onUpdate:value": k[0] || (k[0] = (y) => r.value = y),
+                modelValue: r.value,
+                "onUpdate:modelValue": k[1] || (k[1] = (y) => r.value = y),
+                options: h,
+                size: "small"
+              }, null, 8, ["value", "modelValue"])
+            ])
+          ])),
+          V("div", Dt, [
+            (H(), F(he, null, Ne(w, (y) => V("div", {
+              key: y.key,
+              title: y.title,
+              class: pe(["epic-device-item h-full px-1 flex items-center cursor-pointer text-base transition-colors rounded-sm", { checked: y.key === t.value }]),
+              onClick: (j) => O(y.key)
+            }, [
+              B(u(me), {
+                name: y.icon
+              }, null, 8, ["name"])
+            ], 10, Bt)), 64))
+          ])
+        ])
+      ]),
+      B(St, {
+        ref_key: "previewJson",
+        ref: I
+      }, null, 512)
+    ], 64));
+  }
+}), Lt = { class: "h-full flex flex-col relative" }, Et = ["draggable"], Ht = /* @__PURE__ */ re({
+  __name: "editScreenContainer",
+  setup(ne) {
+    const U = A("pageSchema"), v = M(null), o = M(null), t = M(null), { pressSpace: b, disabledZoom: a } = $e(), {
+      handleElementDragStart: m,
+      handleElementDrag: I,
+      handleElementDragEnd: w
+    } = rt(v), { width: P, height: i } = ct(v), { canvasScale: r, handleZoom: h } = dt(o);
+    let c = 0, $ = 0;
+    const s = M({}), Y = M({}), Q = M({}), O = et({ width: 0, height: 0 });
+    tt(k), fe(Q, () => {
+      ze(g);
+    });
+    function g() {
+      t.value && (O.value = {
+        width: t.value.clientWidth,
+        height: t.value.clientHeight
+      });
+    }
+    function k() {
+      var z, L;
+      Q.value = {
+        width: ((z = U.canvas) == null ? void 0 : z.width) ?? "0",
+        height: ((L = U.canvas) == null ? void 0 : L.height) ?? "0"
+      };
+    }
+    ut(P, y), fe(O, y);
+    function y() {
+      let z = O.value.width || c, L = O.value.height || $;
+      s.value = {
+        width: P.value + z + "px",
+        // 滚动框宽度，包含额外的宽度
+        height: i.value + L + "px"
+        // 滚动框高度，包含额外的高度
+      }, Y.value = {
+        width: z + "px",
+        // 画布宽度
+        height: L + "px"
+        // 画布高度
+      }, j();
+    }
+    function j() {
+      ze(() => {
+        var se;
+        let z = O.value.width || c;
+        const W = (O.value.height || $) / 2, ee = z / 2;
+        (se = v.value) == null || se.scrollTo(ee, W);
+      });
+    }
+    _e(v, ce), _e(o, ce);
+    function ce() {
+      var L;
+      if (!v.value) return;
+      const z = v.value.getBoundingClientRect();
+      if (c = z.width - 60, $ = z.height - 80, !a.value)
+        if (O.value.width === 0)
+          r.value = 1;
+        else {
+          const W = (c - 20) / O.value.width, ee = $ / (O.value.height || ((L = o.value) == null ? void 0 : L.clientHeight) || 1), se = Math.abs(W - 1) < Math.abs(ee - 1);
+          let K = 1;
+          se ? K = W : K = ee, (W < 1 || ee < 1) && (K = Math.min(W, ee)), K < 1.4 && K > 0.5 && (r.value = K);
+        }
+      ht(y, 50)();
+    }
+    return (z, L) => (H(), F("div", Lt, [
+      B(Mt),
+      V("div", {
+        ref_key: "editScreenContainerRef",
+        ref: v,
+        class: pe(["flex-1 overflow-auto overflow-y-hidden epic-edit-screen-container", { "cursor-grab": u(b) }]),
+        draggable: u(b),
+        onWheel: L[0] || (L[0] = //@ts-ignore
+        (...W) => u(h) && u(h)(...W)),
+        onDragstart: L[1] || (L[1] = //@ts-ignore
+        (...W) => u(m) && u(m)(...W)),
+        onDragend: L[2] || (L[2] = //@ts-ignore
+        (...W) => u(w) && u(w)(...W)),
+        onDrag: L[3] || (L[3] = //@ts-ignore
+        (...W) => u(I) && u(I)(...W))
+      }, [
+        V("div", {
+          id: "canvasContainer",
+          class: "flex items-center justify-center",
+          style: ye(s.value)
+        }, [
+          V("div", {
+            ref_key: "draggableElRef",
+            ref: o,
+            class: "transition-all"
+          }, [
+            V("div", {
+              class: pe({ "pointer-events-none": u(b) }),
+              style: ye(Y.value)
+            }, [
+              ot(z.$slots, "default")
+            ], 6)
+          ], 512)
+        ], 4)
+      ], 42, Et),
+      V("div", {
+        ref_key: "sizeBoxRef",
+        ref: t,
+        class: "absolute top-0 pointer-events-none",
+        style: ye(Q.value)
+      }, null, 4)
+    ]));
+  }
+}), It = { class: "epic-edit-canvas" }, Pt = /* @__PURE__ */ re({
+  __name: "index",
+  setup(ne) {
+    const U = M(null), v = M(null), o = A("pageSchema"), t = q(() => o.schemas[0]), b = q(() => ({
+      width: "100%",
+      height: "100%"
+    }));
+    return nt(() => {
+      var a;
+      (a = v.value) == null || a.handleInit(U.value);
+    }), (a, m) => (H(), F("section", It, [
+      B(Ht, null, {
+        default: Z(() => [
+          V("div", {
+            ref_key: "epicEditRangeRef",
+            ref: U,
+            class: "epic-edit-range rounded-md overflow-auto relative",
+            style: ye(b.value)
+          }, [
+            B(We, { schema: t.value }, null, 8, ["schema"]),
+            B(yt, {
+              ref_key: "ePreviewWidgetsRef",
+              ref: v
+            }, null, 512)
+          ], 4)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  Pt as default
+};