diff --git a/nezha-fronted/src/components/common/js/validate.js b/nezha-fronted/src/components/common/js/validate.js
new file mode 100644
index 000000000..41287eba1
--- /dev/null
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -0,0 +1,52 @@
+import vm from '../../../main'
+
+export function host(rule, value, callback) {
+  console.log("callback:")
+  console.log(callback)
+  console.log(typeof callback)
+
+  if(!value || value == ''){
+    callback(new Error(vm.$t('validate.required')))
+  }
+  const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  setTimeout(() => {
+    if (hostReg.test(value)) {
+      callback()
+    } else {
+      callback(new Error(vm.$t('validate.host')))
+    }
+
+  }, 100)
+}
+
+export function phone(rule, value, callback) {
+  if(!value || value == ''){
+    callback()
+  }
+  const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
+  setTimeout(() => {
+    if (!Number.isInteger(+value)) {
+      callback(new Error(vm.$t('validate.tel')))
+    } else {
+      if (phoneReg.test(value)) {
+        callback()
+      } else {
+        callback(new Error(vm.$t('validate.tel')))
+      }
+    }
+  }, 100)
+}
+
+export function port(rule, value, callback) {
+  if(!value || value == ''){
+    callback(new Error(vm.$t('validate.required')))
+  }
+  setTimeout(() => {
+    if(typeof value != 'number'){
+      callback(new Error(vm.$t('validate.number')))
+    }
+    if(value < 1 ||value > 65535){
+      callback(new Error(vm.$t('validate.port')))
+    }
+  }, 100)
+}
diff --git a/nezha-fronted/src/components/common/popBox/dcConfig.vue b/nezha-fronted/src/components/common/popBox/dcConfig.vue
index cc7d27860..20f4424a7 100644
--- a/nezha-fronted/src/components/common/popBox/dcConfig.vue
+++ b/nezha-fronted/src/components/common/popBox/dcConfig.vue
@@ -50,6 +50,7 @@
 </template>
 
 <script>
