epic-designer-gold 1.0.0 → 1.0.2

package/dist/index-DkyxbMHi.js

@@ -0,0 +1,742 @@
+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 } from "./js.cookie-oHpRFPCO.js";
+import { u as me, a as Ee, f as ie, g as ue, b as ce, _ as ze, d as he, c as Pe, e as We, h as Ae, i as je, w as Ie, j as Fe } from "./index-B_9x_cPH.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");
+    }), j = 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: I } = ge(ne), { startTimedQuery: q, stopTimedQuery: O } = Ee(ne);
+    te(
+      () => p.value,
+      (e) => {
+        if (e) {
+          V.value = !0, x.observe(e, I);
+          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 || j.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, j, 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 (j = l[s + "formItem"]) == null ? void 0 : j.$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(ze), {
+        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 I;
+      const y = (I = p.target.files) == null ? void 0 : I[0];
+      if (!y) return;
+      p.target.value = null;
+      const x = new FileReader();
+      x.readAsText(y), x.onload = (q) => {
+        var O;
+        j((O = q.target) == null ? void 0 : O.result);
+      };
+    }
+    function j(p) {
+      try {
+        let y = JSON.parse(p ?? "");
+        y.schemas || (y = Pe(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, I) => (N(), D(G, { key: I }, [
+            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: (I) => 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 } = je(g);
+    let a = 0, w = 0;
+    const o = C({}), P = C({}), j = C({}), B = Le({ width: 0, height: 0 });
+    De(y), te(j, () => {
+      ye(p);
+    });
+    function p() {
+      n.value && (B.value = {
+        width: n.value.clientWidth,
+        height: n.value.clientHeight
+      });
+    }
+    function y() {
+      var O, $;
+      j.value = {
+        width: ((O = H.canvas) == null ? void 0 : O.width) ?? "0",
+        height: (($ = H.canvas) == null ? void 0 : $.height) ?? "0"
+      };
+    }
+    Ie(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"
+        // 画布高度
+      }, I();
+    }
+    function I() {
+      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(j.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
+};