epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
1,989 lines (1,986 loc) • 366 kB
JavaScript
var Bn = Object.defineProperty;
var Dn = (e, t, l) => t in e ? Bn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l;
var we = (e, t, l) => (Dn(e, typeof t != "symbol" ? t + "" : t, l), l);
import { defineAsyncComponent as qn, effectScope as Hn, watch as N, nextTick as fe, getCurrentScope as To, onScopeDispose as Ao, unref as g, computed as E, ref as x, getCurrentInstance as re, onMounted as je, defineComponent as K, reactive as ye, inject as J, useAttrs as Wn, provide as le, shallowRef as _t, onUnmounted as Io, resolveComponent as Un, openBlock as O, createBlock as de, mergeProps as Xe, withCtx as G, resolveDynamicComponent as Wt, createVNode as F, normalizeProps as Ol, guardReactiveProps as Tl, renderSlot as Y, createCommentVNode as nt, useSlots as il, Suspense as zo, createElementVNode as S, createElementBlock as z, Fragment as Ro, renderList as Kn, normalizeClass as te, toRaw as Al, watchEffect as Vo, readonly as Lo, warn as Gn, isVNode as Ut, toRefs as No, onBeforeUnmount as Fo, onUpdated as Mo, normalizeStyle as Kt, createTextVNode as ko, toDisplayString as Gt, TransitionGroup as Yn, Transition as Jn, toHandlers as Zn, withKeys as Qn, withModifiers as Xn, withDirectives as jo, vShow as Bo, h as ea } from "vue";
const ce = (e, t) => qn({
loader: e,
loadingComponent: t,
delay: 80
});
function sl(e = 10) {
return Math.random().toString(36).substring(2, 2 + e);
}
function ta(e) {
return e.charAt(0).toUpperCase() + e.slice(1);
}
function Ce(e, t = /* @__PURE__ */ new WeakMap()) {
if (typeof e != "object" || e === null)
return e;
if (t.has(e))
return t.get(e);
if (Array.isArray(e)) {
const o = e.map((n) => Ce(n, t));
return t.set(e, o), o;
}
const l = {};
return t.set(e, l), Object.keys(e).forEach((o) => {
l[o] = Ce(e[o], t);
}), l;
}
function ly(e) {
const [t] = na([Ce(e)], (l) => {
const o = {
...l,
id: `${l.type}_${sl(8)}`
};
return (o.field || o.input) && (o.field = o.id), o;
});
return t;
}
function at(e, t) {
for (const [l, o] of Object.entries(t)) {
const n = e == null ? void 0 : e[l];
n && o && typeof n == "object" && typeof o == "object" ? at(n, o) : e[l] = o;
}
Object.keys(e).reverse().forEach((l) => {
t.hasOwnProperty(l) || (Array.isArray(t) ? e.splice(l, 1) : delete e[l]);
});
}
function la(e, t, l = /* @__PURE__ */ new WeakMap()) {
const o = (n) => {
if (Array.isArray(n))
return n.map(o);
if (typeof n == "object" && n !== null) {
if (l.has(n))
return "[Circular]";
l.set(n, !0);
const a = Object.keys(n).sort(), r = {};
return a.forEach((i) => {
r[i] = o(n[i]);
}), l.delete(n), r;
} else
return n;
};
return JSON.stringify(o(e)) === JSON.stringify(o(t));
}
function oa(e, t) {
const l = [];
let o = !1;
function n(a) {
if (l.push(a), a.id === t && (o = !0), !o && a.children != null && a.children.length > 0)
for (let r = 0; r < a.children.length && (n(a.children[r]), !o); r++)
;
if (!o && a.slots)
for (let r in a.slots)
for (let i = 0; i < a.slots[r].length && (n(a.slots[r][i]), !o); i++)
;
o || l.pop();
}
return e.forEach(n), o || console.error(`没有查询到id为${t}的节点`), l;
}
function oy(e, t) {
const l = e.split(".");
let o = t;
for (let n = 0; n < l.length; n++)
if (o = o[l[n]], typeof o > "u")
return;
return o;
}
function ny(e, t, l) {
const o = t.split(".");
let n = l;
o.forEach((a, r) => {
if (r === o.length - 1) {
n[a] = e;
return;
}
n = n[a] ?? (n[a] = {});
});
}
function ay(e, t = "default") {
const l = $t(
e,
(n) => n.type === "form" && n.name === t,
!0
);
return $t(
(l == null ? void 0 : l.children) ?? [],
(n) => !!n.input,
!1,
(n) => n.type !== "subform"
).map((n) => n.field);
}
function $t(e, t, l = !1, o) {
const n = [], a = [...e];
for (; a.length; ) {
const r = a.pop();
if (r != null && r.children && (!o || o(r)) && a.push(...r.children), r != null && r.slots && (!o || o(r)))
for (let i in r.slots)
a.push(...r.slots[i]);
if (t(r) && (n.push(r), l))
return r;
}
return l ? !1 : n;
}
function na(e, t, l) {
const o = [...e];
for (; o.length; ) {
const n = o.pop();
if (n != null && n.children && (!l || l(n)) && o.push(...n.children), n != null && n.slots && (!l || l(n)))
for (let a in n.slots)
o.push(...n.slots[a]);
at(n, t(n));
}
return e;
}
function ry(e, t) {
const l = $t(
e,
(o) => o.id === t,
!0
);
if (!l)
throw new Error(`没有查询到id为${t}的节点`);
return l;
}
function iy(e, t) {
const l = [{ type: "", children: e }];
let o = 0, n = null;
if ($t(
l,
(a) => {
if (n = a.children ?? null, !n) {
if (a != null && a.slots)
for (let r in a.slots) {
n = a.slots[r];
for (let i = 0; i < n.length; i++)
if (n[i].id === t)
return o = i, !0;
}
return !1;
}
for (let r = 0; r < n.length; r++)
if (n[r].id === t)
return o = r, !0;
return !1;
},
!0
), !n)
throw new Error(`没有查询到id为${t}的节点`);
return {
list: n,
schema: n[o],
index: o
};
}
function sy(e) {
const t = {
schemas: [
{
type: "page",
id: "root",
label: "页面",
children: [
{
label: "表单",
type: "form",
icon: "epic-icon-daibanshixiang",
labelWidth: e.config.labelWidth || 100,
name: "default",
componentProps: {
layout: e.config.layout || "horizontal",
labelWidth: e.config.labelWidth || 100,
labelLayout: e.config.labelLayout === "flex" ? "fixed" : "flex",
labelCol: e.config.labelCol || { span: 5 },
wrapperCol: e.config.wrapperCol || { span: 19 },
hideRequiredMark: e.config.hideRequiredMark || !1,
colon: e.config.colon || !0,
labelAlign: e.config.labelAlign || "right",
size: e.config.size || "middle"
},
children: [],
id: "form_" + sl()
}
],
componentProps: {
style: {
padding: "16px"
}
}
}
],
script: e.script || ""
};
return t.schemas[0].children[0].children = Ze(
e.list
), t;
}
function Ze(e, t) {
return e.map((l) => {
var s, f, p;
let o = l.type ?? "";
const n = l.options ?? {}, a = (d, m) => {
o === d && (o = m, n.defaultValue && (n.defaultValue = JSON.parse(n.defaultValue)));
};
if (a("uploadImg", "upload-image"), a("uploadFile", "upload-file"), o === "date" && n.range && (n.type = "daterange", delete n.range), (o === "date" || o === "time") && (n.valueFormat = n.format), o === "textarea") {
const { minRows: d, maxRows: m } = n;
n.autoSize = { minRows: d, maxRows: m }, delete n.minRows, delete n.maxRows;
}
o === "number" && !n.precision && delete n.precision, n.width && (n.style = { width: n.width }, delete n.width), o === "grid" && (o = "row", l.childImmovable = !0), t && t.type === "grid" && (o = "col", n.span = l.span, l.key = sl());
const r = {
label: l.label,
type: o,
icon: l.icon || "",
field: l.model,
componentProps: n,
childImmovable: l.childImmovable,
id: l.key
};
return (n.noFormItem || !n.showLabel) && (r.noFormItem = !0, delete n.noFormItem, delete n.showLabel), n.clearable && (n.allowClear = !0, delete n.clearable), [
"input",
"textarea",
"number",
"password",
"select",
"cascader",
"checkbox",
"radio",
"date",
"time",
"slider",
"switch",
"color-picker",
"upload-file",
"upload-image"
].includes(o) && (r.input = !0, ((f = (s = l.rules) == null ? void 0 : s[0]) == null ? void 0 : f.required) === !1 && l.rules.shift(), ((p = l.rules) == null ? void 0 : p.length) > 0 && (r.rules = l.rules)), l.list && (r.children = Ze(l.list, l)), l.columns && (r.children = Ze(l.columns, l)), l.trs && (r.children = Ze(l.trs, l)), l.tds && (r.children = Ze(l.tds, l)), r;
});
}
function pl(e) {
return To() ? (Ao(e), !0) : !1;
}
function aa(e) {
let t = 0, l, o;
const n = () => {
t -= 1, o && t <= 0 && (o.stop(), l = void 0, o = void 0);
};
return (...a) => (t += 1, l || (o = Hn(!0), l = o.run(() => e(...a))), pl(n), l);
}
function cl(e) {
return typeof e == "function" ? e() : g(e);
}
const ra = typeof window < "u", ia = () => {
};
function py(e, t, l) {
const o = N(e, (...n) => (fe(() => o()), t(...n)), l);
}
function Ne(e) {
var t;
const l = cl(e);
return (t = l == null ? void 0 : l.$el) != null ? t : l;
}
const St = ra ? window : void 0;
function sa(...e) {
let t, l, o, n;
if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([l, o, n] = e, t = St) : [t, l, o, n] = e, !t)
return ia;
Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
const a = [], r = () => {
a.forEach((p) => p()), a.length = 0;
}, i = (p, d, m, b) => (p.addEventListener(d, m, b), () => p.removeEventListener(d, m, b)), s = N(
() => [Ne(t), cl(n)],
([p, d]) => {
r(), p && a.push(
...l.flatMap((m) => o.map((b) => i(p, m, b, d)))
);
},
{ immediate: !0, flush: "post" }
), f = () => {
s(), r();
};
return pl(f), f;
}
var pa = Object.defineProperty, ca = Object.defineProperties, da = Object.getOwnPropertyDescriptors, Il = Object.getOwnPropertySymbols, ua = Object.prototype.hasOwnProperty, fa = Object.prototype.propertyIsEnumerable, zl = (e, t, l) => t in e ? pa(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Do = (e, t) => {
for (var l in t || (t = {}))
ua.call(t, l) && zl(e, l, t[l]);
if (Il)
for (var l of Il(t))
fa.call(t, l) && zl(e, l, t[l]);
return e;
}, qo = (e, t) => ca(e, da(t));
function ma(e) {
return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
}
function Ho(...e) {
let t, l, o = {};
e.length === 3 ? (t = e[0], l = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, l = e[0], o = e[1]) : (t = e[0], l = e[1]) : (t = !0, l = e[0]);
const {
target: n = St,
eventName: a = "keydown",
passive: r = !1,
dedupe: i = !1
} = o, s = ma(t);
return sa(n, a, (p) => {
p.repeat && cl(i) || s(p) && l(p);
}, r);
}
function Ft(e, t, l = {}) {
return Ho(e, t, qo(Do({}, l), { eventName: "keydown" }));
}
function Mt(e, t, l = {}) {
return Ho(e, t, qo(Do({}, l), { eventName: "keyup" }));
}
function ba() {
const e = x(!1);
return re() && je(() => {
e.value = !0;
}), e;
}
function ha(e) {
const t = ba();
return E(() => (t.value, !!e()));
}
var Rl = Object.getOwnPropertySymbols, ya = Object.prototype.hasOwnProperty, va = Object.prototype.propertyIsEnumerable, ga = (e, t) => {
var l = {};
for (var o in e)
ya.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
if (e != null && Rl)
for (var o of Rl(e))
t.indexOf(o) < 0 && va.call(e, o) && (l[o] = e[o]);
return l;
};
function Pa(e, t, l = {}) {
const o = l, { window: n = St } = o, a = ga(o, ["window"]);
let r;
const i = ha(() => n && "ResizeObserver" in n), s = () => {
r && (r.disconnect(), r = void 0);
}, f = E(
() => Array.isArray(e) ? e.map((m) => Ne(m)) : [Ne(e)]
), p = N(
f,
(m) => {
if (s(), i.value && n) {
r = new ResizeObserver(t);
for (const b of m)
b && r.observe(b, a);
}
},
{ immediate: !0, flush: "post", deep: !0 }
), d = () => {
s(), p();
};
return pl(d), {
isSupported: i,
stop: d
};
}
function cy(e, t = { width: 0, height: 0 }, l = {}) {
const { window: o = St, box: n = "content-box" } = l, a = E(() => {
var s, f;
return (f = (s = Ne(e)) == null ? void 0 : s.namespaceURI) == null ? void 0 : f.includes("svg");
}), r = x(t.width), i = x(t.height);
return Pa(
e,
([s]) => {
const f = n === "border-box" ? s.borderBoxSize : n === "content-box" ? s.contentBoxSize : s.devicePixelContentBoxSize;
if (o && a.value) {
const p = Ne(e);
if (p) {
const d = o.getComputedStyle(p);
r.value = Number.parseFloat(d.width), i.value = Number.parseFloat(d.height);
}
} else if (f) {
const p = Array.isArray(f) ? f : [f];
r.value = p.reduce((d, { inlineSize: m }) => d + m, 0), i.value = p.reduce((d, { blockSize: m }) => d + m, 0);
} else
r.value = s.contentRect.width, i.value = s.contentRect.height;
},
l
), N(
() => Ne(e),
(s) => {
r.value = s ? t.width : 0, i.value = s ? t.height : 0;
}
), {
width: r,
height: i
};
}
function wa() {
const e = x(1), t = x(!1), { pressSpace: l, pressShift: o, pressCtrl: n } = _a();
return {
canvasScale: e,
pressSpace: l,
pressShift: o,
pressCtrl: n,
disabledZoom: t
};
}
const dl = aa(wa);
function _a() {
const e = x(!1), t = x(!1), l = x(!1);
return Ft(" ", (o) => {
var n = o.target;
["INPUT", "TEXTAREA"].includes(n.tagName) || o.preventDefault(), e.value = !0;
}), Mt(" ", () => {
e.value = !1;
}), Ft("Shift", (o) => {
o.preventDefault(), t.value = !0;
}), Mt("Shift", () => {
t.value = !1;
}), Ft("Control", (o) => {
o.preventDefault(), l.value = !0;
}), Mt("Control", () => {
l.value = !1;
}), { pressSpace: e, pressShift: t, pressCtrl: l };
}
function dy(e) {
const { pressSpace: t } = dl();
let l = 0, o = 0;
function n(i) {
var s;
l = i.x, o = i.y, (s = i.dataTransfer) == null || s.setDragImage(document.createElement("div"), 0, 0);
}
function a(i) {
if (i.preventDefault(), !i.x || !i.y || !t.value)
return;
const s = i.x - l, f = i.y - o;
l = i.x, o = i.y, e.value && (e.value.scrollTop -= f, e.value.scrollLeft -= s);
}
function r() {
t.value = !1;
}
return { handleElementDragStart: n, handleElementDrag: a, handleElementDragEnd: r };
}
function uy(e) {
const { pressCtrl: t, canvasScale: l, disabledZoom: o } = dl();
function n(a) {
if (!t.value || o.value)
return;
a.preventDefault();
let r = 0;
a.deltaY < 0 ? r = l.value + 0.05 : r = l.value - 0.05, !(r > 150 || r < 0.5) && (l.value = r);
}
return N(
() => l.value,
(a) => {
e.value && !o.value && (e.value.style.transform = `scale(${a})`);
}
), { handleZoom: n, canvasScale: l };
}
function fy(e, t = 16.66) {
let l;
function o() {
n(), l = window.setInterval(e, t);
}
function n() {
window.clearInterval(l);
}
return {
startTimedQuery: o,
stopTimedQuery: n
};
}
function my(e, t) {
let l = null;
return (...o) => {
l && clearTimeout(l), l = setTimeout(() => {
e.apply(this, o);
}, t);
};
}
class $a {
constructor() {
we(this, "components", {});
we(this, "componentConfigs", {});
we(this, "schemaGroup", []);
we(this, "schemaGroupList", x([]));
we(this, "viewsContainers", {
activitybars: [],
rightSidebars: []
});
we(this, "publicMethods", {
// test: {
// describe: "测试函数",
// methodName: "test",
// method: () => {
// alert("测试函数弹出");
// },
// },
});
}
/**
* 添加组件到插件管理器中
* @param componentName 组件名称
* @param component 组件
*/
component(t, l) {
typeof l == "function" && (l = ce(l)), this.components[t] = l;
}
/**
* 注册组件到插件管理器中
* @param component 组件
* @param schema 组件结构
* @param attrSchemas 属性结构
* @param bindModel 双向绑定value
*/
registerComponent(t) {
this.component(
t.defaultSchema.type,
t.component
), t.defaultSchema.input && (t.config.action || (t.config.action = []), t.config.action.unshift(
{
type: "setValue",
describe: "设置值",
argsConfigs: [
{
...t.defaultSchema,
label: "设置数据",
field: "0"
}
]
},
{
type: "getValue",
describe: "获取值"
}
)), this.componentConfigs[t.defaultSchema.type] = t;
}
/**
* 获取所有插件管理中的所有组件
* @returns components
*/
getComponents() {
return this.components;
}
/**
* 通过type 查询相应的组件
* @returns components
*/
getComponent(t) {
return this.components[t];
}
/**
* 注册活动栏
*/
registerActivitybar(t) {
typeof t.component == "function" && (t.component = ce(t.component));
const l = this.viewsContainers.activitybars.findIndex(
(o) => o.id === t.id
);
l !== -1 ? this.viewsContainers.activitybars[l] = t : this.viewsContainers.activitybars.push(t);
}
/**
* 获取所有activitybars
* @returns activitybars
*/
getActivitybars() {
return this.viewsContainers.activitybars;
}
/**
* 注册右侧栏
*/
registerRightSidebar(t) {
typeof t.component == "function" && (t.component = ce(t.component));
const l = this.viewsContainers.rightSidebars.findIndex(
(o) => o.id === t.id
);
l !== -1 ? this.viewsContainers.rightSidebars[l] = t : this.viewsContainers.rightSidebars.push(t);
}
/**
* 获取所有rightSidebars
* @returns rightSidebars
*/
getRightSidebars() {
return this.viewsContainers.rightSidebars;
}
/**
* 获取所有插件管理中的所有组件配置
* @returns componentAttrs
*/
getComponentConfings() {
return this.componentConfigs;
}
/**
* 通过type获取ComponentConfing
* @returns
*/
getComponentConfingByType(t) {
return this.componentConfigs[t];
}
/**
* 设置分组,这个操作将会覆盖原来的数据
* @param {*} schemaGroup
* @returns
*/
setSchemaGroup(t) {
this.schemaGroup = t, this.computedSchemaGroupList();
}
/**
* 添加分组
* @param {*} schemaGroupItem
* @returns
*/
addSchemaGroup(t) {
this.schemaGroup.push(t), this.computedSchemaGroupList();
}
/**
* 计算schemaGroupList
*/
computedSchemaGroupList() {
const t = this.schemaGroup.map((l) => {
const o = l.list.map((n) => {
var r;
const a = (r = this.componentConfigs[n]) == null ? void 0 : r.defaultSchema;
return a ?? (console.warn(`${n} 组件未注册到pluginManager中`), !1);
}).filter((n) => n);
return {
...l,
list: o
};
});
this.schemaGroupList.value = t;
}
/**
* 按照分组获取schemaGroupList
* @returns schemaGroupList
*/
getSchemaByGroup() {
return this.schemaGroupList;
}
/**
* 添加公共方法
* @param method
*/
addPublicMethod(t) {
this.publicMethods[t.methodName] = t;
}
}
const Fe = new $a();
function Wo() {
const e = x({}), t = x({});
function l(s) {
return e.value[s];
}
function o(s, f) {
e.value[s] = f;
}
function n(s) {
delete e.value[s];
}
function a(s) {
const f = Object.entries(
Fe.publicMethods
).reduce((p, [d, m]) => (p[d] = m.method, p), {});
new Function(`const epic = this;${s}`).bind({
...f,
getComponent: l,
find: l,
defineExpose: r,
publicMethods: f
})();
}
function r(s) {
s != null && (t.value = s);
}
function i(s, ...f) {
s == null || s.forEach((p) => {
var d, m, b;
if (p.type === "public" && ((d = Fe.publicMethods[p.methodName]) == null || d.method(p.args)), p.type === "custom" && ((b = (m = t.value)[p.methodName]) == null || b.call(m, ...f)), p.type === "component") {
(p.componentId != null && l(p.componentId))[p.methodName](
...p.args ? JSON.parse(p.args) : f
);
return;
}
});
}
return {
componentInstances: e,
funcs: t,
getComponentInstance: l,
addComponentInstance: o,
removeComponentInstance: n,
setMethods: a,
doActions: i
};
}
function xa() {
const e = x([]), t = x([]), l = x(null);
let o = 0;
function n(i, s = "插入组件") {
const f = Date.now();
o + 150 > f || (o = f, l.value != null && (e.value.push(l.value), t.value.splice(0, t.value.length)), l.value = {
type: s,
record: JSON.stringify(i)
}, e.value.length > 20 && e.value.unshift());
}
function a() {
if (e.value.length === 0)
return !1;
const i = e.value.pop();
return l.value != null && t.value.push(l.value), l.value = i, JSON.parse(i.record);
}
function r() {
if (t.value.length === 0)
return !1;
const i = t.value.pop();
return l.value != null && e.value.push(l.value), l.value = i, JSON.parse(i.record);
}
return {
recordList: e,
undoList: t,
currentRecord: l,
push: n,
undo: a,
redo: r
};
}
const Vl = xa(), Ea = /* @__PURE__ */ K({
name: "ENode",
__name: "node",
props: {
record: {},
modelValue: {},
ruleField: {},
resetFormData: {},
name: {}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const l = e, o = ye(l.record);
let n = J("formData", {});
const a = J("slots", {}), r = J("pageManager", {}), i = J("disabled", !1), s = J("ruleFieldPrefix", null), f = J("resetFormData", !1);
(l.resetFormData || f) && (n = {});
const p = Fe.getComponent("form-item"), d = x(), m = x(), b = Wn();
Object.keys(b).length && le("nodeAttrs", b);
const P = _t(null), u = _t({}), h = ye({}), c = E(() => {
var $, _;
return ($ = o.componentProps) != null && $.hidden ? !1 : typeof o.show == "boolean" ? o.show : ((_ = o.show) == null ? void 0 : _.call(o, { values: n })) ?? !0;
}), v = E(() => {
var V;
const $ = c.value && ((V = o.rules) == null ? void 0 : V.map(
(k) => ({
...k,
validator: k.validator && r.funcs.value[k.validator]
// 自定义校验函数
})
));
let _ = o.field;
l.ruleField ? _ = l.ruleField : s && o.field && (_ = Ce(s), _.push(o.field));
const I = {
...o,
rules: $,
rule: $,
field: _
};
return I.children && delete I.children, I;
}), y = E(() => Fe.getComponentConfingByType(o.type) ?? null), w = () => n[o.field ?? ""] ?? l.modelValue;
N(() => d.value, () => {
A();
});
function A() {
var $;
o.id && d.value && (o.input && (d.value.setValue = W, d.value.getValue = () => n[o.field] || l.modelValue), d.value.setAttr = (_, I) => o.componentProps[_] = I, d.value.getAttr = (_) => o.componentProps[_], r.addComponentInstance(o.id, d.value), ($ = y.value) != null && $.defaultSchema.input && o.noFormItem !== !0 && m.value && r.addComponentInstance(o.id + "formItem", m.value));
}
function M() {
var $;
o.id && (r.removeComponentInstance(o.id), ($ = y.value) != null && $.defaultSchema.input && o.noFormItem !== !0 && r.removeComponentInstance(o.id + "formItem"));
}
async function T() {
var V, k, ee;
if (typeof ((V = o.componentProps) == null ? void 0 : V.defaultValue) < "u") {
const D = n[o.field] ?? ((k = o.componentProps) == null ? void 0 : k.defaultValue);
W(Ce(D));
}
if (o.type === "slot") {
const D = o.slotName;
if (!D)
return;
P.value = K({
setup() {
return () => Y(a, D, {
record: o,
model: n
});
}
});
return;
}
const $ = Fe.getComponent(o.type);
if (!$) {
console.error(`组件${o.type}未注册`);
return;
}
const _ = ((ee = y.value) == null ? void 0 : ee.bindModel) ?? "modelValue";
if (typeof $ == "function") {
const D = await $();
P.value = D.default ?? D;
} else
P.value = $;
const I = {};
o.on && Object.keys(o.on).forEach((D) => {
I[`on${ta(D)}`] = (...q) => r.doActions(o.on[D], ...q);
}), u.value = {
...l,
disabled: i || o.disabled,
bindModel: _,
[`onUpdate:${_}`]: W,
...I
};
}
function W($) {
t("update:modelValue", $), t("change", $), o.field && (n[o.field] = $);
}
let R = null;
return N(() => o, ($) => {
const _ = JSON.stringify({ ...$, children: void 0 });
if (_ === R)
return !1;
R = _, T();
}, {
immediate: !0,
deep: !0
}), Io(M), ($, _) => {
var V;
const I = Un("ENode");
return o.noFormItem !== !0 && ((V = y.value) != null && V.defaultSchema.input) && P.value && c.value ? (O(), de(g(p), Xe({
key: 0,
ref_key: "formItemRef",
ref: m
}, v.value), {
default: G(() => [
(O(), de(Wt(P.value), Xe({
ref_key: "componentInstance",
ref: d,
onVnodeMounted: A
}, { ...u.value, ...o.componentProps, ...h, [u.value.bindModel]: w() }), {
node: G((k) => [
F(I, Ol(Tl(k)), null, 16)
]),
"edit-node": G(() => [
Y($.$slots, "edit-node")
]),
_: 3
}, 16))
]),
_: 3
}, 16)) : P.value && c.value ? (O(), de(Wt(P.value), Xe({
key: 1,
onVnodeMounted: A,
ref_key: "componentInstance",
ref: d,
model: g(n)
}, { ...u.value, ...o.componentProps, ...h, [u.value.bindModel]: w() }), {
node: G((k) => [
F(I, Ol(Tl(k)), null, 16)
]),
"edit-node": G(() => [
Y($.$slots, "edit-node")
]),
_: 3
}, 16, ["model"])) : nt("", !0);
};
}
}), Ca = { class: "epic-builder-main" }, Sa = { class: "loading-box" }, by = /* @__PURE__ */ K({
__name: "builder",
props: {
pageSchema: {}
},
emits: ["ready"],
setup(e, { expose: t, emit: l }) {
const o = e, n = ce(() => import("./index-ab078c8b.js")), a = Wo(), r = il(), i = x({}), s = x(!1), f = ye({
schemas: []
});
N(() => o.pageSchema, (u) => {
at(f, u);
}, {
immediate: !0,
deep: !0
}), N(() => f.script, (u) => {
u && u !== "" && a.setMethods(u);
}, {
immediate: !0
}), le("slots", r), le("pageManager", a), le("forms", i), le("pageSchema", f);
function p(u = "default") {
return new Promise(async (h, c) => {
var w;
if (!s.value) {
const A = N(s, () => {
A(), h(p(u));
});
return;
}
const v = (w = i.value) == null ? void 0 : w[u];
if (!v)
return c(`表单 [name=${u}] 不存在`), !1;
const y = Ce(await v.getData());
h(y);
});
}
function d(u = "default") {
return new Promise(async (h, c) => {
var y;
if (!s.value) {
const w = N(s, () => {
w(), h(p(u));
});
return;
}
const v = (y = i.value) == null ? void 0 : y[u];
if (!v)
return c(`表单 [name=${u}] 不存在`), !1;
try {
await v.validate();
const w = await v.getData();
h(w);
} catch (w) {
c(w);
}
});
}
function m(u, h = "default") {
var v;
if (!s.value) {
const y = N(s, () => {
y(), m(u, h);
});
return;
}
const c = (v = i.value) == null ? void 0 : v[h];
if (!c)
return console.error(`表单 [name=${h}] 不存在`), !1;
c.setData(u);
}
const { proxy: b } = re();
function P() {
fe(() => {
s.value = !0, l("ready", a), b && a.addComponentInstance("builder", b);
});
}
return t({
ready: s,
getData: p,
setData: m,
validate: d
}), (u, h) => (O(), de(zo, { onResolve: P }, {
default: G(() => [
S("div", Ca, [
(O(!0), z(Ro, null, Kn(f.schemas, (c, v) => (O(), de(g(Ea), {
key: v,
record: c
}, null, 8, ["record"]))), 128))
])
]),
fallback: G(() => [
S("div", Sa, [
F(g(n))
])
]),
_: 1
}));
}
}), Oa = { class: "epic-designer-main" }, Ta = { class: "epic-header-container" }, Aa = { class: "loading-box" }, kt = `const { defineExpose, find } = epic;
function test (){
console.log('test')
}
// 通过defineExpose暴露的函数或者属性
defineExpose({
test
})`, hy = /* @__PURE__ */ K({
__name: "designer",
props: {
disabledZoom: { type: Boolean, default: !1 },
hiddenHeader: { type: Boolean, default: !1 }
},
emits: ["ready", "save"],
setup(e, { expose: t, emit: l }) {
const o = e, n = ce(() => import("./index-7db1de30.js")), a = ce(() => import("./index-99543389.js")), r = ce(() => import("./index-9252b69c.js")), i = ce(() => import("./index-276a9e36.js")), s = ce(() => import("./index-ab078c8b.js")), f = Wo(), p = ye({
checkedNode: null,
hoverNode: null,
disableHover: !1,
matched: []
}), d = ye({
schemas: [],
script: ""
}), { disabledZoom: m } = dl();
N(() => o.disabledZoom, (T) => {
m.value = T;
}, {
immediate: !0
}), N(() => d.script, (T) => {
T && T !== "" && f.setMethods(T);
});
const b = [{
type: "page",
id: "root",
label: "页面",
children: [],
componentProps: {
style: {
padding: "16px"
}
}
}];
d.script = kt, le("pageSchema", d), le("pageManager", f), le("designerProps", o), le("designer", {
setCheckedNode: u,
setHoverNode: h,
setDisableHover: v,
reset: A,
state: p
});
function P() {
d.schemas = Ce(b), u(d.schemas[0]), Vl.push(d.schemas, "初始化撤销功能");
}
async function u(T = d.schemas[0]) {
p.checkedNode = T, p.matched = oa(d.schemas, T.id);
}
async function h(T = null) {
var W;
if (!T || p.disableHover)
return p.hoverNode = null, !1;
if ((T == null ? void 0 : T.id) === ((W = p.hoverNode) == null ? void 0 : W.id))
return !1;
p.hoverNode = T;
}
function c() {
fe(() => {
l("ready", { pageManager: f });
});
}
async function v(T = !1) {
p.disableHover = T;
}
function y(T) {
at(d, T);
}
function w() {
return Al(d);
}
function A() {
la(d.schemas, b) && d.script === kt || (at(d.schemas, b), d.script = kt, u(d.schemas[0]), Vl.push(d.schemas, "重置操作"));
}
function M() {
l("save", Al(d));
}
return P(), t({
setData: y,
getData: w,
reset: A
}), (T, W) => (O(), de(zo, { onResolve: c }, {
default: G(() => [
S("div", Oa, [
S("div", Ta, [
Y(T.$slots, "header", {}, () => [
o.hiddenHeader ? nt("", !0) : (O(), de(g(n), {
key: 0,
onSave: M
}, {
header: G(() => [
Y(T.$slots, "header-prefix")
]),
prefix: G(() => [
Y(T.$slots, "header-prefix")
]),
title: G(() => [
Y(T.$slots, "header-title")
]),
"right-prefix": G(() => [
Y(T.$slots, "header-right-prefix")
]),
"right-action": G(() => [
Y(T.$slots, "header-right-action")
]),
"right-suffix": G(() => [
Y(T.$slots, "header-right-suffix")
]),
_: 3
}))
])
]),
S("div", {
class: te(["epic-split-view-container", { "hidden-header": T.hiddenHeader }])
}, [
F(g(a)),
F(g(r)),
F(g(i))
], 2)
])
]),
fallback: G(() => [
S("div", Aa, [
F(g(s))
])
]),
_: 3
}));
}
}), Ia = {
component: async () => await import("./index-8d169eec.js"),
defaultSchema: {
label: "代码编辑器",
type: "monacoEditor",
field: "monacoEditor",
icon: "epic-icon-write",
input: !0
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "标题",
type: "input",
field: "label"
},
{
label: "默认值",
type: "monacoEditor",
field: "componentProps.defaultValue"
}
]
},
bindModel: "model-value"
}, za = {
component: async () => await import("./index-a654f291.js"),
defaultSchema: {
label: "页面",
type: "page",
componentProps: {},
children: []
},
config: {
attribute: [
{
label: "页面名称",
type: "input",
componentProps: {
placeholder: "请输入"
},
field: "name"
}
]
}
};
function Ra(e) {
e.component("ETabPaneEditor", async () => await import("./index-5c10631c.js")), e.component("EInputSize", async () => await import("./index-fdeb6756.js")), e.component("EColEditor", async () => await import("./index-f050ba89.js")), e.component("EActionEditor", async () => await import("./index-c88b961f.js")), e.component("ERuleEditor", async () => await import("./index-d90b1a4e.js")), e.component("EOptionsEditor", async () => await import("./index-94b447ce.js")), e.component("ENode", async () => await import("./index-36a47400.js")), e.registerActivitybar({
id: "component_view",
title: "组件",
icon: "epic-icon-mokuai_1",
component: async () => await import("./index-28eb23c0.js")
}), e.registerActivitybar({
id: "sound_code_view",
title: "源码",
icon: "epic-icon-daima1",
component: async () => await import("./index-57e03c49.js")
}), e.registerActivitybar({
id: "outline_view",
title: "大纲",
icon: "epic-icon-juxingkaobei",
component: async () => await import("./outline-6a9e02d4.js")
}), e.registerRightSidebar({
id: "attribute_view",
title: "属性",
component: async () => await import("./attributeView-df81a326.js")
}), e.registerRightSidebar({
id: "style_view",
title: "样式",
component: async () => await import("./styleView-2bc8a30d.js")
}), e.registerRightSidebar({
id: "event_view",
title: "事件",
component: async () => await import("./eventView-802fcc6e.js")
}), [Ia, za].forEach((l) => {
e.registerComponent(l);
});
}
Ra(Fe);
const Va = {
component: () => import("./index-6b5281d9.js").then((e) => e.i),
defaultSchema: {
label: "输入框",
type: "input",
field: "input",
icon: "epic-icon-write",
input: !0,
componentProps: {
bordered: !0,
placeholder: "请输入"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "标题",
type: "input",
field: "label"
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "默认值",
type: "input",
field: "componentProps.defaultValue",
componentProps: {
placeholder: "请输入"
}
},
{
label: "输入类型",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "text",
value: "text"
},
{
label: "number",
value: "number"
},
{
label: "password",
value: "password"
}
]
},
field: "componentProps.type"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "可清空",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "最大输入长度",
type: "number",
field: "componentProps.maxLength",
componentProps: {
placeholder: "请输入"
}
},
{
label: "统计字数",
type: "switch",
field: "componentProps.showCount"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, La = {
component: async () => (await import("./index-6b5281d9.js").then((e) => e.i)).Textarea,
defaultSchema: {
label: "文本域",
type: "textarea",
field: "textarea",
icon: "epic-icon-edit",
input: !0,
componentProps: {
placeholder: "请输入"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "标题",
type: "input",
field: "label"
},
{
label: "默认值",
type: "textarea",
field: "componentProps.defaultValue",
componentProps: {
placeholder: "请输入"
}
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "最小行数",
type: "number",
field: "componentProps.autoSize.minRows",
componentProps: {
placeholder: "请输入"
}
},
{
label: "最大行数",
type: "number",
field: "componentProps.autoSize.maxRows",
componentProps: {
placeholder: "请输入"
}
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "最大输入长度",
type: "number",
field: "componentProps.maxLength",
componentProps: {
placeholder: "请输入"
}
},
{
label: "统计字数",
type: "switch",
field: "componentProps.showCount"
},
{
label: "可清除",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, Na = {
component: () => import("./index-4d604834.js").then((e) => e.i),
defaultSchema: {
label: "数字输入框",
type: "number",
icon: "epic-icon-number",
field: "number",
input: !0,
componentProps: {
style: { width: "100%" },
placeholder: "请输入"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "默认值",
type: "input",
field: "componentProps.defaultValue",
componentProps: {
placeholder: "请输入",
size: "middle"
}
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "键盘快捷行为",
type: "switch",
field: "componentProps.keyboard"
},
{
label: "最大值",
type: "number",
field: "componentProps.max",
componentProps: {
placeholder: "请输入"
}
},
{
label: "最小值",
type: "number",
field: "componentProps.min",
componentProps: {
placeholder: "请输入"
}
},
{
label: "精度",
type: "number",
field: "componentProps.precision",
componentProps: {
placeholder: "请输入"
}
},
{
label: "步长",
type: "number",
field: "componentProps.step",
componentProps: {
placeholder: "请输入"
}
},
{
label: "字符模式",
type: "switch",
field: "componentProps.stringMode"
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "可清空",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, Fa = {
component: async () => (await import("./index-6b5281d9.js").then((e) => e.i)).InputPassword,
defaultSchema: {
label: "密码输入框",
type: "password",
icon: "epic-icon-mima",
field: "password",
input: !0,
componentProps: {
placeholder: "请输入",
bordered: !0
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "占位内容",
type: "input",
field: "componentProps.placeholder"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "有边框",
type: "switch",
field: "componentProps.bordered"
},
{
label: "最大输入长度",
type: "number",
field: "componentProps.maxLength",
componentProps: {
placeholder: "请输入"
}
},
{
label: "统计字数",
type: "switch",
field: "componentProps.showCount"
},
{
label: "可清空",
type: "switch",
field: "componentProps.allowClear"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "input",
describe: "输入值"
},
{
type: "change",
describe: "值修改"
},
{
type: "pressEnter",
describe: "按下回车的回调"
},
{
type: "focus",
describe: "获取焦点"
},
{
type: "blur",
describe: "失去焦点"
}
],
action: [
{
type: "focus",
describe: "使 input 获取焦点"
},
{
type: "blur",
describe: "使 input 失去焦点"
},
{
type: "select",
describe: "选中 input 中的文字"
}
]
},
bindModel: "value"
}, Ma = {
component: () => import("./Group-9e132bf3.js").then((e) => e.G),
defaultSchema: {
label: "单选框",
type: "radio",
icon: "epic-icon-danxuan-cuxiantiao",
field: "radio",
input: !0,
componentProps: {
options: [
{
label: "选项1",
value: "选项1"
},
{
label: "选项2",
value: "选项2"
}
],
optionType: "default"
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "默认值",
type: "radio",
field: "componentProps.defaultValue"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}
]
},
field: "componentProps.size"
},
{
label: "option类型",
type: "select",
componentProps: {
options: [
{
label: "default",
value: "default"
},
{
label: "button",
value: "button"
}
]
},
field: "componentProps.optionType"
},
{
label: "禁用",
type: "switch",
field: "componentProps.disabled"
},
{
label: "隐藏",
type: "switch",
field: "componentProps.hidden"
},
{
label: "选项管理",
type: "EOptionsEditor",
layout: "vertical",
field: "componentProps.options"
},
{
label: "表单校验",
type: "ERuleEditor",
layout: "vertical",
field: "rules",
describe: "校验规则需要配合表单使用"
}
],
event: [
{
type: "change",
describe: "值变化时"
}
]
},
bindModel: "value"
}, ka = {
component: () => import("./Group-e332ea9d.js").then((e) => e.G),
defaultSchema: {
label: "多选框",
type: "checkbox",
icon: "epic-icon-duoxuan1",
field: "checkbox",
input: !0,
componentProps: {
options: [
{
label: "选项1",
value: "选项1"
},
{
label: "选项2",
value: "选项2"
}
]
}
},
config: {
attribute: [
{
label: "字段名",
type: "input",
field: "field"
},
{
label: "默认值",
type: "checkbox",
field: "componentProps.defaultValue"
},
{
label: "文字",
type: "input",
field: "label"
},
{
label: "尺寸",
type: "select",
componentProps: {
placeholder: "请选择",
allowClear: !0,
options: [
{
label: "large",
value: "large"
},
{
label: "middle",
value: "middle"
},
{
label: "small",
value: "small"
}