diff --git a/src/assets/css/components/views/entityExplorer/entity-graph.scss b/src/assets/css/components/views/entityExplorer/entity-graph.scss
index e23434f1..a234fd65 100644
--- a/src/assets/css/components/views/entityExplorer/entity-graph.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-graph.scss
@@ -1,6 +1,3 @@
-$color-business: var(--el-color-business);
-$color-primary: var(--el-text-color-primary);
-$color-regular: var(--el-text-color-regular);
 .graph-toolbar {
   position: fixed;
   top: 100px;
@@ -18,13 +15,12 @@ $color-regular: var(--el-text-color-regular);
       cursor: pointer;
 
       i {
-        color: $color-regular;
+        color: #575757;
         font-size: 18px;
       }
 
       &.toolbar--unactivated {
         cursor: default;
-
         i {
           opacity: .4;
         }
@@ -32,24 +28,137 @@ $color-regular: var(--el-text-color-regular);
     }
   }
 }
-
 .entity-graph {
   display: flex;
-
+  background-color:'orange';
+  border: 'solid 5px red';
   .entity-graph__chart {
     width: 100%;
+    height:100%;
+    overflow: hidden;
+    .force-graph-container .graph-tooltip {
+      padding: 8px 10px;
+      //border-radius: 10px;
+      background-color: white;
+      box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+
+      .primary-node-tooltip {
+        padding: 5px;
+
+        .tooltip__header {
+          display: flex;
+          align-items: center;
+
+          i {
+            color: #717171;
+            font-size: 14px;
+          }
+          .tooltip__title {
+            padding-left: 6px;
+            font-size: 15px;
+            line-height: 15px;
+            color: #111;
+          }
+        }
+        .tooltip__content {
+          padding-top: 10px;
+          color: #222;
+          font-size: 12px;
+
+          span:first-of-type {
+            padding-right: 20px;
+          }
+        }
+      }
+      .entity-node-tooltip {
+        width: 300px;
+        padding: 5px;
+
+        .tooltip__header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+
+          .tooltip__title {
+            font-size: 15px;
+            line-height: 15px;
+            color: #111;
+          }
+        }
+
+        .tooltip__content {
+          display: flex;
+          flex-direction: column;
+
+          .content-header {
+            display: flex;
+            align-items: center;
+
+            .header-icon {
+              width: 3px !important;
+              height: 12px !important;
+              background: #38ACD2;
+              border-radius: 1px;
+              margin-right: 6px;
+            }
+          }
+          .content-tag-list {
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+
+            .entity-tag {
+              margin: 10px 9px 10px 0;
+              padding: 0 8px;
+              height: 20px;
+              font-size: 12px;
+              border: 1px solid;
+              border-radius: 2px;
+
+              $normal-color: #778391;
+              $normal-light-color: #F7F8F9;
+              $negative-color: #E26154;
+              $negative-light-color: #FEF6F5;
+              $positive-color: #749F4D;
+              $positive-light-color: #F7FAF5;
+              &.entity-tag--level-two-normal {
+                border-color: $normal-color;
+                color: $normal-color;
+                background-color: $normal-light-color;
+              }
+              &.entity-tag--level-two-negative {
+                border-color: $negative-color;
+                color: $negative-color;
+                background-color: $negative-light-color;
+              }
+              &.entity-tag--level-two-positive {
+                border-color: $positive-color;
+                color: $positive-color;
+                background-color: $positive-light-color;
+              }
+            }
+          }
+        }
+      }
+    }
+    .force-graph-container {
+      //height:100% !important;
+      canvas {
+        //height:100% !important;
+      }
+    }
 
     .graph-node {
       display: flex;
       flex-direction: column;
       align-items: center;
       background-color: transparent !important;
-      transition: linear all var(--el-transition-duration-fast);
+      transition: linear all .2s;
 
       .graph-node__text {
         width: 120px;
         font-size: 12px;
-        color: $color-primary;
+        color: #353636;
       }
 
       &.graph-node--root {
@@ -62,38 +171,30 @@ $color-regular: var(--el-text-color-regular);
           box-shadow: none;
           animation: none;
         }
-
         &.graph-node--ip {
-          border-color: var(--el-color-success-light-5) !important;
-          box-shadow: 0 0 0 8px rgba(126, 159, 84, 0.14);
-
+          border-color: #CBD9BB !important;
+          box-shadow: 0 0 0 8px rgba(126,159,84,0.14);
           i {
-            color: var(--el-color-success);
+            color: #7E9F54;
           }
         }
-
         &.graph-node--domain {
-          border-color: var(--el-color-primary-light-7) !important;
-          box-shadow: 0 0 0 8px rgba(56, 172, 210, 0.14);
-
+          border-color: #AFDEED !important;
+          box-shadow: 0 0 0 8px rgba(56,172,210,0.14);
           i {
-            color: $color-business;
+            color: #38ACD2;
           }
         }
-
         &.graph-node--app {
-          border-color: var(--el-color-warning-light-5) !important;
-          box-shadow: 0 0 0 8px rgba(229, 162, 25, 0.14);
-
+          border-color: #F5DAA3 !important;
+          box-shadow: 0 0 0 8px rgba(229,162,25,0.14);
           i {
-            color: var(--el-color-warning);
+            color: #E5A219;
           }
         }
-
         i {
           font-size: 36px;
         }
-
         .graph-node__text {
           padding-top: 30px;
         }
@@ -103,21 +204,19 @@ $color-regular: var(--el-text-color-regular);
         padding-top: 20px;
         width: 66px;
         height: 66px;
-        border: 1px solid #A7B0B9 !important; // 该class并未使用到
+        border: 1px solid #A7B0B9 !important;
         box-shadow: none;
 
         // 覆盖自带的node点击效果
         &.rel-node-checked {
-          box-shadow: 0 0 0 5px rgba(151, 151, 151, 0.21);
+          box-shadow: 0 0 0 5px rgba(151,151,151,0.21);
           animation: none;
-          border-color: $color-regular !important;
+          border-color: #778391 !important;
         }
-
         i {
           font-size: 24px;
-          color: $color-regular;
+          color: #778391;
         }
-
         .graph-node__text {
           padding-top: 24px;
         }
@@ -131,22 +230,19 @@ $color-regular: var(--el-text-color-regular);
 
         &.graph-node--ip {
           i {
-            color: var(--el-color-success);
+            color: #7E9F54;
           }
         }
-
         &.graph-node--domain {
           i {
-            color: $color-business;
+            color: #38ACD2;
           }
         }
-
         &.graph-node--app {
           i {
-            color: var(--el-color-warning);
+            color: #E5A219;
           }
         }
-
         i {
           font-size: 21px;
         }
@@ -159,7 +255,6 @@ $color-regular: var(--el-text-color-regular);
       left: unset !important;
       right: 0 !important;
     }
-
     .entity-graph__detail {
       height: calc(100% - 100px) !important;
       top: 100px !important;
@@ -170,7 +265,7 @@ $color-regular: var(--el-text-color-regular);
   }
 
   .g6-component-tooltip {
-    box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
 
     .primary-node-tooltip {
       padding: 5px;
@@ -180,21 +275,19 @@ $color-regular: var(--el-text-color-regular);
         align-items: center;
 
         i {
-          color: $color-regular;
+          color: #717171;
           font-size: 14px;
         }
-
         .tooltip__title {
           padding-left: 6px;
           font-size: 15px;
           line-height: 15px;
-          color: $color-primary;
+          color: #111;
         }
       }
-
       .tooltip__content {
         padding-top: 10px;
-        color: $color-primary;
+        color: #222;
         font-size: 12px;
 
         span:first-of-type {
@@ -202,7 +295,6 @@ $color-regular: var(--el-text-color-regular);
         }
       }
     }
-
     .entity-node-tooltip {
       width: 300px;
       padding: 5px;
@@ -215,7 +307,7 @@ $color-regular: var(--el-text-color-regular);
         .tooltip__title {
           font-size: 15px;
           line-height: 15px;
-          color: $color-primary;
+          color: #111;
         }
       }
 
@@ -230,12 +322,11 @@ $color-regular: var(--el-text-color-regular);
           .header-icon {
             width: 3px !important;
             height: 12px !important;
-            background: $color-business;
+            background: #38ACD2;
             border-radius: 1px;
             margin-right: 6px;
           }
         }
