@pisell/materials 6.7.4 → 6.8.2

package/lowcode/pisell-procedure/meta.ts

@@ -0,0 +1,688 @@
+import snippets from './snippets';
+
+const PisellProcedureMeta = {
+  componentName: 'PisellProcedure',
+  title: '流程容器',
+  category: '容器',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellProcedure',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      // ========== 通用配置 ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'General',
+            'zh-CN': '通用配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'mode',
+            title: {
+              label: '使用模式',
+              tip: 'mode | 组件使用模式：page（页面模式）或 modal（弹窗模式）。弹窗模式下不应用移动端模式、不隐藏信息区、不强制底部悬浮、不显示移动端总结按钮',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['page', 'modal'],
+            },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '页面模式', value: 'page' },
+                  { title: '弹窗模式', value: 'modal' },
+                ],
+              },
+            },
+            defaultValue: 'page',
+          },
+          {
+            name: 'showHeader',
+            title: {
+              label: '显示头部',
+              tip: 'showHeader | 是否显示头部区域',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'showSidebar',
+            title: {
+              label: '显示信息区',
+              tip: 'showSidebar | 是否显示信息区（侧边栏）',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'showFooter',
+            title: {
+              label: '显示底部',
+              tip: 'showFooter | 是否显示底部区域',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+        ],
+      },
+      // ========== 步骤控制配置 ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Step Control',
+            'zh-CN': '步骤控制',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'defaultCurrent',
+            title: {
+              label: '初始步骤',
+              tip: 'defaultCurrent | 初始步骤索引，从 0 开始',
+            },
+            propType: 'number',
+            setter: 'NumberSetter',
+            defaultValue: 0,
+          },
+        ],
+      },
+      // ========== 头部区域配置 (8.2) ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Header Config',
+            'zh-CN': '头部区域配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'headerProps.className',
+            title: {
+              label: '头部类名',
+              tip: '自定义头部区域类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'headerProps.left',
+            title: {
+              label: '左侧插槽',
+              tip: '头部左侧区域，可放置返回按钮等',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'headerProps.right',
+            title: {
+              label: '右侧插槽',
+              tip: '头部右侧区域，可放置关闭按钮等',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'headerProps.slotOrder',
+            title: {
+              label: '插槽顺序',
+              tip: 'default: 默认顺序（left 在左，right 在右）；reverse: 反转顺序（left 在右，right 在左，关闭按钮可在左侧）',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['default', 'reverse'],
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '默认顺序', value: 'default' },
+                  { title: '反转顺序', value: 'reverse' },
+                ],
+              },
+            },
+            defaultValue: 'default',
+          },
+          {
+            name: 'headerProps.showSteps',
+            title: {
+              label: '显示步骤条',
+              tip: '是否显示步骤条，设置为 false 可隐藏步骤条',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'headerProps.showBackOnFirstStep',
+            title: {
+              label: '首步显示返回',
+              tip: '第一步时是否显示返回按钮，默认不显示',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'headerProps.backConfirmModal.enabled',
+            title: {
+              label: '启用返回确认',
+              tip: '返回上一步时是否需要弹窗确认',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'headerProps.backConfirmModal.title',
+            title: {
+              label: '确认弹窗标题',
+              tip: '返回确认弹窗的标题',
+            },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'headerProps.backConfirmModal.describe',
+            title: {
+              label: '确认弹窗内容',
+              tip: '返回确认弹窗的内容',
+            },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'headerProps.backConfirmModal.footer',
+            title: {
+              label: '返回弹窗按钮组',
+              tip: '弹窗底部按钮配置数组',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'headerProps.closeConfirmModal.enabled',
+            title: {
+              label: '启用关闭确认',
+              tip: '点击右侧关闭按钮时是否需要弹窗确认',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'headerProps.closeConfirmModal.title',
+            title: {
+              label: '关闭弹窗标题',
+              tip: '关闭确认弹窗的标题',
+            },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'headerProps.closeConfirmModal.describe',
+            title: {
+              label: '关闭弹窗内容',
+              tip: '关闭确认弹窗的内容',
+            },
+            setter: 'StringSetter',
+          },
+          {
+            name: 'headerProps.closeConfirmModal.footer',
+            title: {
+              label: '关闭弹窗按钮组',
+              tip: '弹窗底部按钮配置数组',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+        ],
+      },
+      // ========== 步骤条配置 (8.5) ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Steps Config',
+            'zh-CN': '步骤条配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'headerProps.stepsProps.current',
+            title: {
+              label: '当前步骤',
+              tip: '当前激活的步骤索引',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 0,
+          },
+          {
+            name: 'headerProps.stepsProps.items',
+            title: {
+              label: '步骤数据',
+              tip: '步骤条的数据配置',
+            },
+            propType: 'array',
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    items: [
+                      {
+                        name: 'title',
+                        title: '标题',
+                        propType: 'string',
+                        setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+                      },
+                      {
+                        name: 'description',
+                        title: '描述',
+                        propType: 'string',
+                        setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      // ========== 主体区域配置 (8.3) ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Body Config',
+            'zh-CN': '主体区域配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'bodyProps.direction',
+            title: {
+              label: '排列方向',
+              tip: '内容区和信息区的排列方向。horizontal: 横向排列（左右布局），vertical: 纵向排列（上下布局）',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['horizontal', 'vertical'],
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '横向排列', value: 'horizontal' },
+                  { title: '纵向排列', value: 'vertical' },
+                ],
+              },
+            },
+            defaultValue: 'horizontal',
+          },
+          {
+            name: 'bodyProps.contentOrder',
+            title: {
+              label: '内容顺序',
+              tip: 'content-first: 内容区在前（默认：横向时内容区在左，纵向时内容区在上）；sidebar-first: 信息区在前（横向时信息区在左，纵向时信息区在上）',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['content-first', 'sidebar-first'],
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '内容区在前', value: 'content-first' },
+                  { title: '信息区在前', value: 'sidebar-first' },
+                ],
+              },
+            },
+            defaultValue: 'content-first',
+          },
+          {
+            name: 'bodyProps.layoutMode',
+            title: {
+              label: '布局模式',
+              tip: 'fixed: 固定宽度（信息区宽度随屏幕断点变化）；ratio: 比例布局（按设定比例分配宽度）',
+            },
+            propType: 'string',
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  { title: '固定宽度', value: 'fixed' },
+                  { title: '比例布局', value: 'ratio' },
+                ],
+              },
+            },
+            defaultValue: 'fixed',
+          },
+          {
+            name: 'bodyProps.layoutRatio',
+            title: {
+              label: '布局比例',
+              tip: '内容区与信息区的宽度比例，仅在比例布局模式下生效',
+            },
+            propType: 'string',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '7:3', value: '7:3' },
+                  { title: '6:4', value: '6:4' },
+                ],
+              },
+            },
+            defaultValue: '7:3',
+            condition: {
+              type: 'JSFunction',
+              value: 'target => target.getProps().getPropValue("bodyProps.layoutMode") === "ratio"',
+            },
+          },
+          {
+            name: 'bodyProps.className',
+            title: {
+              label: '主体类名',
+              tip: '自定义主体区域类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+        ],
+      },
+      // ========== 内容区配置 (8.3.1) ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Content Config',
+            'zh-CN': '内容区配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'bodyProps.contentClassName',
+            title: {
+              label: '内容区类名',
+              tip: '自定义内容区类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'bodyProps.contentSlot',
+            title: {
+              label: '内容区插槽',
+              tip: '主体内容区域',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+        ],
+      },
+      // ========== 信息区配置 (8.3.2) ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Sidebar Config',
+            'zh-CN': '信息区配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'bodyProps.sidebarClassName',
+            title: {
+              label: '信息区类名',
+              tip: '自定义信息区类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'bodyProps.sidebarSlot',
+            title: {
+              label: '信息区插槽',
+              tip: '右侧信息区域',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'bodyProps.sidebarContainerSelector',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Sidebar Container Selector',
+                'zh-CN': '信息区容器选择器',
+              },
+              tip: '用于计算信息区高度的容器元素选择器（类名或 ID），如 ".modal-content" 或 "#dialog-container"。如果不提供，则使用 window.innerHeight 作为基准。',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+        ],
+      },
+      // ========== 底部操作区配置 (8.4) ==========
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Footer Config',
+            'zh-CN': '底部操作区配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'footerProps.position',
+            title: {
+              label: '位置模式',
+              tip: '底部操作区的展示位置',
+            },
+            propType: 'string',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { title: '固定在底部', value: 'fixed-bottom' },
+                  { title: '内嵌在内容区底部', value: 'fixed-content-bottom' },
+                  { title: '内嵌在信息区底部', value: 'fixed-sidebar-bottom' },
+                  { title: '悬浮在整体区域', value: 'float-all' },
+                  { title: '悬浮在内容区', value: 'float-content' },
+                  { title: '悬浮在信息区', value: 'float-sidebar' },
+                ],
+              },
+            },
+            defaultValue: 'float-sidebar',
+          },
+          {
+            name: 'footerProps.className',
+            title: {
+              label: '底部类名',
+              tip: '自定义底部区域类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'footerProps.enableOverflow',
+            title: {
+              label: '启用溢出收纳',
+              tip: '当宽度不足时，将次序列的按钮收纳到 More 菜单中',
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+          },
+          {
+            name: 'footerProps.moreText',
+            title: {
+              label: 'More按钮文案',
+              tip: '溢出收纳时 More 按钮的文案',
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter'],
+            defaultValue: 'More',
+          },
+          {
+            name: 'footerProps.summaryButton',
+            title: {
+              label: '移动端总结按钮',
+              tip: '移动端显示的总结按钮插槽',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'footerProps.leftSlot',
+            title: {
+              label: '左侧插槽',
+              tip: '底部左侧区域，可放置自定义内容（如总价信息、提示文案等）',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+          {
+            name: 'footerProps.actions',
+            title: {
+              label: '操作按钮组',
+              tip: '底部右侧操作按钮区域（如上一步、下一步、提交等）。最后一个按钮默认触发下一步。可通过 data-action 属性自定义：data-action="prev"(上一步)、data-action="next"(下一步)',
+            },
+            propType: 'node',
+            setter: {
+              componentName: 'SlotSetter',
+              initialValue: {
+                type: 'JSSlot',
+                value: [],
+              },
+            },
+          },
+        ],
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onStepsChange',
+          description: '步骤变化回调，返回步骤变化结果（包含 success、currentStep、currentItem）',
+        },
+        {
+          name: 'onPrev',
+          description: '上一步事件回调，在步骤更新之前触发，返回 false 可阻止步骤更新',
+        },
+        {
+          name: 'onNext',
+          description: '下一步事件回调，在步骤更新之前触发，返回 false 可阻止步骤更新',
+        },
+        {
+          name: 'onClose',
+          description: '关闭按钮点击回调',
+        },
+        {
+          name: 'onFirstStepBack',
+          description: '首步返回按钮点击回调，当在第一步且显示返回按钮时触发，如果不传递默认跳转到首页（/）',
+        },
+        {
+          name: 'onBackConfirm',
+          description: '返回确认弹窗按钮回调，当点击返回确认弹窗的按钮时触发',
+        },
+        {
+          name: 'onCloseConfirm',
+          description: '关闭确认弹窗按钮回调，当点击关闭确认弹窗的按钮时触发',
+        },
+      ],
+    },
+  },
+  snippets,
+};
+
+export default PisellProcedureMeta;
+