diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 5b6875e26..553491808 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -273,11 +273,8 @@
 .right-box__select {
   width: 100%;
 }
-.right-box-select-dropdown {
-  width: 626px;
-  .el-picker-panel__content {
-    width: calc(100% - 28px);
-  }
+.right-box-dropdown-top {
+  min-width: 625px;
   .el-cascader-menu{
     flex: 1;
   }
@@ -317,50 +314,11 @@
 .el-form-item__content .el-autocomplete .el-input-group {
   vertical-align: unset;
 }
-.right-public-box-dropdown {
-  width: 640px;
-  .el-cascader-menu{
-    flex: 1;
-  }
-}
-.right-box-public-dropdown {
-  width: 308px;
-}
-.right-public-box-dropdown-width {
-  width: 297px;
-}
-.right-box-public-alert-dropdown {
-  width: 320px;
-}
-.mib-browser-right-box-dropdown {
-  width: 236px;
-}
-.right-box-select-format-dropdown {
-  width: 604px;
-  .el-picker-panel__content {
-    width: calc(100% - 28px);
-  }
-}
-.right-public-box-dropdown,
-.right-box-public-dropdown,
-.right-public-box-dropdown-width,
-.right-box-select-dropdown,
-.right-box-public-alert-dropdown,
-.asset-right-box-dropdown-width,
-.mib-browser-right-box-dropdown,
-.right-box-select-format-dropdown,
 .right-box-select-top {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
-  .popper__arrow {
-    opacity: 0;
-  }
 }
-.right-box-dropdown-top.right-box-select-dropdown,
-.right-public-box-dropdown.right-box-dropdown-top,
-.dc-dropdown.right-box-dropdown-top,
-.mib-browser-right-box-dropdown.right-box-dropdown-top,
-.right-box-select-top.right-box-dropdown-top {
+.dc-dropdown.right-public-box-dropdown-top,.right-public-box-select-top.right-public-box-dropdown-top {
   margin: 5px 0 !important;
 }
 .popper__arrow {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index 874537a50..7b9292b12 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -14,7 +14,7 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
-        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-box-dropdown-top">
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-public-box-select-top right-public-box-dropdown-top">
           <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
index c80908cf8..00ce0303e 100644
--- a/nezha-fronted/src/components/common/chartUnit.vue
+++ b/nezha-fronted/src/components/common/chartUnit.vue
@@ -12,7 +12,7 @@
                  :show-all-levels="false"
                  class="chart-unit"
                  placeholder=""
-                 popper-class="prevent-clickoutside unit-pop-class right-box-select-top right-box-dropdown-top"
+                 popper-class="prevent-clickoutside unit-pop-class right-public-box-select-top right-public-box-dropdown-top"
                  size="small"
                  style="border-radius: 0 2px 2px 0;"
                  @change="unitSelected"
diff --git a/nezha-fronted/src/components/common/popBox/selectAssetMetaGroup.vue b/nezha-fronted/src/components/common/popBox/selectAssetMetaGroup.vue
index caf4c47cf..6584db8d0 100644
--- a/nezha-fronted/src/components/common/popBox/selectAssetMetaGroup.vue
+++ b/nezha-fronted/src/components/common/popBox/selectAssetMetaGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel right-box-select-top right-box-dropdown-top nz-pop-select-panel__dropdown" transition="slide" width="300">
+  <el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel right-public-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown" transition="slide" width="300">
     <div>
       <div class="pop-item-wider">
 
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index 4c4dc66ed..941e8b996 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-popover :placement="placement" popper-class="nz-pop nz-pop-select-panel right-box-select-top right-box-dropdown-top nz-pop-select-panel__dropdown" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" width="310" :disabled="disabled">
+  <el-popover :placement="placement" popper-class="nz-pop nz-pop-select-panel right-public-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" width="310" :disabled="disabled">
     <div>
       <div class="pop-item-wider">
 
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index 7951b4fc9..6ad72f808 100644
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -3,7 +3,7 @@
     <button id="more" :class="triggerButtonClass" title="more...">
       <i class="nz-icon nz-icon-more2" style="font-size: 12px;"></i>
     </button>
-    <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+    <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
       <el-dropdown-item  v-if="showLock">
         <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
       </el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index a272f8907..8d25e22ee 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -15,13 +15,13 @@
         <el-form ref="addEndpoint" :model="endpoint" :rules="rules" label-position = "top">
           <!--project-->
           <el-form-item :label='$t("project.project.projectName")' class="select-warp" prop="projectId">
-            <el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
+            <el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
               <el-option v-for="item in projectList" :id="'project-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
           </el-form-item>
           <!--module-->
           <el-form-item :label='$t("project.module.module")' class="select-warp" prop="moduleId">
-            <el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
+            <el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
               <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
           </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
index 0bd13936f..e35b286ac 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
@@ -33,7 +33,7 @@
           </el-form-item>
           <!--authProtocol-->
           <el-form-item :label='$t("config.assetType.authProtocol")' prop="authProtocol">
-            <el-select class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="Please select">
+            <el-select class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="Please select">
               <el-option :key="option.value" v-for="option in assetConstants.assetType.authProtocolOptions" :value="option.value" :label="option.label"></el-option>
             </el-select>
           </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
index c731d8386..f670a1199 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
@@ -15,7 +15,7 @@
           </el-form-item>
           <!--brand-->
           <el-form-item :label='$t("config.model.brand")' prop="brandId">
-            <el-select value-key="id" allow-create  class="right-box__select" popper-class="right-box-select-dropdown right-public-box-dropdown prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
+            <el-select value-key="id" allow-create  class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
               <el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
index 714cc48f5..695f472a3 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
@@ -37,7 +37,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
                        size="small">
               <template v-for="item in mfaLevelList">
                 <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -61,7 +61,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
                        size="small"
                        @change="()=>{this.$forceUpdate()}">
               <template v-for="role in roles">
diff --git a/nezha-fronted/src/components/common/rightBox/agentBox.vue b/nezha-fronted/src/components/common/rightBox/agentBox.vue
index 42029addc..7a8b9364b 100644
--- a/nezha-fronted/src/components/common/rightBox/agentBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/agentBox.vue
@@ -15,7 +15,7 @@
           <!--DC-->
           <el-form-item :label="$t('config.dc.dc')" prop="dc.name">
             <div class="right-box-form-content">
-              <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-public-box-dropdown right-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+              <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
                   <span class="config-dropdown-label-txt">{{item.name}}</span>
                 </el-option>
@@ -42,7 +42,7 @@
   <!--            :options="$CONSTANTS.agent.theData"-->
   <!--            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
   <!--            clearable></el-cascader>-->
-            <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-public-box-dropdown prevent-clickoutside" size="small" value-key="value">
+            <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
 <!--              <el-option-group-->
 <!--                v-for="group in agent2.theData"-->
 <!--                :key="group.label"-->
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 80822e880..270cb417b 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -22,7 +22,7 @@
             <el-select
               v-model="editAlertRule.type"
               class="right-box__select half-form-item"
-              popper-class="right-box-public-dropdown prevent-clickoutside"
+              popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
               size="small"
               :disabled="showTypeSelect"
               @change="selectAlertRuleMetric">
@@ -36,7 +36,7 @@
           </el-form-item>
           <!--severity-->
           <el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId">
-            <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-public-dropdown prevent-clickoutside" size="small">
+            <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
               <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id" style="width: 312px">
                 <div style="display: flex;justify-content: space-between;padding: 5px;">
                   <div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div>
@@ -102,7 +102,7 @@
           <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
             <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
                          placeholder=""
-                         popper-class="no-style-class dc-dropdown right-box-dropdown-top unit-popper-class"
+                         popper-class="no-style-class dc-dropdown right-public-box-dropdown-top unit-popper-class"
                          size="small"
                          :disabled="!showSnmpTrap"
                          style="width: 100%"
@@ -128,7 +128,7 @@
               v-model="editAlertRule.autoExpired"
               class="right-box__select half-form-item"
               placeholder=""
-              popper-class="prevent-clickoutside right-box-public-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
             >
               <el-option
@@ -165,7 +165,7 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-public-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
             >
               <el-option
@@ -188,7 +188,7 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-public-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
             >
               <el-option
@@ -213,7 +213,7 @@
               placeholder=""
               multiple
               @change="$refs.alertRuleForm.validateField('schedDays')"
-              popper-class="prevent-clickoutside right-box-select-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
             >
               <el-option
@@ -232,7 +232,7 @@
               :format="'HH:mm'"
               v-model="editAlertRule.schedStime"
               size="small"
-              popper-class="right-box-public-dropdown"
+              popper-class="right-box-select-top right-public-box-dropdown-top"
               :clearable = 'false'
               :picker-options="{
               }">
@@ -242,7 +242,7 @@
               :value-format="'HH:mm'"
               :format="'HH:mm'"
               size="small"
-              popper-class="right-box-public-dropdown"
+              popper-class="right-box-select-top right-public-box-dropdown-top"
               :clearable = 'false'
               v-model="editAlertRule.schedEtime"
               :picker-options="{
@@ -259,7 +259,7 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-public-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
               @change="receiverAndNotifyValidate"
             >
@@ -283,7 +283,7 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-public-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
               @change="receiverAndNotifyValidate"
             >
@@ -308,7 +308,7 @@
               filterable
               multiple
               placeholder=""
-              popper-class="prevent-clickoutside right-box-select-dropdown"
+              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
               size="small"
               value-key="userId"
               @change="receiverShowChange"
@@ -325,7 +325,7 @@
           </el-form-item>
           <!--notify-->
           <el-form-item :label="$t('alert.notify')" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'change' }]" class="notify-box" prop="method" >
-            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
+            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
               <el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
               </el-option>
             </el-select>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
index 8baef2ced..cbea14eb8 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
@@ -11,14 +11,14 @@
         <!-- Edit type -->
         <el-form ref="assetEditForm" :model="editData" :rules="rules" label-position="top" label-width="120px">
           <el-form-item :label="$t('overall.editType')" prop="editType">
-            <el-select v-model="editData.editType" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+            <el-select v-model="editData.editType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
               <el-option v-for="type in assetConstants.editTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
             </el-select>
           </el-form-item>
           <!-- 第一级：Edit type = account -->
           <template v-if="editData.editType === assetConstants.editTypeData.account">
             <el-form-item :label="$t('asset.authProtocol')" prop="authProtocol">
-              <el-select v-model="editData.authProtocol" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+              <el-select v-model="editData.authProtocol" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
                 <el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/>
               </el-select>
             </el-form-item>
@@ -26,7 +26,7 @@
             <template v-if="editData.authProtocol === assetConstants.authProtocolData.ssh">
               <div class="form__sub-title">{{$t('asset.sshAccount')}}</div>
               <el-form-item :label="$t('asset.authType')" prop="authType">
-                <el-select v-model="editData.authType" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+                <el-select v-model="editData.authType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
                   <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
                 </el-select>
               </el-form-item>
@@ -103,7 +103,7 @@
                     </el-checkbox-group>
                   </template>
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
-                    <el-select v-model="label.value[0]" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
+                    <el-select v-model="label.value[0]" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
                       <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
                     </el-select>
                   </template>
@@ -161,7 +161,7 @@
                 :options="fieldGroupData"
                 :props="labelCascProp"
                 class="hide-input"
-                popper-class="prevent-clickoutside right-box-dropdown-top asset-right-box-dropdown-width limit-height"
+                popper-class="prevent-clickoutside right-public-box-dropdown-top limit-height"
                 size="small"
                 @change="addLabel"
               ></el-cascader>
@@ -171,7 +171,7 @@
           <!-- 第一级：Edit type = state -->
           <template v-if="editData.editType === assetConstants.editTypeData.state">
             <el-form-item :label="$t('asset.state')" prop="stateId">
-              <el-select v-model="editData.stateId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editData.stateId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="state in stateData" :key="state.id" :label="state.name" :value="state.id"></el-option>
               </el-select>
             </el-form-item>
@@ -180,7 +180,7 @@
           <!-- 第一级：Edit type = snmp credential -->
           <template v-if="editData.editType === assetConstants.editTypeData.snmpCredential">
             <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
-              <el-select v-model="editData.snmpCredentialId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editData.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="snmp in snmpCredentialData" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
               </el-select>
             </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
index 08bb957a1..8e145ea8c 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -24,14 +24,14 @@
             <el-select
               v-model="editAsset.pid"
               class="right-box__select"
-              popper-class="right-box-select-dropdown prevent-clickoutside"
+              popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
               size="small"
               value-key="id">
               <el-option v-for="p in options.parentAssetOptions" :key="p.id" :label="p.name" :value="p.id"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('asset.state')" prop="stateId">
-            <el-select v-model="editAsset.stateId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+            <el-select v-model="editAsset.stateId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
               <el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id"></el-option>
             </el-select>
           </el-form-item>
@@ -50,7 +50,7 @@
               :placeholder="lockModelInputValue"
               :options="options.brandAndModelOptions"
               :props="{ label: 'name', value: 'id' }"
-              popper-class="prevent-clickoutside right-box-dropdown-top right-box-select-dropdown limit-height"
+              popper-class="prevent-clickoutside right-public-box-dropdown-top right-box-select-top limit-height"
               size="small"
               style="width: 100%;"
             ></el-cascader>
@@ -65,7 +65,7 @@
               v-model="editAsset.purchaseDate"
               placeholder=""
               size="small"
-              popper-class="right-box-select-dropdown"
+              popper-class="right-box-select-top right-public-box-dropdown-top"
               style="width: 100%"
               type="date"
               value-format="yyyy-MM-dd">
@@ -168,7 +168,7 @@
               :options="options.fieldGroupOptions"
               :props="labelCascProp"
               class="hide-input"
-              popper-class="prevent-clickoutside right-box-dropdown-top asset-right-box-dropdown-width limit-height"
+              popper-class="prevent-clickoutside right-public-box-dropdown-top asset-right-box-dropdown-width limit-height"
               size="small"
               @change="addLabel"
             ></el-cascader>
@@ -177,7 +177,7 @@
           <template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.ssh">
             <div class="form__sub-title">SSH</div>
             <el-form-item :label="$t('asset.authType')" prop="authType">
-              <el-select v-model="editAsset.authType" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
+              <el-select v-model="editAsset.authType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
                 <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
               </el-select>
             </el-form-item>
@@ -220,7 +220,7 @@
           <template v-if="editAsset.type && editAsset.type.snmpEnable === 1">
             <div class="form__sub-title">SNMP</div>
             <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
-              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="snmp in options.snmpCredentialOptions" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
               </el-select>
             </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
index 79efe76d3..9b4956ce1 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -20,7 +20,7 @@
               <el-input placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
             </el-form-item>
             <el-form-item :label='$t("config.assetLabel.group")' prop="groupId">
-              <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" popper-class="right-public-box-dropdown prevent-clickoutside" :popper-append-to-body="false">
+              <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" :popper-append-to-body="false">
                 <el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
               </el-select>
             </el-form-item>
@@ -42,7 +42,7 @@
               </el-switch>
             </el-form-item>
             <el-form-item :label='$t("config.assetLabel.type")' prop="type">
-              <el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-public-box-dropdown prevent-clickoutside" size="small" @change="selectType">
+              <el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="selectType">
                 <el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
                   <div><i :class="item.icon"></i>&nbsp;&nbsp;<span>{{item.name}}</span></div>
                 </el-option>
diff --git a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
index 58598e3af..0f468c563 100644
--- a/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chartTempBox.vue
@@ -16,7 +16,7 @@
                        class="right-box__select"
                        clearable
                        placeholder=""
-                       popper-class="right-public-box-dropdown prevent-clickoutside"
+                       popper-class="prevent-clickoutside"
                        size="small"
                        value-key="chartType"
                        @change="varTypeChange">
@@ -31,7 +31,7 @@
                        v-model="editChartTemp.pid"
                        class="right-box__select" clearable
                        placeholder=""
-                       popper-class="right-public-box-dropdown prevent-clickoutside"
+                       popper-class="prevent-clickoutside"
                        size="small"
                        value-key="chartType" >
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index fd6ea953b..6fc9275f4 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -21,7 +21,7 @@
               <el-input placeholder="" maxlength="128" show-word-limit v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
             </el-form-item>
             <el-form-item :label='$t("asset.principal")' prop="principal">
-              <el-select value-key="id" class="right-box__select" popper-class="right-public-box-dropdown right-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
+              <el-select value-key="id" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
                 <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" style="width: 620px">
                   <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
                 </el-option>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 37f32f1cd..4e264aa33 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -28,19 +28,19 @@
         <el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px">
           <!--project-->
           <el-form-item :label='$t("project.project.projectName")' prop="projectId">
-            <el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeProject">
+            <el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="changeProject">
               <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <!--module-->
           <el-form-item :label='$t("project.module.module")' prop="moduleId">
-            <el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+            <el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
               <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <!--asset-->
           <el-form-item :label='$t("project.module.asset")' label-width="125px" prop="assetId" v-if="!disabled">
-<!--            <el-select id="module-box-input-asset"  @change="renderEndpoint" v-model="editEndpoint.assetId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">-->
+<!--            <el-select id="module-box-input-asset"  @change="renderEndpoint" v-model="editEndpoint.assetId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">-->
 <!--              <el-option v-for="item in assetList" :id="'asset-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
 <!--            </el-select>-->
             <v-selectpage
@@ -112,7 +112,7 @@
               <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
                 <!--type-->
                 <el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
-                  <el-select id="module-box-input-type" v-model="editEndpoint.configs[0].config.protocol" :disabled="!!editEndpoint.id || true" class="right-box__select" placeholder="" popper-class="right-public-box-dropdown-width prevent-clickoutside" size="small" value-key="id">
+                  <el-select id="module-box-input-type" v-model="editEndpoint.configs[0].config.protocol" :disabled="!!editEndpoint.id || true" class="right-box__select" placeholder="" popper-class="prevent-clickoutside" size="small" value-key="id">
                     <el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
@@ -164,7 +164,7 @@
                 </el-row>
                   <!--credentials-->
                   <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
-                    <el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" disabled>
+                    <el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" disabled>
                       <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
                     </el-select>
                   </el-form-item>
@@ -248,7 +248,7 @@
                     </div>
                     <div>
                       <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
-                        <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
+                        <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
                           <el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
                         </el-select>
                       </el-form-item>
@@ -319,7 +319,7 @@
               <el-tab-pane v-if="editEndpoint.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
                 <!--authtype-->
                 <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
-                  <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
+                  <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
                     <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
@@ -355,7 +355,7 @@
                   <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
                     <!--type-->
                     <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
-                      <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-public-box-dropdown-width prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
+                      <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
                         <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                       </el-select>
                     </el-form-item>
@@ -496,7 +496,7 @@
                           :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
                         >
 <!--                          <el-input v-model="item2.format" placeholder="key" size="mini"></el-input>-->
-                          <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-format-dropdown prevent-clickoutside" size="small">
+                          <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
                             <el-option v-for="item in timestampList" :id="'module-timestamp-'+item" :key="item" :label="item" :value="item"></el-option>
                           </el-select>
                         </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue b/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
index f178543b8..c04a3cffd 100644
--- a/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
@@ -23,7 +23,7 @@
               :fetch-suggestions="querySearch"
               :placeholder="$t('overall.placeHolder')"
               class="inline-input"
-              popper-class="right-public-box-dropdown right-box-dropdown-top"
+              popper-class="right-public-box-select-top right-public-box-dropdown-top"
               size="small"
               style="width: 100%;"
             ></el-autocomplete>
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index ccb1a6b10..2a045a1bb 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -21,7 +21,7 @@
               ref="modelSelector"
               size="small"
               class="right-box__select"
-              popper-class="prevent-clickoutside limit-height right-public-box-dropdown right-box-dropdown-top"
+              popper-class="prevent-clickoutside limit-height right-public-box-select-top right-public-box-dropdown-top"
               clearable></el-cascader>
           </el-form-item>
           <el-form-item :label="$t('overall.remark')" prop="remark">
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 28ca953c3..7f6b2e7a8 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -19,7 +19,7 @@
           </el-form-item>
           <!--project-->
           <el-form-item :label='$t("project.project.projectName")' prop="projectId">
-            <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
+            <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
               <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
@@ -56,7 +56,7 @@
               v-model="editModule.endpointNameTmpl"
               :fetch-suggestions="querySearch"
               :placeholder="$t('overall.placeHolder')"
-              popper-class="right-box-select-top right-box-dropdown-top"
+              popper-class="right-public-box-select-top right-public-box-dropdown-top"
               class="inline-input"
               size="small"
             ></el-autocomplete>
@@ -93,7 +93,7 @@
             <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
               <!--type-->
               <el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
-                <el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown right-box-public-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
+                <el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top right-box-public-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
                   <el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
@@ -144,7 +144,7 @@
                 </el-row>
                     <!--credentials-->
               <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
-                <el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
+                <el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                   <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
                 </el-select>
               </el-form-item>
@@ -229,7 +229,7 @@
                     </div>
                    <div>
                      <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
-                       <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
+                       <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
                          <el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
                        </el-select>
                      </el-form-item>
@@ -300,7 +300,7 @@
             <el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
               <!--authtype-->
               <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
-                <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown module-project-box-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
+                <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
                   <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
@@ -336,7 +336,7 @@
                 <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
                   <!--type-->
                   <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
-                    <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-public-box-dropdown-width prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
+                    <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
                       <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                     </el-select>
                   </el-form-item>
@@ -476,7 +476,7 @@
                         :prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.format'"
                         :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
                       >
-                        <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-format-dropdown  prevent-clickoutside" size="small">
+                        <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
                           <el-option v-for="item in timestampList" :id="'module-timestamp-'+item" :key="item" :label="item" :value="item"></el-option>
                         </el-select>
                       </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/pipelineSelect.vue b/nezha-fronted/src/components/common/rightBox/pipelineSelect.vue
index 7eace6e95..51337cdc5 100644
--- a/nezha-fronted/src/components/common/rightBox/pipelineSelect.vue
+++ b/nezha-fronted/src/components/common/rightBox/pipelineSelect.vue
@@ -4,7 +4,7 @@
       id="module-box-logs-pipeline-type"
       class="right-box__select"
       placeholder=""
-      popper-class="right-box-select-dropdown prevent-clickoutside pipeline"
+      popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside pipeline"
       size="small"
       ref="select"
       v-model="pipelineOptionValue"
diff --git a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
index d47c380ed..a6ca58b2c 100644
--- a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
@@ -18,7 +18,7 @@
               <el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
             </el-form-item>
             <el-form-item :label='$t("config.mib.credential.type")' prop="type">
-              <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-dropdown right-box-dropdown-top prevent-clickoutside" @change="typeChange">
+              <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">
                 <el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
@@ -44,7 +44,7 @@
             <div style="margin-bottom: 20px;width: 100%"></div>
 
             <el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol"  v-if="editCredential.type === 3">
-              <el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside">
+              <el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside">
                 <el-option v-for="item in $CONSTANTS.snmpAuthMethod" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
@@ -58,7 +58,7 @@
             <div style="margin-bottom: 20px;width: 100%"></div>
 
             <el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol"  v-if="editCredential.type === 3">
-              <el-select v-model="editCredential.config.privProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
+              <el-select v-model="editCredential.config.privProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
                 <el-option v-for="item in $CONSTANTS.snmpEncryptionMethod" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 76b81925a..3b68d74d7 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -117,7 +117,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'alertMessage_expired'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 20363efa1..4164fc5a9 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -116,7 +116,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
index 4608142ee..99de51bf5 100644
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -94,7 +94,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'alertSilence_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.delete')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
index 7b7800dbd..f22857331 100644
--- a/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
@@ -73,7 +73,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item v-has="'asset_label_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'asset_label_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/asset/assetTable.vue b/nezha-fronted/src/components/common/table/asset/assetTable.vue
index cbea1699a..ea377be1b 100644
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -120,7 +120,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index 77429d7e9..a064a697d 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -62,7 +62,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'agent_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'agent_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue b/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
index 5916172e0..bd165d717 100644
--- a/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
@@ -76,7 +76,7 @@
           <div class="table-operation-item table-operation-item--more">
            <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'assetType_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'assetType_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue b/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
