refactor(接口定义): 优化接口定义名称过长时的显示 (#17071)

--bug=1015838 --user=王孝刚 【接口测试】github
#16883，接口定义，如果接口名称很长，处在编辑状态时，整个接口名称会被显示出来，接口tab标题很长，影响易用性。
https://www.tapd.cn/55049933/s/1226914

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

frontend/src/business/components/api/automation/ApiAutomation.vue

@@ -76,6 +76,10 @@
           :label="item.label"
           :name="item.name"
           closable>
+          <el-tooltip slot="label" effect="dark" :content="item.label" placement="bottom-start"
+                      class="ms-tab-name-width">
+            <span>{{ item.label }}</span>
+          </el-tooltip>
           <div class="ms-api-scenario-div">
             <ms-edit-api-scenario @refresh="refresh" @openScenario="editScenario" @closePage="closePage"
                                   :currentScenario="item.currentScenario"
@@ -744,4 +748,14 @@ export default {
   max-width: 100%;
   padding-right: 100%;
 }
+
+.ms-tab-name-width {
+  display: inline-block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 200px;
+}
+
 </style>

frontend/src/business/components/api/definition/ApiDefinition.vue

@@ -91,11 +91,15 @@
             </ms-tab-button>
           </el-tab-pane>
 
-          <el-tab-pane v-for="(item) in apiTabs"
+          <el-tab-pane v-for="(item, index) in apiTabs"
                        :key="item.name"
                        :label="item.title"
                        :closable="item.closable"
                        :name="item.name">
+            <el-tooltip v-if="index > 0" slot="label" effect="dark" :content="item.title" placement="bottom-start"
+                        class="ms-tab-name-width">
+              <span>{{ item.title }}</span>
+            </el-tooltip>
             <ms-tab-button
               v-if="item.type === 'list'"
               :active-dom.sync="activeDom"
@@ -962,4 +966,13 @@ export default {
 .version-select {
   padding-left: 10px;
 }
+
+.ms-tab-name-width {
+  display: inline-block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 200px;
+}
 </style>