-
         .content-tag-list {
           display: flex;
           align-items: flex-start;
@@ -249,25 +340,22 @@ $color-regular: var(--el-text-color-regular);
             border: 1px solid;
             border-radius: 2px;
 
-            $normal-color: $color-regular;
-            $normal-light-color: var(--el-fill-color-light);
-            $negative-color: var(--el-color-danger);
-            $negative-light-color: var(--el-color-danger-light-9);
-            $positive-color: var(--el-color-success);
-            $positive-light-color: var(--el-color-success-light-9);
-
+            $normal-color: #778391;
+            $normal-light-color: #F7F8F9;
+            $negative-color: #E26154;
+            $negative-light-color: #FEF6F5;
+            $positive-color: #749F4D;
+            $positive-light-color: #F7FAF5;
             &.entity-tag--level-two-normal {
               border-color: $normal-color;
               color: $normal-color;
               background-color: $normal-light-color;
             }
-
             &.entity-tag--level-two-negative {
               border-color: $negative-color;
               color: $negative-color;
               background-color: $negative-light-color;
             }
-
             &.entity-tag--level-two-positive {
               border-color: $positive-color;
               color: $positive-color;
diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue
index 4083c0e2..54c95a23 100644
--- a/src/views/entityExplorer/EntityGraph.vue
+++ b/src/views/entityExplorer/EntityGraph.vue
@@ -1,6 +1,6 @@
 <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"
@@ -30,6 +30,16 @@
       </el-drawer>
     </div>
   </div>
+  <div id="toolbarContainer" class="graph-toolbar" style="height:50px;">
+    <ul class="toolbar__tools">
+      <li @click="handleToolsbarClick('zoomOut')" title="${this.$t('overall.zoomOut')}"><i class="cn-icon cn-icon-zoom-out"></i></li>
+      <li @click="handleToolsbarClick('zoomIn')" title="${this.$t('overall.zoomIn')}"><i class="cn-icon cn-icon-zoom-in"></i></li>
+      <li @click="handleToolsbarClick('autoZoom')" title="${this.$t('overall.autoZoom')}"><i class="cn-icon cn-icon-reset"></i></li>
+      <li @click="handleToolsbarClick('undo')" title="${this.$t('overall.preStep')}" id="preStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-pre-step"></i></li>
+      <li @click="handleToolsbarClick('redo')" title="${this.$t('overall.nextStep')}" id="nextStep" class="toolbar--unactivated"><i class="cn-icon cn-icon-next-step"></i></li>
+      <li @click="handleToolsbarClick('toDefault')" title="${this.$t('overall.reset')}"><i class="cn-icon cn-icon-to-default"></i></li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -38,112 +48,13 @@ import GraphEntityDetail from '@/views/entityExplorer/entityGraph/GraphEntityDet
 import { useRoute } from 'vue-router'
 import { ref, shallowRef } from 'vue'
 import ForceGraph from 'force-graph'
+// import ForceGraph3D from '3d-force-graph'
 import * as d3 from 'd3'
-import Node, {nodeType, queryRelatedEntity} from './entityGraph/node'
-import testData from './testData'
+import Node, { nodeType } from './entityGraph/node'
+import Link, { linkType } from './entityGraph/link'
+import { builtTooltip } from '@/views/entityExplorer/entityGraph/utils'
 import _ from 'lodash'
-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: {
@@ -154,346 +65,325 @@ export default {
     return {
       debounceFunc: null,
       center: {},
-      initialData: null // 初始化数据，用于重置
+      initialData: null, // 初始化数据，用于重置
+      currentNodeData: [],
+      nodes: [],
+      links: [],
+      graph: shallowRef(null),
+      defaultChargeStrength: -20, // 之前的设置-20
+      defaultLinkDistance: 40,
+      defaultMargin: 2, // 图像与箭头的距离
+      clickNode: null,
+      rootNode: null
     }
   },
   methods: {
     async init () {
       try {
-        const initialData = await this.generateInitialData()
-        this.initialData = _.cloneDeep(initialData) // 初始化数据
+        this.currentNodeData = await this.generateInitialData()
+        this.initialData = _.cloneDeep(this.currentNodeData) // 初始化数据
+        const _this = this
+        let hoverNode = null
         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
+          .graphData(_this.currentNodeData)
+          .nodeCanvasObject((node, ctx) => {
+            const nodeStyle = _this.getNodeStyle(node.type, node.data.entityType)
+            const iconWidth = nodeStyle.iconWidth / 2
+            const iconHeight = nodeStyle.iconHeight / 2
+            const x = node.x - iconWidth / 2
+            const y = node.y - iconHeight / 2
 
-                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))
+            if (node.type === nodeType.rootNode) {
+              if (this.clickNode && this.clickNode.type === nodeType.rootNode) {
+                ctx.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = 'transparent'
+                ctx.arc(node.x, node.y, nodeStyle.selectedShadowR / 2, 0, Math.PI * 2)
+                ctx.fillStyle = nodeStyle.selectedShadowColor// 先画圆形，才能填色
+                ctx.fill()
+                ctx.stroke()
 
-                    // 若未达第六层，为新的 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)' // 虚线颜色
+                ctx.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = 'transparent'
+                ctx.arc(node.x, node.y, nodeStyle.shadowR / 2, 0, Math.PI * 2)
+                ctx.fillStyle = nodeStyle.shadowColor
+                ctx.fill()
+                ctx.stroke()
+              } else if (hoverNode && hoverNode.id === node.id) {
+                ctx.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = 'transparent'
+                ctx.arc(node.x, node.y, nodeStyle.shadowR / 2, 0, Math.PI * 2)
+                ctx.fillStyle = nodeStyle.hoveredShadowColor
+                ctx.fill()
+                ctx.stroke()
               } 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.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = 'transparent'
+                ctx.arc(node.x, node.y, nodeStyle.shadowR / 2, 0, Math.PI * 2)
+                ctx.fillStyle = nodeStyle.shadowColor
+                ctx.fill()
+                ctx.stroke()
               }
-              ctx.moveTo(start.x, start.y)
-              ctx.lineTo(lineEndX, lineEndY)
-              ctx.strokeStyle = color
-              ctx.lineWidth = width
+            } else if (node.type === nodeType.listNode) {
+              if (this.clickNode && this.clickNode.id === node.id) {
+                ctx.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = 'transparent'
+                ctx.arc(node.x, node.y, nodeStyle.shadowR / 2, 0, Math.PI * 2)
+                ctx.fillStyle = nodeStyle.selectedShadowColor
+                ctx.fill()
+                ctx.stroke()
+              } else if (hoverNode && hoverNode.id === node.id) {
+                ctx.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = 'transparent'
+                ctx.arc(node.x, node.y, nodeStyle.shadowR / 2, 0, Math.PI * 2)
+                ctx.fillStyle = nodeStyle.hoveredShadowColor
+                ctx.fill()
+                ctx.stroke()
+              }
+            }
+
+            ctx.beginPath()
+            ctx.lineWidth = 0.5
+            ctx.strokeStyle = nodeStyle.borderColor// 边的颜色
+            ctx.arc(node.x, node.y, nodeStyle.innerR / 2, 0, Math.PI * 2)
+            ctx.fillStyle = nodeStyle.fill// 中间的填充色
+            ctx.fill()
+            ctx.stroke()
+
+            ctx.drawImage(node.img, x, y, iconWidth, iconHeight)
+
+            if (node.type === nodeType.rootNode) {
+              ctx.font = nodeStyle.font
+              ctx.fillStyle = nodeStyle.fillStyle
+              ctx.textAlign = nodeStyle.textAlign
+              ctx.textBaseline = nodeStyle.textBaseline
+              ctx.fillText(node.label, node.x, node.y + nodeStyle.selectedShadowR / 2 + 5)
+            } else if (node.type === nodeType.listNode || node.type === nodeType.tempNode) {
+              ctx.beginPath()
+              ctx.lineWidth = 1
+              ctx.strokeStyle = '#FFFFFF'// 边的颜色
+              ctx.rect(node.x - 19, node.y + nodeStyle.innerR / 2 + 8 - 6, 38, 12)
+              ctx.fillStyle = '#FFFFFF'
+              ctx.fill()
               ctx.stroke()
 
-              // 绘制箭头
-              ctx.save() // 保存当前状态以便之后恢复
-              ctx.translate(arrowEndX, arrowEndY) // 将坐标原点移动到箭头末端
-              ctx.rotate(angle) // 根据链接方向旋转坐标系
+              ctx.font = nodeStyle.font
+              ctx.fillStyle = nodeStyle.fillStyle
+              ctx.textAlign = nodeStyle.textAlign
+              ctx.textBaseline = nodeStyle.textBaseline
+              ctx.fillText(node.label, node.x, node.y + nodeStyle.innerR / 2 + 8)
+            }
+          })
+          .nodePointerAreaPaint((node, color, ctx) => { // 鼠标hover起作用的范围
+            const nodeStyle = _this.getNodeStyle(node.type, node.data.entityType)
+            const size = nodeStyle.innerR
+            ctx.fillStyle = color
+            ctx.fillRect(node.x - size / 2, node.y - size / 2, size, size) // draw square as pointer trap
+          })
+          .linkCanvasObject((link, ctx) => {
+            if (link.source.x !== undefined && link.source.y !== undefined && link.target.x !== undefined && link.target.y !== undefined) {
+              const nodeStyle = _this.getNodeStyle(link.target.type, link.target.data.entityType)
+
+              ctx.lineWidth = 0.5
               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
+              if (this.clickNode && (this.clickNode.id === link.source.id || this.clickNode.id === link.target.id)) {
+                ctx.strokeStyle = link.clickColor
+              } else {
+                ctx.strokeStyle = link.color
               }
-              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)
+
+              const lineDash = link.target.type === nodeType.tempNode ? [2, 2] : []
+              ctx.setLineDash(lineDash)
+              ctx.moveTo(link.source.x, link.source.y)
+              const xy = _this.findCircleLineIntersection(link.target.x, link.target.y, nodeStyle.innerR / 2, link.source.x, link.source.y)
+              ctx.lineTo(xy[0].x, xy[0].y)
+              _this.drawArrow(ctx, link.source.x, link.source.y, xy[0].x, xy[0].y, 40, 3)
+
+              // 圆角三角形
+              if (this.clickNode && (this.clickNode.id === link.source.id || this.clickNode.id === link.target.id)) {
+                ctx.fillStyle = link.clickColor
+              } else {
+                ctx.fillStyle = link.color
+              }
+
+              ctx.fill()
+              ctx.closePath()
+              ctx.stroke()
+            }
+          })
+          .autoPauseRedraw(false) // keep redrawing after engine has stopped如果您有依赖于画布的不断重绘的自定义动态对象，建议关闭此选项。
+          .onNodeHover(node => {
+            hoverNode = node || null
+            if (node) {
+              node.name = builtTooltip(node)
+            }
+          })
+          .centerAt(0, 30)// 设置中心节点位置
+          .onNodeClick(async (nodeModel, e) => {
+            this.clickNode = nodeModel || null
+            const newLevel = nodeModel.level + 1
+            if (nodeModel.type !== 'tempNode') {
+              // _this.rightBox.show = true
+              _this.cleanTempNodesAndTempEdges()
+              // 点击entityNode，查询数据，并根据数据生成tempNode
+              if (nodeModel.type === nodeType.entityNode) {
+                // _this.rightBox.loading = true
+                try {
+                  // 若已查过数据，不重复查询
+                  if (!nodeModel.data.relatedEntities) {
+                    await nodeModel.queryDetailData()
+                  }
+                  let change = false
+                  Object.keys(nodeModel.data.relatedEntities).forEach(k => {
+                    if (nodeModel.data.relatedEntities[k].total) {
+                      // 若已有同级同类型的listNode，不生成此tempNode
+                      const neighbors = nodeModel.getNeighbors(this.currentNodeData)
+                      const hasListNode = neighbors.nodes.some(b => b.data.entityType === k)
+                      if (!hasListNode) {
+                        change = true
+                        const tempNode = new Node(
+                          nodeType.tempNode,
+                              `${nodeModel.id}__${k}__temp`,
+                              {
+                                entityType: k,
+                                ..._this.generateTempNodeCoordinate(nodeModel.getSourceNode(_this.currentNodeData), e)
+                              },
+                              nodeModel,
+                              this.defaultChargeStrength,
+                              this.getIconUrl(k, false, false),
+                              newLevel
+                        )
+                        this.$nextTick(() => {
+                          tempNode.fx = tempNode.x
+                          tempNode.fy = tempNode.y
+                        })
+
+                        const tempEdge = new Link(nodeModel, tempNode, 'temp', this.defaultLinkDistance, 3)
+                        _this.currentNodeData.nodes.push(tempNode)
+                        _this.currentNodeData.links.push(tempEdge)
+                        _this.graph.graphData(_this.currentNodeData)
+                      }
+                    }
+                  })
+                  // change && _this.graph.layout()//?????????????
+                  _this.rightBox.node = _.cloneDeep(nodeModel)
+                  _this.rightBox.mode = 'detail'
+                } catch (e) {
+                  console.log(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 sourceNode = nodeModel.getSourceNode(_this.currentNodeData)
+              const listNode = new Node(
+                nodeType.listNode,
+                    `${sourceNode.id}__${nodeModel.data.entityType}-list`,
+                    {
+                      entityType: nodeModel.data.entityType,
+                      x: nodeModel.x,
+                      y: nodeModel.y
+                    },
+                    sourceNode,
+                    this.defaultChargeStrength,
+                    this.getIconUrl(nodeModel.data.entityType, false, false),
+                    newLevel
+              )
+              nodes.push(listNode)
+              edges.push(new Link(sourceNode, listNode, null, this.defaultLinkDistance, 2))
+
+              // 判断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 sourceNode.queryRelatedEntities(listNode.data.entityType)
+                  sourceNode.data.relatedEntities[listNode.data.entityType].list.push(...entities.list)
+                  entities.list.forEach(entity => {
+                    const entityNode = new Node(nodeType.entityNode, entity.vertex, {
+                      entityType: listNode.data.entityType,
+                      entityName: entity.vertex,
+                      x: e.x + Math.random() * 100 - 50,
+                      y: e.y + Math.random() * 100 - 50
+                    }, listNode, this.defaultChargeStrength, this.getIconUrl(listNode.data.entityType, true, false), newLevel)
+                    nodes.push(entityNode)
+                    edges.push(new Link(listNode, entityNode, null, this.defaultLinkDistance, 2))
+                  })
+                } catch (e) {
+                  console.log(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.zoom(1,0)//缩放画布
+
+            /* if(node.type !== nodeType.listNode && node.type !== nodeType.rootNode) {
+                let clickNodeData = await this.generateInitialData(node)
+                node.collapsed = !node.collapsed // toggle collapse state
+                let index = this.initialData.nodes.findIndex(item => item.id === node.id)
+                if (index > -1) {
+                  this.initialData.nodes.splice(index,1)
+                }
+                //clickNodeData.nodes = this.initialData.nodes.concat(clickNodeData.nodes)
+                //clickNodeData.links = this.initialData.links.concat(clickNodeData.links)
+                Graph.graphData(clickNodeData)
+              } */
+          })
+
+          .d3Force('link', d3.forceLink().id(link => link.id)
+            .distance(link => {
+              return link.distance
+            })
+            .strength(link => {
+              return link.strength
+            }))// 设置线对点的力？
+          .d3Force('center', d3.forceCenter().strength(0))// 设置力导图点阵中心位置, 向心力设置为0以后，d3.forceCenter(-50,-70)不起作用了
+          .d3Force('charge', d3.forceManyBody().strength(node => { // 电荷力：吸引力或排斥力。forceManyBody使所有元素相互吸引或排斥。可以设置吸引或排斥的强度，.strength()其中正值导致元素相互吸引，而负值将导致元素相互排斥。
+            const strength = node.level === 0 ? -350 : node.strength// 中心节点的排斥力要设置的比较大（-300，-200，-100），这样中心节点的子节点的子节点就会是远离中心节点的状态，进行聚集。
+            return strength
+          }))
+          .onNodeDrag((node, translate) => {
+          })
+          .onNodeDragEnd((node, translate) => { // 修复拖动节点
+            node.fx = node.x
+            node.fy = node.y
+          })
       } catch (e) {
         console.error(e)
         this.$message.error(this.errorMsgHandler(e))
@@ -501,152 +391,580 @@ export default {
         this.rightBox.loading = false
       }
     },
-    async generateInitialData () {
+    handleToolsbarClick (code) {
+      if (code === 'undo') {
+        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()
+      } else if (code === 'redo') {
+        const data = this.stackData.redo.pop()
+        this.stackData.justRedo = true
+        this.addItems(data.nodes, data.edges)
+        // this.stackData.undo.push(data)
+        if (this.stackData.justUndo) {
+          this.stackData.justUndo = false
+        }
+        // this.cleanTempNodesAndTempEdges()
+        this.graph.layout()
+        this.onCloseBlock()
+      } else if (code === 'autoZoom') {
+        this.graph.zoom(2)
+        this.graph.centerAt(0, 30)
+      } else if (code === 'zoomOut') {
+        this.graph.zoom(this.graph.zoom() + 0.2)
+      } else if (code === 'zoomIn') {
+        this.graph.zoom(this.graph.zoom() - 0.2)
+      } else {
+        // this.graph = null
+        // this.currentNodeData = []
+        // this.nodes = []
+        // this.links = []
+        this.clickNode = this.rootNode
+        // this.init()
+
+        this.graph.graphData(this.initialData).centerAt(0, 30)
+      }
+    },
+
+    getNodeStyle (curNodeType, entityType) {
+      const _this = this
+      switch (curNodeType) {
+        case nodeType.rootNode: {
+          return _this.getRootNodeStyle(entityType)
+        }
+        case nodeType.listNode: {
+          return _this.getListNodeStyle(entityType)
+        }
+        case nodeType.entityNode: {
+          return _this.getEntityNodeStyle(entityType)
+        }
+        case nodeType.tempNode: {
+          return _this.getTempNodeStyle(entityType)
+        }
+      }
+    },
+    getRootNodeStyle (entityType) {
+      const nodeStyle = {
+        innerR: 26,
+        fill: '#FFFFFF',
+        shadowR: 31.5,
+        selectedShadowR: 38.5,
+        font: '8px NotoSansSChineseRegular',
+        textAlign: 'center',
+        textBaseline: 'middle',
+        fillStyle: '#353636'
+      }
+      switch (entityType) {
+        case 'ip': {
+          return {
+            ...nodeStyle,
+            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 {
+            ...nodeStyle,
+            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 {
+            ...nodeStyle,
+            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 {
+        ...nodeStyle,
+        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)'
+      }
+    },
+    getListNodeStyle (entityType) {
+      const nodeStyle = {
+        innerR: 21,
+        shadowR: 26.5,
+        fill: '#FFFFFF',
+        font: '8px NotoSansSChineseRegular',
+        textAlign: 'center',
+        textBaseline: 'middle',
+        fillStyle: '#353636'
+      }
+      switch (entityType) {
+        case 'ip': {
+          return {
+            ...nodeStyle,
+            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 {
+            ...nodeStyle,
+            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 {
+            ...nodeStyle,
+            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 {
+        ...nodeStyle,
+        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)'
+      }
+    },
+    getTempNodeStyle (entityType) {
+      const nodeStyle = {
+        innerR: 14,
+        fill: 'transparent',
+        font: '8px NotoSansSChineseRegular',
+        textAlign: 'center',
+        textBaseline: 'middle',
+        fillStyle: '#353636'
+      }
+      switch (entityType) {
+        case 'ip': {
+          return {
+            ...nodeStyle,
+            iconWidth: 24,
+            iconHeight: 21,
+            borderColor: '#FFFFFF',
+            selectedBorderColor: 'rgba(126,159,84,1)',
+            hoveredShadowColor: 'rgba(151,151,151,0.21)',
+            selectedShadowColor: 'rgba(126,159,84,0.21)'
+          }
+        }
+        case 'domain': {
+          return {
+            ...nodeStyle,
+            iconWidth: 24,
+            iconHeight: 24,
+            borderColor: '#FFFFFF',
+            selectedBorderColor: 'rgba(56,172,210,1)',
+            hoveredShadowColor: 'rgba(151,151,151,0.21)',
+            selectedShadowColor: 'rgba(56,172,210,0.21)'
+          }
+        }
+        case 'app': {
+          return {
+            ...nodeStyle,
+            iconWidth: 22,
+            iconHeight: 24,
+            borderColor: '#FFFFFF',
+            selectedBorderColor: 'rgba(229,162,25,1)',
+            hoveredShadowColor: 'rgba(151,151,151,0.21)',
+            selectedShadowColor: 'rgba(229,162,25,0.21)'
+          }
+        }
+      }
+      return {
+        ...nodeStyle,
+        iconWidth: 24,
+        iconHeight: 21,
+        borderColor: '#FFFFFF',
+        selectedBorderColor: 'rgba(126,159,84,1)',
+        hoveredShadowColor: 'rgba(151,151,151,0.21)',
+        selectedShadowColor: 'rgba(126,159,84,0.21)'
+      }
+    },
+    getEntityNodeStyle (entityType) {
+      const nodeStyle = {
+        innerR: 12,
+        fill: 'transparent'
+      }
+      switch (entityType) {
+        case 'ip': {
+          return {
+            ...nodeStyle,
+            iconWidth: 22,
+            iconHeight: 20,
+            selectedShadowColor: 'rgba(126,159,84,0.1)'
+          }
+        }
+        case 'domain': {
+          return {
+            ...nodeStyle,
+            iconWidth: 22,
+            iconHeight: 22,
+            selectedShadowColor: 'rgba(56,172,210,0.1)'
+          }
+        }
+        case 'app': {
+          return {
+            ...nodeStyle,
+            iconWidth: 21,
+            iconHeight: 24,
+            selectedShadowColor: 'rgba(229,162,25,0.1)'
+          }
+        }
+      }
+      return {
+        ...nodeStyle,
+        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)'
+      }
+    },
+    /**
+     * 求直线与圆的交点坐标
+     * 圆：x2, y2, r
+     * 线段： x1, y1, x2, y2
+     * */
+    findCircleLineIntersection (x2, y2, r, x1, y1) {
+      r = r + +this.defaultMargin
+      const xx = x1 - x2
+      const yy = y1 - y2
+      let n = Math.sqrt(Math.pow(r, 2) / [Math.pow(yy / xx, 2) + 1])
+      let m = Math.sqrt(Math.pow(r, 2) - Math.pow(n, 2))
+      if (xx > 0) {
+        if (yy > 0) { // 第四象限
+
+        } else { // 第一象限
+          m *= -1
+        }
+      } else {
+        n *= -1
+        if (yy > 0) { // 第三象限
+
+        } else { // 第二象限
+          m *= -1
+        }
+      }
+      const x = x2 + n
+      const y = y2 + m
+      return [{ x, y }]
+    },
+    /**
+     ctx ：Canvas绘图环境
+     fromX, fromY ：起点坐标（也可以换成 p1 ，只不过它是一个数组）
+     toX, toY ：终点坐标 (也可以换成 p2 ，只不过它是一个数组)
+     theta ：三角斜边一直线夹角
+     headlen ：三角斜边长度
+     width ：箭头线宽度
+     color ：箭头颜色
+     */
+    drawArrow (ctx, fromX, fromY, toX, toY, theta, headlen) {
+      theta = typeof (theta) != 'undefined' ? theta : 30
+      headlen = typeof (theta) != 'undefined' ? headlen : 10
+
+      // 计算各角度和对应的P2,P3坐标
+      const angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI
+      const angle1 = (angle + theta) * Math.PI / 180
+      const angle2 = (angle - theta) * Math.PI / 180
+      const topX = headlen * Math.cos(angle1)
+      const topY = headlen * Math.sin(angle1)
+      const botX = headlen * Math.cos(angle2)
+      const botY = headlen * Math.sin(angle2)
+
+      let arrowX = fromX - topX
+      let arrowY = fromY - topY
+
+      arrowX = toX + topX
+      arrowY = toY + topY
+      ctx.moveTo(arrowX, arrowY)
+      ctx.lineTo(toX, toY)
+      arrowX = toX + botX
+      arrowY = toY + botY
+      ctx.lineTo(arrowX, arrowY)
+      ctx.lineTo(toX + topX, toY + topY)
+    },
+    getNodeLevel (id) {
+      // this.graph.d3AlphaTarget()
+      return 2
+    },
+    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.currentNodeData.nodes.find(node => node.id === n.id)// ???????????
+      })
+      _nodes.forEach(n => {
+        this.currentNodeData.nodes.push(n)
+      })
+      edges.forEach(e => {
+        this.currentNodeData.links.push(e)
+      })
+      if (_nodes.length > 0 || edges.length > 0) {
+        this.graph.graphData(this.currentNodeData)
+      }
+    },
+    cleanTempNodesAndTempEdges () {
+      // 清除现有tempNode和tempEdge
+      const tempNodes = this.currentNodeData.nodes.filter(node => node.type === nodeType.tempNode)
+      tempNodes.forEach(n => {
+        const tempNodeIndex = this.currentNodeData.nodes.indexOf(n)
+        this.currentNodeData.nodes.splice(tempNodeIndex, 1)
+      })
+      const tempEdges = this.currentNodeData.links.filter(edge => edge.type === 'temp')
+      tempEdges.forEach(n => {
+        const tempEdgeIndex = this.currentNodeData.links.indexOf(n)
+        this.currentNodeData.links.splice(tempEdgeIndex, 1)
+      })
+      if (tempNodes.length > 0 || tempEdges.length > 0) {
+        this.graph.graphData(this.currentNodeData)
+      }
+    },
+    async generateInitialData (clickNode) {
       const nodes = []
       const links = []
-      const rootNode = new Node(nodeType.rootNode, this.entity.entityName, {
-        entityType: this.entity.entityType,
-        entityName: this.entity.entityName
-      })
+
+      const rootNode = clickNode || new Node(nodeType.rootNode, this.entity.entityName, this.entity, null, this.defaultChargeStrength, this.getIconUrl(this.entity.entityType, true, true), 0)
       await rootNode.queryDetailData()
       nodes.push(rootNode)
+      this.clickNode = rootNode
+      this.rootNode = rootNode
 
-      // 生成listNode和entityNode及link
-      if (rootNode.myData.relatedEntities) {
+      // 生成listNode和entityNode及edge
+      if (rootNode.data.relatedEntities) {
         // listNode
         const listNodes = []
-        const keys = Object.keys(rootNode.myData.relatedEntities)
+        const keys = Object.keys(rootNode.data.relatedEntities)
         keys.forEach(k => {
-          if (rootNode.myData.relatedEntities[k].total) {
+          if (rootNode.data.relatedEntities[k].total) {
             const listNode = new Node(
-                nodeType.listNode,
-                `${rootNode.id}__${k}-list`,
-                {
-                  entityType: k
-                },
-                rootNode
+              nodeType.listNode,
+              `${rootNode.id}__${k}-list`,
+              {
+                entityType: k
+              },
+              rootNode,
+              this.defaultChargeStrength,
+              this.getIconUrl(k, false, false),
+              1
             )
             listNodes.push(listNode)
-            links.push(new Link(rootNode, listNode))
+            links.push(new Link(rootNode, listNode, null, 60, 1))
           }
         })
         // entityNode
         const entityNodes = []
-        for (const node of listNodes) {
-          const entities = await queryRelatedEntity(rootNode, node.myData.entityType)
-          this.pushRelatedEntities(node, entities.list)
-
+        for (const listNode of listNodes) {
+          const entities = await rootNode.queryRelatedEntities(listNode.data.entityType)
+          rootNode.data.relatedEntities[listNode.data.entityType].list = 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: listNode.data.entityType,
+                entityName: entity.vertex
+              },
+              listNode,
+              this.defaultChargeStrength,
+              this.getIconUrl(listNode.data.entityType, true, false),
+              2
             )
             entityNodes.push(entityNode)
-            links.push(new Link(node, entityNode))
+            links.push(new Link(listNode, entityNode, null, this.defaultLinkDistance, 2))
           })
         }
         nodes.push(...listNodes, ...entityNodes)
       }
       return {
-        nodes: nodes,
-        links: links
+        nodes,
+        links
       }
     },
-    expandList () {
+    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
+      }
+      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'))
+      }
     },
-    expandDetailList () {
+    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'))
+        }
+      }
     },
     onCloseBlock () {
-
+      this.rightBox.mode = ''
+      this.rightBox.show = false
     },
     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 })
+    getIconUrl (entityType, colored, isRoot) {
+      let suffix
+      if (entityType === 'domain' && isRoot) {
+        suffix = '-colored2'
+      } else {
+        suffix = colored ? '-colored' : ''
       }
-    },
-    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 { 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
-    },
-    pushRelatedEntities (node, entities) {
-      if (!this.relatedEntitiesList[node.id]) {
-        this.relatedEntitiesList[node.id] = { ip: [], domain: [], app: [] }
-      }
-      this.relatedEntitiesList[node.id][node.myData.entityType] = entities
+      const img = new Image()
+      img.src = require(`@/assets/img/entity-symbol2/${entityType}${suffix}.svg`)
+      return img
     }
   },
   watch: {
   },
   async mounted () {
     if (this.entity.entityType && this.entity.entityName) {
-      await this.init()
+      this.init()
+      this.debounceFunc = this.$_.debounce(this.resize, 300)
+      window.addEventListener('resize', this.debounceFunc)
     }
-    this.debounceFunc = this.$_.debounce(this.resize, 300)
-    window.addEventListener('resize', this.debounceFunc)
   },
   unmounted () {
     window.removeEventListener('resize', this.debounceFunc)
@@ -663,26 +981,14 @@ export default {
 
     const rightBox = ref({
       mode: 'detail', // list | detail
-      show: true,
+      show: false,
       node: null,
       loading: true
     })
-    // 右侧关联实体列表
-    const relatedEntitiesList = ref({})
-    // 记录鼠标交互的node
-    const currentHoveredNode = shallowRef(null)
-    const currentSelectedNode = shallowRef(null)
-    const draggedNodes = shallowRef([]) // 记录拖拽过的node
-
     return {
       entity,
       rightBox,
-      graph,
-      relatedEntitiesList,
-      currentHoveredNode,
-      currentSelectedNode,
-      draggedNodes,
-      centerCoordinate: [100, 100]
+      graph
     }
   }
 }
diff --git a/src/views/entityExplorer/entityGraph/link.js b/src/views/entityExplorer/entityGraph/link.js
index 6df0601a..67957344 100644
--- a/src/views/entityExplorer/entityGraph/link.js
+++ b/src/views/entityExplorer/entityGraph/link.js
@@ -1,8 +1,21 @@
-export default class Link {
-  constructor (sourceNode, targetNode, type) {
-    this.id = sourceNode.id + '__' + targetNode.id
+export default class Edge {
+  constructor (sourceNode, targetNode, type = linkType.normal, distance, level = 1) {
     this.source = sourceNode.id
     this.target = targetNode.id
-    this.isTemp = type === 'temp'
+    this.type = type
+    this.distance = distance || 20// 连接中心节点的线的distance为60，其他节点为20
+    this.strength = level === 1 ? 0.5 : (level === 2 ? 1 : 1)// level2：设置为0.5-1
+    this.color = '#c8c8cc'// 未点击线所连接的节点时线的颜色
+    this.clickColor = '#7b7b99'// 点击此线所连接的节点后，线的颜色
+    // this.width = 1//未点击线所连接的节点时线的宽度
+    // this.arrowColor = '#c8c8cc'
+    // this.clickArrowColor = '#7b7b99'
+    // this.clickWidth = 1//点击节点后，此节点所连接的线的宽度
+    this.level = level// 1:source为中心节点的线，是直线; 2:source为listNode节点的线，是直线; 3:target为临时节点的线，是虚线
   }
 }
+
+export const linkType = {
+  normal: 'normal',
+  temp: 'temp'
+}
diff --git a/src/views/entityExplorer/entityGraph/node.js b/src/views/entityExplorer/entityGraph/node.js
index 4b56f579..bf73c0ef 100644
--- a/src/views/entityExplorer/entityGraph/node.js
+++ b/src/views/entityExplorer/entityGraph/node.js
@@ -1,141 +1,85 @@
 import _ from 'lodash'
-import i18n from '@/i18n'
-import axios from 'axios'
-import { api } from '@/utils/api'
-import { entityDefaultColor, intentColor } from '@/utils/constants'
+import { entityDefaultColor, entityType } from '@/utils/constants'
 import { formatTags } from '@/utils/tools'
+import { generateLabel, builtTooltip, queryEntityBasicInfo, queryTags, queryRelatedEntityCount } from '@/views/entityExplorer/entityGraph/utils'
+import { api } from '@/utils/api'
+import axios from 'axios'
 
 export default class Node {
   /*
   * type: 对应nodeType
-  * cfg: { entityType, entityName, x, y, fx, fy }
+  * cfg: { entityType, entityName }
   * */
-  constructor (type, id, cfg, sourceNode) {
-    this.type = type
+  constructor (type, id, data, sourceNode, strength, img, level) {
     this.id = id
-    this.x = _.get(cfg, 'x', null)
-    this.y = _.get(cfg, 'y', null)
-    this.fx = _.get(cfg, 'fx', null)
-    this.fy = _.get(cfg, 'fy', null)
-    this.myData = {
-      entityType: cfg.entityType,
-      entityName: cfg.entityName
-    }
-    if (sourceNode) {
-      this.sourceNode = sourceNode
-    }
-    this.label = this.generateLabel()
-
-    const img = new Image()
-    img.src = this.getIconUrl(cfg.entityType, type === nodeType.rootNode)
+    this.type = type
+    this.vx = 0
+    this.vy = 0
+    this.fx = level === 0 ? 0 : null// 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
+    this.fy = level === 0 ? 0 : null// 设置为0，即可固定中心节点。0为中心节点，1为中心节点的子节点，2为第三级节点
+    this.level = level
     this.img = img
-  }
-
-  generateLabel () {
-    switch (this.type) {
-      case nodeType.rootNode:
-      case nodeType.entityNode: {
-        return this.id
-      }
-      case nodeType.listNode: {
-        return `${this.getLabelText()}(${_.get(this.sourceNode.myData, 'relatedEntities.' + this.myData.entityType + '.total', 0)})`
-      }
-      case nodeType.tempNode: {
-        return this.getLabelText()
-      }
+    this.strength = strength || -10
+    this.sourceNode = sourceNode
+    this.isSubdomain = sourceNode ? sourceNode.data.entityType === entityType.domain && data.entityType === entityType.domain : false
+    this.data = {
+      entityType: data.entityType,
+      entityName: data.entityName
+      // img:data.img
     }
-    return ''
+    this.label = generateLabel(type, id, data, sourceNode)
+    this.name = builtTooltip(this)
   }
 
-  getLabelText () {
-    if (this.myData.entityType === 'ip') {
-      if (this.sourceNode.myData.entityType === 'app') {
-        return i18n.global.t('entities.tab.relatedIp')
-      } else if (this.sourceNode.myData.entityType === 'domain') {
-        return i18n.global.t('entities.graph.resolveIp')
-      }
-    } else if (this.myData.entityType === 'domain') {
-      if (this.sourceNode.myData.entityType === 'ip') {
-        return i18n.global.t('entities.graph.resolvedDomain')
-      } else if (this.sourceNode.myData.entityType === 'app') {
-        return i18n.global.t('entities.graph.relatedDomain')
-      } else if (this.sourceNode.myData.entityType === 'domain') {
-        return i18n.global.t('entities.subdomain')
-      }
-    } else if (this.myData.entityType === 'app') {
-      return i18n.global.t('entities.tab.relatedApp')
-    }
-    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'
-    } else {
-      return false
-    }
-  }
-
-  // 查询basicInfo、tags、关联实体数量
+  // listNode和entityNode专用，查询实体信息
   async queryDetailData () {
-    const entityType = this.myData.entityType
-    const entityName = this.myData.entityName
+    const entityType = this.data.entityType
+    const entityName = this.data.entityName
 
-    this.myData.basicInfo = await this.queryEntityBasicInfo(entityType, entityName)
+    this.data.basicInfo = await queryEntityBasicInfo(entityType, entityName)
 
-    const tags = await this.queryTags(entityType, entityName)
+    const tags = await queryTags(entityType, entityName)
     let _tags = []
     formatTags(tags, entityType, _tags)
-    if (_.isArray(tags.tags)) {
-      _tags = _.concat(_tags, tags.tags.map(tag => ({ value: tag.name, color: intentColor[tag.intent] || entityDefaultColor })))
+    if (_.isArray(tags.userDefinedTags)) {
+      _tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
     }
-    this.myData.tags = _tags
+    this.data.tags = _tags
 
-    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 }
+    const relatedEntityTotalCount = await queryRelatedEntityCount(entityType, entityName)
+    this.data.relatedEntities = {
+      ip: { total: relatedEntityTotalCount.ipCount, pageNo: 0, list: [] }, //
+      domain: { total: this.data.entityType === 'domain' ? relatedEntityTotalCount.subDomainCount : relatedEntityTotalCount.domainCount, pageNo: 0, list: [] }, // pageNo: 0,
+      app: { total: relatedEntityTotalCount.appCount, pageNo: 0, list: [] }// pageNo: 0,
     }
   }
 
-  async queryEntityBasicInfo (entityType, entityName) {
-    const response = await axios.get(`${api.entity.entityGraph.basicInfo}/${entityType}?resource=${entityName}`).catch(e => {
-      console.error(e)
-      throw e
-    })
-    if (response.data && response.status === 200) {
-      return response.data.data
-    } else {
-      console.error(response)
-      throw response
-    }
-  }
-
-  async queryTags (entityType, entityName) {
-    const response = await axios.get(`${api.entity.entityGraph.tags}/${entityType}?resource=${entityName}`).catch(e => {
-      console.error(e)
-      throw e
-    })
-    if (response.data && response.status === 200) {
-      return response.data.data
-    } else {
-      console.error(response)
-      throw response
-    }
-  }
-
-  async queryRelatedEntitiesCount (entityType, entityName) {
-    const response = await axios.get(`${api.entity.entityGraph.relatedEntityCount}/${entityType}?resource=${entityName}`).catch(e => {
+  getNeighbors (gData) {
+    const links = gData.links.filter(l => l.source.id === this.id || l.target.id === this.id)
+    const nodes = gData.nodes.filter(n => links.some(l => l.source.id === n.id || l.target.id === n.id))
+    return { links, nodes }
+  }
+
+  // 获取唯一source，listNode和tempNode专用，因为entityNode的source可能有多个，rootNode无source
+  getSourceNode (gData) {
+    const links = gData.links.filter(l => l.target.id === this.id)
+    const nodes = gData.nodes.filter(n => links.some(l => l.source.id === n.id))
+    return nodes.length > 0 ? nodes[0] : null
+  }
+
+  // listNode和entityNode专用，查询关联实体列表
+  async queryRelatedEntities (targetEntityType) {
+    let _targetEntityType = targetEntityType
+    if (this.data.entityType === entityType.domain && targetEntityType === entityType.domain) {
+      _targetEntityType = 'subdomain'
+    }
+    const url = `${api.entity.entityGraph[`${this.data.entityType}Related${_.upperFirst(_targetEntityType)}`]}?resource=${this.data.entityName}&pageSize=10&pageNo=${this.data.relatedEntities[targetEntityType].pageNo + 1}`
+    const response = await axios.get(url).catch(e => {
       console.error(e)
       throw e
     })
     if (response.data && response.status === 200) {
+      this.data.relatedEntities[targetEntityType].pageNo += 1
       return response.data.data
     } else {
       console.error(response)
@@ -143,29 +87,10 @@ export default class Node {
     }
   }
 }
+
 export const nodeType = {
   rootNode: 'rootNode',
   listNode: 'listNode',
-  entityNode: 'en-tityNode',
+  entityNode: 'entityNode',
   tempNode: 'tempNode'
 }
-export async function queryRelatedEntity (node, targetEntityType) {
-  let _targetEntityType = targetEntityType
-  if (node.myData.entityType === 'domain' && targetEntityType === 'domain') {
-    _targetEntityType = 'subdomain'
-  }
-  let url = `${api.entity.entityGraph[`${node.myData.entityType}Related${_.upperFirst(_targetEntityType)}`]}?resource=${node.myData.entityName}&pageSize=10`
-  const current = node.myData.relatedEntities[targetEntityType].loadedCount
-  const pageNo = parseInt(current / 10) + 1
-  url += `&pageNo=${pageNo}`
-  const response = await axios.get(url).catch(e => {
-    console.error(e)
-    throw e
-  })
-  if (response.data && response.status === 200) {
-    return response.data.data
-  } else {
-    console.error(response)
-    throw response
-  }
-}
diff --git a/src/views/entityExplorer/entityGraph/utils.js b/src/views/entityExplorer/entityGraph/utils.js
index d23131a6..d752e7ce 100644
--- a/src/views/entityExplorer/entityGraph/utils.js
+++ b/src/views/entityExplorer/entityGraph/utils.js
@@ -21,6 +21,78 @@ export function generateLabel (type, id, data, sourceNode) {
   return ''
 }
 
+export function builtTooltip (node) {
+  if (node) {
+    if (node.type === nodeType.listNode) {
+      let iconClass = ''
+      let title = ''
+      let total = 0
+      let loadedCount = 0
+      switch (node.data.entityType) {
+        case 'ip': {
+          iconClass = 'cn-icon cn-icon-resolve-ip'
+          title = i18n.global.t('entities.graph.resolveIp')
+          total = _.get(node.sourceNode.data, 'relatedEntities.ip.total', 0)
+          loadedCount = _.get(node.sourceNode.data, 'relatedEntities.ip.list', []).length
+          break
+        }
+        case 'domain': {
+          iconClass = 'cn-icon cn-icon-subdomain'
+          title = node.isSubdomain ? i18n.global.t('entities.subdomain') : i18n.global.t('entity.graph.resolveDomain')
+          total = _.get(node.sourceNode.data, 'relatedEntities.domain.total', 0)
+          loadedCount = _.get(node.sourceNode.data, 'relatedEntities.domain.list', []).length
+          break
+        }
+        case 'app': {
+          iconClass = 'cn-icon cn-icon-app-name'
+          title = i18n.global.t('entities.tab.relatedApp')
+          total = _.get(node.sourceNode.data, 'relatedEntities.app.total', 0)
+          loadedCount = _.get(node.sourceNode.data, 'relatedEntities.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>${i18n.global.t('entity.graph.associatedCount')}:&nbsp;${total}</span>
+                <span>${i18n.global.t('entity.graph.expandedEntityCount')}:&nbsp;${loadedCount}</span>
+              </div>
+            </div>`
+    } else if (node.type === nodeType.entityNode || node.type === nodeType.rootNode) {
+      if (node.data && node.data.tags && node.data.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>${i18n.global.t('entity.graph.tags')}</span>
+                  </div>
+                  <div class="content-tag-list">${this.generateTagHTML(node.data.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 `<div style="padding: 0 6px; font-size: 15px; line-height: 15px; color: #111;">${node.id}</div>`
+      // 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
+}
+
 function getLabelText (data, sourceNode) {
   if (data.entityType === entityType.ip) {
     if (sourceNode.data.entityType === entityType.app) {