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

package/es/editor/model-field-select/model-field-select.mjs

@@ -0,0 +1,314 @@
+import { defineComponent, ref, computed, watch, createVNode, resolveComponent, isVNode } from 'vue';
+import { useNamespace, t, FieldIconMap, modelLoader } from '@gct-paas/core';
+import { CloseOutlined } from '@ant-design/icons-vue';
+import { GctDndContainer } from '@gct-paas/core-web';
+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 { DesignNodeType } from '../../constant/index.mjs';
+import './model-field-select.css';/* empty css                         */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const ModelFieldSelect = /* @__PURE__ */ defineComponent({
+  name: 'ModelFieldSelect',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    c: {
+      type: Object
+    },
+    itemModel: {
+      type: Object
+    },
+    data: {
+      type: Object
+    }
+  },
+  setup() {
+    const ns = useNamespace('model-field-select');
+    // 基础信息是否加载完毕
+    const isLoaded = ref(false);
+    const c = useDesignViewController();
+    const selectNode = c.store.selected;
+    const parentKey = computed(() => {
+      if (!selectNode || selectNode.type === DesignNodeType.PAGE || selectNode.type === DesignNodeType.PAGE_LOWER) {
+        return undefined;
+      }
+      return selectNode.id;
+    });
+    const nodes = ref([]);
+    // 存储字段映射，key 为 ${modelKey}___${fieldKey}，value 为 ModelDndData
+    const fieldMap = ref({});
+    function getFieldCacheKey(modelKey, fieldKey) {
+      return `${modelKey}___${fieldKey}`;
+    }
+    function updateNodes() {
+      if (!isLoaded.value) {
+        nodes.value = [];
+        return;
+      }
+      nodes.value = c.store.getChildren(parentKey.value) || [];
+    }
+    watch(() => c.store.count, () => {
+      // 当 c.store.count 变化时，更新节点
+      updateNodes();
+    });
+
+    /**
+     * 根据现有的列表排序，修改 c.store.tree 的顺序
+     *
+     * @author chitanda
+     * @date 2025-06-19 11:06:03
+     * @param {ModelDndData[]} fields
+     */
+    function sortFields(fields) {
+      // 按照给回的属性顺序重新排序
+      const newItems = c.store.getChildren(parentKey.value) || [];
+      newItems.sort((a, b) => {
+        const indexA = fields.findIndex(field => field.key === a.data.key);
+        const indexB = fields.findIndex(field => field.key === b.data.key);
+        return indexA - indexB;
+      });
+      if (parentKey.value) {
+        // 存在父时查找出父节点，然后重新排序子
+        c.store.getTreeItem(parentKey.value)?.children?.sort((a, b) => {
+          const indexA = newItems.findIndex(item => item.id === a.id);
+          const indexB = newItems.findIndex(item => item.id === b.id);
+          return indexA - indexB;
+        });
+      } else {
+        // 不存在父 c.store.tree 直接按照 newItems 排序
+        c.store.tree.sort((a, b) => {
+          const indexA = newItems.findIndex(item => item.id === a.id);
+          const indexB = newItems.findIndex(item => item.id === b.id);
+          return indexA - indexB;
+        });
+      }
+    }
+
+    // const fieldInstance = useFieldTransfer();
+
+    async function addField() {
+      // TODO: 待实现字段选择功能
+      // const excludeList = [
+      //   FIELD_TYPE.EXPRESSION_CONDITION,
+      //   FIELD_TYPE.MASTERSLAVE,
+      //   FIELD_TYPE.LABEL_TEMPLATE,
+      //   FIELD_TYPE.SERIALRULE,
+      //   // FIELD_TYPE.ONLINE_FORM,
+      //   FIELD_TYPE.PRIMARY_KEY,
+      //   FIELD_TYPE.ESOP,
+      // ];
+      // if (gct.designPlatform === PlatformType.PDA) {
+      //   excludeList.push(
+      //     ...[
+      //       FIELD_TYPE.RANGE_USER,
+      //       FIELD_TYPE.MESSAGE_TMPL,
+      //       FIELD_TYPE.EXPRESSION_CONDITION,
+      //     ],
+      //   );
+      // }
+      // const modelKey = c.store.pageNode?.data.modelKey;
+      // fieldInstance.open({
+      //   modelKey: modelKey,
+      //   modalTitle: t('sys.pageDesigner.modelField'),
+      //   isShowCascader: true,
+      //   draggable: false,
+      //   data: nodes.value.map(
+      //     item =>
+      //       fieldMap.value[getFieldCacheKey(item.data.modelKey, item.data.key)],
+      //   ),
+      //   excludeFieldType: excludeList.concat(
+      //     props.model.excludeFieldType ?? [],
+      //   ) as FIELD_TYPE[],
+      //   excludeFieldKey: [
+      //     'tenant_id_',
+      //     'ref_field_key_',
+      //     'ref_model_key_',
+      //   ].concat(props.model.excludeFieldKey ?? []),
+      //   saveCallback: async ({ objFieldList }) => {
+      //     const items = c.store.getChildren(parentKey.value);
+      //     if (objFieldList.length === 0) {
+      //       // 选项清空后，子项全部删除
+      //       items.forEach(item => {
+      //         c.store.deleteNode(item.id);
+      //       });
+      //       return;
+      //     }
+      //     // 过滤出被删除的项
+      //     const deletedItems = items.filter(
+      //       item => !objFieldList.some(field => field.key === item.data.key),
+      //     );
+      //     // 删除被删除的项
+      //     deletedItems.forEach(item => {
+      //       c.store.deleteNode(item.id);
+      //     });
+      //     const provider = NodeRegister.get(
+      //       DesignNodeType.FIELD,
+      //       c.store.prefix,
+      //     );
+      //     if (!provider) {
+      //       console.error('Field provider not found');
+      //       return;
+      //     }
+      //     for await (const item of objFieldList) {
+      //       // 存在则更新，不存在则新增，和旧数据对比
+      //       const node = items.find(treeItem => treeItem.data.key === item.key);
+      //       if (!node) {
+      //         const field = await modelLoader.loadField(
+      //           item.modelKey,
+      //           item.key,
+      //         );
+      //         if (field) {
+      //           fieldMap.value[getFieldCacheKey(item.modelKey, field.key!)] =
+      //             field as IGctDndData;
+      //         }
+      //         let fieldCodeChain: IFieldCodeChain | undefined = undefined;
+      //         if (item.fieldCodeChain) {
+      //           try {
+      //             fieldCodeChain = JSON.parse(item.fieldCodeChain);
+      //           } catch (error) {
+      //             console.error(
+      //               'Invalid fieldCodeChain JSON:',
+      //               item.fieldCodeChain,
+      //               error,
+      //             );
+      //           }
+      //         }
+      //         const data = provider.create({
+      //           data: {
+      //             modelKey: item.modelKey,
+      //             modelCategory: item.modelCategory,
+      //             key: item.key,
+      //             type: item.type,
+      //             name: item.name,
+      //             mapping_type: item.mappingType,
+      //             fieldCodeChain,
+      //           },
+      //         });
+      //         c.store.setNode(parentKey.value || null, data, -1);
+      //       }
+      //     }
+      //     sortFields(objFieldList);
+      //   },
+      // });
+    }
+    const dndCfg = {
+      group: 'gct-form-model-field-select',
+      end() {
+        sortFields(nodes.value.map(item => fieldMap.value[getFieldCacheKey(item.data.modelKey, item.data.key)]).filter(item => !!item));
+      }
+    };
+    function onDeleteItem(e, item) {
+      e.stopPropagation();
+      const node = nodes.value.find(n => n.data.key === item.key);
+      if (!node) {
+        console.warn('Node not found for item:', item);
+        return;
+      }
+      // 删除节点
+      c.store.deleteNode(node.id);
+    }
+    async function onInit() {
+      // 加载所有非主模型字段
+      const all = [];
+      c.store.map.forEach(node => {
+        all.push((async () => {
+          const key = node.data.modelKey;
+          const field = await modelLoader.loadField(key, node.data.key);
+          if (field) {
+            fieldMap.value[getFieldCacheKey(key, field.key)] = field;
+          }
+        })());
+      });
+      await Promise.all(all);
+      isLoaded.value = true;
+      updateNodes();
+    }
+    onInit();
+    return () => {
+      let _slot;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('select-modal')
+      }, [createVNode(resolveComponent("a-button"), {
+        "onClick": addField,
+        "type": "dashed",
+        "block": true
+      }, _isSlot(_slot = t('sys.pageDesigner.selectModelFields')) ? _slot : {
+        default: () => [_slot]
+      })]), createVNode("div", {
+        "class": ns.e('field-content')
+      }, [createVNode("div", {
+        "class": ns.e('field-list')
+      }, [createVNode(GctDndContainer, {
+        "config": dndCfg,
+        "items": nodes.value,
+        "onUpdate:items": $event => nodes.value = $event
+      }, {
+        default: args => {
+          const data = fieldMap.value[getFieldCacheKey(args.data.data.modelKey, args.data.data.key)];
+          if (!data) {
+            return createVNode("div", null, null);
+          }
+          return createVNode("div", {
+            "class": ns.e('field-item')
+          }, [createVNode("div", {
+            "class": ns.em('field-item', 'bg')
+          }, null), createVNode("div", {
+            "class": ns.em('field-item', 'drag')
+          }, [createVNode("i", {
+            "class": "iconfont icon-drag"
+          }, null)]), createVNode("div", {
+            "class": ns.em('field-item', 'label')
+          }, [createVNode("span", {
+            "class": ns.em('field-item', 'label-icon')
+          }, [createVNode("i", {
+            "class": ['iconfont', FieldIconMap[data.type]]
+          }, null)]), createVNode("span", {
+            "class": ns.em('field-item', 'label-text'),
+            "title": data.name
+          }, [data.name])]), createVNode("div", {
+            "class": ns.em('field-item', 'actions')
+          }, [createVNode(resolveComponent("a-popconfirm"), {
+            "placement": "topRight",
+            "ok-text": t('sys.okText'),
+            "cancel-text": t('sys.closeText'),
+            "onConfirm": e => onDeleteItem(e, data)
+          }, {
+            title: () => {
+              return createVNode("div", null, [t('sys.sureToDo')]);
+            },
+            default: () => {
+              return createVNode(CloseOutlined, null, null);
+            }
+          })])]);
+        }
+      })])])]);
+    };
+  }
+});
+
+export { ModelFieldSelect };

