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