feat(名字过长时显示...)

src/views/business-analysis/business-topics/index.vue

@@ -4,8 +4,10 @@
       <div>
         <div class="ob-interface-box">
           <div class="interface-service-header">
-            <span style="font-size:18px;">{{ displayedName }}</span>
-            <span style="float:right;font-size:18px;">类型：业务</span>
+            <el-tooltip popper-class="service-tooltip" placement="bottom" effect="dark" :content="displayedName">
+              <span class="interface-service-left">{{ displayedName }}</span>
+            </el-tooltip>
+            <span class="interface-service-right">类型：业务</span>
           </div>
           <div class="service-header">
             <div class="service-header-left">
@@ -855,6 +857,19 @@ export default {
   width:100%;
   height: 100%;
 }
+.interface-service-right{
+  float:right;
+  font-size:18px;
+}
+.interface-service-left{
+  font-size:18px;
+  max-width: 85%;
+  overflow: hidden;
+  text-overflow: ellipsis; /* 显示省略号 */
+  white-space: nowrap;
+  display: inline-block;
+  cursor: pointer;
+}
 .service-header{
     display: flex;
 }
@@ -1022,4 +1037,7 @@ export default {
   top: auto !important;
   left: 0 !important;
 }
+.service-tooltip{
+  max-width: 900px;
+}
 </style>

src/views/service/InterfaceDetail/index.vue

@@ -4,8 +4,10 @@
       <div style="padding-top:20px">
         <div class="ob-info-box">
           <div class="interface-service-header">
-            <span style="font-size:18px;">{{ name }}</span>
-            <span style="float:right;font-size:18px;">类型：API</span>
+            <el-tooltip popper-class="service-tooltip" placement="bottom" effect="dark" :content="name">
+              <span class="interface-service-left">{{ name }}</span>
+            </el-tooltip>
+            <span class="interface-service-right">类型：API</span>
           </div>
           <div class="service-header">
             <div class="service-header-left" @click="goDrawer">
@@ -485,6 +487,19 @@ export default {
     width:100%;
     height:100%;
   }
+  .interface-service-right{
+    float:right;
+    font-size:18px;
+  }
+  .interface-service-left{
+    font-size:18px;
+    max-width: 85%;
+    overflow: hidden;
+    text-overflow: ellipsis; /* 显示省略号 */
+    white-space: nowrap;
+    display: inline-block;
+    cursor: pointer;
+  }
   .service-header{
     display: flex;
   }
@@ -623,3 +638,8 @@ export default {
   width: 80px;
 }
 </style>
+<style>
+.service-tooltip{
+  max-width: 900px;
+}
+</style>