feat(web): 增加当前群组成员列表

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

@@ -47,6 +47,7 @@
   "k7173d09e": "Account",
   "k7437914b": "Panel Group",
   "k744ee9a": "Create Group",
+  "k74aef1ad": "Members",
   "k78e52ed0": "Accept",
   "k7c232f9e": "Panel",
   "k7daefc98": "Invite you to join the group",

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

@@ -47,6 +47,7 @@
   "k7173d09e": "账户信息",
   "k7437914b": "面板分组",
   "k744ee9a": "创建群组",
+  "k74aef1ad": "成员",
   "k78e52ed0": "接受",
   "k7c232f9e": "面板",
   "k7daefc98": "邀请您加入群组",

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

@@ -0,0 +1,24 @@
+import { UserListItem } from '@/components/UserListItem';
+import React from 'react';
+import { useGroupInfo } from '../../../../../shared';
+
+interface MembersPanelProps {
+  groupId: string;
+}
+
+/**
+ * 用户面板
+ */
+export const MembersPanel: React.FC<MembersPanelProps> = React.memo((props) => {
+  const groupInfo = useGroupInfo(props.groupId);
+  const members = groupInfo?.members ?? [];
+
+  return (
+    <div>
+      {members.map((member) => (
+        <UserListItem key={member.userId} userId={member.userId} />
+      ))}
+    </div>
+  );
+});
+MembersPanel.displayName = 'MembersPanel';

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

@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { useGroupPanel } from 'tailchat-shared';
+import { t, useGroupPanel } from 'tailchat-shared';
 import { PanelCommonHeader } from '../common/Header';
+import _isNil from 'lodash/isNil';
+import { Icon } from '@iconify/react';
+import { Button } from 'antd';
+import { MembersPanel } from './MembersPanel';
+import clsx from 'clsx';
 
 /**
  * 群组面板通用包装器
@@ -12,14 +17,64 @@ interface GroupPanelWrapperProps {
 export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
   (props) => {
     const panelInfo = useGroupPanel(props.groupId, props.panelId);
-    if (panelInfo === undefined) {
+    const [rightPanel, setRightPanel] =
+      useState<{ name: string; panel: React.ReactNode }>();
+
+    if (_isNil(panelInfo)) {
       return null;
     }
 
     return (
-      <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="w-full h-full flex">
-        <PanelCommonHeader>{panelInfo.name}</PanelCommonHeader>
+        {/* 主面板 */}
-        <div className="flex-1 overflow-hidden">{props.children}</div>
+        <div className="flex flex-col overflow-hidden flex-1">
+          <PanelCommonHeader
+            actions={[
+              <Button
+                key="members"
+                icon={
+                  <Icon
+                    className="anticon text-2xl"
+                    icon="mdi:account-supervisor-outline"
+                  />
+                }
+                onClick={() =>
+                  setRightPanel({
+                    name: t('成员'),
+                    panel: <MembersPanel groupId={props.groupId} />,
+                  })
+                }
+              />,
+            ]}
+          >
+            {panelInfo.name}
+          </PanelCommonHeader>
+          <div className="flex-1 overflow-hidden">{props.children}</div>
+        </div>
+
+        {/* 右侧面板 */}
+        <div
+          className={clsx(
+            'transition-all overflow-hidden border-l border-black border-opacity-20',
+            {
+              'w-96': rightPanel,
+              'w-0': !rightPanel,
+            }
+          )}
+        >
+          <PanelCommonHeader
+            actions={[
+              <Button
+                key="members"
+                icon={<Icon className="anticon text-2xl" icon="mdi:close" />}
+                onClick={() => setRightPanel(undefined)}
+              />,
+            ]}
+          >
+            {rightPanel?.name}
+          </PanelCommonHeader>
+          {rightPanel?.panel}
+        </div>
       </div>
     );
   }