epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
363 lines (362 loc) • 10.8 kB
JavaScript
var d = Object.defineProperty;
var c = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var n = (r, e, t) => c(r, typeof e != "symbol" ? e + "" : e, t);
import { ref as u, shallowRef as l } from "vue";
import { loadAsyncComponent as p } from "../common/component.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
class f {
constructor() {
// 基础组件type，切换ui时，可先移除该数组记录的type
n(this, "baseComponentTypes", []);
// 组件配置记录字典，key 为组件type，value 为组件配置
n(this, "componentConfigs", {});
// 组件分组名称映射，key 为组件原名称，value 为组件分组映射名称
n(this, "componentGroupNameMap", {});
// 组件对象字典，key 为组件type，value 为组件
n(this, "components", {});
// 组件模式分组，使用 Vue Composition API 的 ref 进行响应式处理
n(this, "componentSchemaGroups", u([]));
// 表单模式默认schema数据
n(this, "formSchemas", [
{
componentProps: {
colon: !0,
labelAlign: "right",
labelCol: {
span: 5
},
labelLayout: "fixed",
labelPlacement: "left",
labelWidth: 100,
layout: "horizontal",
name: "default",
wrapperCol: {
span: 19
}
},
id: "root",
label: "表单",
type: "form",
children: []
}
]);
// 隐藏的组件列表，存储需要隐藏的组件名称
n(this, "hiddenComponents", []);
// 已初始化基础UI
n(this, "initialized", u(!1));
// 公共方法模型，存储插件的公共方法
n(this, "publicMethods", {
// 示例数据
// publicTest: {
// describe: "测试函数",
// name: "test",
// handler: (e) => {
// console.log(e)
// // alert("测试函数弹出");
// },
// },
});
// 组件分组排序列表(设置之后，按该数组下标排序)
n(this, "sortedGroups", ["表单", "布局"]);
// 视图容器模型，包含活动栏和右侧边栏的配置
n(this, "viewsContainers", {
activitybars: l([]),
// 活动栏配置列表
rightSidebars: l([])
// 右侧边栏配置列表
});
}
/**
* 添加基础组件类型
* @param baseComponentType 基础组件类型
*/
addBaseComponentTypes(e) {
this.baseComponentTypes.push(e);
}
/**
* 添加公共方法
* @param publicMethod
*/
addPublicMethod(e) {
e.methodName && console.warn(
"[Epic:公共函数]注册配置'methodName'属性已弃用,请使用'name'代替"
), e.method && console.warn(
"[Epic:公共函数]注册配置'method'属性已弃用,请使用'handler'代替"
), e.describe && console.warn(
"[Epic:公共函数]注册配置'describe'属性已弃用,请使用'description'代替"
);
const t = e.methodName ?? e.name, s = e.method ?? e.handler, o = e.describe ?? e.description;
this.publicMethods[t] = {
description: o,
handler: s,
name: t
};
}
/**
* 清空组件分组名称到映射名称的关系
*/
clearComponentGroupNameMap() {
this.componentGroupNameMap = {};
}
/**
* 清空组件分组的排序
*/
clearSortedGroups() {
this.sortedGroups = [], this.computedComponentSchemaGroups();
}
/**
* 添加组件到插件管理器中
* @param componentType 组件类型
* @param component 组件
*/
component(e, t) {
typeof t == "function" && (t = p(t)), this.components[e] = t;
}
/**
* 计算componentSchemaGroups
*/
computedComponentSchemaGroups() {
const e = [];
Object.values(this.componentConfigs).forEach((t) => {
if (!this.hiddenComponents.includes(t.defaultSchema.type) && t.groupName) {
const s = this.componentGroupNameMap[t.groupName] ?? t.groupName;
let o = e.findIndex(
(a) => a.title === s
);
o === -1 && (e.push({
title: s,
list: []
}), o = e.length - 1);
const i = e[o].list.findIndex(
(a) => a.type === t.defaultSchema.type
);
i === -1 ? e[o].list.push(
t.defaultSchema
) : e[o].list[i] = t.defaultSchema;
}
}), e.sort((t, s) => {
const o = this.sortedGroups.indexOf(t.title), i = this.sortedGroups.indexOf(s.title);
return o === -1 ? 1 : i === -1 ? -1 : o - i;
}), e.forEach((t) => {
t.list.sort((s, o) => {
var m, h;
const i = ((m = this.componentConfigs[s.type]) == null ? void 0 : m.sort) ?? 1e3, a = ((h = this.componentConfigs[o.type]) == null ? void 0 : h.sort) ?? 1e3;
return i - a;
});
}), this.componentSchemaGroups.value = e;
}
/**
* 获取所有activitybars
* @returns activitybars
*/
getActivitybars() {
return this.viewsContainers.activitybars.value;
}
/**
* 通过type 查询相应的组件
* @returns components
*/
getComponent(e) {
return this.components[e];
}
/**
* 通过type获取ComponentConfing
*/
getComponentConfingByType(e) {
return this.componentConfigs[e];
}
/**
* 获取所有插件管理中的所有组件配置
* @returns componentAttrs
*/
getComponentConfings() {
return this.componentConfigs;
}
/**
* 获取所有插件管理中的所有组件
* @returns components
*/
getComponents() {
return this.components;
}
/**
* 按照分组获取componentSchemaGroups 暂时没啥用
* @returns componentSchemaGroups
*/
getComponentSchemaGroups() {
return this.componentSchemaGroups;
}
/**
* 获取所有rightSidebars
* @returns rightSidebars
*/
getRightSidebars() {
return this.viewsContainers.rightSidebars.value;
}
/**
* 隐藏活动栏
* @param value 属性
* @param attr 匹配字段 title | id 默认值 title
*/
hideActivitybar(e, t = "title") {
this.viewsContainers.activitybars.value = this.viewsContainers.activitybars.value.map((s) => (s[t] === e && (s.visible = !1), s));
}
/**
* 添加需要隐藏的组件类型
* @param {*} type
*/
hideComponent(e) {
this.hiddenComponents.push(e), this.computedComponentSchemaGroups();
}
/**
* 隐藏右侧边栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
hideRightSidebar(e, t = "title") {
this.viewsContainers.rightSidebars.value = this.viewsContainers.rightSidebars.value.map((s) => (s[t] === e && (s.visible = !1), s));
}
/**
* 注册或更新活动栏（Activitybar）模型。
* 如果模型中的组件是一个函数，则异步加载该组件。
* @param activitybar 要注册或更新的活动栏模型
*/
registerActivitybar(e) {
typeof e.component == "function" && (e.component = p(
e.component
)), e.visible === void 0 && (e.visible = !0), e.sort === void 0 && (e.sort = 1e3);
const t = this.viewsContainers.activitybars.value.findIndex(
(s) => s.id === e.id
);
t === -1 ? this.viewsContainers.activitybars.value.push(e) : this.viewsContainers.activitybars.value[t] = e;
}
/**
* 注册组件到插件管理器中
* @param componentConfig 组件配置
*/
registerComponent(e) {
this.component(
e.defaultSchema.type,
e.component
), e.defaultSchema.input && (e.config.action || (e.config.action = []), e.config.action.unshift(
{
// 参数配置
argsConfigs: [
{
...e.defaultSchema,
field: "0",
label: "设置数据"
}
],
description: "设置值",
type: "setValue"
},
{
description: "获取值",
type: "getValue"
}
)), this.componentConfigs[e.defaultSchema.type] = e, this.computedComponentSchemaGroups();
}
/**
* 注册右侧栏
*/
registerRightSidebar(e) {
typeof e.component == "function" && (e.component = p(
e.component
)), e.visible === void 0 && (e.visible = !0), e.sort === void 0 && (e.sort = 1e3);
const t = this.viewsContainers.rightSidebars.value.findIndex(
(s) => s.id === e.id
);
t === -1 ? this.viewsContainers.rightSidebars.value.push(e) : this.viewsContainers.rightSidebars.value[t] = e;
}
/**
* 移除已记录的基础组件类型
*/
removeBaseComponents() {
this.baseComponentTypes.forEach((e) => {
this.removeComponent(e);
}), this.setBaseComponentTypes([]), this.computedComponentSchemaGroups();
}
/**
* 从已记录的基础组件类型中移除特定类型的组件
* @param componentType 要移除的组件类型
*/
removeComponent(e) {
delete this.componentConfigs[e], delete this.components[e];
}
/**
* 移除公共方法
* @param methodName
*/
removePublicMethod(e) {
delete this.publicMethods[e];
}
/**
* 记录基础组件类型
* @param baseComponentTypes 基础组件类型数组
*/
setBaseComponentTypes(e) {
this.baseComponentTypes = e;
}
/**
* 设置组件分组名称到映射名称的关系
* @param groupName 组件分组名称
* @param mapName 映射的名称
*/
setComponentGroupNameMap(e, t) {
this.componentGroupNameMap[e] = t;
}
/**
* 设置需要隐藏的组件类型数组
* @param types 组件类型数组
*/
setHideComponents(e) {
this.hiddenComponents = e, this.computedComponentSchemaGroups();
}
/**
* 设置initialized的状态。
*
* @param value 要设置的布尔值。
*/
setInitialized(e) {
this.initialized.value = e;
}
/**
* 设置组件分组的排序
* @param sortedGroups 包含组名和排序字段的对象数组
*/
setSortedGroups(e) {
this.sortedGroups = e, this.computedComponentSchemaGroups();
}
/**
* 显示活动栏
* @param value 属性
* @param attr 匹配字段 title | id 默认值 title
*/
showActivitybar(e, t = "title") {
this.viewsContainers.activitybars.value = this.viewsContainers.activitybars.value.map((s) => (s[t] === e && (s.visible = !0), s));
}
/**
* 移除需要隐藏的组件类型
* @param {*} type
*/
showComponent(e) {
this.hiddenComponents = this.hiddenComponents.filter(
(t) => t !== e
), this.computedComponentSchemaGroups();
}
/**
* 显示右侧边栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
showRightSidebar(e, t = "title") {
this.viewsContainers.rightSidebars.value = this.viewsContainers.rightSidebars.value.map((s) => (s[t] === e && (s.visible = !0), s));
}
}
const y = new f();
export {
f as PluginManager,
y as pluginManager
};