fix(接口定义): 修复场景导入场景页面模块错位的缺陷 (#17459)

--bug=1016345 --user=王孝刚 【接口测试】github#17432，场景接口列表导入左侧切换项目显示错行
https://www.tapd.cn/55049933/s/1233950

Co-authored-by: wxg0103 <727495428@qq.com>

frontend/src/business/components/api/automation/scenario/api/ApiRelevance.vue

@@ -6,7 +6,6 @@
     ref="baseRelevance">
     <template v-slot:aside>
       <ms-api-module
-        style="margin-top: 5px;"
         @nodeSelectEvent="nodeChange"
         @protocolChange="handleProtocolChange"
         @refreshTable="refresh"

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

@@ -5,14 +5,17 @@
         <el-select v-model="request.method" class="ms-select" size="small" :disabled="request.disabled">
           <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
         </el-select>
-        <el-input v-model="request.domain" v-if="request.isRefEnvironment  && request.domain" size="small" readonly class="ms-input"/>
+        <el-input v-model="request.domain" v-if="request.isRefEnvironment  && request.domain" size="small" readonly
+                  class="ms-input"/>
 
         <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-model="request.path"
-                  style="width: 50%" size="small" @blur="urlChange" :disabled="request.disabled" v-if="request.isRefEnvironment"/>
+                  style="width: 50%" size="small" @blur="urlChange" :disabled="request.disabled"
+                  v-if="request.isRefEnvironment"/>
 
         <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-model="request.url"
                   style="width: 50%" size="small" @blur="urlChange" :disabled="request.disabled" v-else/>
-        <el-checkbox v-if="isCustomizeReq" class="is-ref-environment" v-model="request.isRefEnvironment" @change="setDomain" :disabled="request.disabled">
+        <el-checkbox v-if="isCustomizeReq" class="is-ref-environment" v-model="request.isRefEnvironment"
+                     @change="setDomain" :disabled="request.disabled">
           {{ $t('api_test.request.refer_to_environment') }}
         </el-checkbox>
       </div>
@@ -20,7 +23,8 @@
         <el-select v-model="request.method" class="ms-select" size="small" :disabled="request.disabled">
           <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
         </el-select>
-        <el-input v-model="request.domain" v-if="request.domain" size="small" readonly class="ms-input" :disabled="request.disabled"/>
+        <el-input v-model="request.domain" v-if="request.domain" size="small" readonly class="ms-input"
+                  :disabled="request.disabled"/>
         <el-input :placeholder="$t('api_test.definition.request.path_all_info')" style="width: 50%"
                   v-model="request.path" size="small" @blur="pathChange" :disabled="request.disabled"/>
       </div>
@@ -115,6 +119,16 @@ export default {
       }
     },
     setDomain() {
+      let urlStr = this.addProtocol(this.request.url);
+      const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g;
+      if (reg.test(urlStr)) {
+        let url = this.getURL(urlStr);
+        if (url && url.pathname) {
+          this.request.path = url.pathname;
+        }
+      } else {
+        this.request.path = this.request.url
+      }
       this.$emit("setDomain");
     }
   }

frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row>
-      <el-col class="protocol-col" :span="9">
+      <el-col :span="8">
         <el-select class="protocol-select" size="small" v-model="condition.protocol">
           <el-option
             v-for="item in options"
@@ -221,7 +221,7 @@ export default {
 
 <style scoped>
 .protocol-select {
-  width: 92px;
+  width: 85px;
   height: 30px;
 }
 

frontend/src/business/components/track/plan/view/comonents/base/TestCaseRelevanceBase.vue

@@ -12,23 +12,27 @@
           <table-select-count-bar :count="selectCounts" style="float: left; margin: 5px;"/>
 
           <div v-if="flag" style="margin: 5px; float: left;">
-            <el-checkbox v-model="checked" class="el-checkbox__label">{{ $t('test_track.sync_add_api_load') }}</el-checkbox>
+            <el-checkbox v-model="checked" class="el-checkbox__label">{{
+                $t('test_track.sync_add_api_load')
+              }}
+            </el-checkbox>
           </div>
         </template>
       </ms-dialog-header>
     </template>
 
     <template v-slot:aside>
-      <span v-if="isAcrossSpace" class="menu-title">{{'[' + $t('project.version.checkout') +  $t('commons.space') +']'}}</span>
+      <span v-if="isAcrossSpace"
+            class="menu-title">{{ '[' + $t('project.version.checkout') + $t('commons.space') + ']' }}</span>
       <el-select v-if="isAcrossSpace" filterable slot="prepend" v-model="workspaceId" @change="changeWorkspace"
-                 style="width: 160px"
+                 class="ms-header-workspace"
                  size="small">
         <el-option v-for="(item,index) in workspaceList" :key="index" :label="item.name" :value="item.id"/>
       </el-select>
       <select-menu
         :data="projects"
         v-if="multipleProject"
-        width="64.5%"
+        width="155px"
         :current-data="currentProject"
         :title="$t('test_track.switch_project')"
         @dataChange="changeProject"/>
@@ -140,14 +144,14 @@ export default {
             this.projectName = data[0].name;
             this.changeProject(data[0]);
           }
-        }else {
+        } else {
           this.$message.warning(this.$t('commons.current_workspace') + this.$t('commons.not_exist') + this.$t('commons.project') + "!");
         }
       })
     },
 
     changeProject(project) {
-      if(project){
+      if (project) {
         this.currentProject = project;
         this.$emit('setProject', project.id);
         // 获取项目时刷新该项目模块
@@ -181,7 +185,9 @@ export default {
   margin-left: 10px;
   margin-right: 10px;
 }
-/*.el-checkbox__label {*/
+
-/*  float: right;*/
+.ms-header-workspace {
-/*}*/
+  width: 155px;
+  margin-bottom: 10px;
+}
 </style>