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.
This commit is contained in:
CalciumIon
2024-12-11 21:17:46 +08:00
parent 60710d6c68
commit afb7b661ee
3 changed files with 10 additions and 1 deletions

View File

@@ -23,7 +23,7 @@ const PageLayout = () => {
</Sider> </Sider>
<Layout> <Layout>
<Content <Content
style={{ overflowY: 'auto', padding: '24px' }} style={{ overflowY: 'auto', padding: styleState.isChatPage? '0': '24px' }}
> >
<App /> <App />
</Content> </Content>

View File

@@ -279,6 +279,11 @@ const SiderBar = () => {
}} }}
items={headerButtons} items={headerButtons}
onSelect={(key) => { 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]); setSelectedKeys([key.itemKey]);
}} }}
footer={ footer={

View File

@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
const [state, setState] = useState({ const [state, setState] = useState({
isMobile: false, isMobile: false,
showSider: false, showSider: false,
isChatPage: false,
}); });
const dispatch = (action) => { const dispatch = (action) => {
@@ -25,6 +26,9 @@ export const StyleProvider = ({ children }) => {
case 'SET_MOBILE': case 'SET_MOBILE':
setState(prev => ({ ...prev, isMobile: action.payload })); setState(prev => ({ ...prev, isMobile: action.payload }));
break; break;
case 'SET_CHAT_PAGE':
setState(prev => ({ ...prev, isChatPage: action.payload }));
break;
default: default:
setState(prev => ({ ...prev, ...action })); setState(prev => ({ ...prev, ...action }));
} }