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',
+          label: t('复制链接'),
+          icon: <Icon icon="mdi:content-copy" />,
+          onClick: () => {
             copy(`${location.origin}/main/group/${groupId}/${panel.id}`);
             showToasts(t('已复制到剪切板'));
-        }}
+          },
-      >
+        },
-        {t('复制链接')}
+        {
-      </Menu.Item>
+          key: 'new',
-
+          label: t('在新窗口打开'),
-      <Menu.Item
+          icon: <Icon icon="mdi:dock-window" />,
-        icon={<Icon icon="mdi:dock-window" />}
+          disabled: hasOpenedPanel,
-        disabled={hasOpenedPanel}
+          onClick: openPanelWindow,
-        onClick={openPanelWindow}
+        },
-      >
+        isPinned
-        {t('在新窗口打开')}
+          ? {
-      </Menu.Item>
+              key: 'unpin',
-
+              label: t('Unpin'),
-      {isPinned ? (
+              icon: <Icon icon="mdi:pin-off" />,
-        <Menu.Item
+              onClick: () => {
-          icon={<Icon icon="mdi:pin-off" />}
-          onClick={() => {
                 dispatch(
                   groupActions.unpinGroupPanel({
                     groupId,
                   })
                 );
-          }}
+              },
-        >
+            }
-          {t('Unpin')}
+          : {
-        </Menu.Item>
+              key: 'pin',
-      ) : (
+              label: t('Pin'),
-        <Menu.Item
+              icon: <Icon icon="mdi:pin" />,
-          icon={<Icon icon="mdi:pin" />}
+              onClick: () => {
-          onClick={() => {
                 dispatch(
                   groupActions.pinGroupPanel({
                     groupId,
                     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" />;