mall-components 1.0.0

package/src/meta/orderFormMeta.ts

@@ -0,0 +1,279 @@
+import { Icons } from './icons'
+
+const defaultInitialValues = {
+  id: 1,
+  orderSn: '202401010001',
+  memberUsername: 'user001',
+  totalAmount: 599.00,
+  payAmount: 569.00,
+  freightAmount: 0,
+  discountAmount: 30.00,
+  payType: 1,
+  sourceType: 0,
+  status: 1,
+  orderType: 0,
+  receiverName: '张三',
+  receiverPhone: '13800138000',
+  receiverProvince: '北京市',
+  receiverCity: '北京市',
+  receiverRegion: '朝阳区',
+  receiverDetailAddress: '某某街道某某小区1号楼',
+  note: '请尽快发货',
+}
+
+const orderFormMeta = {
+  componentName: 'OrderForm',
+  title: '订单表单',
+  docUrl: 'https://github.com/alibaba/lowcode-engine',
+  screenshot: '',
+  npm: {
+    package: 'mall-components',
+    version: '1.0.0',
+    exportName: 'OrderForm',
+    destructuring: true,
+  },
+  props: [
+    {
+      name: 'initialValues',
+      propType: 'string',
+      description: '表单初始值（JSON 格式）',
+      defaultValue: '{}',
+    },
+    {
+      name: 'mode',
+      propType: 'string',
+      description: '表单模式',
+      defaultValue: 'create',
+      setter: {
+        componentName: 'SelectSetter',
+        props: {
+          options: [
+            { label: '创建模式', value: 'create' },
+            { label: '编辑模式', value: 'edit' },
+            { label: '查看模式', value: 'view' },
+          ],
+        },
+      },
+    },
+    {
+      name: 'showBasicInfo',
+      propType: 'bool',
+      description: '是否显示基本信息',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'showReceiverInfo',
+      propType: 'bool',
+      description: '是否显示收货信息',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'showMoneyInfo',
+      propType: 'bool',
+      description: '是否显示费用信息',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'showOrderItems',
+      propType: 'bool',
+      description: '是否显示商品信息',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'showStatusInfo',
+      propType: 'bool',
+      description: '是否显示状态信息',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        { name: 'onSubmit', description: '提交' },
+        { name: 'onCancel', description: '取消' },
+      ],
+    },
+    props: [
+      {
+        type: 'group',
+        title: '表单配置',
+        display: 'accordion',
+        items: [
+          {
+            name: 'mode',
+            title: '表单模式',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { label: '创建模式', value: 'create' },
+                  { label: '编辑模式', value: 'edit' },
+                  { label: '查看模式', value: 'view' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'initialValues',
+            title: '表单初始值',
+            setter: {
+              componentName: 'TextAreaSetter',
+              props: {
+                rows: 10,
+                placeholder: '请输入 JSON 格式的表单初始值',
+              },
+            },
+            extraProps: {
+              display: 'block',
+            },
+          },
+        ],
+      },
+      {
+        type: 'group',
+        title: '标签页显示控制',
+        display: 'accordion',
+        items: [
+          { name: 'showBasicInfo', title: '显示基本信息', setter: 'BoolSetter' },
+          { name: 'showReceiverInfo', title: '显示收货信息', setter: 'BoolSetter' },
+          { name: 'showMoneyInfo', title: '显示费用信息', setter: 'BoolSetter' },
+          { name: 'showOrderItems', title: '显示商品信息', setter: 'BoolSetter' },
+          { name: 'showStatusInfo', title: '显示状态信息', setter: 'BoolSetter' },
+        ],
+      },
+    ],
+  },
+  icon: Icons.form,
+  category: '电商业务',
+  group: '订单管理',
+  snippets: [
+    {
+      title: '创建订单表单',
+      schema: {
+        componentName: 'OrderForm',
+        props: {
+          mode: 'create',
+          initialValues: '{}',
+          showBasicInfo: true,
+          showReceiverInfo: true,
+          showMoneyInfo: true,
+          showOrderItems: true,
+          showStatusInfo: true,
+        },
+      },
+    },
+    {
+      title: '编辑订单表单',
+      schema: {
+        componentName: 'OrderForm',
+        props: {
+          mode: 'edit',
+          initialValues: JSON.stringify(defaultInitialValues, null, 2),
+          showBasicInfo: true,
+          showReceiverInfo: true,
+          showMoneyInfo: true,
+          showOrderItems: true,
+          showStatusInfo: true,
+        },
+      },
+    },
+    {
+      title: '查看订单表单',
+      schema: {
+        componentName: 'OrderForm',
+        props: {
+          mode: 'view',
+          initialValues: JSON.stringify(
+            {
+              ...defaultInitialValues,
+              orderItemList: [
+                {
+                  id: 1,
+                  productName: '时尚运动鞋',
+                  productSn: 'PRODUCT001',
+                  productBrand: '时尚运动',
+                  productPrice: 299,
+                  productQuantity: 2,
+                  productPic: 'https://img.yzcdn.cn/vant/cat.jpeg',
+                },
+              ],
+            },
+            null,
+            2
+          ),
+          showBasicInfo: true,
+          showReceiverInfo: true,
+          showMoneyInfo: true,
+          showOrderItems: true,
+          showStatusInfo: true,
+        },
+      },
+    },
+    {
+      title: '只读订单表单',
+      schema: {
+        componentName: 'OrderForm',
+        props: {
+          mode: 'view',
+          initialValues: JSON.stringify(
+            {
+              ...defaultInitialValues,
+              status: 2,
+              deliveryTime: '2024-01-02 09:00:00',
+              orderItemList: [
+                {
+                  id: 1,
+                  productName: '时尚运动鞋',
+                  productSn: 'PRODUCT001',
+                  productBrand: '时尚运动',
+                  productPrice: 299,
+                  productQuantity: 2,
+                  productPic: 'https://img.yzcdn.cn/vant/cat.jpeg',
+                },
+                {
+                  id: 2,
+                  productName: '休闲T恤',
+                  productSn: 'PRODUCT002',
+                  productBrand: '休闲服饰',
+                  productPrice: 99,
+                  productQuantity: 1,
+                  productPic: 'https://img.yzcdn.cn/vant/cat.jpeg',
+                },
+              ],
+            },
+            null,
+            2
+          ),
+          showBasicInfo: true,
+          showReceiverInfo: true,
+          showMoneyInfo: true,
+          showOrderItems: true,
+          showStatusInfo: true,
+        },
+      },
+    },
+    {
+      title: '简洁订单表单',
+      schema: {
+        componentName: 'OrderForm',
+        props: {
+          mode: 'create',
+          initialValues: '{}',
+          showBasicInfo: true,
+          showReceiverInfo: true,
+          showMoneyInfo: false,
+          showOrderItems: false,
+          showStatusInfo: false,
+        },
+      },
+    },
+  ],
+}
+
+export default orderFormMeta

