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

package/es/interface/page-designer/toolkit.d.ts

@@ -0,0 +1,12 @@
+import { CategoryTypeEnum } from '@gct-paas/core';
+import { LowCodeWidget } from '@gct-paas/schema';
+export interface ToolkitWidgetGroup {
+    categoryType: CategoryTypeEnum;
+    categoryName: string;
+    list: LowCodeWidget.BasicSchema[];
+}
+export interface NewEvent {
+    methodName: string;
+    params: string;
+    content?: string;
+}

package/es/interface/provider/i-node-provider.d.ts

@@ -0,0 +1,142 @@
+import { Component } from 'vue';
+import { DesignNodeMode } from '../../constant';
+import { IDesignViewController } from '../controller/i-design-view.controller';
+import { IDesignItemAction } from '../i-design-item-action/i-design-item-action';
+import { IDesignNode } from '../design';
+import { IEditForm } from '@gct-paas/core';
+import { IDragDataItem } from '../i-drag-data-item/i-drag-data-item';
+/**
+ * 设计界面节点设计绘制器
+ *
+ * @author zhanghanrui
+ * @date 2024-07-06 11:07:22
+ * @export
+ * @interface INodeProvider
+ */
+export interface INodeProvider<T extends IDesignNode = IDesignNode> {
+    /**
+     * 节点模式
+     *
+     * @author zhanghanrui
+     * @date 2024-07-06 12:07:05
+     * @type {DesignNodeMode}
+     */
+    readonly mode: DesignNodeMode;
+    /**
+     * 节点类型
+     *
+     * @author zhanghanrui
+     * @date 2024-07-06 11:07:24
+     * @type {string}
+     */
+    readonly type: string;
+    /**
+     * 设计界面节点绘制组件
+     *
+     * @author chitanda
+     * @date 2025-07-07 15:07:18
+     * @type {(string | Component)}
+     */
+    readonly component: string | Component;
+    /**
+     * 组件布局方向
+     *
+     * @default 'horizontal'
+     * @type {('vertical' | 'horizontal')}
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * 可操作的行为项
+     *
+     * @author zhanghanrui
+     * @date 2024-07-16 16:07:09
+     * @type {IDesignItemAction[]}
+     */
+    actions?: IDesignItemAction[];
+    /**
+     * 是否启用拖放，默认启用
+     *
+     * @author zhanghanrui
+     * @date 2024-07-12 17:07:41
+     * @type {boolean}
+     */
+    isDrop?: boolean;
+    /**
+     * 是否启用拖拽，默认启用
+     *
+     * @author zhanghanrui
+     * @date 2024-07-12 17:07:27
+     * @type {boolean}
+     */
+    isDrag?: boolean;
+    /**
+     * 是否自定义实现样式
+     *
+     * @default false
+     * @author zhanghanrui
+     * @date 2024-08-23 16:08:16
+     * @type {boolean}
+     */
+    isCustomStyle?: boolean;
+    /**
+     * 特殊情况下，例如表格将表格元素自己复制了好几份，需要指定实际呈现元素在 querySelectorAll 中的位置
+     *
+     * @type {number}
+     */
+    selectorIndex?: number;
+    /**
+     * 放置白名单
+     *
+     * @type {(string | RegExp)[]}
+     */
+    whiteList?: (string | RegExp)[];
+    /**
+     * 放置黑名单
+     *
+     * @type {(string | RegExp)[]}
+     */
+    blackList?: (string | RegExp)[];
+    /**
+     * 属性编辑表单模型
+     *
+     * @author chitanda
+     * @date 2025-06-24 10:06:39
+     */
+    model: IEditForm | ((context?: IContext, data?: T) => IEditForm);
+    /**
+     * 项行为点击
+     *
+     * @author zhanghanrui
+     * @date 2024-07-16 17:07:33
+     * @param {IDesignViewController} c
+     * @param {IDesignNode} data
+     * @param {IDesignItemAction} action
+     * @return {*}  {boolean} 返回值为 true 时不再执行后续行为
+     */
+    onClick?(c: IDesignViewController, data: IDesignNode, action: IDesignItemAction): boolean;
+    /**
+     * 创建新节点
+     *
+     * @author zhanghanrui
+     * @date 2024-07-09 16:07:59
+     * @param {Partial<T>} [data]
+     * @return {*}  {T}
+     */
+    create(data?: Partial<T>): T;
+    /**
+     * 放置节点
+     *
+     * @param {IDesignViewController} c
+     * @param {IDragDataItem} [data]
+     * @returns {*}  {(Promise<T | null>)}
+     */
+    beforeDrop?(c: IDesignViewController, data?: IDragDataItem<T>): Promise<T | null>;
+    /**
+     * 放置完成
+     *
+     * @param {IDesignViewController} c
+     * @param {IDragDataItem} [data]
+     * @returns {*}  {Promise<boolean>}
+     */
+    afterDrop?(c: IDesignViewController, data?: IDragDataItem<T>): Promise<boolean>;
+}

