oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #612 from Calcium-Ion/mobile

Browse Source 
feat: Refactor style management for inner padding in layout components
This commit is contained in:
Calcium-Ion
2024-12-11 23:14:10 +08:00
committed by GitHub
parent db84b26e2d 28fa77cc92
commit 21d4dcadab
4 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/HeaderBar.js
View File

@@ -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 });
}
}}>

2
web/src/components/PageLayout.js
View File

@@ -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>

4
web/src/components/SiderBar.js
View File

@@ -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]);
}}

6
web/src/context/Style/index.js
View File

@@ -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 }));