+    import {phone} from '../../common/js/validate'
     export default {
       name: "dcConfig",
       props:{
@@ -62,24 +63,6 @@
         this.init();
       },
       data(){
-        let checkPhone=(rule, value, callback) => {
-          if(!value || value == ''){
-            callback()
-          }
-          const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
-          setTimeout(() => {
-            if (!Number.isInteger(+value)) {
-              callback(new Error(this.$t('validate.tel')))
-            } else {
-              if (phoneReg.test(value)) {
-                callback()
-              } else {
-                callback(new Error(this.$t('validate.tel')))
-              }
-            }
-          }, 100)
-        }
-
         return {
           title:"",
           rules:{
@@ -91,7 +74,7 @@
             principal:[
             ],
             tel:[
-              { validator: checkPhone, trigger: 'blur'}
+              { validator: phone, trigger: 'blur'}
             ]
           },
           idc:{},
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 27c075645..6e8ea015f 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -69,7 +69,9 @@
                   <div v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
                   <div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
                     <div class="endpoint-sub-table-col">{{item.host}}</div>
-                    <div class="endpoint-sub-table-col">{{item.sn}}</div>
+                    <el-popover trigger="hover" placement="right-start" :content="item.sn" >
+                      <div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
+                    </el-popover>
                   </div>
                 </div>
               </div>
@@ -850,6 +852,7 @@
     display: inline-block;
     width: calc(50% - 15px);
     padding-left: 10px;
+    text-overflow: ellipsis;
   }
   .endpoint-sub-table-paginate-all {
     position: absolute;
diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue
index 5bd9dd8e2..87f776d8d 100644
--- a/nezha-fronted/src/components/page/asset/accountConfig.vue
+++ b/nezha-fronted/src/components/page/asset/accountConfig.vue
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+  import {port} from '../../common/js/validate'
 export default {
     name: "accountConfig",
     props:{
@@ -66,15 +67,7 @@ export default {
 
       let validatePort=(rule,value,callback) => {
         if(this.asComponent){//作为组件使用，正常验证
-          if(!value || value == ''){
-            callback(new Error(this.$t('validate.required')))
-          }
-          if(typeof value != 'number'){
-            callback(new Error(this.$t('validate.number')))
-          }
-          if(value < 1 ||value > 65535){
-            callback(new Error(this.$t('validate.port')))
-          }
+          port(rule,value,callback);
         }else{
           if(this.account.user){
             if(!value || value == ''){
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 602d8bf7c..ae24d49e0 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -10,7 +10,10 @@
         <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
           <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
                        v-for="(item,key) in checkListData" :key="key" :label=item.id>
-            <div class="sidebar-info-item-txt">{{item.name}}</div>
+            <el-popover trigger="hover" placement="right-end" :content="item.name" >
+              <div slot="reference" class="sidebar-info-item-txt">{{item.name}}</div>
+            </el-popover>
+
             <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
               <template v-slot:optionZone>
                 <span @click="closeAllPop">
@@ -67,7 +70,9 @@
               <span>{{scope.row.model.type.value}}</span>
             </div>
             <div v-if="item.prop=='SN'">
-              <span>{{scope.row.sn}}</span>
+              <el-popover trigger="hover" placement="bottom-start"  :content="scope.row.sn" >
+                <span slot="reference" class="sidebar-info-item-txt">{{scope.row.sn}}</span>
+              </el-popover>
             </div>
             <div v-if="item.prop=='HOST'">
               <span>{{scope.row.host}}</span>
diff --git a/nezha-fronted/src/components/page/asset/assetAddUnit.vue b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
index 7ec4abbde..020d28370 100644
--- a/nezha-fronted/src/components/page/asset/assetAddUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
@@ -333,6 +333,7 @@
 
 <script>
   import accountConfig from './accountConfig';
+  import {host} from '../../common/js/validate';
   export default {
 
     name: "assetAddUnit",
@@ -478,7 +479,8 @@
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
           host: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+            {required: true,validator:host, trigger: 'blur'}
+
           ],
           modelId: [
             {required: true, message: this.$t('validate.required'), trigger: 'change'}
diff --git a/nezha-fronted/src/components/page/asset/assetEditUnit.vue b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
index c3d48cfcd..adced3d6d 100644
--- a/nezha-fronted/src/components/page/asset/assetEditUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
@@ -24,7 +24,9 @@
         <el-form ref="assetEditForm" :model="assetData" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
           <el-form-item :label="$t('asset.createAssetTab.sn')" prop="sn">
             <el-input size="mini" v-if="!tabView" v-model="assetData.sn"/>
-            <span v-if="tabView">{{assetData.sn}}</span>
+            <el-popover trigger="hover" placement="bottom-start" :content="assetData.sn" >
+              <span slot="reference" class="sidebar-info-item-txt" v-if="tabView">{{assetData.sn}}</span>
+            </el-popover>
           </el-form-item>
           <el-form-item :label="this.$t('asset.createAssetTab.host')" prop="host">
             <el-input size="mini" v-if="!tabView" v-model="assetData.host"/>
@@ -459,6 +461,7 @@
 
 <script>
   import accountConfig from './accountConfig';
+  import {host} from '../../common/js/validate';
   export default {
     name: "assetEditUnit",
     props: ["editUnitShow", "editUnitId"],
@@ -617,7 +620,7 @@
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
           host: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+            {required: true, validator:host, trigger: 'blur'}
           ],
           modelId: [
             {required: true, message: this.$t('validate.required'), trigger: 'change'}
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index b4912d645..874485203 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -145,23 +145,12 @@
 
 </template>
 <script>
+  import {host} from '../../common/js/validate';
+  import {port} from '../../common/js/validate';
 export default {
+
   name: "prom",
   data() {
-    let checkHost=(rule, value, callback) => {
-      if(!value || value == ''){
-        callback(new Error(this.$t('validate.required')))
-      }
-      const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
-        setTimeout(() => {
-          if (hostReg.test(value)) {
-            callback()
-          } else {
-            callback(new Error(this.$t('validate.host')))
-          }
-
-      }, 100)
-    }
     return {
       rightBox: { //弹出框相关
         show: false,
@@ -179,11 +168,10 @@ export default {
           {required:true,message:this.$t('validate.required'),trigger:'change'}
         ],
         host:[
-          { validator: checkHost, trigger: 'blur',required:true}
+          { validator: host, trigger: 'blur',required:true}
         ],
         port:[
-          {required:true,message:this.$t('validate.required'),trigger:'blur'},
-          {type:'number',message: this.$t('validate.number')}
+          { validator: port, trigger: 'blur',required:true}
         ],
         type:[
           {required:true,message:this.$t('validate.required'),trigger:'change'},
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index e4a4091cb..bded9dc56 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -10,7 +10,9 @@
           @click="changeModule(item)"
           :id="'project-module-'+item.id"
         >
-          <div class="sidebar-info-item-txt">{{item.name}}</div>
+          <el-popover trigger="hover" placement="right-end" :content="item.name" >
+            <div slot="reference" class="sidebar-info-item-txt">{{item.name}}</div>
+          </el-popover>
           <div class="side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id"><i class="el-icon-edit-outline"></i></div>
         </div>
       </div>