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

package/es/controller/view/design-view.controller.mjs

@@ -0,0 +1,184 @@
+import { h } from 'vue';
+import { EditFormController } from '@gct-paas/core';
+import { message } from 'ant-design-vue';
+import AsyncValidator from 'async-validator';
+import 'qx-util';
+import { isFunction } from 'lodash-es';
+import '../../constant/page-designer.mjs';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+import { useDesignViewStore } from '../../store/view/design-view.store.mjs';
+import { DesignViewHooks } from '../../hooks/designer.hooks.mjs';
+
+class DesignViewController {
+  store = useDesignViewStore();
+  hooks = new DesignViewHooks();
+  expansionTimer = null;
+  findModelPaths(paths, items, model) {
+    const i = items.findIndex((item) => {
+      const container = item;
+      if (container.children) {
+        const result = this.findModelPaths(paths, container.children, model);
+        if (result !== null) {
+          paths.push(item);
+          return true;
+        }
+        return false;
+      }
+      const _ = item;
+      if (_.name === model.name) {
+        return true;
+      }
+      return false;
+    });
+    if (i !== -1) {
+      return paths;
+    }
+    return null;
+  }
+  /**
+   * 效验整个设计页面的表单数据
+   *
+   * @author zhanghanrui
+   * @date 2024-08-04 14:08:35
+   * @return {*}  {Promise<boolean>}
+   */
+  async validate() {
+    const data = this.store.getData();
+    for (const node of data.nodes) {
+      const provider = NodeRegister.get(node.type, this.store.prefix);
+      if (provider) {
+        const model = provider.model;
+        if (model) {
+          const formC = new EditFormController(
+            isFunction(model) ? model({}, node) : model
+          );
+          Object.assign(formC.state.data, node.data);
+          formC.loaded();
+          formC.validate = async () => {
+            const rules = {};
+            const keys = Object.keys(formC.item);
+            for (const key of keys) {
+              const item = formC.item[key];
+              if (item.type === "item" && item.model.rules) {
+                rules[key] = item.model.rules;
+              }
+            }
+            if (rules && Object.keys(rules).length > 0) {
+              const validator = new AsyncValidator(rules);
+              validator.validate(formC.state.data);
+              return new Promise((resolve) => {
+                validator.validate(formC.state.data, (errors, _fields) => {
+                  if (errors && errors.length > 0) {
+                    const err = errors[0];
+                    const { field } = err;
+                    const c = formC.item[field];
+                    const pathModels = this.findModelPaths(
+                      [],
+                      formC.model.children,
+                      c.model
+                    )?.filter((_) => {
+                      return _.title;
+                    }).reverse();
+                    console.log("pathModels", pathModels);
+                    message.warn(
+                      h("span", {}, [
+                        h("span", {}, [
+                          `【${c.data.name}】组件 - 【${pathModels ? pathModels.map((_) => `${_.title} - `).join("") : null}${c.model.label}】必填`
+                          // h(
+                          //   'a',
+                          //   {
+                          //     href: 'javascript:void(0);',
+                          //     style: {
+                          //       'margin-left': '5px',
+                          //     },
+                          //     onClick: () => {
+                          //       this.store.setActive(node);
+                          //     },
+                          //   },
+                          //   ['查看'],
+                          // ),
+                        ])
+                      ])
+                    );
+                    resolve(false);
+                  } else {
+                    resolve(true);
+                  }
+                });
+              });
+            }
+            return true;
+          };
+          const bol = await formC.validate();
+          if (bol !== true) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+  /**
+   * 设置展开节点
+   *
+   * @param {string[]} ids 只指定自身需要额外设置的节点，默认会根据当前往上取3层展开
+   * @returns {*}  {void}
+   */
+  setExpansion(ids) {
+    if (this.store.isDragging !== true) {
+      return;
+    }
+    if (this.expansionTimer) {
+      clearTimeout(this.expansionTimer);
+      this.expansionTimer = null;
+    }
+    this.expansionTimer = setTimeout(() => {
+      ids.forEach((id) => {
+        this.store.expansions.add(id);
+      });
+      const keys = this.hooks.expansion.callSync([]);
+      keys.slice(keys.length - 3).forEach((id) => {
+        this.store.expansions.add(id);
+      });
+      this.store.countAdd();
+    }, 2e3);
+  }
+  /**
+   * 取消展开容器
+   */
+  cancelExpansion() {
+    if (this.expansionTimer) {
+      clearTimeout(this.expansionTimer);
+      this.expansionTimer = null;
+    }
+    this.store.expansions.clear();
+    this.store.countAdd();
+  }
+  /**
+   * 当前节点左右子节点类型
+   *
+   * @param {IDesignNode} node
+   * @returns {*}  {string[]}
+   */
+  types(node) {
+    const items = this.store.getChildren(node);
+    const types = [];
+    items.forEach((item) => {
+      types.push(item.type);
+      types.push(...this.types(item));
+    });
+    return types;
+  }
+  mounted() {
+  }
+  unmounted() {
+    this.store.history.clearAll();
+    this.store.$reset();
+  }
+  dropEnd() {
+    this.cancelExpansion();
+    this.store.dropContainer = null;
+  }
+}
+
+export { DesignViewController };

package/es/data/design-container-node/design-container-node.d.ts

@@ -0,0 +1,15 @@
+import { IDesignContainerNode, IDesignNodeData } from '../../interface';
+import { DesignNode } from '../design-node/design-node';
+/**
+ * 容器节点
+ *
+ * @author zhanghanrui
+ * @date 2024-07-12 13:07:01
+ * @export
+ * @abstract
+ * @class DesignContainerNode
+ * @extends {DesignNode<T>}
+ * @template T
+ */
+export declare abstract class DesignContainerNode<T extends IDesignNodeData = IDesignNodeData> extends DesignNode<T> implements IDesignContainerNode<T> {
+}

package/es/data/design-container-node/design-container-node.mjs

@@ -0,0 +1,6 @@
+import { DesignNode } from '../design-node/design-node.mjs';
+
+class DesignContainerNode extends DesignNode {
+}
+
+export { DesignContainerNode };

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

@@ -0,0 +1,16 @@
+import { IDesignEditorNode, IDesignEditorData } from '../../interface';
+import { DesignNode } from '../design-node/design-node';
+/**
+ * 设计编辑器节点
+ *
+ * @author chitanda
+ * @date 2025-07-07 14:07:21
+ * @export
+ * @class DesignEditorNode
+ * @extends {DesignNode<T>}
+ * @implements {IDesignEditorNode<T>}
+ * @template T
+ */
+export declare class DesignEditorNode<T extends IDesignEditorData = IDesignEditorData> extends DesignNode<T> implements IDesignEditorNode<T> {
+    type: string;
+}

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

@@ -0,0 +1,8 @@
+import { DesignNode } from '../design-node/design-node.mjs';
+import { DesignNodeType } from '../../constant/index.mjs';
+
+class DesignEditorNode extends DesignNode {
+  type = DesignNodeType.DESIGN_EDITOR;
+}
+
+export { DesignEditorNode };

package/es/data/design-node/design-node.d.ts

@@ -0,0 +1,41 @@
+import { IDesignNode, IDesignNodeData } from '../../interface';
+/**
+ * 界面设计节点
+ *
+ * @author zhanghanrui
+ * @date 2024-07-12 13:07:30
+ * @export
+ * @abstract
+ * @class DesignNode
+ * @implements {IDesignNode<T>}
+ * @template T
+ */
+export declare abstract class DesignNode<T extends IDesignNodeData = IDesignNodeData> implements IDesignNode<T> {
+    id: string;
+    /**
+     * 排序值
+     *
+     * @deprecated 去掉排序值，采用结构树排序
+     * @author zhanghanrui
+     * @date 2024-08-21 13:08:35
+     * @type {number}
+     */
+    order: number;
+    get label(): string;
+    abstract type: string;
+    updateDate: number;
+    data: T;
+    constructor(data?: Partial<IDesignNode<T>>);
+    /**
+     * 实例化时设置
+     *
+     * @author zhanghanrui
+     * @date 2024-07-12 13:07:50
+     * @protected
+     * @param {Partial<IDesignNode<T>>} [data]
+     */
+    protected init(data?: Partial<IDesignNode<T>>): void;
+    protected setData(data: T): void;
+    protected createData(): T;
+    clone(): IDesignNode;
+}

package/es/data/design-node/design-node.mjs

@@ -0,0 +1,67 @@
+import { uuid } from '@jsplumb/browser-ui';
+import { cloneDeep } from 'lodash-es';
+
+/**
+ * 界面设计节点
+ *
+ * @author zhanghanrui
+ * @date 2024-07-12 13:07:30
+ * @export
+ * @abstract
+ * @class DesignNode
+ * @implements {IDesignNode<T>}
+ * @template T
+ */
+class DesignNode {
+  /**
+   * 排序值
+   *
+   * @deprecated 去掉排序值，采用结构树排序
+   * @author zhanghanrui
+   * @date 2024-08-21 13:08:35
+   * @type {number}
+   */
+
+  get label() {
+    return this.data.name || '';
+  }
+  constructor(data) {
+    this.init(data);
+  }
+
+  /**
+   * 实例化时设置
+   *
+   * @author zhanghanrui
+   * @date 2024-07-12 13:07:50
+   * @protected
+   * @param {Partial<IDesignNode<T>>} [data]
+   */
+  init(data) {
+    if (data) {
+      this.id = data.id || uuid();
+      this.type = data.type || this.type;
+      this.updateDate = data.updateDate || Date.now();
+    } else {
+      this.id = uuid();
+      this.updateDate = Date.now();
+    }
+    let params = this.createData();
+    if (data && data.data) {
+      params = Object.assign(params, cloneDeep(data.data));
+    }
+    this.setData(params);
+  }
+  setData(data) {
+    this.data = data;
+  }
+  createData() {
+    return {};
+  }
+  clone() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return new this.constructor(this);
+  }
+}
+
+export { DesignNode };

package/es/data/index.d.ts

@@ -0,0 +1,3 @@
+export { DesignContainerNode } from './design-container-node/design-container-node';
+export { DesignEditorNode } from './design-editor-node/design-editor-node';
+export { DesignNode } from './design-node/design-node';

package/es/dictionary/index.d.ts

@@ -0,0 +1 @@
+export { TabType } from './tab-type/tab-type';

package/es/dictionary/tab-type/tab-type.d.ts

@@ -0,0 +1,5 @@
+import { IDictionary } from '@gct-paas/core';
+/**
+ * 标签类型
+ */
+export declare const TabType: IDictionary;

package/es/dictionary/tab-type/tab-type.mjs

@@ -0,0 +1,24 @@
+const TabType = {
+  tag: "tab-type",
+  mode: "static",
+  items: [
+    {
+      label: "基础",
+      value: "base"
+    },
+    {
+      label: "卡片",
+      value: "card"
+    },
+    {
+      label: "文本",
+      value: "text"
+    },
+    {
+      label: "胶囊",
+      value: "capsule"
+    }
+  ]
+};
+
+export { TabType };

package/es/editor/child-list-editor/child-list-editor.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-child-list-editor__header {
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.gct-child-list-editor__title {
+  font-size: 12px;
+  color: #242424;
+}

package/es/editor/child-list-editor/child-list-editor.d.ts

@@ -0,0 +1,163 @@
+import { PropType } from 'vue';
+import { IChildListEditor, IDesignNode } from '../../interface';
+export declare const ChildListEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<IData>;
+        required: true;
+    };
+    model: {
+        type: PropType<IChildListEditor>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    designView: import('../..').IDesignViewController;
+    p: import('../..').INodeProvider<IDesignNode<import('../..').IDesignNodeData>> | null;
+    items: import('vue').ComputedRef<IDesignNode<import('../..').IDesignNodeData>[]>;
+    checkVal: import('vue').ComputedRef<any>;
+    moveCard: (dragIndex: number, dropIndex: number) => void;
+    onAdd: (e: MouseEvent) => void;
+    onCheckChange: (id: string) => void;
+    onDelete: (id: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<IData>;
+        required: true;
+    };
+    model: {
+        type: PropType<IChildListEditor>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {
+    ChildListItemEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        count: {
+            type: NumberConstructor;
+            required: true;
+        };
+        index: {
+            type: NumberConstructor;
+            required: true;
+        };
+        node: {
+            type: PropType<IDesignNode>;
+            required: true;
+        };
+        fieldKey: {
+            type: StringConstructor;
+            required: true;
+        };
+        value: {
+            type: StringConstructor;
+            required: true;
+        };
+        showLabel: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        drag: {
+            type: BooleanConstructor;
+        };
+        check: {
+            type: BooleanConstructor;
+        };
+        delete: {
+            type: BooleanConstructor;
+        };
+        editorType: {
+            type: StringConstructor;
+        };
+        editorProps: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        moveCard: {
+            type: FunctionConstructor;
+            required: true;
+        };
+    }>, {
+        ns: import('@gct-paas/core').Namespace;
+        radio: import('vue').WritableComputedRef<boolean, boolean>;
+        elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        dragRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        dropCollect: import('vue').Ref<{
+            handlerId: string | symbol | null;
+            isShallowOver: boolean;
+        }, {
+            handlerId: string | symbol | null;
+            isShallowOver: boolean;
+        }>;
+        collect: import('vue').Ref<{
+            isDragging: boolean;
+        }, {
+            isDragging: boolean;
+        }>;
+        isBeforeHover: import('vue').Ref<boolean, boolean>;
+        onDelete: () => void;
+        renderEditor: () => import("vue/jsx-runtime").JSX.Element;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("delete" | "update:value" | "check" | "update:title")[], "delete" | "update:value" | "check" | "update:title", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        count: {
+            type: NumberConstructor;
+            required: true;
+        };
+        index: {
+            type: NumberConstructor;
+            required: true;
+        };
+        node: {
+            type: PropType<IDesignNode>;
+            required: true;
+        };
+        fieldKey: {
+            type: StringConstructor;
+            required: true;
+        };
+        value: {
+            type: StringConstructor;
+            required: true;
+        };
+        showLabel: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        drag: {
+            type: BooleanConstructor;
+        };
+        check: {
+            type: BooleanConstructor;
+        };
+        delete: {
+            type: BooleanConstructor;
+        };
+        editorType: {
+            type: StringConstructor;
+        };
+        editorProps: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+        moveCard: {
+            type: FunctionConstructor;
+            required: true;
+        };
+    }>> & Readonly<{
+        "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+        onDelete?: ((...args: any[]) => any) | undefined;
+        onCheck?: ((...args: any[]) => any) | undefined;
+        "onUpdate:title"?: ((...args: any[]) => any) | undefined;
+    }>, {
+        delete: boolean;
+        drag: boolean;
+        check: boolean;
+        showLabel: boolean;
+        checked: boolean;
+        editorProps: Record<string, any>;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;