refactor: 调整了私信会话标题的生成实现

统一了逻辑代码

shared/i18n/langs/en-US/translation.json

@@ -22,7 +22,6 @@
   "k35abe359": "Lobby",
   "k35f486ba": "Nickname",
   "k35f990b0": "View Detail",
-  "k36722a78": "Conversation with <1></1>",
   "k3b4b656d": "About",
   "k3bbf3bbd": "Register Account",
   "k3c502edb": "E-mail can not be empty",
@@ -68,7 +67,6 @@
   "k7fc7e508": "Dark Mode",
   "k821ff85a": "Common",
   "k8582af3f": "Refuse",
-  "k8849b674": "Multiplayer conversations with <1></1> and <4></4>",
   "k89df1d1e": "The network is abnormal",
   "k8abdba5c": "Has been sent",
   "k8acbe00": "Current service available",
@@ -79,6 +77,7 @@
   "k979fc780": "Unable to join the room, you will not be able to get the latest information, please refresh the page and try again",
   "k9bb01902": "Show Detail",
   "k9d901c20": "Meeting room",
+  "k9fa72780": "Conversation with {{name}}",
   "ka01a00eb": "System language",
   "ka0451c97": "Cancel",
   "ka14986f0": "Plugin install successed, need to be restarted to take effect",
@@ -125,7 +124,6 @@
   "kdd6c18f8": "Service exception",
   "ke17b2c87": "Do not upload pictures that violate local laws and regulations",
   "ke187440d": "Panel type cannot be empty",
-  "kea50b8e9": "Multi-person conversation with <1>{{membersEl}}</1> and others",
   "kecbd7449": "Delete",
   "ked2baf28": "Loading...",
   "ked5385d5": "Create Panel",

shared/i18n/langs/zh-CN/translation.json

@@ -22,7 +22,6 @@
   "k35abe359": "大厅",
   "k35f486ba": "用户昵称",
   "k35f990b0": "查看详情",
-  "k36722a78": "与 <1></1> 的会话",
   "k3b4b656d": "关于",
   "k3bbf3bbd": "注册账号",
   "k3c502edb": "邮箱不能为空",
@@ -68,7 +67,6 @@
   "k7fc7e508": "暗黑模式",
   "k821ff85a": "通用",
   "k8582af3f": "拒绝",
-  "k8849b674": "与 <1></1> 和 <4></4> 的多人会话",
   "k89df1d1e": "网络出现异常",
   "k8abdba5c": "已发送",
   "k8acbe00": "当前服务可用",
@@ -79,6 +77,7 @@
   "k979fc780": "无法加入房间, 您将无法获取到最新的信息, 请刷新页面后重试",
   "k9bb01902": "显示详情",
   "k9d901c20": "会议室",
+  "k9fa72780": "与 {{name}} 的会话",
   "ka01a00eb": "系统语言",
   "ka0451c97": "取消",
   "ka14986f0": "插件安装成功, 需要重启后生效",
@@ -125,7 +124,6 @@
   "kdd6c18f8": "服务异常",
   "ke17b2c87": "请勿上传违反当地法律法规的图片",
   "ke187440d": "面板类型不能为空",
-  "kea50b8e9": "与 <1>{{membersEl}}</1> 等人的多人会话",
   "kecbd7449": "删除",
   "ked2baf28": "加载中...",
   "ked5385d5": "创建面板",

shared/index.tsx

