refactor: OpenedPanelTip

shared/i18n/langs/en-US/translation.json

@@ -9,6 +9,7 @@
   "k18c716ce": "Password cannot be less than 6 digits",
   "k19885be1": "Panel name is too long",
   "k1b38bb5c": "Register Now",
+  "k1bd56481": "Close independent window",
   "k1cbe2507": "Confirm",
   "k23a3bd72": "Abnormal",
   "k2426e452": "Friend Service",
@@ -61,6 +62,7 @@
   "k67d68dd1": "Type",
   "k68022ee7": "All",
   "k68283d04": "Application sent",
+  "k6b5e7ffe": "The current panel has been opened in a separate window",
   "k6c75d61f": "Modify group avatar success",
   "k6fb230da": "Pending friend request",
   "k7173d09e": "Account",
@@ -70,6 +72,7 @@
   "k77d3028d": "Unknown Panel",
   "k78e52ed0": "Accept",
   "k7a2ccf9b": "Search Friends",
+  "k7a89720": "Open in new window",
   "k7c232f9e": "Panel",
   "k7daefc98": "Invite you to join the group",
   "k7ec9199a": "Friend request waiting for process",

shared/i18n/langs/zh-CN/translation.json

@@ -9,6 +9,7 @@
   "k18c716ce": "密码不能低于6位",
   "k19885be1": "面板名过长",
   "k1b38bb5c": "立即注册",
+  "k1bd56481": "关闭独立窗口",
   "k1cbe2507": "确认",
   "k23a3bd72": "异常",
   "k2426e452": "好友服务",
@@ -61,6 +62,7 @@
   "k67d68dd1": "类型",
   "k68022ee7": "全部",
   "k68283d04": "已发送申请",
+  "k6b5e7ffe": "当前面板已在独立窗口打开",
   "k6c75d61f": "修改群组头像成功",
   "k6fb230da": "等待处理的好友请求",
   "k7173d09e": "账户信息",
@@ -70,6 +72,7 @@
   "k77d3028d": "未知的面板",
   "k78e52ed0": "接受",
   "k7a2ccf9b": "搜索好友",
+  "k7a89720": "在新窗口打开",
   "k7c232f9e": "面板",
   "k7daefc98": "邀请您加入群组",
   "k7ec9199a": "等待对方处理的好友请求",

web/src/components/OpenedPanelTip.tsx

@@ -0,0 +1,27 @@
+import { Button, Result } from 'antd';
+import React from 'react';
+import { t } from 'tailchat-shared';
+
+interface OpenedPanelTipProps {
+  onClosePanelWindow: () => void;
+}
+
+/**
+ * 该面板已被打开提示
+ */
+export const OpenedPanelTip: React.FC<OpenedPanelTipProps> = React.memo(
+  (props) => {
+    return (
+      <Result
+        className="w-full"
+        title={t('当前面板已在独立窗口打开')}
+        extra={
+          <Button onClick={props.onClosePanelWindow}>
+            {t('关闭独立窗口')}
+          </Button>
+        }
+      />
+    );
+  }
+);
+OpenedPanelTip.displayName = 'OpenedPanelTip';

web/src/components/Panel/personal/ConversePanel.tsx

@@ -15,6 +15,7 @@ import { openModal } from '@/components/Modal';
 import { AppendDMConverseMembers } from '@/components/modals/AppendDMConverseMembers';
 import { openInNewWindow, panelWindowManager } from '@/utils/window-helper';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
+import { OpenedPanelTip } from '@/components/OpenedPanelTip';
 
 const ConversePanelTitle: React.FC<{ converse: ChatConverseState }> =
   React.memo(({ converse }) => {
@@ -49,12 +50,7 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
     const { hasOpenedPanel, openPanelWindow, closePanelWindow } =
       usePanelWindow(`/panel/personal/converse/${converseId}`);
     if (hasOpenedPanel) {
-      return (
-        <div>
-          <div>{t('面板已在独立窗口打开')}</div>
-          <Button onClick={closePanelWindow}>{t('关闭独立窗口')}</Button>
-        </div>
-      );
+      return <OpenedPanelTip onClosePanelWindow={closePanelWindow} />;
     }
 
     return (