package/es/editor/style-border/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '@gct-paas/core';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/editor/style-border/index.mjs

@@ -0,0 +1,15 @@
+import { widthEditorInstall } from '@gct-paas/core';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+import '../../constant/page-designer.mjs';
+import { StyleBorder as StyleBorder$1 } from './style-border.mjs';
+
+class Provider {
+  component = "style-border";
+}
+const StyleBorder = widthEditorInstall(
+  DesignEditorType.STYLE_BORDER,
+  () => new Provider(),
+  StyleBorder$1
+);
+
+export { Provider, StyleBorder as default };

package/es/editor/style-border/style-border.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { IFormItem, IBorder, EditorController } from '@gct-paas/core';
+import { IStyleBorder } from '../../interface';
+/**
+ * 边框编辑器
+ */
+export declare const StyleBorder: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleBorder>;
+        required: true;
+    };
+    value: {
+        type: PropType<IBorder>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: EditorController<IStyleBorder>;
+    val: import('vue').WritableComputedRef<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleBorder>;
+        required: true;
+    };
+    value: {
+        type: PropType<IBorder>;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default StyleBorder;

package/es/editor/style-border/style-border.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import { useNamespace, EditorController, useGctFormValue } from '@gct-paas/core';
+
+/**
+ * 边框编辑器
+ */
+const StyleBorder = /* @__PURE__ */ defineComponent({
+  name: 'StyleBorder',
+  inheritAttrs: false,
+  props: {
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Object
+    }
+  },
+  emits: ['update:value'],
+  setup(props) {
+    const ns = useNamespace('style-border');
+    const c = new EditorController(props.model);
+    const val = useGctFormValue();
+    return {
+      ns,
+      c,
+      val
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("border-editor"), mergeProps({
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event
+    }, this.model.props || {}, {
+      "showArea": this.model.showArea,
+      "class": [this.ns.b(), this.ns.is('readonly', this.model.readonly)]
+    }), null);
+  }
+});
+
+export { StyleBorder };

