前言

這是一款基于antv/x6的用于系統(tǒng)架構(gòu)設(shè)計(jì)可視化的一款工具。

文檔網(wǎng)站

https://rasir1608.github.io/ra-arch-doc/#/

效果圖

效果圖.png

快速上手

說明

本組件是在react框架下的前端組件，推薦react@1.6.8以上版本。推薦使用umijs@3.x腳手架。其他必要依賴見下文。

目前，作品還有很多需要完善的地方，有些兼容沒有處理，推薦使用 mac + 谷歌最新瀏覽器。這樣能體驗(yàn)到更好的滾動(dòng)效果。

安裝方式

通過 npm 安裝
npm i ra-arch -S

必要依賴

"dependencies": {
    "@antv/x6": "^1.28.1",
    "ahooks": "^2.10.12",
    "antd": "^4.17.1",
    "ra-arch": "0.0.2"
  }

使用方式

import React from 'react';
import RaArch from 'ra-arch';
import { Button } from 'antd';
import 'ra-arch/es/components/assets/font/iconfont.js';
import appIcon from './icon/app.png';
....
import bmsIcon from './icon/bms.png';

const data = {
  "lanes": [
    { "id": "user", "name": "用戶層", "height": 120 },
    { "id": "access", "name": "接入層", "height": 150 },
    { "id": "app", "name": "應(yīng)用邏輯層", "height": 200 },
    { "id": "store", "name": "存儲層", "height": 150 }
  ],
  "nodes": [
    {
      "id": "1",
      "x": 100,
      "y": 180,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "bmr",
      "systemType": "inner",
      "preId": "access"
    },
    {
      "id": "2",
      "x": 100,
      "y": 380,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "tidb",
      "systemType": "inner",
      "preId": "app"
    },
    {
      "id": "3",
      "x": 300,
      "y": 380,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "browser",
      "systemType": "outer",
      "preId": "app"
    },
    {
      "id": "4",
      "x": 300,
      "y": 30,
      "name": "ARCH-VIEW-DUBBO-K8S-SIT",
      "moduleType": "app",
      "systemType": "outer",
      "preId": "user"
    },
    {
      "moduleType": "jetty",
      "name": "ceshi2222",
      "systemType": "inner",
      "x": 450,
      "y": 380,
      "preId": "app",
      "id": "1flj7sg14",
      "label": "Jetty",
      "icon": "jetty",
      "value": "jetty",
      "type": "node",
      "image": "jettyModule",
      "bgImage": "innerSystem"
    },
    {
      "moduleType": "jetty",
      "name": "ceshi11111",
      "systemType": "inner",
      "x": 600,
      "y": 380,
      "preId": "app",
      "id": "1flj7sg1422",
      "label": "Jetty",
      "icon": "jetty",
      "value": "jetty",
      "type": "node",
      "image": "jettyModule",
      "bgImage": "innerSystem"
    },
  ],
  "links": [{ "source": "1", "target": "2" }]
}
const moduleConfig = {
  title: '架構(gòu)自助設(shè)計(jì)系統(tǒng)',
  search: {
    placeholder: '請輸入組件名稱',
  },
  options: [
    {
      label: '用戶層組件',
      value: 'userLayer',
      children: [
        {
          label: 'USER',
          icon: 'user',
          moduleType: 'user',
          moduleImage: 'user',
          value: 'user',
          target: ['user'],
          moduleProp: [
            {
              type: 'INPUT',
              label: '用戶名稱',
              name: 'userName',
              inputProps: {
                allowClear: true,
                placeholder: '請輸入用戶名稱',
                className: 'search-input',
              },
              rules: [
                {
                  required: true,
                  message: '請選擇使用時(shí)長',
                },
              ],
            },
            {
              label: '使用時(shí)長',
              value: '',
              name: 'time',
              type: 'SELECT',
              inputProps: {
                placeholder: '請選擇使用時(shí)長',
                options: [
                  { label: '1周', value: '1week' },
                  { label: '1月', value: '1month' },
                  { label: '1年', value: '1year' },
                ],
              },
              rules: [
                {
                  required: true,
                  message: '請選擇使用時(shí)長',
                },
              ],
            },
            {
              type: 'REMOTESELECT',
              label: '負(fù)責(zé)人',
              name: 'ownerId',
              inputProps: {
                allowClear: true,
                remote: async (val: string) => {
                  if (!val) return [];
                  return [
                    { label: val, value: val },
                    { label: `${val}1`, value: `${val}1` },
                    { label: `${val}2`, value: `${val}2` },
                    { label: `${val}3`, value: `${val}3` },
                  ];
                },
                className: 'search-ownerId',
                placeholder: '請輸入負(fù)責(zé)人ID',
              },
              rules: [
                {
                  required: true,
                  message: '請選擇使用時(shí)長',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      label: '云主機(jī)',
      value: 'clound',
      children: [
        {
          label: 'Jetty',
          icon: 'jetty',
          value: 'jetty',
          moduleProp: [],
        },
        {
          label: 'Nginx',
          icon: 'nginx',
          value: 'nginx',
          moduleProp: [],
        },
      ],
    },
    {
      label: 'K8S容器',
      value: 'k8s',
      children: [
        {
          label: 'Dubbo',
          icon: 'dubbo',
          value: 'dubbo',
          moduleProp: [],
        },
        {
          label: 'SpringBoot',
          icon: 'springboot',
          value: 'springboot',
          moduleProp: [],
        },
        {
          label: 'NODEJS',
          icon: 'nodejs',
          value: 'nodejs',
          moduleProp: [],
        },
        {
          label: 'PYTHON',
          icon: 'python',
          value: 'python',
          moduleProp: [],
        },
        {
          label: 'Jetty',
          icon: 'jetty',
          value: 'jetty',
          moduleProp: [],
        },
        {
          label: 'Nginx',
          icon: 'nginx',
          value: 'nginx',
          moduleProp: [],
        },
      ],
    },
    ...
  ],
};
const assets = {
    appIcon,
    bmsIcon,
    ....
}
export default function IndexPage() {
  return (
      <RaArch data={data} moduleConfig={moduleConfig} assets={assets} />
  );
}

注意

需要通過以下方式引入 iconfont

import 'ra-arch/es/components/assets/font/iconfont.js';

功能說明

• 生成節(jié)點(diǎn)，拖拽左側(cè)組件到右側(cè)，會有彈窗讓用戶填寫相關(guān)信息然后生成節(jié)點(diǎn)。
• 調(diào)整節(jié)點(diǎn)尺寸，單擊節(jié)點(diǎn)，出現(xiàn)工具端口，拖動(dòng)端口調(diào)整節(jié)點(diǎn)尺寸。
• 右鍵刪除節(jié)點(diǎn) 右鍵點(diǎn)擊節(jié)點(diǎn)，在右鍵菜單中點(diǎn)擊刪除。觸發(fā) onRemoveNode
• 右鍵編輯節(jié)點(diǎn) 右鍵單擊節(jié)點(diǎn)，在右鍵菜單中點(diǎn)擊編輯，在彈窗中對數(shù)據(jù)進(jìn)行編輯。但是節(jié)點(diǎn)層級和組件類型不能編輯，觸發(fā) onUpdateNode
• 調(diào)整層級高度，鼠標(biāo)移入層級下側(cè)拖拽線，點(diǎn)擊鼠標(biāo)左鍵進(jìn)行拖動(dòng)對層級高度進(jìn)行調(diào)整。
• 生成連線，在畫布中從源端節(jié)點(diǎn)的端口拖拽連線到目標(biāo)節(jié)點(diǎn)的端口。相同兩個(gè)節(jié)點(diǎn)不能有重復(fù)的連線，生成節(jié)點(diǎn)前會調(diào)用 onAddLink
• 刪除連線，鼠標(biāo)移入鏈接出現(xiàn)刪除按鈕。點(diǎn)擊按鈕會觸發(fā) onRemoveLink
• 組件過濾，在左側(cè)搜索框中輸入內(nèi)容，對下面的組件模版進(jìn)行過濾
• 撤銷重做，畫布上的操作都可以通過撤銷重做來操作。會觸發(fā) onUndoOrRedo 回調(diào)
• 放大 最多放大到當(dāng)前畫布的 1.5 倍
• 縮小 最小縮小到當(dāng)前畫布的 0.5 倍
• 全屏 展開整個(gè)編輯器到全屏操作
• 取消全屏
• 本地導(dǎo)入數(shù)據(jù) 在彈窗中拖入 RaArchData 結(jié)構(gòu)的 .json 文件
• 本地導(dǎo)出數(shù)據(jù) 生成 RaArchData 結(jié)果的.json 文件
• 本地導(dǎo)出圖片 將畫布區(qū)域生成 png 圖片
• 上傳數(shù)據(jù) 觸發(fā) onSave
• 復(fù)制節(jié)點(diǎn) 左鍵單擊節(jié)點(diǎn)，再點(diǎn)擊復(fù)制節(jié)點(diǎn)按鈕，節(jié)點(diǎn)信息將放入剪貼板中
• 粘貼節(jié)點(diǎn) 點(diǎn)擊粘貼節(jié)點(diǎn)按鈕，將觸發(fā) onCreateNode
• 刪除節(jié)點(diǎn) 左鍵單擊節(jié)點(diǎn)，再點(diǎn)擊刪除節(jié)點(diǎn)按鈕。觸發(fā) onRemoveNode
• 清理緩存 點(diǎn)擊清理緩存，將清除緩存數(shù)據(jù)，并觸發(fā) reload ，而使用 data 傳入的數(shù)據(jù)

快捷鍵

• 復(fù)制節(jié)點(diǎn)到剪貼板 ctrl+c/commond+c
• 粘貼節(jié)點(diǎn) ctrl+v/commond+v
• 撤銷 ctrl+z/commond+z
• 重做 ctrl+shift+z/commond+shift+z
• 刪除節(jié)點(diǎn) backspace/backspace
• 放大 ctrl+1/commond+1
• 縮小ctrl+2/commond+2
• 清理緩存 ctrl+e/commond+e

API

RaArchData 輸入數(shù)據(jù)結(jié)構(gòu)

NodeData 數(shù)據(jù)結(jié)構(gòu)

LinkData 數(shù)據(jù)結(jié)構(gòu)

ModuleConfig 左側(cè)組件類型定義

ModuleGropuItem

ModuleConfigItem

ModulePropItem