@pisell/materials 6.3.26 → 6.3.28

package/lowcode/data-source-sub-form/meta.ts

@@ -0,0 +1,259 @@
+import snippets from './snippets';
+import { createFormItemSchema } from '../data-source-form/utils';
+
+/**
+ * @title 将 xRecordSchema JSON 字段定义转换为低代码子组件 Schema
+ * @description
+ * 解析 xRecordSchema（支持单对象、数组、字符串），对每个字段补全 uiSchema，
+ * 调用 createFormItemSchema 生成低代码引擎可识别的组件 Schema。
+ */
+export const parseXRecordSchemaToChildSchemas = (value: any): any[] => {
+  let fields = value;
+
+  // 解析字符串
+  if (typeof fields === 'string') {
+    try {
+      fields = JSON.parse(fields);
+    } catch {
+      return [];
+    }
+  }
+
+  if (!fields) {
+    return [];
+  }
+
+  // 处理 properties 格式
+  if (fields.properties && typeof fields.properties === 'object') {
+    fields = Object.keys(fields.properties).map((name) => ({
+      ...fields.properties[name],
+      name,
+    }));
+  }
+
+  // 处理 fields 格式
+  if (fields.fields && Array.isArray(fields.fields)) {
+    fields = fields.fields;
+  }
+
+  // 处理 children 格式
+  if (fields.children && Array.isArray(fields.children)) {
+    fields = fields.children;
+  }
+
+  // 单对象转数组
+  if (!Array.isArray(fields)) {
+    fields = [fields];
+  }
+
+  // 补全每个字段的 uiSchema 并生成子组件 Schema
+  return fields
+    .filter(Boolean)
+    .map((field: any) => {
+      const uiSchema = { ...(field.uiSchema || {}) };
+
+      // 从 interface 映射 x-component（如 Select、Input 等）
+      if (!uiSchema['x-component'] && field.interface) {
+        uiSchema['x-component'] = field.interface;
+      }
+
+      // 兼容简单格式（只有 componentName/component，没有 interface 和 uiSchema）
+      if (!uiSchema['x-component']) {
+        uiSchema['x-component'] =
+          field.componentName || field.component || 'Input';
+      }
+
+      // 从 field.type 映射 uiSchema.type
+      if (!uiSchema.type && field.type) {
+        uiSchema.type = field.type;
+      }
+
+      // 确保 title 存在（用于生成 label）
+      if (!uiSchema.title && field.label) {
+        uiSchema.title = field.label;
+      }
+
+      return createFormItemSchema({ ...field, uiSchema }, 'edit');
+    })
+    .filter((schema: any) => !!schema?.componentName);
+};
+
+export default {
+  snippets,
+  componentName: 'DataSourceSubForm',
+  title: '子表单',
+  category: '无代码表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'DataSourceSubForm',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Data',
+        'zh-CN': '数据',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'value',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Value',
+              'zh-CN': '表单值',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US': 'Form value object',
+              'zh-CN': '表单值对象',
+            },
+          },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'xRecordSchema',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Record Schema',
+              'zh-CN': '字段配置',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US':
+                'Define form fields structure, supports JSON string, array, or object format',
+              'zh-CN': '定义表单字段结构，支持 JSON 字符串、数组或对象格式',
+            },
+          },
+          setter: ['JsonSetter', 'StringSetter', 'VariableSetter'],
+          extraProps: {
+            setValue(target: any, value: any) {
+              // 先写入 prop 值，确保持久化
+              const result = target.getProps().setPropValue('xRecordSchema', value);
+
+              const parsedSchemas = parseXRecordSchemaToChildSchemas(value);
+
+              // 先清空现有子节点，避免第二次及之后调用时 importSchema 做 diff/merge 导致节点数量异常
+              target.node.children.importSchema([]);
+              // 节点刚添加时可能尚未挂载完成，用 setTimeout 错开时序
+              setTimeout(() => {
+                target.node.children.importSchema(parsedSchemas);
+                // replaceSchema 后有概率不触发重渲染，手动 rerender
+                setTimeout(() => {
+                  target.document?.project?.simulatorHost?.rerender();
+                });
+              });
+
+              return result;
+            },
+          },
+        },
+      ],
+    },
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Appearance',
+        'zh-CN': '外观',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'renderMode',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Render Mode',
+              'zh-CN': '渲染模式',
+            },
+          },
+          defaultValue: 'edit',
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '编辑', value: 'edit' },
+                  { title: '禁用', value: 'disabled' },
+                  { title: '预览', value: 'preview' },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'layout',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Layout',
+              'zh-CN': '布局方式',
+            },
+          },
+          defaultValue: 'vertical',
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '垂直', value: 'vertical' },
+                  { title: '水平', value: 'horizontal' },
+                  { title: '行内', value: 'inline' },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+  ],
+  configure: {
+    props: [
+      {
+        name: 'onChange',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'On Change',
+            'zh-CN': '值变化回调',
+          },
+        },
+        setter: {
+          componentName: 'FunctionSetter',
+          props: {
+            template:
+              'onChange(value,${extParams}){\n// 表单值变化时触发\nconsole.log("onChange", value);\n}',
+          },
+        },
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            'onChange(value,${extParams}){\n// 表单值变化时触发\nconsole.log("onChange", value);\n}',
+        },
+      ],
+    },
+  },
+};

