@pisell/materials 1.0.967 → 1.0.969

package/lowcode/pisell-procedure/meta.ts

@@ -0,0 +1,483 @@
+import snippets from './snippets';
+
+/**
+ * PisellProcedure 组件 Lowcode Meta 配置
+ * 用于阿里低代码引擎的物料描述
+ */
+export default {
+  snippets,
+  componentName: 'PisellProcedure',
+  title: 'Procedure 流程容器',
+  category: '数据录入',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellProcedure',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      name: 'steps',
+      title: { label: '步骤配置', tip: '步骤配置数组（传递给 PisellSteps）' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'title',
+                    title: { label: '标题', tip: '步骤标题' },
+                    setter: 'PisellI18nSetter',
+                    isRequired: true,
+                  },
+                  {
+                    name: 'subTitle',
+                    title: { label: '副标题', tip: '步骤副标题' },
+                    setter: 'PisellI18nSetter',
+                  },
+                  {
+                    name: 'description',
+                    title: { label: '描述', tip: '步骤详细描述' },
+                    setter: 'PisellI18nSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: () => ({
+              title: '步骤',
+            }),
+          },
+        },
+      },
+      propType: 'array',
+      isRequired: true,
+    },
+    {
+      name: 'current',
+      title: {
+        label: '当前步骤',
+        tip: '当前步骤索引（从 0 开始）',
+      },
+      propType: 'number',
+      setter: 'NumberSetter',
+      defaultValue: 0,
+    },
+    {
+      name: 'contentRender',
+      title: {
+        label: '内容区渲染',
+        tip: '内容区渲染函数',
+      },
+      propType: 'func',
+      isRequired: true,
+    },
+    {
+      name: 'summaryRender',
+      title: {
+        label: '信息总结区渲染',
+        tip: '信息总结区渲染函数',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'actions',
+      title: { label: '操作按钮配置', tip: '操作按钮配置数组' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'key',
+                    title: { label: '唯一标识', tip: '按钮唯一标识' },
+                    setter: 'StringSetter',
+                    isRequired: true,
+                  },
+                  {
+                    name: 'label',
+                    title: { label: '按钮文本', tip: '按钮显示文本' },
+                    setter: 'PisellI18nSetter',
+                    isRequired: true,
+                  },
+                  {
+                    name: 'type',
+                    title: { label: '按钮类型', tip: '按钮类型' },
+                    setter: {
+                      componentName: 'RadioGroupSetter',
+                      props: {
+                        options: [
+                          { title: '主要', value: 'primary' },
+                          { title: '默认', value: 'default' },
+                          { title: '虚线', value: 'dashed' },
+                          { title: '链接', value: 'link' },
+                          { title: '文本', value: 'text' },
+                        ],
+                      },
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['primary', 'default', 'dashed', 'link', 'text'],
+                    },
+                    defaultValue: 'default',
+                  },
+                  {
+                    name: 'disabled',
+                    title: { label: '是否禁用', tip: '是否禁用按钮' },
+                    setter: 'BoolSetter',
+                    propType: 'bool',
+                    defaultValue: false,
+                  },
+                  {
+                    name: 'hidden',
+                    title: { label: '是否隐藏', tip: '是否隐藏按钮' },
+                    setter: 'BoolSetter',
+                    propType: 'bool',
+                    defaultValue: false,
+                  },
+                  {
+                    name: 'order',
+                    title: { label: '排序权重', tip: '排序权重（越小越靠前）' },
+                    setter: 'NumberSetter',
+                    propType: 'number',
+                    defaultValue: 0,
+                  },
+                ],
+              },
+            },
+            initialValue: () => ({
+              key: `action_${Date.now()}`,
+              label: '按钮',
+              type: 'default',
+              disabled: false,
+              hidden: false,
+              order: 0,
+            }),
+          },
+        },
+      },
+      propType: 'array',
+    },
+  ],
+  configure: {
+    props: [
+      {
+        title: '基础配置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'steps',
+            title: { label: '步骤配置', tip: '步骤配置数组' },
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: 'title',
+                          title: { label: '标题', tip: '步骤标题' },
+                          setter: 'PisellI18nSetter',
+                          isRequired: true,
+                        },
+                        {
+                          name: 'subTitle',
+                          title: { label: '副标题', tip: '步骤副标题' },
+                          setter: 'PisellI18nSetter',
+                        },
+                        {
+                          name: 'description',
+                          title: { label: '描述', tip: '步骤详细描述' },
+                          setter: 'PisellI18nSetter',
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            },
+            isRequired: true,
+          },
+          {
+            name: 'current',
+            title: { label: '当前步骤', tip: '当前步骤索引（从 0 开始）' },
+            setter: 'NumberSetter',
+          },
+          {
+            name: 'actions',
+            title: { label: '操作按钮', tip: '操作按钮配置' },
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: 'key',
+                          title: { label: '标识', tip: '唯一标识' },
+                          setter: 'StringSetter',
+                        },
+                        {
+                          name: 'label',
+                          title: { label: '文本', tip: '按钮文本' },
+                          setter: 'PisellI18nSetter',
+                        },
+                        {
+                          name: 'type',
+                          title: { label: '类型', tip: '按钮类型' },
+                          setter: {
+                            componentName: 'SelectSetter',
+                            props: {
+                              options: [
+                                { title: '主要', value: 'primary' },
+                                { title: '默认', value: 'default' },
+                                { title: '虚线', value: 'dashed' },
+                                { title: '链接', value: 'link' },
+                                { title: '文本', value: 'text' },
+                              ],
+                            },
+                          },
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: '布局配置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'layout',
+            title: { label: '整体布局', tip: '整体布局方向' },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '垂直', value: 'vertical' },
+                  { title: '水平', value: 'horizontal' },
+                ],
+              },
+            },
+            defaultValue: 'vertical',
+          },
+          {
+            name: 'bodyLayout',
+            title: { label: '主体布局', tip: '主体区域布局方向' },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '水平', value: 'horizontal' },
+                  { title: '垂直', value: 'vertical' },
+                ],
+              },
+            },
+            defaultValue: 'horizontal',
+          },
+          {
+            name: 'summaryWidth',
+            title: { label: '信息区宽度', tip: '信息总结区宽度（px）' },
+            setter: 'NumberSetter',
+            defaultValue: 405,
+          },
+        ],
+      },
+      {
+        title: '显示控制',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'showHeader',
+            title: { label: '显示头部', tip: '是否显示头部区域' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'showSummary',
+            title: { label: '显示信息区', tip: '是否显示信息总结区' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'showAction',
+            title: { label: '显示操作区', tip: '是否显示操作区' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'showPrevButton',
+            title: { label: '显示上一步按钮', tip: '是否显示上一步按钮' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'showCloseButton',
+            title: { label: '显示关闭按钮', tip: '是否显示关闭按钮' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+        ],
+      },
+      {
+        title: '交互配置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'summaryCollapsible',
+            title: { label: '信息区可折叠', tip: '信息总结区是否可折叠' },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'validateOnStepChange',
+            title: { label: '步骤切换验证', tip: '步骤切换前是否自动验证' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'confirmOnDataChange',
+            title: { label: '数据变更确认', tip: '数据改变影响当前步骤时是否弹窗确认' },
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+        ],
+      },
+      {
+        title: '定位配置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'headerFixed',
+            title: { label: '头部固定', tip: '头部区域是否固定定位' },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '不固定', value: false },
+                  { title: '固定', value: true },
+                  { title: '滚动固定', value: 'scroll' },
+                ],
+              },
+            },
+            defaultValue: false,
+          },
+          {
+            name: 'actionMode',
+            title: { label: '操作区模式', tip: '操作区定位模式' },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '悬浮', value: 'float' },
+                  { title: '固定', value: 'fixed' },
+                  { title: '内嵌', value: 'embedded' },
+                ],
+              },
+            },
+            defaultValue: 'float',
+          },
+        ],
+      },
+      {
+        title: '状态配置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'loading',
+            title: { label: '加载状态', tip: '是否显示加载状态' },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'disabled',
+            title: { label: '禁用状态', tip: '是否禁用所有操作' },
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: '样式配置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'className',
+            title: { label: '自定义类名', tip: '自定义 CSS 类名' },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'headerClassName',
+            title: { label: '头部类名', tip: '头部区域自定义类名' },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'contentClassName',
+            title: { label: '内容区类名', tip: '内容区自定义类名' },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'summaryClassName',
+            title: { label: '信息区类名', tip: '信息总结区自定义类名' },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'actionClassName',
+            title: { label: '操作区类名', tip: '操作区自定义类名' },
+            setter: 'StringSetter',
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onStepChange',
+          template:
+            "onStepChange(current,${extParams}){\n// 步骤改变时的回调\nconsole.log('onStepChange', current);}",
+        },
+        {
+          name: 'onClose',
+          template: "onClose(${extParams}){\n// 点击关闭按钮的回调\nconsole.log('onClose');}",
+        },
+        {
+          name: 'onPrev',
+          template: "onPrev(${extParams}){\n// 点击上一步按钮的回调\nconsole.log('onPrev');}",
+        },
+        {
+          name: 'onValidate',
+          template:
+            "onValidate(current,${extParams}){\n// 步骤验证函数\nconsole.log('onValidate', current);\nreturn true;}",
+        },
+      ],
+    },
+  },
+};
+

