perf: 优化获取群组设置的逻辑，增强代码可读性

client/shared/index.tsx

@@ -132,6 +132,7 @@ export {
   deleteGroupRole,
   updateGroupRoleName,
   updateGroupRolePermission,
+  getGroupConfigWithInfo,
 } from './model/group';
 export type {
   GroupPanel,

client/shared/model/group.ts

@@ -87,6 +87,23 @@ export interface GroupInvite {
   expiredAt?: string;
 }
 
+/**
+ * 获取群组设置信息
+ */
+export function getGroupConfigWithInfo(
+  groupInfo: GroupInfo | null | undefined
+): {
+  hideGroupMemberDiscriminator: boolean;
+  [key: string]: unknown;
+} {
+  const config = groupInfo?.config ?? {};
+
+  return {
+    ...config,
+    hideGroupMemberDiscriminator: config.hideGroupMemberDiscriminator ?? false,
+  };
+}
+
 /**
  * 创建群组
  * @param name 群组名

client/web/src/components/Panel/group/MembersPanel.tsx

@@ -1,11 +1,12 @@
 import { Icon } from 'tailchat-design';
-import { openReconfirmModal, openReconfirmModalP } from '@/components/Modal';
+import { openReconfirmModalP } from '@/components/Modal';
 import { GroupUserPopover } from '@/components/popover/GroupUserPopover';
 import { UserListItem } from '@/components/UserListItem';
 import { Divider, Dropdown, Input, MenuProps, Skeleton } from 'antd';
 import React, { useMemo } from 'react';
 import {
   formatFullTime,
+  getGroupConfigWithInfo,
   GroupMember,
   humanizeMsDuration,
   model,
@@ -101,6 +102,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
   const [allowManageUser] = useHasGroupPermission(groupId, [
     PERMISSION.core.manageUser,
   ]);
+  const { hideGroupMemberDiscriminator } = getGroupConfigWithInfo(groupInfo);
 
   const {
     searchText,
@@ -151,10 +153,6 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
     [groupId]
   );
 
-  const config = groupInfo?.config ?? {};
-  const hideGroupMemberDiscriminator =
-    config.hideGroupMemberDiscriminator ?? false;
-
   if (!groupInfo) {
     return <Problem />;
   }
@@ -240,11 +238,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
             <UserListItem
               userId={member._id}
               popover={
-                <GroupUserPopover
+                <GroupUserPopover userInfo={member} groupInfo={groupInfo} />
-                  userInfo={member}
-                  groupInfo={groupInfo}
-                  hideDiscriminator={hideGroupMemberDiscriminator}
-                />
               }
               hideDiscriminator={hideGroupMemberDiscriminator}
             />
@@ -256,13 +250,7 @@ export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
         <UserListItem
           key={member._id}
           userId={member._id}
-          popover={
+          popover={<GroupUserPopover userInfo={member} groupInfo={groupInfo} />}
-            <GroupUserPopover
-              userInfo={member}
-              groupInfo={groupInfo}
-              hideDiscriminator={hideGroupMemberDiscriminator}
-            />
-          }
           hideDiscriminator={hideGroupMemberDiscriminator}
         />
       );

client/web/src/components/popover/GroupUserPopover.tsx

@@ -3,17 +3,22 @@ import { fetchImagePrimaryColor } from '@/utils/image-helper';
 import { Space, Tag } from 'antd';
 import React, { useEffect } from 'react';
 import { getTextColorHex } from 'tailchat-design';
-import { GroupInfo, t, UserBaseInfo } from 'tailchat-shared';
+import {
+  getGroupConfigWithInfo,
+  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, groupInfo, hideDiscriminator = false } = props;
+  const { userInfo, groupInfo } = props;
   const userExtra = userInfo.extra ?? {};
   const roleNames = getUserRoleNames(userInfo._id, groupInfo);
+  const { hideGroupMemberDiscriminator } = getGroupConfigWithInfo(groupInfo);
 
   useEffect(() => {
     if (userInfo.avatar) {
@@ -28,7 +33,7 @@ export const GroupUserPopover: React.FC<{
       <UserProfileContainer userInfo={userInfo}>
         <div className="text-xl">
           <span className="font-semibold">{userInfo.nickname}</span>
-          {!hideDiscriminator && (
+          {!hideGroupMemberDiscriminator && (
             <span className="opacity-60 ml-1">#{userInfo.discriminator}</span>
           )}
         </div>