NEZ-1989 feat：dashboard 变量 样式调整

nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss

@@ -24,7 +24,7 @@
     text-overflow: ellipsis;
     height: 30px;
     border: 1px solid $--border-color-light;
-    padding-left: 5px;
+    padding-left: 8px;
     display: flex;
     align-items: center;
     .nz-icon-arrow-down6{
@@ -41,3 +41,24 @@
     min-width: 24px;
   }
 }
+
+.panel-variables{
+  .el-dropdown-menu__item {
+    padding: 0 5px 0 20px;
+    position: relative;
+    height: 36px;
+  }
+  .el-dropdown-menu__item .el-dropdown-menu__item-label{
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: calc(100% - 20px);
+    overflow: hidden;
+    min-width: 24px;
+  }
+  .nz-icon-check{
+    position: absolute;
+    right: 5px;
+    color: $--color-warning;
+  }
+}

nezha-fronted/src/components/common/panel/panelVariables.vue

@@ -5,9 +5,10 @@
       <el-popover
         width="220"
         trigger="manual"
+        placement="bottom-start"
         v-model="item.visible"
         v-clickoutside="close"
-        popper-class="no-style-class ping-popover"
+        popper-class="no-style-class ping-popover panel-variables"
       >
         <ul class="pop-list-wrap">
           <li class="el-dropdown-menu__item" v-if="item.allOption">
@@ -21,7 +22,10 @@
             </el-checkbox-group>
             <div v-else>
               <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
-                <span>{{value.label}} <i class="nz-icon nz-icon-check" v-if="value.value === item.checked[0]"/></span>
+                <div class="el-dropdown-menu__item-label">
+                  {{value.label}}
+                </div>
+                <i class="nz-icon nz-icon-check" v-if="value.value === item.checked[0] && !item.checkAll"/>
               </li>
             </div>
           </ul>