From 83ad7a3ee8c3fd343f8700dae637a07a25ee868c Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 12 Jun 2024 18:00:44 +0800
Subject: [PATCH] =?UTF-8?q?CN-1548=20feat:=20=E5=85=B3=E7=B3=BB=E5=9B=BE?=
 =?UTF-8?q?=E7=94=A8force-graph=E9=87=8D=E6=96=B0=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |    4 +-
 src/views/entityExplorer/EntityGraph.vue     | 1561 +++++++-----------
 src/views/entityExplorer/entityGraph/edge.js |   52 -
 src/views/entityExplorer/entityGraph/link.js |    8 +
 src/views/entityExplorer/entityGraph/node.js |   27 +-
 5 files changed, 580 insertions(+), 1072 deletions(-)
 delete mode 100644 src/views/entityExplorer/entityGraph/edge.js
 create mode 100644 src/views/entityExplorer/entityGraph/link.js

diff --git a/package.json b/package.json
index 4dbe3cac..25d11716 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cn",
-  "version": "0.1.0",
+  "version": "24.04",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,10 +18,12 @@
     "babel-plugin-lodash": "~3.3.0",
     "codemirror": "^5.65.1",
     "core-js": "~3.31.0",
+    "d3": "^7.9.0",
     "dayjs": "^1.10.5",
     "dexie": "~3.2.0",
     "echarts": "^5.1.1",
     "element-plus": "^2.5.1",
+    "force-graph": "^1.43.5",
     "h3-js": "~3.7.2",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue
index cb18ab3e..4083c0e2 100644
--- a/src/views/entityExplorer/EntityGraph.vue
+++ b/src/views/entityExplorer/EntityGraph.vue
@@ -1,13 +1,11 @@
 <template>
   <div class="entity-graph">
-    <div class="entity-graph__chart" id="entityGraph">
-    </div>
+    <div class="entity-graph__chart" id="entityGraph"></div>
     <div class="entity-graph__right-box">
       <el-drawer
           v-model="rightBox.show"
           direction="rtl"
           custom-class="entity-graph__detail"
-          class="entity-graph__detail"
           :close-on-click-modal="true"
           :modal="false"
           :size="400"
@@ -39,11 +37,113 @@ import GraphEntityList from '@/views/entityExplorer/entityGraph/GraphEntityList'
 import GraphEntityDetail from '@/views/entityExplorer/entityGraph/GraphEntityDetail'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef } from 'vue'
+import ForceGraph from 'force-graph'
+import * as d3 from 'd3'
+import Node, {nodeType, queryRelatedEntity} from './entityGraph/node'
+import testData from './testData'
 import _ from 'lodash'
-import G6, { Algorithm } from '@antv/g6'
-import Node, { nodeType, queryRelatedEntity } from './entityGraph/node'
-import Edge from './entityGraph/edge'
+import Link from './entityGraph/link'
+import Edge from '@/views/entityExplorer/entityGraph/edge'
+import {Algorithm} from '@antv/g6'
 
