fix: 修复群主和管理员标识样式 (#105)

Evansy · Oct 23, 2023 · b594aa7 · b594aa7
1 parent 15e05a1
commit b594aa7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 20 deletions.
diff --git 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
@@ -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;
+    }
   }
 }