package/src/meta/orderListMeta.ts

@@ -0,0 +1,443 @@
+import { Icons } from './icons'
+
+const defaultMockData = {
+  code: 200,
+  message: 'success',
+  data: {
+    pageNum: 1,
+    pageSize: 10,
+    total: 50,
+    list: [
+      {
+        id: 1,
+        orderSn: '202401010001',
+        memberUsername: 'user001',
+        totalAmount: 599.00,
+        payAmount: 569.00,
+        freightAmount: 0,
+        discountAmount: 30.00,
+        payType: 1,
+        sourceType: 0,
+        status: 1,
+        orderType: 0,
+        receiverName: '张三',
+        receiverPhone: '13800138000',
+        receiverProvince: '北京市',
+        receiverCity: '北京市',
+        receiverRegion: '朝阳区',
+        receiverDetailAddress: '某某街道某某小区1号楼',
+        createTime: '2024-01-01 10:00:00',
+        paymentTime: '2024-01-01 10:05:00',
+        deliveryTime: '',
+        receiveTime: '',
+        commentTime: '',
+        promotionInfo: '满减优惠',
+      },
+      {
+        id: 2,
+        orderSn: '202401010002',
+        memberUsername: 'user002',
+        totalAmount: 1299.00,
+        payAmount: 1299.00,
+        freightAmount: 0,
+        discountAmount: 0,
+        payType: 2,
+        sourceType: 1,
+        status: 2,
+        orderType: 0,
+        receiverName: '李四',
+        receiverPhone: '13900139000',
+        receiverProvince: '上海市',
+        receiverCity: '上海市',
+        receiverRegion: '浦东新区',
+        receiverDetailAddress: '某某路某某号',
+        createTime: '2024-01-01 11:00:00',
+        paymentTime: '2024-01-01 11:10:00',
+        deliveryTime: '2024-01-02 09:00:00',
+        receiveTime: '',
+        commentTime: '',
+        promotionInfo: '',
+      },
+      {
+        id: 3,
+        orderSn: '202401010003',
+        memberUsername: 'user003',
+        totalAmount: 299.00,
+        payAmount: 299.00,
+        freightAmount: 10.00,
+        discountAmount: 0,
+        payType: 1,
+        sourceType: 0,
+        status: 3,
+        orderType: 0,
+        receiverName: '王五',
+        receiverPhone: '13700137000',
+        receiverProvince: '广东省',
+        receiverCity: '深圳市',
+        receiverRegion: '南山区',
+        receiverDetailAddress: '某某大厦A座',
+        createTime: '2024-01-01 12:00:00',
+        paymentTime: '2024-01-01 12:05:00',
+        deliveryTime: '2024-01-02 10:00:00',
+        receiveTime: '2024-01-05 15:00:00',
+        commentTime: '',
+        promotionInfo: '',
+      },
+      {
+        id: 4,
+        orderSn: '202401010004',
+        memberUsername: 'user004',
+        totalAmount: 899.00,
+        payAmount: 0,
+        freightAmount: 0,
+        discountAmount: 0,
+        payType: 0,
+        sourceType: 1,
+        status: 0,
+        orderType: 1,
+        receiverName: '赵六',
+        receiverPhone: '13600136000',
+        receiverProvince: '浙江省',
+        receiverCity: '杭州市',
+        receiverRegion: '西湖区',
+        receiverDetailAddress: '某某花园小区',
+        createTime: '2024-01-01 13:00:00',
+        paymentTime: '',
+        deliveryTime: '',
+        receiveTime: '',
+        commentTime: '',
+        promotionInfo: '秒杀活动',
+      },
+      {
+        id: 5,
+        orderSn: '202401010005',
+        memberUsername: 'user005',
+        totalAmount: 4599.00,
+        payAmount: 4599.00,
+        freightAmount: 0,
+        discountAmount: 0,
+        payType: 2,
+        sourceType: 0,
+        status: 4,
+        orderType: 0,
+        receiverName: '孙七',
+        receiverPhone: '13500135000',
+        receiverProvince: '江苏省',
+        receiverCity: '南京市',
+        receiverRegion: '鼓楼区',
+        receiverDetailAddress: '某某广场B座',
+        createTime: '2024-01-01 14:00:00',
+        paymentTime: '2024-01-01 14:10:00',
+        deliveryTime: '',
+        receiveTime: '',
+        commentTime: '',
+        promotionInfo: '',
+      },
+    ],
+  },
+}
+
+const orderListMeta = {
+  componentName: 'OrderList',
+  title: '订单列表',
+  docUrl: 'https://github.com/alibaba/lowcode-engine',
+  screenshot: '',
+  npm: {
+    package: 'mall-components',
+    version: '1.0.0',
+    exportName: 'OrderList',
+    destructuring: true,
+  },
+  props: [
+    {
+      name: 'dataSourceType',
+      propType: 'string',
+      description: '数据源类型',
+      defaultValue: 'mock',
+    },
+    {
+      name: 'api',
+      propType: 'string',
+      description: 'API 地址',
+    },
+    {
+      name: 'method',
+      propType: 'string',
+      description: '请求方法',
+      defaultValue: 'GET',
+    },
+    {
+      name: 'mockData',
+      propType: 'string',
+      description: 'Mock 数据',
+      defaultValue: JSON.stringify(defaultMockData),
+    },
+    {
+      name: 'variableName',
+      propType: 'string',
+      description: '变量名称',
+    },
+    {
+      name: 'showFilter',
+      propType: 'bool',
+      description: '是否显示筛选搜索区域',
+      defaultValue: true,
+    },
+    {
+      name: 'showStatusFilter',
+      propType: 'bool',
+      description: '是否显示状态筛选',
+      defaultValue: true,
+    },
+    {
+      name: 'showSearch',
+      propType: 'bool',
+      description: '是否显示搜索框',
+      defaultValue: true,
+    },
+    {
+      name: 'showDatePicker',
+      propType: 'bool',
+      description: '是否显示日期选择器',
+      defaultValue: true,
+    },
+    {
+      name: 'showActions',
+      propType: 'bool',
+      description: '是否显示操作按钮',
+      defaultValue: true,
+    },
+    {
+      name: 'showBatchOperations',
+      propType: 'bool',
+      description: '是否显示批量操作',
+      defaultValue: true,
+    },
+    {
+      name: 'showExport',
+      propType: 'bool',
+      description: '是否显示导出按钮',
+      defaultValue: true,
+    },
+    {
+      name: 'showPagination',
+      propType: 'bool',
+      description: '是否显示分页区域',
+      defaultValue: true,
+    },
+    {
+      name: 'defaultPageSize',
+      propType: 'number',
+      description: '默认每页条数',
+      defaultValue: 10,
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        { name: 'onRowClick', description: '行点击' },
+        { name: 'onSearch', description: '搜索' },
+        { name: 'onPageChange', description: '分页变化' },
+        { name: 'onActionClick', description: '操作按钮点击' },
+        { name: 'onBatchOperation', description: '批量操作' },
+      ],
+    },
+    props: [
+      {
+        type: 'group',
+        title: '数据源配置',
+        display: 'accordion',
+        items: [
+          {
+            name: 'dataSourceType',
+            title: '数据源类型',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  { label: 'Mock 数据', value: 'mock' },
+                  { label: '数据源绑定', value: 'variable' },
+                ],
+              },
+            },
+            extraProps: {
+              display: 'block',
+            },
+          },
+          {
+            name: 'mockData',
+            title: 'Mock 数据',
+            setter: {
+              componentName: 'TextAreaSetter',
+              props: {
+                rows: 10,
+                placeholder: '请输入 JSON 格式的 Mock 数据',
+              },
+            },
+            extraProps: {
+              display: 'block',
+            },
+            condition: (target: any) => {
+              return target.getProps().getPropValue('dataSourceType') === 'mock'
+            },
+          },
+          {
+            name: 'dataSource',
+            title: '绑定数据源',
+            setter: {
+              componentName: 'MixedSetter',
+              props: {
+                setters: [
+                  'JsonSetter',
+                  'VariableSetter',
+                ],
+              },
+            },
+            extraProps: {
+              display: 'block',
+            },
+            condition: (target: any) => {
+              return target.getProps().getPropValue('dataSourceType') === 'variable'
+            },
+          },
+        ],
+      },
+      {
+        type: 'group',
+        title: '区域显示控制',
+        display: 'accordion',
+        items: [
+          { name: 'showFilter', title: '显示筛选区域', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showStatusFilter', title: '显示状态筛选', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showSearch', title: '显示搜索框', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showDatePicker', title: '显示日期选择', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showActions', title: '显示操作按钮', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showBatchOperations', title: '显示批量操作', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showExport', title: '显示导出按钮', setter: 'BoolSetter', extraProps: { display: 'block' } },
+          { name: 'showPagination', title: '显示分页', setter: 'BoolSetter', extraProps: { display: 'block' } },
+        ],
+      },
+      {
+        type: 'group',
+        title: '分页配置',
+        display: 'accordion',
+        items: [
+          {
+            name: 'defaultPageSize',
+            title: '默认每页条数',
+            setter: {
+              componentName: 'NumberSetter',
+              props: {
+                min: 1,
+                max: 100,
+              },
+            },
+            extraProps: {
+              display: 'block',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  icon: Icons.file,
+  category: '电商业务',
+  group: '订单管理',
+  snippets: [
+    {
+      title: '完整订单列表',
+      schema: {
+        componentName: 'OrderList',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultMockData),
+          showFilter: true,
+          showStatusFilter: true,
+          showSearch: true,
+          showDatePicker: true,
+          showActions: true,
+          showBatchOperations: true,
+          showExport: true,
+          showPagination: true,
+          defaultPageSize: 10,
+        },
+      },
+    },
+    {
+      title: '简洁订单列表',
+      schema: {
+        componentName: 'OrderList',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultMockData),
+          showFilter: false,
+          showActions: false,
+          showBatchOperations: false,
+          showExport: false,
+          showPagination: true,
+          defaultPageSize: 10,
+        },
+      },
+    },
+    {
+      title: '只读订单列表',
+      schema: {
+        componentName: 'OrderList',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultMockData),
+          showFilter: true,
+          showStatusFilter: true,
+          showSearch: true,
+          showDatePicker: true,
+          showActions: false,
+          showBatchOperations: false,
+          showExport: false,
+          showPagination: true,
+          defaultPageSize: 10,
+        },
+      },
+    },
+    {
+      title: '纯搜索订单列表',
+      schema: {
+        componentName: 'OrderList',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultMockData),
+          showFilter: true,
+          showStatusFilter: false,
+          showSearch: true,
+          showDatePicker: false,
+          showActions: false,
+          showBatchOperations: false,
+          showExport: false,
+          showPagination: true,
+          defaultPageSize: 10,
+        },
+      },
+    },
+    {
+      title: '待发货订单列表',
+      schema: {
+        componentName: 'OrderList',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultMockData),
+          showFilter: true,
+          showStatusFilter: true,
+          showSearch: true,
+          showDatePicker: true,
+          showActions: true,
+          showBatchOperations: true,
+          showExport: false,
+          showPagination: true,
+          defaultPageSize: 10,
+        },
+      },
+    },
+  ],
+}
+
+export default orderListMeta