package/es/editor/style-font/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '@gct-paas/core';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/editor/style-font/index.mjs

@@ -0,0 +1,15 @@
+import { widthEditorInstall } from '@gct-paas/core';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+import '../../constant/page-designer.mjs';
+import { StyleFont as StyleFont$1 } from './style-font.mjs';
+
+class Provider {
+  component = "style-font";
+}
+const StyleFont = widthEditorInstall(
+  DesignEditorType.STYLE_FONT,
+  () => new Provider(),
+  StyleFont$1
+);
+
+export { Provider, StyleFont as default };

package/es/editor/style-font/style-font.css

@@ -0,0 +1,86 @@
+@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-style-font .component {
+  padding: 2px;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 4px;
+}
+.gct-style-font .box .color-picker-icon {
+  width: 20px;
+  height: 20px;
+}
+.gct-style-font .align-group-box,
+.gct-style-font .font-style-box {
+  height: 28px;
+}
+.gct-style-font .align-group-box .iconfont:hover, .gct-style-font .align-group-box .anticon:hover,
+.gct-style-font .font-style-box .iconfont:hover,
+.gct-style-font .font-style-box .anticon:hover {
+  background-color: transparent;
+}
+.gct-style-font .align-group-box .icon-box:hover,
+.gct-style-font .font-style-box .icon-box:hover {
+  background-color: #e6e9ef;
+}

