From f559c2ba96649701e392814d6e400ca27e21d651 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 24 Jan 2023 22:22:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BE=A4=E7=BB=84?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=88=9B=E5=BB=BA=E8=80=85=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E8=A7=92=E8=89=B2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Panel/group/MembersPanel.tsx   |  7 ++++
 .../components/popover/GroupUserPopover.tsx   | 35 ++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/client/web/src/components/Panel/group/MembersPanel.tsx b/client/web/src/components/Panel/group/MembersPanel.tsx
index d99d30f9..0da25b1c 100644
--- a/client/web/src/components/Panel/group/MembersPanel.tsx
+++ b/client/web/src/components/Panel/group/MembersPanel.tsx
@@ -21,6 +21,7 @@ import {
   useUserInfoList,
 } from 'tailchat-shared';
 import _compact from 'lodash/compact';
+import { Problem } from '@/components/Problem';
 
 interface MembersPanelProps {
   groupId: string;
@@ -154,6 +155,10 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
   const hideGroupMemberDiscriminator =
     config.hideGroupMemberDiscriminator ?? false;
 
+  if (!groupInfo) {
+    return <Problem />;
+  }
+
   if (userInfoList.length === 0) {
     return <Skeleton />;
   }
@@ -237,6 +242,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
               popover={
                 <GroupUserPopover
                   userInfo={member}
+                  groupInfo={groupInfo}
                   hideDiscriminator={hideGroupMemberDiscriminator}
                 />
               }
@@ -253,6 +259,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
           popover={
             <GroupUserPopover
               userInfo={member}
+              groupInfo={groupInfo}
               hideDiscriminator={hideGroupMemberDiscriminator}
             />
           }
diff --git a/client/web/src/components/popover/GroupUserPopover.tsx b/client/web/src/components/popover/GroupUserPopover.tsx
index 45008f7c..300be117 100644
--- a/client/web/src/components/popover/GroupUserPopover.tsx
+++ b/client/web/src/components/popover/GroupUserPopover.tsx
@@ -1,16 +1,19 @@
 import { pluginUserExtraInfo } from '@/plugin/common';
 import { fetchImagePrimaryColor } from '@/utils/image-helper';
-import { Tag } from 'antd';
+import { Space, Tag } from 'antd';
 import React, { useEffect } from 'react';
-import { t, UserBaseInfo } from 'tailchat-shared';
+import { getTextColorHex } from 'tailchat-design';
+import { GroupInfo, t, UserBaseInfo } from 'tailchat-shared';
 import { UserProfileContainer } from '../UserProfileContainer';
 
 export const GroupUserPopover: React.FC<{
   userInfo: UserBaseInfo;
+  groupInfo: GroupInfo;
   hideDiscriminator?: boolean;
 }> = React.memo((props) => {
-  const { userInfo, hideDiscriminator = false } = props;
+  const { userInfo, groupInfo, hideDiscriminator = false } = props;
   const userExtra = userInfo.extra ?? {};
+  const roleNames = getUserRoleNames(userInfo._id, groupInfo);
 
   useEffect(() => {
     if (userInfo.avatar) {
@@ -30,9 +33,19 @@ export const GroupUserPopover: React.FC<{
           )}
         </div>
 
-        <div>
+        <Space size={4} wrap={true} className="py-1">
+          {groupInfo.owner === userInfo._id && (
+            <Tag color="gold">{t('创建者')}</Tag>
+          )}
+
           {userInfo.temporary && <Tag color="processing">{t('游客')}</Tag>}
-        </div>
+
+          {roleNames.map((name) => (
+            <Tag key={name} color={getTextColorHex(name)}>
+              {name}
+            </Tag>
+          ))}
+        </Space>
 
         <div className="pt-2">
           {pluginUserExtraInfo.map((item, i) => {
@@ -60,3 +73,15 @@ export const GroupUserPopover: React.FC<{
   );
 });
 GroupUserPopover.displayName = 'GroupUserPopover';
+
+/**
+ * 获取用户的角色名列表
+ */
+function getUserRoleNames(userId: string, groupInfo: GroupInfo) {
+  const roles = groupInfo.members.find((m) => m.userId === userId)?.roles ?? [];
+  const roleNames = groupInfo.roles
+    .filter((r) => roles.includes(r._id))
+    .map((r) => r.name);
+
+  return roleNames;
+}