From b84c7bc9b3294f6038b11aec0372b0b171e749c1 Mon Sep 17 00:00:00 2001
From: MeterSphere Bot <78466014+metersphere-bot@users.noreply.github.com>
Date: Mon, 26 Sep 2022 19:57:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=85=B3=E7=B3=BB=E5=88=97=E8=A1=A8=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=97=AE=E9=A2=98=20(#18276)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1017158 --user=宋昌昌 【接口测试】接口定义-添加接口的前后置依赖关系后列表显示不对齐 https://www.tapd.cn/55049933/s/1251401

Co-authored-by: song-cc-rock <changchang.song@fit2cloud.com>
---
 .../components/graph/DependenciesList.vue     | 54 ++++++++++++-------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/frontend/src/business/components/common/components/graph/DependenciesList.vue b/frontend/src/business/components/common/components/graph/DependenciesList.vue
index 86507d845c..ba5fd0db3a 100644
--- a/frontend/src/business/components/common/components/graph/DependenciesList.vue
+++ b/frontend/src/business/components/common/components/graph/DependenciesList.vue
@@ -1,25 +1,29 @@
 <template>
   <div class="dependencies-container">
 
-    <el-tooltip v-xpack class="item" effect="dark" :content="$t('commons.relationship.graph')" placement="left">
-      <font-awesome-icon class="graph-icon" :icon="['fas', 'sitemap']" size="lg" @click="openGraph"/>
-    </el-tooltip>
+    <div class="right-list">
+      <relationship-list
+        class="pre-list"
+        :read-only="readOnly" :title="resourceType === 'TEST_CASE' ? $t('commons.relationship.pre_case') : $t('commons.relationship.pre_api')"
+        relationship-type="PRE" :resource-id="resourceId"
+        :version-enable="versionEnable"
+        @setCount="setPreCount"
+        :resource-type="resourceType" ref="preRelationshipList"/>
+      <relationship-list
+        class="post-list"
+        :read-only="readOnly"
+        :version-enable="versionEnable"
+        :title="resourceType === 'TEST_CASE' ? $t('commons.relationship.post_case') : $t('commons.relationship.post_api')"
+        relationship-type="POST" :resource-id="resourceId"
+        @setCount="setPostCount"
+        :resource-type="resourceType" ref="postRelationshipList"/>
+    </div>
 
-    <relationship-list
-      class="pre-list"
-      :read-only="readOnly" :title="resourceType === 'TEST_CASE' ? $t('commons.relationship.pre_case') : $t('commons.relationship.pre_api')"
-      relationship-type="PRE" :resource-id="resourceId"
-      :version-enable="versionEnable"
-      @setCount="setPreCount"
-      :resource-type="resourceType" ref="preRelationshipList"/>
-    <relationship-list
-      class="post-list"
-      :read-only="readOnly"
-      :version-enable="versionEnable"
-      :title="resourceType === 'TEST_CASE' ? $t('commons.relationship.post_case') : $t('commons.relationship.post_api')"
-      relationship-type="POST" :resource-id="resourceId"
-      @setCount="setPostCount"
-      :resource-type="resourceType" ref="postRelationshipList"/>
+    <div class="left-icon">
+      <el-tooltip v-xpack class="item" effect="dark" :content="$t('commons.relationship.graph')" placement="left">
+        <font-awesome-icon class="graph-icon" :icon="['fas', 'sitemap']" size="lg" @click="openGraph"/>
+      </el-tooltip>
+    </div>
 
     <relationship-graph-drawer v-xpack v-permission :graph-data="graphData" ref="relationshipGraph"/>
 
@@ -84,7 +88,19 @@ export default {
 
 .graph-icon {
   float: right;
-  margin-right: 20px;
+  margin-right: 8px;
   color: var(--primary_color);
 }
+
+.right-list {
+  width: 96%;
+  display: inline-block;
+}
+
+.left-icon {
+  width: 4%;
+  display: inline-block;
+  position: absolute;
+  top: 25px;
+}
 </style>