@cainiaofe/cn-ui-m-lowcode/src/lowcode/cn-card/prototype.js

## 在线文档

import React from 'react';
import { Bundle } from '@ali/visualengine';
import {
  getArraySetterSnippet,
  getCnSelectSetter,
  getMixedSetterSnippet,
} from '@/common/manager/setter-snippet';
import { getJSExpressionPrototype } from '@/common/manager/common-style';
import {
  getStatusDataSource,
  getTypeDataSource,
} from '@/common/util/prototype-util';
import { createButtonListSetters } from '@/common/manager/button';
import { ButtonPosition } from '@/type/button-position';

// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
  title: '卡片',
  componentName: 'CnCard',
  category: '布局',
  isContainer: true,
  canHovering: true,
  canSelecting: true,
  canDragging: true,
  enableCopy: true,
  configure: [
    {
      name: 'isCnCard',
      title: 'isCnCard',
      initialValue: true,
      display: 'none',
    },
    {
      name: '_context',
      title: '上下文',
      initialValue: {
        type: 'JSExpression',
        value: 'this',
      },
      display: 'none',
    },
    {
      title: '样式',
      type: 'group',
      display: 'accordion',
      collapsed: false,
      items: [
        {
          name: 'title',
          title: '标题',
          display: 'inline',
          initialValue: '标题',
          setter: 'CnI18nSetter',
        },
        {
          name: 'desc',
          title: '标题说明',
          display: 'inline',
          setter: 'CnI18nSetter',
        },

        {
          name: 'subTitle',
          title: '内标题',
          display: 'inline',
          initialValue: '内标题',
          setter: 'CnI18nSetter',
        },
        {
          name: 'subDesc',
          title: '内标题说明',
          display: 'inline',
          setter: 'CnI18nSetter',
        },
        {
          name: 'tags',
          title: '标签组',
          display: 'inline',
          setter: getArraySetterSnippet({
            initialValue: (prop) => {
              return {
                text: '成功',
                status: 'success',
              };
            },
            configure: [
              {
                title: '标签文案',
                name: 'text',
                isRequired: true,
                setter: getMixedSetterSnippet({
                  setters: [
                    {
                      title: '字符串',
                      componentName: 'CnI18nSetter',
                    },
                  ],
                }),
              },
              {
                title: '标签状态',
                name: 'status',
                isRequired: true,
                setter: getCnSelectSetter({
                  options: getStatusDataSource(),
                }),
              },
              {
                title: '强调程度',
                name: 'type',
                setter: getCnSelectSetter({
                  options: getTypeDataSource(),
                }),
              },
            ],
          }),
        },
        {
          name: 'action',
          title: '外标题右侧按钮',
          display: 'accordion',
          collapsed: true,
          extraProps: {
            defaultCollapsed: true,
          },
          setter: createButtonListSetters({
            position: ButtonPosition.normalCardAction,
          }),
        },
        {
          name: 'buttons',
          title: '内标题右侧按钮',
          display: 'accordion',
          collapsed: true,
          extraProps: {
            defaultCollapsed: true,
          },
          setter: createButtonListSetters({
            position: ButtonPosition.normalCardSubAction,
          }),
        },
      ],
    },
  ],
});