feat: 网页增加外部打开功能

shared/model/group.ts

@@ -16,7 +16,13 @@ export interface GroupMember {
 }
 
 export interface GroupPanel {
-  id: string; // 在群组中唯一
+  /**
+   * 在群组中唯一
+   */
+  id: string;
+  /**
+   * 用于显示的面板名
+   */
   name: string;
   parentId?: string;
   type: GroupPanelType;

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({

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',
+  }),
 };

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<{

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>();

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,
       ])}
     />
   );