@pisell/materials 1.0.966 → 1.0.968

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;
+

package/lowcode/pisell-steps/meta.ts

@@ -0,0 +1,307 @@
+import snippets from './snippets';
+
+/**
+ * PisellSteps 组件 Lowcode Meta 配置
+ * 用于阿里低代码引擎的物料描述
+ */
+export default {
+  snippets,
+  componentName: 'PisellSteps',
+  title: 'Steps 步骤条',
+  category: '导航',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.0',
+    exportName: 'PisellSteps',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      name: 'items',
+      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',
+                  },
+                  {
+                    name: 'status',
+                    title: { label: '状态', tip: '步骤状态' },
+                    setter: {
+                      componentName: 'RadioGroupSetter',
+                      props: {
+                        options: [
+                          { title: '等待', value: 'wait' },
+                          { title: '进行中', value: 'process' },
+                          { title: '完成', value: 'finish' },
+                          { title: '错误', value: 'error' },
+                        ],
+                      },
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['wait', 'process', 'finish', 'error'],
+                    },
+                  },
+                  {
+                    name: 'icon',
+                    title: { label: '自定义图标', tip: '自定义步骤图标' },
+                    propType: 'node',
+                    setter: 'IconSetter',
+                  },
+                  {
+                    name: 'disabled',
+                    title: { label: '是否禁用', tip: '禁用该步骤' },
+                    setter: 'BoolSetter',
+                    propType: 'bool',
+                    defaultValue: false,
+                  },
+                ],
+              },
+            },
+            initialValue: () => ({
+              title: '步骤',
+              disabled: false,
+            }),
+          },
+        },
+      },
+      propType: 'array',
+    },
+    {
+      name: 'current',
+      title: {
+        label: '当前步骤',
+        tip: '当前步骤索引（从 0 开始）',
+      },
+      propType: 'number',
+      setter: 'NumberSetter',
+      defaultValue: 0,
+    },
+    {
+      name: 'type',
+      title: {
+        label: '步骤条类型',
+        tip: '步骤条类型',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '默认', value: 'default' },
+            { title: '导航', value: 'navigation' },
+            { title: '行内', value: 'inline' },
+          ],
+        },
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['default', 'navigation', 'inline'],
+      },
+      defaultValue: 'default',
+    },
+    {
+      name: 'size',
+      title: {
+        label: '尺寸',
+        tip: '步骤条尺寸',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '默认', value: 'default' },
+            { title: '小', value: 'small' },
+          ],
+        },
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['default', 'small'],
+      },
+      defaultValue: 'default',
+    },
+    {
+      name: 'direction',
+      title: {
+        label: '步骤条方向',
+        tip: '步骤条方向：横向或竖向',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '横向', value: 'horizontal' },
+            { title: '竖向', value: 'vertical' },
+          ],
+        },
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['horizontal', 'vertical'],
+      },
+      defaultValue: 'horizontal',
+    },
+    {
+      name: 'status',
+      title: {
+        label: '当前步骤状态',
+        tip: '当前步骤的状态',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '等待', value: 'wait' },
+            { title: '进行中', value: 'process' },
+            { title: '完成', value: 'finish' },
+            { title: '错误', value: 'error' },
+          ],
+        },
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['wait', 'process', 'finish', 'error'],
+      },
+      defaultValue: 'process',
+    },
+    {
+      name: 'progressDot',
+      title: {
+        label: '圆点样式',
+        tip: '使用圆点样式的步骤条',
+      },
+      setter: 'BoolSetter',
+      propType: { type: 'oneOfType', value: ['bool', 'func'] },
+      defaultValue: false,
+    },
+    {
+      name: 'labelPlacement',
+      title: {
+        label: '标签放置位置',
+        tip: '标签放置位置',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '水平', value: 'horizontal' },
+            { title: '竖直', value: 'vertical' },
+          ],
+        },
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['horizontal', 'vertical'],
+      },
+      defaultValue: 'horizontal',
+    },
+    {
+      name: 'percent',
+      title: {
+        label: '进度百分比',
+        tip: '当前步骤的进度百分比（0-100）',
+      },
+      propType: 'number',
+      setter: {
+        componentName: 'NumberSetter',
+        props: {
+          min: 0,
+          max: 100,
+        },
+      },
+    },
+    {
+      name: 'responsive',
+      title: {
+        label: '响应式',
+        tip: '是否响应式适配',
+      },
+      setter: 'BoolSetter',
+      propType: 'bool',
+      defaultValue: true,
+    },
+    {
+      name: 'showConnector',
+      title: {
+        label: '显示连接器',
+        tip: '是否显示步骤间的连接线',
+      },
+      setter: 'BoolSetter',
+      propType: 'bool',
+      defaultValue: true,
+    },
+    {
+      name: 'iconPosition',
+      title: {
+        label: '图标位置',
+        tip: '图标位置（竖向布局时有效）',
+      },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            { title: '顶部', value: 'top' },
+            { title: '底部', value: 'bottom' },
+          ],
+        },
+      },
+      propType: {
+        type: 'oneOf',
+        value: ['top', 'bottom'],
+      },
+      defaultValue: 'top',
+      condition: {
+        type: 'JSFunction',
+        value: "target => target.getProps().getPropValue('direction') === 'vertical'",
+      },
+    },
+    {
+      name: 'className',
+      title: { label: '自定义类名', tip: '自定义 CSS 类名' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'onChange',
+      title: { label: '步骤改变回调', tip: '步骤改变时的回调函数' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(current,${extParams}){\n// 步骤改变时的回调\nconsole.log('onChange', current);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/pisell-steps/snippets.ts

@@ -0,0 +1,160 @@
+import type { ISnippet } from '@alilc/lowcode-types';
+
+/**
+ * PisellSteps 组件代码片段
+ * 用于低代码编辑器中快速插入组件
+ */
+const snippets: ISnippet[] = [
+  {
+    title: '基础步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是描述信息',
+          },
+          {
+            title: '待完成',
+            description: '这是描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '小尺寸步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        size: 'small',
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是描述信息',
+          },
+          {
+            title: '待完成',
+            description: '这是描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '圆点样式步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        progressDot: true,
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是描述信息',
+          },
+          {
+            title: '待完成',
+            description: '这是描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '竖向步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        direction: 'vertical',
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是描述信息',
+          },
+          {
+            title: '待完成',
+            description: '这是描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '导航样式步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        type: 'navigation',
+        current: 1,
+        items: [
+          {
+            title: '已完成',
+            description: '这是描述信息',
+          },
+          {
+            title: '进行中',
+            description: '这是描述信息',
+          },
+          {
+            title: '待完成',
+            description: '这是描述信息',
+          },
+        ],
+      },
+    },
+  },
+  {
+    title: '错误状态步骤条',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellSteps',
+      props: {
+        current: 1,
+        status: 'error',
+        items: [
+          {
+            title: '已完成',
+            description: '这是描述信息',
+          },
+          {
+            title: '出现错误',
+            description: '这是描述信息',
+          },
+          {
+            title: '待完成',
+            description: '这是描述信息',
+          },
+        ],
+      },
+    },
+  },
+];
+
+export default snippets;
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.966",
+  "version": "1.0.968",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -75,8 +75,8 @@
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
     "react-camera-pro": "1.4.0",
-    "@pisell/date-picker": "1.0.127",
     "@pisell/icon": "0.0.10",
+    "@pisell/date-picker": "1.0.127",
     "@pisell/utils": "1.0.55"
   },
   "peerDependencies": {

package/es/components/appVersionControl/index.d.ts

@@ -1,4 +0,0 @@
-import { AppVersionControlProps } from './types';
-import './index.less';
-declare const AppVersionControl: (props: AppVersionControlProps) => JSX.Element;
-export default AppVersionControl;