index 4b2526869..4730c273e 100644
--- a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
@@ -43,7 +43,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dc_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index 1fd16a787..f153177ed 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -55,7 +55,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'panel_chart_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'panel_chart_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'panel_chart_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
index a670bb37e..f386d4afb 100644
--- a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
@@ -77,7 +77,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'credential_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
diff --git a/nezha-fronted/src/components/common/table/settings/dcTable.vue b/nezha-fronted/src/components/common/table/settings/dcTable.vue
index f1365e801..d498b4ff3 100644
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dcTable.vue
@@ -92,7 +92,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dc_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'dc_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index b9081f628..fd9fed998 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -174,7 +174,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
index 50801a0a6..f10aa9b0f 100644
--- a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
@@ -49,7 +49,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'expressionTemplate_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'expressionTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/menuTable.vue b/nezha-fronted/src/components/common/table/settings/menuTable.vue
index 81d36dbab..c6a85fe26 100644
--- a/nezha-fronted/src/components/common/table/settings/menuTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/menuTable.vue
@@ -66,7 +66,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item  v-has="'monitor_module_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
diff --git a/nezha-fronted/src/components/common/table/settings/mibTable.vue b/nezha-fronted/src/components/common/table/settings/mibTable.vue
index 512e993ac..86a61f954 100644
--- a/nezha-fronted/src/components/common/table/settings/mibTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/mibTable.vue
@@ -82,7 +82,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'snmp_mibFile_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'snmp_mibFile_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/modelTable.vue b/nezha-fronted/src/components/common/table/settings/modelTable.vue
index 2085e3594..d94edb31f 100644
--- a/nezha-fronted/src/components/common/table/settings/modelTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/modelTable.vue
@@ -67,7 +67,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'model_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'model_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
index 6a2e2630b..9ff191a59 100644
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -71,7 +71,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'monitor_module_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'monitor_module_edit'" :command="['copy', scope.row, 'module']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
index f57dbf41e..68a0d0e33 100644
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -71,7 +71,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item :command="['edit', scope.row]" v-has="'project_edit'"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" v-has="'project_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'project_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/table/settings/roleTable.vue b/nezha-fronted/src/components/common/table/settings/roleTable.vue
index 62b349ef6..21a42be97 100644
--- a/nezha-fronted/src/components/common/table/settings/roleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/roleTable.vue
@@ -57,7 +57,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'role_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'role_delete'" :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
diff --git a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
index c6254dde3..7714c684b 100644
--- a/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/terminalLogTable.vue
@@ -85,7 +85,7 @@
             <div class="table-operation-item table-operation-item--more">
               <i class="nz-icon nz-icon-more3"></i>
             </div>
