⚙️ 组件使用

• VM 中假如必要资源，如下

<!-- 页面模版需要依赖的资源 -->
<script
  crossorigin
  src="https://g.alicdn.com/??code/lib/babel-polyfill/7.12.1/polyfill.min.js,code/lib/react/16.8.0/umd/react.production.min.js,code/lib/react-dom/16.8.0/umd/react-dom.production.min.js,code/lib/prop-types/15.8.1/prop-types.min.js"
></script>

<!-- 建议自己部署一个x6 -->
<script defer="defer" src="https://g.alicdn.com/code/lib/antv-x6/1.34.14/x6.min.js"></script>

• build.json 配置

{
  "externals": {
    "react": "React",
    "react-dom": "ReactDOM",
    "@alife/cn-ui": "CNUI",
    "@cainiaofe/cn-ui": "CNUI",
    "@antv/x6": "X6"
  }
}

• 如何使用组件

import ReactDOM from 'react-dom';
import React from 'react';
// 菜鸟大包工程ES目录编译问题待修复，先这样绕过问题。
import '@antv/x6-react-shape/dist/x6-react-shape.js';

import { SuTeeFlow } from '@cainiaofe/sutee-flow';

ReactDOM.render(<SuTeeFlow />, document.getElementById('root'));

// flowId & tenantCode 目前是取url上的参数
// 例如 https://suteeflow.cainiao.com/edit?flowId=258&tenantCode=xxx
ReactDOM.render(
  <SuTeeFlow
    // 该属性先定义，版本0.1.4以上，
    nodeInspectorRender={(cell) => {
      // cell 是x6对象
      return <div>自定义渲染</div>;
    }}
    headerConfig={{
      type: 'simple', // simple ｜ 'normal'； 默认 'normal'
      actions: ['check', 'info', 'save'], // actions不配就是 所有按钮都有
    }}
    bodyStyle={{ height: '800px' }}
  />,
  document.getElementById('root'),
);