feat: 新增显示群主和管理员的功能 (#104)

src/enums/group.ts

@@ -0,0 +1,15 @@
+import { RoleEnum } from '@/enums/index'
+
+/**
+ * 群组角色映射
+ */
+export const GROUP_ROLE_MAP: Record<string, { text: string; class: string }> = {
+  [RoleEnum.LORD]: {
+    text: '群主',
+    class: 'lord',
+  },
+  [RoleEnum.ADMIN]: {
+    text: '管理员',
+    class: 'admin',
+  },
+}

src/services/types.ts

@@ -4,13 +4,13 @@
  * @see TSDoc规范https://tsdoc.org/
  **/
 import type {
-  OnlineEnum,
-  MsgEnum,
   ActEnum,
-  SexEnum,
   IsYetEnum,
   MarkEnum,
+  MsgEnum,
+  OnlineEnum,
   RoomTypeEnum,
+  SexEnum,
 } from '@/enums'
 
 /***/
@@ -92,6 +92,8 @@ export type UserItem = {
   lastOptTime: number
   /** 用户名称 */
   name: string
+  /** 角色ID */
+  roleId?: number
   /** uid */
   uid: number
 }
@@ -345,6 +347,7 @@ export enum RequestFriendAgreeStatus {
   /** 2同意 */
   Agree,
 }
+
 /** 请求添加好友的列表项 */
 export type RequestFriendItem = {
   /** 申请id */

src/styles/base.css

@@ -107,6 +107,12 @@ a:active {
   animation: icon-loading 1s infinite cubic-bezier(0, 0, 1, 1);
 }
 
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @keyframes icon-loading {
   0% {
     transform: rotate(0);

src/views/Home/Chat/components/UserList/UserItem/index.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { toRef, ref } from 'vue'
+import { ref, toRef } from 'vue'
 import { OnlineEnum } from '@/enums'
 import type { UserItem } from '@/services/types'
 import { useUserInfo } from '@/hooks/useCached'
 import { useUserStore } from '@/stores/user'
 import ContextMenu from '../ContextMenu/index.vue'
+import { GROUP_ROLE_MAP } from '@/enums/group'
+
 const props = defineProps<{ user: UserItem }>()
 const user = toRef(props.user)
 const userInfo = useUserInfo(user.value?.uid)
@@ -42,6 +44,13 @@ const handleRightClick = (e: MouseEvent) => {
       :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>
     <ContextMenu v-model:show="isShowMenu" :options="menuOptions" :uid="(user?.uid as number)" />
   </li>
 </template>

src/views/Home/Chat/components/UserList/UserItem/styles.scss

@@ -18,4 +18,20 @@
       margin-right: 8px;
     }
   }
+
+  .badge {
+    padding: 2px 4px;
+    border: 1px solid #fff;
+    border-radius: 3px;
+  }
+
+  .lord {
+    color: #777;
+    background-color: #f2c55c;
+  }
+
+  .admin {
+    color: #fff;
+    background-color: #aa6d4b;
+  }
 }