From f0973026ecbcfab40cbb2825a7008cab0f40e732 Mon Sep 17 00:00:00 2001
From: MeterSphere Bot <78466014+metersphere-bot@users.noreply.github.com>
Date: Thu, 18 Aug 2022 19:36:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E8=BF=87=E9=95=BF=E6=97=B6=E7=9A=84=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=20(#17069)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: wxg0103 <727495428@qq.com>
---
 .../components/api/automation/ApiAutomation.vue   | 14 ++++++++++++++
 .../components/api/definition/ApiDefinition.vue   | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue
index d2550ba56a..9704b643bd 100644
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@@ -77,6 +77,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"
@@ -765,4 +769,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>
diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue
index 80d712a075..130af672bb 100644
--- a/frontend/src/business/components/api/definition/ApiDefinition.vue
+++ b/frontend/src/business/components/api/definition/ApiDefinition.vue
@@ -90,11 +90,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"
@@ -1003,4 +1007,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>