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

package/es/setup-app.d.ts

@@ -0,0 +1 @@
+export declare function designSetupApp(): Promise<void>;

package/es/setup-app.mjs

@@ -0,0 +1,18 @@
+import { HttpUtil } from '@gct-paas/api';
+import 'lodash-es';
+import 'qx-util';
+import './constant/page-designer.mjs';
+import '@gct-paas/core';
+import './provider/design-editor-node/design-editor-node.provider.mjs';
+import { designInterceptors } from './utils/design-interceptors/design-interceptors.mjs';
+import './utils/field-attrs/basicAttrs.mjs';
+import './utils/field-filter/index.mjs';
+import './utils/find-deep-types/find-deep-types.mjs';
+import { onWidgetInfoInit } from './utils/init-widget-info/init-widget-info.mjs';
+
+async function designSetupApp() {
+  onWidgetInfoInit();
+  HttpUtil.use(designInterceptors);
+}
+
+export { designSetupApp };

package/es/store/index.d.ts

@@ -0,0 +1 @@
+export { useDesignViewStore } from './view/design-view.store';

package/es/store/view/design-view.store.d.ts

@@ -0,0 +1,5 @@
+import { IDesignViewState, IDesignViewActions } from '../../interface';
+/**
+ * 设计视图状态
+ */
+export declare const useDesignViewStore: () => import('pinia').Store<string, IDesignViewState, IObject, IDesignViewActions>;

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