-            <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+            <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
               <el-dropdown-item :command="['shutdown', scope.row]"><i class="nz-icon nz-icon-ZD"></i><span class="operation-dropdown-text">Kill</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -96,7 +96,7 @@
             <div class="table-operation-item table-operation-item--more">
               <i class="nz-icon nz-icon-more3"></i>
             </div>
-            <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+            <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
               <el-dropdown-item :command="['recordTab', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('config.terminallog.record.record')}}</span></el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
diff --git a/nezha-fronted/src/components/common/table/settings/userTable.vue b/nezha-fronted/src/components/common/table/settings/userTable.vue
index 4a230fc3e..d1876a25c 100644
--- a/nezha-fronted/src/components/common/table/settings/userTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/userTable.vue
@@ -80,7 +80,7 @@
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'user_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'user_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 3cf73e260..27ffcf61f 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -107,7 +107,7 @@
         :visible-arrow="false"
         :disabled="isPopoverDisabled"
         trigger="hover"
-        popper-class="popper-z-index right-box-select-top right-box-dropdown-top"
+        popper-class="popper-z-index right-public-box-select-top right-public-box-dropdown-top"
         id="panel-calender-popover">
         <template v-if="this.searchTime&&this.searchTime.length>1">
           <el-row  :gutter="10" class="calendar-popover">
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index a61691abd..342b6045a 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -7,7 +7,7 @@
     <div class="header-menu">
       <el-dropdown>
         <div class="header-menu__item"><i class="nz-icon nz-icon-more-app"></i></div>
