epic-designer-gold 1.0.6 → 1.0.7

package/dist/index-B0rUZfG_.js

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