From de50da08d474288a8d9cdc8624a5e9eadab5877e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 6 Aug 2022 19:52:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E9=A1=B5=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=96=E9=83=A8=E6=89=93=E5=BC=80=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/model/group.ts                         |  8 +++-
 web/plugins/com.msgbyte.webview/src/index.tsx | 12 ++++++
 .../com.msgbyte.webview/src/translate.ts      |  4 ++
 web/src/components/GroupPanelItem.tsx         |  2 +-
 web/src/plugin/common/reg.ts                  | 10 +++++
 .../routes/Main/Content/Group/SidebarItem.tsx | 37 +++++++++++++++++++
 6 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/shared/model/group.ts b/shared/model/group.ts
index dfd482bd..0fb59075 100644
--- a/shared/model/group.ts
+++ b/shared/model/group.ts
@@ -16,7 +16,13 @@ export interface GroupMember {
 }
 
 export interface GroupPanel {
-  id: string; // 在群组中唯一
+  /**
+   * 在群组中唯一
+   */
+  id: string;
+  /**
+   * 用于显示的面板名
+   */
   name: string;
   parentId?: string;
   type: GroupPanelType;
diff --git a/web/plugins/com.msgbyte.webview/src/index.tsx b/web/plugins/com.msgbyte.webview/src/index.tsx
index 6e79c428..2c7f7c1e 100644
--- a/web/plugins/com.msgbyte.webview/src/index.tsx
+++ b/web/plugins/com.msgbyte.webview/src/index.tsx
@@ -15,6 +15,18 @@ regGroupPanel({
     },
   ],
   render: Loadable(() => import('./group/GroupWebPanelRender')),
+  menus: [
+    {
+      name: 'openInNewWindow',
+      label: Translate.openInExtra,
+      icon: 'mdi:web',
+      onClick: (panelInfo) => {
+        if (panelInfo.meta?.url) {
+          window.open(String(panelInfo.meta?.url));
+        }
+      },
+    },
+  ],
 });
 
 regGroupPanel({
diff --git a/web/plugins/com.msgbyte.webview/src/translate.ts b/web/plugins/com.msgbyte.webview/src/translate.ts
index 57c9fc81..49d165f5 100644
--- a/web/plugins/com.msgbyte.webview/src/translate.ts
+++ b/web/plugins/com.msgbyte.webview/src/translate.ts
@@ -22,4 +22,8 @@ export const Translate = {
     'zh-CN': 'HTML代码',
     'en-US': 'HTML Code',
   }),
+  openInExtra: localTrans({
+    'zh-CN': '在外部打开',
+    'en-US': 'Open in extra',
+  }),
 };
diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx
index 2cb8dc72..990643cb 100644
--- a/web/src/components/GroupPanelItem.tsx
+++ b/web/src/components/GroupPanelItem.tsx
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 
 /**
- * 面板项
+ * 群组面板项
  * 用于侧边栏
  */
 export const GroupPanelItem: React.FC<{
diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts
index c2d87081..0f87d4ca 100644
--- a/web/src/plugin/common/reg.ts
+++ b/web/src/plugin/common/reg.ts
@@ -74,6 +74,16 @@ export interface PluginGroupPanel {
    * 该面板如何渲染
    */
   render: React.ComponentType<{ panelInfo: GroupPanel }>;
+
+  /**
+   * 面板项右键菜单
+   */
+  menus?: {
+    name: string;
+    label: string;
+    icon?: string;
+    onClick: (panelInfo: GroupPanel) => void;
+  }[];
 }
 export const [pluginGroupPanel, regGroupPanel] =
   buildRegList<PluginGroupPanel>();
diff --git a/web/src/routes/Main/Content/Group/SidebarItem.tsx b/web/src/routes/Main/Content/Group/SidebarItem.tsx
index a20d2e20..e378986a 100644
--- a/web/src/routes/Main/Content/Group/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/Group/SidebarItem.tsx
@@ -18,6 +18,41 @@ import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import _compact from 'lodash/compact';
 import { Icon } from '@/components/Icon';
+import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
+import type { ItemType } from 'antd/lib/menu/hooks/useItems';
+
+/**
+ * 获取来自插件的菜单项
+ */
+function useExtraMenuItems(panel: GroupPanel): ItemType[] {
+  const pluginPanelInfo = useMemo(
+    () =>
+      panel.pluginPanelName && findPluginPanelInfoByName(panel.pluginPanelName),
+    [panel.pluginPanelName]
+  );
+  if (!pluginPanelInfo) {
+    return [];
+  }
+
+  if (
+    Array.isArray(pluginPanelInfo.menus) &&
+    pluginPanelInfo.menus.length > 0
+  ) {
+    return [
+      {
+        type: 'divider',
+      },
+      ...pluginPanelInfo.menus.map((item) => ({
+        key: item.name,
+        label: item.label,
+        icon: item.icon ? <Icon icon={item.icon} /> : undefined,
+        onClick: () => item.onClick(panel),
+      })),
+    ];
+  }
+
+  return [];
+}
 
 /**
  * 群组面板侧边栏组件
@@ -33,6 +68,7 @@ export const SidebarItem: React.FC<{
   const groupInfo = useGroupInfo(groupId);
   const dispatch = useAppDispatch();
   const { markConverseAllAck } = useConverseAck(panel.id);
+  const extraMenuItems = useExtraMenuItems(panel);
 
   if (!groupInfo) {
     return <LoadingSpinner />;
@@ -92,6 +128,7 @@ export const SidebarItem: React.FC<{
           icon: <Icon icon="mdi:message-badge-outline" />,
           onClick: markConverseAllAck,
         },
+        ...extraMenuItems,
       ])}
     />
   );