-        <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+        <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
           <el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index" v-if="linkData.length">
             <span class="link-title">
               <i class="nz-icon nz-icon-link"></i>
@@ -37,7 +37,7 @@
         <div class="header-menu--item">
           <i class="nz-icon nz-icon-language-change"></i>
         </div>
-        <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+        <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
           <el-dropdown-item>
             <div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
           </el-dropdown-item>
@@ -48,7 +48,7 @@
       </el-dropdown>
       <el-dropdown>
         <div class="personal-avatar"><span>{{name.substr(0, 1)}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
-        <el-dropdown-menu  style="width: 142px" class="right-box-select-top right-box-dropdown-top" slot="dropdown">
+        <el-dropdown-menu  style="width: 142px" class="right-public-box-select-top right-public-box-dropdown-top" slot="dropdown">
           <div class="personal-dropdown">
             <div class="personal-dropdown__username">{{name}}</div>
             <div class="personal-dropdown__name">@{{username}}</div>
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 4a2b241c5..623a94b4a 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -14,7 +14,7 @@
       v-loading="tools.loading"
     >
       <template v-slot:top-tool-right>
-        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-box-dropdown-top">
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-public-box-select-top right-public-box-dropdown-top">
           <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <pick-time v-model="searchTime" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 5d47711e0..100bfc681 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -23,7 +23,7 @@
           class="margin-r-20"
           placeholder="IP"
           size="small"
-          popper-class="mib-browser-right-box-dropdown right-box-dropdown-top"
+          popper-class="mib-browser-right-box-dropdown right-public-box-select-top right-public-box-dropdown-top"
           style="width: 100%;"
           value-key="manageIp"
           @input="assetChange"
@@ -34,7 +34,7 @@
         </el-autocomplete>
         <el-input id="mib-browser-oid" v-model="searchParam.oid" class="margin-r-20" placeholder="OID" size="small"></el-input>
         <div class="margin-r-10" style="width: 50%">
-          <el-select id="mib-browser-host" v-model="searchParam.operation" size="small" popper-class="right-box-select-top">
+          <el-select id="mib-browser-host" v-model="searchParam.operation" size="small" popper-class="right-public-box-select-top right-public-box-dropdown-top">
             <el-option v-for="item in operationData" :key="item" :value="item"></el-option>
           </el-select>
         </div>
diff --git a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
index f8f536c65..4fa3fe786 100644
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
@@ -41,7 +41,7 @@
             </template>
             <template v-if="item.prop == 'role'">
               <el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)">
