集成top

2021-05-10 23:54:51 +08:00 · 2021-05-10 23:54:51 +08:00 · a51df52710
parent d0555f1f93
commit a51df52710
135 changed files with 10381 additions and 4 deletions
--- a/hchyun-ui/package.json
+++ b/hchyun-ui/package.json
@ -36,6 +36,7 @@
    "management-system"
  ],
  "dependencies": {
+    "@antv/g6": "^4.2.7",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.18.1",
    "clipboard": "2.0.4",
--- a/hchyun-ui/src/assets/styles/hcy.scss
+++ b/hchyun-ui/src/assets/styles/hcy.scss
@ -1,6 +1,6 @@
 /**
 * 通用css样式布局处理
- * Copyright (c) 2019 hchyun
+ * Copyright (c) 2021 hchyun
 */

 /** 基础通用 **/
--- a/hchyun-ui/src/directive/permission/hasPermi.js
+++ b/hchyun-ui/src/directive/permission/hasPermi.js
@ -1,6 +1,6 @@
 /**
 * 操作权限处理
- * Copyright (c) 2019 hchyun
+ * Copyright (c) 2021 hchyun
 */

 import store from '@/store'
--- a/hchyun-ui/src/directive/permission/hasRole.js
+++ b/hchyun-ui/src/directive/permission/hasRole.js
@ -1,6 +1,6 @@
 /**
 * 角色权限处理
- * Copyright (c) 2019 hchyun
+ * Copyright (c) 2021 hchyun
 */

 import store from '@/store'
--- a/hchyun-ui/src/router/index.js
+++ b/hchyun-ui/src/router/index.js
@ -92,6 +92,19 @@ export const constantRoutes = [
      }
    ]
  },