package/lowcode/data-source-sub-form/snippets.ts

@@ -0,0 +1,21 @@
+/**
+ * @title DataSourceSubForm 组件片段
+ * @description 定义组件在低代码平台中的初始配置
+ */
+const snippets = [
+  {
+    title: '子表单',
+    screenshot: '',
+    schema: {
+      componentName: 'DataSourceSubForm',
+      props: {
+        renderMode: 'edit',
+        layout: 'vertical',
+        value: {},
+        xRecordSchema: [],
+      },
+    },
+  },
+];
+
+export default snippets;

package/lowcode/form-item-record-list-wrapper/meta.ts

@@ -0,0 +1,180 @@
+import snippets from './snippets';
+import {
+  formItemGeneralDataGroup,
+  generalItemMap,
+  getFormItemGeneralInfoGroup,
+  formItemGeneralOptionTypeGroup,
+} from '../_utils/defaultSchema';
+import { parseXRecordSchemaToChildSchemas } from '../data-source-sub-form/meta';
+
+export default {
+  snippets,
+  componentName: 'FormItemRecordListWrapper',
+  title: '记录列表包装器',
+  category: '无代码表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemRecordListWrapper',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    // 数据分组
+    formItemGeneralDataGroup,
+    // 信息分组
+    getFormItemGeneralInfoGroup([
+      generalItemMap['label'],
+      generalItemMap['placeholder'],
+      generalItemMap['tooltip'],
+      generalItemMap['extra'],
+      generalItemMap['hideLabel'],
+      generalItemMap['renderMode'],
+      generalItemMap['defaultValue'],
+    ]),
+    // 选项类型分组
+    formItemGeneralOptionTypeGroup,
+    // Schema 分组
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Schema',
+        'zh-CN': 'Schema',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'xRecordSchema',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Record Schema',
+              'zh-CN': '记录字段配置',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US':
+                'Define the fields for each record. When configured, the system will automatically generate form fields based on the schema. You can also manually drag form items into the container.',
+              'zh-CN':
+                '定义每条记录的字段结构。配置后，系统会自动根据 Schema 生成表单字段。你也可以手动拖拽表单项到容器中。',
+            },
+          },
+          propType: 'string',
+          setter: 'JsonSetter',
+          description: `
+示例配置：
+[
+  {
+    "name": "code",
+    "uiSchema": {
+      "title": "代码",
+      "x-component": "Input",
+      "x-component-props": {
+        "placeholder": "请输入代码"
+      }
+    }
+  },
+  {
+    "name": "type",
+    "uiSchema": {
+      "title": "类型",
+      "x-component": "Select",
+      "enum": [
+        { "label": "类型A", "value": "a" },
+        { "label": "类型B", "value": "b" }
+      ]
+    }
+  }
+]
+          `,
+          extraProps: {
+            /**
+             * 当 xRecordSchema 值变化时，解析 JSON 并生成子组件节点
+             */
+            setValue(target: any, value: any) {
+              const result = target
+                .getProps()
+                .setPropValue('xRecordSchema', value);
+
+              const parsedSchemas = parseXRecordSchemaToChildSchemas(value);
+
+              // 先清空现有子节点，避免第二次及之后调用时 importSchema 做 diff/merge 导致节点数量异常
+              target.node.children.importSchema([]);
+              // 节点刚添加时可能尚未挂载完成，用 setTimeout 错开时序
+              setTimeout(() => {
+                target.node.children.importSchema(parsedSchemas);
+                // replaceSchema 后有概率不触发重渲染，手动 rerender
+                setTimeout(() => {
+                  target.document?.project?.simulatorHost?.rerender();
+                });
+              });
+
+              return result;
+            },
+          },
+        },
+      ],
+    },
+    // 插槽分组
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Slot',
+        'zh-CN': '插槽',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'topSlot',
+          title: {
+            label: {
+              type: 'i18n',
+              'en-US': 'Tab Area',
+              'zh-CN': 'Tab 区域',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US':
+                'Drag a component here to customize the tab navigation. The component will receive options, value, and onChange props.',
+              'zh-CN':
+                '拖入自定义组件来替换默认 Tab 导航。组件会自动接收 options、value、onChange 属性。',
+            },
+          },
+          setter: {
+            componentName: 'SlotSetter',
+            initialValue: {
+              type: 'JSSlot',
+              value: [],
+            },
+          },
+        },
+      ],
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      events: [
+        { name: 'onChange', template: 'onChange(value,${extParams}){}' },
+      ],
+    },
+    advanced: {
+      callbacks: {
+        // 当拖入新组件时的回调
+        onNodeAdd: (dragment: any, currentNode: any) => {
+          console.log('RecordListWrapper: 新增子组件', dragment?.componentName);
+        },
+      },
+    },
+  },
+};

