乐趣区

关于antv:xflow流程可视化项目搭建

本系列次要讲述一个自定义流程可视化性能的开发,应用 Ant Design Pro 作为脚手架,AntV/xflow 作为可视化开发框架,定制自定义节点,对节点及连线增加自定义属性,应用 formliy 生成自定义表单对节点属性进行编辑。

本篇次要介绍整体页面以及 xflow 各个控件的性能。

开发前筹备

咱们抉择 Ant Design Pro + umijs3.x 作为咱们开发的脚手架,umi4 曾经能够尝鲜了然而还不稳固,前面稳固了降级 umi4,首先构建脚手架,倡议应用 pnpm

mkdir designable-xflow && cd designable-xflow
yarn create @umijs/umi-app
yarn

根本脚手架构建实现,接下来装置 xflow,以及 formliy

yarn add @antv/xflow @formily/core @formily/react @formily/antd

这样咱们应用到的根本库都装置结束了,接下来咱们对主视图进行革新。
首先主目录新建 config/config.ts,将.umirc.ts 文件中的内容复制到 config.ts 中,而后删除.umirc.ts,增加对应路由
config/config.ts:

import {defineConfig} from 'umi';

export default defineConfig({
  nodeModulesTransform: {type: 'none',},
  layout: {},
  routes: [
    {
        path: '/',
        redirect: '/xflow',
      },
      {
        name: '流程可视化',
        path: '/xflow',
        icon: 'SmileOutlined',
        component: '@/pages/Xflow',
      },
  ],
  fastRefresh: {},});

将 antv 官网 xflow 列子复制一份到 pages 目录下(pages/Xflow),链接,启动服务

yarn run start

然而这时候看到的主页是乱的,短少了 css 引入,在 pages/Xflow/index.tsx 中增加

+ import '@antv/xflow/dist/index.css'
import './index.less'

src下新建global.css,增加

@import '~antd/dist/antd.css';)

这时候能够看见咱们的页面和官网列子一样了,官网列子还是比拟全面的,然而只限于展现,在正式应用时咱们须要对组件进行定制化,比方一个组件代表什么,组件下的属性有什么,那些属性能够编辑,组件和组件之间是否能够连贯等等,官网的列子满足不了这么多场景,所以须要咱们自定义组件进行开发,接下来几篇博文将会对这些状况进行一一解答与阐明,纵情期待。

本文地址:链接
本文 github 地址:链接

退出移动版