@gct-paas/design 0.1.4-dev.6 → 0.1.4-dev.8

package/es/plugins/design-tabs/design-tabs.provider.mjs

@@ -0,0 +1,261 @@
+import { EditorType, t } from '@gct-paas/core';
+import { DesignNodeMode, DesignNodeType, MaterialGroup } from '../../constant/index.mjs';
+import { DesignTabsNode } from './design-tabs.data.mjs';
+import { NodeBaseProvider } from '../../provider/node-base/node-base.provider.mjs';
+import '../../provider/design-editor-node/design-editor-node.provider.mjs';
+import 'qx-util';
+import 'lodash-es';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+import { TabType } from '../../dictionary/tab-type/tab-type.mjs';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+
+class DesignTabsProvider extends NodeBaseProvider {
+  mode = DesignNodeMode.CONTAINER;
+  type = DesignNodeType.TABS;
+  isDrop = false;
+  component = "DesignTabsComponent";
+  static materialConfig = {
+    group: MaterialGroup.LAYOUT,
+    label: "选项卡",
+    type: DesignNodeType.TABS,
+    icon: "icon-biaoqianye",
+    order: 0
+  };
+  model = {
+    type: "edit",
+    noColon: true,
+    children: [
+      {
+        type: "tab",
+        name: "tab",
+        isContainer: true,
+        layout: "flex",
+        navPosition: "center",
+        height: "100%",
+        children: [
+          {
+            name: "pane1",
+            type: "tab-pane",
+            isContainer: true,
+            title: t("sys.designView.form.attribute"),
+            layout: "grid",
+            children: [
+              {
+                name: "collapse-property",
+                type: "collapse",
+                isContainer: true,
+                layout: "flex",
+                children: [
+                  {
+                    name: "collapse-pane-config",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    title: t("sys.designView.components.tab.form.group"),
+                    children: [
+                      {
+                        type: "hidden",
+                        name: "defaultTab"
+                      },
+                      {
+                        type: "item",
+                        labelPosition: "top",
+                        name: "tabItems",
+                        editor: {
+                          title: t("sys.designView.components.tab.form.label"),
+                          type: DesignEditorType.CHILD_LIST_EDITOR,
+                          childDesignType: DesignNodeType.TAB_ITEM,
+                          childEditFieldKey: "title",
+                          sort: true,
+                          select: true,
+                          defaultSelectChildKey: "defaultTab",
+                          editorType: "i18n"
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.designView.components.tab.form.label2"),
+                        labelPosition: "top",
+                        name: "tabType",
+                        dictionary: TabType,
+                        defaultValue: "base",
+                        editor: {
+                          type: EditorType.RADIO,
+                          buttonMode: true
+                        },
+                        watch(form, _item, val, oldVal) {
+                          if (val !== oldVal) {
+                            const c = form.item.gutter;
+                            switch (val) {
+                              case "base":
+                                c.value = 20;
+                                break;
+                              case "card":
+                                c.value = 8;
+                                break;
+                              default:
+                                c.value = 0;
+                            }
+                          }
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.designView.components.tab.form.label3"),
+                        labelPosition: "top",
+                        name: "gutter",
+                        defaultValue: 20,
+                        hidden(_form, _item, data) {
+                          const type = data.tabType;
+                          return type === "text" || type === "capsule";
+                        },
+                        editor: {
+                          type: EditorType.NUMBER,
+                          addonAfter: "px",
+                          min: 0,
+                          max: 300,
+                          props: {
+                            size: "small"
+                          }
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.designView.components.tab.form.label4"),
+                        name: "center",
+                        editor: {
+                          type: EditorType.SWITCH,
+                          props: {
+                            size: "small"
+                          }
+                        }
+                      },
+                      {
+                        type: "item",
+                        label: t("sys.designView.components.tab.form.label5"),
+                        labelTooltip: t(
+                          "sys.designView.components.tab.form.label5Tip"
+                        ),
+                        name: "selectDestroy",
+                        editor: {
+                          type: EditorType.SWITCH,
+                          props: {
+                            size: "small"
+                          }
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: "pane2",
+            type: "tab-pane",
+            class: "style-pane",
+            title: t("sys.designView.form.style"),
+            isContainer: true,
+            layout: "grid",
+            children: [
+              {
+                name: "collapse-style",
+                type: "collapse",
+                isContainer: true,
+                layout: "flex",
+                children: [
+                  {
+                    name: "collapse-pane-layout",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    title: t("sys.designView.form.layout"),
+                    children: [
+                      {
+                        type: "item",
+                        label: t("sys.designView.form.position"),
+                        name: "position",
+                        noColon: true,
+                        labelAlign: "left",
+                        labelWidth: "34px",
+                        editor: {
+                          type: DesignEditorType.STYLE_POSITION
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    name: "collapse-pane-spacing",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    title: t("sys.designView.form.margin"),
+                    children: [
+                      {
+                        type: "hidden",
+                        name: "padding"
+                      },
+                      {
+                        type: "item",
+                        name: "margin",
+                        fields: ["margin", "padding"],
+                        editor: {
+                          type: DesignEditorType.STYLE_SPACING,
+                          showArea: ["margin"]
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    name: "collapse-pane-border",
+                    type: "collapse-pane",
+                    isContainer: true,
+                    layout: "grid",
+                    title: t("sys.designView.form.border"),
+                    children: [
+                      {
+                        type: "item",
+                        name: "border",
+                        editor: {
+                          type: DesignEditorType.STYLE_BORDER
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  create(data) {
+    return new DesignTabsNode(data);
+  }
+  async beforeDrop(c, item) {
+    c.store.disableCache();
+    return item ? item.data : null;
+  }
+  async afterDrop(c, item) {
+    if (!item) {
+      return false;
+    }
+    const { data } = item;
+    const children = c.store.getChildren(data);
+    if (children && children.length > 0) {
+      return false;
+    }
+    const node = NodeRegister.get(
+      DesignNodeType.TAB_ITEM,
+      c.store.prefix
+    ).create();
+    data.data.defaultTab = node.id;
+    c.store.setNode(data.id, node);
+    c.store.enableCache();
+    c.store.cacheHistory();
+    return true;
+  }
+}
+
+export { DesignTabsProvider };

package/es/plugins/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/plugins/index.mjs

@@ -0,0 +1,116 @@
+import { DesignNodeType } from '../constant/index.mjs';
+import 'qx-util';
+import 'lodash-es';
+import { NodeRegister } from '../register/node/node.register.mjs';
+import DesignEditors from './design-editor/index.mjs';
+import { DesignCustomExpMenuComponent } from './design-custom-exp-menu/components/design-custom-exp-menu.component.mjs';
+import { DesignMenuListComponent } from './design-menu-list/components/design-menu-list.component.mjs';
+import { DesignPanelComponent } from './design-panel/components/design-panel.component.mjs';
+import { DesignTabsComponent } from './design-tabs/components/design-tabs.component.mjs';
+import { DesignTabItemComponent } from './design-tab-item/components/design-tab-item.component.mjs';
+import { DesignGridComponent } from './design-grid/components/design-grid.component.mjs';
+import { DesignGridItemComponent } from './design-grid-item/components/design-grid-item.component.mjs';
+import { DesignSelectComponentComponent } from './design-select-component/components/design-select-component.component.mjs';
+import DesignPersonalCenterComponent from './design-personal-center/components/design-personal-center.component.vue.mjs';
+import { DesignPageProvider } from './design-page/design-page.provider.mjs';
+import { DesignMenuListProvider } from './design-menu-list/design-menu-list.provider.mjs';
+import { DesignPanelProvider } from './design-panel/design-panel.provider.mjs';
+import { DesignTabsProvider } from './design-tabs/design-tabs.provider.mjs';
+import { DesignTabItemProvider } from './design-tab-item/design-tab-item.provider.mjs';
+import { DesignSelectComponentProvider } from './design-select-component/design-select-component.provider.mjs';
+import { DesignGridProvider } from './design-grid/design-grid.provider.mjs';
+import { DesignGridItemProvider } from './design-grid-item/design-grid-item.provider.mjs';
+import { DesignPersonalCenterProvider } from './design-personal-center/design-personal-center.provider.mjs';
+import { DesignCustomExpMenuProvider } from './design-custom-exp-menu/design-custom-exp-menu.provider.mjs';
+import { installMaterial } from './install-material.mjs';
+
+const Plugins = {
+  install(app) {
+    installMaterial();
+    app.use(DesignEditors);
+    app.component(
+      DesignCustomExpMenuComponent.name,
+      DesignCustomExpMenuComponent
+    );
+    app.component(DesignMenuListComponent.name, DesignMenuListComponent);
+    app.component(DesignPanelComponent.name, DesignPanelComponent);
+    app.component(DesignTabsComponent.name, DesignTabsComponent);
+    app.component(DesignTabItemComponent.name, DesignTabItemComponent);
+    app.component(
+      DesignSelectComponentComponent.name,
+      DesignSelectComponentComponent
+    );
+    app.component(DesignGridComponent.name, DesignGridComponent);
+    app.component(DesignGridItemComponent.name, DesignGridItemComponent);
+    app.component(
+      "DesignPersonalCenterComponent",
+      DesignPersonalCenterComponent
+    );
+    NodeRegister.registerCustomExpMenu(
+      DesignNodeType.CUSTOM_EXP_MENU,
+      () => new DesignCustomExpMenuProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.PAGE,
+      () => new DesignPageProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.PAGE,
+      () => new DesignPageProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.MENU_LIST,
+      () => new DesignMenuListProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.PANEL,
+      () => new DesignPanelProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.PANEL,
+      () => new DesignPanelProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.TABS,
+      () => new DesignTabsProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.TABS,
+      () => new DesignTabsProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.TAB_ITEM,
+      () => new DesignTabItemProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.TAB_ITEM,
+      () => new DesignTabItemProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.SELECT_COMPONENT,
+      () => new DesignSelectComponentProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.GRID,
+      () => new DesignGridProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.GRID,
+      () => new DesignGridProvider()
+    );
+    NodeRegister.registerCustomHome(
+      DesignNodeType.GRID_ITEM,
+      () => new DesignGridItemProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.GRID_ITEM,
+      () => new DesignGridItemProvider()
+    );
+    NodeRegister.registerCustomExpView(
+      DesignNodeType.PERSONAL_CENTER,
+      () => new DesignPersonalCenterProvider()
+    );
+  }
+};
+
+export { Plugins as default };

package/es/plugins/install-material.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 安装素材
+ *
+ * @author zhanghanrui
+ * @date 2024-07-09 16:07:43
+ * @export
+ */
+export declare function installMaterial(): void;

package/es/plugins/install-material.mjs

@@ -0,0 +1,55 @@
+import { MaterialGroup } from '../constant/index.mjs';
+import 'qx-util';
+import { MaterialRegister } from '../register/material/material.register.mjs';
+import { DesignGridProvider } from './design-grid/design-grid.provider.mjs';
+import { DesignMenuListProvider } from './design-menu-list/design-menu-list.provider.mjs';
+import { DesignPanelProvider } from './design-panel/design-panel.provider.mjs';
+import { DesignSelectComponentProvider } from './design-select-component/design-select-component.provider.mjs';
+import { DesignTabsProvider } from './design-tabs/design-tabs.provider.mjs';
+import { DesignPersonalCenterProvider } from './design-personal-center/design-personal-center.provider.mjs';
+
+function installMaterial() {
+  MaterialRegister.registerGroupCustomHome({
+    tag: MaterialGroup.LAYOUT,
+    label: "布局",
+    order: 0,
+    icon: "",
+    children: []
+  });
+  MaterialRegister.registerGroupCustomHome({
+    tag: MaterialGroup.SYSTEM,
+    label: "系统",
+    order: 1,
+    icon: "",
+    children: []
+  });
+  MaterialRegister.registerGroupCustomExpView({
+    tag: MaterialGroup.LAYOUT,
+    label: "布局",
+    order: 0,
+    icon: "",
+    children: []
+  });
+  MaterialRegister.registerGroupCustomExpView({
+    tag: MaterialGroup.SYSTEM,
+    label: "系统",
+    order: 1,
+    icon: "",
+    children: []
+  });
+  MaterialRegister.registerCustomHome(DesignMenuListProvider.materialConfig);
+  MaterialRegister.registerCustomHome(DesignPanelProvider.materialConfig);
+  MaterialRegister.registerCustomExpView(DesignPanelProvider.materialConfig);
+  MaterialRegister.registerCustomHome(DesignTabsProvider.materialConfig);
+  MaterialRegister.registerCustomExpView(DesignTabsProvider.materialConfig);
+  MaterialRegister.registerCustomHome(
+    DesignSelectComponentProvider.materialConfig
+  );
+  MaterialRegister.registerCustomHome(DesignGridProvider.materialConfig);
+  MaterialRegister.registerCustomExpView(DesignGridProvider.materialConfig);
+  MaterialRegister.registerCustomExpView(
+    DesignPersonalCenterProvider.materialConfig
+  );
+}
+
+export { installMaterial };

package/es/props/index.d.ts

@@ -0,0 +1,64 @@
+import { IDesignEditorNode, IDesignNode } from '../interface';
+import { PropType } from 'vue';
+/**
+ * 节点类型组件输入参数
+ */
+export declare const nodeProps: {
+    readonly count: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly data: {
+        readonly type: PropType<IDesignNode>;
+        readonly required: true;
+        readonly default: () => {};
+    };
+    readonly parent: {
+        readonly type: PropType<IDesignNode>;
+    };
+};
+/**
+ * 容器类型组件输入参数
+ */
+export declare const nodeContainerProps: {
+    readonly count: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly data: {
+        readonly type: PropType<IDesignNode>;
+        readonly required: true;
+    };
+    readonly children: {
+        readonly type: PropType<IDesignNode[]>;
+        readonly default: () => never[];
+    };
+    readonly parent: {
+        readonly type: PropType<IDesignNode>;
+    };
+};
+/**
+ * 设计编辑器节点输入参数
+ */
+export declare const nodeEditorProps: {
+    count: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    data: {
+        type: PropType<IDesignEditorNode>;
+        required: boolean;
+        default: () => {};
+    };
+    field: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: string;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+};

package/es/props/index.mjs

@@ -0,0 +1,56 @@
+const nodeProps = {
+  count: {
+    type: Number,
+    required: true
+  },
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  parent: {
+    type: Object
+  }
+};
+const nodeContainerProps = {
+  count: {
+    type: Number,
+    required: true
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  children: {
+    type: Array,
+    default: () => []
+  },
+  parent: {
+    type: Object
+  }
+};
+const nodeEditorProps = {
+  count: {
+    type: Number,
+    required: true
+  },
+  data: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  field: {
+    type: Object,
+    required: true
+  },
+  value: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    type: Object,
+    default: ""
+  },
+  parent: {
+    type: Object
+  }
+};
+
+export { nodeContainerProps, nodeEditorProps, nodeProps };

package/es/provider/design-editor-node/design-editor-node.provider.d.ts

@@ -0,0 +1,40 @@
+import { DesignNodeMode } from '../../constant';
+import { IDesignEditorNode, IMaterialData, INodeProvider } from '../../interface';
+import { FIELD_TYPE, IEditForm } from '@gct-paas/core';
+import { NodeBaseProvider } from '../node-base/node-base.provider';
+/**
+ * 设计编辑器节点提供者
+ *
+ * @author chitanda
+ * @date 2025-07-07 15:07:08
+ * @export
+ * @abstract
+ * @class DesignEditorNodeProvider
+ * @extends {NodeBaseProvider<IDesignEditorNode>}
+ * @implements {INodeProvider<IDesignEditorNode>}
+ */
+export declare abstract class DesignEditorNodeProvider extends NodeBaseProvider<IDesignEditorNode> implements INodeProvider<IDesignEditorNode> {
+    mode: DesignNodeMode;
+    type: string;
+    /**
+     * 字段键名（用于预置字段的特殊匹配，例如主键的字段类型是文本，只能用字段的标识 id_ 匹配）
+     *
+     * @author chitanda
+     * @date 2025-07-07 15:07:45
+     * @abstract
+     * @type {string}
+     */
+    fieldKey?: string;
+    /**
+     * 字段类型
+     *
+     * @author chitanda
+     * @date 2025-07-07 15:07:54
+     * @abstract
+     * @type {FIELD_TYPE}
+     */
+    fieldType?: FIELD_TYPE;
+    static materialConfig: IMaterialData;
+    model: IEditForm;
+    create(data?: IDesignEditorNode): IDesignEditorNode;
+}

package/es/provider/design-editor-node/design-editor-node.provider.mjs

@@ -0,0 +1,44 @@
+import { DesignNodeMode, DesignNodeType, MaterialGroup } from '../../constant/index.mjs';
+import '@jsplumb/browser-ui';
+import 'lodash-es';
+import { DesignEditorNode } from '../../data/design-editor-node/design-editor-node.mjs';
+import { NodeBaseProvider } from '../node-base/node-base.provider.mjs';
+
+class DesignEditorNodeProvider extends NodeBaseProvider {
+  mode = DesignNodeMode.ITEM;
+  type = DesignNodeType.DESIGN_EDITOR;
+  /**
+   * 字段键名（用于预置字段的特殊匹配，例如主键的字段类型是文本，只能用字段的标识 id_ 匹配）
+   *
+   * @author chitanda
+   * @date 2025-07-07 15:07:45
+   * @abstract
+   * @type {string}
+   */
+  fieldKey;
+  /**
+   * 字段类型
+   *
+   * @author chitanda
+   * @date 2025-07-07 15:07:54
+   * @abstract
+   * @type {FIELD_TYPE}
+   */
+  fieldType;
+  static materialConfig = {
+    group: MaterialGroup.SYSTEM,
+    label: "菜单列表",
+    type: DesignNodeType.MENU_LIST,
+    icon: "icon-kapianliebiao",
+    order: 0
+  };
+  model = {
+    type: "edit",
+    children: []
+  };
+  create(data) {
+    return new DesignEditorNode(data);
+  }
+}
+
+export { DesignEditorNodeProvider };

package/es/provider/index.d.ts

@@ -0,0 +1,2 @@
+export { NodeBaseProvider } from './node-base/node-base.provider';
+export { DesignEditorNodeProvider } from './design-editor-node/design-editor-node.provider';

package/es/provider/node-base/node-base.provider.d.ts

@@ -0,0 +1,25 @@
+import { Component } from 'vue';
+import { IDesignItemAction, IDesignNode, INodeProvider } from '../../interface';
+import { DesignNodeMode } from '../../constant';
+import { IEditForm } from '@gct-paas/core';
+/**
+ * 节点基础适配器
+ *
+ * @author zhanghanrui
+ * @date 2024-07-16 17:07:54
+ * @export
+ * @class NodeBaseProvider
+ * @implements {INodeProvider<T>}
+ * @template T
+ */
+export declare abstract class NodeBaseProvider<T extends IDesignNode = IDesignNode> implements INodeProvider<T> {
+    abstract mode: DesignNodeMode;
+    abstract type: string;
+    abstract component: string | Component;
+    get actions(): IDesignItemAction[];
+    abstract model: IEditForm | ((ctx?: IContext, node?: T) => IEditForm);
+    abstract create(data?: T): T;
+    isDrag: boolean;
+    isDrop: boolean;
+    protected createActions(): IDesignItemAction[];
+}