fix(接口测试): 调整编辑场景页面样式

--user=郭雨琦 调整编辑场景页面样式

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

@@ -15,7 +15,8 @@
             <el-input :draggable="draggable" size="mini" v-model="data.name" class="name-input" @focus="active(data)"
                       @blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit" :disabled="data.disabled"/>
           </span>
-          <span :class="showVersion?'scenario-name':'scenario-version'" v-else>
+
+          <span :class="showVersion?'scenario-unscroll':'scenario-version'" id="moveout"  @mouseenter="enter($event)" @mouseleave="leave($event)" v-else>
             <i class="el-icon-edit" style="cursor:pointer;" @click="editName"
                v-if="data.referenced!='REF' && !data.disabled"/>
             <el-tooltip placement="top" :content="data.name">
@@ -65,7 +66,6 @@
 <script>
 import StepExtendBtns from "../component/StepExtendBtns";
 import {STEP} from "../Setting";
-
 export default {
   name: "ApiBaseComponent",
   components: {StepExtendBtns},
@@ -177,9 +177,26 @@ export default {
       this.$nextTick(() => {
         this.$refs.nameEdit.focus();
       });
+    },
+    enter($event){
+      if(this.showVersion){
+        $event.currentTarget.className="scenario-name"
+      }else{
+        $event.currentTarget.className="scenario-version"
+      }
+    },
+    leave($event){
+      if(this.showVersion){
+        $event.currentTarget.className="scenario-unscroll"
+      }else{
+        $event.currentTarget.className="scenario-version"
+      }
     }
+
+
   }
 }
+
 </script>
 
 <style scoped>
@@ -234,7 +251,7 @@ export default {
   /*text-overflow: ellipsis;*/
   vertical-align: middle;
   white-space: nowrap;
-  width: calc(100% - 20rem);
+  width: calc(100% - 23rem);
   height: auto;
 }
 .scenario-version::-webkit-scrollbar
@@ -254,7 +271,7 @@ export default {
 {
   border-radius: 1px;
   -webkit-box-shadow: inset 0 0 6px #fff;
-  background-color: #7c3030;
+  background-color: #783887;
 }
 .scenario-version::-webkit-scrollbar {
   /* width: 0px; */
@@ -272,7 +289,7 @@ export default {
   /*text-overflow: ellipsis;*/
   vertical-align: middle;
   white-space: nowrap;
-  width: calc(100% - 25rem);
+  width: calc(100% - 30rem);
   height: auto;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
@@ -296,7 +313,7 @@ export default {
 {
   border-radius: 1px;
   -webkit-box-shadow: inset 0 0 6px #fff;
-  background-color: #7c3030;
+  background-color: #783887;
 }
 .scenario-name::-webkit-scrollbar {
   /* width: 0px; */
@@ -304,6 +321,25 @@ export default {
   position: fixed;
 }
 
+.scenario-unscroll{
+  display: inline-block;
+  font-size: 13px;
+  margin: 0 5px;
+  overflow-x: hidden;
+  /*overflow-x: auto;*/
+  overflow-y: hidden;
+  padding-bottom: 0;
+  /*text-overflow: ellipsis;*/
+  vertical-align: middle;
+  white-space: nowrap;
+  width: calc(100% - 30rem);
+  height: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-track-color: transparent;
+  -ms-scrollbar-track-color: transparent;
+}
+
 /deep/ .el-step__icon {
   width: 20px;
   height: 20px;

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

@@ -45,13 +45,12 @@
            <i class="el-icon-loading" style="font-size: 16px"/>
            {{ $t('commons.testing') }}
          </span>
-
         <!--  场景调试步骤增加误报判断  -->
         <span class="ms-step-debug-code" :class="'ms-req-error-report'" v-if="!loading &&!request.testing && request.debug && request.requestResult[0] && request.requestResult[0].responseResult && request.requestResult[0].status==='errorReportResult'">
           {{ $t("error_report_library.option.name") }}
         </span>
-
         <span class="ms-step-debug-code"
+              @click="active"
               :class="request.requestResult[0].success && reqSuccess?'ms-req-success':'ms-req-error'"
               v-else-if="!loading &&!request.testing && request.debug && request.requestResult[0] && request.requestResult[0].responseResult">
           {{ request.requestResult[0].success && reqSuccess ? 'success' : 'error' }}
@@ -166,8 +165,7 @@ import {getUUID, getCurrentProjectID, getCurrentWorkspaceId} from "@/common/js/u
 import ApiBaseComponent from "../common/ApiBaseComponent";
 import ApiResponseComponent from "./ApiResponseComponent";
 import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
-import TemplateComponent
-  from "@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent";
+import TemplateComponent from "@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent";
 import {ENV_TYPE} from "@/common/js/constants";
 import {getUrl} from "@/business/components/api/automation/scenario/component/urlhelper";
 

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

@@ -35,7 +35,7 @@
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
                    :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick">
-              <span class="custom-tree-node father" slot-scope="{ node, data}">
+              <span class="custom-tree-node father" slot-scope="{ node, data}" style="width: 96%">
                 <!-- 步骤组件-->
                  <ms-component-config
                    :isMax="true"