package/lowcode/pisell-procedure/snippets.ts

@@ -0,0 +1,230 @@
+import type { ISnippet } from '@alilc/lowcode-types';
+
+/**
+ * PisellProcedure 组件代码片段
+ * 用于低代码编辑器中快速插入组件
+ */
+const snippets: ISnippet[] = [
+  {
+    title: '基础流程容器',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellProcedure',
+      props: {
+        current: 0,
+        steps: [
+          {
+            title: '选择服务',
+            description: '选择您需要的服务',
+          },
+          {
+            title: '填写信息',
+            description: '填写必要的信息',
+          },
+          {
+            title: '确认提交',
+            description: '确认信息并提交',
+          },
+        ],
+        contentRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `步骤 ${current + 1} 的内容`; }',
+        },
+        summaryRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `步骤 ${current + 1} 的总结`; }',
+        },
+        actions: [
+          {
+            key: 'cancel',
+            label: '取消',
+            type: 'default',
+          },
+          {
+            key: 'next',
+            label: '下一步',
+            type: 'primary',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '电商结账流程',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellProcedure',
+      props: {
+        current: 0,
+        steps: [
+          {
+            title: '地址确认',
+            description: '确认收货地址',
+          },
+          {
+            title: '支付方式',
+            description: '选择支付方式',
+          },
+          {
+            title: '订单预览',
+            description: '确认订单信息',
+          },
+        ],
+        summaryWidth: 405,
+        contentRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `步骤 ${current + 1} 的内容`; }',
+        },
+        summaryRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `订单摘要`; }',
+        },
+        actions: [
+          {
+            key: 'prev',
+            label: '上一步',
+            type: 'default',
+            order: 0,
+          },
+          {
+            key: 'next',
+            label: '下一步',
+            type: 'primary',
+            order: 1,
+          },
+          {
+            key: 'submit',
+            label: '提交订单',
+            type: 'primary',
+            order: 2,
+            hidden: true,
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '隐藏信息总结区',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellProcedure',
+      props: {
+        current: 0,
+        showSummary: false,
+        steps: [
+          {
+            title: '第一步',
+            description: '第一步描述',
+          },
+          {
+            title: '第二步',
+            description: '第二步描述',
+          },
+          {
+            title: '第三步',
+            description: '第三步描述',
+          },
+        ],
+        contentRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `步骤 ${current + 1} 的内容`; }',
+        },
+        actions: [
+          {
+            key: 'next',
+            label: '下一步',
+            type: 'primary',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '垂直布局流程',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellProcedure',
+      props: {
+        current: 0,
+        bodyLayout: 'vertical',
+        steps: [
+          {
+            title: '基础信息',
+          },
+          {
+            title: '附加设置',
+          },
+          {
+            title: '预览确认',
+          },
+        ],
+        contentRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `步骤 ${current + 1} 的内容`; }',
+        },
+        summaryRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `信息总结`; }',
+        },
+        actions: [
+          {
+            key: 'save',
+            label: '保存草稿',
+            type: 'default',
+          },
+          {
+            key: 'submit',
+            label: '提交',
+            type: 'primary',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '固定头部和操作区',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellProcedure',
+      props: {
+        current: 0,
+        headerFixed: 'scroll',
+        actionMode: 'float',
+        steps: [
+          {
+            title: '步骤一',
+          },
+          {
+            title: '步骤二',
+          },
+          {
+            title: '步骤三',
+          },
+        ],
+        contentRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `步骤 ${current + 1} 的内容`; }',
+        },
+        summaryRender: {
+          type: 'JSFunction',
+          value: '(current) => { return `实时信息`; }',
+        },
+        actions: [
+          {
+            key: 'cancel',
+            label: '取消',
+            type: 'default',
+          },
+          {
+            key: 'next',
+            label: '下一步',
+            type: 'primary',
+          },
+        ],
+      },
+    },
+  },
+];
+
+export default snippets;
+