xflow流程視覺化-專案搭建

陌路凡歌發表於2022-07-07
視覺化

本系列主要講述一個自定義流程視覺化功能的開發，使用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';）

xlfow

這時候可以看見我們的頁面和官網列子一樣了，官網列子還是比較全面的，但是隻限於展示，在正式使用時我們需要對元件進行定製化，比如一個元件代表什麼，元件下的屬性有什麼，那些屬性可以編輯，元件和元件之間是否可以連線等等，官方的列子滿足不了這麼多場景，所以需要我們自定義元件進行開發，接下來幾篇博文將會對這些情況進行一一解答與說明，盡情期待。

本文地址：連結
本文github地址：連結

相關文章