feat: 多人会话的成员列表

web/src/components/Panel/common/Wrapper.tsx

@@ -14,7 +14,7 @@ interface RightPanelType {
  */
 interface CommonPanelWrapperProps {
   header: React.ReactNode;
-  actions: (
+  actions?: (
     setRightPanel: (info: RightPanelType) => void
   ) => React.ReactElement[];
 }
@@ -26,7 +26,9 @@ export const CommonPanelWrapper: React.FC<CommonPanelWrapperProps> = React.memo(
       <div className="w-full h-full flex">
         {/* 主面板 */}
         <div className="flex flex-col overflow-hidden flex-1">
-          <PanelCommonHeader actions={props.actions(setRightPanel)}>
+          <PanelCommonHeader
+            actions={props.actions && props.actions(setRightPanel)}
+          >
             {props.header}
           </PanelCommonHeader>
           <div className="flex-1 overflow-hidden">{props.children}</div>

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

@@ -1,4 +1,8 @@
 import { ChatBox } from '@/components/ChatBox';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { UserListItem } from '@/components/UserListItem';
+import { Icon } from '@iconify/react';
+import { Button } from 'antd';
 import React from 'react';
 import {
   ChatConverseState,
@@ -6,20 +10,30 @@ import {
   useAppSelector,
   useDMConverseName,
 } from 'tailchat-shared';
-import { PanelCommonHeader } from '../common/Header';
+import { CommonPanelWrapper } from '../common/Wrapper';
+import _compact from 'lodash/compact';
 
 const ConversePanelHeader: React.FC<{ converse: ChatConverseState }> =
   React.memo(({ converse }) => {
     const name = useDMConverseName(converse);
 
-    return (
+    return t('与 {{name}} 的会话', { name });
-      <PanelCommonHeader actions={[]}>
-        {t('与 {{name}} 的会话', { name })}
-      </PanelCommonHeader>
-    );
   });
 ConversePanelHeader.displayName = 'ConversePanelHeader';
 
+const ConversePanelMembers: React.FC<{ members: string[] }> = React.memo(
+  ({ members }) => {
+    return (
+      <div>
+        {members.map((member) => (
+          <UserListItem key={member} userId={member} />
+        ))}
+      </div>
+    );
+  }
+);
+ConversePanelMembers.displayName = 'ConversePanelMembers';
+
 interface ConversePanelProps {
   converseId: string;
 }
@@ -30,13 +44,37 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
     );
 
     return (
-      <div className="flex flex-col overflow-hidden flex-1">
+      <CommonPanelWrapper
-        {converse && <ConversePanelHeader converse={converse} />}
+        header={converse && <ConversePanelHeader converse={converse} />}
+        actions={(setRightPanel) => {
+          if (!converse) {
+            return [];
+          }
 
-        <div className="flex-1 overflow-hidden">
+          return _compact([
+            // 当成员数大于2时，显示成员列表按钮
+            converse.members.length > 2 && (
+              <Button
+                key="members"
+                icon={
+                  <Icon
+                    className="anticon text-2xl"
+                    icon="mdi:account-supervisor-outline"
+                  />
+                }
+                onClick={() =>
+                  setRightPanel({
+                    name: t('成员'),
+                    panel: <ConversePanelMembers members={converse.members} />,
+                  })
+                }
+              />
+            ),
+          ]);
+        }}
+      >
         <ChatBox converseId={converseId} isGroup={false} />
-        </div>
+      </CommonPanelWrapper>
-      </div>
     );
   }
 );