mall-components 1.0.0

package/src/meta/promotionCardMeta.ts

@@ -0,0 +1,276 @@
+import type { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'
+import { Icons } from './icons'
+
+const defaultPromotionMockData = {
+  code: 200,
+  message: 'success',
+  data: {
+    pageNum: 1,
+    pageSize: 10,
+    total: 4,
+    list: [
+      {
+        id: 1,
+        title: '双十一大促',
+        startDate: '2024-11-01',
+        endDate: '2024-11-11',
+        status: 1,
+        createTime: '2024-10-15 10:00:00',
+      },
+      {
+        id: 2,
+        title: '618年中大促',
+        startDate: '2024-06-01',
+        endDate: '2024-06-18',
+        status: 1,
+        createTime: '2024-05-20 09:00:00',
+      },
+      {
+        id: 3,
+        title: '新春季促销',
+        startDate: '2024-01-20',
+        endDate: '2024-02-10',
+        status: 0,
+        createTime: '2024-01-10 08:00:00',
+      },
+      {
+        id: 4,
+        title: '会员日特惠',
+        startDate: '2024-03-15',
+        endDate: '2024-03-17',
+        status: 1,
+        createTime: '2024-03-01 10:00:00',
+      },
+    ],
+  },
+}
+
+const promotionCardMeta = {
+  componentName: 'PromotionCard',
+  title: '促销活动管理',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: 'mall-components',
+    version: '1.0.0',
+    exportName: 'PromotionCard',
+    main: 'lib/index.js',
+    destructuring: true,
+    subName: '',
+  },
+  category: '电商业务',
+  group: '营销管理',
+  icon: Icons.star,
+  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(defaultPromotionMockData),
+    },
+    {
+      name: 'variableName',
+      propType: 'string',
+      description: '变量名称',
+    },
+    {
+      name: 'showCreateButton',
+      propType: 'bool',
+      description: '是否显示创建按钮',
+      defaultValue: true,
+    },
+    {
+      name: 'showFilter',
+      propType: 'bool',
+      description: '是否显示筛选区域',
+      defaultValue: true,
+    },
+    {
+      name: 'showStatistics',
+      propType: 'bool',
+      description: '是否显示统计信息',
+      defaultValue: true,
+    },
+    {
+      name: 'showTimeline',
+      propType: 'bool',
+      description: '是否显示时间线',
+      defaultValue: true,
+    },
+    {
+      name: 'style',
+      propType: 'object',
+      description: '自定义样式',
+    },
+    {
+      name: 'className',
+      propType: 'string',
+      description: '自定义类名',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        { name: 'onCreatePromotion', description: '创建促销活动' },
+        { name: 'onEditPromotion', description: '编辑促销活动' },
+        { name: 'onDeletePromotion', description: '删除促销活动' },
+        { name: 'onToggleStatus', description: '切换状态' },
+        { name: 'onSearch', 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 数据 (JSON)',
+            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: 'showCreateButton',
+            title: '显示创建按钮',
+            setter: 'BoolSetter',
+            extraProps: {
+              display: 'block',
+            },
+          },
+          {
+            name: 'showFilter',
+            title: '显示筛选区域',
+            setter: 'BoolSetter',
+            extraProps: {
+              display: 'block',
+            },
+          },
+          {
+            name: 'showStatistics',
+            title: '显示统计信息',
+            setter: 'BoolSetter',
+            extraProps: {
+              display: 'block',
+            },
+          },
+          {
+            name: 'showTimeline',
+            title: '显示时间线',
+            setter: 'BoolSetter',
+            extraProps: {
+              display: 'block',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  snippets: [
+    {
+      title: '促销活动管理',
+      screenshot: '',
+      schema: {
+        componentName: 'PromotionCard',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultPromotionMockData),
+          showCreateButton: true,
+          showFilter: true,
+          showStatistics: true,
+          showTimeline: true,
+        },
+      },
+    },
+    {
+      title: '促销活动管理（简洁模式）',
+      screenshot: '',
+      schema: {
+        componentName: 'PromotionCard',
+        props: {
+          dataSourceType: 'mock',
+          mockData: JSON.stringify(defaultPromotionMockData),
+          showCreateButton: false,
+          showFilter: false,
+          showStatistics: false,
+          showTimeline: false,
+        },
+      },
+    },
+  ],
+}
+
+export default promotionCardMeta