-                <el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference">
+                <el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference" popper-class="right-public-box-select-top right-public-box-dropdown-top role-system-table">
                   <template v-for="role in roles" >
                     <el-option :label="role.name" :value="role"></el-option>
                   </template>
@@ -58,6 +58,7 @@
                   format="yyyy-MM-dd HH:mm:ss"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   type="datetime"
+                  popper-class="item-system-table right-public-box-dropdown-top right-public-box-select-top"
                   :picker-options="pickerOptions"
                   :placeholder="$t('el.datepicker.selectTime')">
                 </my-date-picker>
diff --git a/nezha-fronted/src/components/page/config/system/linkTable.vue b/nezha-fronted/src/components/page/config/system/linkTable.vue
index 7583e543e..a9bca699c 100644
--- a/nezha-fronted/src/components/page/config/system/linkTable.vue
+++ b/nezha-fronted/src/components/page/config/system/linkTable.vue
@@ -70,7 +70,7 @@
               <div class="table-operation-item table-operation-item--more">
                 <i class="nz-icon nz-icon-more3"></i>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+              <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
                 <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
diff --git a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
index 70bda9642..c0a935650 100644
--- a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
+++ b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
@@ -46,7 +46,7 @@
             </template>
             <template v-if="item.prop == 'account'">
               <el-popover :content="rules.account.message" placement="top" trigger="manual" v-model="rules.account.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.account)">
