perf(web): 优化获取批量用户详情的策略

shared/index.tsx

@@ -150,13 +150,18 @@ export { useConverseMessage } from './redux/hooks/useConverseMessage';
 export { useDMConverseName } from './redux/hooks/useDMConverseName';
 export {
   useGroupInfo,
-  useGroupMemberUUIDs,
+  useGroupMemberIds,
+  useGroupMemberInfos,
   useGroupPanel,
   useIsGroupOwner,
   useGroupUnread,
   useGroupTextPanelUnread,
 } from './redux/hooks/useGroup';
-export { useUserInfo, useUserId } from './redux/hooks/useUserInfo';
+export {
+  useUserInfo,
+  useUserId,
+  useUserInfoList,
+} from './redux/hooks/useUserInfo';
 export { userActions, groupActions, uiActions } from './redux/slices';
 export type { ChatConverseState } from './redux/slices/chat';
 export { setupRedux } from './redux/setup';

shared/redux/hooks/useGroup.ts

@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
 import { GroupInfo, GroupPanel, GroupPanelType } from '../../model/group';
+import type { UserBaseInfo } from '../../model/user';
 import { isValidStr } from '../../utils/string-helper';
 import { useAppSelector } from './useAppSelector';
 import { useUnread } from './useUnread';
-import { useUserId } from './useUserInfo';
+import { useUserId, useUserInfoList } from './useUserInfo';
 
 /**
  * 获取群组信息
@@ -15,15 +16,22 @@ export function useGroupInfo(groupId: string): GroupInfo | null {
 /**
  * 获取群组中所有成员的uuid列表
  */
-export function useGroupMemberUUIDs(groupId: string): string[] {
+export function useGroupMemberIds(groupId: string): string[] {
   const groupInfo = useGroupInfo(groupId);
   const members = groupInfo?.members ?? [];
-  const groupMemberUUIDs = useMemo(
-    () => members.map((m) => m.userId),
-    [members]
-  );
+  const groupMemberIds = useMemo(() => members.map((m) => m.userId), [members]);
+
+  return groupMemberIds;
+}
+
+/**
+ * 获取群组中成员信息的详细列表
+ */
+export function useGroupMemberInfos(groupId: string): UserBaseInfo[] {
+  const groupMemberIds = useGroupMemberIds(groupId);
+  const userInfos = useUserInfoList(groupMemberIds);
 
-  return groupMemberUUIDs;
+  return userInfos;
 }
 
 /**

shared/redux/hooks/useUserInfo.ts

@@ -1,3 +1,5 @@
+import { getCachedUserInfo } from '../../cache/cache';
+import { useAsync } from '../../hooks/useAsync';
 import type { UserLoginInfo } from '../../model/user';
 import { useAppSelector } from './useAppSelector';
 
@@ -14,3 +16,14 @@ export function useUserInfo(): UserLoginInfo | null {
 export function useUserId(): string | undefined {
   return useUserInfo()?._id;
 }
+
+/**
+ * 根据用户id获取用户信息列表
+ */
+export function useUserInfoList(userIds: string[]) {
+  const { value: userInfos = [] } = useAsync(() => {
+    return Promise.all(userIds.map((userId) => getCachedUserInfo(userId)));
+  }, [userIds.join(',')]);
+
+  return userInfos;
+}

web/src/components/ChatBox/ChatMessageList/Item.tsx

@@ -8,8 +8,6 @@ import {
   t,
   useCachedUserInfo,
   MessageHelper,
-  useAsync,
-  getCachedUserInfo,
 } from 'tailchat-shared';
 import { Avatar } from '@/components/Avatar';
 import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter';
@@ -23,6 +21,7 @@ import { useChatMessageReactionAction } from './useChatMessageReaction';
 import { TcPopover } from '@/components/TcPopover';
 import { useMessageReactions } from './useMessageReactions';
 import { stopPropagation } from '@/utils/dom-helper';
+import { useUserInfoList } from 'tailchat-shared/hooks/model/useUserInfoList';
 import './Item.less';
 
 /**
@@ -189,13 +188,8 @@ const SystemMessageWithNickname: React.FC<
     overwritePayload: (nicknameList: string[]) => ChatMessage;
   }
 > = React.memo((props) => {
-  const { value: nicknameList = [] } = useAsync(() => {
-    return Promise.all(
-      props.userIds.map((userId) =>
-        getCachedUserInfo(userId).then((u) => u.nickname)
-      )
-    );
-  }, [props.userIds.join(',')]);
+  const userInfos = useUserInfoList(props.userIds);
+  const nicknameList = userInfos.map((user) => user.nickname);
 
   return (
     <SystemMessage {...props} payload={props.overwritePayload(nicknameList)} />

web/src/components/UserListItem.tsx

@@ -2,19 +2,8 @@ import React, { useCallback } from 'react';
 import { Avatar } from './Avatar';
 import _isEmpty from 'lodash/isEmpty';
 import { Skeleton, Space } from 'antd';
-// import { openUserProfile } from './modals/UserProfile';
 import { useCachedUserInfo, useCachedOnlineStatus } from 'tailchat-shared';
 
-// const UserAvatar = styled(Avatar)`
-//   cursor: pointer !important;
-//   margin-right: 10px !important;
-// `;
-
-// const UserNameText = styled(Typography)`
-//   flex: 1;
-//   color: ${(props) => props.theme.color.headerPrimary} !important;
-// `;
-
 interface UserListItemProps {
   userId: string;
   actions?: React.ReactElement[];