epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
638 lines (637 loc) • 22.1 kB
JavaScript
import { defineComponent as P, inject as L, ref as S, computed as E, watch as J, onMounted as ve, openBlock as $, createElementBlock as z, Fragment as Y, withDirectives as se, createElementVNode as m, normalizeClass as Q, toDisplayString as me, unref as c, createVNode as B, vShow as le, createBlock as q, mergeProps as ge, withCtx as G, useAttrs as xe, provide as ye, onUnmounted as be, resolveComponent as _e, createSlots as Se, renderList as ae, createCommentVNode as fe, isRef as ue, shallowRef as we, nextTick as de, normalizeStyle as ee, renderSlot as Ce } from "vue";
import { u as re, p as W, a as ie, b as ke, f as he, c as Ne, r as F, d as $e, e as ne, h as Oe, i as Be, j as Te, k as Le, w as Re } from "./index-97ce4605.js";
import { _ as te } from "./icon.vue_vue_type_script_setup_true_lang-3f9e4127.js";
import { d as De } from "./vuedraggable.umd-6a5b6da9.js";
import "./_commonjsHelpers-c5d32002.js";
import "./_vue_commonjs-external-eb7fec7f.js";
const Ve = { class: "action-item whitespace-nowrap" }, He = /* @__PURE__ */ P({
__name: "previewWidgets",
setup(U) {
const d = L("pageManager", {}), g = L("pageSchema"), l = L("designer"), x = S(null), f = S(null), i = S(null), w = S(!1), k = S(!1), y = S(!0), t = S("top"), { canvasScale: r, disabledZoom: p } = re();
let s = null;
const v = E(() => {
var C, N, T, _, I;
const n = d.componentInstances.value, u = (C = l.state.checkedNode) == null ? void 0 : C.id, b = W.getComponentConfingByType((N = l.state.checkedNode) == null ? void 0 : N.type) ?? null;
if (!u || !(n != null && n[u]))
return null;
if (b != null && b.defaultSchema.input && ((T = l.state.checkedNode) == null ? void 0 : T.noFormItem) !== !0)
return (_ = n[u + "formItem"]) == null ? void 0 : _.$el;
const h = n[u];
return ((I = h == null ? void 0 : h.$el) == null ? void 0 : I.nodeName) === "#text" ? null : h == null ? void 0 : h.$el;
}), O = E(() => {
var C, N, T, _;
const n = d.componentInstances.value, u = (C = l.state.hoverNode) == null ? void 0 : C.id, b = W.getComponentConfingByType((N = l.state.hoverNode) == null ? void 0 : N.type) ?? null;
if (!u || !(n != null && n[u]))
return null;
if (b != null && b.defaultSchema.input && ((T = l.state.hoverNode) == null ? void 0 : T.noFormItem) !== !0)
return (_ = n[u + "formItem"]) == null ? void 0 : _.$el;
const h = n[u];
return (h == null ? void 0 : h.$el.nodeName) === "#text" ? null : h == null ? void 0 : h.$el;
}), { mutationObserver: M, observerConfig: D } = e(H), { startTimedQuery: V, stopTimedQuery: R } = ke(H);
J(() => v.value, (n) => {
if (n) {
w.value = !0, M.observe(n, D);
const u = n.parentNode;
u && (u.ondragstart = () => {
y.value = !1, V();
}, u.ondragend = () => {
y.value = !0, R();
}), H();
} else
w.value = !1;
});
const { mutationObserver: K, observerConfig: Z } = e(o);
J(() => O.value, (n) => {
n && (K.observe(n, Z), o());
});
let A = 0;
J(() => {
var n;
return (n = l.state.hoverNode) == null ? void 0 : n.id;
}, (n) => {
if (n) {
k.value = !0, clearTimeout(A);
return;
}
A = setTimeout(() => {
k.value = !1;
}, 300);
});
function H() {
const n = v.value;
if (!n)
return;
const { top: u, left: b } = (s == null ? void 0 : s.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: h, left: C, width: N, height: T } = n.getBoundingClientRect(), _ = p.value ? 1 : r.value, I = h - u + ((s == null ? void 0 : s.scrollTop) ?? 0) * _, oe = C - b + ((s == null ? void 0 : s.scrollLeft) ?? 0) * _, X = T / _;
x.value && (x.value.style.width = `${N / _}px`, x.value.style.height = `${X}px`, x.value.style.top = `${I / _}px`, x.value.style.left = `${oe / _}px`), i.value && (I < 45 && X < 100 ? (i.value.style.top = "", i.value.style.bottom = "-30px", i.value.style["border-radius"] = "0px 0px 4px 4px", t.value = "bottom") : I < 45 ? (i.value.style.top = "0px", i.value.style["border-radius"] = "0px 0px 4px 0", t.value = "center") : (i.value.style.top = "-30px", i.value.style["border-radius"] = "4px 4px 0px 0px", t.value = "top"));
}
function o() {
var X, ce;
const n = O.value;
if (!n)
return;
const { top: u, left: b } = (s == null ? void 0 : s.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: h, left: C, width: N, height: T } = ((X = n.getBoundingClientRect) == null ? void 0 : X.call(n)) ?? ((ce = n.nextElementSibling) == null ? void 0 : ce.getBoundingClientRect()), _ = p.value ? 1 : r.value, I = h - u + ((s == null ? void 0 : s.scrollTop) ?? 0) * _, oe = C - b + ((s == null ? void 0 : s.scrollLeft) ?? 0) * _;
f.value && (f.value.style.width = `${N / _}px`, f.value.style.height = `${T / _}px`, f.value.style.top = `${I / _}px`, f.value.style.left = `${oe / _}px`);
}
function e(n) {
const u = window.MutationObserver, b = {
childList: !0,
attributes: !0,
subtree: !0
};
return {
mutationObserver: new u(n),
observerConfig: b
};
}
function a() {
var N;
const n = he(g.schemas, ((N = l.state.checkedNode) == null ? void 0 : N.id) ?? "root");
if (!n)
return !1;
const { list: u, schema: b, index: h } = n, C = Ne(b);
u.splice(h + 1, 0, C), l.setCheckedNode(C), F.push(g.schemas, "复制组件");
}
function j() {
var C;
const n = he(g.schemas, ((C = l.state.checkedNode) == null ? void 0 : C.id) ?? "root");
if (!n)
return !1;
let { list: u, schema: b, index: h } = n;
u.splice(h, 1), h === u.length && h--, l.setCheckedNode(u[h]), F.push(g.schemas, "删除组件");
}
return ve(() => {
s = document.querySelector(".epic-edit-range"), s == null || s.addEventListener("scroll", () => {
H();
}), ie(v, H), ie(O, H);
}), (n, u) => {
var b, h, C, N, T;
return $(), z(Y, null, [
se(m("div", {
ref_key: "selectorRef",
ref: x,
class: Q(["checked-widget absolute pointer-events-none z-20", t.value + " " + (y.value ? "transition-all" : "")])
}, [
m("div", {
class: "action-box",
ref_key: "actionBoxRef",
ref: i
}, [
m("div", Ve, me((h = c(W).getComponentConfingByType(((b = c(l).state.checkedNode) == null ? void 0 : b.type) ?? "")) == null ? void 0 : h.defaultSchema.label), 1),
m("div", {
title: "复制",
class: "action-item pointer-events-auto",
onClick: a
}, [
B(c(te), { name: "icon-fuzhi3" })
]),
m("div", {
title: "删除",
class: "action-item pointer-events-auto",
onClick: j
}, [
B(c(te), { name: "icon-shanchu1" })
])
], 512)
], 2), [
[le, w.value && ((C = c(l).state.checkedNode) == null ? void 0 : C.id) !== "root"]
]),
se(m("div", {
ref_key: "hoverWidgetRef",
ref: f,
class: "hover-widget absolute transition-all pointer-events-none z-998"
}, null, 512), [
[le, k.value && ((N = c(l).state.checkedNode) == null ? void 0 : N.id) !== ((T = c(l).state.hoverNode) == null ? void 0 : T.id)]
])
], 64);
};
}
}), ze = /* @__PURE__ */ P({
name: "EditNodeItem",
__name: "editNodeItem",
props: {
schemas: {}
},
emits: ["update:schemas"],
setup(U, { emit: d }) {
const g = U, l = L("designer"), x = L("pageSchema"), f = E({
get() {
return g.schemas;
},
set(y) {
d("update:schemas", y);
}
});
function i(y) {
l.setCheckedNode(f.value[y]), l.setDisableHover(!0);
}
function w() {
l.setDisableHover(), F.push(x.schemas, "拖拽组件");
}
function k() {
F.push(x.schemas, "插入组件");
}
return (y, t) => ($(), q(c(De), ge({
modelValue: f.value,
"onUpdate:modelValue": t[0] || (t[0] = (r) => f.value = r),
"item-key": "id",
"component-data": {
type: "transition-group"
},
class: "draggable-range"
}, {
animation: 200,
group: "edit-draggable",
handle: ".draggable-item",
ghostClass: "moveing"
}, {
onStart: t[1] || (t[1] = (r) => i(r.oldIndex)),
onEnd: t[2] || (t[2] = (r) => w()),
onAdd: t[3] || (t[3] = (r) => {
i(r.newIndex), k();
})
}), {
item: G(({ element: r, index: p }) => [
($(), z("div", {
class: Q(["widget-box", { "draggable-item": !r.immovable }]),
key: p
}, [
B(pe, { schema: r }, null, 8, ["schema"])
], 2))
]),
_: 1
}, 16, ["modelValue"]));
}
}), pe = /* @__PURE__ */ P({
name: "ENodeItem",
__name: "nodeItem",
props: {
schema: {},
name: {}
},
setup(U) {
const d = U, g = xe(), l = L("designer"), x = L("pageManager", {}), f = S(null);
ye("nodeAttrs", g);
const i = E(() => {
var v, O, M, D, V;
const t = x.componentInstances.value, r = (v = d.schema) == null ? void 0 : v.id, p = W.getComponentConfingByType((O = d.schema) == null ? void 0 : O.type) ?? null;
if (!r || !(t != null && t[r]))
return null;
if (p != null && p.defaultSchema.input && ((M = d.schema) == null ? void 0 : M.noFormItem) !== !0)
return (D = t[r + "formItem"]) == null ? void 0 : D.$el;
const s = t[r];
return ((V = s == null ? void 0 : s.$el) == null ? void 0 : V.nodeName) === "#text" ? null : s == null ? void 0 : s.$el;
});
J(() => i.value, (t) => {
t == null || t.addEventListener("click", w, !1), t == null || t.addEventListener("mouseover", k, !1), t == null || t.addEventListener("mouseout", y, !1);
}), be(() => {
var t, r, p;
(t = i.value) == null || t.removeEventListener("click", w, !1), (r = i.value) == null || r.removeEventListener("mouseover", k, !1), (p = i.value) == null || p.removeEventListener("mouseout", y, !1);
});
function w(t) {
t.stopPropagation(), l.setCheckedNode(d.schema);
}
function k(t) {
d.schema.type !== "page" && (t.stopPropagation(), l.setHoverNode(d.schema));
}
function y(t) {
t.stopPropagation(), l.setHoverNode(null);
}
return (t, r) => {
var s;
const p = _e("ENodeItem");
return $(), q(c($e), {
ref_key: "nodeRef",
ref: f,
record: d.schema
}, Se({ _: 2 }, [
(s = d.schema) != null && s.childImmovable ? {
name: "edit-node",
fn: G(() => [
($(!0), z(Y, null, ae(d.schema.children, (v) => ($(), q(p, {
key: v.id,
schema: v
}, null, 8, ["schema"]))), 128))
]),
key: "0"
} : {
name: "edit-node",
fn: G(() => [
d.schema.children ? ($(), q(ze, {
key: 0,
schemas: d.schema.children,
"onUpdate:schemas": r[0] || (r[0] = (v) => d.schema.children = v)
}, null, 8, ["schemas"])) : fe("", !0)
]),
key: "1"
}
]), 1032, ["record"]);
};
}
}), Me = { class: "min-w-750px rounded bg-white h-full" }, je = /* @__PURE__ */ P({
__name: "previewJson",
setup(U, { expose: d }) {
const g = W.getComponent("modal"), l = W.getComponent("monacoEditor"), x = {
theme: "vs-light",
selectOnLineNumbers: !0,
minimap: {
enabled: !1
},
readOnly: !0
}, f = S(null), i = S(!1), w = L("pageSchema");
function k() {
i.value = !1;
}
function y() {
i.value = !0, f.value ? f.value.setValue(JSON.stringify(w, null, 2)) : setTimeout(() => {
y();
}, 300);
}
function t(r = "epic-data.json") {
let p = "data:text/json;charset=utf-8,";
p += JSON.stringify(w, null, 2);
var s = encodeURI(p), v = document.createElement("a");
v.setAttribute("href", s), v.setAttribute("download", r), v.click();
}
return d({
handleOpen: y
}), (r, p) => ($(), q(c(g), {
modelValue: i.value,
"onUpdate:modelValue": p[0] || (p[0] = (s) => i.value = s),
title: "查看数据",
class: "w-900px",
width: "900px",
onClose: k,
onOk: t,
okText: "导出数据"
}, {
default: G(() => [
m("div", Me, [
B(c(l), {
ref_key: "monacoEditorRef",
ref: f,
class: "editor h-full",
config: x,
language: "json"
}, null, 512)
])
]),
_: 1
}, 8, ["modelValue"]));
}
}), Ue = { class: "edit-toolbar flex items-center justify-between px-4 mx-1" }, Ae = { class: "flex-1 h-full flex items-center" }, Ie = ["title", "onClick"], Fe = { class: "flex-1 h-full flex items-center justify-center" }, We = ["title", "onClick"], Ee = { class: "flex-1 h-full flex items-center justify-end" }, Je = {
key: 0,
class: "flex items-center ml-12px"
}, Pe = { class: "pr-8px w-82px cursor-pointer" }, Ze = { class: "w-90px cursor-pointer" }, Qe = /* @__PURE__ */ P({
__name: "toolbar",
setup(U) {
const d = W.getComponent("slider"), g = W.getComponent("select"), { canvasScale: l, disabledZoom: x } = re(), f = S("pc"), i = L("pageSchema"), w = L("designer"), k = S(null), y = [
{
icon: "icon-a-diannaotoubu",
title: "pc",
key: "pc"
},
{
icon: "icon-a-pingbantoubu",
title: "平板",
key: "pad"
},
{
icon: "icon-a-shoujitoubu",
title: "手机",
key: "mobile"
}
], t = F.recordList, r = F.undoList, p = E(() => [
{
icon: "icon-daima1",
title: "查看数据",
on: () => R()
},
{
icon: "icon-shangchuan1",
title: "导入数据",
on: K
},
{
icon: "icon-shanchu1",
title: "清空",
on: V
},
{
icon: "icon-chexiao2x",
title: "撤销",
on: M,
disabled: !t.value.length
},
{
icon: "icon-fanhui2x",
title: "重做",
on: D,
disabled: !r.value.length
}
]), s = S(null), v = E({
get() {
return `${(l.value * 100).toFixed(0)}%`;
},
set(o) {
l.value = Number(o);
}
}), O = [
{
label: "60%",
value: "0.6"
},
{
label: "80%",
value: "0.8"
},
{
label: "100%",
value: "1.0"
},
{
label: "120%",
value: "1.2"
},
{
label: "140%",
value: "1.4"
}
];
function M() {
const o = F.undo();
o && (ne(i.schemas, o), w.setCheckedNode(i.schemas[0]));
}
function D() {
const o = F.redo();
o && (ne(i.schemas, o), w.setCheckedNode(i.schemas[0]));
}
function V() {
w.reset();
}
function R() {
k.value.handleOpen();
}
function K() {
var o;
(o = s.value) == null || o.click();
}
function Z(o) {
var j;
const e = (j = o.target.files) == null ? void 0 : j[0];
if (!e)
return;
o.target.value = null;
const a = new FileReader();
a.readAsText(e), a.onload = (n) => {
var u;
A((u = n.target) == null ? void 0 : u.result);
};
}
function A(o) {
try {
let e = JSON.parse(o ?? "");
e.schemas || (e = Oe(e)), ne(i, e);
} catch (e) {
console.error(e);
}
}
function H(o) {
f.value = o;
const e = {
pc: {},
pad: {
width: "800px"
},
mobile: {
width: "420px"
}
};
i.canvas = e[o];
}
return (o, e) => ($(), z(Y, null, [
m("div", Ue, [
m("div", Ae, [
($(!0), z(Y, null, ae(p.value, (a, j) => ($(), z("div", {
title: a.title,
class: Q(["action-item h-90% px-10px flex items-center hover:bg-gray-50 cursor-pointer", { disabled: a.disabled }]),
key: j,
onClick: a.on
}, [
B(c(te), {
name: a.icon
}, null, 8, ["name"])
], 10, Ie))), 128))
]),
se(m("input", {
type: "file",
ref_key: "fileRef",
ref: s,
accept: ".json,.txt",
onChange: Z
}, null, 544), [
[le, !1]
]),
m("div", Fe, [
($(), z(Y, null, ae(y, (a) => m("div", {
title: a.title,
class: Q(["device-item h-90% px-10px flex items-center hover:bg-gray-50 cursor-pointer", { checked: a.key === f.value }]),
key: a.key,
onClick: (j) => H(a.key)
}, [
B(c(te), {
name: a.icon
}, null, 8, ["name"])
], 10, We)), 64))
]),
m("div", Ee, [
c(x) ? fe("", !0) : ($(), z("div", Je, [
m("div", Pe, [
B(c(g), {
value: v.value,
"onUpdate:value": e[0] || (e[0] = (a) => v.value = a),
modelValue: v.value,
"onUpdate:modelValue": e[1] || (e[1] = (a) => v.value = a),
options: O,
size: "small"
}, null, 8, ["value", "modelValue"])
]),
m("div", Ze, [
B(c(d), {
min: 0.6,
max: 1.4,
step: 0.01,
tooltip: !1,
value: c(l),
"onUpdate:value": e[2] || (e[2] = (a) => ue(l) ? l.value = a : null),
modelValue: c(l),
"onUpdate:modelValue": e[3] || (e[3] = (a) => ue(l) ? l.value = a : null)
}, null, 8, ["value", "modelValue"])
])
]))
])
]),
B(je, {
ref_key: "previewJson",
ref: k
}, null, 512)
], 64));
}
}), Ke = { class: "h-full flex flex-col relative" }, Xe = ["draggable"], Ye = /* @__PURE__ */ P({
__name: "editScreenContainer",
setup(U) {
const d = L("pageSchema"), g = S(null), l = S(null), x = S(null), { pressSpace: f, disabledZoom: i } = re(), { handleElementDragStart: w, handleElementDrag: k, handleElementDragEnd: y } = Be(g), { width: t, height: r } = Te(g), { canvasScale: p, handleZoom: s } = Le(l);
let v = 0, O = 0;
const M = S({}), D = S({}), V = S({}), R = we({ width: 0, height: 0 });
J(() => {
var o, e;
return { width: (o = d.canvas) == null ? void 0 : o.width, height: (e = d.canvas) == null ? void 0 : e.height };
}, Z), J(V, () => {
de(K);
}), ve(() => {
var o, e;
Z({ width: (o = d.canvas) == null ? void 0 : o.width, height: (e = d.canvas) == null ? void 0 : e.height });
});
function K() {
const o = c(x);
o && (R.value = {
width: o.clientWidth,
height: o.clientHeight
});
}
function Z({ width: o, height: e }) {
V.value = {
width: o ?? "0",
height: e ?? "0"
};
}
Re(t, A), J(R, A);
function A() {
if (i.value) {
D.value = { width: v + "px", height: O + "px", transform: "translate(0px, 20px)" };
return;
}
let o = R.value.width || v, e = R.value.height || O;
M.value = { width: t.value + o + "px", height: r.value + e + "px" }, D.value = { width: o + "px", height: e + "px" }, H();
}
function H() {
de(() => {
let o = R.value.width || v;
const a = (R.value.height || O) / 2, j = o / 2;
g.value.scrollTo(j, a);
});
}
return ie(g, ([{ contentRect: o }]) => {
if (v = o.width - 60, O = o.height - 80, !i.value) {
const e = (o.width - 20) / R.value.width;
e < 1.2 && (p.value = e);
}
A();
}), (o, e) => ($(), z("div", Ke, [
B(Qe),
m("div", {
ref_key: "editScreenContainerRef",
ref: g,
class: Q(["flex-1 overflow-auto overflow-y-hidden epic-edit-screen-container", { "cursor-grab": c(f) }]),
draggable: c(f),
onWheel: e[0] || (e[0] = //@ts-ignore
(...a) => c(s) && c(s)(...a)),
onDragstart: e[1] || (e[1] = //@ts-ignore
(...a) => c(w) && c(w)(...a)),
onDragend: e[2] || (e[2] = //@ts-ignore
(...a) => c(y) && c(y)(...a)),
onDrag: e[3] || (e[3] = //@ts-ignore
(...a) => c(k) && c(k)(...a))
}, [
m("div", {
id: "canvasContainer",
class: "flex items-center justify-center",
style: ee(M.value)
}, [
m("div", {
ref_key: "draggableElRef",
ref: l,
class: "transition-all"
}, [
m("div", {
class: Q({ "pointer-events-none": c(f) }),
style: ee(D.value)
}, [
Ce(o.$slots, "default")
], 6)
], 512)
], 4)
], 42, Xe),
m("div", {
ref_key: "sizeBoxRef",
ref: x,
class: "absolute op-0 pointer-events-none",
style: ee(V.value)
}, null, 4)
]));
}
}), qe = { class: "epic-edit-canvas" }, lt = /* @__PURE__ */ P({
__name: "index",
setup(U) {
const d = L("pageSchema"), g = E(() => d.schemas[0]), l = E(() => ({
width: "100%",
height: "100%"
}));
return (x, f) => ($(), z("section", qe, [
B(Ye, null, {
default: G(() => [
m("div", {
class: "epic-edit-range rounded-md overflow-auto relative",
style: ee(l.value)
}, [
B(pe, { schema: g.value }, null, 8, ["schema"]),
B(He)
], 4)
]),
_: 1
})
]));
}
});
export {
lt as default
};