-                <el-select slot="reference" v-model="scope.row[item.prop]" size="small">
+                <el-select slot="reference" v-model="scope.row[item.prop]" size="small" popper-class="right-public-box-select-top right-public-box-dropdown-top">
                   <template v-for="param in accountParams">
                     <el-option :label="param.label" :value="param.value"></el-option>
                   </template>
@@ -80,7 +80,7 @@
               <div class="table-operation-item table-operation-item--more">
                 <i class="nz-icon nz-icon-more3"></i>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-box-dropdown-top">
+              <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
                 <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
diff --git a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
index 1f9da233e..62b32811c 100644
--- a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
+++ b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
@@ -7,16 +7,16 @@
           :options="options"
           :props="props"
           class="form-item"
-          popper-class="alert-form-pop no-style-class"
+          popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class"
           clearable></el-cascader>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.alertRule')">
-        <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
+        <el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-dropdown-top right-public-box-select-top no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
           <el-option v-for="(rule, index) in alertRules" :key="index" :label="rule.name" :value="rule.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')" prop="level" class="severity-box">
-        <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.level" clearable id="alert-param-level">
+        <el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class" v-model="parameters.level" clearable id="alert-param-level">
           <el-option v-for="item in alertPriority" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
               <span>
                  <i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}
@@ -26,7 +26,7 @@
         <i class="nz-icon nz-icon-circle severity-circle" v-if="parameters.level" :style="{color: alertPriority.length > 0 && alertPriority.find(severity => severity.id ===  parameters.level).color,'font-size':'12px'}"></i>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.state')">
