From afb7b661ee14a5ea0e77858db6ee447c42172c6a Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Wed, 11 Dec 2024 21:17:46 +0800
Subject: [PATCH] feat: Implement chat page state management in layout and
 sidebar

- Added `isChatPage` state to the Style context to manage chat page layout.
- Updated `PageLayout` component to adjust padding based on the chat page state.
- Enhanced `SiderBar` component to dispatch chat page state changes when chat-related items are selected.
---
 web/src/components/PageLayout.js | 2 +-
 web/src/components/SiderBar.js   | 5 +++++
 web/src/context/Style/index.js   | 4 ++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index 06f31f06..ac9dc990 100644
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -23,7 +23,7 @@ const PageLayout = () => {
         </Sider>
         <Layout>
           <Content
-            style={{ overflowY: 'auto', padding: '24px' }}
+            style={{ overflowY: 'auto', padding: styleState.isChatPage? '0': '24px' }}
           >
             <App />
           </Content>
diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index 58fea10d..26570a0d 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -279,6 +279,11 @@ const SiderBar = () => {
         }}
         items={headerButtons}
         onSelect={(key) => {
+          if (key.itemKey.toString().startsWith('chat')) {
+            styleDispatch({ type: 'SET_CHAT_PAGE', payload: true });
+          } else {
+            styleDispatch({ type: 'SET_CHAT_PAGE', payload: false });
+          }
           setSelectedKeys([key.itemKey]);
         }}
         footer={
diff --git a/web/src/context/Style/index.js b/web/src/context/Style/index.js
index 341fa912..9b264717 100644
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
     isMobile: false,
     showSider: false,
+    isChatPage: false,
   });
 
   const dispatch = (action) => {
@@ -25,6 +26,9 @@ export const StyleProvider = ({ children }) => {
         case 'SET_MOBILE':
           setState(prev => ({ ...prev, isMobile: action.payload }));
           break;
+        case 'SET_CHAT_PAGE':
+          setState(prev => ({ ...prev, isChatPage: action.payload }));
+          break;
         default:
           setState(prev => ({ ...prev, ...action }));
       }