fix(接口测试): 在使用平台做测试时chrome经常出现崩溃问题

--bug=1027497 --user=白奇 【接口测试】  github#25304在使用平台做测试时chrome经常出现崩溃问题 https://www.tapd.cn/55049933/s/1388672

api-test/frontend/package.json

@@ -17,6 +17,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@ba1q1/vue-easy-tree": "^1.0.4",
     "axios": "^0.27.2",
     "diffable-html": "^4.0.0",
     "echarts": "^5.0.2",

api-test/frontend/src/business/automation/scenario/EditApiScenario.vue

@@ -270,13 +270,16 @@
               <el-col></el-col>
             </el-row>
             <el-row>
-              <el-col :span="21">
               <!-- 场景步骤内容 -->
-                <div ref="stepInfo">
-                  <el-tree
+              <div ref="stepInfo" style="height: calc(100vh - 170px);">
+                  <vue-easy-tree
                     node-key="resourceId"
+                    height="calc(100vh - 170px)"
+                    :minItemSize="43"
+                    :sizeDependencies="['expanded']"
                     :props="props"
                     :data="scenarioDefinition"
+                    :buffer="200"
                     class="ms-tree"
                     :expand-on-click-node="false"
                     :allow-drop="allowDrop"
@@ -287,6 +290,7 @@
                     @node-drag-end="nodeDragEnd"
                     @node-click="nodeClick"
                     draggable
+                    isDynamic
                     ref="stepTree"
                     :key="reloadTree">
                     <el-row
@@ -356,8 +360,12 @@
                         </div>
                       </span>
                     </el-row>
-                  </el-tree>
+                  </vue-easy-tree>
                 </div>
+            </el-row>
+            <el-row>
+              <el-col :span="21">
+                
               </el-col>
               <!-- 按钮列表 -->
               <el-col :span="3">
@@ -566,7 +574,6 @@ import { buttons, setComponent } from './menu/Menu';
 import { parseEnvironment } from '@/business/environment/model/EnvironmentModel';
 import { ELEMENT_TYPE, STEP, TYPE_TO_C } from './Setting';
 import { KeyValue } from '@/business/definition/model/ApiTestModel';
-
 import { getCurrentProjectID, getCurrentUser } from 'metersphere-frontend/src/utils/token';
 import { getUUID, objToStrMap, strMapToObj } from 'metersphere-frontend/src/utils';
 import { hasLicense, hasPermissions } from 'metersphere-frontend/src/utils/permission';

api-test/frontend/src/business/automation/scenario/component/ApiComponent.vue

@@ -62,6 +62,7 @@
             !loading &&
             !request.testing &&
             request.debug &&
+            request.requestResult &&
             request.requestResult[0] &&
             request.requestResult[0].responseResult &&
             request.requestResult[0].status === 'FAKE_ERROR'
@@ -71,15 +72,16 @@
         <span
           class="ms-step-debug-code"
           @click="active"
-          :class="request.requestResult[0].success && reqSuccess ? 'ms-req-success' : 'ms-req-error'"
+          :class="request.requestResult && request.requestResult[0].success && reqSuccess ? 'ms-req-success' : 'ms-req-error'"
           v-else-if="
             !loading &&
             !request.testing &&
             request.debug &&
+            request.requestResult &&
             request.requestResult[0] &&
             request.requestResult[0].responseResult
           ">
-          {{ request.requestResult[0].success && reqSuccess ? 'Success' : 'Error' }}
+          {{ request.requestResult && request.requestResult[0].success && reqSuccess ? 'Success' : 'Error' }}
         </span>
       </template>
       <template v-slot:button v-if="!ifFromVariableAdvance">
@@ -177,7 +179,7 @@
           <api-response-component
             :currentProtocol="request.protocol"
             :apiActive="true"
-            :result="request.requestResult[0]"
+            :result="request.requestResult && request.requestResult[0]"
             v-else />
         </div>
       </template>

api-test/frontend/src/main.js

@@ -21,6 +21,7 @@ import VuePapaParse from 'vue-papa-parse';
 import VueShepherd from 'vue-shepherd'; // 新手引导
 import 'metersphere-frontend/src/assets/shepherd/shepherd-theme.css';
 import { gotoCancel, gotoNext } from "metersphere-frontend/src/utils";
+import VueEasyTree from "@ba1q1/vue-easy-tree";
 
 Vue.config.productionTip = false;
 
@@ -44,6 +45,7 @@ Vue.use(VueFab);
 // Vue.use(formCreate);
 Vue.use(VuePapaParse);
 Vue.use(VueShepherd);
+Vue.use(VueEasyTree);
 
 Vue.prototype.gotoCancel = gotoCancel;
 Vue.prototype.gotoNext = gotoNext;