展开附属节点后提供一个短暂的自适配的力

src/components/footer.vue

@@ -40,7 +40,7 @@
       />
       <n-button type="primary" ghost @click="search">搜索</n-button>
     </n-input-group>
-    <n-space>
+    <n-space v-if="!isNarrow">
       <n-tag v-show="nodeVal" size="small" round :color="color">
         {{ switchName(nodeVal && nodeVal._label_key) }}
       </n-tag>
@@ -188,6 +188,9 @@ export default defineComponent({
           return '未知'
       }
     }
+    const isNarrow = computed(() => {
+      return window.innerHeight / window.innerWidth > 0.75
+    })
     return {
       curKey,
       setKey,
@@ -201,6 +204,7 @@ export default defineComponent({
       clear,
       nodeOptions,
       switchName,
+      isNarrow,
     }
   },
 })
@@ -215,6 +219,7 @@ export default defineComponent({
   background #f8f9fb
   box-shadow 10px 6px 10px 0 #000
   margin-top 4px
+  flex-wrap wrap
 .search-bar
   flex 1
   margin 0 2%

src/components/main.vue

@@ -22,8 +22,8 @@
       @search="searchNodes"
     />
   </div>
-  <n-drawer v-model:show="showDrawer" :width="400" placement="left">
-    <n-drawer-content title="新增附属节点">
+  <n-drawer v-model:show="showDrawer" :width="340" placement="left">
+    <n-drawer-content title="新增附属节点" closable>
       <n-form ref="formRef" :model="formData" :rules="rules">
         <n-form-item path="propertyName" label="节点名称">
           <n-input
@@ -54,8 +54,8 @@
       </n-form>
     </n-drawer-content>
   </n-drawer>
-  <n-drawer v-model:show="showSubjectDrawer" :width="400" placement="left">
-    <n-drawer-content title="新增主体">
+  <n-drawer v-model:show="showSubjectDrawer" :width="340" placement="left">
+    <n-drawer-content title="新增主体" closable>
       <n-form ref="subjectFormRef" :model="subjectData" :rules="rules">
         <n-form-item path="subjectName" label="名称">
           <n-input
@@ -72,8 +72,8 @@
       </n-form>
     </n-drawer-content>
   </n-drawer>
-  <n-drawer v-model:show="showLinkDrawer" :width="400" placement="left">
-    <n-drawer-content title="连接主体">
+  <n-drawer v-model:show="showLinkDrawer" :width="340" placement="left">
+    <n-drawer-content title="连接主体" closable>
       <n-form ref="linkFormRef" :model="linkData" :rules="rules">
         <n-form-item path="sourceNodeId" label="源主体">
           <n-select

src/util/useD3.js

@@ -418,10 +418,15 @@ export default class RelationGraph {
       .alpha(1)
       .restart()
 
+    this.simulation.alphaTarget(0.3).restart()
+    this.curActiveNode.fx = this.curActiveNode.x
+    this.curActiveNode.fy = this.curActiveNode.y
+
     const timer = setTimeout(() => {
+      this.simulation.alphaTarget(0)
       this.simulation.force('link', null)
       clearTimeout(timer)
-    }, 200)
+    }, 2000)
   }
 
   openMenu(self, d, types) {