@@ -0,0 +1,412 @@
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
+import { uuid } from '@jsplumb/browser-ui';
+import { cloneDeep, merge } from 'lodash-es';
+import { LinkedList } from '@gct-paas/core';
+import { DesignNodeType, InsertNodeMode, DesignViewPrefix } from '../../constant/index.mjs';
+import 'qx-util';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+
+const useDesignViewStore = () => {
+  const key = "design-view___" + uuid();
+  return defineStore(
+    key,
+    {
+      state() {
+        return {
+          uuid: key,
+          rootExpLabel: "页面",
+          prefix: DesignViewPrefix.CUSTOM_HOME,
+          isTriggerCache: true,
+          map: /* @__PURE__ */ new Map(),
+          pageNode: null,
+          selected: null,
+          hoverId: null,
+          isDragging: false,
+          isChange: false,
+          history: new LinkedList(),
+          count: 0,
+          tree: [],
+          expansions: /* @__PURE__ */ new Set(),
+          dropContainer: null
+        };
+      },
+      actions: {
+        getParentKey(id, parent = null, items = []) {
+          if (!id) {
+            return null;
+          }
+          if (items.length === 0) {
+            items = this.tree;
+          }
+          for (const _ of items) {
+            if (_.id === id) {
+              return parent ? parent.id : null;
+            }
+            if (_.children && _.children.length > 0) {
+              const result = this.getParentKey(id, _, _.children);
+              if (result) {
+                return result;
+              }
+            }
+          }
+          return null;
+        },
+        getTreeItem(tag, items = []) {
+          if (!tag) {
+            return null;
+          }
+          if (items.length === 0) {
+            items = this.tree;
+          }
+          for (const _ of items) {
+            if (_.id === tag) {
+              return _;
+            }
+            if (_.children && _.children.length > 0) {
+              const item = this.getTreeItem(tag, _.children);
+              if (item) {
+                return item;
+              }
+            }
+          }
+          return null;
+        },
+        getTreeItems(tag) {
+          let items = this.tree;
+          const treeItem = this.getTreeItem(tag);
+          if (treeItem) {
+            if (!treeItem.children) {
+              treeItem.children = [];
+            }
+            items = treeItem.children;
+          }
+          return items;
+        },
+        getChildren(node) {
+          if (node) {
+            const tag = typeof node === "string" ? node : node.id;
+            const item = this.getTreeItem(tag);
+            if (item && item.children) {
+              return item.children.map((_) => this.map.get(_.id));
+            }
+          } else {
+            return this.tree.map((_) => {
+              return this.map.get(_.id);
+            });
+          }
+          return [];
+        },
+        setDragging(bol) {
+          this.isDragging = bol;
+        },
+        activePage() {
+          this.selected = this.pageNode;
+        },
+        setActive(node) {
+          if (node == null) {
+            this.selected = null;
+          } else if (typeof node === "string") {
+            if (this.map.has(node)) {
+              this.selected = this.map.get(node);
+            } else {
+              console.warn(`节点[${node}]不存在`);
+            }
+          } else {
+            this.selected = node;
+          }
+        },
+        getNode(tag) {
+          if (this.map.has(tag)) {
+            return this.map.get(tag);
+          }
+          return null;
+        },
+        updateNode(node) {
+          if (node && (node.type === DesignNodeType.PAGE || node.type === DesignNodeType.PAGE_LOWER)) {
+            this.pageNode = merge(this.pageNode, node);
+            this.pageNode.updateDate = Date.now();
+            this.isChange = true;
+            this.countAdd();
+            return;
+          }
+          if (!this.map.has(node.id)) {
+            node.updateDate = Date.now();
+            this.map.set(node.id, cloneDeep(node));
+          } else {
+            const data = this.map.get(node.id);
+            node.updateDate = Date.now();
+            this.map.set(node.id, merge(data, node));
+          }
+          this.isChange = true;
+        },
+        setNode(pKey, node, index) {
+          if (node && (node.type === DesignNodeType.PAGE || node.type === DesignNodeType.PAGE_LOWER)) {
+            this.pageNode = merge(this.pageNode, node);
+            this.pageNode.updateDate = Date.now();
+            this.isChange = true;
+            this.countAdd();
+            return node;
+          }
+          if (!pKey) {
+            pKey = this.getParentKey(node.id);
+          }
+          const nodes = this.getChildren(pKey);
+          let isNew = false;
+          if (!this.map.has(node.id)) {
+            node.updateDate = Date.now();
+            isNew = true;
+          } else {
+            const data = this.map.get(node.id);
+            node.updateDate = Date.now();
+            Object.assign(data, node);
+            node = data;
+          }
+          this.map.set(node.id, node);
+          if (nodes.length > 0 && index != null && index >= 0) {
+            this.insertNode(InsertNodeMode.BEFORE, nodes[index], node);
+          } else if (isNew) {
+            this.setTreeItem(pKey, node.id, index);
+            this.cacheHistory();
+          }
+          this.isChange = true;
+          this.countAdd();
+          return node;
+        },
+        setTreeItem(pKey, id, i) {
+          const items = this.getTreeItems(pKey);
+          if (i != null) {
+            items.splice(i, 0, {
+              id
+            });
+          } else {
+            items.push({
+              id
+            });
+          }
+        },
+        moveTreeItem(oldPid, newPid, id, i) {
+          if (oldPid === newPid) {
+            const items = this.getTreeItems(newPid);
+            const oldIndex2 = items.findIndex((_) => _.id === id);
+            if (oldIndex2 !== -1) {
+              if (oldIndex2 === i) {
+                return;
+              }
+              const item = items[oldIndex2];
+              if (i != null) {
+                if (i < oldIndex2) {
+                  items.splice(oldIndex2, 1);
+                  items.splice(i, 0, item);
+                } else {
+                  items.splice(i, 0, item);
+                  items.splice(oldIndex2, 1);
+                }
+              } else {
+                items.splice(oldIndex2, 1);
+                items.push(item);
+              }
+            } else {
+              if (i != null) {
+                items.splice(i, 0, {
+                  id
+                });
+              } else {
+                items.push({
+                  id
+                });
+              }
+            }
+            return;
+          }
+          const oldItems = this.getTreeItems(oldPid);
+          const newItems = this.getTreeItems(newPid);
+          const oldIndex = oldItems.findIndex((_) => _.id === id);
+          if (oldIndex === -1) {
+            this.setTreeItem(newPid, id, i);
+          } else {
+            const item = oldItems[oldIndex];
+            oldItems.splice(oldIndex, 1);
+            if (i != null) {
+              newItems.splice(i, 0, item);
+            } else {
+              newItems.push(item);
+            }
+          }
+        },
+        deleteNode(arg) {
+          const tag = typeof arg === "string" ? arg : arg.id;
+          const data = this.getNode(tag);
+          if (data) {
+            const pKey = this.getParentKey(data.id);
+            const items = this.getTreeItems(pKey);
+            const i = items.findIndex((_) => _.id === data.id);
+            if (i !== -1) {
+              items.splice(i, 1);
+            }
+            this.map.delete(data.id);
+          }
+          this.isChange = true;
+          this.countAdd();
+          this.cacheHistory();
+          return data;
+        },
+        setNodes(nodes) {
+          nodes.forEach((node) => {
+            const p = NodeRegister.get(node.type, this.prefix);
+            if (p) {
+              const data = p.create(node);
+              if (data) {
+                this.map.set(data.id, data);
+              }
+            } else {
+              console.warn(`节点类型[${node.type}]，未注册适配器`);
+            }
+          });
+        },
+        insertNode(mode, node, data) {
+          const oldPKey = this.getParentKey(data.id);
+          const newPKey = this.getParentKey(node.id);
+          const id = data.id;
+          const items = this.getTreeItems(newPKey);
+          const index = items.findIndex((_) => _.id === node.id);
+          switch (mode) {
+            case InsertNodeMode.BEFORE: {
+              this.moveTreeItem(oldPKey, newPKey, id, index);
+              break;
+            }
+            case InsertNodeMode.AFTER: {
+              this.moveTreeItem(oldPKey, newPKey, id, index + 1);
+              break;
+            }
+          }
+          this.map.set(data.id, data);
+          this.isChange = true;
+          this.countAdd();
+          this.cacheHistory();
+          return true;
+        },
+        setData: async function(data) {
+          if (data) {
+            if (!data.pageNode) {
+              const p = NodeRegister.get(DesignNodeType.PAGE, this.prefix) || NodeRegister.get(DesignNodeType.PAGE_LOWER, this.prefix);
+              if (p) {
+                const node = p.create();
+                this.pageNode = reactive(node);
+                this.pageNode.data = reactive(this.pageNode.data || {});
+              } else {
+                console.warn(`节点类型[${DesignNodeType.PAGE}]，未注册适配器`);
+              }
+            } else {
+              this.pageNode = reactive(
+                data.pageNode
+              );
+              this.pageNode.data = reactive(this.pageNode.data || {});
+            }
+            this.setNodes(data.nodes);
+            this.selected = this.pageNode;
+            if (data.nodes && data.nodes.length > 0 && (!data.tree || data.tree.length === 0)) {
+              const structureTree = (items) => {
+                const arr = [];
+                items.forEach((item) => {
+                  const children = data.nodes.filter((_) => _.parentId === item.id).sort((a, b) => a.order - b.order);
+                  if (children.length > 0) {
+                    arr.push({
+                      id: item.id,
+                      children: structureTree(children)
+                    });
+                  } else {
+                    arr.push({
+                      id: item.id
+                    });
+                  }
+                });
+                return arr;
+              };
+              this.tree = structureTree(
+                data.nodes.filter((_) => !_.parentId).sort((a, b) => a.order - b.order)
+              );
+            } else {
+              this.tree = data.tree || [];
+            }
+            this.cacheHistory();
+          }
+        },
+        getData() {
+          const deep = (items) => {
+            const arr = [];
+            if (items && items.length > 0) {
+              items.forEach((item) => {
+                arr.push(item.id);
+                if (item.children && item.children.length > 0) {
+                  const childArr = deep(item.children);
+                  arr.push(...childArr);
+                }
+              });
+            }
+            return arr;
+          };
+          const keys = deep(this.tree);
+          const nodes = cloneDeep(Array.from(this.map.values())).filter((_) => {
+            return keys.includes(_.id);
+          });
+          return {
+            type: this.prefix,
+            pageNode: cloneDeep(this.pageNode),
+            nodes,
+            tree: cloneDeep(this.tree)
+          };
+        },
+        getPaths(id) {
+          const arr = [];
+          let node = this.getNode(id);
+          if (node) {
+            arr.push(node);
+            let pKey = this.getParentKey(node.id);
+            while (pKey) {
+              node = this.getNode(pKey);
+              if (!node) {
+                break;
+              }
+              arr.unshift(node);
+              pKey = this.getParentKey(node.id);
+            }
+          }
+          return arr;
+        },
+        undo() {
+          this.history.prev();
+          if (this.history.active) {
+            this.tree = cloneDeep(this.history.active.data);
+            this.selected = this.pageNode;
+            this.isChange = true;
+          }
+        },
+        redo() {
+          this.history.next();
+          if (this.history.active) {
+            this.tree = cloneDeep(this.history.active.data);
+            this.selected = this.pageNode;
+            this.isChange = true;
+          }
+        },
+        cacheHistory() {
+          if (this.isTriggerCache) {
+            this.history.add(cloneDeep(this.tree));
+          }
+        },
+        countAdd() {
+          this.count += 1;
+        },
+        enableCache() {
+          this.isTriggerCache = true;
+        },
+        disableCache() {
+          this.isTriggerCache = false;
+        }
+      }
+    }
+  )();
+};
+
+export { useDesignViewStore };

