diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 6820e5941..c07c99a67 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -884,6 +884,7 @@ li{
 }
 .alert-rule-tag {
   cursor: default;
+  max-width: 100px;
 }
 /* end--内容*/
 
@@ -2192,3 +2193,21 @@ li{
 .nz-dialog.silence-box .el-dialog__body{
   padding-bottom: 0;
 }
+.user-name {
+  font-weight: bold;
+  margin-right: 5px;
+  max-width: 50%;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  vertical-align: bottom;
+}
+.user-username{
+  color: #999;
+  max-width: calc(50% - 10px);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  vertical-align: bottom;
+}
+.hover .user-username{
+  color: #fa901c;
+}
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index df9ae0e78..d67869d49 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -861,7 +861,7 @@ const en = {
     terminallog: {
       terminallog: 'Terminal log',
       status: 'State', // "状态"
-      username: 'Username',
+      username: 'User',
       SessionID: 'Session ID',
       authtype: 'AuthType',
       statusItem: {
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index a0aae7fae..9ec8be52a 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -21,7 +21,7 @@
             node-key="id"
             ref="panelTree">
             <div class="tree--node" slot-scope="{ node, data }">
-              <span>{{ node.label }}</span>
+              <span :title="node.label + ' (' + data.chartNum +'charts ）' ">{{ node.label }}</span>
 <!--              <span class="tree&#45;&#45;operation" v-if="!panelLock">-->
 <!--                <span @click.stop="deletePanel(data)" class="panel-dropdown-btn panel-dropdown-btn-delete" v-has="'panel_delete'"><i class="nz-icon nz-icon-delete"></i></span>-->
 <!--                <span class="panel-dropdown-btn" @click.stop="editPanel(data)"><i v-has="'panel_edit'" class="nz-icon nz-icon-edit"></i></span>-->
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index b3d930405..5360f086c 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -2499,4 +2499,7 @@ export default {
 /deep/ .el-collapse-item__arrow.el-icon-arrow-right{
   display: inline-block !important;
 }
+/deep/ .el-select--mini {
+  width: 100%;
+}
 </style>
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 7634f85ae..80822e880 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -314,10 +314,12 @@
               @change="receiverShowChange"
             >
               <el-option
+                style="width: 620px"
                 v-for="item in userData"
                 :key="item.id"
-                :label="item.username"
+                :label="item.name"
                 :value="item.id">
+                <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
               </el-option>
             </el-select>
           </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index b40620ab2..8ebb92cc6 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -21,8 +21,9 @@
               <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-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
+              <el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown right-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>
               </el-select>
             </el-form-item>
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 164166fe4..37b1fab0b 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -58,7 +58,7 @@
           <span v-else>-</span>
         </template>
         <template v-else-if="item.prop === 'receivers'">
-          <el-tag v-for="(user, index) in scope.row[item.prop]" v-if="user&&user.username" :key="index" class="alert-rule-tag" effect="dark" size="mini">{{user.username}}&nbsp;</el-tag>
+          <el-tag v-for="(user, index) in scope.row[item.prop]" v-if="user&&user.username" :key="index" class="alert-rule-tag" effect="dark" size="mini" :title="user.name">{{user.name}}&nbsp;&nbsp;</el-tag>
         </template>
         <template v-else-if="item.prop === 'state'">
           <el-popover
diff --git a/nezha-fronted/src/components/common/table/settings/dcTable.vue b/nezha-fronted/src/components/common/table/settings/dcTable.vue
index 010c7bb97..fc083a46f 100644
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dcTable.vue
@@ -35,7 +35,9 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'principal'">
-          <template v-if="scope.row.adminUser">{{ scope.row.adminUser.username }}</template>
+          <template v-if="scope.row.adminUser">
+            {{scope.row.adminUser.name}}
+          </template>
           <template v-else>-</template>
         </template>
         <template v-else-if="item.prop === 'state'">
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index f6df13aec..b28f8b5ab 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -23,7 +23,7 @@
                 </template>
                 <template v-slot:trigger>
                   <i style="color: #BEBEBE" class="el-icon-menu"></i>
-                  <span style="display: inline-block;padding: 0 7px;font-weight: bold">{{showPanel.name}}</span>
+                  <span :title="showPanel.name  + ' (' + showPanel.chartNum +'charts ）' " class="show-panel-name">{{showPanel.name}}</span>
                   <i style="font-size: 12px;color: #BEBEBE;" class="nz-icon nz-icon-arrow-down"></i>
                 </template>
                 <template v-slot:tail>
@@ -517,7 +517,7 @@ export default {
           this.panelData = response.data.list
           for (let i = 0; i < this.panelData.length; i++) {
             if (this.panelData[i].id == this.showPanel.id) {
-              this.showPanel.name = this.panelData[i].name
+              this.showPanel = this.panelData[i]
               break
             }
           }
@@ -953,4 +953,14 @@ export default {
     background: center center no-repeat #fff;
     z-index: 10;
   }
+  .show-panel-name{
+    display: inline-block;
+    padding: 0 7px;
+    font-weight: bold;
+    max-width: 310px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap;
+    vertical-align: bottom;
+  }
 </style>