+  {
+    path: '/top',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/',
+        component: (resolve) => require(['@/views/system/top/demo-topology'], resolve),
+        name:'Top',
+        meta: {title: 'top视图'}
+      }
+    ]
+  },
  {
    path: '/apiclass',
    component: Layout,
--- a/hchyun-ui/src/utils/hcy.js
+++ b/hchyun-ui/src/utils/hcy.js
@ -1,6 +1,6 @@
 /**
 * 通用js方法封装处理
- * Copyright (c) 2019 hchyun
+ * Copyright (c) 2021 hchyun
 */

 const baseURL = process.env.VUE_APP_BASE_API
--- a/hchyun-ui/src/views/system/top/demo-topology.vue
+++ b/hchyun-ui/src/views/system/top/demo-topology.vue
--- a/hchyun-ui/src/views/system/top/index.js
+++ b/hchyun-ui/src/views/system/top/index.js
@ -0,0 +1,47 @@
+/**
+ * Created by clay on 2021/10/14
+ * Description: common utils
+ */
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object} targetObj
+ */
+export function deepClone(source) {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments: deepClone')
+  }
+  let targetObj = source.constructor === Array ? [] : {}
+  Object.keys(source).forEach(key => {
+    if (source[key] && typeof source[key] === 'object') {
+      targetObj[key] = deepClone(source[key])
+    } else {
+      targetObj[key] = source[key]
+    }
+  })
+  return targetObj
+}
+
+/**
+ * Randomly extract one or more elements from an array
+ * If you want to use a perfect solution, use lodash's _.sample or _.sampleSize
+ * @param {Array} arr
+ * @param {number} count
+ * @returns {Array} arr
+ */
+export function getRandomArrayElements(arr, count = 1) {
+  if (count > arr.length) {
+    throw new Error('error arguments: count is greater than length of array')
+  }
+  let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index
+  while (i-- > min) {
+    index = Math.floor((i + 1) * Math.random())
+    temp = shuffled[index]
+    shuffled[index] = shuffled[i]
+    shuffled[i] = temp
+  }
+  return shuffled.slice(min)
+}
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.css
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.css
@ -0,0 +1,109 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1568972645985'); /* IE9 */
+  src: url('iconfont.eot?t=1568972645985#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1568972645985') format('woff'),
+  url('iconfont.ttf?t=1568972645985') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1568972645985#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-download:before {
+  content: "\e68d";
+}
+
+.icon-zoom-out:before {
+  content: "\e69c";
+}
+
+.icon-image:before {
+  content: "\e752";
+}
+
+.icon-iconedit:before {
+  content: "\e650";
+}
+
+.icon-actualsize:before {
+  content: "\e665";
+}
+
+.icon-copy:before {
+  content: "\e61c";
+}
+
+.icon-zoom-in:before {
+  content: "\e600";
+}
+
+.icon-clear:before {
+  content: "\e700";
+}
+
+.icon-flow-line:before {
+  content: "\e660";
+}
+
+.icon-redo:before {
+  content: "\e716";
+}
+
+.icon-undo:before {
+  content: "\e71a";
+}
+
+.icon-fit:before {
+  content: "\e7cb";
+}
+
+.icon-to-front:before {
+  content: "\e7cc";
+}
+
+.icon-to-back:before {
+  content: "\e7cd";
+}
+
+.icon-roi-select:before {
+  content: "\e7ce";
+}
+
+.icon-json:before {
+  content: "\e623";
+}
+
+.icon-fullscreen:before {
+  content: "\e648";
+}
+
+.icon-broken:before {
+  content: "\e9ad";
+}
+
+.icon-curve:before {
+  content: "\e9b0";
+}
+
+.icon-paste:before {
+  content: "\e963";
+}
+
+.icon-group:before {
+  content: "\e915";
+}
+
+.icon-ungroup:before {
+  content: "\e917";
+}
+
+.icon-arrow-dropdown:before {
+  content: "\e601";
+}
+
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.eot
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.eot
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.js
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.js
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.svg
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.svg
@ -0,0 +1,95 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="download" unicode="&#59021;" d="M135.377782 555.885765l277.111319 0L412.4891 830.342628l207.41905 0 0-274.457886 272.656867 0L513.970376 147.641851 135.377782 555.885765 135.377782 555.885765zM892.268258 145.226848l0-66.952878L136.666124 78.27397l0 66.952878L65.878918 145.226848l0-204.12912L136.666124-58.902272l755.603157 0 65.849754 0 0 204.12912L892.268258 145.226848 892.268258 145.226848zM892.268258 145.226848"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zoom-out" unicode="&#59036;" d="M950.075-14.436l-225.921 221.773c123.199 146.698 115.857 366.528-22.075 504.482-145.758 145.751-382.898 145.751-528.647 0-145.752-145.745-145.752-382.87 0-528.615 135.794-135.787 350.91-145.037 497.546-27.789l227.045-222.879c13.304-13.055 34.675-12.864 47.736 0.447l4.758 4.84c13.057 13.306 12.86 34.681-0.442 47.741l0 0zM226.091 235.862c-116.713 116.708-116.713 306.595 0 423.301 116.712 116.713 306.604 116.713 423.323 0 116.68-116.706 116.68-306.593 0-423.289-116.72-116.72-306.611-116.72-423.323-0.012l0 0zM214.441 484.734l446.604 0 0-74.435-446.604 0 0 74.435zM214.441 484.734z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="image" unicode="&#59218;" d="M896 704 128 704 128 64 896 64 896 704ZM1024 832 1024 832 1024-64 0-64 0 832 1024 832ZM832 128 192 128 192 256 384 576 647.008 256 832 384 832 320ZM640 544A3 3 2520 1 0 832 544 3 3 2520 1 0 640 544z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="iconedit" unicode="&#58960;" d="M893.46655 451.99051l0-444.912046c0-35.100426-28.426423-63.558571-63.557548-63.558571L130.761648-56.480106c-35.068703 0-63.558571 28.459169-63.558571 63.558571L67.203076 706.225819c0 35.132148 28.489868 63.558571 63.558571 63.558571l444.911022 0 0-61.540611L128.77541 708.243779l0-701.165314 701.133591 0L829.909002 451.99051 893.46655 451.99051zM487.78397 229.659843l-201.912639-64.520479 64.490803 201.909569L487.78397 229.659843zM398.007271 412.085662l134.848221-134.808312 313.198212 313.199235L711.194226 725.274664 398.007271 412.085662zM935.921477 770.251018l-44.936445 44.938492c-24.827455 24.827455-65.049528 24.827455-89.876983 0l-43.530422-43.532469 134.808312-134.849244 43.535539 43.535539C960.752002 705.17079 960.752002 745.42254 935.921477 770.251018z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="actualsize" unicode="&#58981;" d="M716.8 793.6L716.8 725.33333333 853.33333333 725.33333333 853.33333333 588.8 921.6 588.8 921.6 725.33333333 921.6 793.6ZM853.33333333 42.66666667000004L716.8 42.66666667000004 716.8-25.600000000000023 921.6-25.600000000000023 921.6 42.66666667000004 921.6 179.20000000000005 853.33333333 179.20000000000005ZM170.66666667 179.20000000000005L102.4 179.20000000000005 102.4 42.66666667000004 102.4-25.600000000000023 307.2-25.600000000000023 307.2 42.66666667000004 170.66666667 42.66666667000004ZM170.66666667 725.33333333L307.2 725.33333333 307.2 793.6 102.4 793.6 102.4 725.33333333 102.4 588.8 170.66666667 588.8ZM238.93333333 589.0047999999999l0-410.0096C238.93333333 141.85813333 269.38026667 110.93333332999998 306.9952 110.93333332999998l410.0096 0C754.14186667 110.93333332999998 785.06666667 141.38026666999997 785.06666667 178.99519999999995L785.06666667 589.0047999999999C785.06666667 626.14186667 754.61973333 657.06666667 717.0048 657.06666667L306.9952 657.06666667C269.85813333 657.06666667 238.93333333 626.6197333299999 238.93333333 589.0047999999999zM307.2 588.8l409.6 0 0-409.6L307.2 179.20000000000005 307.2 588.8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="copy" unicode="&#58908;" d="M704 256h256v-355.968c0-15.424-12.608-28.032-28.032-28.032h-455.936c-15.424 0-28.032 12.608-28.032 28.032v583.936c0 15.424 12.608 28.032 31.168 28.032h224.832v-256zM768 506.624v-186.624h192l-182.464 186.624h-9.536zM448 826.624v-122.624h128l-118.464 122.624h-9.536zM384 576h192v64h-192v192h-288.832c-18.56 0-31.168-12.608-31.168-28.032v-644.8c0-15.424 12.608-28.032 28.032-28.032h291.968v444.864z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zoom-in" unicode="&#58880;" d="M968.842667-12.501333L726.698667 229.642667A382.293333 382.293333 0 0 1 810.666667 469.333333C810.666667 681.408 638.752 853.333333 426.666667 853.333333 214.592 853.333333 42.666667 681.408 42.666667 469.333333s171.925333-384 384-384c90.666667 0 173.994667 31.413333 239.690666 83.978667l242.144-242.144a42.666667 42.666667 0 0 1 60.341334 60.330667zM426.666667 170.666667c-164.949333 0-298.666667 133.717333-298.666667 298.666666s133.717333 298.666667 298.666667 298.666667c164.96 0 298.666667-133.717333 298.666666-298.666667S591.626667 170.666667 426.666667 170.666667z m170.666666 298.666666a42.666667 42.666667 0 0 0-42.666666-42.666666h-85.333334v-85.333334a42.666667 42.666667 0 0 0-85.333333 0v85.333334h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h85.333333v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="clear" unicode="&#59136;" d="M791.04 583.68H768V0h-76.8V583.68h-128V0h-76.8V583.68h-128V0h-76.8V583.68H128V-25.6c0-56.32 46.08-102.4 104.96-102.4h558.08c58.88 0 104.96 46.08 104.96 102.4V583.68c0 5.12-46.08 0-104.96 0M947.2 768h-230.4V829.44C716.8 867.84 652.8 896 614.4 896h-204.8c-38.4 0-102.4-28.16-102.4-66.56V768H76.8c-28.16 0-51.2-23.04-51.2-51.2s23.04-51.2 51.2-51.2h870.4c28.16 0 51.2 23.04 51.2 51.2s-23.04 51.2-51.2 51.2M614.4 768h-204.8V793.6h204.8v-25.6m0 0z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="flow-line" unicode="&#58976;" d="M563.2 188.2112V579.7888A122.624 122.624 0 0 1 634.88 691.2a122.88 122.88 0 1 1-245.76 0c0-49.5104 29.4912-91.9552 71.68-111.4112v-391.6288A122.5216 122.5216 0 0 1 389.12 76.8a122.88 122.88 0 1 1 245.76 0c0 49.5104-29.44 91.9552-71.68 111.4112zM512 762.112a70.8608 70.8608 0 1 0 0-141.7216 70.8608 70.8608 0 0 0 0 141.7216z m0-756.224a70.912 70.912 0 1 0 0 141.824 70.912 70.912 0 0 0 0-141.824z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="redo" unicode="&#59158;" d="M999.551 549.05c13.299 0 24-10.8 24.1-24v-358c0-17.7-14.301-32-32-32h-358.1c-6.4 0-12.5 2.5-17 7-9.4 9.3-9.4 24.5 0 33.9l127 127c-82.201 101.8-208 167-349.001 167-170.3 0-318.4-95-394.2-235 45.7 227 246.2 398 486.7 398 160.101 0 302.399-75.7 393.2-193.3l102.301 102.4c4.5 4.5 10.599 7 17 7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="undo" unicode="&#59162;" d="M41.353 542.029a23.998 23.998 0 0 1-16.97 7.029c-13.255 0-24-10.744-24-24V167c0-17.673 14.327-32 32-32h358.06a24 24 0 0 1 16.969 7.029c9.373 9.373 9.373 24.568 0 33.941L280.418 302.965C362.539 404.832 488.35 470 629.383 470c170.332 0 318.462-95.059 394.234-235.02C977.931 462.016 777.375 633 536.883 633c-160.045 0-302.403-75.725-393.2-193.3L41.353 542.029z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fit" unicode="&#59339;" d="M640 608V800c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6zM288 832c-19.2 0-32-12.8-32-32v-160H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192C320 819.2 307.2 832 288 832z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2zM480 544c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="to-front" unicode="&#59340;" d="M768 300.8c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2L358.4 697.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6zM217.6 377.6l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224 96 300.8l121.6 76.8z m204.8-320l-320 76.8 108.8 76.8L416 160c6.4 0 19.2 0 25.6 6.4L576 288l83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z"  horiz-adv-x="1036" />
+
+    
+    <glyph glyph-name="to-back" unicode="&#59341;" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2L364.8 697.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l384-89.6c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8zM364.8 646.4l300.8-44.8L416 384l-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224l-313.6 76.8 115.2 76.8z m723.2-134.4h96L896 64l-140.8 179.2h96V256c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z"  horiz-adv-x="1036" />
+
+    
+    <glyph glyph-name="roi-select" unicode="&#59342;" d="M64 704h64v-64H64V704z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64zM64 768V832h64v-64H64z m128 0V832h64v-64H192z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 64h64v-64h-64V832z m0-128h64v-64h-64V704z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64zM64 0v64h64v-64H64z m128 0v64h64v-64H192z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM256 320v-64h256v64H256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64H256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="json" unicode="&#58915;" d="M921.6 716.8L798.72 844.8c-30.72 30.72-76.8 51.2-117.76 51.2H256c-40.96 0-71.68-35.84-71.68-71.68v-353.28h56.32V824.32c0 10.24 5.12 15.36 15.36 15.36h435.2v-235.52h225.28v-660.48c0-10.24-5.12-15.36-15.36-15.36H256c-10.24 0-15.36 5.12-15.36 15.36v107.52H184.32v-102.4c0-40.96 30.72-76.8 71.68-76.8h645.12c40.96 0 71.68 35.84 71.68 71.68V568.32c-5.12 51.2-20.48 102.4-51.2 148.48z m-174.08-61.44V803.84c5.12 0 5.12-5.12 10.24-10.24l128-128 10.24-10.24h-148.48zM798.72 455.68H92.16c-20.48 0-35.84-20.48-35.84-40.96v-276.48c0-20.48 15.36-40.96 40.96-40.96h701.44c20.48 0 40.96 15.36 40.96 40.96V414.72c-5.12 20.48-20.48 40.96-40.96 40.96zM225.28 368.64v-133.12c0-15.36-5.12-30.72-15.36-40.96-10.24-10.24-25.6-15.36-40.96-15.36-10.24 0-20.48 0-30.72 5.12v35.84h20.48c5.12 0 10.24 0 15.36 5.12 5.12 0 5.12 5.12 5.12 5.12v143.36h46.08z m168.96-40.96l-35.84-10.24c-5.12 15.36-15.36 25.6-30.72 20.48-15.36 0-25.6-5.12-25.6-15.36 0-5.12 0-10.24 5.12-10.24 5.12-5.12 15.36-5.12 20.48-10.24 15.36 0 30.72-5.12 40.96-10.24 10.24-5.12 15.36-10.24 20.48-20.48 5.12-10.24 10.24-20.48 10.24-30.72 0-15.36-5.12-30.72-20.48-46.08-15.36-10.24-35.84-15.36-56.32-15.36-20.48 0-35.84 5.12-51.2 15.36-15.36 5.12-25.6 20.48-25.6 35.84l40.96 10.24c5.12-15.36 20.48-30.72 40.96-25.6 10.24 0 15.36 0 20.48 5.12 5.12 5.12 5.12 10.24 5.12 15.36 0 5.12 0 10.24-5.12 15.36-10.24 5.12-15.36 5.12-25.6 10.24-20.48 5.12-35.84 10.24-51.2 20.48-10.24 5.12-15.36 15.36-15.36 30.72s5.12 30.72 20.48 40.96c15.36 10.24 30.72 20.48 51.2 15.36 25.6 5.12 56.32-10.24 66.56-40.96z m102.4-148.48c-25.6 0-46.08 10.24-56.32 30.72-15.36 20.48-20.48 46.08-20.48 71.68 0 25.6 5.12 51.2 20.48 66.56 15.36 20.48 35.84 30.72 61.44 25.6 25.6 0 46.08-10.24 61.44-30.72 15.36-20.48 20.48-40.96 20.48-66.56s-5.12-51.2-20.48-71.68c-20.48-15.36-40.96-25.6-66.56-25.6z m0 158.72c-20.48 0-30.72-20.48-30.72-61.44s10.24-61.44 35.84-61.44c20.48 0 30.72 20.48 30.72 61.44s-10.24 61.44-35.84 61.44z m250.88 30.72V179.2h-35.84l-71.68 128V179.2h-30.72v189.44h46.08l66.56-112.64v107.52l25.6 5.12z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fullscreen" unicode="&#58952;" d="M704 480l188.2 184.4 99.8-99.8V864H704l88.4-96-180.4-192 92-96z m-96-288l184.4-188.2-100-99.8H992V192l-96-88.4-192 180.4-96-92z m-288 96l-188.2-184.4-99.8 100V-96h288l-88.4 96 180.4 192-92 96z m96 288l-184.4 188.2 100 99.8H32v-288l96 88.4 192-180.4 96 92z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="broken" unicode="&#59821;" d="M880.71104 160a144.096 144.096 0 0 1-134.08-95.008L746.31104 64h-185.6V800H279.75104c-20.352 56.416-73.44 96-135.776 96A144 144 0 1 1 279.43104 703.008L279.75104 704h184.96v-732.8h279.68c19.424-58.08 73.344-99.2 136.864-99.2a144 144 0 0 1 0 288h-0.576 0.032zM144.71104 694.4a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z m736-736a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z"  horiz-adv-x="1025" />
+
+    
+    <glyph glyph-name="curve" unicode="&#59824;" d="M927.488273 152.021587V320.758959c0 264.73871-214.628824 479.367534-479.367534 479.367534H279.383367c-20.325183 56.341664-73.343233 95.873507-135.597097 95.873507A143.81026 143.81026 0 1 1 279.063788 703.262293L279.383367 704.252986H448.120739c211.784577 0 383.494028-171.709451 383.494027-383.494027v-169.376529c-56.341664-20.325183-95.873507-73.343233-95.873506-135.597097a143.81026 143.81026 0 1 1 192.737706 135.277518L927.488273 151.38243zM144.5213 694.665636a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z m735.03022-735.03022a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="paste" unicode="&#59747;" d="M320 528c0 61.758 50.244 112 112 112h272V784c0 26.51-21.49 48-48 48h-161.22C472.612 870.22 431.274 896 384 896s-88.612-25.78-110.78-64H112C85.49 832 64 810.51 64 784v-672c0-26.51 21.49-48 48-48h208V528z m64 288c26.51 0 48-21.49 48-48s-21.49-48-48-48-48 21.49-48 48 21.49 48 48 48z m368-496h208v-400c0-26.51-21.49-48-48-48H432c-26.51 0-48 21.49-48 48V528c0 26.51 21.49 48 48 48h272v-208c0-26.4 21.6-48 48-48z m208 76.118V384h-192v192h12.118a48 48 0 0 0 33.94-14.058l131.882-131.882a48.004 48.004 0 0 0 14.06-33.942z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="group" unicode="&#59669;" d="M912 75.9V692.1c28 9.9 48 36.6 48 67.9 0 39.8-32.2 72-72 72-31.3 0-58-20-67.9-48H203.9C194 812 167.3 832 136 832c-39.8 0-72-32.2-72-72 0-31.3 20-58 48-67.9v-616.2C84 66 64 39.3 64 8c0-39.8 32.2-72 72-72 31.3 0 58 20 67.9 48h616.2c9.9-28 36.6-48 67.9-48 39.8 0 72 32.2 72 72 0 31.3-20 58-48 67.9zM888 784c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136-16c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m0 752c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m704-680H184V712h656v-656z m48-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM288 422h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64zM288 138h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="ungroup" unicode="&#59671;" d="M736 346H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM736 630H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 688c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72z m0 96c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136 832c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM136 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-dropdown" unicode="&#58881;" d="M512 107.51958124999999l-377.06160075 377.06160074L222.88801761 572.5308003600001 512 283.41881802 801.11198239 572.5308003600001 889.06160075 484.58118199z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.ttf
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.ttf
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff
--- a/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff2
+++ b/hchyun-ui/src/views/system/top/packages/assets/iconfont/iconfont.woff2
--- a/hchyun-ui/src/views/system/top/packages/assets/images/client.png
+++ b/hchyun-ui/src/views/system/top/packages/assets/images/client.png
--- a/hchyun-ui/src/views/system/top/packages/assets/images/database.png
+++ b/hchyun-ui/src/views/system/top/packages/assets/images/database.png
--- a/hchyun-ui/src/views/system/top/packages/assets/images/firewall.png
+++ b/hchyun-ui/src/views/system/top/packages/assets/images/firewall.png
--- a/hchyun-ui/src/views/system/top/packages/assets/images/server.png
+++ b/hchyun-ui/src/views/system/top/packages/assets/images/server.png
--- a/hchyun-ui/src/views/system/top/packages/assets/logo.png
+++ b/hchyun-ui/src/views/system/top/packages/assets/logo.png
--- a/hchyun-ui/src/views/system/top/packages/elements/button.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/button.vue
@ -0,0 +1,93 @@
+<template>
+  <button
+    class="cc-button"
+    @click="handleClick"
+    :disabled="buttonDisabled"
+    :class="[
+      type ? 'cc-button--' + type : '',
+      buttonSize ? 'cc-button--' + buttonSize : '',
+      {
+        'is-disabled': buttonDisabled,
+        'is-plain': plain
+      }
+    ]"
+  >
+    <span><slot></slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'CcButton',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    buttonSize() {
+      return this.size
+    },
+    buttonDisabled() {
+      return this.disabled
+    }
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cc-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  -webkit-transition: .1s;
+  transition: .1s;
+  font-weight: 500;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.cc-button:focus, .cc-button:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+
+.cc-button--mini, .cc-button--mini.is-round {
+  padding: 7px 15px;
+}
+
+.cc-button--mini, .cc-button--small {
+  font-size: 12px;
+  border-radius: 3px;
+}
+</style>
--- a/hchyun-ui/src/views/system/top/packages/elements/checkbox.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/checkbox.vue
@ -0,0 +1,79 @@
+<template>
+  <div class="checkbox" :class="{ 'checkbox-checked': checkVal }">
+    <input
+      id="checkbox"
+      type="checkbox"
+      v-model="checkVal"
+      @change="handleChange"
+    />
+    <label for="checkbox"></label>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CcCheckbox',
+  data() {
+    return {
+      checkVal: false
+    }
+  },
+  methods: {
+    handleChange() {
+      this.$emit('change', this.checkVal)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox {
+  display: inline-block;
+  color: #606266;
+  font-size: 14px;
+
+  input[type='checkbox'] + label {
+    margin: 0 8px;
+    cursor: pointer;
+  }
+
+  input[type='checkbox'] + label::before {
+    content: '\a0';
+    display: inline-block;
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 2px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    line-height: 0.9;
+    background-color: #fff;
+    z-index: 1;
+    -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+  }
+
+  input[type='checkbox']:checked + label::before {
+    content: '\2714';
+    color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
+  }
+
+  input[type='checkbox'] {
+    opacity: 0;
+    outline: 0;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    z-index: -1;
+  }
+}
+
+.checkbox-checked {
+  color: #409eff;
+}
+</style>
--- a/hchyun-ui/src/views/system/top/packages/elements/dropdown.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/dropdown.vue
@ -0,0 +1,184 @@
+<template>
+  <div class="cc-dropdown" @mouseover="onMouseOver" @mouseout="onMouseOut">
+    <span><a href="javascript:void(0);">{{ dropdownItems[activeIndex].label }}</a></span>
+    <div class="cc-dropdown-menu" ref="dropdownMenu" @mouseover="onMouseOver">
+      <ul>
+        <li
+          v-for="(dropdownItem, index) in dropdownItems"
+          :key="index"
+          @click="onItemClick(index, $event)"
+        >
+          <a href="javascript:void(0);">{{ dropdownItem.label }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CCDropdownList',
+  props: {
+    dropdownItems: {
+      type: Array,
+      default() {
+        return [
+          { value: 0, label: '未选择' },
+          { value: 1, label: '选项一' },
+          { value: 2, label: '选项二' },
+          { value: 3, label: '选项三' }
+        ]
+      }
+    },
+    defaultIndex: {
+      type: Number,
+      default() {
+        return 0
+      }
+    }
+  },
+  data() {
+    return {
+      activeIndex: this.defaultIndex,
+      timeout: null
+    }
+  },
+  watch: {
+    activeIndex() {
+      this.$emit('change', this.dropdownItems[this.activeIndex])
+    }
+  },
+  methods: {
+    onMouseOver() {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+      this.$refs.dropdownMenu.style.display = 'block'
+    },
+    onMouseOut() {
+      this.timeout = setTimeout(() => {
+        this.$refs.dropdownMenu.style.display = 'none'
+      }, 300)
+    },
+    onItemClick(index) {
+      this.$refs.dropdownMenu.style.display = 'none'
+      if (index !== this.activeIndex) {
+        this.activeIndex = index
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cc-dropdown {
+  position: relative;
+  display: inline-block;
+  min-width: 100px;
+  text-align: center;
+  a {
+    color: #000;
+    text-decoration: none;
+  }
+  ul,
+  li {
+    list-style: none;
+  }
+  span {
+    display: block;
+    z-index: 2;
+    height: 30px;
+    line-height: 30px;
+    background-color: transparent;
+    font-size: 14px;
+    border-radius: 5px;
+    -webkit-transition: all .2s ease-in;
+    transition: all .2s ease-in;
+  }
+  span a:after{
+    content: " ";
+    display: inline-block;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+    border-bottom: solid 6px #000;
+    border-left: solid 4px transparent;
+    border-right: solid 4px transparent;
+    vertical-align: 3px;
+    margin-left: 10px;
+    -webkit-transition: all .2s ease-in;
+    transition: all .2s ease-in;
+  }
+}
+
+.cc-dropdown-menu {
+  position: absolute;
+  display: none;
+  top: 50px;
+  left: 0;
+  right: 0;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  z-index: 1;
+
+  /* 一个很重要的三角形*/
+  li:first-child:before {
+    display: block; /* 独占一行 */
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+    margin: 0 auto; /* 居中 */
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 配合整体一样的投影 */
+    background-color: #fff;
+    width: 10px;
+    height: 10px;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg); /* 一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来 */
+    position: relative;
+    top: -5px; /* 露出上半部分*/
+    z-index: 1; /* 隐藏下半部分 */
+    -webkit-transition: all .2s ease-in;
+    transition: all .2s ease-in;
+  }
+  li a {
+    color: #888;
+    line-height: 46px;
+    border-bottom: solid 1px #eee;
+    font-size: 14px;
+    display: block;
+    background-color: #fff; /* 要有背景色才能盖住呀*/
+    position: relative;
+    z-index: 2; /* 这里很重要 要挡住三角形的下半部分*/
+    -webkit-transition: all .2s ease-in;
+    transition: all .2s ease-in;
+  }
+  /* 以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
+  li:first-child a{
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    margin-top: -10px;
+  }
+  li:last-child a{
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-bottom: none;
+  }
+  /*hover事件给了li，先改变三角 再改变a*/
+  li:hover:before{
+    background-color: #ecf5ff;
+  }
+  li:hover a {
+    background-color: #ecf5ff;
+    color: #66b1ff;
+  }
+}
+
+.cc-dropdown:hover span{
+  background-color: transparent;
+}
+.cc-dropdown:hover span a:after {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+</style>
--- a/hchyun-ui/src/views/system/top/packages/elements/index.js
+++ b/hchyun-ui/src/views/system/top/packages/elements/index.js
@ -0,0 +1,17 @@
+/**
+ * @author: clay
+ * @data: 2021/11/14
+ * @description: cceditor内部的通用组件
+ */
+
+import Checkbox from './checkbox'
+import Button from './button'
+import Dropdown from './dropdown'
+import Loading from './loading'
+
+export {
+  Checkbox,
+  Button,
+  Dropdown,
+  Loading
+}
--- a/hchyun-ui/src/views/system/top/packages/elements/loading.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/loading.vue
@ -0,0 +1,92 @@
+<template>
+  <div class="model-overlay">
+    <div class="loading">
+      <svg class="circular" viewBox="0 0 50 50">
+        <circle cx="25" cy="25" r="20" fill="none" stroke="#409EFF" stroke-width="5%" stroke-linecap="round"/>
+      </svg>
+    </div>
+    <span class="loading-text">{{ loadingText }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CcLoading',
+  props: {
+    loadingText: {
+      type: String,
+      default: '加载中...'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.model-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  z-index: 1000;
+  overflow: auto;
+  background-color: transparent;
+}
+
+.loading {
+  position: absolute;
+  width: 50px;
+  top: 45%;
+  left: 50%;
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+
+  .circular {
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: rotate 2s linear infinite;
+  }
+
+  circle {
+    animation: circle-dash 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes circle-dash {
+  0% {
+    stroke-dasharray: 1, 125;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100, 125;
+    stroke-dashoffset: -25px;
+  }
+  100% {
+    stroke-dasharray: 100, 125;
+    stroke-dashoffset: -125px;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  position: absolute;
+  top: calc(45% + 60px);
+  left: calc(50% - 10px);
+  color: #409EFF;
+  font-size: 14px;
+}
+</style>
--- a/hchyun-ui/src/views/system/top/packages/top.js
+++ b/hchyun-ui/src/views/system/top/packages/top.js
@ -0,0 +1,39 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 整合所有的组件，对外导出，即一个完整的组件库
+ */
+
+import Topology from './topology'
+
+// 存储组件列表
+const components = [
+  Topology
+]
+
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function(Vue) {
+  // 判断是否安装
+  if (install.installed) return
+  // 遍历注册全局组件
+  console.info('install----CCEditor: All----')
+  components.map(component => Vue.component(component.name, component))
+}
+
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  // 以下是具体的组件列表
+  Topology
+}
+
+export {
+  install,
+  // 以下是具体的组件列表
+  Topology
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/index.js
@ -0,0 +1,16 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 导入组件，组件必须声明 name
+ */
+
+import Topology from './src/topology'
+
+// 为组件提供 install 安装方法，供按需引入
+Topology.install = function(Vue) {
+  console.info('install----CCEditor: Topology----')
+  Vue.component(Topology.name, Topology)
+}
+
+// 默认导出组件
+export default Topology
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
@ -0,0 +1,95 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edit mode: 通过先后点击两个节点来添加连线（容易和节点点击动作交叉，已弃用）
+ */
+
+import G6 from '@antv/g6'
+import theme from '../theme'
+
+export default {
+  name: 'click-add-edge',
+  options: {
+    getEvents() {
+      return {
+        'node:click': 'onNodeClick',
+        'canvas:mousemove': 'onMousemove',
+        'edge:click': 'onEdgeClick' // 点击空白处，取消边
+      }
+    },
+    onNodeClick(event) {
+      let graph = this.graph
+      let node = event.item
+      let point = { x: event.x, y: event.y }
+      let model = node.getModel()
+      let edgeShape = self.currentEdgeShape.guid || 'line'
+      if (this.addingEdge && this.edge) {
+        // 点击第二个节点
+        graph.updateItem(this.edge, {
+          target: model.id
+        })
+        this.edge = null
+        this.addingEdge = false
+        // 记录【连线】前后的数据状态
+        if (this.historyData) {
+          let graph = this.graph
+          // 如果当前点过【撤销】了，连线后没有【重做】功能
+          // 重置undoCount，连线后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+          if (self.undoCount > 0) {
+            self.historyIndex = self.historyIndex - self.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+            for (let i = 1; i <= self.undoCount; i++) {
+              let key = `graph_history_${self.historyIndex + i}`
+              self.removeHistoryData(key)
+            }
+            self.undoCount = 0
+          } else {
+            // 正常顺序执行的情况，记录【连线】前的数据状态
+            let key = `graph_history_${self.historyIndex}`
+            self.addHistoryData(key, this.historyData)
+          }
+          // 记录【连线】后的数据状态
+          self.historyIndex += 1
+          let key = `graph_history_${self.historyIndex}`
+          let currentData = JSON.stringify(graph.save())
+          self.addHistoryData(key, currentData)
+        }
+      } else {
+        // 点击第一个节点
+        this.historyData = JSON.stringify(graph.save())
+        if (edgeShape === 'stepline') {
+          this.edge = graph.addItem('edge', {
+            source: model.id,
+            target: point,
+            type: edgeShape,
+            controlPoints: [{ x: 100, y: 70 }]
+          })
+        } else {
+          this.edge = graph.addItem('edge', {
+            source: model.id,
+            target: point,
+            type: edgeShape
+          })
+        }
+        this.addingEdge = true
+      }
+    },
+    onMousemove(event) {
+      const point = { x: event.x, y: event.y }
+      if (this.addingEdge && this.edge) {
+        this.graph.updateItem(this.edge, {
+          target: point
+        })
+      }
+    },
+    onEdgeClick(ev) {
+      let graph = this.graph
+      const currentEdge = ev.item
+      // 拖拽过程中，点击会点击到新增的边上
+      if (this.addingEdge && this.edge === currentEdge) {
+        graph.removeItem(this.edge)
+        this.edge = null
+        this.addingEdge = false
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
@ -0,0 +1,124 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edit mode: 鼠标点击交互
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'click-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:click': 'onNodeClick',
+        'node:contextmenu': 'onNodeRightClick',
+        'edge:click': 'onEdgeClick',
+        'edge:contextmenu': 'onEdgeRightClick',
+        'canvas:click': 'onCanvasClick'
+      }
+    },
+    onNodeClick(event) {
+      // todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态
+      // let clickNode = event.item;
+      // clickNode.setState('selected', !clickNode.hasState('selected'));
+      vm.currentFocus = 'node'
+      vm.rightMenuShow = false
+      this.updateVmData(event)
+    },
+    onNodeRightClick(event) {
+      let graph = vm.graph
+      let clickNode = event.item
+      let clickNodeModel = clickNode.getModel()
+      let selectedNodes = graph.findAllByState('node', 'selected')
+      let selectedNodeIds = selectedNodes.map(item => {return item.getModel().id})
+      vm.selectedNode = clickNode
+      // 如果当前点击节点是之前选中的某个节点，就进行下面的处理
+      if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
+        vm.rightMenuShow = true
+        let rightMenu = vm.$refs.rightMenu
+        rightMenu.style.left = event.clientX + 'px'
+        rightMenu.style.top = event.clientY + 'px'
+      } else {
+        // 隐藏右键菜单
+        vm.rightMenuShow = false
+        // 先取消所有节点的选中状态
+        selectedNodes.forEach(node => {
+          node.setState('selected', false)
+        })
+        // 再添加该节点的选中状态
+        clickNode.setState('selected', true)
+        vm.currentFocus = 'node'
+        this.updateVmData(event)
+      }
+      graph.paint()
+    },
+    onEdgeClick(event) {
+      let clickEdge = event.item
+      clickEdge.setState('selected', !clickEdge.hasState('selected'))
+      vm.currentFocus = 'edge'
+      this.updateVmData(event)
+    },
+    onEdgeRightClick(event) {
+      let graph = vm.graph
+      let clickEdge = event.item
+      let clickEdgeModel = clickEdge.getModel()
+      let selectedEdges = graph.findAllByState('edge', 'selected')
+      // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理
+      if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) {
+        // 先取消所有节点的选中状态
+        graph.findAllByState('edge', 'selected').forEach(edge => {
+          edge.setState('selected', false)
+        })
+        // 再添加该节点的选中状态
+        clickEdge.setState('selected', true)
+        vm.currentFocus = 'edge'
+        this.updateVmData(event)
+      }
+      let point = { x: event.x, y: event.y }
+    },
+    onCanvasClick() {
+      vm.currentFocus = 'canvas'
+      vm.rightMenuShow = false
+    },
+    updateVmData(event) {
+      if (event.item._cfg.type === 'node') {
+        // 更新vm的data: selectedNode 和 selectedNodeParams
+        let clickNode = event.item
+        if (clickNode.hasState('selected')) {
+          let clickNodeModel = clickNode.getModel()
+          vm.selectedNode = clickNode
+          let nodeAppConfig = { ...vm.nodeAppConfig }
+          Object.keys(nodeAppConfig).forEach(function(key) {
+            nodeAppConfig[key] = ''
+          })
+          vm.selectedNodeParams = {
+            label: clickNodeModel.label || '',
+            appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
+          }
+        }
+      } else if (event.item._cfg.type === 'edge') {
+        // 更新vm的data: selectedEdge 和 selectedEdgeParams
+        let clickEdge = event.item
+        if (clickEdge.hasState('selected')) {
+          let clickEdgeModel = clickEdge.getModel()
+          vm.selectedEdge = clickEdge
+          let edgeAppConfig = { ...vm.edgeAppConfig }
+          Object.keys(edgeAppConfig).forEach(function(key) {
+            edgeAppConfig[key] = ''
+          })
+          vm.selectedEdgeParams = {
+            label: clickEdgeModel.label || '',
+            appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
+          }
+        }
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
@ -0,0 +1,173 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edit mode: 通过拖拽节点上的锚点添加连线
+ */
+import utils from '../utils'
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+import G6 from '@antv/g6'
+import theme from '../theme'
+
+export default {
+  sendThis, // 暴露函数
+  name: 'drag-add-edge',
+  options: {
+    getEvents() {
+      return {
+        'node:mousedown': 'onNodeMousedown',
+        'node:mouseup': 'onNodeMouseup',
+        'edge:mouseup': 'onEdgeMouseup',
+        'mousemove': 'onMousemove'
+      }
+    },
+    onNodeMousedown(event) {
+      let self = this
+      // 交互过程中的信息
+      self.evtInfo = {
+        action: null,
+        node: event.item,
+        target: event.target
+      }
+      if (self.evtInfo.target && self.evtInfo.target.attrs.name) {
+        // todo...未来可能针对锚点增加其它功能(例如拖拽调整大小)
+        switch (self.evtInfo.target.attrs.name) {
+          case 'anchor':
+            self.evtInfo.action = 'drawEdge'
+            break
+        }
+      }
+      if (self.evtInfo && self.evtInfo.action) {
+        self[self.evtInfo.action].start.call(self, event)
+      }
+    },
+    onNodeMouseup(event) {
+      let self = this
+      if (self.evtInfo && self.evtInfo.action) {
+        self[self.evtInfo.action].stop.call(self, event)
+      }
+    },
+    onEdgeMouseup(event) {
+      let self = this
+      if (self.evtInfo && self.evtInfo.action === 'drawEdge') {
+        self[self.evtInfo.action].stop.call(self, event)
+      }
+    },
+    onMousemove(event) {
+      let self = this
+      if (self.evtInfo && self.evtInfo.action) {
+        self[self.evtInfo.action].move.call(self, event)
+      }
+    },
+    drawEdge: {
+      isMoving: false,
+      currentLine: null,
+      start: function(event) {
+        let self = this
+        let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+
+        // ************** 暂存【连线】前的数据状态 start **************
+        let graph = vm.graph
+        self.historyData = JSON.stringify(graph.save())
+        // ************** 暂存【连线】前的数据状态 end **************
+
+        let sourceAnchor
+        let sourceNodeModel = self.evtInfo.node.getModel()
+        // 锚点数据
+        let anchorPoints = self.evtInfo.node.getAnchorPoints()
+        // 处理线条目标点
+        if (anchorPoints && anchorPoints.length) {
+          // 获取距离指定坐标最近的一个锚点
+          sourceAnchor = self.evtInfo.node.getLinkPoint({
+            x: event.x,
+            y: event.y
+          })
+        }
+        self.drawEdge.currentLine = self.graph.addItem('edge', {
+          // id: G6.Util.uniqueId(),  // 这种生成id的方式有bug，会重复
+          id: utils.generateUUID(),
+          // 起始节点
+          source: sourceNodeModel.id,
+          sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : '',
+          // 终止节点/位置
+          target: {
+            x: event.x,
+            y: event.y
+          },
+          type: self.graph.$C.edge.type || 'cc-line',
+          style: G6.Util.mix({}, themeStyle.edgeStyle.default, self.graph.$C.edge.style)
+        })
+        self.drawEdge.isMoving = true
+      },
+      move(event) {
+        let self = this
+        if (self.drawEdge.isMoving && self.drawEdge.currentLine) {
+          self.graph.updateItem(self.drawEdge.currentLine, {
+            target: {
+              x: event.x,
+              y: event.y
+            }
+          })
+        }
+      },
+      stop(event) {
+        let self = this
+        if (self.drawEdge.isMoving) {
+          if (self.drawEdge.currentLine === event.item) {
+            // 画线过程中点击则移除当前画线
+            self.graph.removeItem(event.item)
+          } else {
+            let targetNode = event.item
+            let targetNodeModel = targetNode.getModel()
+            let targetAnchor = null
+            // 锚点数据
+            let anchorPoints = targetNode.getAnchorPoints()
+            // 处理线条目标点
+            if (anchorPoints && anchorPoints.length) {
+              // 获取距离指定坐标最近的一个锚点
+              targetAnchor = targetNode.getLinkPoint({ x: event.x, y: event.y })
+            }
+            self.graph.updateItem(self.drawEdge.currentLine, {
+              target: targetNodeModel.id,
+              targetAnchor: targetAnchor ? targetAnchor.anchorIndex : ''
+            })
+
+            // ************** 记录historyData的逻辑 start **************
+            if (this.historyData) {
+              let graph = this.graph
+              // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
+              // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+              if (vm.undoCount > 0) {
+                vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+                for (let i = 1; i <= vm.undoCount; i++) {
+                  let key = `graph_history_${vm.historyIndex + i}`
+                  vm.removeHistoryData(key)
+                }
+                vm.undoCount = 0
+              } else {
+                // 正常顺序执行的情况，记录拖拽前的数据状态
+                let key = `graph_history_${vm.historyIndex}`
+                vm.addHistoryData(key, this.historyData)
+              }
+              // 记录拖拽后的数据状态
+              vm.historyIndex += 1
+              let key = `graph_history_${vm.historyIndex}`
+              let currentData = JSON.stringify(graph.save())
+              vm.addHistoryData(key, currentData)
+            }
+            // ************** 记录historyData的逻辑 end **************
+          }
+        }
+        self.drawEdge.currentLine = null
+        self.drawEdge.isMoving = false
+        self.evtInfo = null
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
@ -0,0 +1,53 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'drag-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:dragstart': 'onNodeDragstart',
+        'node:dragend': 'onNodeDragend'
+      }
+    },
+    onNodeDragstart() {
+      let graph = vm.graph
+      this.historyData = JSON.stringify(graph.save())
+    },
+    onNodeDragend() {
+      if (this.historyData) {
+        let graph = this.graph
+        // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
+        // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+        if (vm.undoCount > 0) {
+          vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          for (let i = 1; i <= vm.undoCount; i++) {
+            let key = `graph_history_${vm.historyIndex + i}`
+            vm.removeHistoryData(key)
+          }
+          vm.undoCount = 0
+        } else {
+          // 正常顺序执行的情况，记录拖拽前的数据状态
+          let key = `graph_history_${vm.historyIndex}`
+          vm.addHistoryData(key, this.historyData)
+        }
+        // 记录拖拽后的数据状态
+        vm.historyIndex += 1
+        let key = `graph_history_${vm.historyIndex}`
+        let currentData = JSON.stringify(graph.save())
+        vm.addHistoryData(key, currentData)
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
@ -0,0 +1,25 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edit mode: 悬浮交互
+ */
+
+export default {
+  name: 'hover-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:mouseover': 'onNodeHover',
+        'node:mouseout': 'onNodeOut'
+      }
+    },
+    onNodeHover(event) {
+      let hoverNode = event.item
+      hoverNode.setState('hover', true)
+    },
+    onNodeOut(event) {
+      let hoverNode = event.item
+      hoverNode.setState('hover', false)
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
@ -0,0 +1,28 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: register behaviors
+ */
+
+import dragAddEdge from './drag-add-edge'
+import hoverEventEdit from './hover-event-edit'
+import clickEventEdit from './click-event-edit'
+import dragEventEdit from './drag-event-edit'
+import keyupEventEdit from './keyup-event-edit'
+
+const obj = {
+  dragAddEdge,
+  hoverEventEdit,
+  clickEventEdit,
+  dragEventEdit,
+  keyupEventEdit
+}
+
+export default {
+  obj,
+  register(G6) {
+    Object.values(obj).map(item => {
+      G6.registerBehavior(item.name, item.options)
+    })
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
@ -0,0 +1,63 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】)
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'keyup-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'keyup': 'onKeyup'
+      }
+    },
+    onKeyup(event) {
+      let graph = this.graph
+      let selectedNodes = graph.findAllByState('node', 'selected')
+      let selectedEdges = graph.findAllByState('edge', 'selected')
+      if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) {
+
+        // ************** 记录【删除】前的数据状态 start **************
+        let historyData = JSON.stringify(graph.save())
+        let key = `graph_history_${vm.historyIndex}`
+        vm.addHistoryData(key, historyData)
+        // ************** 记录【删除】前的数据状态 end **************
+
+        // 开始删除
+        for (let i = 0; i < selectedNodes.length; i++) {
+          graph.removeItem(selectedNodes[i])
+        }
+        for (let i = 0; i < selectedEdges.length; i++) {
+          graph.removeItem(selectedEdges[i])
+        }
+
+        // ************** 记录【删除】后的数据状态 start **************
+        // 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能
+        // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+        if (vm.undoCount > 0) {
+          vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          for (let i = 1; i <= vm.undoCount; i++) {
+            let key = `graph_history_${vm.historyIndex + i}`
+            vm.removeHistoryData(key)
+          }
+          vm.undoCount = 0
+        }
+        // 记录【删除】后的数据状态
+        vm.historyIndex += 1
+        key = `graph_history_${vm.historyIndex}`
+        let currentData = JSON.stringify(graph.save())
+        vm.addHistoryData(key, currentData)
+        // ************** 记录【删除】后的数据状态 end **************
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
@ -0,0 +1,13 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 线条的后期设置
+ */
+
+export default {
+  type: 'cc-line',
+  style: {
+    startArrow: false,
+    endArrow: false
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
@ -0,0 +1,11 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 配置
+ */
+
+import edge from './edge'
+
+export default {
+  edge
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
@ -0,0 +1,29 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 线公共方法
+ */
+
+import utils from '../utils'
+
+export default {
+  draw(cfg, group) {
+    const { startPoint, endPoint } = cfg
+    const keyShape = group.addShape('path', {
+      className: 'edge-shape',
+      attrs: {
+        ...cfg.style,
+        path: [
+          ['M', startPoint.x, startPoint.y],
+          ['L', endPoint.x, endPoint.y]
+        ]
+      },
+      name: 'edge-shape'
+    })
+    return keyShape
+  },
+  setState(name, value, item) {
+    // 设置边状态
+    utils.edge.setState(name, value, item)
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js
@ -0,0 +1,52 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 折线
+ */
+
+import base from './base'
+import theme from '../theme'
+
+/**
+ * fix: 继承 polyline 在 G6 3.x 里面有bug
+ * 现实现方法参考 https://g6.antv.vision/zh/examples/shape/customEdge#customPolyline
+ */
+export default {
+  name: 'cc-brokenline',
+  extendName: 'line',
+  options: {
+    ...base,
+    getPath(points) {
+      const startPoint = points[0]
+      const endPoint = points[1]
+      return [
+        ['M', startPoint.x, startPoint.y],
+        ['L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y],
+        ['L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y],
+        ['L', endPoint.x, endPoint.y]
+      ]
+    },
+    getShapeStyle(cfg) {
+      const { startPoint, endPoint } = cfg
+      const controlPoints = this.getControlPoints(cfg)
+      let points = [startPoint] // 添加起始点
+      // 添加控制点
+      if (controlPoints) {
+        points = points.concat(controlPoints)
+      }
+      // 添加结束点
+      points.push(endPoint)
+      const path = this.getPath(points)
+      const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+      const style = {
+        stroke: '#BBB',
+        lineWidth: 1,
+        path,
+        startArrow: false,
+        endArrow: false,
+        ...themeStyle.edgeStyle.default
+      }
+      return style
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js
@ -0,0 +1,15 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 曲线
+ */
+
+import base from './base'
+
+export default {
+  name: 'cc-cubic',
+  extendName: 'cubic',
+  options: {
+    ...base
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js
@ -0,0 +1,15 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 直线
+ */
+
+import base from './base'
+
+export default {
+  name: 'cc-line',
+  extendName: 'line',
+  options: {
+    ...base
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js
@ -0,0 +1,77 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 多段线
+ */
+
+import base from './base'
+import { polylineFinding } from './polyline-finding'
+
+export default {
+  name: 'cc-polyline',
+  extendName: 'single-edge',
+  options: {
+    ...base,
+    draw(cfg, group) {
+      const { startPoint, endPoint } = cfg
+      const controlPoints = this.getControlPoints(cfg)
+      let points = [startPoint]
+      if (controlPoints) {
+        points.push(controlPoints)
+      }
+      points.push(endPoint)
+      let path = this.getPath(points)
+      const keyShape = group.addShape('path', {
+        className: 'edge-shape',
+        attrs: {
+          ...cfg,
+          path: path
+        },
+        draggable: true,
+        name: 'edge-shape'
+      })
+      return keyShape
+    },
+    getPath(points) {
+      const path = []
+      for (let i = 0; i < points.length; i++) {
+        const point = points[i]
+        if (i === 0) {
+          path.push(['M', point.x, point.y])
+        } else if (i === points.length - 1) {
+          path.push(['L', point.x, point.y])
+        } else {
+          const prevPoint = points[i - 1]
+          let nextPoint = points[i + 1]
+          let cornerLen = 5
+          if (Math.abs(point.y - prevPoint.y) > cornerLen || Math.abs(point.x - prevPoint.x) > cornerLen) {
+            if (prevPoint.x === point.x) {
+              path.push(['L', point.x, point.y > prevPoint.y ? point.y - cornerLen : point.y + cornerLen])
+            } else if (prevPoint.y === point.y) {
+              path.push(['L', point.x > prevPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y])
+            }
+          }
+          const yLen = Math.abs(point.y - nextPoint.y)
+          const xLen = Math.abs(point.x - nextPoint.x)
+          if (yLen > 0 && yLen < cornerLen) {
+            cornerLen = yLen
+          } else if (xLen > 0 && xLen < cornerLen) {
+            cornerLen = xLen
+          }
+          if (prevPoint.x !== nextPoint.x && nextPoint.x === point.x) {
+            path.push(['Q', point.x, point.y, point.x, point.y > nextPoint.y ? point.y - cornerLen : point.y + cornerLen])
+          } else if (prevPoint.y !== nextPoint.y && nextPoint.y === point.y) {
+            path.push(['Q', point.x, point.y, point.x > nextPoint.x ? point.x - cornerLen : point.x + cornerLen, point.y])
+          }
+        }
+      }
+      return path
+    },
+    getControlPoints(cfg) {
+      if (!cfg.sourceNode) {
+        return cfg.controlPoints
+      }
+      return polylineFinding(cfg.sourceNode, cfg.targetNode, cfg.startPoint, cfg.endPoint, 40)
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
@ -0,0 +1,23 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: register edges
+ */
+
+import ccLine from './cc-line'
+import ccBrokenline from './cc-brokenline'
+import ccPolyline from './cc-polyline'
+import ccCubic from './cc-cubic'
+
+const obj = {
+  ccLine,
+  ccBrokenline,
+  ccPolyline,
+  ccCubic
+}
+
+export default function(G6) {
+  Object.values(obj).map(item => {
+    G6.registerEdge(item.name, item.options, item.extendName)
+  })
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/polyline-finding.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/polyline-finding.js
@ -0,0 +1,275 @@
+/**
+ * 带圆角折线连线的策略
+ * 文档：https://www.yuque.com/antv/blog/eyi70n
+ * 参考：https://github.com/guozhaolong/wfd/blob/master/src/item/edge.js
+ * 引用：https://github.com/OXOYO/X-Flowchart-Vue/blob/master/src/global/lib/g6/edge/polylineFinding.js
+ */
+
+// 折线寻径
+export const polylineFinding = function(sNode, tNode, sPort, tPort, offset = 10) {
+  const sourceBBox = sNode && sNode.getBBox ? sNode.getBBox() : getPointBBox(sPort)
+  const targetBBox = tNode && tNode.getBBox ? tNode.getBBox() : getPointBBox(tPort)
+  // 获取节点带 offset 的区域（扩展区域）
+  const sBBox = getExpandedBBox(sourceBBox, offset)
+  const tBBox = getExpandedBBox(targetBBox, offset)
+  // 获取扩展区域上的起始和终止连接点
+  const sPoint = getExpandedPort(sBBox, sPort)
+  const tPoint = getExpandedPort(tBBox, tPort)
+  // 获取合法折点集
+  let points = getConnectablePoints(sBBox, tBBox, sPoint, tPoint)
+  // 过滤合法点集，预处理、剪枝等
+  filterConnectablePoints(points, sBBox)
+  // 过滤合法点集，预处理、剪枝等
+  filterConnectablePoints(points, tBBox)
+  // 用 A-Star 算法寻径
+  let polylinePoints = AStar(points, sPoint, tPoint, sBBox, tBBox)
+  return polylinePoints
+}
+
+const getPointBBox = function(t) {
+  return {
+    centerX: t.x,
+    centerY: t.y,
+    minX: t.x,
+    minY: t.y,
+    maxX: t.x,
+    maxY: t.y,
+    height: 0,
+    width: 0
+  }
+}
+
+// 获取扩展区域
+const getExpandedBBox = function(bbox, offset) {
+  if (bbox.width === 0 && bbox.height === 0) {
+    return bbox
+  }
+  return {
+    centerX: bbox.centerX,
+    centerY: bbox.centerY,
+    minX: bbox.minX - offset,
+    minY: bbox.minY - offset,
+    maxX: bbox.maxX + offset,
+    maxY: bbox.maxY + offset,
+    height: bbox.height + 2 * offset,
+    width: bbox.width + 2 * offset
+  }
+}
+
+// 获取扩展区域上的连接点
+const getExpandedPort = function(bbox, point) {
+  // 判断连接点在上下左右哪个区域，相应地给x或y加上或者减去offset
+  if (Math.abs(point.x - bbox.centerX) / bbox.width > Math.abs(point.y - bbox.centerY) / bbox.height) {
+    return {
+      x: point.x > bbox.centerX ? bbox.maxX : bbox.minX,
+      y: point.y
+    }
+  }
+  return {
+    x: point.x,
+    y: point.y > bbox.centerY ? bbox.maxY : bbox.minY
+  }
+}
+
+// 获取合法折点集合
+const getConnectablePoints = function(sBBox, tBBox, sPoint, tPoint) {
+  let lineBBox = getBBoxFromVertexes(sPoint, tPoint)
+  let outerBBox = combineBBoxes(sBBox, tBBox)
+  let sLineBBox = combineBBoxes(sBBox, lineBBox)
+  let tLineBBox = combineBBoxes(tBBox, lineBBox)
+  let points = [
+    ...vertexOfBBox(sLineBBox),
+    ...vertexOfBBox(tLineBBox),
+    ...vertexOfBBox(outerBBox)
+  ]
+  const centerPoint = { x: outerBBox.centerX, y: outerBBox.centerY }
+  let bboxes = [outerBBox, sLineBBox, tLineBBox, lineBBox]
+  bboxes.forEach(bbox => {
+    // 包含 bbox 延长线和线段的相交线
+    points = [
+      ...points,
+      ...crossPointsByLineAndBBox(bbox, centerPoint)
+    ]
+  })
+  points.push({ x: sPoint.x, y: tPoint.y })
+  points.push({ x: tPoint.x, y: sPoint.y })
+  return points
+}
+
+const getBBoxFromVertexes = function(sPoint, tPoint) {
+  const minX = Math.min(sPoint.x, tPoint.x)
+  const maxX = Math.max(sPoint.x, tPoint.x)
+  const minY = Math.min(sPoint.y, tPoint.y)
+  const maxY = Math.max(sPoint.y, tPoint.y)
+
+  return {
+    centerX: (minX + maxX) / 2,
+    centerY: (minY + maxY) / 2,
+    maxX: maxX,
+    maxY: maxY,
+    minX: minX,
+    minY: minY,
+    height: maxY - minY,
+    width: maxX - minX
+  }
+}
+
+const combineBBoxes = function(sBBox, tBBox) {
+  const minX = Math.min(sBBox.minX, tBBox.minX)
+  const minY = Math.min(sBBox.minY, tBBox.minY)
+  const maxX = Math.max(sBBox.maxX, tBBox.maxX)
+  const maxY = Math.max(sBBox.maxY, tBBox.maxY)
+
+  return {
+    centerX: (minX + maxX) / 2,
+    centerY: (minY + maxY) / 2,
+    minX: minX,
+    minY: minY,
+    maxX: maxX,
+    maxY: maxY,
+    height: maxY - minY,
+    width: maxX - minX
+  }
+}
+
+const vertexOfBBox = function(bbox) {
+  return [
+    { x: bbox.minX, y: bbox.minY },
+    { x: bbox.maxX, y: bbox.minY },
+    { x: bbox.maxX, y: bbox.maxY },
+    { x: bbox.minX, y: bbox.maxY }
+  ]
+}
+
+const crossPointsByLineAndBBox = function(bbox, centerPoint) {
+  let crossPoints = []
+  if (!(centerPoint.x < bbox.minX || centerPoint.x > bbox.maxX)) {
+    crossPoints = [
+      ...crossPoints,
+      { x: centerPoint.x, y: bbox.minY },
+      { x: centerPoint.x, y: bbox.maxY }
+    ]
+  }
+  if (!(centerPoint.y < bbox.minY || centerPoint.y > bbox.maxY)) {
+    crossPoints = [
+      ...crossPoints,
+      { x: bbox.minX, y: centerPoint.y },
+      { x: bbox.maxX, y: centerPoint.y }
+    ]
+  }
+
+  return crossPoints
+}
+
+// 过滤连接点
+const filterConnectablePoints = function(points, bbox) {
+  return points.filter(point => {
+    return point.x <= bbox.minX || point.x >= bbox.maxX || point.y <= bbox.minY || point.y >= bbox.maxY
+  })
+}
+
+const crossBBox = function(bboxes, p1, p2) {
+  for (let i = 0; i < bboxes.length; i++) {
+    const bbox = bboxes[i]
+    if (p1.x === p2.x && bbox.minX < p1.x && bbox.maxX > p1.x) {
+      if ((p1.y < bbox.maxY && p2.y >= bbox.maxY) || (p2.y < bbox.maxY && p1.y >= bbox.maxY)) {
+        return true
+      }
+    } else if (p1.y === p2.y && bbox.minY < p1.y && bbox.maxY > p1.y) {
+      if ((p1.x < bbox.maxX && p2.x >= bbox.maxX) || (p2.x < bbox.maxX && p1.x >= bbox.maxX)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+const getCost = function(p1, p2) {
+  return Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y)
+}
+
+// aStar 寻径
+const AStar = function(points, sPoint, tPoint, sBBox, tBBox) {
+  const openList = [sPoint]
+  const closeList = []
+  points.forEach(item => {
+    item.id = item.x + '-' + item.y
+  })
+  let tmpArr = []
+  points.forEach(item => {
+    if (!tmpArr.includes(target => target.id === item.id)) {
+      tmpArr.push(item)
+    }
+  })
+  points = [
+    ...tmpArr,
+    tPoint
+  ]
+  let endPoint
+  while (openList.length > 0) {
+    let minCostPoint
+    openList.forEach((p, i) => {
+      if (!p.parent) {
+        p.f = 0
+      }
+      if (!minCostPoint) {
+        minCostPoint = p
+      }
+      if (p.f < minCostPoint.f) {
+        minCostPoint = p
+      }
+    })
+    if (minCostPoint.x === tPoint.x && minCostPoint.y === tPoint.y) {
+      endPoint = minCostPoint
+      break
+    }
+    openList.splice(openList.findIndex(o => o.x === minCostPoint.x && o.y === minCostPoint.y), 1)
+    closeList.push(minCostPoint)
+    const neighbor = points.filter(p => {
+        return (p.x === minCostPoint.x || p.y === minCostPoint.y) &&
+          !(p.x === minCostPoint.x && p.y === minCostPoint.y) &&
+          !crossBBox([sBBox, tBBox], minCostPoint, p)
+      }
+    )
+    neighbor.forEach(p => {
+      const inOpen = openList.find(o => o.x === p.x && o.y === p.y)
+      const currentG = getCost(p, minCostPoint)
+      if (!closeList.find(o => o.x === p.x && o.y === p.y)) {
+        if (inOpen) {
+          if (p.g > currentG) {
+            p.parent = minCostPoint
+            p.g = currentG
+            p.f = p.g + p.h
+          }
+        } else {
+          p.parent = minCostPoint
+          p.g = currentG
+          let h = getCost(p, tPoint)
+          if (crossBBox([tBBox], p, tPoint)) {
+            // 如果穿过bbox则增加该点的预估代价为bbox周长的一半
+            h += (tBBox.width / 2 + tBBox.height / 2)
+          }
+          p.h = h
+          p.f = p.g + p.h
+          openList.push(p)
+        }
+      }
+    })
+  }
+  if (endPoint) {
+    const result = []
+    result.push({
+      x: endPoint.x,
+      y: endPoint.y
+    })
+    while (endPoint.parent) {
+      endPoint = endPoint.parent
+      result.push({
+        x: endPoint.x,
+        y: endPoint.y
+      })
+    }
+    return result.reverse()
+  }
+  return []
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
@ -0,0 +1,159 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 图的布局方式/图的初始化
+ */
+
+import d3 from '../plugins/d3-installer'
+import theme from '../theme'
+
+/**
+ * 图的布局方式/图的初始化
+ * @type {{commonGraph: (function(*, *): G6.Graph)}}
+ */
+const initGraph = {
+  /**
+   * 一般布局
+   * @param G6
+   * @param options
+   * @returns {G6.Graph}
+   */
+  commonGraph: function(G6, options) {
+    let graphData = options.graphData
+    let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+    // 生成G6实例
+    let graph = new G6.Graph({
+      plugins: options.plugins,
+      container: options.container,
+      width: options.width,
+      height: options.height,
+      // layout: {
+      //   type: 'random',
+      //   width: options.width,
+      //   height: options.height
+      // },
+      defaultNode: {
+        type: 'top-rect',
+        labelCfg: {
+          position: 'bottom'
+        }
+      },
+      defaultEdge: {
+        type: 'cc-line',
+        labelCfg: {
+          position: 'center',
+          autoRotate: false
+        }
+      },
+      nodeStateStyles: themeStyle.nodeStyle,
+      // nodeStyle: {
+      //   selected: {
+      //     shadowColor: '#626262',
+      //     shadowBlur: 8,
+      //     shadowOffsetX: -1,
+      //     shadowOffsetY: 3
+      //   }
+      // },
+      edgeStateStyles: themeStyle.edgeStyle,
+      // edgeStyle: {
+      //   default: {
+      //     stroke: '#e2e2e2',
+      //     lineWidth: 3,
+      //     lineAppendWidth: 10
+      //   },
+      //   selected: {
+      //     shadowColor: '#626262',
+      //     shadowBlur: 3
+      //   }
+      // },
+      modes: options.modes
+    })
+    // 将 read 方法分解成 data() 和 render 方法，便于整个生命周期的管理
+    graph.read(graphData)
+    graph.render()
+    // 返回G6实例
+    return graph
+  },
+  /**
+   * 力导布局
+   * @param G6
+   * @param options
+   * @returns {*}
+   */
+  forceLayoutGraph: function(resolve, G6, options) {
+    let graphData = options.graphData
+    let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+    // 生成G6实例
+    let graph = new G6.Graph({
+      container: options.container,
+      width: options.width,
+      height: options.height,
+      nodeStateStyles: themeStyle.nodeStyle,
+      edgeStateStyles: themeStyle.edgeStyle
+    })
+    // 初始化力导布局
+    let simulation = d3
+      .forceSimulation()
+      .force(
+        'link',
+        d3
+          .forceLink()
+          .id(function(d) {
+            return d.id
+          })
+          .distance(linkDistance)
+          .strength(0.5)
+      )
+      .force('charge', d3.forceManyBody().strength(-500).distanceMax(500).distanceMin(100))
+      .force('center', d3.forceCenter(options.width / 2, options.height / 2))
+    // 定义节点数据
+    simulation.nodes(graphData.nodes).on('tick', ticked)
+    // 定义连线数据
+    let edges = []
+    for (let i = 0; i < graphData.edges.length; i++) {
+      edges.push({
+        id: graphData.edges[i].id,
+        source: graphData.edges[i].source,
+        target: graphData.edges[i].target
+      })
+    }
+    simulation.force('link').links(edges)
+    graph.data(graphData)
+    graph.render()
+
+    function linkDistance(d) {
+      return 150
+    }
+
+    function ticked() {
+      // protect: planA: 移除事件监听器 planB: 手动停止力模拟
+      if (graph.destroyed) {
+        // simulation.nodes(graphData.nodes).on('tick', null)
+        simulation.stop()
+        return
+      }
+      if (!graph.get('data')) {
+        // 若是第一次渲染，定义数据，渲染
+        graph.data(graphData)
+        graph.render()
+      } else {
+        // 后续渲染，直接刷新所有点和边的位置
+        graph.refreshPositions()
+      }
+    }
+
+    // 控制时间: 只布局10秒
+    let t = setTimeout(function() {
+      simulation.stop()
+      resolve(graph)
+    }, 10000)
+
+    // 判断force-layout结束
+    simulation.on('end', () => {
+      clearTimeout(t)
+      resolve(graph)
+    })
+  }
+}
+
+export default initGraph
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
@ -0,0 +1,21 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 节点基础方法
+ */
+
+import utils from '../utils'
+
+export default {
+  setState(name, value, item) {
+    // 设置节点状态
+    utils.node.setState(name, value, item)
+    // 设置锚点状态
+    utils.anchor.setState(name, value, item)
+  },
+  // 绘制后附加锚点
+  afterDraw(cfg, group) {
+    // 绘制锚点
+    utils.anchor.draw(cfg, group)
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
@ -0,0 +1,22 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: register nodes
+ */
+
+import ccRect from './top-rect'
+import ccImage from './top-image'
+
+const obj = {
+  ccRect,
+  ccImage
+}
+
+export default {
+  obj,
+  register(G6) {
+    Object.values(obj).map(item => {
+      G6.registerNode(item.name, item.options, item.extendName)
+    })
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
@ -0,0 +1,126 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 图片节点
+ */
+
+import utils from '../utils'
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis,
+  name: 'top-image',
+  extendName: 'image',
+  options: {
+    setState(name, value, item) {
+      // 设置节点状态
+      utils.node.setState(name, value, item)
+      // 设置锚点状态
+      if (vm.graphMode === 'edit') {
+        utils.anchor.setState(name, value, item)
+      }
+    },
+    // 绘制后附加锚点
+    afterDraw(cfg, group) {
+      // 绘制锚点
+      if (vm.graphMode === 'edit') {
+        utils.anchor.draw(cfg, group)
+      }
+    },
+    // 设置告警状态
+    afterUpdate(cfg, node) {
+      const group = node.getContainer()
+      // 获取children
+      const halos = group.findAll(function(item) {
+        return item.attrs.name === 'halo'
+      })
+      // 告警
+      if (cfg.appState && cfg.appState.alert) {
+        if (halos.length > 0) {
+          return
+        }
+        let size = this.getSize(cfg) || [48, 48]
+        let r = size[0] / 2
+        let { id } = cfg
+        let halo1 = group.addShape('circle', {
+          id: id + '_halo_' + 1,
+          attrs: {
+            name: 'halo',
+            x: 0,
+            y: 0,
+            r: r,
+            fill: cfg.color || '#F56C6C',
+            opacity: 0.6
+          },
+          name: 'halo',
+          zIndex: -3
+        })
+        let halo2 = group.addShape('circle', {
+          id: id + '_halo_' + 2,
+          attrs: {
+            name: 'halo',
+            x: 0,
+            y: 0,
+            r: r,
+            fill: cfg.color || '#F56C6C', // 为了显示清晰，随意设置了颜色
+            opacity: 0.6
+          },
+          name: 'halo',
+          zIndex: -2
+        })
+        let halo3 = group.addShape('circle', {
+          id: id + '_halo_' + 3,
+          attrs: {
+            name: 'halo',
+            x: 0,
+            y: 0,
+            r: r,
+            fill: cfg.color || '#F56C6C',
+            opacity: 0.6
+          },
+          name: 'halo',
+          zIndex: -1
+        })
+        group.sort() // 排序，根据zIndex 排序
+        halo1.animate({ // 逐渐放大，并消失
+          r: r + 10,
+          opacity: 0.1,
+        }, {
+          repeat: true, // 循环
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 0 // 无延迟
+        })
+        halo2.animate({ // 逐渐放大，并消失
+          r: r + 10,
+          opacity: 0.1
+        }, {
+          repeat: true, // 循环
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 1000 // 1 秒延迟
+        })
+        halo3.animate({ // 逐渐放大，并消失
+          r: r + 10,
+          opacity: 0.1
+        }, {
+          repeat: true, // 循环
+          duration: 3000,
+          easing: 'easeCubic',
+          delay: 2000 // 2 秒延迟
+        })
+      } else {
+        halos.forEach(halo => {
+          // FIXME: G6 3.x在底层库遗留了bug，导致removeChild()方法报错，等待解决
+          group.removeChild(halo)
+        })
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
@ -0,0 +1,30 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 矩形节点
+ */
+
+import base from './base'
+import theme from '../theme'
+
+export default {
+  name: 'top-rect',
+  extendName: 'rect',
+  options: {
+    ...base,
+    getShapeStyle(cfg) {
+      const size = this.getSize(cfg) || [48, 48]
+      const width = size[0]
+      const height = size[1]
+      const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+      const style = {
+        x: 0 - width / 2,
+        y: 0 - height / 2,
+        width: width,
+        height: height,
+        ...themeStyle.nodeStyle.default
+      }
+      return style
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
@ -0,0 +1,9 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: install 3rd plugins
+ */
+
+import * as d3 from 'd3-force/dist/d3-force'
+
+export default d3
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
@ -0,0 +1,177 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: dark style
+ */
+
+export default {
+  // 节点样式
+  nodeStyle: {
+    default: {
+      stroke: '#CED4D9',
+      fill: 'transparent',
+      shadowOffsetX: 0,
+      shadowOffsetY: 4,
+      shadowBlur: 10,
+      shadowColor: 'rgba(13, 26, 38, 0.08)',
+      lineWidth: 1,
+      radius: 4,
+      strokeOpacity: 0.7
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+      // shadowColor: '#626262',
+      // shadowBlur: 8,
+      // shadowOffsetX: -1,
+      // shadowOffsetY: 3
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 节点标签样式
+  nodeLabelCfg: {
+    positions: 'center',
+    style: {
+      fill: '#FFF'
+    }
+  },
+  // 连线样式
+  edgeStyle: {
+    default: {
+      stroke: '#53da3a',
+      lineWidth: 2,
+      strokeOpacity: 0.92,
+      lineAppendWidth: 10
+      // endArrow: true
+    },
+    active: {
+      shadowColor: 'red',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    inactive: {
+      shadowColor: ''
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 锚点样式
+  anchorStyle: {
+    default: {
+      radius: 3,
+      symbol: 'circle',
+      fill: '#FFFFFF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+  // 锚点背景样式
+  anchorBgStyle: {
+    default: {
+      radius: 10,
+      symbol: 'circle',
+      fill: '#1890FF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.5
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+
+
+  nodeActivedOutterStyle: { lineWidth: 0 },
+  groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
+  nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
+  groupActivedStyle: { stroke: '#1890FF' },
+  edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
+  nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
+  groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
+
+  groupBackgroundPadding: [40, 10, 10, 10],
+  groupLabelOffsetX: 10,
+  groupLabelOffsetY: 10,
+  edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  edgeLabelRectPadding: 4,
+  edgeLabelRectStyle: { fill: 'white' },
+  nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  groupStyle: { stroke: '#CED4D9', radius: 4 },
+  groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
+  multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
+  dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
+  dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
+  anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
+  anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
+  anchorHotsoptActivedStyle: { radius: 14 },
+  anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
+  nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
+  edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
+  nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
+  cursor: {
+    panningCanvas: '-webkit-grabbing',
+    beforePanCanvas: '-webkit-grab',
+    hoverNode: 'move',
+    hoverEffectiveAnchor: 'crosshair',
+    hoverEdge: 'default',
+    hoverGroup: 'move',
+    hoverUnEffectiveAnchor: 'default',
+    hoverEdgeControllPoint: 'crosshair',
+    multiSelect: 'crosshair'
+  },
+  nodeDelegationStyle: {
+    stroke: '#1890FF',
+    fill: '#1890FF',
+    fillOpacity: .08,
+    lineDash: [4, 4],
+    radius: 4,
+    lineWidth: 1
+  },
+  edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
@ -0,0 +1,177 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: default style
+ */
+
+export default {
+  // 节点样式
+  nodeStyle: {
+    default: {
+      stroke: '#CED4D9',
+      fill: 'transparent',
+      shadowOffsetX: 0,
+      shadowOffsetY: 4,
+      shadowBlur: 10,
+      shadowColor: 'rgba(13, 26, 38, 0.08)',
+      lineWidth: 1,
+      radius: 4,
+      strokeOpacity: 0.7
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+      // shadowColor: '#626262',
+      // shadowBlur: 8,
+      // shadowOffsetX: -1,
+      // shadowOffsetY: 3
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 节点标签样式
+  nodeLabelCfg: {
+    positions: 'center',
+    style: {
+      fill: '#000'
+    }
+  },
+  // 连线样式
+  edgeStyle: {
+    default: {
+      stroke: '#A3B1BF',
+      lineWidth: 2,
+      strokeOpacity: 0.92,
+      lineAppendWidth: 10
+      // endArrow: true
+    },
+    active: {
+      shadowColor: 'red',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    inactive: {
+      shadowColor: ''
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 锚点样式
+  anchorStyle: {
+    default: {
+      r: 3,
+      symbol: 'circle',
+      fill: '#FFFFFF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+  // 锚点背景样式
+  anchorBgStyle: {
+    default: {
+      r: 10,
+      symbol: 'circle',
+      fill: '#1890FF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.5
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+
+
+  nodeActivedOutterStyle: { lineWidth: 0 },
+  groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
+  nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
+  groupActivedStyle: { stroke: '#1890FF' },
+  edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
+  nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
+  groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
+
+  groupBackgroundPadding: [40, 10, 10, 10],
+  groupLabelOffsetX: 10,
+  groupLabelOffsetY: 10,
+  edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  edgeLabelRectPadding: 4,
+  edgeLabelRectStyle: { fill: 'white' },
+  nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  groupStyle: { stroke: '#CED4D9', radius: 4 },
+  groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
+  multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
+  dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
+  dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
+  anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
+  anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
+  anchorHotsoptActivedStyle: { radius: 14 },
+  anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
+  nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
+  edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
+  nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
+  cursor: {
+    panningCanvas: '-webkit-grabbing',
+    beforePanCanvas: '-webkit-grab',
+    hoverNode: 'move',
+    hoverEffectiveAnchor: 'crosshair',
+    hoverEdge: 'default',
+    hoverGroup: 'move',
+    hoverUnEffectiveAnchor: 'default',
+    hoverEdgeControllPoint: 'crosshair',
+    multiSelect: 'crosshair'
+  },
+  nodeDelegationStyle: {
+    stroke: '#1890FF',
+    fill: '#1890FF',
+    fillOpacity: .08,
+    lineDash: [4, 4],
+    radius: 4,
+    lineWidth: 1
+  },
+  edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
@ -0,0 +1,15 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: 编辑器主题样式 - 节点、连线的预设样式
+ */
+
+import defaultStyle from './default-style'
+import darkStyle from './dark-style'
+import officeStyle from './office-style'
+
+export default {
+  defaultStyle,
+  darkStyle,
+  officeStyle
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
@ -0,0 +1,177 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: office style
+ */
+
+export default {
+  // 节点样式
+  nodeStyle: {
+    default: {
+      stroke: '#CED4D9',
+      fill: '#FFFFFF',
+      shadowOffsetX: 0,
+      shadowOffsetY: 4,
+      shadowBlur: 10,
+      shadowColor: 'rgba(13, 26, 38, 0.08)',
+      lineWidth: 1,
+      radius: 4,
+      strokeOpacity: 0.7
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+      // shadowColor: '#626262',
+      // shadowBlur: 8,
+      // shadowOffsetX: -1,
+      // shadowOffsetY: 3
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 节点标签样式
+  nodeLabelCfg: {
+    positions: 'center',
+    style: {
+      fill: '#000'
+    }
+  },
+  // 连线样式
+  edgeStyle: {
+    default: {
+      stroke: '#41c23a',
+      lineWidth: 2,
+      strokeOpacity: 0.92,
+      lineAppendWidth: 10
+      // endArrow: true
+    },
+    active: {
+      shadowColor: 'red',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    inactive: {
+      shadowColor: ''
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 锚点样式
+  anchorStyle: {
+    default: {
+      radius: 3,
+      symbol: 'circle',
+      fill: '#FFFFFF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+  // 锚点背景样式
+  anchorBgStyle: {
+    default: {
+      radius: 10,
+      symbol: 'circle',
+      fill: '#1890FF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.5
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+
+
+  nodeActivedOutterStyle: { lineWidth: 0 },
+  groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
+  nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
+  groupActivedStyle: { stroke: '#1890FF' },
+  edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
+  nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
+  groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
+
+  groupBackgroundPadding: [40, 10, 10, 10],
+  groupLabelOffsetX: 10,
+  groupLabelOffsetY: 10,
+  edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  edgeLabelRectPadding: 4,
+  edgeLabelRectStyle: { fill: 'white' },
+  nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  groupStyle: { stroke: '#CED4D9', radius: 4 },
+  groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
+  multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
+  dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
+  dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
+  anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
+  anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
+  anchorHotsoptActivedStyle: { radius: 14 },
+  anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
+  nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
+  edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
+  nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
+  cursor: {
+    panningCanvas: '-webkit-grabbing',
+    beforePanCanvas: '-webkit-grab',
+    hoverNode: 'move',
+    hoverEffectiveAnchor: 'crosshair',
+    hoverEdge: 'default',
+    hoverGroup: 'move',
+    hoverUnEffectiveAnchor: 'default',
+    hoverEdgeControllPoint: 'crosshair',
+    multiSelect: 'crosshair'
+  },
+  nodeDelegationStyle: {
+    stroke: '#1890FF',
+    fill: '#1890FF',
+    fillOpacity: .08,
+    lineDash: [4, 4],
+    radius: 4,
+    lineWidth: 1
+  },
+  edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
@ -0,0 +1,151 @@
+<template>
+  <div class="toolbar">
+    <div class="left">
+      <!--<el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
+      <cc-dropdown
+        class="edge-shape"
+        :dropdown-items="$parent.edgeShapeList"
+        @change="$parent.changeEdgeShapeHandler"
+      >
+      </cc-dropdown>
+    </div>
+    <div class="center">
+      <div class="graph-ops">
+        <i class="iconfont icon-undo" title="撤销" :class="$parent.disableUndo ? 'disabled':''"
+           @click="$parent.undoHandler"></i>
+        <i class="iconfont icon-redo" title="重做" :class="$parent.disableRedo ? 'disabled':''"
+           @click="$parent.redoHandler"></i>
+        <span class="separator"></span>
+        <i class="iconfont icon-copy" title="复制" :class="$parent.disableCopy ? 'disabled':''"
+           @click="$parent.copyHandler"></i>
+        <i class="iconfont icon-paste" title="粘贴" :class="$parent.disablePaste ? 'disabled':''"
+           @click="$parent.pasteHandler"></i>
+        <i class="iconfont icon-clear" title="删除" :class="$parent.disableDelete ? 'disabled':''"
+           @click="$parent.deleteHandler"></i>
+        <span class="separator"></span>
+        <i class="iconfont icon-zoom-in" id="zoom-in" title="放大" @click="$parent.zoomInHandler"></i>
+        <i class="iconfont icon-zoom-out" title="缩小" @click="$parent.zoomOutHandler"></i>
+        <i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
+        <i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
+        <span class="separator"></span>
+        <i class="iconfont icon-roi-select" id="multi-select" title="框选" @click="$parent.multiSelectHandler"></i>
+      </div>
+    </div>
+    <div class="right">
+      <cc-button size="mini" @click="$parent.forceLayoutHandler">自动布局</cc-button>
+      <!--<el-button size="mini" @click="$parent.circularLayoutHandler">环形布局</el-button>-->
+      <!--<el-button size="mini" @click="$parent.radialLayoutHandler">辐射</el-button>-->
+      <!--<el-button size="mini" @click="$parent.mdsLayoutHandler">MDS</el-button>-->
+      <!--<el-button size="mini" @click="$parent.dagreLayoutHandler">层次</el-button>-->
+      <!--<el-button size="mini" @click="$parent.autoLayoutHandler">自动（old）</el-button>-->
+      <!-- todo 返回到预览模式      -->
+      <cc-button size="mini" @click="$parent.changeModeHandler('preview')">返回</cc-button>
+      <cc-button size="mini" @click="$parent.saveDataHandler">保存</cc-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button, Dropdown } from '../../elements';
+
+export default {
+  name: "ToolbarEdit",
+  components: {
+    "cc-button": Button,
+    "cc-dropdown": Dropdown
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.toolbar {
+  /*z-index: 3;*/
+  /*width: 100%;*/
+  /*height: 42px;*/
+  color: #333;
+  text-align: left;
+  vertical-align: middle;
+  line-height: 42px;
+  background-color: #ffffff;
+  border: 1px solid #E9E9E9;
+  box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  .left {
+    display: inline-block;
+    width: 12%;
+  }
+
+  .center {
+    display: inline-block;
+    width: 58%;
+  }
+
+  .right {
+    display: inline-block;
+    width: 30%;
+    text-align: right;
+  }
+
+  .edge-enabled {
+    width: 40%;
+    text-align: center;
+  }
+
+  .edge-shape {
+    width: 100%;
+    /*margin-right: 20px;*/
+    line-height: 25px;
+    text-align: center;
+    /*border-right: 1px solid #E6E9ED;*/
+  }
+
+  .graph-ops {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 20px;
+
+    i {
+      width: 20px;
+      height: 20px;
+      margin: 0 6px;
+      line-height: 20px;
+      color: #a8a8a8;
+      text-align: center;
+      border-radius: 2px;
+      display: inline-block;
+      border: 1px solid rgba(2, 2, 2, 0);
+    }
+
+    i:hover {
+      cursor: pointer;
+      border: 1px solid #E9E9E9;
+    }
+
+    .disabled {
+      color: rgba(0, 0, 0, 0.25);
+    }
+
+    .disabled:hover {
+      cursor: not-allowed;
+      border: 1px solid rgba(2, 2, 2, 0);
+    }
+
+    .icon-select {
+      background-color: #EEEEEE;
+    }
+
+    .separator {
+      margin: 4px;
+      border-left: 1px solid #E9E9E9;
+    }
+  }
+
+  .cc-button {
+    margin: 0 5px;
+  }
+}
+</style>
--- a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue
@ -0,0 +1,171 @@
+<template>
+  <div class="toolbar">
+    <div class="left">
+      <cc-dropdown
+        class="theme-style"
+        ref="themeOptions"
+        :dropdown-items="themeOptions"
+        @change="toggleThemeChange"
+      >
+      </cc-dropdown>
+    </div>
+    <div class="center">
+      <div class="graph-ops">
+        <i class="iconfont icon-zoom-in" id="zoom-in" title="放大" @click="$parent.zoomInHandler"></i>
+        <i class="iconfont icon-zoom-out" title="缩小" @click="$parent.zoomOutHandler"></i>
+        <i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
+        <i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
+        <span class="separator"></span>
+        <checkbox @change="$parent.enableMinimapHandler">导航器</checkbox>
+        <cc-dropdown :dropdown-items="refreshOptions" @change="toggleAutoRefresh"></cc-dropdown>
+      </div>
+    </div>
+    <div class="right">
+      <cc-button size="mini" @click="$parent.manualRefreshHandler">刷新</cc-button>
+      <cc-button size="mini" @click="$parent.changeModeHandler('edit')">编辑</cc-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Checkbox, Button, Dropdown } from '../../elements'
+
+export default {
+  name: 'ToolbarEdit',
+  components: {
+    'checkbox': Checkbox,
+    'cc-button': Button,
+    'cc-dropdown': Dropdown
+  },
+  data() {
+    return {
+      themeOptions: [
+        { value: 'defaultStyle', label: '默认主题' },
+        { value: 'darkStyle', label: '暗黑风格' },
+        { value: 'officeStyle', label: '办公风格' }
+      ],
+      refreshOptions: [
+        { value: -1, label: '不自动刷新' },
+        { value: 10000, label: '10秒自动刷新' },
+        { value: 30000, label: '30秒自动刷新' },
+        { value: 60000, label: '60秒自动刷新' }
+      ]
+    }
+  },
+  methods: {
+    toggleThemeChange(clickItem) {
+      this.$parent.changeGraphTheme(clickItem.value)
+    },
+    toggleAutoRefresh(clickItem) {
+      this.$parent.autoRefreshHandler(clickItem.value)
+    },
+    // 给父组件调用（代码触发主题修改）
+    changeThemeActiveIndex(index) {
+      this.$refs.themeOptions.activeIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.toolbar {
+  /*height: 42px;*/
+  color: #333;
+  text-align: left;
+  vertical-align: middle;
+  line-height: 42px;
+  background-color: #ffffff;
+  border: 1px solid #E9E9E9;
+  box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  .left {
+    display: inline-block;
+    width: 12%;
+  }
+
+  .center {
+    display: inline-block;
+    width: 58%;
+  }
+
+  .right {
+    display: inline-block;
+    width: 30%;
+    text-align: right;
+  }
+
+  .edge-enabled {
+    width: 40%;
+    text-align: center;
+  }
+
+  .edge-type {
+    width: 60%;
+    line-height: 25px;
+    text-align: left;
+  }
+
+  .theme-style {
+    width: 100%;
+    line-height: 25px;
+    text-align: center;
+  }
+
+  .graph-ops {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 20px;
+
+    i {
+      width: 20px;
+      height: 20px;
+      margin: 0 6px;
+      line-height: 20px;
+      color: #a8a8a8;
+      text-align: center;
+      border-radius: 2px;
+      display: inline-block;
+      border: 1px solid rgba(2, 2, 2, 0);
+    }
+
+    i:hover {
+      cursor: pointer;
+      border: 1px solid #E9E9E9;
+    }
+
+    .disabled {
+      color: rgba(0, 0, 0, 0.25);
+    }
+
+    .disabled:hover {
+      cursor: not-allowed;
+      border: 1px solid rgba(2, 2, 2, 0);
+    }
+
+    .icon-select {
+      background-color: #EEEEEE;
+    }
+
+    .separator {
+      margin: 4px;
+      border-left: 1px solid #E9E9E9;
+    }
+
+    .auto-refresh {
+      margin: 0 8px 0 12px;
+    }
+
+    .checkbox {
+      margin: 0 6px;
+    }
+  }
+
+  .cc-button {
+    margin: 0 5px;
+  }
+}
+</style>
--- a/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js
@ -0,0 +1,59 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: draw anchor
+ */
+
+import theme from '../../theme'
+
+export default function(cfg, group) {
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  let { anchorPoints, width, height, id } = cfg
+  if (anchorPoints && anchorPoints.length) {
+    for (let i = 0, len = anchorPoints.length; i < len; i++) {
+      let [x, y] = anchorPoints[i]
+      // 计算Marker中心点坐标
+      let originX = -width / 2
+      let originY = -height / 2
+      let anchorX = x * width + originX
+      let anchorY = y * height + originY
+      // 添加锚点背景
+      let anchorBgShape = group.addShape('marker', {
+        id: id + '_anchor_bg_' + i,
+        attrs: {
+          name: 'anchorBg',
+          x: anchorX,
+          y: anchorY,
+          // 锚点默认样式
+          ...themeStyle.anchorBgStyle.default
+        },
+        draggable: false,
+        name: 'markerBg-shape'
+      })
+      // 添加锚点Marker形状
+      let anchorShape = group.addShape('marker', {
+        id: id + '_anchor_' + i,
+        attrs: {
+          name: 'anchor',
+          x: anchorX,
+          y: anchorY,
+          // 锚点默认样式
+          ...themeStyle.anchorStyle.default
+        },
+        draggable: false,
+        name: 'marker-shape'
+      })
+
+      anchorShape.on('mouseenter', function() {
+        anchorBgShape.attr({
+          ...themeStyle.anchorBgStyle.active
+        })
+      })
+      anchorShape.on('mouseleave', function() {
+        anchorBgShape.attr({
+          ...themeStyle.anchorBgStyle.inactive
+        })
+      })
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js
@ -0,0 +1,15 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: anchor
+ */
+
+import draw from './draw'
+import setState from './set-state'
+import update from './update'
+
+export default {
+  draw,
+  setState,
+  update
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js
@ -0,0 +1,26 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: set anchor state
+ */
+
+import theme from '../../theme'
+
+export default function(name, value, item) {
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  if (name === 'hover') {
+    let group = item.getContainer()
+    let children = group.get('children')
+    for (let i = 0, len = children.length; i < len; i++) {
+      let child = children[i]
+      // 处理锚点状态
+      if (child.attrs.name === 'anchor') {
+        if (value) {
+          child.attr(themeStyle.anchorStyle.hover)
+        } else {
+          child.attr(themeStyle.anchorStyle.unhover)
+        }
+      }
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js
@ -0,0 +1,31 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: update anchor
+ */
+
+export default function(cfg, group) {
+  let { anchorPoints, width, height, id } = cfg
+  if (anchorPoints && anchorPoints.length) {
+    for (let i = 0, len = anchorPoints.length; i < len; i++) {
+      let [x, y] = anchorPoints[i]
+      // 计算Marker中心点坐标
+      let originX = -width / 2
+      let originY = -height / 2
+      let anchorX = x * width + originX
+      let anchorY = y * height + originY
+      // 锚点背景
+      let anchorBgShape = group.findById(id + '_anchor_bg_' + i)
+      // 锚点
+      let anchorShape = group.findById(id + '_anchor_' + i)
+      anchorBgShape.attr({
+        x: anchorX,
+        y: anchorY
+      })
+      anchorShape.attr({
+        x: anchorX,
+        y: anchorY
+      })
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/index.js
@ -0,0 +1,11 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: edge
+ */
+
+import setState from './set-state'
+
+export default {
+  setState
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js
@ -0,0 +1,26 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: set edge state
+ */
+
+import theme from '../../theme'
+
+export default function(name, value, item) {
+  const group = item.getContainer()
+  const shape = group.get('children')[0] // 顺序根据 draw 时确定
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  if (name === 'active') {
+    if (value) {
+      shape.attr(themeStyle.edgeStyle.active)
+    } else {
+      shape.attr(themeStyle.edgeStyle.inactive)
+    }
+  } else if (name === 'selected') {
+    if (value) {
+      shape.attr(themeStyle.edgeStyle.selected)
+    } else {
+      shape.attr(themeStyle.edgeStyle.unselected)
+    }
+  }
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/index.js
@ -0,0 +1,64 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: graph utils
+ */
+
+import node from './node'
+import anchor from './anchor'
+import edge from './edge'
+
+/**
+ * 比较两个对象的内容是否相同（两个对象的键值都相同）
+ * @param obj1
+ * @param obj2
+ * @returns {*}
+ */
+const isObjectValueEqual = function(obj1, obj2) {
+  let o1 = obj1 instanceof Object
+  let o2 = obj2 instanceof Object
+  // 不是对象的情况
+  if (!o1 || !o2) {
+    return obj1 === obj2
+  }
+  // 对象的属性（key值）个数不相等
+  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+    return false
+  }
+  // 判断每个属性（如果属性值也是对象则需要递归）
+  for (let attr in obj1) {
+    let t1 = obj1[attr] instanceof Object
+    let t2 = obj2[attr] instanceof Object
+    if (t1 && t2) {
+      return isObjectValueEqual(obj1[attr], obj2[attr])
+    } else if (obj1[attr] !== obj2[attr]) {
+      return false
+    }
+  }
+  return true
+}
+
+
+/**
+ * 生成uuid算法,碰撞率低于1/2^^122
+ * @returns {string}
+ */
+const generateUUID = function() {
+  let d = new Date().getTime()
+  //  x 是 0-9 或 a-f 范围内的一个32位十六进制数
+  let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    let r = (d + Math.random() * 16) % 16 | 0
+    d = Math.floor(d / 16)
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+  })
+  return uuid
+}
+
+export default {
+  node,
+  anchor,
+  edge,
+  // 通用工具类函数
+  isObjectValueEqual,
+  generateUUID
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/index.js
@ -0,0 +1,11 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: node
+ */
+
+import setState from './set-state'
+
+export default {
+  setState
+}
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js
@ -0,0 +1,26 @@
+/**
+ * @author: clay
+ * @data: 2021/5/10
+ * @description: set node state
+ */
+
+import theme from '../../theme'
+
+export default function(name, value, item) {
+  const group = item.getContainer()
+  const shape = group.get('children')[0] // 顺序根据 draw 时确定
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  if (name === 'active') {
+    if (value) {
+      shape.attr(themeStyle.nodeStyle.active)
+    } else {
+      shape.attr(themeStyle.nodeStyle.inactive)
+    }
+  } else if (name === 'selected') {
+    if (value) {
+      shape.attr(themeStyle.nodeStyle.selected)
+    } else {
+      shape.attr(themeStyle.nodeStyle.default)
+    }
+  }
+}
--- a/hchyun-ui/vue.config.js
+++ b/hchyun-ui/vue.config.js
@ -45,6 +45,9 @@ module.exports = {
  //   },
  //   disableHostCheck: true
  // },
+  // 强制内联CSS
+  // 默认true: 使用CSS分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
+  css: { extract: false },
  configureWebpack: {
    name: name,
    resolve: {
--- a/packages/.idea/.gitignore
+++ b/packages/.idea/.gitignore
@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
--- a/packages/.idea/modules.xml
+++ b/packages/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/packages.iml" filepath="$PROJECT_DIR$/.idea/packages.iml" />
+    </modules>
+  </component>
+</project>
--- a/packages/.idea/packages.iml
+++ b/packages/.idea/packages.iml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/packages/assets/iconfont/iconfont.css
+++ b/packages/assets/iconfont/iconfont.css
@ -0,0 +1,127 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1568972645985'); /* IE9 */
+  src: url('iconfont.eot?t=1568972645985#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1568972645985') format('woff'),
+  url('iconfont.ttf?t=1568972645985') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1568972645985#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-download:before {
+  content: "\e68d";
+}
+
+.icon-zoom-out:before {
+  content: "\e69c";
+}
+
+.icon-image:before {
+  content: "\e752";
+}
+
+.icon-iconedit:before {
+  content: "\e650";
+}
+
+.icon-actualsize:before {
+  content: "\e665";
+}
+
+.icon-copy:before {
+  content: "\e61c";
+}
+
+.icon-zoom-in:before {
+  content: "\e600";
+}
+
+.icon-clear:before {
+  content: "\e700";
+}
+
+.icon-flow-line:before {
+  content: "\e660";
+}
+
+.icon-redo:before {
+  content: "\e716";
+}
+
+.icon-undo:before {
+  content: "\e71a";
+}
+
+.icon-fit:before {
+  content: "\e7cb";
+}
+
+.icon-to-front:before {
+  content: "\e7cc";
+}
+
+.icon-to-back:before {
+  content: "\e7cd";
+}
+
+.icon-roi-select:before {
+  content: "\e7ce";
+}
+
+.icon-json:before {
+  content: "\e623";
+}
+
+.icon-fullscreen:before {
+  content: "\e648";
+}
+
+.icon-broken:before {
+  content: "\e9ad";
+}
+
+.icon-curve:before {
+  content: "\e9b0";
+}
+
+.icon-paste:before {
+  content: "\e963";
+}
+
+.icon-group:before {
+  content: "\e915";
+}
+
+.icon-ungroup:after {
+  content: "\e917";
+}
+
+.icon-arrow-dropdown:before {
+  content: "\e601";
+}
+.icon-save:before{
+  content: url('../images/icon/pc_icon_bc.png');
+}
+.icon-auto-layout:before{
+  content: url('../images/icon/pc_icon_zdbj.png');
+}
+.icon-solidline:before{
+  content: url('../images/icon/pc_icon_sx.png');
+}
+.icon-dottedline:before{
+  content: url('../images/icon/pc_icon_xx.png');
+}
+.icon-crudedottedline:before{
+  content: url('../images/icon/pc_icon_cxx.png');
+}
+.icon-return:before{
+  content: url('../images/icon/pc_icon_fh.png');
+}
+
--- a/packages/assets/iconfont/iconfont.eot
+++ b/packages/assets/iconfont/iconfont.eot
--- a/packages/assets/iconfont/iconfont.js
+++ b/packages/assets/iconfont/iconfont.js
--- a/packages/assets/iconfont/iconfont.svg
+++ b/packages/assets/iconfont/iconfont.svg
@ -0,0 +1,95 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="download" unicode="&#59021;" d="M135.377782 555.885765l277.111319 0L412.4891 830.342628l207.41905 0 0-274.457886 272.656867 0L513.970376 147.641851 135.377782 555.885765 135.377782 555.885765zM892.268258 145.226848l0-66.952878L136.666124 78.27397l0 66.952878L65.878918 145.226848l0-204.12912L136.666124-58.902272l755.603157 0 65.849754 0 0 204.12912L892.268258 145.226848 892.268258 145.226848zM892.268258 145.226848"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zoom-out" unicode="&#59036;" d="M950.075-14.436l-225.921 221.773c123.199 146.698 115.857 366.528-22.075 504.482-145.758 145.751-382.898 145.751-528.647 0-145.752-145.745-145.752-382.87 0-528.615 135.794-135.787 350.91-145.037 497.546-27.789l227.045-222.879c13.304-13.055 34.675-12.864 47.736 0.447l4.758 4.84c13.057 13.306 12.86 34.681-0.442 47.741l0 0zM226.091 235.862c-116.713 116.708-116.713 306.595 0 423.301 116.712 116.713 306.604 116.713 423.323 0 116.68-116.706 116.68-306.593 0-423.289-116.72-116.72-306.611-116.72-423.323-0.012l0 0zM214.441 484.734l446.604 0 0-74.435-446.604 0 0 74.435zM214.441 484.734z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="image" unicode="&#59218;" d="M896 704 128 704 128 64 896 64 896 704ZM1024 832 1024 832 1024-64 0-64 0 832 1024 832ZM832 128 192 128 192 256 384 576 647.008 256 832 384 832 320ZM640 544A3 3 2520 1 0 832 544 3 3 2520 1 0 640 544z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="iconedit" unicode="&#58960;" d="M893.46655 451.99051l0-444.912046c0-35.100426-28.426423-63.558571-63.557548-63.558571L130.761648-56.480106c-35.068703 0-63.558571 28.459169-63.558571 63.558571L67.203076 706.225819c0 35.132148 28.489868 63.558571 63.558571 63.558571l444.911022 0 0-61.540611L128.77541 708.243779l0-701.165314 701.133591 0L829.909002 451.99051 893.46655 451.99051zM487.78397 229.659843l-201.912639-64.520479 64.490803 201.909569L487.78397 229.659843zM398.007271 412.085662l134.848221-134.808312 313.198212 313.199235L711.194226 725.274664 398.007271 412.085662zM935.921477 770.251018l-44.936445 44.938492c-24.827455 24.827455-65.049528 24.827455-89.876983 0l-43.530422-43.532469 134.808312-134.849244 43.535539 43.535539C960.752002 705.17079 960.752002 745.42254 935.921477 770.251018z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="actualsize" unicode="&#58981;" d="M716.8 793.6L716.8 725.33333333 853.33333333 725.33333333 853.33333333 588.8 921.6 588.8 921.6 725.33333333 921.6 793.6ZM853.33333333 42.66666667000004L716.8 42.66666667000004 716.8-25.600000000000023 921.6-25.600000000000023 921.6 42.66666667000004 921.6 179.20000000000005 853.33333333 179.20000000000005ZM170.66666667 179.20000000000005L102.4 179.20000000000005 102.4 42.66666667000004 102.4-25.600000000000023 307.2-25.600000000000023 307.2 42.66666667000004 170.66666667 42.66666667000004ZM170.66666667 725.33333333L307.2 725.33333333 307.2 793.6 102.4 793.6 102.4 725.33333333 102.4 588.8 170.66666667 588.8ZM238.93333333 589.0047999999999l0-410.0096C238.93333333 141.85813333 269.38026667 110.93333332999998 306.9952 110.93333332999998l410.0096 0C754.14186667 110.93333332999998 785.06666667 141.38026666999997 785.06666667 178.99519999999995L785.06666667 589.0047999999999C785.06666667 626.14186667 754.61973333 657.06666667 717.0048 657.06666667L306.9952 657.06666667C269.85813333 657.06666667 238.93333333 626.6197333299999 238.93333333 589.0047999999999zM307.2 588.8l409.6 0 0-409.6L307.2 179.20000000000005 307.2 588.8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="copy" unicode="&#58908;" d="M704 256h256v-355.968c0-15.424-12.608-28.032-28.032-28.032h-455.936c-15.424 0-28.032 12.608-28.032 28.032v583.936c0 15.424 12.608 28.032 31.168 28.032h224.832v-256zM768 506.624v-186.624h192l-182.464 186.624h-9.536zM448 826.624v-122.624h128l-118.464 122.624h-9.536zM384 576h192v64h-192v192h-288.832c-18.56 0-31.168-12.608-31.168-28.032v-644.8c0-15.424 12.608-28.032 28.032-28.032h291.968v444.864z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zoom-in" unicode="&#58880;" d="M968.842667-12.501333L726.698667 229.642667A382.293333 382.293333 0 0 1 810.666667 469.333333C810.666667 681.408 638.752 853.333333 426.666667 853.333333 214.592 853.333333 42.666667 681.408 42.666667 469.333333s171.925333-384 384-384c90.666667 0 173.994667 31.413333 239.690666 83.978667l242.144-242.144a42.666667 42.666667 0 0 1 60.341334 60.330667zM426.666667 170.666667c-164.949333 0-298.666667 133.717333-298.666667 298.666666s133.717333 298.666667 298.666667 298.666667c164.96 0 298.666667-133.717333 298.666666-298.666667S591.626667 170.666667 426.666667 170.666667z m170.666666 298.666666a42.666667 42.666667 0 0 0-42.666666-42.666666h-85.333334v-85.333334a42.666667 42.666667 0 0 0-85.333333 0v85.333334h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h85.333333v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="clear" unicode="&#59136;" d="M791.04 583.68H768V0h-76.8V583.68h-128V0h-76.8V583.68h-128V0h-76.8V583.68H128V-25.6c0-56.32 46.08-102.4 104.96-102.4h558.08c58.88 0 104.96 46.08 104.96 102.4V583.68c0 5.12-46.08 0-104.96 0M947.2 768h-230.4V829.44C716.8 867.84 652.8 896 614.4 896h-204.8c-38.4 0-102.4-28.16-102.4-66.56V768H76.8c-28.16 0-51.2-23.04-51.2-51.2s23.04-51.2 51.2-51.2h870.4c28.16 0 51.2 23.04 51.2 51.2s-23.04 51.2-51.2 51.2M614.4 768h-204.8V793.6h204.8v-25.6m0 0z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="flow-line" unicode="&#58976;" d="M563.2 188.2112V579.7888A122.624 122.624 0 0 1 634.88 691.2a122.88 122.88 0 1 1-245.76 0c0-49.5104 29.4912-91.9552 71.68-111.4112v-391.6288A122.5216 122.5216 0 0 1 389.12 76.8a122.88 122.88 0 1 1 245.76 0c0 49.5104-29.44 91.9552-71.68 111.4112zM512 762.112a70.8608 70.8608 0 1 0 0-141.7216 70.8608 70.8608 0 0 0 0 141.7216z m0-756.224a70.912 70.912 0 1 0 0 141.824 70.912 70.912 0 0 0 0-141.824z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="redo" unicode="&#59158;" d="M999.551 549.05c13.299 0 24-10.8 24.1-24v-358c0-17.7-14.301-32-32-32h-358.1c-6.4 0-12.5 2.5-17 7-9.4 9.3-9.4 24.5 0 33.9l127 127c-82.201 101.8-208 167-349.001 167-170.3 0-318.4-95-394.2-235 45.7 227 246.2 398 486.7 398 160.101 0 302.399-75.7 393.2-193.3l102.301 102.4c4.5 4.5 10.599 7 17 7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="undo" unicode="&#59162;" d="M41.353 542.029a23.998 23.998 0 0 1-16.97 7.029c-13.255 0-24-10.744-24-24V167c0-17.673 14.327-32 32-32h358.06a24 24 0 0 1 16.969 7.029c9.373 9.373 9.373 24.568 0 33.941L280.418 302.965C362.539 404.832 488.35 470 629.383 470c170.332 0 318.462-95.059 394.234-235.02C977.931 462.016 777.375 633 536.883 633c-160.045 0-302.403-75.725-393.2-193.3L41.353 542.029z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fit" unicode="&#59339;" d="M640 608V800c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6zM288 832c-19.2 0-32-12.8-32-32v-160H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192C320 819.2 307.2 832 288 832z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2zM480 544c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="to-front" unicode="&#59340;" d="M768 300.8c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2L358.4 697.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6zM217.6 377.6l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224 96 300.8l121.6 76.8z m204.8-320l-320 76.8 108.8 76.8L416 160c6.4 0 19.2 0 25.6 6.4L576 288l83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z"  horiz-adv-x="1036" />
+
+    
+    <glyph glyph-name="to-back" unicode="&#59341;" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2L364.8 697.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l384-89.6c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8zM364.8 646.4l300.8-44.8L416 384l-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224l-313.6 76.8 115.2 76.8z m723.2-134.4h96L896 64l-140.8 179.2h96V256c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z"  horiz-adv-x="1036" />
+
+    
+    <glyph glyph-name="roi-select" unicode="&#59342;" d="M64 704h64v-64H64V704z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64zM64 768V832h64v-64H64z m128 0V832h64v-64H192z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 64h64v-64h-64V832z m0-128h64v-64h-64V704z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64zM64 0v64h64v-64H64z m128 0v64h64v-64H192z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM256 320v-64h256v64H256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64H256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="json" unicode="&#58915;" d="M921.6 716.8L798.72 844.8c-30.72 30.72-76.8 51.2-117.76 51.2H256c-40.96 0-71.68-35.84-71.68-71.68v-353.28h56.32V824.32c0 10.24 5.12 15.36 15.36 15.36h435.2v-235.52h225.28v-660.48c0-10.24-5.12-15.36-15.36-15.36H256c-10.24 0-15.36 5.12-15.36 15.36v107.52H184.32v-102.4c0-40.96 30.72-76.8 71.68-76.8h645.12c40.96 0 71.68 35.84 71.68 71.68V568.32c-5.12 51.2-20.48 102.4-51.2 148.48z m-174.08-61.44V803.84c5.12 0 5.12-5.12 10.24-10.24l128-128 10.24-10.24h-148.48zM798.72 455.68H92.16c-20.48 0-35.84-20.48-35.84-40.96v-276.48c0-20.48 15.36-40.96 40.96-40.96h701.44c20.48 0 40.96 15.36 40.96 40.96V414.72c-5.12 20.48-20.48 40.96-40.96 40.96zM225.28 368.64v-133.12c0-15.36-5.12-30.72-15.36-40.96-10.24-10.24-25.6-15.36-40.96-15.36-10.24 0-20.48 0-30.72 5.12v35.84h20.48c5.12 0 10.24 0 15.36 5.12 5.12 0 5.12 5.12 5.12 5.12v143.36h46.08z m168.96-40.96l-35.84-10.24c-5.12 15.36-15.36 25.6-30.72 20.48-15.36 0-25.6-5.12-25.6-15.36 0-5.12 0-10.24 5.12-10.24 5.12-5.12 15.36-5.12 20.48-10.24 15.36 0 30.72-5.12 40.96-10.24 10.24-5.12 15.36-10.24 20.48-20.48 5.12-10.24 10.24-20.48 10.24-30.72 0-15.36-5.12-30.72-20.48-46.08-15.36-10.24-35.84-15.36-56.32-15.36-20.48 0-35.84 5.12-51.2 15.36-15.36 5.12-25.6 20.48-25.6 35.84l40.96 10.24c5.12-15.36 20.48-30.72 40.96-25.6 10.24 0 15.36 0 20.48 5.12 5.12 5.12 5.12 10.24 5.12 15.36 0 5.12 0 10.24-5.12 15.36-10.24 5.12-15.36 5.12-25.6 10.24-20.48 5.12-35.84 10.24-51.2 20.48-10.24 5.12-15.36 15.36-15.36 30.72s5.12 30.72 20.48 40.96c15.36 10.24 30.72 20.48 51.2 15.36 25.6 5.12 56.32-10.24 66.56-40.96z m102.4-148.48c-25.6 0-46.08 10.24-56.32 30.72-15.36 20.48-20.48 46.08-20.48 71.68 0 25.6 5.12 51.2 20.48 66.56 15.36 20.48 35.84 30.72 61.44 25.6 25.6 0 46.08-10.24 61.44-30.72 15.36-20.48 20.48-40.96 20.48-66.56s-5.12-51.2-20.48-71.68c-20.48-15.36-40.96-25.6-66.56-25.6z m0 158.72c-20.48 0-30.72-20.48-30.72-61.44s10.24-61.44 35.84-61.44c20.48 0 30.72 20.48 30.72 61.44s-10.24 61.44-35.84 61.44z m250.88 30.72V179.2h-35.84l-71.68 128V179.2h-30.72v189.44h46.08l66.56-112.64v107.52l25.6 5.12z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fullscreen" unicode="&#58952;" d="M704 480l188.2 184.4 99.8-99.8V864H704l88.4-96-180.4-192 92-96z m-96-288l184.4-188.2-100-99.8H992V192l-96-88.4-192 180.4-96-92z m-288 96l-188.2-184.4-99.8 100V-96h288l-88.4 96 180.4 192-92 96z m96 288l-184.4 188.2 100 99.8H32v-288l96 88.4 192-180.4 96 92z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="broken" unicode="&#59821;" d="M880.71104 160a144.096 144.096 0 0 1-134.08-95.008L746.31104 64h-185.6V800H279.75104c-20.352 56.416-73.44 96-135.776 96A144 144 0 1 1 279.43104 703.008L279.75104 704h184.96v-732.8h279.68c19.424-58.08 73.344-99.2 136.864-99.2a144 144 0 0 1 0 288h-0.576 0.032zM144.71104 694.4a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z m736-736a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z"  horiz-adv-x="1025" />
+
+    
+    <glyph glyph-name="curve" unicode="&#59824;" d="M927.488273 152.021587V320.758959c0 264.73871-214.628824 479.367534-479.367534 479.367534H279.383367c-20.325183 56.341664-73.343233 95.873507-135.597097 95.873507A143.81026 143.81026 0 1 1 279.063788 703.262293L279.383367 704.252986H448.120739c211.784577 0 383.494028-171.709451 383.494027-383.494027v-169.376529c-56.341664-20.325183-95.873507-73.343233-95.873506-135.597097a143.81026 143.81026 0 1 1 192.737706 135.277518L927.488273 151.38243zM144.5213 694.665636a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z m735.03022-735.03022a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="paste" unicode="&#59747;" d="M320 528c0 61.758 50.244 112 112 112h272V784c0 26.51-21.49 48-48 48h-161.22C472.612 870.22 431.274 896 384 896s-88.612-25.78-110.78-64H112C85.49 832 64 810.51 64 784v-672c0-26.51 21.49-48 48-48h208V528z m64 288c26.51 0 48-21.49 48-48s-21.49-48-48-48-48 21.49-48 48 21.49 48 48 48z m368-496h208v-400c0-26.51-21.49-48-48-48H432c-26.51 0-48 21.49-48 48V528c0 26.51 21.49 48 48 48h272v-208c0-26.4 21.6-48 48-48z m208 76.118V384h-192v192h12.118a48 48 0 0 0 33.94-14.058l131.882-131.882a48.004 48.004 0 0 0 14.06-33.942z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="group" unicode="&#59669;" d="M912 75.9V692.1c28 9.9 48 36.6 48 67.9 0 39.8-32.2 72-72 72-31.3 0-58-20-67.9-48H203.9C194 812 167.3 832 136 832c-39.8 0-72-32.2-72-72 0-31.3 20-58 48-67.9v-616.2C84 66 64 39.3 64 8c0-39.8 32.2-72 72-72 31.3 0 58 20 67.9 48h616.2c9.9-28 36.6-48 67.9-48 39.8 0 72 32.2 72 72 0 31.3-20 58-48 67.9zM888 784c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136-16c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m0 752c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m704-680H184V712h656v-656z m48-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM288 422h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64zM288 138h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="ungroup" unicode="&#59671;" d="M736 346H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM736 630H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 688c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72z m0 96c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136 832c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM136 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-dropdown" unicode="&#58881;" d="M512 107.51958124999999l-377.06160075 377.06160074L222.88801761 572.5308003600001 512 283.41881802 801.11198239 572.5308003600001 889.06160075 484.58118199z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/packages/assets/iconfont/iconfont.ttf
+++ b/packages/assets/iconfont/iconfont.ttf
--- a/packages/assets/iconfont/iconfont.woff
+++ b/packages/assets/iconfont/iconfont.woff
--- a/packages/assets/iconfont/iconfont.woff2
+++ b/packages/assets/iconfont/iconfont.woff2
--- a/packages/assets/images/client.png
+++ b/packages/assets/images/client.png
--- a/packages/assets/images/database.png
+++ b/packages/assets/images/database.png
--- a/packages/assets/images/firewall.png
+++ b/packages/assets/images/firewall.png
--- a/packages/assets/images/icon/pc_icon_bc.png
+++ b/packages/assets/images/icon/pc_icon_bc.png
--- a/packages/assets/images/icon/pc_icon_cxx.png
+++ b/packages/assets/images/icon/pc_icon_cxx.png
--- a/packages/assets/images/icon/pc_icon_fh.png
+++ b/packages/assets/images/icon/pc_icon_fh.png
--- a/packages/assets/images/icon/pc_icon_sx.png
+++ b/packages/assets/images/icon/pc_icon_sx.png
--- a/packages/assets/images/icon/pc_icon_xx.png
+++ b/packages/assets/images/icon/pc_icon_xx.png
--- a/packages/assets/images/icon/pc_icon_zdbj.png
+++ b/packages/assets/images/icon/pc_icon_zdbj.png
--- a/packages/assets/images/server.png
+++ b/packages/assets/images/server.png
--- a/packages/assets/logo.png
+++ b/packages/assets/logo.png
--- a/packages/cc-elements/button.vue
+++ b/packages/cc-elements/button.vue
@ -0,0 +1,93 @@
+<template>
+  <button
+    class="cc-button"
+    @click="handleClick"
+    :disabled="buttonDisabled"
+    :class="[
+      type ? 'cc-button--' + type : '',
+      buttonSize ? 'cc-button--' + buttonSize : '',
+      {
+        'is-disabled': buttonDisabled,
+        'is-plain': plain
+      }
+    ]"
+  >
+    <span><slot></slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'CcButton',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    buttonSize() {
+      return this.size
+    },
+    buttonDisabled() {
+      return this.disabled
+    }
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cc-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  -webkit-transition: .1s;
+  transition: .1s;
+  font-weight: 500;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.cc-button:focus, .cc-button:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+
+.cc-button--mini, .cc-button--mini.is-round {
+  padding: 7px 15px;
+}
+
+.cc-button--mini, .cc-button--small {
+  font-size: 12px;
+  border-radius: 3px;
+}
+</style>
--- a/packages/cc-elements/checkbox.vue
+++ b/packages/cc-elements/checkbox.vue
@ -0,0 +1,79 @@
+<template>
+  <div class="cc-checkbox" :class="{ 'checkbox-checked': checkVal }">
+    <input
+      id="checkbox"
+      type="checkbox"
+      v-model="checkVal"
+      @change="handleChange"
+    />
+    <label for="checkbox"></label>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CcCheckbox',
+  data() {
+    return {
+      checkVal: false
+    }
+  },
+  methods: {
+    handleChange() {
+      this.$emit('change', this.checkVal)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cc-checkbox {
+  display: inline-block;
+  color: #606266;
+  font-size: 14px;
+
+  input[type='checkbox'] + label {
+    margin: 0 8px;
+    cursor: pointer;
+  }
+
+  input[type='checkbox'] + label::before {
+    content: '\a0';
+    display: inline-block;
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 2px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    line-height: 0.9;
+    background-color: #fff;
+    z-index: 1;
+    -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+  }
+
+  input[type='checkbox']:checked + label::before {
+    content: '\2714';
+    color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
+  }
+
+  input[type='checkbox'] {
+    opacity: 0;
+    outline: 0;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    z-index: -1;
+  }
+}
+
+.checkbox-checked {
+  color: #409eff;
+}
+</style>
--- a/packages/cc-elements/dropdown.vue
+++ b/packages/cc-elements/dropdown.vue
@ -0,0 +1,228 @@
+<template>
+    <div class="graph-op">
+        <i v-for="edgeItem in dropdownItems " :class="edgeItem.class" v-on:title="edgeItem.label" style="width: 120px;"
+           @click="onItemClick(edgeItem.guid, $event)">&nbsp;&nbsp;{{edgeItem.label}}</i>
+    </div>
+</template>
+
+<script>
+    import $ from 'jquery'
+    export default {
+        name: 'CCDropdownList',
+        props: {
+            dropdownItems: {
+                type: Array,
+                default() {
+                    return [
+                    ]
+                }
+            },
+            defaultIndex: {
+                type: Number,
+                default() {
+                    return 0
+                }
+            }
+        },
+        data() {
+            return {
+                activeIndex: this.defaultIndex,
+                timeout: null
+            }
+        },
+        watch: {
+            activeIndex() {
+                this.$emit('change', this.activeIndex)
+            }
+        },
+        mounted() {
+            $('.iconfonts')[0].style.backgroundColor = '#ebeef2'
+        },
+        methods: {
+            onItemClick(index,e) {
+                let lineList = $('.iconfonts')
+                for (let i=0;i<lineList.length;i++){
+                    lineList[i].style.backgroundColor = '#ffffff'
+                }
+                if (e.path[0].style.backgroundColor=='rgb(255, 255, 255)'){
+                    e.path[0].style.backgroundColor = '#ebeef2'
+                }
+                if (index !== this.activeIndex) {
+                    this.activeIndex = index
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .iconfonts {
+        color: #666666;
+
+            font-size: 12px;
+            line-height: 20px;
+            height: 20px;
+            padding-bottom: 2px;
+
+    }
+    .graph-op {
+        display: inline-block;
+        vertical-align: middle;
+
+        i {
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            line-height: 20px;
+            color: #a8a8a8;
+            text-align: center;
+            border-radius: 2px;
+            display: inline-block;
+            border: 1px solid rgba(2, 2, 2, 0);
+        }
+
+        i:hover {
+            cursor: pointer;
+            border: 1px solid #E9E9E9;
+        }
+
+        .disabled {
+            color: rgba(0, 0, 0, 0.25);
+        }
+
+        .disabled:hover {
+            cursor: not-allowed;
+            border: 1px solid rgba(2, 2, 2, 0);
+        }
+
+        .icon-select {
+            background-color: #EEEEEE;
+        }
+
+        .separator {
+            margin: 4px;
+            border-left: 1px solid #E9E9E9;
+        }
+    }
+    .cc-dropdown {
+        position: relative;
+        display: inline-block;
+        min-width: 100px;
+        text-align: center;
+
+        a {
+            color: #000;
+            text-decoration: none;
+        }
+
+        ul,
+        li {
+            list-style: none;
+        }
+
+        span {
+            display: block;
+            z-index: 2;
+            height: 30px;
+            line-height: 30px;
+            background-color: transparent;
+            font-size: 14px;
+            border-radius: 5px;
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+
+        span a:after {
+            content: " ";
+            display: inline-block;
+            width: 0;
+            height: 0;
+            font-size: 0;
+            line-height: 0;
+            border-bottom: solid 6px #000;
+            border-left: solid 4px transparent;
+            border-right: solid 4px transparent;
+            vertical-align: 3px;
+            margin-left: 10px;
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+    }
+
+    .cc-dropdown-menu {
+        position: absolute;
+        display: none;
+        top: 50px;
+        left: 0;
+        right: 0;
+        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+        border-radius: 5px;
+        z-index: 1;
+
+        /* 一个很重要的三角形*/
+        li:first-child:before {
+            display: block; /* 独占一行 */
+            content: " ";
+            font-size: 0;
+            line-height: 0;
+            margin: 0 auto; /* 居中 */
+            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 配合整体一样的投影 */
+            background-color: #fff;
+            width: 10px;
+            height: 10px;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg); /* 一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来 */
+            position: relative;
+            top: -5px; /* 露出上半部分*/
+            z-index: 1; /* 隐藏下半部分 */
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+
+        li a {
+            color: #888;
+            line-height: 46px;
+            border-bottom: solid 1px #eee;
+            font-size: 14px;
+            display: block;
+            background-color: #fff; /* 要有背景色才能盖住呀*/
+            position: relative;
+            z-index: 2; /* 这里很重要 要挡住三角形的下半部分*/
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+
+        /* 以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
+        li:first-child a {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+            margin-top: -10px;
+        }
+
+        li:last-child a {
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-bottom: none;
+        }
+
+        /*hover事件给了li，先改变三角 再改变a*/
+        li:hover:before {
+            background-color: #ecf5ff;
+        }
+
+        li:hover a {
+            background-color: #ecf5ff;
+            color: #66b1ff;
+        }
+    }
+
+    .cc-dropdown:hover span {
+        background-color: transparent;
+    }
+
+    .cc-dropdown:hover span a:after {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+</style>
--- a/packages/cc-elements/index.js
+++ b/packages/cc-elements/index.js
@ -0,0 +1,18 @@
+/**
+ * @author: winyuan
+ * @data: 2019/11/14
+ * @repository: https://github.com/winyuan
+ * @description: cceditor内部的通用组件
+ */
+
+import Checkbox from './checkbox'
+import Button from './button'
+import Dropdown from './dropdown'
+import Loading from './loading'
+
+export {
+  Checkbox,
+  Button,
+  Dropdown,
+  Loading
+}
--- a/packages/cc-elements/loading.vue
+++ b/packages/cc-elements/loading.vue
@ -0,0 +1,92 @@
+<template>
+  <div class="model-overlay">
+    <div class="cc-loading">
+      <svg class="circular" viewBox="0 0 50 50">
+        <circle cx="25" cy="25" r="20" fill="none" stroke="#409EFF" stroke-width="5%" stroke-linecap="round"/>
+      </svg>
+    </div>
+    <span class="loading-text">{{ loadingText }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CcLoading',
+  props: {
+    loadingText: {
+      type: String,
+      default: '加载中...'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.model-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  z-index: 1000;
+  overflow: auto;
+  background-color: transparent;
+}
+
+.cc-loading {
+  position: absolute;
+  width: 50px;
+  top: 45%;
+  left: 50%;
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+
+  .circular {
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: rotate 2s linear infinite;
+  }
+
+  circle {
+    animation: circle-dash 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes circle-dash {
+  0% {
+    stroke-dasharray: 1, 125;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100, 125;
+    stroke-dashoffset: -25px;
+  }
+  100% {
+    stroke-dasharray: 100, 125;
+    stroke-dashoffset: -125px;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  position: absolute;
+  top: calc(45% + 60px);
+  left: calc(50% - 10px);
+  color: #409EFF;
+  font-size: 14px;
+}
+</style>
--- a/packages/cc-topology/index.js
+++ b/packages/cc-topology/index.js
@ -0,0 +1,17 @@
+/**
+ * @author: winyuan
+ * @data: 2019/08/20
+ * @repository: https://github.com/winyuan
+ * @description: 导入组件，组件必须声明 name
+ */
+
+import CCTopology from './src/cc-topology'
+
+// 为组件提供 install 安装方法，供按需引入
+CCTopology.install = function(Vue) {
+  console.info('install----CCEditor: CCTopology----')
+  Vue.component(CCTopology.name, CCTopology)
+}
+
+// 默认导出组件
+export default CCTopology
--- a/packages/cc-topology/src/behavior/click-add-edge.js
+++ b/packages/cc-topology/src/behavior/click-add-edge.js
@ -0,0 +1,96 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/05
+ * @repository: https://github.com/winyuan
+ * @description: edit mode: 通过先后点击两个节点来添加连线（容易和节点点击动作交叉，已弃用）
+ */
+
+// import G6 from '@antv/g6'
+// import theme from '../theme'
+
+export default {
+  name: 'click-add-edge',
+  options: {
+    getEvents() {
+      return {
+        'node:click': 'onNodeClick',
+        'canvas:mousemove': 'onMousemove',
+        'edge:click': 'onEdgeClick', // 点击空白处，取消边
+      }
+    },
+    onNodeClick(event) {
+      let graph = this.graph
+      let node = event.item
+      let point = { x: event.x, y: event.y }
+      let model = node.getModel()
+      let edgeShape = self.currentEdgeShape.guid || 'line'
+      if (this.addingEdge && this.edge) {
+        // 点击第二个节点
+        graph.updateItem(this.edge, {
+          target: model.id
+        })
+        this.edge = null
+        this.addingEdge = false
+        // 记录【连线】前后的数据状态
+        if (this.historyData) {
+          let graph = this.graph
+          // 如果当前点过【撤销】了，连线后没有【重做】功能
+          // 重置undoCount，连线后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+          if (self.undoCount > 0) {
+            self.historyIndex = self.historyIndex - self.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+            for (let i = 1; i <= self.undoCount; i++) {
+              let key = `graph_history_${self.historyIndex + i}`
+              self.removeHistoryData(key)
+            }
+            self.undoCount = 0
+          } else {
+            // 正常顺序执行的情况，记录【连线】前的数据状态
+            let key = `graph_history_${self.historyIndex}`
+            self.addHistoryData(key, this.historyData)
+          }
+          // 记录【连线】后的数据状态
+          self.historyIndex += 1
+          let key = `graph_history_${self.historyIndex}`
+          let currentData = JSON.stringify(graph.save())
+          self.addHistoryData(key, currentData)
+        }
+      } else {
+        // 点击第一个节点
+        this.historyData = JSON.stringify(graph.save())
+        if (edgeShape === 'stepline') {
+          this.edge = graph.addItem('edge', {
+            source: model.id,
+            target: point,
+            type: edgeShape,
+            controlPoints: [{ x: 100, y: 70 }]
+          })
+        } else {
+          this.edge = graph.addItem('edge', {
+            source: model.id,
+            target: point,
+            type: edgeShape
+          })
+        }
+        this.addingEdge = true
+      }
+    },
+    onMousemove(event) {
+      const point = { x: event.x, y: event.y }
+      if (this.addingEdge && this.edge) {
+        this.graph.updateItem(this.edge, {
+          target: point
+        })
+      }
+    },
+    onEdgeClick(ev) {
+      let graph = this.graph
+      const currentEdge = ev.item
+      // 拖拽过程中，点击会点击到新增的边上
+      if (this.addingEdge && this.edge === currentEdge) {
+        graph.removeItem(this.edge)
+        this.edge = null
+        this.addingEdge = false
+      }
+    }
+  }
+}
--- a/packages/cc-topology/src/behavior/click-event-edit.js
+++ b/packages/cc-topology/src/behavior/click-event-edit.js
@ -0,0 +1,161 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
+ * @description: edit mode: 鼠标点击交互
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'click-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:click': 'onNodeClick',
+        'node:contextmenu': 'onNodeRightClick',
+        'edge:click': 'onEdgeClick',
+        'edge:contextmenu': 'onEdgeRightClick',
+        'canvas:click': 'onCanvasClick'
+      }
+    },
+    onNodeClick(event) {
+      // todo..."selected"是g6自带的状态         ，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态
+      //点击事件
+      // let clickNode = event.item;
+      // clickNode.setState('selected', !clickNode.hasState('selected'));
+      vm.currentFocus = 'node'
+      vm.rightMenuShow = false
+      this.updateVmData(event)
+    },
+    onNodeRightClick(event) {
+      console.log(event,'88888888888888888888888888888')
+      let graph = vm.graph
+      let clickNode = event.item
+      let clickNodeModel = clickNode.getModel()
+      let selectedNodes = graph.findAllByState('node', 'selected')
+      let selectedNodeIds = selectedNodes.map(item => {return item.getModel().id})
+      vm.selectedNode = clickNode
+      // 如果当前点击节点是之前选中的某个节点，就进行下面的处理
+      if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
+        vm.rightMenuShow = true
+        let rightMenu = vm.$refs.rightMenu
+        rightMenu.style.left = event.clientX + 'px'
+        rightMenu.style.top = event.clientY + 'px'
+      } else {
+        // 隐藏右键菜单
+        vm.rightMenuShow = false
+        // 先取消所有节点的选中状态
+        selectedNodes.forEach(node => {
+          node.setState('selected', false)
+        })
+        // 再添加该节点的选中状态
+        clickNode.setState('selected', true)
+        vm.currentFocus = 'node'
+        this.updateVmData(event)
+      }
+      graph.paint()
+    },
+    onEdgeClick(event) {
+      // todo
+      let clickEdge = event.item
+      // // todo 入口
+      clickEdge.setState('selected', !clickEdge.hasState('selected'))
+
+
+      this.onEdgeRightClick(event)
+
+
+      vm.currentFocus = 'edge'
+      vm.rightMenuShow = false
+      this.updateVmData(event)
+    },
+    onEdgeRightClick(event) {
+      let graph = vm.graph
+      let clickEdge = event.item
+      let clickEdgeModel = clickEdge.getModel()
+      let selectedEdges = graph.findAllByState('edge', 'selected')
+      // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理
+      if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) {
+        // 先取消所有节点的选中状态
+        selectedEdges.forEach(edge => {
+          edge.setState('selected', false)
+        })
+        // 再添加该节点的选中状态
+        clickEdge.setState('selected', true)
+        vm.currentFocus = 'edge'
+        this.updateVmData(event)
+      }
+      // eslint-disable-next-line no-unused-vars
+      let point = { x: event.x, y: event.y }
+    },
+    onCanvasClick() {
+      vm.currentFocus = 'canvas'
+      vm.rightMenuShow = false
+    },
+    updateVmData(event) {
+      if (event.item._cfg.type === 'node') {
+        // 更新vm的data: selectedNode 和 selectedNodeParams
+        //TODO 修改右侧输入信息
+        let clickNode = event.item
+        if (clickNode.hasState('selected')) {
+          console.log(clickNode.getModel())
+
+          let clickNodeModel = clickNode.getModel()
+          vm.selectedNode = clickNode
+          //todo 修改右侧输入信息
+          let nodeAppConfig = { ...vm.nodeAppConfig }
+
+
+          // console.log(nodeAppConfig,'nodeAppConfig')
+
+
+
+          Object.keys(nodeAppConfig).forEach(function(key) {
+            nodeAppConfig[key] = ''
+          })
+          let uuids =[]
+          for (let i = 0;i<clickNodeModel.uuids.length;i++){
+            let uuidItem = {
+              value:clickNodeModel.uuids[i],
+              label:clickNodeModel.uuids[i]
+            }
+            uuids.push(uuidItem)
+          }
+          vm.selectedNodeParams = {
+            label: clickNodeModel.label || '',
+            uuids: uuids,
+            number: clickNodeModel.number,
+            appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
+          }
+        }
+      } else if (event.item._cfg.type === 'edge') {
+        // 更新vm的data: selectedEdge 和 selectedEdgeParams
+        let clickEdge = event.item
+        if (clickEdge.hasState('selected')) {
+          let clickEdgeModel = clickEdge.getModel()
+          vm.selectedEdge = clickEdge
+          let edgeAppConfig = { ...vm.edgeAppConfig }
+          Object.keys(edgeAppConfig).forEach(function(key) {
+            edgeAppConfig[key] = ''
+          })
+          vm.selectedEdgeParams = {
+            label: clickEdgeModel.label || '',
+            type:clickEdgeModel.type,
+            style: {
+              stroke: clickEdgeModel.style.stroke || '',
+            },
+            appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
+          }
+          console.log(vm.selectedEdgeParams)
+        }
+      }
+    }
+  }
+}
--- a/packages/cc-topology/src/behavior/drag-add-edge.js
+++ b/packages/cc-topology/src/behavior/drag-add-edge.js
@ -0,0 +1,220 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
+ * @description: edit mode: 通过拖拽节点上的锚点添加连线
+ */
+import utils from '../utils'
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+import G6 from '@antv/g6'
+import theme from '../theme'
+
+export default {
+  sendThis, // 暴露函数
+  name: 'drag-add-edge',
+  options: {
+    getEvents() {
+      return {
+        'node:mousedown': 'onNodeMousedown',
+        'node:mouseup': 'onNodeMouseup',
+        'edge:mouseup': 'onEdgeMouseup',
+        'mousemove': 'onMousemove'
+      }
+    },
+    onNodeMousedown(event) {
+      let self = this
+      // 交互过程中的信息
+      self.evtInfo = {
+        action: null,
+        node: event.item,
+        target: event.target
+      }
+      if (self.evtInfo.target && self.evtInfo.target.attrs.name) {
+        // todo...未来可能针对锚点增加其它功能(例如拖拽调整大小)
+        switch (self.evtInfo.target.attrs.name) {
+          case 'anchor':
+            self.evtInfo.action = 'drawEdge'
+            break
+        }
+      }
+      if (self.evtInfo && self.evtInfo.action) {
+        self[self.evtInfo.action].start.call(self, event)
+      }
+    },
+    onNodeMouseup(event) {
+      let self = this
+      if (self.evtInfo && self.evtInfo.action) {
+        self[self.evtInfo.action].stop.call(self, event)
+      }
+    },
+    onEdgeMouseup(event) {
+      let self = this
+      if (self.evtInfo && self.evtInfo.action === 'drawEdge') {
+        self[self.evtInfo.action].stop.call(self, event)
+      }
+    },
+    onMousemove(event) {
+      let self = this
+      if (self.evtInfo && self.evtInfo.action) {
+        self[self.evtInfo.action].move.call(self, event)
+      }
+    },
+    drawEdge: {
+      isMoving: false,
+      currentLine: null,
+      start: function(event) {
+        let self = this
+        let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+
+        // ************** 暂存【连线】前的数据状态 start **************
+        let graph = vm.graph
+        self.historyData = JSON.stringify(graph.save())
+        // ************** 暂存【连线】前的数据状态 end **************
+
+        let sourceAnchor
+        let sourceNodeModel = self.evtInfo.node.getModel()
+        // 锚点数据
+        let anchorPoints = self.evtInfo.node.getAnchorPoints()
+        // 处理线条目标点
+        if (anchorPoints && anchorPoints.length) {
+          // 获取距离指定坐标最近的一个锚点
+          sourceAnchor = self.evtInfo.node.getLinkPoint({
+            x: event.x,
+            y: event.y
+          })
+        }
+        if (self.graph.$C.edge.type=='dottedline'){
+          console.log(1)
+          self.drawEdge.currentLine = self.graph.addItem('edge', {
+            // id: G6.Util.uniqueId(),  // 这种生成id的方式有bug，会重复
+            id: utils.generateUUID(),
+            // 起始节点
+            source: sourceNodeModel.id,
+            sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : '',
+            // 终止节点/位置
+            target: {
+              x: event.x,
+              y: event.y
+            },
+            type: self.graph.$C.edge.type || 'solidline',
+            //todo 修改类型
+            // style:null
+            style: G6.Util.mix({}, themeStyle.edgeStyle.dottedline, self.graph.$C.edge.style)
+          })
+        }else if (self.graph.$C.edge.type=='solidline'){
+          console.log(2)
+          self.drawEdge.currentLine = self.graph.addItem('edge', {
+            // id: G6.Util.uniqueId(),  // 这种生成id的方式有bug，会重复
+            id: utils.generateUUID(),
+            // 起始节点
+            source: sourceNodeModel.id,
+            sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : '',
+            // 终止节点/位置
+            target: {
+              x: event.x,
+              y: event.y
+            },
+            type: self.graph.$C.edge.type || 'solidline',
+            //todo 修改类型
+            // style:null
+            style: G6.Util.mix({}, themeStyle.edgeStyle.solidline, self.graph.$C.edge.style)
+          })
+        }else if (self.graph.$C.edge.type=='crudedottedline'){
+          console.log(3)
+
+          self.drawEdge.currentLine = self.graph.addItem('edge', {
+            // id: G6.Util.uniqueId(),  // 这种生成id的方式有bug，会重复
+            id: utils.generateUUID(),
+            // 起始节点
+            source: sourceNodeModel.id,
+            sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : '',
+            // 终止节点/位置
+            target: {
+              x: event.x,
+              y: event.y
+            },
+            type: self.graph.$C.edge.type || 'solidline',
+            //todo 修改类型
+            // style:null
+            style: G6.Util.mix({}, themeStyle.edgeStyle.crudedottedline, self.graph.$C.edge.style)
+          })
+        }
+
+        // console.log(self.drawEdge)
+        console.log(self.graph.$C.edge.type)
+        // self.drawEdge.currentLine.style = G6.Util.mix({}, themeStyle.edgeStyle.dottedline, self.graph.$C.edge.style)
+        self.drawEdge.isMoving = true
+      },
+      move(event) {
+        let self = this
+        if (self.drawEdge.isMoving && self.drawEdge.currentLine) {
+          self.graph.updateItem(self.drawEdge.currentLine, {
+            target: {
+              x: event.x,
+              y: event.y
+            }
+          })
+        }
+      },
+      stop(event) {
+        let self = this
+        if (self.drawEdge.isMoving) {
+          if (self.drawEdge.currentLine === event.item) {
+            // 画线过程中点击则移除当前画线
+            self.graph.removeItem(event.item)
+          } else {
+            let targetNode = event.item
+            let targetNodeModel = targetNode.getModel()
+            let targetAnchor = null
+            // 锚点数据
+            let anchorPoints = targetNode.getAnchorPoints()
+            // 处理线条目标点
+            if (anchorPoints && anchorPoints.length) {
+              // 获取距离指定坐标最近的一个锚点
+              targetAnchor = targetNode.getLinkPoint({ x: event.x, y: event.y })
+            }
+            self.graph.updateItem(self.drawEdge.currentLine, {
+              target: targetNodeModel.id,
+              targetAnchor: targetAnchor ? targetAnchor.anchorIndex : ''
+            })
+
+            // ************** 记录historyData的逻辑 start **************
+            if (this.historyData) {
+              let graph = this.graph
+              // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
+              // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+              if (vm.undoCount > 0) {
+                vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+                for (let i = 1; i <= vm.undoCount; i++) {
+                  let key = `graph_history_${vm.historyIndex + i}`
+                  vm.removeHistoryData(key)
+                }
+                vm.undoCount = 0
+              } else {
+                // 正常顺序执行的情况，记录拖拽前的数据状态
+                let key = `graph_history_${vm.historyIndex}`
+                vm.addHistoryData(key, this.historyData)
+              }
+              // 记录拖拽后的数据状态
+              vm.historyIndex += 1
+              let key = `graph_history_${vm.historyIndex}`
+              let currentData = JSON.stringify(graph.save())
+              vm.addHistoryData(key, currentData)
+            }
+            // ************** 记录historyData的逻辑 end **************
+          }
+        }
+        self.drawEdge.currentLine = null
+        self.drawEdge.isMoving = false
+        self.evtInfo = null
+      }
+    }
+  }
+}
--- a/packages/cc-topology/src/behavior/drag-event-edit.js
+++ b/packages/cc-topology/src/behavior/drag-event-edit.js
@ -0,0 +1,54 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
+ * @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'drag-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:dragstart': 'onNodeDragstart',
+        'node:dragend': 'onNodeDragend'
+      }
+    },
+    onNodeDragstart() {
+      let graph = vm.graph
+      this.historyData = JSON.stringify(graph.save())
+    },
+    onNodeDragend() {
+      if (this.historyData) {
+        let graph = this.graph
+        // 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
+        // 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+        if (vm.undoCount > 0) {
+          vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          for (let i = 1; i <= vm.undoCount; i++) {
+            let key = `graph_history_${vm.historyIndex + i}`
+            vm.removeHistoryData(key)
+          }
+          vm.undoCount = 0
+        } else {
+          // 正常顺序执行的情况，记录拖拽前的数据状态
+          let key = `graph_history_${vm.historyIndex}`
+          vm.addHistoryData(key, this.historyData)
+        }
+        // 记录拖拽后的数据状态
+        vm.historyIndex += 1
+        let key = `graph_history_${vm.historyIndex}`
+        let currentData = JSON.stringify(graph.save())
+        vm.addHistoryData(key, currentData)
+      }
+    }
+  }
+}
--- a/packages/cc-topology/src/behavior/hover-event-edit.js
+++ b/packages/cc-topology/src/behavior/hover-event-edit.js
@ -0,0 +1,26 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
+ * @description: edit mode: 悬浮交互
+ */
+
+export default {
+  name: 'hover-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'node:mouseover': 'onNodeHover',
+        'node:mouseout': 'onNodeOut'
+      }
+    },
+    onNodeHover(event) {
+      let hoverNode = event.item
+      hoverNode.setState('hover', true)
+    },
+    onNodeOut(event) {
+      let hoverNode = event.item
+      hoverNode.setState('hover', false)
+    }
+  }
+}
--- a/packages/cc-topology/src/behavior/index.js
+++ b/packages/cc-topology/src/behavior/index.js
@ -0,0 +1,29 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
+ * @description: register behaviors
+ */
+
+import dragAddEdge from './drag-add-edge'
+import hoverEventEdit from './hover-event-edit'
+import clickEventEdit from './click-event-edit'
+import dragEventEdit from './drag-event-edit'
+import keyupEventEdit from './keyup-event-edit'
+
+const obj = {
+  dragAddEdge,
+  hoverEventEdit,
+  clickEventEdit,
+  dragEventEdit,
+  keyupEventEdit,
+}
+
+export default {
+  obj,
+  register(G6) {
+    Object.values(obj).map(item => {
+      G6.registerBehavior(item.name, item.options)
+    })
+  }
+}
--- a/packages/cc-topology/src/behavior/keyup-event-edit.js
+++ b/packages/cc-topology/src/behavior/keyup-event-edit.js
@ -0,0 +1,64 @@
+/**
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
+ * @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】)
+ */
+
+// 用来获取调用此js的vue组件实例（this）
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+
+export default {
+  sendThis, // 暴露函数
+  name: 'keyup-event-edit',
+  options: {
+    getEvents() {
+      return {
+        'keyup': 'onKeyup'
+      }
+    },
+    onKeyup(event) {
+      let graph = this.graph
+      let selectedNodes = graph.findAllByState('node', 'selected')
+      let selectedEdges = graph.findAllByState('edge', 'selected')
+      if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) {
+
+        // ************** 记录【删除】前的数据状态 start **************
+        let historyData = JSON.stringify(graph.save())
+        let key = `graph_history_${vm.historyIndex}`
+        vm.addHistoryData(key, historyData)
+        // ************** 记录【删除】前的数据状态 end **************
+
+        // 开始删除
+        for (let i = 0; i < selectedNodes.length; i++) {
+          graph.removeItem(selectedNodes[i])
+        }
+        for (let i = 0; i < selectedEdges.length; i++) {
+          graph.removeItem(selectedEdges[i])
+        }
+
+        // ************** 记录【删除】后的数据状态 start **************
+        // 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能
+        // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
+        if (vm.undoCount > 0) {
+          vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          for (let i = 1; i <= vm.undoCount; i++) {
+            let key = `graph_history_${vm.historyIndex + i}`
+            vm.removeHistoryData(key)
+          }
+          vm.undoCount = 0
+        }
+        // 记录【删除】后的数据状态
+        vm.historyIndex += 1
+        key = `graph_history_${vm.historyIndex}`
+        let currentData = JSON.stringify(graph.save())
+        vm.addHistoryData(key, currentData)
+        // ************** 记录【删除】后的数据状态 end **************
+      }
+    }
+  }
+}
--- a/Show More
+++ b/Show More