diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
index 9be0c73bfb..55bfae6453 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestCaseMapper.xml
@@ -566,6 +566,7 @@
         <foreach collection="ids" item="id" separator="," open="(" close=")">
             #{id}
         </foreach>
+        and test_case.status != 'Trash';
     </select>
 
     <update id="deleteToGc">
diff --git a/backend/src/main/java/io/metersphere/dto/RelationshipGraphData.java b/backend/src/main/java/io/metersphere/dto/RelationshipGraphData.java
index cae68ccdf1..de6176a7a3 100644
--- a/backend/src/main/java/io/metersphere/dto/RelationshipGraphData.java
+++ b/backend/src/main/java/io/metersphere/dto/RelationshipGraphData.java
@@ -1,8 +1,11 @@
 package io.metersphere.dto;
 
+import lombok.AllArgsConstructor;
 import lombok.Getter;
+import lombok.NoArgsConstructor;
 import lombok.Setter;
 
+import java.util.ArrayList;
 import java.util.List;
 
 @Getter
@@ -12,12 +15,18 @@ public class RelationshipGraphData {
     private List<Node> data;
     private List<Edge> links;
 
+    public RelationshipGraphData() {
+        this.data = new ArrayList<>();
+        this.links = new ArrayList<>();
+    }
+
     @Getter
     @Setter
     public static class Node {
         private String id;
         private Integer index;
         private String name;
+        private Boolean highlight;
         private Integer x;
         private Integer y;
     }
@@ -28,4 +37,16 @@ public class RelationshipGraphData {
         private Integer source;
         private Integer target;
     }
+
+    /**
+     * 记录当前遍历时，已经占用的 x 坐标的最大最小值
+     */
+    @Getter
+    @Setter
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class XAxisMark {
+        private Integer min;
+        private Integer max;
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/service/RelationshipEdgeService.java b/backend/src/main/java/io/metersphere/service/RelationshipEdgeService.java
index a52ebd4aeb..852cf7fc9a 100644
--- a/backend/src/main/java/io/metersphere/service/RelationshipEdgeService.java
+++ b/backend/src/main/java/io/metersphere/service/RelationshipEdgeService.java
@@ -39,6 +39,24 @@ public class RelationshipEdgeService {
         relationshipEdgeMapper.deleteByExample(example);
     }
 
+    public void delete(String sourceIdOrTargetId) {
+        RelationshipEdgeExample example = new RelationshipEdgeExample();
+        example.createCriteria()
+                .andSourceIdEqualTo(sourceIdOrTargetId);
+        example.or(example.createCriteria()
+                .andTargetIdEqualTo(sourceIdOrTargetId));
+        relationshipEdgeMapper.deleteByExample(example);
+    }
+
+    public void delete(List<String> sourceIdOrTargetIds) {
+        RelationshipEdgeExample example = new RelationshipEdgeExample();
+        example.createCriteria()
+                .andSourceIdIn(sourceIdOrTargetIds);
+        example.or(example.createCriteria()
+                .andTargetIdIn(sourceIdOrTargetIds));
+        relationshipEdgeMapper.deleteByExample(example);
+    }
+
     public List<RelationshipEdge> getBySourceId(String sourceId) {
         RelationshipEdgeExample example = new RelationshipEdgeExample();
         example.createCriteria()
diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
index cf4ebb1259..4ca7260c3c 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
@@ -325,6 +325,7 @@ public class TestCaseService {
         examples.createCriteria().andTestCaseIdEqualTo(testCaseId);
         testCaseTestMapper.deleteByExample(examples);
         relateDelete(testCaseId);
+        relationshipEdgeService.delete(testCaseId); // 删除关系图
         return testCaseMapper.deleteByPrimaryKey(testCaseId);
     }
 
@@ -1237,6 +1238,17 @@ public class TestCaseService {
     public void deleteTestCaseBath(TestCaseBatchRequest request) {
         TestCaseExample example = this.getBatchExample(request);
         deleteTestPlanTestCaseBath(request.getIds());
+        relationshipEdgeService.delete(request.getIds()); // 删除关系图
+
+        request.getIds().forEach(testCaseId -> { // todo 优化下效率
+            testCaseIssueService.delTestCaseIssues(testCaseId);
+            testCaseCommentService.deleteCaseComment(testCaseId);
+            TestCaseTestExample examples = new TestCaseTestExample();
+            examples.createCriteria().andTestCaseIdEqualTo(testCaseId);
+            testCaseTestMapper.deleteByExample(examples);
+            relateDelete(testCaseId);
+        });
+
         testCaseMapper.deleteByExample(example);
     }
 
@@ -1810,7 +1822,6 @@ public class TestCaseService {
     }
 
     public void deleteToGcBatch(TestCaseBatchRequest request) {
-        TestCaseExample example = this.getBatchExample(request);
         if (CollectionUtils.isNotEmpty(request.getIds())) {
             for (String id : request.getIds()) {
                 this.deleteTestCaseToGc(id);
diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index 8eb2b79893..98bc55c104 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit 8eb2b79893a70986d06f47ffeac9c6ae12e6fff7
+Subproject commit 98bc55c1045fb8abc2ca0131bedaf9be69be4919
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index 71e82c9687..d8b7671d67 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -8,6 +8,7 @@
         @setTreeNodes="setTreeNodes"
         @exportTestCase="exportTestCase"
         @saveAsEdit="editTestCase"
+        @openGraph="openGraph"
         :show-operator="true"
         @createCase="handleCaseSimpleCreate($event, 'add')"
         @refreshAll="refreshAll"
@@ -323,6 +324,9 @@ export default {
       }
       this.$refs.testCaseList.exportTestCase(type);
     },
+    openGraph() {
+      this.$refs.testCaseList.generateGraph();
+    },
     addListener() {
       let index = this.tabs.findIndex(item => item.name === this.activeName); //  找到当前选中tab的index
       if (index != -1) {   //  为当前选中的tab添加监听
diff --git a/frontend/src/business/components/track/case/components/TestCaseDependencies.vue b/frontend/src/business/components/track/case/components/TestCaseDependencies.vue
index fc307589e0..60ed5197e2 100644
--- a/frontend/src/business/components/track/case/components/TestCaseDependencies.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseDependencies.vue
@@ -15,7 +15,7 @@
 <script>
 import TestCaseRelationshipList from "@/business/components/track/case/components/TestCaseRelationshipList";
 import RelationshipGraphDrawer from "@/business/components/xpack/graph/RelationshipGraphDrawer";
-import {getRelationshipGraph} from "@/network/testCase";
+import {getRelationshipGraph} from "@/network/graph";
 export default {
   name: "TestCaseDependencies",
   components: {RelationshipGraphDrawer, TestCaseRelationshipList},
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index 3e6750df68..1032d84e60 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -176,6 +176,8 @@
     <batch-move @refresh="refresh" @moveSave="moveSave" ref="testBatchMove"/>
 
     <test-case-preview ref="testCasePreview" :loading="rowCaseResult.loading"/>
+
+    <relationship-graph-drawer :graph-data="graphData" ref="relationshipGraph"/>
   </div>
 
 </template>
@@ -223,10 +225,13 @@ import BatchMove from "@/business/components/track/case/components/BatchMove";
 import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
 import TestCasePreview from "@/business/components/track/case/components/TestCasePreview";
 import {editTestCaseOrder} from "@/network/testCase";
+import {getGraphByCondition} from "@/network/graph";
+import RelationshipGraphDrawer from "@/business/components/xpack/graph/RelationshipGraphDrawer";
 
 export default {
   name: "TestCaseList",
   components: {
+    RelationshipGraphDrawer,
     TestCasePreview,
     BatchMove,
     MsTableColumn,
@@ -264,6 +269,7 @@ export default {
       condition: {
         components: TEST_CASE_CONFIGS
       },
+      graphData: {},
       priorityFilters: [
         {text: 'P0', value: 'P0'},
         {text: 'P1', value: 'P1'},
@@ -704,6 +710,12 @@ export default {
         }
       });
     },
+    generateGraph() {
+      getGraphByCondition('TEST_CASE', buildBatchParam(this, this.$refs.table.selectIds),(data) => {
+        this.graphData = data;
+        this.$refs.relationshipGraph.open();
+      });
+    },
     handleDeleteBatchToGc() {
       this.$alert(this.$t('test_track.case.delete_confirm') + "？", '', {
         confirmButtonText: this.$t('commons.confirm'),
diff --git a/frontend/src/business/components/track/common/TestCaseNodeTree.vue b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
index 1e3424a054..43aee7fd7d 100644
--- a/frontend/src/business/components/track/common/TestCaseNodeTree.vue
+++ b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
@@ -26,15 +26,14 @@
           <module-trash-button :condition="condition" :exe="enableTrash"/>
       </template>
     </ms-node-tree>
-    <test-case-import @refreshAll="refreshAll" ref="testCaseImport"></test-case-import>
-    <test-case-export @refreshAll="refreshAll" @exportTestCase="exportTestCase" ref="testCaseExport"></test-case-export>
+    <test-case-import @refreshAll="refreshAll" ref="testCaseImport"/>
+    <test-case-export @refreshAll="refreshAll" @exportTestCase="exportTestCase" ref="testCaseExport"/>
     <test-case-create
       :tree-nodes="treeNodes"
       @saveAsEdit="saveAsEdit"
       @createCase="createCase"
       @refresh="refresh"
-      ref="testCaseCreate"
-    ></test-case-create>
+      ref="testCaseCreate"/>
   </div>
 
 </template>
@@ -82,6 +81,11 @@ export default {
           label: this.$t('api_test.export_config'),
           callback: this.handleExport,
           permissions: ['PROJECT_TRACK_CASE:READ+EXPORT']
+        },
+        {
+          label: this.$t('查看依赖'),
+          callback: this.openGraph,
+          // permissions: ['PROJECT_TRACK_CASE:READ+EXPORT']
         }
       ]
     };
@@ -110,6 +114,9 @@ export default {
     },
   },
   methods: {
+    openGraph() {
+      this.$emit('openGraph');
+    },
     addTestCase(){
       if (!this.projectId) {
         this.$warning(this.$t('commons.check_project_tip'));
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index 3c2c5a4b0e..b52d1dece8 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit 3c2c5a4b0e81b4235e75a1f8f36d2a0187f31443
+Subproject commit b52d1dece80ce636bca17121ce491bbad433213d
diff --git a/frontend/src/network/graph.js b/frontend/src/network/graph.js
new file mode 100644
index 0000000000..1fd2a3edff
--- /dev/null
+++ b/frontend/src/network/graph.js
@@ -0,0 +1,10 @@
+import {baseGet, basePost} from "@/network/base-network";
+
+export function getRelationshipGraph(id, type, callback) {
+  return baseGet('/graph/relationship/graph/' + id + '/' + type, callback);
+}
+
+
+export function getGraphByCondition(relationshipType, param, callback) {
+  return basePost('/graph/relationship/graph/condition/' + relationshipType, param, callback);
+}
diff --git a/frontend/src/network/testCase.js b/frontend/src/network/testCase.js
index 7b03b8ab72..0db02fd483 100644
--- a/frontend/src/network/testCase.js
+++ b/frontend/src/network/testCase.js
@@ -70,8 +70,3 @@ export function getTestCaseNodes(projectId, callback) {
 export function getRelationshipCase(id, relationshipType, callback) {
   return baseGet('/test/case/relationship/case/' + id + '/' + relationshipType, callback);
 }
-
-export function getRelationshipGraph(id, type, callback) {
-  return baseGet('/graph/relationship/graph/' + id + '/' + type, callback);
-}
-