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