From b594aa791eaefa6f9777b416cc360e58b8121a0a Mon Sep 17 00:00:00 2001
From: Kkuil317 <102936058+Kkuil@users.noreply.github.com>
Date: Mon, 23 Oct 2023 17:31:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BE=A4=E4=B8=BB?=
 =?UTF-8?q?=E5=92=8C=E7=AE=A1=E7=90=86=E5=91=98=E6=A0=87=E8=AF=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=20(#105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/UserList/UserItem/index.vue    | 21 ++++++----
 .../components/UserList/UserItem/styles.scss  | 38 +++++++++++++------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/views/Home/Chat/components/UserList/UserItem/index.vue b/src/views/Home/Chat/components/UserList/UserItem/index.vue
index 7b7d7a73..d45f39e1 100644
--- a/src/views/Home/Chat/components/UserList/UserItem/index.vue
+++ b/src/views/Home/Chat/components/UserList/UserItem/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { OnlineEnum } from '@/enums'
 import type { UserItem } from '@/services/types'
 import { useUserInfo } from '@/hooks/useCached'
@@ -28,6 +28,13 @@ const handleRightClick = (e: MouseEvent) => {
   menuOptions.value.y = y
   isShowMenu.value = true
 }
+
+const computedRole = computed(() => {
+  if (props.user.roleId) {
+    return GROUP_ROLE_MAP[props.user.roleId]
+  }
+  return ''
+})
 </script>
 
 <template>
@@ -43,13 +50,11 @@ const handleRightClick = (e: MouseEvent) => {
       showStatus
       :online="user.activeStatus === OnlineEnum.ONLINE"
     />
-    {{ userInfo.name }}
-    <div
-      v-if="GROUP_ROLE_MAP[user.roleId as number]"
-      class="badge flex-center"
-      :class="GROUP_ROLE_MAP[user.roleId as number].class"
-    >
-      {{ GROUP_ROLE_MAP[user?.roleId as number].text }}
+    <div class="user-name">
+      <div class="text">{{ userInfo.name }}</div>
+      <div v-if="computedRole" class="badge flex-center" :class="computedRole.class">
+        {{ computedRole.text }}
+      </div>
     </div>
     <ContextMenu v-model:show="isShowMenu" :options="menuOptions" :uid="(user?.uid as number)" />
   </li>
diff --git a/src/views/Home/Chat/components/UserList/UserItem/styles.scss b/src/views/Home/Chat/components/UserList/UserItem/styles.scss
index 959a4bc9..4ac1b447 100644
--- a/src/views/Home/Chat/components/UserList/UserItem/styles.scss
+++ b/src/views/Home/Chat/components/UserList/UserItem/styles.scss
@@ -19,19 +19,33 @@
     }
   }
 
-  .badge {
-    padding: 2px 4px;
-    border: 1px solid #fff;
-    border-radius: 3px;
-  }
+  .user-name {
+    display: flex;
 
-  .lord {
-    color: #777;
-    background-color: #f2c55c;
-  }
+    .text {
+      max-width: 90px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .admin {
-    color: #fff;
-    background-color: #aa6d4b;
+    .badge {
+      padding: 2px 4px;
+      margin-left: 5px;
+      font-size: 10px;
+      border-radius: 3px;
+    }
+
+    .lord {
+      color: #777;
+      background-color: #f2c55c;
+      border: 1px solid #fff;
+    }
+
+    .admin {
+      color: #fff;
+      background-color: #aa6d4b;
+      border: 1px solid #fff;
+    }
   }
 }