From f24db563fb2e945fe248e4b35c6297b603c91e56 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 5 Feb 2022 18:57:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=8F=B3=E9=94=AE=E9=9D=A2=E6=9D=BF=E6=AD=A3=E5=9C=A8=E6=96=B0?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=89=93=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Panel/group/PluginPanel.tsx    | 14 +++++++++++++-
 web/src/components/Panel/group/TextPanel.tsx      |  2 +-
 web/src/components/Panel/group/Wrapper.tsx        |  9 +++++++++
 web/src/routes/Main/Content/Group/SidebarItem.tsx |  8 ++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Panel/group/PluginPanel.tsx b/web/src/components/Panel/group/PluginPanel.tsx
index 97d9773a..0318f914 100644
--- a/web/src/components/Panel/group/PluginPanel.tsx
+++ b/web/src/components/Panel/group/PluginPanel.tsx
@@ -2,6 +2,7 @@ import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
 import { Alert } from 'antd';
 import React, { useMemo } from 'react';
 import { isValidStr, useGroupPanel } from 'tailchat-shared';
+import { GroupPanelWrapper } from './Wrapper';
 
 interface GroupPluginPanelProps {
   groupId: string;
@@ -49,9 +50,20 @@ export const GroupPluginPanel: React.FC<GroupPluginPanelProps> = React.memo(
     const Component = pluginPanelInfo.render;
 
     if (!Component) {
+      // 没有找到插件组件
+      // TODO: Fallback
       return null;
     }
-    return <Component />;
+
+    return (
+      <GroupPanelWrapper
+        groupId={props.groupId}
+        panelId={props.panelId}
+        showHeader={false}
+      >
+        <Component />
+      </GroupPanelWrapper>
+    );
   }
 );
 GroupPluginPanel.displayName = 'GroupPluginPanel';
diff --git a/web/src/components/Panel/group/TextPanel.tsx b/web/src/components/Panel/group/TextPanel.tsx
index 5509dbd3..7e9771cd 100644
--- a/web/src/components/Panel/group/TextPanel.tsx
+++ b/web/src/components/Panel/group/TextPanel.tsx
@@ -15,7 +15,7 @@ export const TextPanel: React.FC<TextPanelProps> = React.memo(
     }
 
     return (
-      <GroupPanelWrapper groupId={groupId} panelId={panelId}>
+      <GroupPanelWrapper groupId={groupId} panelId={panelId} showHeader={true}>
         <ChatBox converseId={panelId} isGroup={true} groupId={groupId} />
       </GroupPanelWrapper>
     );
diff --git a/web/src/components/Panel/group/Wrapper.tsx b/web/src/components/Panel/group/Wrapper.tsx
index cbf5dada..a9606bf0 100644
--- a/web/src/components/Panel/group/Wrapper.tsx
+++ b/web/src/components/Panel/group/Wrapper.tsx
@@ -13,6 +13,11 @@ import { IconBtn } from '@/components/IconBtn';
 interface GroupPanelWrapperProps {
   groupId: string;
   panelId: string;
+
+  /**
+   * 是否显示面板头
+   */
+  showHeader: boolean;
 }
 export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
   (props) => {
@@ -28,6 +33,10 @@ export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
       return <OpenedPanelTip onClosePanelWindow={closePanelWindow} />;
     }
 
+    if (!props.showHeader) {
+      return <>{props.children}</>;
+    }
+
     return (
       <CommonPanelWrapper
         header={panelInfo.name}
diff --git a/web/src/routes/Main/Content/Group/SidebarItem.tsx b/web/src/routes/Main/Content/Group/SidebarItem.tsx
index 44f6a039..11bffbb3 100644
--- a/web/src/routes/Main/Content/Group/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/Group/SidebarItem.tsx
@@ -4,6 +4,7 @@ import { GroupPanelItem } from '@/components/GroupPanelItem';
 import { GroupTextPanelItem } from './TextPanelItem';
 import { Dropdown, Menu } from 'antd';
 import copy from 'copy-to-clipboard';
+import { usePanelWindow } from '@/hooks/usePanelWindow';
 
 /**
  * 群组面板侧边栏组件
@@ -13,6 +14,9 @@ export const SidebarItem: React.FC<{
   panel: GroupPanel;
 }> = React.memo((props) => {
   const { groupId, panel } = props;
+  const { hasOpenedPanel, openPanelWindow } = usePanelWindow(
+    `/panel/group/${groupId}/${panel.id}`
+  );
 
   const menu = (
     <Menu>
@@ -25,6 +29,10 @@ export const SidebarItem: React.FC<{
       >
         {t('复制链接')}
       </Menu.Item>
+
+      <Menu.Item disabled={hasOpenedPanel} onClick={openPanelWindow}>
+        {t('在新窗口打开')}
+      </Menu.Item>
     </Menu>
   );