package/es/interface/state/i-design-view.state.d.ts

@@ -1,28 +1,125 @@
-import { LowCodeWidget } from '@gct-paas/core';
-import { PageJson } from '../design-page/design-page';
+import { LinkedList } from '@gct-paas/core';
+import { IDesignNode, IDesignPageNodeData, IDesignTreeItem } from '../design';
 /**
  * 设计界面状态
  *
+ * @author zhanghanrui
+ * @date 2024-07-05 13:07:00
  * @export
  * @interface IDesignViewState
  */
 export interface IDesignViewState {
     /**
-     * 是否为移动端
+     * 状态机唯一标识
      *
+     * @type {string}
+     */
+    readonly uuid: string;
+    /**
+     * 配置区导航标题
+     *
+     * @type {string}
+     */
+    rootExpLabel: string;
+    /**
+     * 前缀
+     *
+     * @author zhanghanrui
+     * @date 2024-07-12 15:07:09
+     * @type {string}
+     */
+    prefix: string;
+    /**
+     * 是否触发缓存
+     *
+     * @default true
+     * @author zhanghanrui
+     * @date 2024-08-30 09:08:39
+     * @type {boolean}
+     */
+    isTriggerCache: boolean;
+    /**
+     * 节点映射，方便根据 id 查找节点
+     *
+     * @author zhanghanrui
+     * @date 2024-07-05 13:07:01
+     * @type {Map<string, IDesignNode>}
+     */
+    map: Map<string, IDesignNode>;
+    /**
+     * 页面节点
+     *
+     * @author zhanghanrui
+     * @date 2024-07-24 10:07:15
+     * @type {IDesignNode<IDesignPageNodeData> | null}
+     */
+    pageNode: IDesignNode<IDesignPageNodeData> | null;
+    /**
+     * 结构树
+     *
+     * @author zhanghanrui
+     * @date 2024-08-21 11:08:04
+     * @type {IDesignTreeItem[]}
+     */
+    tree: IDesignTreeItem[];
+    /**
+     * 操作历史
+     *
+     * @author zhanghanrui
+     * @date 2024-07-31 17:07:35
+     * @type {LinkedList<IDesignTreeItem[]>}
+     */
+    history: LinkedList<IDesignTreeItem[]>;
+    /**
+     * 当前选中的节点
+     *
+     * @author zhanghanrui
+     * @date 2024-07-22 16:07:40
+     * @type {(IDesignNode | IDesignData | null)}
+     */
+    selected: IDesignNode | null;
+    /**
+     * 是否正在拖拽节点
+     *
+     * @author zhanghanrui
+     * @date 2024-07-16 19:07:04
      * @type {boolean}
      */
-    isMobile: boolean;
+    isDragging: boolean;
+    /**
+     * 当前悬浮节点的标识
+     *
+     * @author zhanghanrui
+     * @date 2024-07-11 20:07:11
+     * @type {(string | null)}
+     */
+    hoverId: string | null;
+    /**
+     * 数据是否变更
+     *
+     * @author zhanghanrui
+     * @date 2024-07-22 11:07:51
+     * @type {boolean}
+     */
+    isChange: boolean;
+    /**
+     * 数据修改触发计数（主要用于监听数据修改，来进行页面状态变更）
+     *
+     * @author zhanghanrui
+     * @date 2024-08-15 16:08:50
+     * @type {number}
+     */
+    count: number;
     /**
-     * 界面模型
+     * 当前放置的容器节点，目前用于悬浮子项时容器高亮指示
      *
-     * @type {PageJson}
+     * @type {(IDesignNode | null)}
      */
-    model: PageJson;
+    dropContainer: IDesignNode | null;
     /**
-     * 当前选中激活的组件对象
+     * 展开的容器节点标识
      *
-     * @type {(LowCodeWidget.BasicSchema | null)}
+     * @type {Set<string>}
      */
-    selectWidget: LowCodeWidget.BasicSchema | null;
+    expansions: Set<string>;
 }

package/es/plugins/design-custom-exp-menu/components/design-custom-exp-menu-component.css