package/src/meta/roleCardMeta.ts

@@ -0,0 +1,142 @@
+import type { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'
+import { Icons } from './icons'
+
+const roleCardMeta: IPublicTypeComponentMetadata = {
+  componentName: 'RoleCard',
+  title: '角色管理',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: 'mall-components',
+    version: '1.0.0',
+    exportName: 'RoleCard',
+    main: 'lib/index.js',
+    destructuring: true,
+    subName: '',
+  },
+  category: '电商业务',
+  group: '权限管理',
+  icon: Icons.team,
+  props: [
+    {
+      name: 'dataSource',
+      propType: 'string',
+      description: '数据源配置',
+    },
+    {
+      name: 'showCreateButton',
+      propType: 'bool',
+      description: '是否显示创建按钮',
+      defaultValue: true,
+    },
+    {
+      name: 'showFilter',
+      propType: 'bool',
+      description: '是否显示筛选区域',
+      defaultValue: true,
+    },
+    {
+      name: 'showStatistics',
+      propType: 'bool',
+      description: '是否显示统计信息',
+      defaultValue: true,
+    },
+    {
+      name: 'showPermissionTree',
+      propType: 'bool',
+      description: '是否显示权限树',
+      defaultValue: true,
+    },
+    {
+      name: 'style',
+      propType: 'object',
+      description: '自定义样式',
+    },
+    {
+      name: 'className',
+      propType: 'string',
+      description: '自定义类名',
+    },
+  ],
+  configure: {
+    props: {
+      isExtends: true,
+      override: [
+        {
+          name: 'dataSource',
+          setter: {
+            componentName: 'StringSetter',
+          },
+        },
+        {
+          name: 'showCreateButton',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+        {
+          name: 'showFilter',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+        {
+          name: 'showStatistics',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+        {
+          name: 'showPermissionTree',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+      isModal: false,
+      rootSelector: '.mall-role-card',
+      nestingRule: {
+        parentWhitelist: '',
+        childWhitelist: '',
+      },
+    },
+    supports: {
+      style: true,
+      className: true,
+    },
+  },
+  snippets: [
+    {
+      title: '角色管理',
+      screenshot: '',
+      schema: {
+        componentName: 'RoleCard',
+        props: {
+          showCreateButton: true,
+          showFilter: true,
+          showStatistics: true,
+          showPermissionTree: true,
+        },
+      },
+    },
+    {
+      title: '角色管理（简洁模式）',
+      screenshot: '',
+      schema: {
+        componentName: 'RoleCard',
+        props: {
+          showCreateButton: false,
+          showFilter: false,
+          showStatistics: false,
+          showPermissionTree: false,
+        },
+      },
+    },
+  ],
+}
+
+export default roleCardMeta

package/src/meta/tabPaneMeta.ts

@@ -0,0 +1,69 @@
+import type { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'
+
+const TabPaneMeta: IPublicTypeComponentMetadata = {
+  componentName: 'TabPane',
+  title: '选项卡面板',
+  docUrl: 'https://github.com/alibaba/lowcode-engine',
+  screenshot: '',
+  npm: {
+    package: 'mall-components',
+    version: '1.0.0',
+    exportName: 'TabPane',
+    destructuring: true,
+  },
+  props: [
+    {
+      name: 'tab',
+      propType: 'string',
+      description: '选项卡标题',
+      defaultValue: '新选项卡',
+    },
+    {
+      name: 'tabKey',
+      propType: 'string',
+      description: '选项卡唯一标识',
+      defaultValue: 'tab1',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [],
+      loop: false,
+    },
+    props: [
+      {
+        type: 'group',
+        title: '基础配置',
+        display: 'accordion',
+        items: [
+          { 
+            name: 'tab', 
+            title: '选项卡标题', 
+            setter: 'InputSetter', 
+            extraProps: { display: 'block', placeholder: '例如：商品列表' }
+          },
+          { 
+            name: 'tabKey', 
+            title: '选项卡标识', 
+            setter: 'InputSetter', 
+            extraProps: { display: 'block', placeholder: '例如：product' }
+          },
+        ],
+      },
+    ],
+    component: {
+      isContainer: true,
+      nestingRule: {
+        parentWhitelist: ['AdminLayout'],
+      },
+      disableBehaviors: ['remove'],
+    },
+  },
+  icon: '',
+  category: '隐藏组件',
+  group: '布局容器',
+  snippets: [],
+}
+
+export default TabPaneMeta

package/src/meta/userCardMeta.ts

@@ -0,0 +1,128 @@
+import type { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'
+import { Icons } from './icons'
+
+const userCardMeta: IPublicTypeComponentMetadata = {
+  componentName: 'UserCard',
+  title: '用户管理',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: 'mall-components',
+    version: '1.0.0',
+    exportName: 'UserCard',
+    main: 'lib/index.js',
+    destructuring: true,
+    subName: '',
+  },
+  category: '电商业务',
+  group: '权限管理',
+  icon: Icons.user,
+  props: [
+    {
+      name: 'dataSource',
+      propType: 'string',
+      description: '数据源配置',
+    },
+    {
+      name: 'showCreateButton',
+      propType: 'bool',
+      description: '是否显示创建按钮',
+      defaultValue: true,
+    },
+    {
+      name: 'showFilter',
+      propType: 'bool',
+      description: '是否显示筛选区域',
+      defaultValue: true,
+    },
+    {
+      name: 'showStatistics',
+      propType: 'bool',
+      description: '是否显示统计信息',
+      defaultValue: true,
+    },
+    {
+      name: 'style',
+      propType: 'object',
+      description: '自定义样式',
+    },
+    {
+      name: 'className',
+      propType: 'string',
+      description: '自定义类名',
+    },
+  ],
+  configure: {
+    props: {
+      isExtends: true,
+      override: [
+        {
+          name: 'dataSource',
+          setter: {
+            componentName: 'StringSetter',
+          },
+        },
+        {
+          name: 'showCreateButton',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+        {
+          name: 'showFilter',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+        {
+          name: 'showStatistics',
+          setter: {
+            componentName: 'BoolSetter',
+          },
+        },
+      ],
+    },
+    component: {
+      isContainer: false,
+      isModal: false,
+      rootSelector: '.mall-user-card',
+      nestingRule: {
+        parentWhitelist: '',
+        childWhitelist: '',
+      },
+    },
+    supports: {
+      style: true,
+      className: true,
+    },
+  },
+  snippets: [
+    {
+      title: '用户管理',
+      screenshot: '',
+      schema: {
+        componentName: 'UserCard',
+        props: {
+          showCreateButton: true,
+          showFilter: true,
+          showStatistics: true,
+        },
+      },
+    },
+    {
+      title: '用户管理（简洁模式）',
+      screenshot: '',
+      schema: {
+        componentName: 'UserCard',
+        props: {
+          showCreateButton: false,
+          showFilter: false,
+          showStatistics: false,
+        },
+      },
+    },
+  ],
+}
+
+export default userCardMeta

package/src/meta.ts

@@ -0,0 +1,25 @@
+import ProductListMeta from './meta/productListMeta'
+import ProductFormMeta from './meta/productFormMeta'
+import OrderListMeta from './meta/orderListMeta'
+import OrderFormMeta from './meta/orderFormMeta'
+import CouponCardMeta from './meta/couponCardMeta'
+import PromotionCardMeta from './meta/promotionCardMeta'
+import UserCardMeta from './meta/userCardMeta'
+import RoleCardMeta from './meta/roleCardMeta'
+import adminLayoutMeta from './meta/adminLayoutMeta'
+import tabPaneMeta from './meta/tabPaneMeta'
+
+export default {
+  components: [
+    ProductListMeta,
+    ProductFormMeta,
+    OrderListMeta,
+    OrderFormMeta,
+    CouponCardMeta,
+    PromotionCardMeta,
+    UserCardMeta,
+    RoleCardMeta,
+    adminLayoutMeta,
+    tabPaneMeta,
+  ],
+}