From 51ee7e385fd4c77e469e9d4f578a89ab85aa4407 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 30 Jun 2022 18:10:52 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1989=20feat=EF=BC=9Adashboard=20=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/panel/panelVariables.scss          | 23 ++++++++++++++++++-
 .../common/panel/panelVariables.vue           |  8 +++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss b/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
index 9758b92db..a7bec5001 100644
--- a/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
+++ b/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;
+  }
+}
diff --git a/nezha-fronted/src/components/common/panel/panelVariables.vue b/nezha-fronted/src/components/common/panel/panelVariables.vue
index 36e8782c6..902aa7458 100644
--- a/nezha-fronted/src/components/common/panel/panelVariables.vue
+++ b/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>