refactor: group sidebar item 的menu修改为新的antd写法

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
-      <Menu.Item
+      items={_compact([
-        icon={<Icon icon="mdi:content-copy" />}
+        {
-        onClick={() => {
+          key: 'copy',
-          copy(`${location.origin}/main/group/${groupId}/${panel.id}`);
+          label: t('复制链接'),
-          showToasts(t('已复制到剪切板'));
+          icon: <Icon icon="mdi:content-copy" />,
-        }}
+          onClick: () => {
-      >
+            copy(`${location.origin}/main/group/${groupId}/${panel.id}`);
-        {t('复制链接')}
+            showToasts(t('已复制到剪切板'));
-      </Menu.Item>
+          },
-
+        },
-      <Menu.Item
+        {
-        icon={<Icon icon="mdi:dock-window" />}
+          key: 'new',
-        disabled={hasOpenedPanel}
+          label: t('在新窗口打开'),
-        onClick={openPanelWindow}
+          icon: <Icon icon="mdi:dock-window" />,
-      >
+          disabled: hasOpenedPanel,
-        {t('在新窗口打开')}
+          onClick: openPanelWindow,
-      </Menu.Item>
+        },
-
+        isPinned
-      {isPinned ? (
+          ? {
-        <Menu.Item
+              key: 'unpin',
-          icon={<Icon icon="mdi:pin-off" />}
+              label: t('Unpin'),
-          onClick={() => {
+              icon: <Icon icon="mdi:pin-off" />,
-            dispatch(
+              onClick: () => {
-              groupActions.unpinGroupPanel({
+                dispatch(
-                groupId,
+                  groupActions.unpinGroupPanel({
-              })
+                    groupId,
-            );
+                  })
-          }}
+                );
-        >
+              },
-          {t('Unpin')}
+            }
-        </Menu.Item>
+          : {
-      ) : (
+              key: 'pin',
-        <Menu.Item
+              label: t('Pin'),
-          icon={<Icon icon="mdi:pin" />}
+              icon: <Icon icon="mdi:pin" />,
-          onClick={() => {
+              onClick: () => {
-            dispatch(
+                dispatch(
-              groupActions.pinGroupPanel({
+                  groupActions.pinGroupPanel({
-                groupId,
+                    groupId,
-                panelId: panel.id,
+                    panelId: panel.id,
-              })
+                  })
-            );
+                );
-          }}
+              },
-        >
+            },
-          {t('Pin')}
+        panel.type === GroupPanelType.TEXT && {
-        </Menu.Item>
+          key: 'copy',
-      )}
+          label: t('标记为已读'),
-
+          icon: <Icon icon="mdi:message-badge-outline" />,
-      {panel.type === GroupPanelType.TEXT && (
+          onClick: markConverseAllAck,
-        <GroupAckMenuItem panelId={panel.id} />
+        },
-      )}
+      ])}
-    </Menu>
+    />
   );
 
   const icon = isPinned ? <Icon icon="mdi:pin" /> : <Icon icon="mdi:pound" />;