package/lowcode/form-item-record-list-wrapper/snippets.ts

@@ -0,0 +1,18 @@
+const snippets = [
+  {
+    title: '记录列表包装器',
+    screenshot: '',
+    schema: {
+      componentName: 'FormItemRecordListWrapper',
+      props: {
+        label: '记录列表',
+        name: 'recordList',
+        optionSourceType: 'default',
+        options: [],
+        xRecordSchema: null,
+      },
+    },
+  },
+];
+
+export default snippets;

package/lowcode/form-item-tabs/meta.ts

@@ -0,0 +1,172 @@
+import { uuid } from '../_utils/utils';
+import {
+  formItemGeneralDataGroup,
+  generalItemMap,
+  getFormItemGeneralInfoGroup,
+  formItemGeneralOptionTypeGroup,
+  getFormItemValidateGroup,
+  getFormItemGeneralAppearanceGroup,
+} from '../_utils/defaultSchema';
+
+export default {
+  componentName: 'FormItemTabs',
+  title: '选项卡',
+  category: '无代码表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemTabs',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    // 数据分组
+    formItemGeneralDataGroup,
+    // 信息分组
+    getFormItemGeneralInfoGroup([
+      generalItemMap['label'],
+      generalItemMap['tooltip'],
+      generalItemMap['extra'],
+      generalItemMap['hideLabel'],
+      generalItemMap['renderMode'],
+      generalItemMap['defaultValue'],
+    ]),
+    // 选项类型分组
+    formItemGeneralOptionTypeGroup,
+    // 校验分组
+    getFormItemValidateGroup([generalItemMap['requiredobj']]),
+    // 外观分组
+    getFormItemGeneralAppearanceGroup([]),
+  ],
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认选中的选项值' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+      supportVariable: true,
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前选中的选项值（受控）' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+      supportVariable: true,
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否禁用整个选项卡组件' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true,
+    },
+    {
+      name: 'options',
+      title: { label: '选项列表', tip: '配置各选项卡的标签和对应值' },
+      propType: {
+        type: 'arrayOf',
+        value: {
+          type: 'shape',
+          value: [
+            {
+              name: 'label',
+              propType: 'string',
+              description: '选项名',
+              defaultValue: '选项名',
+            },
+            {
+              name: 'value',
+              propType: { type: 'oneOfType', value: ['string', 'number'] },
+              description: '选项值',
+              defaultValue: '选项值',
+            },
+            {
+              name: 'disabled',
+              propType: 'bool',
+              description: '是否禁用该选项',
+              defaultValue: false,
+            },
+          ],
+        },
+      },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'label',
+                    title: '选项名',
+                    setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+                    isRequired: true,
+                  },
+                  {
+                    name: 'value',
+                    title: '选项值',
+                    setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+                    isRequired: true,
+                  },
+                  {
+                    name: 'disabled',
+                    title: '是否禁用',
+                    setter: 'BoolSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                label: '选项名',
+                value: uuid(),
+                disabled: false,
+              };
+            },
+          },
+        },
+      },
+    },
+    {
+      name: 'onChange',
+      title: { label: '变化时回调', tip: '切换选项时触发的回调函数' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(value,${extParams}){\n// 切换选项时回调\nconsole.log('onChange', value);}",
+        },
+      ],
+    },
+  },
+  snippets: [
+    {
+      title: '选项卡',
+      screenshot: '',
+      schema: {
+        componentName: 'FormItemTabs',
+        props: {
+          optionSourceType: 'custom',
+          options: [
+            { label: '选项A', value: 'A' },
+            { label: '选项B', value: 'B' },
+            { label: '选项C', value: 'C' },
+          ],
+        },
+      },
+    },
+  ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.3.26",
+  "version": "6.3.28",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",