package/es/editor/style-font/style-font.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { IFormItem, IFont, EditorController } from '@gct-paas/core';
+import { IStyleFont } from '../../interface';
+/**
+ * 文本样式编辑器
+ */
+export declare const StyleFont: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleFont>;
+        required: true;
+    };
+    value: {
+        type: PropType<IFont>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: EditorController<IStyleFont>;
+    val: import('vue').WritableComputedRef<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStyleFont>;
+        required: true;
+    };
+    value: {
+        type: PropType<IFont>;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default StyleFont;

package/es/editor/style-font/style-font.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import { useNamespace, EditorController, useGctFormValue } from '@gct-paas/core';
+import './style-font.css';/* empty css                 */
+
+/**
+ * 文本样式编辑器
+ */
+const StyleFont = /* @__PURE__ */ defineComponent({
+  name: 'StyleFont',
+  inheritAttrs: false,
+  props: {
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Object
+    }
+  },
+  emits: ['update:value'],
+  setup(props) {
+    const ns = useNamespace('style-font');
+    const c = new EditorController(props.model);
+    const val = useGctFormValue();
+    return {
+      ns,
+      c,
+      val
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("font-editor"), mergeProps({
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event
+    }, this.model.props || {}, {
+      "class": [this.ns.b(), this.ns.is('readonly', this.model.readonly)]
+    }), null);
+  }
+});
+
+export { StyleFont };

package/es/editor/style-position/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '@gct-paas/core';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/editor/style-position/index.mjs

@@ -0,0 +1,15 @@
+import { widthEditorInstall } from '@gct-paas/core';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+import '../../constant/page-designer.mjs';
+import { StylePosition as StylePosition$1 } from './style-position.mjs';
+
+class Provider {
+  component = "style-position";
+}
+const StylePosition = widthEditorInstall(
+  DesignEditorType.STYLE_POSITION,
+  () => new Provider(),
+  StylePosition$1
+);
+
+export { Provider, StylePosition as default };

package/es/editor/style-position/style-position.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { IFormItem, IPosition, EditorController } from '@gct-paas/core';
+import { IStylePosition } from '../../interface';
+/**
+ * 定位编辑器
+ */
+export declare const StylePosition: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStylePosition>;
+        required: true;
+    };
+    value: {
+        type: PropType<IPosition>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: EditorController<IStylePosition>;
+    val: import('vue').WritableComputedRef<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IStylePosition>;
+        required: true;
+    };
+    value: {
+        type: PropType<IPosition>;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default StylePosition;