ra-arch v1.0.1

前言

这是一款基于antv/x6的用于系统架构设计可视化的一款工具。

效果图

快速上手

说明

本组件是在react框架下的前端组件，推荐react@16.8以上版本。推荐使用umijs@3.x脚手架。其他必要依赖见下文。

目前，作品还有很多需要完善的地方，有些兼容没有处理，推荐使用 mac + 谷歌最新浏览器。这样能体验到更好的滚动效果。

安装方式

通过 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": "应用逻辑层", "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: '架构自助设计系统',
  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: '请选择使用时长',
                },
              ],
            },
            {
              label: '使用时长',
              value: '',
              name: 'time',
              type: 'SELECT',
              inputProps: {
                placeholder: '请选择使用时长',
                options: [
                  { label: '1周', value: '1week' },
                  { label: '1月', value: '1month' },
                  { label: '1年', value: '1year' },
                ],
              },
              rules: [
                {
                  required: true,
                  message: '请选择使用时长',
                },
              ],
            },
            {
              type: 'REMOTESELECT',
              label: '负责人',
              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: '请输入负责人ID',
              },
              rules: [
                {
                  required: true,
                  message: '请选择使用时长',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      label: '云主机',
      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';

功能说明

• 生成节点，拖拽左侧组件到右侧，会有弹窗让用户填写相关信息然后生成节点。
• 调整节点尺寸，单击节点，出现工具端口，拖动端口调整节点尺寸。
• 右键删除节点 右键点击节点，在右键菜单中点击删除。触发 onRemoveNode
• 右键编辑节点 右键单击节点，在右键菜单中点击编辑，在弹窗中对数据进行编辑。但是节点层级和组件类型不能编辑，触发 onUpdateNode
• 调整层级高度，鼠标移入层级下侧拖拽线，点击鼠标左键进行拖动对层级高度进行调整。
• 生成连线，在画布中从源端节点的端口拖拽连线到目标节点的端口。相同两个节点不能有重复的连线，生成节点前会调用 onAddLink
• 删除连线，鼠标移入链接出现删除按钮。点击按钮会触发 onRemoveLink
• 组件过滤，在左侧搜索框中输入内容，对下面的组件模版进行过滤
• 撤销重做，画布上的操作都可以通过撤销重做来操作。会触发 onUndoOrRedo 回调
• 放大 最多放大到当前画布的 1.5 倍
• 缩小 最小缩小到当前画布的 0.5 倍
• 全屏 展开整个编辑器到全屏操作
• 取消全屏
• 本地导入数据 在弹窗中拖入 RaArchData 结构的 .json 文件
• 本地导出数据 生成 RaArchData 结果的.json 文件
• 本地导出图片 将画布区域生成 png 图片
• 上传数据 触发 onSave
• 复制节点 左键单击节点，再点击复制节点按钮，节点信息将放入剪贴板中
• 粘贴节点 点击粘贴节点按钮，将触发 onCreateNode
• 删除节点 左键单击节点，再点击删除节点按钮。触发 onRemoveNode
• 清理缓存 点击清理缓存，将清除缓存数据，并触发 reload ，而使用 data 传入的数据

快捷键

• 复制节点到剪贴板 ctrl+c/commond+c
• 粘贴节点 ctrl+v/commond+v
• 撤销 ctrl+z/commond+z
• 重做 ctrl+shift+z/commond+shift+z
• 删除节点 backspace/backspace
• 放大 ctrl+1/commond+1
• 缩小ctrl+2/commond+2
• 清理缓存 ctrl+e/commond+e

API

RaArchData 输入数据结构

NodeData 数据结构

LinkData 数据结构

ModuleConfig 左侧组件类型定义

ModuleGropuItem

ModuleConfigItem

ModulePropItem