@@ -0,0 +1,87 @@
+@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-design-custom-exp-menu-component {
+  height: 100%;
+  background-color: #F7F8FA;
+  display: flex;
+  flex-direction: column;
+}
+.gct-design-custom-exp-menu-component__preview {
+  flex-grow: 1;
+}
+
+.gct-design-custom-exp-menu-component__menus {
+  flex-shrink: 0;
+  height: 60px;
+}
+
+.gct-design-custom-exp-menu-component__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gct-design-custom-exp-menu-component__icon .iconfont {
+  font-size: 18px;
+}

package/es/plugins/design-custom-exp-menu/components/design-custom-exp-menu.component.d.ts

@@ -0,0 +1,9 @@
+import { IMobileHomeMenuItem } from '@gct-paas/core';
+export declare const DesignCustomExpMenuComponent: import('vue').DefineComponent<{}, {
+    ns: import('@gct-paas/core').Namespace;
+    tabs: import('vue').ComputedRef<IMobileHomeMenuItem[]>;
+    activeTab: import('vue').ComputedRef<number>;
+    labelStyle: import('vue').ComputedRef<{
+        'font-weight': string;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/plugins/design-custom-exp-menu/components/design-custom-exp-menu.component.mjs

@@ -0,0 +1,109 @@
+import { defineComponent, createVNode, resolveComponent, computed, isVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import 'lodash-es';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '@vueuse/core';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import './design-custom-exp-menu-component.css';/* empty css                                       */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const DesignCustomExpMenuComponent = /* @__PURE__ */ defineComponent({
+  name: 'DesignCustomExpMenuComponent',
+  setup() {
+    const ns = useNamespace('design-custom-exp-menu-component');
+    const c = useDesignViewController();
+    const tabs = computed(() => {
+      const items = c.store.pageNode?.data.menus || [];
+      return items.filter(_ => _.isHidden !== true);
+    });
+    const activeTab = computed(() => {
+      return -1;
+    });
+    const labelStyle = computed(() => {
+      let fontWeight = '';
+      switch (c.store.pageNode?.data.fontWeight) {
+        case 1:
+          fontWeight = '100';
+          break;
+        case 2:
+          fontWeight = '300';
+          break;
+        case 3:
+          fontWeight = '400';
+          break;
+        case 4:
+          fontWeight = '700';
+          break;
+        case 5:
+          fontWeight = '900';
+          break;
+        default:
+          fontWeight = '400';
+      }
+      return {
+        'font-weight': fontWeight
+      };
+    });
+    return {
+      ns,
+      tabs,
+      activeTab,
+      labelStyle
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e('preview')
+    }, null), createVNode("div", {
+      "class": this.ns.e('menus')
+    }, [createVNode(resolveComponent("van-tabbar"), {
+      "fixed": false,
+      "modelValue": this.activeTab,
+      "onUpdate:modelValue": $event => this.activeTab = $event
+    }, _isSlot(_slot = this.tabs.map(tab => {
+      return createVNode(resolveComponent("van-tabbar-item"), null, {
+        default: () => {
+          return createVNode("span", {
+            "class": this.ns.e('label'),
+            "style": this.labelStyle
+          }, [tab.label]);
+        },
+        icon: () => {
+          if (!tab.icon) {
+            return;
+          }
+          return createVNode("span", {
+            "class": this.ns.e('icon')
+          }, [tab.icon.icon.startsWith('iconfont:') ? createVNode("i", {
+            "class": `iconfont ${tab.icon.icon.replace('iconfont:', '')}`
+          }, null) : createVNode(resolveComponent("icon-next"), {
+            "value": tab.icon.icon,
+            "color": tab.icon.color,
+            "size": 18
+          }, null)]);
+        }
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    })])]);
+  }
+});
+
+export { DesignCustomExpMenuComponent };

package/es/plugins/design-custom-exp-menu/design-custom-exp-menu.data.d.ts

@@ -0,0 +1,51 @@
+import { IDesignNodeData } from '../../interface';
+import { IMobileHomeMenuItem } from '@gct-paas/core';
+import { DesignContainerNode } from '../../data';
+/**
+ * 自定义导航菜单节点数据
+ *
+ * @author zhanghanrui
+ * @date 2024-08-24 10:08:12
+ * @export
+ * @interface IDesignCustomExpMenuNode
+ * @extends {IDesignNodeData}
+ */
+export interface IDesignCustomExpMenuNode extends IDesignNodeData {
+    /**
+     * 菜单项
+     *
+     * @author zhanghanrui
+     * @date 2024-08-24 11:08:40
+     * @type {IMobileHomeMenuItem[]}
+     */
+    menus: IMobileHomeMenuItem[];
+    /**
+     * 字重
+     *
+     * @author zhanghanrui
+     * @date 2024-08-24 11:08:11
+     * @type {number}
+     */
+    fontWeight: number;
+    /**
+     * 未选中颜色
+     *
+     * @author zhanghanrui
+     * @date 2024-08-24 11:08:24
+     * @type {string}
+     */
+    notSelectColor: string;
+}
+/**
+ * 自定义导航菜单节点实例
+ *
+ * @author zhanghanrui
+ * @date 2024-08-24 10:08:51
+ * @export
+ * @class DesignCustomExpNodeNode
+ * @extends {DesignContainerNode<IDesignCustomExpMenuNode>}
+ */
+export declare class DesignCustomExpNodeNode extends DesignContainerNode<IDesignCustomExpMenuNode> {
+    type: string;
+    protected createData(): IDesignCustomExpMenuNode;
+}

package/es/plugins/design-custom-exp-menu/design-custom-exp-menu.data.mjs

@@ -0,0 +1,89 @@
+import { uuid } from '@jsplumb/browser-ui';
+import { t } from '@gct-paas/core';
+import { DesignNodeType } from '../../constant/index.mjs';
+import { DesignContainerNode } from '../../data/design-container-node/design-container-node.mjs';
+import 'lodash-es';
+
+class DesignCustomExpNodeNode extends DesignContainerNode {
+  type = DesignNodeType.CUSTOM_EXP_MENU;
+  createData() {
+    const menus = [
+      {
+        id: uuid(),
+        menuMode: "system",
+        presetType: "message",
+        label: t("sys.developer.designView.message"),
+        isHome: false,
+        isHidden: false,
+        icon: {
+          icon: "iconfont:icon-yidongduan-xiaoxi",
+          color: "var(--van-text-color)"
+        },
+        selectIcon: {
+          icon: "iconfont:icon-yidongduan-xiaoxi",
+          color: "var(--ant-primary-color)"
+        },
+        isSystem: true
+      },
+      {
+        id: uuid(),
+        menuMode: "system",
+        presetType: "workbench",
+        label: t("sys.developer.designView.workbench"),
+        isHome: true,
+        isHidden: false,
+        icon: {
+          icon: "iconfont:icon-yidongduan-gongzuotai",
+          color: "var(--van-text-color)"
+        },
+        selectIcon: {
+          icon: "iconfont:icon-yidongduan-gongzuotai",
+          color: "var(--ant-primary-color)"
+        },
+        isSystem: true
+      },
+      {
+        id: uuid(),
+        menuMode: "system",
+        presetType: "personalCenter",
+        label: t("sys.developer.designView.personalCenter"),
+        isHome: false,
+        isHidden: false,
+        icon: {
+          icon: "iconfont:icon-yidongduan-wode",
+          color: "var(--van-text-color)"
+        },
+        selectIcon: {
+          icon: "iconfont:icon-yidongduan-wode",
+          color: "var(--ant-primary-color)"
+        },
+        isSystem: true
+      },
+      {
+        id: uuid(),
+        menuMode: "system",
+        presetType: "todo",
+        label: t("sys.developer.designView.todo"),
+        isHome: false,
+        isHidden: false,
+        icon: {
+          icon: "iconfont:icon-daiban",
+          color: "var(--van-text-color)"
+        },
+        selectIcon: {
+          icon: "iconfont:icon-daiban",
+          color: "var(--ant-primary-color)"
+        },
+        isSystem: true
+      }
+    ];
+    return {
+      name: "",
+      menus,
+      fontWeight: 3,
+      notSelectColor: "#8F8F8F"
+    };
+  }
+}
+
+export { DesignCustomExpNodeNode };

package/es/plugins/design-custom-exp-menu/design-custom-exp-menu.provider.d.ts

@@ -0,0 +1,23 @@
+import { IEditForm } from '@gct-paas/core';
+import { DesignNodeMode } from '../../constant';
+import { IMaterialData, INodeProvider } from '../../interface';
+import { DesignCustomExpNodeNode } from './design-custom-exp-menu.data';
+import { NodeBaseProvider } from '../../provider';
+/**
+ * 面板
+ *
+ * @author zhanghanrui
+ * @date 2024-07-16 17:07:36
+ * @export
+ * @class DesignCustomExpMenuProvider
+ * @extends {NodeBaseProvider<DesignCustomExpNodeNode>}
+ * @implements {INodeProvider<DesignCustomExpNodeNode>}
+ */
+export declare class DesignCustomExpMenuProvider extends NodeBaseProvider<DesignCustomExpNodeNode> implements INodeProvider<DesignCustomExpNodeNode> {
+    mode: DesignNodeMode;
+    type: string;
+    component: string;
+    static materialConfig: IMaterialData;
+    model: IEditForm;
+    create(data?: DesignCustomExpNodeNode): DesignCustomExpNodeNode;
+}