epic-designer-dev/dist/core/src/components/designer/hooks/useDesigner.js

基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器

import { ref as b, reactive as C, watchEffect as h } from "vue";
import { useClipboard as H } from "../../../../../hooks/src/common/clipboard.js";
import { useMagicKeys as I } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css                                           */
import "vuedraggable";
import { deepClone as w, findSchemaById as B, getMatchedById as K, deepEqual as L, deepCompareAndModify as T, findSchemaInfoById as z } from "../../../../../utils/src/common/data.js";
import { usePageManager as A } from "../../../../../utils/src/manager/pageManager.js";
import { pluginManager as P } from "../../../../../utils/src/manager/pluginManager.js";
import { useRevoke as q } from "../../../../../utils/src/manager/revoke.js";
let d = {
  schemas: [
    {
      componentProps: {
        style: {
          padding: "16px"
        }
      },
      id: "root",
      label: "页面",
      type: "page",
      children: []
    }
  ],
  script: `const { defineExpose, find } = epic;

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

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`
};
function X(l, f) {
  const v = b(!1), r = A(), o = r.pageSchema, s = C({
    disabledHover: !1,
    hoverNode: null,
    matched: [],
    selectedNode: null
  }), n = q(o, s, a), { copy: N, cut: y, duplicate: g, paste: M } = H(
    o,
    a,
    (e) => n.push(e)
  ), S = {
    desktop: {},
    mobile: {
      mode: "mobile",
      width: "390px"
    },
    tablet: {
      mode: "tablet",
      width: "780px"
    }
  };
  h(() => {
    l.defaultSchema ? d = l.defaultSchema : l.formMode && (d.schemas = P.formSchema);
    const e = l.canvasMode ?? "desktop";
    o.canvas = {
      mode: e,
      ...S[e]
    }, r.setDefaultComponentIds(d.schemas);
  }), r.setDesignMode();
  function u() {
    var e;
    return g((e = s.selectedNode) == null ? void 0 : e.id);
  }
  function m() {
    return y(s.selectedNode);
  }
  function p() {
    var i;
    if (!((i = s.selectedNode) != null && i.id) || s.selectedNode.id === o.schemas[0].id)
      return;
    const e = z(o.schemas, s.selectedNode.id);
    if (!e) return !1;
    let { index: t, list: c } = e;
    c.splice(t, 1), t === c.length && t--, a(c[t]), n.push("删除组件");
  }
  function a(e = s.selectedNode) {
    const c = B(o.schemas, (e == null ? void 0 : e.id) ?? "") || o.schemas[0];
    s.matched = K(o.schemas, c.id ?? ""), s.selectedNode = c;
  }
  function E(e = null) {
    var t;
    if (!e || s.disabledHover)
      return s.hoverNode = null, !1;
    if ((e == null ? void 0 : e.id) === ((t = s.hoverNode) == null ? void 0 : t.id))
      return !1;
    s.hoverNode = e;
  }
  function k() {
    L(o.schemas, d.schemas) && o.script === d.script || (T(o.schemas, d.schemas), o.script = d.script, a(o.schemas[0]), n.push("重置操作"), f("reset", o));
  }
  function x() {
    o.schemas = w(d.schemas), a(o.schemas[0]), n.push("初始化");
  }
  function D(e = document) {
    const t = I({ target: e });
    e.addEventListener(
      "keydown",
      (c) => {
        c.ctrlKey && c.key === "s" && c.preventDefault(), c.ctrlKey && c.key === "d" && c.preventDefault();
      },
      { capture: !0 }
    ), h(() => {
      var i;
      const c = document.activeElement;
      if (!(c instanceof HTMLInputElement || c instanceof HTMLTextAreaElement)) {
        if ((t.Delete.value || t.Backspace.value) && s.selectedNode && p(), t["ctrl+c"].value && s.selectedNode && N(s.selectedNode), t["ctrl+v"].value)
          return M((i = s.selectedNode) == null ? void 0 : i.id);
        t["ctrl+d"].value && s.selectedNode && u(), t["ctrl+x"].value && s.selectedNode && m(), t["ctrl+z"].value && !t.shift.value && n.undo(), (t["ctrl+shift+z"].value || t["ctrl+y"].value) && n.redo(), t["ctrl+s"].value && f("save", o), t.Escape.value && a(o.schemas[0]);
      }
    });
  }
  return x(), {
    handleCut: m,
    handleDelete: p,
    handleDuplicate: u,
    pageManager: r,
    pageSchema: o,
    ready: v,
    reset: k,
    revoke: n,
    setHoverNode: E,
    setSelectedNode: a,
    setupHotkeys: D,
    state: s
  };
}
export {
  X as useDesigner
};