perf: 优化在移动端的面板体验

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

@@ -3,6 +3,7 @@ import { PanelCommonHeader } from '../common/Header';
 import { Icon } from '@iconify/react';
 import { Button } from 'antd';
 import clsx from 'clsx';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface RightPanelType {
   name: string;
@@ -21,9 +22,15 @@ interface CommonPanelWrapperProps {
 export const CommonPanelWrapper: React.FC<CommonPanelWrapperProps> = React.memo(
   (props) => {
     const [rightPanel, setRightPanel] = useState<RightPanelType>();
+    const isMobile = useIsMobile();
 
     return (
-      <div className="w-full h-full flex">
+      <div
+        className="w-full h-full flex"
+        style={{
+          minWidth: isMobile && !rightPanel ? 'calc(100vw - 72px)' : 0,
+        }} // NOTICE: 72px为导航栏宽度
+      >
         {/* 主面板 */}
         <div className="flex flex-col overflow-hidden flex-1">
           <PanelCommonHeader

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

@@ -2,7 +2,7 @@ import { ChatBox } from '@/components/ChatBox';
 import { UserListItem } from '@/components/UserListItem';
 import { Icon } from '@iconify/react';
 import { Button, Tooltip } from 'antd';
-import React, { useState } from 'react';
+import React from 'react';
 import {
   ChatConverseState,
   t,
@@ -13,7 +13,6 @@ import { CommonPanelWrapper } from '../common/Wrapper';
 import _compact from 'lodash/compact';
 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';
 

web/src/routes/Main/Content/PageContent.tsx

@@ -43,9 +43,14 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
   const { sidebar, children } = props;
   const { showSidebar, setShowSidebar } = useSidebarContext();
   const isMobile = useIsMobile();
-  const handleHideSidebar = useCallback(() => {
-    setShowSidebar(false);
-  }, []);
+  const handleHideSidebar = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      e.preventDefault();
+      setShowSidebar(false);
+    },
+    []
+  );
 
   useEffect(() => {
     if (isMobile === false) {
@@ -86,7 +91,13 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
       {sidebarEl}
 
       <div
-        className="flex flex-auto bg-content-light dark:bg-content-dark relative overflow-auto"
+        className={clsx(
+          'flex flex-auto bg-content-light dark:bg-content-dark relative',
+          {
+            'overflow-auto': !showMask,
+            'overflow-hidden': showMask,
+          }
+        )}
         data-tc-role={props['data-tc-role']}
       >
         {contentMaskEl}