diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 60e5ada22..c934749df 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -311,3 +311,10 @@
 .el-form-item__content .el-autocomplete .el-input-group {
   vertical-align: unset;
 }
+.user-name {
+  font-weight: bold;
+  margin-right: 5px;
+}
+.user-username{
+  color: #999;
+}
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index ef6b726c7..fc4e08dba 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -316,6 +316,7 @@
                 :key="item.id"
                 :label="item.username"
                 :value="item.id">
+                <span class="user-name">{{item.name}}</span><span class="user-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 3a7ab887e..b0b36b705 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -23,6 +23,7 @@
             <el-form-item :label='$t("asset.principal")' prop="principal">
               <el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown 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">
+                  <span class="user-name">{{item.name}}</span><span class="user-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..4e074204d 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">{{user.name}}&nbsp;&nbsp;@{{user.username}}&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..335319906 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">
+            <span class="user-name">{{scope.row.adminUser.name}}</span><span class="user-username">@{{scope.row.adminUser.username}}</span>
+          </template>
           <template v-else>-</template>
         </template>
         <template v-else-if="item.prop === 'state'">