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

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

import { ref as I, reactive as C, watchEffect as D } from "vue";
import { useClipboard as E } from "../../../../../hooks/src/common/clipboard.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css                                           */
/* empty css                                                       */
/* empty css                                                            */
import { createPageManager as w } from "../../../../../manager/src/pageManager.js";
import { pluginManager as p } from "../../../../../manager/src/pluginManager.js";
import { useRevoke as B } from "../../../../../manager/src/revoke.js";
/* empty css                                                     */
import "vue-draggable-plus";
import { findSchemas as H, deepClone as J, getMatchedById as u, findSchemaById as L, deepEqual as T, deepCompareAndModify as q, findSchemaInfoById as A } from "../../../../../utils/src/common/data.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
let s = {
  schemas: [
    {
      id: "root",
      label: "页面",
      props: {
        style: {
          padding: "16px"
        }
      },
      type: "page",
      children: []
    }
  ],
  script: `const { defineExpose, find } = epic;

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

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`
};
function Z(r, h) {
  const g = I(!1), a = w(), t = a.pageSchema, i = C({
    disabledHover: !1,
    hoverNode: null,
    matched: [],
    selectedNode: null
  }), l = B(t, i, c), { duplicate: b } = E(
    t,
    c,
    (e) => l.push(e)
  ), v = {
    desktop: {},
    mobile: {
      mode: "mobile",
      width: "390px"
    },
    tablet: {
      mode: "tablet",
      width: "780px"
    }
  };
  D(() => {
    r.defaultSchema ? s = r.defaultSchema : r.formMode && (s.schemas = p.designer.formSchema, p.component.hide("form")), r.formMode || p.component.show("form");
    const e = r.canvasMode ?? "desktop";
    t.canvas = {
      mode: e,
      ...v[e],
      ...s.canvas
    }, N(), a.setDefaultComponentIds(s.schemas);
  }), a.setDesignMode();
  function N() {
    if (!r.formMode || !r.tableJson) return;
    const e = r.tableJson.find(
      (n) => n.tableType === "parent"
    );
    if (!e) return;
    const o = H(
      t.schemas,
      (n) => n.type === "form"
    );
    o.length === 1 && (o[0].props.name = e.tableName);
  }
  function S() {
    var e;
    return b((e = i.selectedNode) == null ? void 0 : e.id);
  }
  function M() {
    var f;
    if (!((f = i.selectedNode) != null && f.id) || i.selectedNode.id === t.schemas[0].id)
      return;
    const e = A(t.schemas, i.selectedNode.id);
    if (!e) return !1;
    let { index: o, list: n } = e;
    n.splice(o, 1), o === n.length && o--, c(n[o]), l.push("删除组件");
  }
  function c(e) {
    if (e || (e = t.schemas[0]), m(e)) {
      const n = u(
        a.pageSchema.schemas,
        (e == null ? void 0 : e.id) || ""
      ), f = n.length - 2;
      for (let d = f; d >= 0; d--)
        if (!m(n[d])) {
          e = n[d];
          break;
        }
    }
    const o = L(t.schemas, (e == null ? void 0 : e.id) || "");
    i.matched = u(
      t.schemas,
      (o == null ? void 0 : o.id) || ""
    ), i.selectedNode = o;
  }
  function m(e) {
    var o;
    return ((o = e.status) == null ? void 0 : o.lock) || p.component.getLocked(e.type);
  }
  function x(e = null) {
    var o;
    if (!e || i.disabledHover)
      return i.hoverNode = null, !1;
    if (m(e)) {
      const n = u(
        a.pageSchema.schemas,
        (e == null ? void 0 : e.id) || ""
      ), f = n.length - 2;
      for (let d = f; d >= 0; d--)
        if (!m(n[d])) {
          e = n[d];
          break;
        }
    }
    if ((e == null ? void 0 : e.id) === ((o = i.hoverNode) == null ? void 0 : o.id))
      return !1;
    i.hoverNode = e;
  }
  function y() {
    T(t.schemas, s.schemas) && t.script === s.script || (q(t.schemas, s.schemas), t.script = s.script, c(t.schemas[0]), l.push("重置操作"), h("reset", t));
  }
  function k() {
    t.schemas = J(s.schemas), c(t.schemas[0]), l.push("初始化");
  }
  return k(), {
    handleDelete: M,
    handleDuplicate: S,
    pageManager: a,
    pageSchema: t,
    ready: g,
    reset: y,
    revoke: l,
    setHoverNode: x,
    setSelectedNode: c,
    state: i
  };
}
export {
  Z as useDesigner
};