package/es/types/index.d.ts

@@ -1,26 +1,12 @@
 import '@gct-paas/core/types';
+import type { DesignerRegister } from '../register';
 
-declare global {
-  type PartialByKeys<T, K extends keyof T> = {
-    [P in K]?: T[P];
-  } & Pick<T, Exclude<keyof T, K>>;
-
-  type RequiredByKeys<T, K extends keyof T> = {
-    [P in K]: T[P];
-  } & Pick<T, Exclude<keyof T, K>>;
+declare module '@gct-paas/core' {
+  interface IGlobalRegister {
+    designer: {
+      pad: DesignerRegister;
+      mobile: DesignerRegister;
+      web: DesignerRegister;
+    };
+  }
 }
-
-// declare module '@gct-paas/core' {
-//   interface GctGlobal {
-//     register: {
-//       designer: {
-//         mobile: DesignerRegister;
-//         web: DesignerRegister;
-//       };
-//       render: {
-//         mobile: RenderRegister;
-//         web: RenderRegister;
-//       };
-//     };
-//   }
-// }

package/es/utils/can-drop/can-drop.d.ts

@@ -0,0 +1,12 @@
+import { Store } from 'pinia';
+import { IDesignNode, IDesignViewActions, IDesignViewState, IDragDataItem } from '../../interface';
+/**
+ * 是否可以放置
+ *
+ * @export
+ * @param {IDesignNode} node 当前节点
+ * @param {Store<string, IDesignViewState, {}, IDesignViewActions>} store 设计视图 store
+ * @param {IDragDataItem} item 拖拽数据
+ * @returns {*}  {boolean}
+ */
+export declare function isCanCrop(node: IDesignNode, store: Store<string, IDesignViewState, object, IDesignViewActions>, item: IDragDataItem): boolean;

package/es/utils/can-drop/can-drop.mjs

@@ -0,0 +1,56 @@
+import { intersection, union } from 'lodash-es';
+import 'qx-util';
+import '../../constant/page-designer.mjs';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+
+function isCanCrop(node, store, item) {
+  let isDrop = true;
+  if (node) {
+    const nodes = store.getPaths(node.id);
+    const i = nodes.findIndex((_) => _.id === item.id);
+    if (i !== -1) {
+      return false;
+    }
+    const providers = nodes.map((node2) => {
+      return NodeRegister.get(node2.type, store.prefix);
+    });
+    const whiteList = intersection(
+      ...providers.map((_) => _.whiteList).filter((_) => !!_)
+    );
+    const blackList = union(
+      ...providers.map((_) => _.blackList).filter((_) => !!_)
+    );
+    const strWhiteList = whiteList.filter((val) => typeof val === "string");
+    const regWhiteList = whiteList.filter((val) => val instanceof RegExp);
+    if (whiteList.length > 0) {
+      const arr = item.types.filter((_) => {
+        return regWhiteList.some((reg) => !reg.test(_)) && !strWhiteList.includes(_);
+      });
+      if (arr.length > 0) {
+        isDrop = false;
+      }
+    }
+    if (isDrop === true && blackList.length > 0) {
+      let items = [];
+      if (whiteList.length > 0) {
+        items = item.types.filter((_) => {
+          return regWhiteList.some((reg) => reg.test(_)) || strWhiteList.includes(_);
+        });
+      } else {
+        items = item.types;
+      }
+      const strBlackList = blackList.filter((val) => typeof val === "string");
+      const regBlackList = blackList.filter((val) => val instanceof RegExp);
+      const blacks = items.filter((_) => {
+        return regBlackList.some((reg) => reg.test(_));
+      });
+      const arr = intersection(strBlackList, items);
+      if (arr.length > 0 || blacks.length > 0) {
+        isDrop = false;
+      }
+    }
+  }
+  return isDrop;
+}
+
+export { isCanCrop };

package/es/utils/design-install/design-install.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'vue';
+import { FIELD_TYPE } from '@gct-paas/core';
+/**
+ * 设计编辑器安装函数
+ *
+ * @author chitanda
+ * @date 2025-07-07 15:07:46
+ * @export
+ * @param {string} providerTag
+ * @param {() => DesignEditorNodeProvider} provider
+ * @param {Component} [com]
+ * @returns {*}
+ */
+export declare function widthDesignEditorInstall(fieldType: FIELD_TYPE, com: Component): {
+    install(): void;
+};

package/es/utils/design-install/design-install.mjs

@@ -0,0 +1,22 @@
+import '../../constant/page-designer.mjs';
+import '@gct-paas/core';
+import { DesignEditorNodeProvider } from '../../provider/design-editor-node/design-editor-node.provider.mjs';
+import 'qx-util';
+import 'lodash-es';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+
+function widthDesignEditorInstall(fieldType, com) {
+  class Provider extends DesignEditorNodeProvider {
+    fieldType = fieldType;
+    component = com;
+  }
+  return {
+    install() {
+      if (fieldType) {
+        NodeRegister.registerDesignEditorNode(fieldType, () => new Provider());
+      }
+    }
+  };
+}
+
+export { widthDesignEditorInstall };

package/es/utils/design-interceptors/design-interceptors.d.ts

@@ -0,0 +1,8 @@
+import { AxiosInstance } from 'axios';
+/**
+ * 安装拦截器
+ *
+ * @export
+ * @param {AxiosInstance} axios
+ */
+export declare function designInterceptors(axios: AxiosInstance): void;

package/es/utils/design-interceptors/design-interceptors.mjs

@@ -0,0 +1,20 @@
+import { AxiosHeaders } from 'axios';
+
+function designInterceptors(axios) {
+  axios.interceptors.request.use((config) => {
+    if (!config.headers) {
+      config.headers = new AxiosHeaders();
+    }
+    config.headers.Env = "dev";
+    if (!config.headers["App-Tag"]) {
+      config.headers["App-Tag"] = _gct.store.context.aid;
+      config.headers["Module"] = "TENANT_CENTER";
+    }
+    if (!config.headers["Branch-Id"]) {
+      config.headers["Branch-Id"] = _gct.store.context.bid;
+    }
+    return config;
+  });
+}
+
+export { designInterceptors };

package/es/utils/field-attrs/basicAttrs.d.ts

@@ -0,0 +1,25 @@
+import { FormComponents } from '@gct-paas/core';
+/**
+ * 设计时
+ */
+export declare const basicAttrsUtils: Record<'required' | 'readonly' | 'bindFieldKey', attrsTransform[]>;
+export declare const FieldTypeComponentMap: Record<string, FieldComponentConfig>;
+/**
+ * attrs transform 类型（已修复 TS 警告）
+ */
+interface AttrTransformContext {
+    key: string;
+    [key: string]: unknown;
+}
+interface attrsTransform {
+    from: string;
+    to: string;
+    transform?: (val: unknown, widget?: AttrTransformContext) => unknown;
+}
+export interface FieldComponentConfig {
+    cmpKey?: FormComponents;
+    attrsTransform?: attrsTransform[];
+    example?: string | string[];
+    exampleOptions?: string[];
+}
+export {};