perf: 优化table过长的悬浮提示

nezha-fronted/src/assets/stylus/main.scss

@@ -180,6 +180,13 @@ html {
 }
 /* end--按钮组件*/
 
+/*table提示样式*/
+.el-tooltip__popper.is-light {
+  border: 1px solid #EBEEF5;
+  color: #606266;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+
 /* begin--el-input扩展 */
 .input-x-mini-22 .el-input__inner {
   height: 22px;

nezha-fronted/src/components/common/pagination.vue

@@ -7,7 +7,7 @@
       @next-click="next"
       @current-change="current"
       :current-page="pageObj.pageNo"
-      :page-sizes="[20, 50, 100, 300]"
+      :page-sizes="[20, 50, 100]"
       :page-size="20"
       layout="total, prev, pager, next,sizes,jumper"
       :total="this.pageObj.total"
@@ -65,7 +65,7 @@ export default {
   }
 
   .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
-    margin:5px 10px 0px 10px;
+    margin:5px 5px 0px 5px;
     padding: 0 4px;
     font-size: 13px;
     min-width: 20px;
@@ -78,6 +78,12 @@ export default {
     border-radius: 2px;
     border-radius: 2px;
   }
+  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
   .el-pager li.number{
     font-family: NotoSansSC-Regular;
     color: #666666;

nezha-fronted/src/components/page/alert/config.vue

@@ -2,6 +2,7 @@
   .config {
     height: 100%;
   }
+
   .top-tools #alert-add .top-tool-btn-txt .nz-icon {
     display: inline-block;
     font-size: 12px;
@@ -13,22 +14,28 @@
     <div class="content-left">
       <div class="sidebar-title">{{$t('alert.alert')}}</div>
       <div class="sidebar-info">
-                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">{{$t('alert.alertList')}}</div>
+        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
+          {{$t('alert.alertList')}}
+        </div>
         <div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
       </div>
     </div>
     <div class="content-right">
       <div class="top-tools">
-                <button id="alert-add" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
+        <button id="alert-add" @click="toAdd"
+                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
                     <span class="top-tool-btn-txt">
                       <i class="nz-icon-create-square nz-icon"></i>
                       {{$t('overall.add')}}</span>
         </button>
-                <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+        <div class="top-tool-search float-right">
+          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+        </div>
       </div>
       <el-table
         :data="tableData"
         border
+        tooltip-effect="light"
         height="calc(100% - 65px)"
         style="width: 100%;">
         <el-table-column
@@ -72,10 +79,15 @@
             </span>
             <!--                        <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
             <div v-else-if="item.prop == 'linkObject'">
-                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+              <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link"
-                        <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                    @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+              <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
+                    @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
               <span v-else>-</span>
             </div>
+            <div v-else-if="item.prop == 'alertName'">
+                <div class="too-long-split" style="max-width: 100px;">{{scope.row.alertName}}</div>
+            </div>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
@@ -85,7 +97,8 @@
     <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
     <module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>
-        <asset-edit-unit :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
+    <asset-edit-unit :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl"
+                     ref="assetEditUnit"></asset-edit-unit>
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
@@ -191,6 +204,7 @@ export default {
             label: this.$t("alert.alertName"),
             prop: 'alertName',
             show: true,
+            width: 120
           }, {
             label: this.$t("alert.config.expr"),
             prop: 'expr',