refactor: 抽象面板包装器逻辑,使其可以方便复用

web/src/components/Panel/common/Wrapper.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { PanelCommonHeader } from '../common/Header';
+import { Icon } from '@iconify/react';
+import { Button } from 'antd';
+import clsx from 'clsx';
+
+interface RightPanelType {
+  name: string;
+  panel: React.ReactNode;
+}
+
+/**
+ * 面板通用包装器
+ */
+interface CommonPanelWrapperProps {
+  header: React.ReactNode;
+  actions: (
+    setRightPanel: (info: RightPanelType) => void
+  ) => React.ReactElement[];
+}
+export const CommonPanelWrapper: React.FC<CommonPanelWrapperProps> = React.memo(
+  (props) => {
+    const [rightPanel, setRightPanel] = useState<RightPanelType>();
+
+    return (
+      <div className="w-full h-full flex">
+        {/* 主面板 */}
+        <div className="flex flex-col overflow-hidden flex-1">
+          <PanelCommonHeader actions={props.actions(setRightPanel)}>
+            {props.header}
+          </PanelCommonHeader>
+          <div className="flex-1 overflow-hidden">{props.children}</div>
+        </div>
+
+        {/* 右侧面板 */}
+        <div
+          className={clsx(
+            'transition-all overflow-hidden border-l border-black border-opacity-20',
+            {
+              'w-96 mobile:w-full': rightPanel,
+              'w-0': !rightPanel,
+            }
+          )}
+        >
+          <PanelCommonHeader
+            actions={[
+              // 关闭按钮
+              <Button
+                key="close"
+                icon={<Icon className="anticon text-2xl" icon="mdi:close" />}
+                onClick={() => setRightPanel(undefined)}
+              />,
+            ]}
+          >
+            {rightPanel?.name}
+          </PanelCommonHeader>
+          {rightPanel?.panel}
+        </div>
+      </div>
+    );
+  }
+);
+CommonPanelWrapper.displayName = 'CommonPanelWrapper';

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

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { t, useGroupPanel } from 'tailchat-shared';
-import { PanelCommonHeader } from '../common/Header';
 import _isNil from 'lodash/isNil';
 import { Icon } from '@iconify/react';
 import { Button } from 'antd';
 import { MembersPanel } from './MembersPanel';
-import clsx from 'clsx';
+import { CommonPanelWrapper } from '../common/Wrapper';
 
 /**
  * 群组面板通用包装器
@@ -17,65 +16,34 @@ interface GroupPanelWrapperProps {
 export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
   (props) => {
     const panelInfo = useGroupPanel(props.groupId, props.panelId);
-    const [rightPanel, setRightPanel] =
-      useState<{ name: string; panel: React.ReactNode }>();
 
     if (_isNil(panelInfo)) {
       return null;
     }
 
     return (
-      <div className="w-full h-full flex">
+      <CommonPanelWrapper
-        {/* 主面板 */}
+        header={panelInfo.name}
-        <div className="flex flex-col overflow-hidden flex-1">
+        actions={(setRightPanel) => [
-          <PanelCommonHeader
+          <Button
-            actions={[
+            key="members"
-              <Button
+            icon={
-                key="members"
+              <Icon
-                icon={
+                className="anticon text-2xl"
-                  <Icon
+                icon="mdi:account-supervisor-outline"
-                    className="anticon text-2xl"
+              />
-                    icon="mdi:account-supervisor-outline"
+            }
-                  />
+            onClick={() =>
-                }
+              setRightPanel({
-                onClick={() =>
+                name: t('成员'),
-                  setRightPanel({
+                panel: <MembersPanel groupId={props.groupId} />,
-                    name: t('成员'),
+              })
-                    panel: <MembersPanel groupId={props.groupId} />,
-                  })
-                }
-              />,
-            ]}
-          >
-            {panelInfo.name}
-          </PanelCommonHeader>
-          <div className="flex-1 overflow-hidden">{props.children}</div>
-        </div>
-
-        {/* 右侧面板 */}
-        <div
-          className={clsx(
-            'transition-all overflow-hidden border-l border-black border-opacity-20',
-            {
-              'w-96 mobile:w-full': rightPanel,
-              'w-0': !rightPanel,
             }
-          )}
+          />,
-        >
+        ]}
-          <PanelCommonHeader
+      >
-            actions={[
+        {props.children}
-              <Button
+      </CommonPanelWrapper>
-                key="members"
-                icon={<Icon className="anticon text-2xl" icon="mdi:close" />}
-                onClick={() => setRightPanel(undefined)}
-              />,
-            ]}
-          >
-            {rightPanel?.name}
-          </PanelCommonHeader>
-          {rightPanel?.panel}
-        </div>
-      </div>
     );
   }
 );

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

@@ -7,8 +7,6 @@ import {
   useDMConverseName,
 } from 'tailchat-shared';
 import { PanelCommonHeader } from '../common/Header';
-import _isNil from 'lodash/isNil';
-import { LoadingSpinner } from '@/components/LoadingSpinner';
 
 const ConversePanelHeader: React.FC<{ converse: ChatConverseState }> =
   React.memo(({ converse }) => {