From 2a3d307902d7333a7209004ce41d2f06905083be Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 24 Sep 2021 14:29:19 +0800
Subject: [PATCH] =?UTF-8?q?style:=20alert=20rule=20&=20datacenter=20user.n?=
 =?UTF-8?q?ame=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/rightBoxCommon.scss |  7 -------
 nezha-fronted/src/assets/stylus/main.scss     | 19 +++++++++++++++++++
 .../common/rightBox/alertRuleBox.vue          |  5 +++--
 .../src/components/common/rightBox/dcBox.vue  |  4 ++--
 .../common/table/alert/alertRuleTable.vue     |  2 +-
 .../common/table/settings/dcTable.vue         |  2 +-
 6 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index c934749df..60e5ada22 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -311,10 +311,3 @@
 .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/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 5e656572b..4ef95a6c0 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--内容*/
 
@@ -2179,3 +2180,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/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index fc4e08dba..447cd9ddc 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -312,11 +312,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">{{item.name}}</span><span class="user-username">@{{item.username}}</span>
+                <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 b0b36b705..998e79ca6 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -22,8 +22,8 @@
             </el-form-item>
             <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 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 4e074204d..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.name}}&nbsp;&nbsp;@{{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 335319906..fc083a46f 100644
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dcTable.vue
@@ -36,7 +36,7 @@
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'principal'">
           <template v-if="scope.row.adminUser">
-            <span class="user-name">{{scope.row.adminUser.name}}</span><span class="user-username">@{{scope.row.adminUser.username}}</span>
+            {{scope.row.adminUser.name}}
           </template>
           <template v-else>-</template>
         </template>