From 14c7d5a4e42a059d45f38bf80b7cc9b2088cb12b Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 6 Aug 2022 17:32:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20group=20sidebar=20item=20=E7=9A=84m?=
 =?UTF-8?q?enu=E4=BF=AE=E6=94=B9=E4=B8=BA=E6=96=B0=E7=9A=84antd=E5=86=99?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../routes/Main/Content/Group/SidebarItem.tsx | 126 ++++++++----------
 1 file changed, 55 insertions(+), 71 deletions(-)

diff --git a/web/src/routes/Main/Content/Group/SidebarItem.tsx b/web/src/routes/Main/Content/Group/SidebarItem.tsx
index f10ec2a4..a20d2e20 100644
--- a/web/src/routes/Main/Content/Group/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/Group/SidebarItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   groupActions,
   GroupPanel,
@@ -16,26 +16,9 @@ import { Dropdown, Menu } from 'antd';
 import copy from 'copy-to-clipboard';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
+import _compact from 'lodash/compact';
 import { Icon } from '@/components/Icon';
 
-const GroupAckMenuItem: React.FC<{
-  panelId: string;
-}> = (props) => {
-  const { markConverseAllAck } = useConverseAck(props.panelId);
-
-  return (
-    <Menu.Item
-      icon={<Icon icon="mdi:message-badge-outline" />}
-      onClick={() => {
-        markConverseAllAck();
-      }}
-    >
-      {t('标记为已读')}
-    </Menu.Item>
-  );
-};
-GroupAckMenuItem.displayName = 'GroupAckMenuItem';
-
 /**
  * 群组面板侧边栏组件
  */
@@ -49,6 +32,7 @@ export const SidebarItem: React.FC<{
   );
   const groupInfo = useGroupInfo(groupId);
   const dispatch = useAppDispatch();
+  const { markConverseAllAck } = useConverseAck(panel.id);
 
   if (!groupInfo) {
     return <LoadingSpinner />;
@@ -58,58 +42,58 @@ export const SidebarItem: React.FC<{
     isValidStr(groupInfo.pinnedPanelId) && groupInfo.pinnedPanelId === panel.id;
 
   const menu = (
-    <Menu>
-      <Menu.Item
-        icon={<Icon icon="mdi:content-copy" />}
-        onClick={() => {
-          copy(`${location.origin}/main/group/${groupId}/${panel.id}`);
-          showToasts(t('已复制到剪切板'));
-        }}
-      >
-        {t('复制链接')}
-      </Menu.Item>
-
-      <Menu.Item
-        icon={<Icon icon="mdi:dock-window" />}
-        disabled={hasOpenedPanel}
-        onClick={openPanelWindow}
-      >
-        {t('在新窗口打开')}
-      </Menu.Item>
-
-      {isPinned ? (
-        <Menu.Item
-          icon={<Icon icon="mdi:pin-off" />}
-          onClick={() => {
-            dispatch(
-              groupActions.unpinGroupPanel({
-                groupId,
-              })
-            );
-          }}
-        >
-          {t('Unpin')}
-        </Menu.Item>
-      ) : (
-        <Menu.Item
-          icon={<Icon icon="mdi:pin" />}
-          onClick={() => {
-            dispatch(
-              groupActions.pinGroupPanel({
-                groupId,
-                panelId: panel.id,
-              })
-            );
-          }}
-        >
-          {t('Pin')}
-        </Menu.Item>
-      )}
-
-      {panel.type === GroupPanelType.TEXT && (
-        <GroupAckMenuItem panelId={panel.id} />
-      )}
-    </Menu>
+    <Menu
+      items={_compact([
+        {
+          key: 'copy',
+          label: t('复制链接'),
+          icon: <Icon icon="mdi:content-copy" />,
+          onClick: () => {
+            copy(`${location.origin}/main/group/${groupId}/${panel.id}`);
+            showToasts(t('已复制到剪切板'));
+          },
+        },
+        {
+          key: 'new',
+          label: t('在新窗口打开'),
+          icon: <Icon icon="mdi:dock-window" />,
+          disabled: hasOpenedPanel,
+          onClick: openPanelWindow,
+        },
+        isPinned
+          ? {
+              key: 'unpin',
+              label: t('Unpin'),
+              icon: <Icon icon="mdi:pin-off" />,
+              onClick: () => {
+                dispatch(
+                  groupActions.unpinGroupPanel({
+                    groupId,
+                  })
+                );
+              },
+            }
+          : {
+              key: 'pin',
+              label: t('Pin'),
+              icon: <Icon icon="mdi:pin" />,
+              onClick: () => {
+                dispatch(
+                  groupActions.pinGroupPanel({
+                    groupId,
+                    panelId: panel.id,
+                  })
+                );
+              },
+            },
+        panel.type === GroupPanelType.TEXT && {
+          key: 'copy',
+          label: t('标记为已读'),
+          icon: <Icon icon="mdi:message-badge-outline" />,
+          onClick: markConverseAllAck,
+        },
+      ])}
+    />
   );
 
   const icon = isPinned ? <Icon icon="mdi:pin" /> : <Icon icon="mdi:pound" />;