• 版本

    v1.1

    说明

    使用

    1. 在需要开发卡片的模块 新建/修改 以下文件
    /src/customize
    ├── customizeCards.js
    └── index.js 
    
    1. 在需要开发卡片的模块 修改以下文件
    /src/utils
    ├── router.js
    

    举例

    1. 定义 卡片 customize
    // 主模块 卡片的 customize
    /* hzero-front/src/customize/cards.js */
    import { isFunction } from 'lodash';
    
    import { mapCustomize } from 'utils/customize';
    
    /**
     * 如果 卡片存在 则加载卡片
     * 否则 返回 null
     * @param cardCode
     * @return {Promise<null|*>}
     */
    export async function loadCardAsync(cardCode) {
      if (mapCustomize.has({ module: 'hzero-front', feature: 'cards', key: cardCode })) {
        const layout = mapCustomize.get({ module: 'hzero-front', feature: 'cards', key: cardCode });
        if (isFunction(layout && layout.component)) {
          const card = await layout.component();
          return card;
        }
      }
      return null;
    }
    
    export function setCard(cardConfig) {
      // TODO: 判断是否需要检查 重复设置的问题
      mapCustomize.set({
        module: 'hzero-front',
        feature: 'cards',
        key: cardConfig.code,
        data: { component: cardConfig.component },
      });
    }
    
    1. 使用 卡片的 customize
    
    /* src/utils/router.js */
    // ... 其他代码
    // 增加 customize 的引入
    import '../customize';
    // ... 其他代码
    
    /* src/customize/index.js */
    // 引入 工作流模块 的卡片配置
    import './customizeCards';
    
    /* src/customize/customizeCards.js */
    
    // 引入 存储 卡片配置的方法
    import { setCard } from 'hzero-front/lib/customize/cards';
    // 引入 家在 model 的包装方法
    import { dynamicWrapper } from '../utils/router';
    // 设置 编码为 Workflow 的 卡片
    setCard({
      code: 'Workflow',
      component: async () => {
        return dynamicWrapper(window.dvaApp, ['cards/workflow'], () =>
          import('../routes/Cards/Workflow')
        );
      },
    });
    
    // 卡片开发 (基于 dva 及 hzero-ui)
    // 卡片组件
    /* src/routers/Cards/Workflow/index.js */
    // 该卡片的 model
    /* src/models/cards/workflow.js */
    export default {
        namespace: 'cardWorkflow', // 卡片的namespace
        // ... 其他代码
    };
    // 该卡片的 service
    /* src/services/cards/workflowService.js */