feat: 增加群组面板右键菜单

web/package.json

@@ -27,6 +27,7 @@
     "antd": "^4.18.2",
     "axios": "^0.21.1",
     "clsx": "^1.1.1",
+    "copy-to-clipboard": "^3.3.1",
     "emoji-mart": "^3.0.1",
     "is-hotkey": "^0.2.0",
     "jsonschema": "^1.4.0",

web/src/routes/Main/Content/Group/Sidebar.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
-import {
-  GroupPanel,
-  GroupPanelType,
-  isValidStr,
-  useGroupInfo,
-} from 'tailchat-shared';
+import { GroupPanelType, isValidStr, useGroupInfo } from 'tailchat-shared';
 import { useParams } from 'react-router';
 import { GroupHeader } from './GroupHeader';
 import { GroupSection } from '@/components/GroupSection';
-import { GroupPanelItem } from '@/components/GroupPanelItem';
-import { GroupTextPanelItem } from './TextPanelItem';
 import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
+import { SidebarItem } from './SidebarItem';
 
 interface GroupParams {
   groupId: string;
@@ -24,17 +18,6 @@ export const Sidebar: React.FC = React.memo(() => {
   const groupInfo = useGroupInfo(groupId);
   const groupPanels = groupInfo?.panels ?? [];
 
-  const renderItem = (panel: GroupPanel) =>
-    panel.type === GroupPanelType.TEXT ? (
-      <GroupTextPanelItem groupId={groupId} panel={panel} />
-    ) : (
-      <GroupPanelItem
-        name={panel.name}
-        icon={<div>#</div>}
-        to={`/main/group/${groupId}/${panel.id}`}
-      />
-    );
-
   return (
     <CommonSidebarWrapper data-tc-role="sidebar-group">
       <GroupHeader groupId={groupId} />
@@ -48,11 +31,11 @@ export const Sidebar: React.FC = React.memo(() => {
                 {groupPanels
                   .filter((sub) => sub.parentId === panel.id)
                   .map((sub) => (
-                    <div key={sub.id}>{renderItem(sub)}</div>
+                    <SidebarItem key={sub.id} groupId={groupId} panel={sub} />
                   ))}
               </GroupSection>
             ) : (
-              <div key={panel.id}>{renderItem(panel)}</div>
+              <SidebarItem key={panel.id} groupId={groupId} panel={panel} />
             )
           )}
       </div>

web/src/routes/Main/Content/Group/SidebarItem.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { GroupPanel, GroupPanelType, showToasts, t } from 'tailchat-shared';
+import { GroupPanelItem } from '@/components/GroupPanelItem';
+import { GroupTextPanelItem } from './TextPanelItem';
+import { Dropdown, Menu } from 'antd';
+import copy from 'copy-to-clipboard';
+
+/**
+ * 群组面板侧边栏组件
+ */
+export const SidebarItem: React.FC<{
+  groupId: string;
+  panel: GroupPanel;
+}> = React.memo((props) => {
+  const { groupId, panel } = props;
+
+  const menu = (
+    <Menu>
+      <Menu.Item
+        key="copylink"
+        onClick={() => {
+          copy(`${location.origin}/main/group/${groupId}/${panel.id}`);
+          showToasts(t('已复制到剪切板'));
+        }}
+      >
+        {t('复制链接')}
+      </Menu.Item>
+    </Menu>
+  );
+
+  console.log('Dropdown', Dropdown);
+
+  return (
+    <Dropdown overlay={menu} trigger={['contextMenu']}>
+      <div>
+        {panel.type === GroupPanelType.TEXT ? (
+          <GroupTextPanelItem groupId={groupId} panel={panel} />
+        ) : (
+          <GroupPanelItem
+            name={panel.name}
+            icon={<div>#</div>}
+            to={`/main/group/${groupId}/${panel.id}`}
+          />
+        )}
+      </div>
+    </Dropdown>
+  );
+});
+SidebarItem.displayName = 'SidebarItem';

web/src/routes/Main/Content/Group/TextPanelItem.tsx

@@ -6,6 +6,10 @@ interface GroupTextPanelItemProps {
   groupId: string;
   panel: GroupPanel;
 }
+
+/**
+ * 相比一般的面板项增加了未读提示
+ */
 export const GroupTextPanelItem: React.FC<GroupTextPanelItemProps> = React.memo(
   (props) => {
     const { groupId, panel } = props;