+function getRootNodeStyle (entityType) {
+  switch (entityType) {
+    case 'ip': {
+      return {
+        iconWidth: 16,
+        iconHeight: 13,
+        borderColor: 'rgba(126,159,84,1)',
+        shadowColor: 'rgba(126,159,84,0.21)',
+        hoveredShadowColor: 'rgba(126,159,84,0.36)',
+        selectedShadowColor: 'rgba(126,159,84,0.1)'
+      }
+    }
+    case 'domain': {
+      return {
+        iconWidth: 16,
+        iconHeight: 16,
+        borderColor: 'rgba(56,172,210,1)',
+        shadowColor: 'rgba(56,172,210,0.21)',
+        hoveredShadowColor: 'rgba(56,172,210,0.36)',
+        selectedShadowColor: 'rgba(56,172,210,0.1)'
+      }
+    }
+    case 'app': {
+      return {
+        iconWidth: 14,
+        iconHeight: 16,
+        borderColor: 'rgba(229,162,25,1)',
+        shadowColor: 'rgba(229,162,25,0.21)',
+        hoveredShadowColor: 'rgba(229,162,25,0.36)',
+        selectedShadowColor: 'rgba(229,162,25,0.1)'
+      }
+    }
+  }
+  return {
+    iconWidth: 16,
+    iconHeight: 13,
+    borderColor: 'rgba(126,159,84,1)',
+    shadowColor: 'rgba(126,159,84,0.21)',
+    hoveredShadowColor: 'rgba(126,159,84,0.36)',
+    selectedShadowColor: 'rgba(126,159,84,0.1)'
+  }
+}
+function getListNodeStyle (entityType) {
+  let iconWidth = 14
+  let iconHeight = 12
+  switch (entityType) {
+    case 'ip': {
+      iconWidth = 14
+      iconHeight = 12
+      break
+    }
+    case 'domain': {
+      iconWidth = 14
+      iconHeight = 14
+      break
+    }
+    case 'app': {
+      iconWidth = 12
+      iconHeight = 14
+      break
+    }
+  }
+  return {
+    iconWidth,
+    iconHeight,
+    borderColor: 'rgba(119,131,145,0.5)',
+    selectedBorderColor: 'rgba(119,131,145,0.8)',
+    hoveredShadowColor: 'rgba(151,151,151,0.21)',
+    selectedShadowColor: 'rgba(151,151,151,0.4)'
+  }
+}
+function getEntityNodeStyle (entityType) {
+  let iconWidth = 14
+  let iconHeight = 12
+  switch (entityType) {
+    case 'ip': {
+      iconWidth = 14
+      iconHeight = 12
+      break
+    }
+    case 'domain': {
+      iconWidth = 14
+      iconHeight = 14
+      break
+    }
+    case 'app': {
+      iconWidth = 12
+      iconHeight = 14
+      break
+    }
+  }
+  return {
+    iconWidth,
+    iconHeight,
+    hoveredShadowColor: 'rgba(151,151,151,0.12)',
+    selectedShadowColor: 'rgba(151,151,151,0.24)'
+  }
+}
 export default {
   name: 'EntityRelationship',
   components: {
@@ -53,1063 +153,493 @@ export default {
   data () {
     return {
       debounceFunc: null,
-      chartOption: {
-        container: 'entityGraph',
-        layout: {
-          type: 'force',
-          preventOverlap: true,
-          linkDistance: (d) => {
-            if (d.target.type === nodeType.rootNode || d.target.type === nodeType.listNode) {
-              return 200
-            }
-            return 80
-          },
-          nodeStrength: (d) => {
-            if (d.type === nodeType.rootNode || d.type === nodeType.listNode) {
-              return -100
-            } else if (d.type === nodeType.tempNode) {
-              return -300
-            }
-            return -10
-          },
-          edgeStrength: (d) => {
-            if (d.target.type === nodeType.rootNode || d.target.type === nodeType.listNode) {
-              return 0.1
-            }
-            return 0.7
-          }
-        },
-        modes: {
-          default: ['drag-canvas', 'drag-nodes', 'click-select', 'zoom-canvas']
-        }
-      },
-      /* 自己实现stack操作 */
-      stackData: {
-        undo: [], // 后退
-        justUndo: false, // 是否刚后退了
-        redo: [], // 前进
-        justRedo: false // 是否刚前进了
-      },
       center: {},
       initialData: null // 初始化数据，用于重置
     }
   },
   methods: {
     async init () {
-      this.registerElements() // 注册自定义node
-      const tooltip = this.buildTooltip() // tooltip组件
-      const toolbar = this.buildToolbar() // 工具栏组装件
-      this.chartOption.plugins = [tooltip, toolbar] // 注册组件
-      this.graph = new G6.Graph(this.chartOption)
       try {
-        const initialData = await this.generateInitialData() // 备份初始数据
+        const initialData = await this.generateInitialData()
         this.initialData = _.cloneDeep(initialData) // 初始化数据
-        this.graph.data(initialData)
-        this.graph.render()
-        await this.$nextTick(() => {
-          const { x, y } = this.graph.getViewPortCenterPoint()
-          this.center = { x, y }
-        })
-        const rootNode = this.graph.findById(this.entity.entityName)
-        this.bindEvents() // 绑定事件
-        this.graph.emit('node:click', { item: rootNode, target: rootNode.getKeyShape() }) // 手动触发rootNode的点击事件
+        this.graph = ForceGraph()(document.getElementById('entityGraph'))
+            .graphData(this.initialData)
+            .nodeRelSize(16)
+            .onNodeClick(async node => {
+              if (this.currentSelectedNode !== node) {
+                // 控制节点的选中状态
+                if (node === this.currentHoveredNode) {
+                  this.currentHoveredNode = null
+                }
+                this.currentSelectedNode = node
+
+                switch (node.type) {
+                  /* node 是 entityNode，则查接口展开 tempNode */
+                  case nodeType.entityNode: {
+                    // 先清除 tempNode 和 tempLink
+                    this.cleanTempItems()
+                    // 若已查过数据，不重复查询
+                    if (!node.myData.relatedEntities) {
+                      await node.queryDetailData()
+                    }
+                    // 生成 tempNode 和 tempLink
+                    const tempNodes = []
+                    const tempLinks = []
+                    const { sourceNodes, targetNodes } = this.getNeighborItems(node)
+                    Object.keys(node.myData.relatedEntities).forEach(k => {
+                      if (node.myData.relatedEntities[k].total) {
+                        // 若已有同级同类型的 listNode，不生成此 tempNode
+                        const hasListNode = targetNodes.some(b => b.myData.entityType === k)
+                        if (!hasListNode) {
+                          const tempNode = new Node(
+                              nodeType.tempNode,
+                              `${node.id}__${k}__temp`,
+                              {
+                                entityType: k
+                              },
+                              node
+                          )
+                          const tempLink = new Link(node, tempNode, 'temp')
+                          tempNodes.push(tempNode)
+                          tempLinks.push(tempLink)
+                        }
+                      }
+                    })
+                    if (tempNodes.length) {
+                      node.fx = node.x
+                      node.fy = node.y
+                      this.addItems(tempNodes, tempLinks)
+                    }
+                    this.rightBox.node = node
+                    this.rightBox.mode = 'detail'
+                    break
+                  }
+                  case nodeType.listNode: {
+                    this.rightBox.node = node
+                    this.rightBox.mode = 'list'
+                    break
+                  }
+                  case nodeType.rootNode: {
+                    this.rightBox.node = node
+                    this.rightBox.mode = 'detail'
+                    break
+                  }
+                  /* node 是 entityNode，则查接口展开 tempNode */
+                  case nodeType.tempNode: {
+                    // 点击 tempNode，根据 source 生成 listNode 以及对应的 link
+                    const nodes = []
+                    const links = []
+                    const listNode = new Node(
+                        nodeType.listNode,
+                        `${node.sourceNode.id}__${node.myData.entityType}-list`,
+                        {
+                          entityType: node.myData.entityType
+                        },
+                        node.sourceNode
+                    )
+                    nodes.push(listNode)
+                    links.push(new Link(node.sourceNode, listNode))
+
+                    // 若未达第六层，为新的 listNode 生成 entityNode 和 link
+                    const level = this.getNodeLevel(listNode.sourceNode.id)
+                    if (level < 10) {
+                      this.rightBox.loading = true
+                      try {
+                        const entities = await queryRelatedEntity(node.sourceNode, listNode.myData.entityType)
+                        this.pushRelatedEntities(node, entities.list)
+
+                        entities.list.forEach(entity => {
+                          const entityNode = new Node(nodeType.entityNode, entity.vertex, {
+                            entityType: listNode.myData.entityType,
+                            entityName: entity.vertex
+                          }, listNode)
+                          nodes.push(entityNode)
+                          links.push(new Link(listNode, entityNode))
+                        })
+                      } catch (e) {
+                        this.$message.error(this.errorMsgHandler(e))
+                      } finally {
+                        this.rightBox.loading = false
+                      }
+                    } else {
+                      this.$message.warning(this.$t('tip.maxExpandDepth'))
+                    }
+
+                    // 查完 entityNode 的接口再删除 tempNode 和 tempEdge
+                    this.addItems(nodes, links)
+                    this.cleanTempItems()
+                    // 手动高亮listNode
+
+                    break
+                  }
+                }
+              }
+              // 若 node 未拖拽过，取消固定位置
+              if (this.draggedNodes.indexOf(node.id) === -1) {
+                node.fx = null
+                node.fy = null
+              }
+            })
+            .onNodeHover(node => {
+              if (!node) {
+                this.currentHoveredNode = null
+              } else if (node !== this.currentSelectedNode) {
+                this.currentHoveredNode = node || null
+              }
+            })
+            .onNodeDragEnd(node => {
+              this.draggedNodes.push(node.id)
+            })
+            .autoPauseRedraw(false)
+            .nodeCanvasObject((node, ctx) => {
+              /*
+              * 共有4种 nodeType，3种 entityType
+              * */
+              switch (node.type) {
+                case nodeType.rootNode: {
+                  const nodeStyle = getRootNodeStyle(node.myData.entityType)
+                  // 如果是鼠标点击高亮的，最外层加上第三层圆环
+                  if (node === this.currentSelectedNode) {
+                    ctx.beginPath()
+                    ctx.arc(node.x, node.y, 24, 0, 2 * Math.PI, false)
+                    ctx.closePath()
+                    ctx.fillStyle = nodeStyle.selectedShadowColor
+                    ctx.fill()
+                  }
+
+                  // 第二层圆环
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 16, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.fillStyle = node === this.currentSelectedNode || node === this.currentHoveredNode ?
+                      nodeStyle.hoveredShadowColor :
+                      nodeStyle.shadowColor
+                  ctx.fill()
+                  // 内部挖空
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 12, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.fillStyle = 'white'
+                  ctx.fill()
+
+                  // 第一层圆环
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 12, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.lineWidth = 1
+                  ctx.strokeStyle = nodeStyle.borderColor
+                  ctx.stroke()
+                  // 图片
+                  ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight);
+                  // 文字
+                  ctx.font = '8px NotoSansSChineseRegular'
+                  const textWidth = ctx.measureText(node.label).width
+                  const bckgDimensions = [textWidth, 8].map(n => n + 8 * 0.2)
+                  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
+                  ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + 21, ...bckgDimensions) // 文字的白底
+
+                  ctx.textAlign = 'center'
+                  ctx.textBaseline = 'middle'
+                  ctx.fillStyle = '#353636'
+                  ctx.fillText(node.label, node.x, node.y + 21)
+                  break
+                }
+                case nodeType.listNode: {
+                  const nodeStyle = getListNodeStyle(node.myData.entityType)
+                  // 如果是鼠标点击或者悬停的，有一层圆环
+                  if (node === this.currentSelectedNode || node === this.currentHoveredNode) {
+                    ctx.beginPath()
+                    ctx.arc(node.x, node.y, 14, 0, 2 * Math.PI, false)
+                    ctx.closePath()
+                    if (node === this.currentSelectedNode) {
+                      ctx.fillStyle = nodeStyle.selectedShadowColor
+                    } else {
+                      ctx.fillStyle = nodeStyle.hoveredShadowColor
+                    }
+                    ctx.fill()
+                  }
+
+                  // 内部填白
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 11, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.fillStyle = 'white'
+                  ctx.fill()
+
+                  // 第一层圆环
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 11, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.lineWidth = 1
+                  ctx.strokeStyle = nodeStyle.borderColor
+                  ctx.stroke()
+                  // 图片
+                  ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight)
+                  // 文字
+                  ctx.font = '8px NotoSansSChineseRegular'
+                  const textWidth = ctx.measureText(node.label).width
+                  const bckgDimensions = [textWidth, 8].map(n => n + 8 * 0.2)
+                  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
+                  ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2 + 18, ...bckgDimensions) // 文字的白底
+
+                  ctx.textAlign = 'center'
+                  ctx.textBaseline = 'middle'
+                  ctx.fillStyle = '#353636'
+                  ctx.fillText(node.label, node.x, node.y + 18)
+                  break
+                }
+                case nodeType.entityNode: {
+                  const nodeStyle = getEntityNodeStyle(node.myData.entityType)
+                  // 先画个白底圆环，避免 link 穿过不好看
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 8, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.fillStyle = '#fff'
+                  ctx.fill()
+                  // 如果是鼠标点击或者悬停的，有一层圆环
+                  if (node === this.currentSelectedNode || node === this.currentHoveredNode) {
+                    ctx.beginPath()
+                    ctx.arc(node.x, node.y, 10, 0, 2 * Math.PI, false)
+                    ctx.closePath()
+                    if (node === this.currentSelectedNode) {
+                      ctx.fillStyle = nodeStyle.selectedShadowColor
+                    } else {
+                      ctx.fillStyle = nodeStyle.hoveredShadowColor
+                    }
+                    ctx.fill()
+                  }
+                  // 图片
+                  ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight)
+                  break
+                }
+                case nodeType.tempNode: {
+                  const nodeStyle = getEntityNodeStyle(node.myData.entityType)
+                  // 先画个白底圆环，避免 link 穿过不好看
+                  ctx.beginPath()
+                  ctx.arc(node.x, node.y, 8, 0, 2 * Math.PI, false)
+                  ctx.closePath()
+                  ctx.fillStyle = '#fff'
+                  ctx.fill()
+                  // 画透明度0.7的图标
+                  ctx.globalAlpha = 0.7
+                  ctx.drawImage(node.img, node.x - nodeStyle.iconWidth / 2, node.y - nodeStyle.iconHeight / 2, nodeStyle.iconWidth, nodeStyle.iconHeight)
+                  ctx.globalAlpha = 1
+                  break
+                }
+              }
+            })
+            .linkCanvasObject((link, ctx) => {
+              const start = link.source
+              const end = link.target
+              const width = 1 // 线宽
+              const arrowSize = 3 // 箭头大小
+              const shortenedLength = 14 // link 末端缩短长度
+
+              // 计算箭头角度
+              const dx = end.x - start.x
+              const dy = end.y - start.y
+              const angle = Math.atan2(dy, dx) // 计算与x轴的角度（弧度）
+              const lineEndX = end.x - shortenedLength * Math.cos(angle)
+              const lineEndY = end.y - shortenedLength * Math.sin(angle)
+              const arrowEndX = lineEndX + arrowSize * Math.cos(angle)
+              const arrowEndY = lineEndY + arrowSize * Math.sin(angle)
+
+              // 绘制线
+              let color
+              ctx.beginPath()
+              if (link.isTemp) {
+                ctx.setLineDash([2, 2])
+                color = 'rgba(119,131,145,0.2)' // 虚线颜色
+              } else {
+                ctx.setLineDash([])
+                if (this.currentSelectedNode === link.source || this.currentSelectedNode === link.target) {
+                  color = 'rgba(119,131,145,0.8)' // 高亮线颜色
+                } else {
+                  color = 'rgba(119,131,145,0.3)' // 普通线颜色
+                }
+              }
+              ctx.moveTo(start.x, start.y)
+              ctx.lineTo(lineEndX, lineEndY)
+              ctx.strokeStyle = color
+              ctx.lineWidth = width
+              ctx.stroke()
+
+              // 绘制箭头
+              ctx.save() // 保存当前状态以便之后恢复
+              ctx.translate(arrowEndX, arrowEndY) // 将坐标原点移动到箭头末端
+              ctx.rotate(angle) // 根据链接方向旋转坐标系
+              ctx.beginPath()
+              ctx.moveTo(0, 0)
+              ctx.lineTo(-arrowSize, arrowSize) // 绘制箭头的一边
+              ctx.lineTo(-arrowSize, -arrowSize) // 绘制箭头的另一边
+              ctx.closePath()
+              ctx.fillStyle = color
+              ctx.fill()
+              ctx.restore() // 恢复之前保存的状态
+            })
+            .d3Force('center', null)
+            .d3Force('collide', d3.forceCollide(d => d.r))
+            .d3Force('link', d3.forceLink().distance(link => {
+              if (link.source.type === nodeType.rootNode) {
+                return 120
+              }
+              return 60
+            }))
+            .cooldownTime(1500)
+        setTimeout(() => {
+          const { nodes, links } = this.graph.graphData()
+          const rootNode = nodes.find(n => n.type === nodeType.rootNode)
+          rootNode.fx = rootNode.x
+          rootNode.fy = rootNode.y
+          this.graph.graphData({ nodes, links })
+          this.graph.zoomToFit(200, 250)
+        }, 1000)
       } catch (e) {
+        console.error(e)
         this.$message.error(this.errorMsgHandler(e))
       } finally {
         this.rightBox.loading = false
       }
     },
