From 28fa77cc921dd4d65dc88f4baeec3afde37bd19c Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Wed, 11 Dec 2024 23:08:52 +0800
Subject: [PATCH] feat: Refactor style management for inner padding in layout
 components

- Updated HeaderBar, PageLayout, and SiderBar components to manage inner padding state based on selected items.
- Replaced `isChatPage` state with `shouldInnerPadding` in Style context for better clarity and functionality.
- Enhanced user experience by dynamically adjusting content padding based on navigation selections.
---
 web/src/components/HeaderBar.js  | 2 ++
 web/src/components/PageLayout.js | 2 +-
 web/src/components/SiderBar.js   | 4 ++--
 web/src/context/Style/index.js   | 6 +++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index fc879ee1..039697b9 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -118,8 +118,10 @@ const HeaderBar = () => {
               return (
                 <div onClick={(e) => {
                   if (props.itemKey === 'home') {
+                    styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
                     styleDispatch({ type: 'SET_SIDER', payload: true });
                   } else {
+                    styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
                     styleDispatch({ type: 'SET_SIDER', payload: false });
                   }
                 }}>
diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index ac9dc990..6a8a9f1f 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: styleState.isChatPage? '0': '24px' }}
+            style={{ overflowY: styleState.shouldInnerPadding?'hidden':'auto', padding: styleState.shouldInnerPadding? '0': '24px' }}
           >
             <App />
           </Content>
diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index 26570a0d..d282e40e 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -280,9 +280,9 @@ const SiderBar = () => {
         items={headerButtons}
         onSelect={(key) => {
           if (key.itemKey.toString().startsWith('chat')) {
-            styleDispatch({ type: 'SET_CHAT_PAGE', payload: true });
+            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
           } else {
-            styleDispatch({ type: 'SET_CHAT_PAGE', payload: false });
+            styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
           }
           setSelectedKeys([key.itemKey]);
         }}
diff --git a/web/src/context/Style/index.js b/web/src/context/Style/index.js
index 9b264717..43206b43 100644
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -11,7 +11,7 @@ export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
     isMobile: false,
     showSider: false,
-    isChatPage: false,
+    shouldInnerPadding: false,
   });
 
   const dispatch = (action) => {
@@ -26,8 +26,8 @@ export const StyleProvider = ({ children }) => {
         case 'SET_MOBILE':
           setState(prev => ({ ...prev, isMobile: action.payload }));
           break;
-        case 'SET_CHAT_PAGE':
-          setState(prev => ({ ...prev, isChatPage: action.payload }));
+        case 'SET_INNER_PADDING':
+          setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
           break;
         default:
           setState(prev => ({ ...prev, ...action }));