style(接口测试): 优化最大化场景步骤名称显示

--bug=1014471 --user=赵勇 【接口测试】场景全屏编辑模式下，左侧步骤名称长度太短
https://www.tapd.cn/55049933/s/1192556

backend/src/main/java/io/metersphere/api/dto/definition/request/controller/MsTransactionController.java

@@ -19,6 +19,7 @@ import java.util.List;
 @EqualsAndHashCode(callSuper = true)
 @JSONType(typeName = "TransactionController")
 public class MsTransactionController extends MsTestElement {
+    private static final String NAME_CN = "事务控制器";
     private String type = "TransactionController";
     private String clazzName = MsTransactionController.class.getCanonicalName();
 
@@ -65,12 +66,8 @@ public class MsTransactionController extends MsTestElement {
 
     public String getLabelName() {
         if (isValid()) {
-            String label = "事务控制器：";
+            return NAME_CN + " " + this.name;
-            if (StringUtils.isNotBlank(name)) {
-                label += " " + this.name;
         }
-            return label;
+        return NAME_CN;
-        }
-        return "TransactionController";
     }
 }

frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue

@@ -415,7 +415,7 @@ fieldset {
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
-  width: 60px;
+  width: 130px;
 }
 .ms-base-card{
   min-height: 36px;

frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue

@@ -723,7 +723,7 @@ export default {
 
 .ms-step-debug-code {
   display: inline-block;
-  margin: 0 5px;
+  margin: 0 0px;
   overflow-x: hidden;
   padding-bottom: 0;
   text-overflow: ellipsis;

frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue

@@ -58,7 +58,7 @@
 
     <!-- 场景步骤-->
     <ms-container :class="{'maximize-container': !asideHidden}">
-      <ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px;overflow: hidden">
+      <ms-aside-container @setAsideHidden="setAsideHidden" style="padding: 0px;overflow: hidden">
         <div class="ms-debug-result" v-if="reqTotal > 0">
           <span style="float: right">
              <span class="ms-message-right"> {{ reqTotalTime }} ms </span>
@@ -80,7 +80,7 @@
                    :show-checkbox="isBatchProcess"
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
-                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" class="ms-tree" ref="maxStepTree">
+                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" class="ms-max-tree" ref="maxStepTree">
             <el-row class="custom-tree-node" :gutter="18" type="flex" align="middle" slot-scope="{node, data}" style="width: 98%">
               <el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-show="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf">
                 <span v-show="!node.expanded" class="el-icon-circle-plus-outline custom-node_e" @click="openOrClose(node)"/>
@@ -1219,27 +1219,26 @@ export default {
   z-index: 9;
 }
 
-
+.ms-max-tree >>> .el-tree-node__expand-icon.expanded {
-.ms-tree >>> .el-tree-node__expand-icon.expanded {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 
-.ms-tree >>> .el-icon-caret-right:before {
+.ms-max-tree >>> .el-icon-caret-right:before {
   /*content: '\e723';*/
   padding: 0;
   content: "";
 }
 
-.ms-tree >>> .el-tree-node__expand-icon.is-leaf {
+.ms-max-tree >>> .el-tree-node__expand-icon.is-leaf {
   color: transparent;
 }
 
-.ms-tree >>> .el-tree-node__expand-icon {
+.ms-max-tree >>> .el-tree-node__expand-icon {
   color: #7C3985;
 }
 
-.ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+.ms-max-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
   color: #7C3985;
   /* content: "\e722";*/
   padding: 0;