-        <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.state" clearable id="alert-param-state">
+        <el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class" v-model="parameters.state" clearable id="alert-param-state">
           <el-option v-for="(item, index) in states" :key="index" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 87a3c7426..df553a2d8 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -213,7 +213,7 @@
 
             <!--group-->
             <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
-              <el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="chart-box-dropdown-width prevent-clickoutside" size="small" value-key="chartType">
+              <el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="chartType">
                 <el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id">
                   <span class="panel-dropdown-label-txt" >{{item.name}}</span>
                 </el-option>
@@ -223,7 +223,7 @@
 
           <!--   varType   -->
           <el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'chartTemp'">
-            <el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-dropdown chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
+            <el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                 <span class="panel-dropdown-label-txt" >{{item.name}}</span>
               </el-option>
@@ -274,7 +274,7 @@
             <el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'&& editChart.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
               <el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
                            placeholder=""
-                           popper-class="chart-box-dropdown-option-top dc-dropdown right-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           popper-class="chart-box-dropdown-option-top dc-dropdown right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
                            size="small"
                            style="width: 100%"
                            @change="unitSelected"
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index c130ea800..3ace23556 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -16,7 +16,7 @@
                 <span>{{selectValue}}</span>
                 <span><i class="el-icon-arrow-down el-icon--right"></i></span>
               </span>
-                <el-dropdown-menu style="width: 118px" class="el-dropdown__width right-box-select-top right-box-dropdown-top" placement="bottom-end" slot="dropdown">
+                <el-dropdown-menu style="width: 118px" class="el-dropdown__width right-public-box-select-top right-public-box-dropdown-top" placement="bottom-end" slot="dropdown">
                   <el-dropdown-item
                     @click.native="selectMetricsLogs(item.label,item.icon, item.value)"
                     v-for="item in searchMetrics"
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index d3fc29dcb..4ef7919b3 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -10,7 +10,7 @@
               &nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
             <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
                                v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
-                               v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew">
+                               v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew" style="margin-top: 5px">
 
               <template slot-scope="{ node, data }">
                 <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
@@ -58,7 +58,7 @@
                   class="nz-icon nz-icon-arrow-down"
                   style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
                 <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue"
-                                   style="text-align: left;" slot="dropdown" ref="metricSelector"
+                                   style="text-align: left;margin-top: 5px" slot="dropdown" ref="metricSelector"
                                    v-if="type !== 'log'"  :props="{emitPath:false}" :options="metricOptions" @change="metricChangeNew">
 
                   <template slot-scope="{ node, data }">