feat: 增加面板路由，单独打开独立的面板

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

@@ -67,6 +67,7 @@
   "k7437914b": "Panel Group",
   "k744ee9a": "Create Group",
   "k74aef1ad": "Members",
+  "k77d3028d": "Unknown Panel",
   "k78e52ed0": "Accept",
   "k7a2ccf9b": "Search Friends",
   "k7c232f9e": "Panel",
@@ -94,6 +95,7 @@
   "ka01a00eb": "System language",
   "ka0451c97": "Cancel",
   "ka14986f0": "Plugin install successed, need to be restarted to take effect",
+  "ka29e9508": "Send Image",
   "ka2c48894": "Customize your group",
   "ka49ec177": "Input somthing",
   "ka50c7408": "Please enter the JSON information manually, if you are not sure what you are doing, please do not use this function",

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

@@ -67,6 +67,7 @@
   "k7437914b": "面板分组",
   "k744ee9a": "创建群组",
   "k74aef1ad": "成员",
+  "k77d3028d": "未知的面板",
   "k78e52ed0": "接受",
   "k7a2ccf9b": "搜索好友",
   "k7c232f9e": "面板",
@@ -94,6 +95,7 @@
   "ka01a00eb": "系统语言",
   "ka0451c97": "取消",
   "ka14986f0": "插件安装成功, 需要重启后生效",
+  "ka29e9508": "发送图片",
   "ka2c48894": "自定义你的群组",
   "ka49ec177": "输入一些什么",
   "ka50c7408": "请手动输入JSON信息，如果你不明确你在做什么请不要使用该功能",

web/src/App.tsx

@@ -17,6 +17,10 @@ const EntryRoute = Loadable(() =>
   import('./routes/Entry').then((module) => module.EntryRoute)
 );
 
+const PanelRoute = Loadable(() =>
+  import('./routes/Panel').then((module) => module.PanelRoute)
+);
+
 const InviteRoute = Loadable(() =>
   import('./routes/Invite').then((module) => module.InviteRoute)
 );
@@ -76,6 +80,7 @@ export const App: React.FC = React.memo(() => {
         <Switch>
           <Route path="/entry" component={EntryRoute} />
           <Route path="/main" component={MainRoute} />
+          <Route path="/panel" component={PanelRoute} />
           <Route path="/invite/:inviteCode" component={InviteRoute} />
           <Redirect to="/entry" />
         </Switch>

web/src/routes/Main/Provider.tsx

@@ -8,11 +8,11 @@ import {
   t,
 } from 'tailchat-shared';
 import React from 'react';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { Provider as ReduxProvider } from 'react-redux';
-import { getGlobalUserLoginInfo } from '../../utils/user-helper';
+import { getGlobalUserLoginInfo } from '@/utils/user-helper';
 import _isNil from 'lodash/isNil';
-import { getUserJWT } from '../../utils/jwt-helper';
+import { getUserJWT } from '@/utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
 import { PortalHost } from '@/components/Portal';

web/src/routes/Panel/README.md

@@ -0,0 +1 @@
+该文件是用于独立窗口打开面板的功能

web/src/routes/Panel/index.tsx

@@ -0,0 +1,33 @@
+import { useRecordMeasure } from '@/utils/measure-helper';
+import React from 'react';
+import { Route, Switch } from 'react-router';
+import { MainProvider } from '../Main/Provider';
+import { t } from 'tailchat-shared';
+import { PersonalConverse } from '../Main/Content/Personal/Converse';
+import { GroupPanelRender } from '../Main/Content/Group/Panel';
+
+export const PanelRoute: React.FC = React.memo(() => {
+  useRecordMeasure('AppRouteRenderStart');
+
+  return (
+    <div className="flex h-full">
+      <MainProvider>
+        <Switch>
+          <Route
+            exact={true}
+            path="/panel/personal/converse/:converseId"
+            component={PersonalConverse}
+          />
+          <Route
+            exact={true}
+            path="/panel/group/:groupId/:panelId"
+            component={GroupPanelRender}
+          />
+
+          <Route>{t('未知的面板')}</Route>
+        </Switch>
+      </MainProvider>
+    </div>
+  );
+});
+PanelRoute.displayName = 'PanelRoute';