-    registerElements () {
-      const _this = this
-      G6.registerNode(
-        nodeType.rootNode,
-        {
-          draw (cfg, group) {
-            group.addShape('circle', {
-              name: 'rootSelectedShadow',
-              attrs: {
-                r: 25, // selected时38.5
-                fill: getRootNodeStyle(cfg.myData.entityType).selectedShadowColor
-              }
-            })
-            group.addShape('circle', {
-              name: 'rootShadow',
-              attrs: {
-                r: 31.5,
-                fill: getRootNodeStyle(cfg.myData.entityType).shadowColor
-              }
-            })
-            const node = group.addShape('circle', {
-              name: 'rootInner',
-              attrs: {
-                r: 26,
-                fx: cfg.fx,
-                fy: cfg.fy,
-                fill: '#FFFFFF',
-                stroke: getRootNodeStyle(cfg.myData.entityType).borderColor,
-                lineWidth: 1
-              }
-            })
-            group.addShape('image', {
-              attrs: {
-                x: -getRootNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getRootNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getRootNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getRootNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, true, true)
-              },
-              name: 'rootIcon',
-              draggable: true
-            })
-            // 为label建一个box，避免鼠标事件中断
-            group.addShape('rect', {
-              name: 'rootLabelBox',
-              attrs: {
-                width: 64,
-                height: 40,
-                x: -32,
-                y: 10,
-                fill: 'transparent'
-              }
-            })
-            group.addShape('text', {
-              attrs: {
-                text: cfg.label,
-                x: 0,
-                y: 42,
-                fontSize: 12,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                fill: '#353636'
-              },
-              name: 'rootLabel'
-            })
-            return node
-          },
-          setState (name, value, node) {
-            const group = node.getContainer()
-            const model = node.getModel()
-            const selectedShadowShape = group.get('children')[0]
-            const shadowShape = group.get('children')[1]
-            if (name === 'hover') {
-              // 鼠标悬浮时，若不处于selected状态，才继续处理
-              if (!node.hasState('mySelected')) {
-                // hover时，加深shadow的颜色
-                if (value) {
-                  shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).hoveredShadowColor)
-                } else {
-                  shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).shadowColor)
-                }
-              }
-            } else if (name === 'mySelected') {
-              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
-              node.setState('hover', false)
-              // 变更样式
-              if (value) {
-                // 取消其他高亮
-                const nodes = _this.graph.getNodes()
-                const edges = _this.graph.getEdges()
-                nodes.forEach(n => {
-                  if (n.getModel().id !== node.getModel().id) {
-                    n.setState('mySelected', false)
-                  }
-                })
-                edges.forEach(n => {
-                  n.setState('mySelected', false)
-                })
-                // 高亮自身
-                shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).hoveredShadowColor)
-                selectedShadowShape.attr('r', 38.5)
-                // 高亮自身相关的edge
-                const aboutEdges = node.getEdges()
-                aboutEdges.forEach(n => {
-                  n.setState('mySelected', true)
-                })
-              } else {
-                shadowShape.attr('fill', getRootNodeStyle(model.myData.entityType).shadowColor)
-                selectedShadowShape.attr('r', 25)
-              }
-            }
-          }
-        },
-        'single-node'
-      )
-      G6.registerNode(
-        nodeType.listNode,
-        {
-          draw (cfg, group) {
-            group.addShape('circle', {
-              name: 'listShadow',
-              attrs: {
-                r: 20, // selected时26.5
-                x: 0,
-                y: 0,
-                fill: getListNodeStyle(cfg.myData.entityType).hoveredShadowColor
-              }
-            })
-            const node = group.addShape('circle', {
-              name: 'listInner',
-              attrs: {
-                r: 21,
-                fx: cfg.fx,
-                fy: cfg.fy,
-                fill: '#FFFFFF',
-                stroke: getListNodeStyle(cfg.myData.entityType).borderColor,
-                lineWidth: 1
-              }
-            })
-            group.addShape('image', {
-              attrs: {
-                x: -getListNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getListNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getListNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getListNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, false, false)
-              },
-              name: 'listIcon',
-              draggable: true
-            })
-            // 为label建一个box，避免鼠标事件中断
-            group.addShape('rect', {
-              name: 'rootLabelBox',
-              attrs: {
-                width: 46,
-                height: 30,
-                x: -23,
-                y: 12,
-                fill: 'transparent'
-              }
-            })
-            group.addShape('text', {
-              attrs: {
-                text: cfg.label,
-                x: 0,
-                y: 34,
-                fontSize: 12,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                fill: '#353636'
-              },
-              name: 'listLabel'
-            })
-            return node
-          },
-          setState (name, value, node) {
-            const group = node.getContainer()
-            const model = node.getModel()
-            const shadowShape = group.get('children')[0]
-            const innerShape = group.get('children')[1]
-            if (name === 'hover') {
-              // 鼠标悬浮时，若不处于selected状态，才继续处理
-              if (!node.hasState('mySelected')) {
-                // hover时，出现shadow
-                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).hoveredShadowColor)
-                if (value) {
-                  shadowShape.attr('r', 26.5)
-                } else {
-                  shadowShape.attr('r', 20)
-                }
-              }
-            } else if (name === 'mySelected') {
-              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
-              node.setState('hover', false)
-              if (value) {
-                // 取消其他高亮
-                const nodes = _this.graph.getNodes()
-                const edges = _this.graph.getEdges()
-                nodes.forEach(n => {
-                  if (n.getModel().id !== node.getModel().id) {
-                    n.setState('mySelected', false)
-                  }
-                })
-                edges.forEach(n => {
-                  n.setState('mySelected', false)
-                })
-                // 高亮自身
-                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).selectedShadowColor)
-                shadowShape.attr('r', 26.5)
-                innerShape.attr('stroke', getListNodeStyle(model.myData.entityType).selectedBorderColor)
-                // 高亮自身相关的edge
-                const aboutEdges = node.getEdges()
-                aboutEdges.forEach(n => {
-                  n.setState('mySelected', true)
-                })
-              } else {
-                shadowShape.attr('fill', getListNodeStyle(model.myData.entityType).hoveredShadowColor)
-                shadowShape.attr('r', 20)
-                innerShape.attr('stroke', getListNodeStyle(model.myData.entityType).borderColor)
-              }
-            }
-          }
-        },
-        'single-node'
-      )
-      G6.registerNode(
-        nodeType.entityNode,
-        {
-          draw (cfg, group) {
-            group.addShape('circle', {
-              name: 'entityShadow',
-              attrs: {
-                r: 18,
-                x: 0,
-                y: 0,
-                fill: 'transparent'
-              }
-            })
-            return group.addShape('image', {
-              attrs: {
-                x: -getEntityNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getEntityNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getEntityNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getEntityNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, true, false)
-              },
-              name: 'entityIcon'
-            })
-          },
-          setState (name, value, node) {
-            const group = node.getContainer()
-            const model = node.getModel()
-            const shadowShape = group.get('children')[0]
-            if (name === 'mySelected') {
-              // select事件，取消自身hover状态，取消其他node和edge的高亮状态，高亮自身和自身相关的edge
-              node.setState('hover', false)
-              if (value) {
-                // 取消其他高亮
-                const nodes = _this.graph.getNodes()
-                const edges = _this.graph.getEdges()
-                nodes.forEach(n => {
-                  if (n.getModel().id !== node.getModel().id) {
-                    n.setState('mySelected', false)
-                  }
-                })
-                edges.forEach(n => {
-                  n.setState('mySelected', false)
-                })
-                // 高亮自身
-                shadowShape.attr('fill', getEntityNodeStyle(model.myData.entityType).selectedShadowColor)
-                // 高亮自身相关的edge
-                const aboutEdges = node.getEdges()
-                aboutEdges.forEach(n => {
-                  n.setState('mySelected', true)
-                })
-              } else {
-                shadowShape.attr('fill', 'transparent')
-              }
-            }
-          }
-        },
-        'single-node'
-      )
-      G6.registerNode(
-        nodeType.tempNode,
-        {
-          draw (cfg, group) {
-            group.addShape('text', {
-              attrs: {
-                text: cfg.label,
-                x: 0,
-                y: 22,
-                fontSize: 12,
-                textAlign: 'center',
-                textBaseline: 'middle',
-                fill: '#353636',
-                opacity: 0.7
-              },
-              name: 'tempLabel'
-            })
-            return group.addShape('image', {
-              attrs: {
-                x: -getListNodeStyle(cfg.myData.entityType).iconWidth / 2,
-                y: -getListNodeStyle(cfg.myData.entityType).iconHeight / 2,
-                height: getListNodeStyle(cfg.myData.entityType).iconHeight,
-                width: getListNodeStyle(cfg.myData.entityType).iconWidth,
-                img: getIconUrl(cfg.myData.entityType, false, false),
-                opacity: 0.7
-              },
-              name: 'tempIcon'
-            })
-          },
-          setState (name, value, node) {
-            // 重写setState，避免鼠标事件导致重新加载图片
-          }
-        },
-        'single-node'
-      )
-      function getRootNodeStyle (entityType) {
-        switch (entityType) {
-          case 'ip': {
-            return {
-              iconWidth: 26,
-              iconHeight: 23,
-              borderColor: 'rgba(126,159,84,1)',
-              shadowColor: 'rgba(126,159,84,0.21)',
-              hoveredShadowColor: 'rgba(126,159,84,0.36)',
-              selectedShadowColor: 'rgba(126,159,84,0.1)'
-            }
-          }
-          case 'domain': {
-            return {
-              iconWidth: 28,
-              iconHeight: 24,
-              borderColor: 'rgba(56,172,210,1)',
-              shadowColor: 'rgba(56,172,210,0.21)',
-              hoveredShadowColor: 'rgba(56,172,210,0.36)',
-              selectedShadowColor: 'rgba(56,172,210,0.1)'
-            }
-          }
-          case 'app': {
-            return {
-              iconWidth: 24,
-              iconHeight: 26,
-              borderColor: 'rgba(229,162,25,1)',
-              shadowColor: 'rgba(229,162,25,0.21)',
-              hoveredShadowColor: 'rgba(229,162,25,0.36)',
-              selectedShadowColor: 'rgba(229,162,25,0.1)'
-            }
-          }
-        }
-        return {
-          iconWidth: 26,
-          iconHeight: 23,
-          borderColor: 'rgba(126,159,84,1)',
-          shadowColor: 'rgba(126,159,84,0.21)',
-          hoveredShadowColor: 'rgba(126,159,84,0.36)',
-          selectedShadowColor: 'rgba(126,159,84,0.1)'
-        }
-      }
-      function getListNodeStyle (entityType) {
-        switch (entityType) {
-          case 'ip': {
-            return {
-              iconWidth: 24,
-              iconHeight: 21,
-              borderColor: 'rgba(119,131,145,0.6)',
-              selectedBorderColor: 'rgba(126,159,84,1)',
-              hoveredShadowColor: 'rgba(151,151,151,0.21)',
-              selectedShadowColor: 'rgba(126,159,84,0.21)'
-            }
-          }
-          case 'domain': {
-            return {
-              iconWidth: 24,
-              iconHeight: 24,
-              borderColor: 'rgba(119,131,145,0.6)',
-              selectedBorderColor: 'rgba(56,172,210,1)',
-              hoveredShadowColor: 'rgba(151,151,151,0.21)',
-              selectedShadowColor: 'rgba(56,172,210,0.21)'
-            }
-          }
-          case 'app': {
-            return {
-              iconWidth: 22,
-              iconHeight: 24,
-              borderColor: 'rgba(119,131,145,0.6)',
-              selectedBorderColor: 'rgba(229,162,25,1)',
-              hoveredShadowColor: 'rgba(151,151,151,0.21)',
-              selectedShadowColor: 'rgba(229,162,25,0.21)'
-            }
-          }
-        }
-        return {
-          iconWidth: 24,
-          iconHeight: 21,
-          borderColor: 'rgba(119,131,145,0.6)',
-          selectedBorderColor: 'rgba(126,159,84,1)',
-          hoveredShadowColor: 'rgba(151,151,151,0.21)',
-          selectedShadowColor: 'rgba(126,159,84,0.21)'
-        }
-      }
-      function getEntityNodeStyle (entityType) {
-        switch (entityType) {
-          case 'ip': {
-            return {
-              iconWidth: 22,
-              iconHeight: 20,
-              selectedShadowColor: 'rgba(126,159,84,0.1)'
-            }
-          }
-          case 'domain': {
-            return {
-              iconWidth: 22,
-              iconHeight: 22,
-              selectedShadowColor: 'rgba(56,172,210,0.1)'
-            }
-          }
-          case 'app': {
-            return {
-              iconWidth: 21,
-              iconHeight: 24,
-              selectedShadowColor: 'rgba(229,162,25,0.1)'
-            }
-          }
-        }
-        return {
-          iconWidth: 22,
-          iconHeight: 20,
-          borderColor: 'rgba(119,131,145,1)',
-          selectedBorderColor: 'rgba(126,159,84,1)',
-          hoveredShadowColor: 'rgba(151,151,151,0.21)',
-          selectedShadowColor: 'rgba(126,159,84,0.1)'
-        }
-      }
-      function getIconUrl (entityType, colored, isRoot) {
-        let suffix
-        if (entityType === 'domain' && isRoot) {
-          suffix = '-colored2'
-        } else {
-          suffix = colored ? '-colored' : ''
-        }
-        return require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`)
-      }
-    },
-    bindEvents () {
-      const _this = this
-      this.graph.on('node:dragstart', (e) => {
-        _this.graph.layout()
-        refreshDraggedNodePosition(e)
-      })
-      this.graph.on('node:drag', function (e) {
-        refreshDraggedNodePosition(e)
-      })
-      this.graph.on('node:dragend', function (e) {
-        e.item.get('model').fx = null
-        e.item.get('model').fy = null
-      })
-      this.graph.on('node:click', async function (e) {
-        const node = e.item
-        const nodeModel = node.get('model')
-        if (nodeModel.type !== 'tempNode') {
-          _this.rightBox.show = true
-          node.setState('mySelected', true)
-          _this.cleanTempNodesAndTempEdges()
-          // 点击entityNode，查询数据，并根据数据生成tempNode
-          if (nodeModel.type === nodeType.entityNode) {
-            _this.rightBox.loading = true
-            try {
-              // 若已查过数据，不重复查询
-              if (!nodeModel.myData.relatedEntity) {
-                await nodeModel.queryDetailData()
-              }
-              let change = false
-              Object.keys(nodeModel.myData.relatedEntity).forEach(k => {
-                if (nodeModel.myData.relatedEntity[k].total) {
-                  // 若已有同级同类型的listNode，不生成此tempNode
-                  const neighbors = _this.graph.getNeighbors(nodeModel.id, 'target')
-                  const hasListNode = neighbors.some(b => b.get('model').myData.entityType === k)
-                  if (!hasListNode) {
-                    change = true
-                    const tempNode = new Node(
-                      nodeType.tempNode,
-                      `${nodeModel.id}__${k}__temp`,
-                      {
-                        entityType: k,
-                        ...generateTempNodeCoordinate(nodeModel.sourceNode, e)
-                      },
-                      nodeModel
-                    )
-                    const tempEdge = new Edge(nodeModel, tempNode, 'temp')
-                    _this.graph.addItem('node', tempNode)
-                    _this.graph.addItem('edge', tempEdge)
-                  }
-                }
-              })
-              change && _this.graph.layout()
-              _this.rightBox.node = _.cloneDeep(nodeModel)
-              _this.rightBox.mode = 'detail'
-            } catch (e) {
-              _this.$message.error(_this.errorMsgHandler(e))
-            } finally {
-              _this.rightBox.loading = false
-            }
-          } else if (nodeModel.type === nodeType.listNode) {
-            _this.rightBox.node = _.cloneDeep(nodeModel)
-            _this.rightBox.mode = 'list'
-          } else if (nodeModel.type === nodeType.rootNode) {
-            _this.rightBox.node = _.cloneDeep(nodeModel)
-            _this.rightBox.mode = 'detail'
-          }
-        } else {
-          // 点击tempNode，根据source生成listNode和entityNode以及对应的edge。查完entityNode的接口再删除临时node和edge。
-          // 若已达第六层，则只生成listNode，不再展开entityNode
-          const nodes = []
-          const edges = []
-          const listNode = new Node(
-            nodeType.listNode,
-            `${nodeModel.sourceNode.id}__${nodeModel.myData.entityType}-list`,
-            {
-              entityType: nodeModel.myData.entityType,
-              x: nodeModel.x,
-              y: nodeModel.y
-            },
-            nodeModel.sourceNode
-          )
-          nodes.push(listNode)
-          edges.push(new Edge(nodeModel.sourceNode, listNode))
-
-          // 判断listNode的sourceNode层级，若大于等于10（即第6层listNode），则不继续拓展entity node，并给用户提示。否则拓展entity node
-          const level = _this.getNodeLevel(listNode.sourceNode.id)
-          if (level < 10) {
-            _this.rightBox.loading = true
-            try {
-              const entities = await queryRelatedEntity(nodeModel.sourceNode, listNode.myData.entityType)
-              nodeModel.sourceNode.myData.relatedEntity[listNode.myData.entityType].list.push(...entities.list)
-              entities.list.forEach(entity => {
-                const entityNode = new Node(nodeType.entityNode, entity.vertex, {
-                  entityType: listNode.myData.entityType,
-                  entityName: entity.vertex,
-                  x: e.x + Math.random() * 100 - 50,
-                  y: e.y + Math.random() * 100 - 50
-                }, listNode)
-                nodes.push(entityNode)
-                edges.push(new Edge(listNode, entityNode))
-              })
-            } catch (e) {
-              _this.$message.error(_this.errorMsgHandler(e))
-            } finally {
-              _this.rightBox.loading = false
-            }
-          } else {
-            this.$message.warning(this.$t('tip.maxExpandDepth'))
-          }
-          _this.addItems(nodes, edges)
-          _this.cleanTempNodesAndTempEdges()
-          _this.graph.layout()
-          // 手动高亮listNode
-          const _listNode = _this.graph.findById(listNode.id)
-          _this.graph.emit('node:click', { item: _listNode, target: _listNode.getKeyShape() })
-          if (_this.stackData.justUndo) {
-            _this.stackData.justUndo = false
-            _this.stackData.redo = []
-          }
-          if (_this.stackData.justRedo) {
-            _this.stackData.justRedo = false
-            _this.stackData.redo = []
-          }
-        }
-      })
-      this.graph.on('node:mouseenter', function (e) {
-        e.item.setState('hover', true)
-      })
-      this.graph.on('node:mouseleave', function (e) {
-        e.item.setState('hover', false)
-      })
-      function refreshDraggedNodePosition (e) {
-        const model = e.item.get('model')
-        model.fx = e.x
-        model.fy = e.y
-      }
-      function generateTempNodeCoordinate (sourceNode, event) {
-        const sx = sourceNode.x
-        const sy = sourceNode.y
-        const cx = event.x
-        const cy = event.y
-        return {
-          x: cx + cx - sx + Math.random() * 30 - 15,
-          y: cy + cy - sy + Math.random() * 30 - 15
-        }
-      }
-    },
-    addItems (nodes = [], edges = [], stack = true) {
-      // 过滤掉已经存在的node
-      const _nodes = nodes.filter(n => {
-        return !this.graph.findById(n.id)
-      })
-      _nodes.forEach(n => {
-        this.graph.addItem('node', n)
-      })
-      edges.forEach(e => {
-        this.graph.addItem('edge', e)
-      })
-      if (stack) {
-        this.stackData.undo.push({ nodes: _nodes, edges })
-      }
-    },
-    setItemsStata (models = [], stateName, state) {
-      models.forEach(m => {
-        this.graph.setItemState(this.graph.findById(m.id), stateName, state)
-      })
-    },
-    cleanTempNodesAndTempEdges () {
-      // 清除现有tempNode和tempEdge
-      const tempNodes = this.graph.findAll('node', node => node.get('model').type === nodeType.tempNode)
-      tempNodes.forEach(n => {
-        this.graph.removeItem(n)
-      })
-      const tempEdges = this.graph.findAll('edge', edge => edge.get('model').isTemp)
-      tempEdges.forEach(n => {
-        this.graph.removeItem(n)
-      })
-    },
     async generateInitialData () {
       const nodes = []
-      const edges = []
-      // 生成rootNode，并查询相关数据
-      const { offsetWidth, offsetHeight } = document.getElementById('entityGraph')
-      const coordinate = {
-        rootNode: {
-          fx: offsetWidth * 0.4,
-          fy: offsetHeight * 0.3 - 20
-        }
-      }
-      coordinate.ipListNode = {
-        fx: coordinate.rootNode.fx + 200,
-        fy: coordinate.rootNode.fy
-      }
-      coordinate.domainListNode = {
-        fx: coordinate.rootNode.fx + 100,
-        fy: coordinate.rootNode.fy + 173
-      }
-      coordinate.appListNode = {
-        fx: coordinate.rootNode.fx - 100,
-        fy: coordinate.rootNode.fy + 173
-      }
+      const links = []
       const rootNode = new Node(nodeType.rootNode, this.entity.entityName, {
         entityType: this.entity.entityType,
         entityName: this.entity.entityName
-        /* x: coordinate.rootNode.fx,
-        y: coordinate.rootNode.fy */
       })
       await rootNode.queryDetailData()
       nodes.push(rootNode)
 
-      // 生成listNode和entityNode及edge
-      if (rootNode.myData.relatedEntity) {
+      // 生成listNode和entityNode及link
+      if (rootNode.myData.relatedEntities) {
         // listNode
         const listNodes = []
-        const keys = Object.keys(rootNode.myData.relatedEntity)
+        const keys = Object.keys(rootNode.myData.relatedEntities)
         keys.forEach(k => {
-          if (rootNode.myData.relatedEntity[k].total) {
+          if (rootNode.myData.relatedEntities[k].total) {
             const listNode = new Node(
-              nodeType.listNode,
-              `${rootNode.id}__${k}-list`,
-              {
-                entityType: k
-                /* x: coordinate[`${k}ListNode`].fx,
-                y: coordinate[`${k}ListNode`].fy */
-              },
-              rootNode
+                nodeType.listNode,
+                `${rootNode.id}__${k}-list`,
+                {
+                  entityType: k
+                },
+                rootNode
             )
             listNodes.push(listNode)
-            edges.push(new Edge(rootNode, listNode))
+            links.push(new Link(rootNode, listNode))
           }
         })
         // entityNode
         const entityNodes = []
         for (const node of listNodes) {
           const entities = await queryRelatedEntity(rootNode, node.myData.entityType)
-          rootNode.myData.relatedEntity[node.myData.entityType].list = entities.list
+          this.pushRelatedEntities(node, entities.list)
+
           entities.list.forEach(entity => {
             const entityNode = new Node(
-              nodeType.entityNode,
-              entity.vertex,
-              {
-                entityType: node.myData.entityType,
-                entityName: entity.vertex
-              },
-              node
+                nodeType.entityNode,
+                entity.vertex,
+                {
+                  entityType: node.myData.entityType,
+                  entityName: entity.vertex
+                },
+                node
             )
             entityNodes.push(entityNode)
-            edges.push(new Edge(node, entityNode))
+            links.push(new Link(node, entityNode))
           })
         }
         nodes.push(...listNodes, ...entityNodes)
       }
       return {
         nodes: nodes,
-        edges: edges
+        links: links
+      }
+    },
+    expandList () {
+
+    },
+    expandDetailList () {
+
+    },
+    onCloseBlock () {
+
+    },
+    resize () {
+
+    },
+    addItems (toAddNodes, toAddLinks) {
+      if (toAddNodes.length || toAddLinks.length) {
+        const { nodes, links } = this.graph.graphData()
+        const nodes2 = toAddNodes.filter(n => !nodes.some(n2 => n.id === n2.id))
+        nodes.push(...nodes2)
+        links.push(...toAddLinks)
+        this.graph.graphData({ nodes, links })
+      }
+    },
+    removeItems (toRemoveNodes, toRemoveLinks) {
+      let { nodes, links } = this.graph.graphData()
+      nodes = nodes.filter(n => toRemoveNodes.some(n2 => n.id === n2.id))
+      links = links.filter(l => toRemoveLinks.some(l2 => l2.id === l.id))
+      this.graph.graphData({ nodes, links })
+    },
+    cleanTempItems () {
+      let { nodes, links } = this.graph.graphData()
+      nodes = nodes.filter(n => n.type !== nodeType.tempNode)
+      links = links.filter(l => !l.isTemp)
+      this.graph.graphData({ nodes, links })
+    },
+    getNeighborItems (node) {
+      const { links } = this.graph.graphData()
+      const neighboringNodes = []
+      const neighboringTargetNodes = []
+      const neighboringSourceNodes = []
+      const neighboringTargetLinks = []
+      const neighboringSourceLinks = []
+      const neighboringLinks = links.filter(l => {
+        if (l.target === node || l.source === node) {
+          neighboringNodes.push(l.target === node ? l.source : l.target)
+          if (l.target === node) {
+            neighboringSourceNodes.push(l.source)
+            neighboringSourceLinks.push(l)
+          } else {
+            neighboringTargetNodes.push(l.target)
+            neighboringTargetLinks.push(l)
+          }
+          return true
+        }
+        return false
+      })
+      return {
+        nodes: neighboringNodes,
+        targetNodes: neighboringTargetNodes,
+        sourceNodes: neighboringSourceNodes,
+        links: neighboringLinks,
+        targetLinks: neighboringTargetLinks,
+        sourceLinks: neighboringSourceLinks
       }
     },
     getNodeLevel (id) {
       const { findShortestPath } = Algorithm
-      const info = findShortestPath(this.graph.save(), this.entity.entityName, id)
+      const { nodes, links } = this.graph.graphData()
+      const g6FormatData = { nodes: _.cloneDeep(nodes), edges: _.cloneDeep(links) }
+      g6FormatData.edges.forEach(l => {
+        l.source = l.source.id
+        l.target = l.target.id
+      })
+      console.info(g6FormatData)
+      const info = findShortestPath(g6FormatData, this.entity.entityName, id)
       return info.length
     },
-    onCloseBlock () {
-      this.rightBox.mode = ''
-      this.rightBox.show = false
-    },
-    buildTooltip () {
-      const _this = this
-      return new G6.Tooltip({
-        offsetX: 10,
-        offsetY: 20,
-        itemTypes: ['node'],
-        getContent (e) {
-          const node = e.item.getModel()
-          if (node.type === nodeType.listNode) {
-            let iconClass = ''
-            let title = ''
-            let total = 0
-            let loadedCount = 0
-            switch (node.myData.entityType) {
-              case 'ip': {
-                iconClass = 'cn-icon cn-icon-resolve-ip'
-                title = _this.$t('entities.graph.resolveIp')
-                total = _.get(node.sourceNode.myData, 'relatedEntity.ip.total', 0)
-                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.ip.list', []).length
-                break
-              }
-              case 'domain': {
-                iconClass = 'cn-icon cn-icon-subdomain'
-                title = node.isSubdomain() ? _this.$t('entities.subdomain') : _this.$t('entity.graph.resolveDomain')
-                total = _.get(node.sourceNode.myData, 'relatedEntity.domain.total', 0)
-                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.domain.list', []).length
-                break
-              }
-              case 'app': {
-                iconClass = 'cn-icon cn-icon-app-name'
-                title = _this.$t('entities.tab.relatedApp')
-                total = _.get(node.sourceNode.myData, 'relatedEntity.app.total', 0)
-                loadedCount = _.get(node.sourceNode.myData, 'relatedEntity.app.list', []).length
-                break
-              }
-            }
-            return `<div class="primary-node-tooltip">
-              <div class="tooltip__header"><i class="${iconClass}"></i><span class="tooltip__title">${title}</span></div>
-              <div class="tooltip__content">
-                <span>${_this.$t('entity.graph.associatedCount')}:&nbsp;${total}</span>
-                <span>${_this.$t('entity.graph.expandedEntityCount')}:&nbsp;${loadedCount}</span>
-              </div>
-            </div>`
-          } else if (node.type === nodeType.entityNode || node.type === nodeType.rootNode) {
-            if (node.myData && node.myData.tags && node.myData.tags.length > 0) {
-              return `<div class="entity-node-tooltip">
-                <div class="tooltip__header">
-                  <span class="tooltip__title">${node.id}</span>
-                </div>
-                <div class="tooltip__content">
-                  <div class="content-header">
-                    <div class="header-icon"></div>
-                    <span>${_this.$t('entity.graph.tags')}</span>
-                  </div>
-                  <div class="content-tag-list">${generateTagHTML(node.myData.tags)}</div>
-                </div>
-              </div>`
-            } else {
-              return `<div style="padding: 0 6px; font-size: 15px; line-height: 15px; color: #111;">${node.id}</div>`
-            }
-          } else if (node.type === nodeType.tempNode) {
-            return node.label
-          }
-          function generateTagHTML (tags) {
-            let html = ''
-            if (tags) {
-              tags.forEach(t => {
-                html += `<div class="entity-tag entity-tag--level-two-${t.type}">
-                  <span>${t.value}</span>
-                </div>`
-              })
-            }
-            return html
-          }
-        }
-      })
-    },
-    buildToolbar () {
-      const tc = document.createElement('div')
-      tc.id = 'toolbarContainer'
-      tc.className = 'graph-toolbar'
-      document.body.appendChild(tc)
-      const toolbar = new G6.ToolBar({
-        container: tc,
-        className: 'toolbar__tools',
-        getContent: () => {
-          return `<ul>
-            <li code='zoomOut' title="${this.$t('overall.zoomOut')}"><i class="cn-icon cn-icon-zoom-out"></i></li>
-            <li code='zoomIn' title="${this.$t('overall.zoomIn')}"><i class="cn-icon cn-icon-zoom-in"></i></li>
-            <li code='autoZoom' title="${this.$t('overall.autoZoom')}"><i class="cn-icon cn-icon-reset"></i></li>
-            <li code='undo' title="${this.$t('overall.preStep')}" id="preStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-pre-step"></i></li>
-            <li code='redo' title="${this.$t('overall.nextStep')}" id="nextStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-next-step"></i></li>
-            <li code='toDefault' title="${this.$t('overall.reset')}"><i class="cn-icon cn-icon-to-default"></i></li>
-          </ul>`
-        },
-        handleClick: (code, graph) => {
-          if (code === 'undo') { // 删掉刚加进来的node和edge
-            const data = this.stackData.undo.pop()
-            this.stackData.justUndo = true
-            data.nodes.forEach(n => {
-              if (n.type === nodeType.listNode) {
-                const listNode = this.graph.findById(n.id)
-                const listNodeEdges = listNode.getEdges()
-                listNodeEdges.forEach(e => {
-                  e.setState('mySelected', false)
-                })
-                listNode.setState('mySelected', false)
-              }
-              this.graph.removeItem(n.id)
-            })
-            data.edges.forEach(e => {
-              this.graph.removeItem(e.id)
-            })
-            this.stackData.redo.push(data)
-            if (this.stackData.justRedo) {
-              this.stackData.justRedo = false
-            }
-            this.cleanTempNodesAndTempEdges()
-            this.graph.layout()
-            this.onCloseBlock()
-            // graph中删掉后，右侧列表也得删
-          } else if (code === 'redo') { // 恢复刚删掉的node和edge
-            const data = this.stackData.redo.pop()
-            this.stackData.justRedo = true
-            this.addItems(data.nodes, data.edges)
-            if (this.stackData.justUndo) {
-              this.stackData.justUndo = false
-            }
-            this.cleanTempNodesAndTempEdges()
-            this.graph.layout()
-            this.onCloseBlock()
-            // graph中恢复后，右侧列表也得恢复
-          } else if (code === 'autoZoom') {
-            this.graph.zoomTo(1)
-            this.graph.fitCenter()
-          } else if (code === 'zoomOut') {
-            this.graph.zoomTo(this.graph.getZoom() + 0.2, this.center)
-          } else if (code === 'zoomIn') {
-            const currentZoom = this.graph.getZoom()
-            this.graph.zoomTo(currentZoom - 0.2, this.center)
-          } else {
-            this.graph.clear()
-            this.graph.data(this.initialData)
-            this.graph.render()
-            this.stackData = {
-              undo: [],
-              redo: [],
-              justUndo: false,
-              justRedo: false
-            }
-            const rootNode = this.graph.findById(this.entity.entityName)
-            this.graph.emit('node:click', { item: rootNode, target: rootNode.getKeyShape() }) // 手动触发rootNode的点击事件
-          }
-        }
-      })
-      return toolbar
-    },
-    async expandList (nodeId) {
-      const node = this.graph.findById(nodeId)
-      const model = node.getModel()
-      const sourceNode = this.graph.findById(model.sourceNode.id)
-      const sourceModel = sourceNode.getModel()
-      const expandType = model.myData.entityType
-      if (sourceModel.myData.relatedEntity[expandType].list.length >= sourceModel.myData.relatedEntity[expandType].total) {
-        return
+    pushRelatedEntities (node, entities) {
+      if (!this.relatedEntitiesList[node.id]) {
+        this.relatedEntitiesList[node.id] = { ip: [], domain: [], app: [] }
       }
-      if (sourceModel.myData.relatedEntity[expandType].list.length < 50) {
-        this.rightBox.loading = true
-        try {
-          const entities = await queryRelatedEntity(sourceModel, expandType)
-          sourceModel.myData.relatedEntity[expandType].list.push(...entities.list)
-          const entityNodeModels = []
-          const edgeModels = []
-          entities.list.forEach(entity => {
-            const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, {
-              entityType: expandType,
-              entityName: entity.vertex,
-              x: model.x + Math.random() * 500 - 250,
-              y: model.y + Math.random() * 500 - 250
-            }, model)
-            entityNodeModels.push(entityNodeModel)
-
-            const edge = new Edge(model, entityNodeModel)
-            edgeModels.push(edge)
-          })
-          this.addItems(entityNodeModels, edgeModels)
-          this.setItemsStata(edgeModels, 'mySelected', true)
-          this.graph.layout()
-          this.rightBox.node = _.cloneDeep(model)
-        } catch (e) {
-          this.$message.error(this.errorMsgHandler(e))
-        } finally {
-          this.rightBox.loading = false
-        }
-      } else {
-        this.$message.warning(this.$t('tip.maxExpandCount'))
-      }
-    },
-    async expandDetailList (nodeId, expandType) {
-      const node = this.graph.findById(nodeId)
-      if (node) {
-        const nodeModel = node.getModel()
-        if (nodeModel.myData.relatedEntity[expandType].list.length >= nodeModel.myData.relatedEntity[expandType].total) {
-          return
-        }
-        if (nodeModel.myData.relatedEntity[expandType].list.length < 50) {
-          const toAddNodeModels = []
-          const toAddEdgeModels = []
-
-          this.rightBox.loading = true
-          try {
-            const entities = await queryRelatedEntity(nodeModel, expandType)
-            nodeModel.myData.relatedEntity[expandType].list.push(...entities.list)
-            const neighbors = node.getNeighbors('target')
-            const listNode = neighbors.find(n => n.getModel().myData.entityType === expandType)
-            let listNodeModel = listNode.getModel()
-            let listEdgeModel
-            // 如果listNode是tempNode，移除，并新建listNode
-            if (listNodeModel.type === nodeType.tempNode) {
-              // 移除tempNode和tempEdge
-              const tempEdges = listNode.getInEdges()
-              tempEdges.forEach(edge => {
-                this.graph.removeItem(edge)
-              })
-              this.graph.removeItem(listNode)
-
-              listNodeModel = new Node(nodeType.listNode, `${nodeModel.id}__${expandType}-list`, { entityType: expandType, x: listNodeModel.x, y: listNodeModel.y }, nodeModel)
-              listEdgeModel = new Edge(nodeModel, listNodeModel)
-              toAddNodeModels.push(listNodeModel)
-              toAddEdgeModels.push(listEdgeModel)
-            }
-            entities.list.forEach(entity => {
-              const entityNodeModel = new Node(nodeType.entityNode, entity.vertex, {
-                entityType: expandType,
-                entityName: entity.vertex,
-                x: listNodeModel.x + Math.random() * 500 - 250,
-                y: listNodeModel.y + Math.random() * 500 - 250
-              }, listNodeModel)
-              toAddNodeModels.push(entityNodeModel)
-              toAddEdgeModels.push(new Edge(listNodeModel, entityNodeModel))
-            })
-            this.addItems(toAddNodeModels, toAddEdgeModels)
-            if (listEdgeModel) {
-              this.graph.setItemState(this.graph.findById(listEdgeModel.id), 'mySelected', true)
-            }
-            this.graph.layout()
-            this.rightBox.node = _.cloneDeep(nodeModel)
-          } catch (e) {
-            this.$message.error(this.errorMsgHandler(e))
-          } finally {
-            this.rightBox.loading = false
-          }
-        } else {
-          this.$message.warning(this.$t('tip.maxExpandCount'))
-        }
-      }
-    },
-    resize () {
-      const container = document.getElementById('entityGraph')
-      this.graph.changeSize(container.offsetWidth, container.offsetHeight)
+      this.relatedEntitiesList[node.id][node.myData.entityType] = entities
     }
   },
   watch: {
-    stackData: {
-      deep: true,
-      handler (n) {
-        if (n) {
-          if (n.undo.length > 0) {
-            document.getElementById('preStep').classList.remove('toolbar--unactivated')
-          } else {
-            document.getElementById('preStep').classList.add('toolbar--unactivated')
-          }
-          if (n.redo.length > 0) {
-            document.getElementById('nextStep').classList.remove('toolbar--unactivated')
-          } else {
-            document.getElementById('nextStep').classList.add('toolbar--unactivated')
-          }
-        }
-      }
-    }
   },
   async mounted () {
     if (this.entity.entityType && this.entity.entityName) {
@@ -1120,7 +650,6 @@ export default {
   },
   unmounted () {
     window.removeEventListener('resize', this.debounceFunc)
-    this.graph.destroy()
   },
   setup () {
     const route = useRoute()
@@ -1138,10 +667,22 @@ export default {
       node: null,
       loading: true
     })
+    // 右侧关联实体列表
+    const relatedEntitiesList = ref({})
+    // 记录鼠标交互的node
+    const currentHoveredNode = shallowRef(null)
+    const currentSelectedNode = shallowRef(null)
+    const draggedNodes = shallowRef([]) // 记录拖拽过的node
+
     return {
       entity,
       rightBox,
-      graph
+      graph,
+      relatedEntitiesList,
+      currentHoveredNode,
+      currentSelectedNode,
+      draggedNodes,
+      centerCoordinate: [100, 100]
     }
   }
 }
diff --git a/src/views/entityExplorer/entityGraph/edge.js b/src/views/entityExplorer/entityGraph/edge.js
deleted file mode 100644
index 35cede31..00000000
--- a/src/views/entityExplorer/entityGraph/edge.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import G6 from '@antv/g6'
-
-export default class Edge {
-  constructor (sourceNode, targetNode, type) {
-    this.id = sourceNode.id + '__' + targetNode.id
-    this.source = sourceNode.id
-    this.target = targetNode.id
-    this.isTemp = type === 'temp'
-    this.style = type === 'temp' ? tempStyles.style : normalStyles.style
-    this.stateStyles = type === 'temp' ? tempStyles.stateStyles : normalStyles.stateStyles
-  }
-}
-
-const normalStyles = {
-  style: {
-    stroke: '#BEBEBE',
-    endArrow: {
-      path: G6.Arrow.triangle(5, 5),
-      fill: '#BEBEBE'
-    }
-  },
-  stateStyles: {
-    mySelected: {
-      stroke: '#778391',
-      endArrow: {
-        path: G6.Arrow.triangle(5, 5),
-        fill: '#778391'
-      }
-    }
-  }
-}
-
-const tempStyles = {
-  style: {
-    endArrow: {
-      path: G6.Arrow.triangle(5, 5),
-      fill: '#DDD'
-    },
-    stroke: '#DDD',
-    lineDash: [3, 2]
-  },
-  stateStyles: {
-    mySelected: {
-      stroke: '#DDD',
-      endArrow: {
-        path: G6.Arrow.triangle(5, 5),
-        fill: '#DDD'
-      },
-      lineDash: [3, 2]
-    }
-  }
-}
diff --git a/src/views/entityExplorer/entityGraph/link.js b/src/views/entityExplorer/entityGraph/link.js
new file mode 100644
index 00000000..6df0601a
--- /dev/null
+++ b/src/views/entityExplorer/entityGraph/link.js
@@ -0,0 +1,8 @@
+export default class Link {
+  constructor (sourceNode, targetNode, type) {
+    this.id = sourceNode.id + '__' + targetNode.id
+    this.source = sourceNode.id
+    this.target = targetNode.id
+    this.isTemp = type === 'temp'
+  }
+}
diff --git a/src/views/entityExplorer/entityGraph/node.js b/src/views/entityExplorer/entityGraph/node.js
index c9e41711..4b56f579 100644
--- a/src/views/entityExplorer/entityGraph/node.js
+++ b/src/views/entityExplorer/entityGraph/node.js
@@ -25,6 +25,10 @@ export default class Node {
       this.sourceNode = sourceNode
     }
     this.label = this.generateLabel()
+
+    const img = new Image()
+    img.src = this.getIconUrl(cfg.entityType, type === nodeType.rootNode)
+    this.img = img
   }
 
   generateLabel () {
@@ -34,7 +38,7 @@ export default class Node {
         return this.id
       }
       case nodeType.listNode: {
-        return `${this.getLabelText()}(${_.get(this.sourceNode.myData, 'relatedEntity.' + this.myData.entityType + '.total', 0)})`
+        return `${this.getLabelText()}(${_.get(this.sourceNode.myData, 'relatedEntities.' + this.myData.entityType + '.total', 0)})`
       }
       case nodeType.tempNode: {
         return this.getLabelText()
@@ -64,6 +68,11 @@ export default class Node {
     return ''
   }
 
+  getIconUrl (entityType, colored) {
+    const suffix = colored ? '-colored' : ''
+    return require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`)
+  }
+
   isSubdomain () {
     if (this.sourceNode) {
       return this.sourceNode.myData.entityType === 'domain' && this.myData.entityType === 'domain'
@@ -87,11 +96,11 @@ export default class Node {
     }
     this.myData.tags = _tags
 
-    const relatedEntityTotalCount = await this.queryRelatedEntityCount(entityType, entityName)
-    this.myData.relatedEntity = {
-      ip: { total: relatedEntityTotalCount.ipCount, list: [] },
-      domain: { total: this.myData.entityType === 'domain' ? relatedEntityTotalCount.subDomainCount : relatedEntityTotalCount.domainCount, list: [] },
-      app: { total: relatedEntityTotalCount.appCount, list: [] }
+    const relatedEntityTotalCount = await this.queryRelatedEntitiesCount(entityType, entityName)
+    this.myData.relatedEntities = {
+      ip: { total: relatedEntityTotalCount.ipCount, loadedCount: 0 },
+      domain: { total: this.myData.entityType === 'domain' ? relatedEntityTotalCount.subDomainCount : relatedEntityTotalCount.domainCount, loadedCount: 0 },
+      app: { total: relatedEntityTotalCount.appCount, loadedCount: 0 }
     }
   }
 
@@ -121,7 +130,7 @@ export default class Node {
     }
   }
 
-  async queryRelatedEntityCount (entityType, entityName) {
+  async queryRelatedEntitiesCount (entityType, entityName) {
     const response = await axios.get(`${api.entity.entityGraph.relatedEntityCount}/${entityType}?resource=${entityName}`).catch(e => {
       console.error(e)
       throw e
@@ -137,7 +146,7 @@ export default class Node {
 export const nodeType = {
   rootNode: 'rootNode',
   listNode: 'listNode',
-  entityNode: 'entityNode',
+  entityNode: 'en-tityNode',
   tempNode: 'tempNode'
 }
 export async function queryRelatedEntity (node, targetEntityType) {
@@ -146,7 +155,7 @@ export async function queryRelatedEntity (node, targetEntityType) {
     _targetEntityType = 'subdomain'
   }
   let url = `${api.entity.entityGraph[`${node.myData.entityType}Related${_.upperFirst(_targetEntityType)}`]}?resource=${node.myData.entityName}&pageSize=10`
-  const current = node.myData.relatedEntity[targetEntityType].list.length
+  const current = node.myData.relatedEntities[targetEntityType].loadedCount
   const pageNo = parseInt(current / 10) + 1
   url += `&pageNo=${pageNo}`
   const response = await axios.get(url).catch(e => {