gepic/dist/core/components/designer/src/designer.vue.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as K, watchEffect as C, ref as L, reactive as j, provide as p, computed as F, createElementBlock as G, createBlock as B, unref as d, openBlock as k, Suspense as J, withCtx as i, createElementVNode as h, createVNode as f, renderSlot as n, createCommentVNode as Q, normalizeClass as U, nextTick as X } from "vue";
import { usePageManager as Y } from "../../../../utils/manager/pageManager.js";
import { pluginManager as D } from "../../../../utils/manager/pluginManager.js";
import { useRevoke as ee } from "../../../../utils/manager/revoke.js";
import { loadAsyncComponent as m } from "../../../../utils/common/component.js";
import { getMatchedById as oe, deepEqual as te, deepCompareAndModify as ae, deepClone as M } from "../../../../utils/common/data.js";
import "@vueuse/core";
import { useStore as ie } from "../../../../hooks/store/index.js";
import se from "./modules/preview/index.vue.js";
const ne = {
  key: 0,
  class: "epic-loading-box"
}, re = { class: "epic-header-container" }, de = { class: "epic-loading-box" }, ye = /* @__PURE__ */ K({
  __name: "designer",
  props: {
    disabledZoom: { type: Boolean, default: !1 },
    draggable: { type: Boolean, default: !0 },
    hiddenHeader: { type: Boolean, default: !1 },
    lockDefaultSchemaEdit: { type: Boolean, default: !1 },
    formMode: { type: Boolean, default: !1 },
    title: { default: "EpicDesigner默认项目" },
    defaultSchema: {},
    sourceCodeReadOnly: { type: Boolean },
    hidePreviewConfirm: { type: Boolean }
  },
  emits: ["ready", "save", "reset", "imported", "toggleDeviceMode"],
  setup(w, { expose: N, emit: x }) {
    const H = m(() => import("./modules/header/index.vue.js")), _ = m(() => import("./modules/activityBar/index.vue.js")), P = m(
      () => import("./modules/editContainer/index.vue.js")
    ), $ = m(
      () => import("./modules/rightSidebar/index.vue.js")
    ), R = m(() => import("../../asyncLoader/index.vue.js")), r = Y(), c = ee(), s = w;
    let t = {
      schemas: [
        {
          type: "page",
          id: "root",
          label: "页面",
          children: [],
          componentProps: {
            style: {
              padding: "16px"
            }
          }
        }
      ],
      script: `const { defineExpose, find } = epic;

function test (){
    console.log('test')
}

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`
    };
    C(() => {
      s.defaultSchema ? t = s.defaultSchema : s.formMode && (t.schemas = D.formSchemas), r.setDefaultComponentIds(t.schemas);
    }), r.setDesignMode();
    const l = x, S = L(null), a = j({
      checkedNode: null,
      hoverNode: null,
      disableHover: !1,
      matched: []
    }), o = r.pageSchema, { disabledZoom: A } = ie();
    C(() => {
      A.value = s.disabledZoom;
    }), p("pageSchema", o), p("revoke", c), p("pageManager", r), p(
      "designerProps",
      F(() => s)
    ), p("designer", {
      setCheckedNode: u,
      setHoverNode: V,
      setDisableHover: z,
      handleToggleDeviceMode: T,
      reset: b,
      preview: g,
      save: v,
      handleImported: W,
      state: a
    });
    function I() {
      o.schemas = M(t.schemas), u(o.schemas[0]), c.push(o.schemas, "初始化");
    }
    async function u(e = o.schemas[0]) {
      a.checkedNode = e, a.matched = oe(o.schemas, e.id);
    }
    async function V(e = null) {
      var y;
      if (!e || a.disableHover)
        return a.hoverNode = null, !1;
      if ((e == null ? void 0 : e.id) === ((y = a.hoverNode) == null ? void 0 : y.id))
        return !1;
      a.hoverNode = e;
    }
    function Z() {
      X(() => {
        l("ready", { pageManager: r });
      });
    }
    async function z(e = !1) {
      a.disableHover = e;
    }
    function O(e) {
      r.setPageSchema(e), c.push(o.schemas, "加载数据");
    }
    function E() {
      return M(o);
    }
    function b() {
      te(o.schemas, t.schemas) && o.script === t.script || (ae(o.schemas, t.schemas), o.script = t.script, u(o.schemas[0]), c.push(o.schemas, "重置操作"), l("reset", o));
    }
    function v() {
      l("save", E());
    }
    function T(e) {
      l("toggleDeviceMode", e);
    }
    function W(e) {
      l("imported", e);
    }
    function g() {
      S.value.handleOpen();
    }
    function q(e) {
      e.ctrlKey && e.preventDefault();
    }
    return I(), N({
      revoke: c,
      setData: O,
      getData: E,
      reset: b,
      preview: g,
      save: v
    }), (e, y) => d(D).initialized.value ? (k(), B(J, {
      key: 1,
      onResolve: Z
    }, {
      default: i(() => [
        h("div", {
          class: "epic-designer-main epic-scoped",
          onWheel: q
        }, [
          h("div", re, [
            n(e.$slots, "header", {}, () => [
              s.hiddenHeader ? Q("", !0) : (k(), B(d(H), {
                key: 0,
                onPreview: g,
                onSave: v
              }, {
                header: i(() => [
                  n(e.$slots, "header-prefix")
                ]),
                prefix: i(() => [
                  n(e.$slots, "header-prefix")
                ]),
                title: i(() => [
                  n(e.$slots, "header-title")
                ]),
                "right-prefix": i(() => [
                  n(e.$slots, "header-right-prefix")
                ]),
                "right-action": i(() => [
                  n(e.$slots, "header-right-action")
                ]),
                "right-suffix": i(() => [
                  n(e.$slots, "header-right-suffix")
                ]),
                _: 3
              }))
            ])
          ]),
          h("div", {
            class: U(["epic-split-view-container", { "hidden-header": e.hiddenHeader }])
          }, [
            f(d(_)),
            f(d(P)),
            f(d($))
          ], 2),
          f(se, {
            ref_key: "previewRef",
            ref: S,
            "hide-confirm": s.hidePreviewConfirm
          }, null, 8, ["hide-confirm"])
        ], 32)
      ]),
      fallback: i(() => [
        h("div", de, [
          f(d(R))
        ])
      ]),
      _: 3
    })) : (k(), G("div", ne));
  }
});
export {
  ye as default
};