From c624b7a7b3f38ee5b277c5a1904c0b1fa58b2c11 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 12 Nov 2021 10:36:22 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=9C=A8=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E7=9A=84=E9=9D=A2=E6=9D=BF=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Panel/common/Wrapper.tsx   |  9 ++++++++-
 .../Panel/personal/ConversePanel.tsx          |  3 +--
 web/src/routes/Main/Content/PageContent.tsx   | 19 +++++++++++++++----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/web/src/components/Panel/common/Wrapper.tsx b/web/src/components/Panel/common/Wrapper.tsx
index 35bf0ce7..3722c591 100644
--- a/web/src/components/Panel/common/Wrapper.tsx
+++ b/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
diff --git a/web/src/components/Panel/personal/ConversePanel.tsx b/web/src/components/Panel/personal/ConversePanel.tsx
index 67600b03..9d8885cf 100644
--- a/web/src/components/Panel/personal/ConversePanel.tsx
+++ b/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';
 
diff --git a/web/src/routes/Main/Content/PageContent.tsx b/web/src/routes/Main/Content/PageContent.tsx
index 8904248b..2aa98516 100644
--- a/web/src/routes/Main/Content/PageContent.tsx
+++ b/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}