From 2d6c47557422cadf194eb0553386634adcf540d0 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 31 Aug 2021 20:48:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=A2=9E=E5=8A=A0=E5=BD=93?=
 =?UTF-8?q?=E5=89=8D=E7=BE=A4=E7=BB=84=E6=88=90=E5=91=98=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/i18n/langs/en-US/translation.json      |  1 +
 shared/i18n/langs/zh-CN/translation.json      |  1 +
 .../components/Panel/group/MembersPanel.tsx   | 24 +++++++
 web/src/components/Panel/group/Wrapper.tsx    | 67 +++++++++++++++++--
 4 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/Panel/group/MembersPanel.tsx

diff --git a/shared/i18n/langs/en-US/translation.json b/shared/i18n/langs/en-US/translation.json
index a6a24e5d..e7d201dc 100644
--- a/shared/i18n/langs/en-US/translation.json
+++ b/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",
diff --git a/shared/i18n/langs/zh-CN/translation.json b/shared/i18n/langs/zh-CN/translation.json
index 4b4df20a..3e9fee70 100644
--- a/shared/i18n/langs/zh-CN/translation.json
+++ b/shared/i18n/langs/zh-CN/translation.json
@@ -47,6 +47,7 @@
   "k7173d09e": "账户信息",
   "k7437914b": "面板分组",
   "k744ee9a": "创建群组",
+  "k74aef1ad": "成员",
   "k78e52ed0": "接受",
   "k7c232f9e": "面板",
   "k7daefc98": "邀请您加入群组",
diff --git a/web/src/components/Panel/group/MembersPanel.tsx b/web/src/components/Panel/group/MembersPanel.tsx
new file mode 100644
index 00000000..a15051dc
--- /dev/null
+++ b/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';
diff --git a/web/src/components/Panel/group/Wrapper.tsx b/web/src/components/Panel/group/Wrapper.tsx
index 718b0b4c..7f5e8854 100644
--- a/web/src/components/Panel/group/Wrapper.tsx
+++ b/web/src/components/Panel/group/Wrapper.tsx
@@ -1,6 +1,11 @@
-import React from 'react';
-import { useGroupPanel } from 'tailchat-shared';
+import React, { useState } from 'react';
+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">
-        <PanelCommonHeader>{panelInfo.name}</PanelCommonHeader>
-        <div className="flex-1 overflow-hidden">{props.children}</div>
+      <div className="w-full h-full flex">
+        {/* 主面板 */}
+        <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>
     );
   }