refactor: 群组面板界面

shared/index.tsx

@@ -69,7 +69,7 @@ export {
 export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
 export { useDMConverseList } from './redux/hooks/useConverse';
 export { useConverseMessage } from './redux/hooks/useConverseMessage';
-export { useGroupInfo } from './redux/hooks/useGroup';
+export { useGroupInfo, useGroupPanel } from './redux/hooks/useGroup';
 export { useUserId } from './redux/hooks/useUserInfo';
 export { userActions } from './redux/slices';
 export type { ChatConverseState } from './redux/slices/chat';

shared/redux/hooks/useGroup.ts

@@ -1,4 +1,5 @@
-import type { GroupInfo } from '../../model/group';
+import { useMemo } from 'react';
+import type { GroupInfo, GroupPanel } from '../../model/group';
 import { useAppSelector } from './useAppSelector';
 
 /**
@@ -7,3 +8,18 @@ import { useAppSelector } from './useAppSelector';
 export function useGroupInfo(groupId: string): GroupInfo | undefined {
   return useAppSelector((state) => state.group.groups[groupId]);
 }
+
+/**
+ * 获取群组面板信息
+ */
+export function useGroupPanel(
+  groupId: string,
+  panelId: string
+): GroupPanel | undefined {
+  const groupInfo = useGroupInfo(groupId);
+
+  return useMemo(
+    () => groupInfo?.panels.find((p) => p.id === panelId),
+    [groupInfo, panelId]
+  );
+}

web/src/components/Panel/group/TextPanel.tsx

@@ -0,0 +1,11 @@
+import { ChatBox } from '@/components/ChatBox';
+import React from 'react';
+
+interface TextPanelProps {
+  panelId: string;
+}
+export const TextPanel: React.FC<TextPanelProps> = React.memo(({ panelId }) => {
+  // return <ChatBox converseId={panelId} />;
+  return <div>TODO: panelId: {panelId}</div>;
+});
+TextPanel.displayName = 'TextPanel';

web/src/routes/Main/Content/Group/Panel.tsx

@@ -0,0 +1,25 @@
+import { TextPanel } from '@/components/Panel/group/TextPanel';
+import { Alert } from 'antd';
+import React from 'react';
+import { useParams } from 'react-router';
+import { GroupPanelType, useGroupPanel } from 'tailchat-shared';
+
+export const GroupPanelRender: React.FC = React.memo(() => {
+  const { groupId, panelId } = useParams<{
+    groupId: string;
+    panelId: string;
+  }>();
+
+  const panelInfo = useGroupPanel(groupId, panelId);
+
+  if (panelInfo === undefined) {
+    return null;
+  }
+
+  if (panelInfo.type === GroupPanelType.TEXT) {
+    return <TextPanel panelId={panelInfo.id} />;
+  }
+
+  return <Alert message="未知的面板类型" />;
+});
+GroupPanelRender.displayName = 'GroupPanelRender';

web/src/routes/Main/Content/Group/index.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 import { PageContent } from '../PageContent';
+import { GroupPanelRender } from './Panel';
 import { Sidebar } from './Sidebar';
 
 export const Group: React.FC = React.memo(() => {
   return (
     <PageContent sidebar={<Sidebar />}>
-      <div>TODO</div>
+      <Switch>
+        <Route
+          path="/main/group/:groupId/:panelId"
+          component={GroupPanelRender}
+        />
+      </Switch>
     </PageContent>
   );
 });