@@ -111,6 +111,7 @@ export {
 export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
 export { useDMConverseList } from './redux/hooks/useConverse';
 export { useConverseMessage } from './redux/hooks/useConverseMessage';
+export { useDMConverseName } from './redux/hooks/useDMConverseName';
 export {
   useGroupInfo,
   useGroupPanel,

shared/redux/hooks/useDMConverseName.ts

@@ -0,0 +1,26 @@
+import { getCachedUserInfo, isValidStr, useAsync } from '../../index';
+import type { ChatConverseState } from '../slices/chat';
+import { useUserId } from './useUserInfo';
+
+export function useDMConverseName(converse: ChatConverseState) {
+  const userId = useUserId();
+  const otherConverseMembers = converse.members.filter((m) => m !== userId); // 成员Id
+  const len = otherConverseMembers.length;
+  const { value: otherMembersInfo = [] } = useAsync(() => {
+    return Promise.all(
+      otherConverseMembers.map((userId) => getCachedUserInfo(userId))
+    );
+  }, [otherConverseMembers.join(',')]);
+
+  if (isValidStr(converse.name)) {
+    return converse.name;
+  }
+
+  if (len === 1) {
+    return otherMembersInfo[0]?.nickname ?? '';
+  } else if (len === 2) {
+    return `${otherMembersInfo[0]?.nickname}, ${otherMembersInfo[1]?.nickname}`;
+  } else {
+    return `${otherMembersInfo[0]?.nickname}, ${otherMembersInfo[1]?.nickname} ...`;
+  }
+}

web/src/components/Panel/personal/ConversePanel.tsx

@@ -1,55 +1,43 @@
 import { ChatBox } from '@/components/ChatBox';
 import React from 'react';
-import { joinArray, Trans, useAppSelector, useUserId } from 'tailchat-shared';
+import {
+  ChatConverseState,
+  t,
+  useAppSelector,
+  useDMConverseName,
+} from 'tailchat-shared';
 import { PanelCommonHeader } from '../common/Header';
-import _without from 'lodash/without';
+import _isNil from 'lodash/isNil';
-import _take from 'lodash/take';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
-import { UserName } from '@/components/UserName';
 
-function useConverseTitle(converseId: string): React.ReactNode {
+const ConversePanelHeader: React.FC<{ converse: ChatConverseState }> =
-  const members = useAppSelector(
+  React.memo(({ converse }) => {
-    (state) => state.chat.converses[converseId]?.members ?? []
+    const name = useDMConverseName(converse);
-  );
-  const userId = useUserId();
-  const otherMembers = _without<string>(members, userId ?? '');
-  const len = otherMembers.length;
 
-  if (len === 1) {
-    return (
-      <Trans>
-        与 <UserName userId={otherMembers[0]} /> 的会话
-      </Trans>
-    );
-  } else if (len === 2) {
-    return (
-      <Trans>
-        与 <UserName userId={otherMembers[0]} /> 和{' '}
-        <UserName userId={otherMembers[1]} /> 的多人会话
-      </Trans>
-    );
-  } else {
-    const membersEl = joinArray(
-      _take(otherMembers, 2).map((uid) => <UserName key={uid} userId={uid} />),
-      <span>，</span>
-    );
     return (
-      <Trans>
+      <PanelCommonHeader actions={[]}>
-        与 <span>{{ membersEl }}</span> 等人的多人会话
+        {t('与 {{name}} 的会话', { name })}
-      </Trans>
+      </PanelCommonHeader>
     );
-  }
+  });
-}
+ConversePanelHeader.displayName = 'ConversePanelHeader';
 
 interface ConversePanelProps {
   converseId: string;
 }
 export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
   ({ converseId }) => {
-    const title = useConverseTitle(converseId);
+    const converse = useAppSelector(
+      (state) => state.chat.converses[converseId]
+    );
+
+    if (_isNil(converse)) {
+      return <LoadingSpinner />;
+    }
 
     return (
       <div className="flex flex-col overflow-hidden flex-1">
-        <PanelCommonHeader actions={[]}>{title}</PanelCommonHeader>
+        <ConversePanelHeader converse={converse} />
         <div className="flex-1 overflow-hidden">
           <ChatBox converseId={converseId} isGroup={false} />
         </div>

web/src/routes/Main/Content/Personal/SidebarDMItem.tsx

@@ -1,10 +1,5 @@
-import {
+import { ChatConverseState, useDMConverseName } from 'tailchat-shared';
-  ChatConverseState,
+import React from 'react';
-  useCachedUserInfo,
-  useUserId,
-} from 'tailchat-shared';
-import { isValidStr } from 'tailchat-shared/utils/string-helper';
-import React, { useMemo } from 'react';
 import { SidebarItem } from '../SidebarItem';
 
 interface SidebarDMItemProps {
@@ -13,23 +8,7 @@ interface SidebarDMItemProps {
 export const SidebarDMItem: React.FC<SidebarDMItemProps> = React.memo(
   (props) => {
     const converse = props.converse;
-    const userId = useUserId();
+    const name = useDMConverseName(converse);
-    const otherMemberId = converse.members.find((m) => m !== userId);
-    const memberInfo = useCachedUserInfo(otherMemberId ?? null);
-    const memberSize = converse.members.length;
-
-    const name = useMemo(() => {
-      if (isValidStr(converse.name)) {
-        return converse.name;
-      }
-
-      let name = memberInfo.nickname;
-      if (memberSize >= 3) {
-        name += ' 等人的会话';
-      }
-
-      return name;
-    }, [converse.name, memberInfo.nickname, memberSize]);
 
     return (
       <SidebarItem