From cca3e2633a5691905cc2dcee1e08b8406c6fd1b0 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 10 Dec 2022 17:47:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=95=B0=E9=87=8F=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Panel/group/Wrapper.tsx    | 19 +++++++++++--------
 .../Panel/personal/ConversePanel.tsx          |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/web/src/components/Panel/group/Wrapper.tsx b/client/web/src/components/Panel/group/Wrapper.tsx
index 3259fc15..38622b33 100644
--- a/client/web/src/components/Panel/group/Wrapper.tsx
+++ b/client/web/src/components/Panel/group/Wrapper.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo } from 'react';
-import { t, useGroupPanelInfo } from 'tailchat-shared';
+import { t, useGroupInfo, useGroupPanelInfo } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
 import { MembersPanel } from './MembersPanel';
 import { CommonPanelWrapper } from '../common/Wrapper';
@@ -43,18 +43,21 @@ interface GroupPanelWrapperProps extends PropsWithChildren {
 }
 export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
   (props) => {
-    const panelInfo = useGroupPanelInfo(props.groupId, props.panelId);
-    useRecordGroupPanel(props.groupId, props.panelId);
+    const { groupId, panelId } = props;
+    const groupInfo = useGroupInfo(groupId);
+    const panelInfo = useGroupPanelInfo(groupId, panelId);
+    const groupMemberCount = (groupInfo?.members ?? []).length;
+    useRecordGroupPanel(groupId, panelId);
 
     const { hasOpenedPanel, openPanelWindow, closePanelWindow } =
-      usePanelWindow(`/panel/group/${props.groupId}/${props.panelId}`);
+      usePanelWindow(`/panel/group/${groupId}/${panelId}`);
 
     const groupPanelContextValue = useMemo(
       () => ({
-        groupId: props.groupId,
-        panelId: props.panelId,
+        groupId,
+        panelId,
       }),
-      [props.groupId, props.panelId]
+      [groupId, panelId]
     );
 
     if (_isNil(panelInfo)) {
@@ -114,7 +117,7 @@ export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
               iconClassName="text-2xl"
               onClick={() =>
                 setRightPanel({
-                  name: t('成员'),
+                  name: t('成员') + ` (${groupMemberCount})`,
                   panel: <MembersPanel groupId={props.groupId} />,
                 })
               }
diff --git a/client/web/src/components/Panel/personal/ConversePanel.tsx b/client/web/src/components/Panel/personal/ConversePanel.tsx
index 874d7e5f..fbe4eff7 100644
--- a/client/web/src/components/Panel/personal/ConversePanel.tsx
+++ b/client/web/src/components/Panel/personal/ConversePanel.tsx
@@ -129,7 +129,7 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
                 iconClassName="text-2xl"
                 onClick={() =>
                   setRightPanel({
-                    name: t('成员'),
+                    name: t('成员') + ` (${converse.members.length})`,
                     panel: <ConversePanelMembers members={converse.members} />,
                   })
                 }