epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
252 lines (251 loc) • 11.8 kB
JavaScript
import { defineComponent as H, ref as x, computed as _, reactive as Q, createBlock as b, openBlock as c, unref as m, withCtx as S, createElementVNode as i, createTextVNode as h, normalizeClass as C, createVNode as B, createCommentVNode as k, toDisplayString as u, withModifiers as X, createElementBlock as y, withDirectives as Y, Fragment as Z, renderList as ee, vShow as te, nextTick as oe, toRaw as ne } from "vue";
/* empty css */
import U from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css */
/* empty css */
import { findSchemaById as ae, deepClone as ie } from "../../../../../utils/src/common/data.js";
import { getUUID as le } from "../../../../../utils/src/common/string.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import { useClipboard as se } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { useDesignerContext as ce } from "../../../../../hooks/src/designer/useDesignerContext.js";
import { usePageManager as me } from "../../../../../hooks/src/designer/usePageManager.js";
import { pluginManager as d } from "../../../../../manager/src/pluginManager.js";
/* empty css */
import de from "../../../../base-ui/src/tree/tree.vue.js";
import pe from "./epArgsEditor.vue.js";
import re from "./epScriptEdit.vue.js";
const ue = { class: "epic-modal-action-main rounded" }, fe = { class: "epic-modal-left-panel flex h-full flex-col" }, ve = { class: "flex h-0 flex-1 flex-col" }, ge = { class: "h-0 flex-1" }, he = { class: "max-w-full truncate" }, ye = { class: "epic-node-type-text w-0 flex-1 truncate" }, Ie = { class: "epic-action-select h-30/100 flex flex-col" }, xe = { class: "mb-2" }, _e = { class: "pr-8px flex-1 overflow-auto" }, be = ["onClick"], Ce = ["title"], ke = { class: "pt-42px text-center text-gray-400" }, Ne = { class: "epic-modal-right-panel" }, $e = { key: 1 }, Se = {
key: 0,
class: "bg-$ep-muted mb-4 rounded-lg border p-4 transition-colors"
}, Be = { class: "flex flex-col gap-1" }, Ve = { class: "flex items-center" }, we = { class: "text-$ep-text-helper text-sm font-medium" }, De = { class: "text-$ep-text-secondary" }, Me = {
key: 1,
class: "pt-42px text-center text-gray-400"
}, Ye = /* @__PURE__ */ H({
__name: "index",
emits: ["add", "edit"],
setup(Te, { expose: A, emit: E }) {
const K = E, j = d.component.get("modal"), z = d.component.get("button"), N = x(!0), { pageSchema: V } = ce(), J = me(), f = x(!1), v = x([]), l = x(null), { copy: F } = se({}), L = _(() => {
var o;
return ((o = l.value) == null ? void 0 : o.id) ?? "";
}), t = Q({
actionItem: {
componentId: null,
methodName: "test",
type: "custom"
},
cacheData: {}
}), P = _(() => {
var e;
const o = {
component: "组件",
custom: "自定义函数",
public: "公共函数"
};
return t.actionItem.type === "component" && l.value ? `${l.value.label || ((e = d.component.getConfigByType(l.value.type)) == null ? void 0 : e.defaultSchema.label) || "未命名组件"}` : o[t.actionItem.type] || t.actionItem.type;
}), s = _(() => {
var o;
return t.actionItem.type === "component" ? l.value ? (o = d.component.getConfigByType(
l.value.type
).config.action) == null ? void 0 : o.map((a) => ({
label: a.describe ?? a.description,
value: a.type
})) : [] : t.actionItem.type === "custom" ? Object.entries(J.funcs.value).filter(([e, a]) => typeof a == "function").map(([e]) => ({ label: e, value: e })) : t.actionItem.type === "public" ? Object.entries(d.publicMethods.methodsMap).map(
([e, a]) => ({
...a,
label: a.description,
value: e
})
) : [];
}), w = _(() => {
if (t.actionItem.type === "component" && l.value) {
const o = d.component.getConfigByType(
l.value.type
).config.action, e = o == null ? void 0 : o.find(
(a) => a.type === t.actionItem.methodName
);
if (e != null && e.argsConfigs) {
const a = e.argsConfigs.findIndex(
(p) => p.label === "设置数据"
);
a !== -1 && (e.argsConfigs[a] = {
...l.value,
field: "0",
id: le(),
label: "设置数据"
});
}
return (e == null ? void 0 : e.argsConfigs) ?? [];
}
return [];
});
function R() {
var o;
f.value = !0, N.value = !0, t.actionItem.type = "custom", t.actionItem.componentId = null, (o = s.value) != null && o.length && I(s.value[0].value);
}
function W(o) {
if (f.value = !0, N.value = !1, l.value = null, o.componentId) {
const e = ae(V.schemas, o.componentId);
l.value = e, v.value = [o.componentId];
}
oe(() => {
t.actionItem.componentId = o.componentId, t.actionItem.methodName = o.methodName, t.actionItem.type = o.type, t.actionItem.args = o.args;
});
}
function q() {
const { methodName: o, type: e } = t.actionItem;
if (o) {
if (e === "component" && o === "setAttr" && l.value) {
const p = (d.component.getConfigByType(
l.value.type
).config.attribute || []).filter(
({ field: n }) => String(n).startsWith("props")
), r = JSON.parse(t.actionItem.args || "[]"), g = p.findIndex(
({ field: n }) => n === `props.${r[0]}`
);
g !== -1 && (t.actionItem.args = JSON.stringify([
r[0],
r[g + 1]
]));
}
} else {
alert("请先选择动作方法");
return;
}
K(N.value ? "add" : "edit", ie(ne(t.actionItem))), D();
}
function D() {
f.value = !1, v.value = [], t.cacheData = {};
}
function M(o) {
var e;
t.actionItem.componentId = null, t.actionItem.type = o, l.value = null, t.actionItem.methodName = null, v.value = [], (e = s.value) != null && e.length && I(s.value[0].value);
}
function G(o) {
var e;
t.actionItem.args && (t.cacheData[t.actionItem.componentId + t.actionItem.methodName] = t.actionItem.args), t.actionItem.componentId = o.id, t.actionItem.type = "component", t.actionItem.methodName = null, l.value = o.componentSchema, (e = s.value) != null && e.length && I(s.value[0].value);
}
function I(o) {
t.actionItem.methodName = o, t.actionItem.args = t.cacheData[t.actionItem.componentId + t.actionItem.methodName];
}
return A({
handleOpen: R,
handleOpenEdit: W
}), (o, e) => (c(), b(m(j), {
modelValue: f.value,
"onUpdate:modelValue": e[4] || (e[4] = (a) => f.value = a),
width: "1200px",
title: "动作配置",
onClose: D,
onOk: q
}, {
default: S(() => {
var a, p, r, g;
return [
i("div", ue, [
i("div", fe, [
i("div", ve, [
i("div", {
class: C(["fun-btn", { checked: t.actionItem.type === "custom" }]),
onClick: e[0] || (e[0] = (n) => M("custom"))
}, " 自定义函数 ", 2),
i("div", {
class: C(["fun-btn", { checked: t.actionItem.type === "public" }]),
onClick: e[1] || (e[1] = (n) => M("public"))
}, " 公共函数 ", 2),
e[6] || (e[6] = h(" 组件 ", -1)),
i("div", ge, [
B(m(de), {
"selected-keys": v.value,
"onUpdate:selectedKeys": e[2] || (e[2] = (n) => v.value = n),
options: m(V).schemas,
onNodeClick: G
}, {
"tree-node": S(({ schema: n }) => {
var $, T, O;
return [
i("div", {
class: C(["epic-text-padding hover:bg-$ep-muted flex items-center", { hidden: ($ = n.props) == null ? void 0 : $.hidden }])
}, [
i("span", he, [
(T = n.props) != null && T.hidden ? (c(), b(m(U), {
key: 0,
name: "icon--epic--visibility-off-outline-rounded",
class: "translate-y-2px"
})) : k("", !0),
h(" " + u(n.label ?? ((O = m(d).component.getConfigByType(n.type)) == null ? void 0 : O.defaultSchema.label)), 1)
]),
i("span", ye, u(n.id), 1),
B(m(z), {
class: "epic-copy-id-btn",
size: "small",
onClick: X((Oe) => m(F)(n.id), ["stop"])
}, {
default: S(() => [...e[5] || (e[5] = [
h(" 复制ID ", -1)
])]),
_: 1
}, 8, ["onClick"])
], 2)
];
}),
_: 1
}, 8, ["selected-keys", "options"])
])
]),
i("div", Ie, [
i("div", xe, "动作选择（" + u(P.value) + "）", 1),
i("div", _e, [
(c(!0), y(Z, null, ee(s.value, (n) => (c(), y("div", {
key: n.value,
class: C([{ checked: n.value === t.actionItem.methodName }, "epic-action-item"]),
onClick: ($) => I(n.value)
}, [
i("span", {
title: n.value
}, u(n.label), 9, Ce)
], 10, be))), 128)),
Y(i("div", ke, " 当前组件暂无动作 ", 512), [
[te, !((a = s.value) != null && a.length)]
])
])
])
]),
i("div", Ne, [
t.actionItem.type === "custom" ? (c(), b(re, { key: 0 })) : k("", !0),
t.actionItem.type !== "custom" ? (c(), y("div", $e, [
t.actionItem.methodName && ((p = s.value) != null && p.length) ? (c(), y("div", Se, [
i("div", Be, [
i("div", Ve, [
B(m(U), {
name: "icon--epic--info",
class: "mr-2"
}),
i("span", we, [
h(u((r = l.value) == null ? void 0 : r.label) + " ", 1),
i("span", De, u(((g = s.value.find(
(n) => n.value === t.actionItem.methodName
)) == null ? void 0 : g.label) || "未知"), 1),
e[7] || (e[7] = h(" 动作配置 ", -1))
])
])
])
])) : k("", !0),
w.value.length === 0 ? (c(), y("div", Me, " 暂无配置 ")) : (c(), b(pe, {
key: L.value,
modelValue: t.actionItem.args,
"onUpdate:modelValue": e[3] || (e[3] = (n) => t.actionItem.args = n),
"action-args-configs": w.value
}, null, 8, ["modelValue", "action-args-configs"]))
])) : k("", !0)
])
])
];
}),
_: 1
}, 8, ["modelValue"]));
}
});
export {
Ye as default
};