refactor: Improve sidebar state management and layout responsiveness
This commit is contained in:
@@ -113,7 +113,7 @@ const PageLayout = () => {
|
|||||||
</Sider>
|
</Sider>
|
||||||
)}
|
)}
|
||||||
<Layout style={{
|
<Layout style={{
|
||||||
marginLeft: styleState.isMobile ? '0' : (styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0'),
|
marginLeft: styleState.isMobile ? '0' : (styleState.showSider ? (styleState.siderCollapsed ? '60px' : '200px') : '0'),
|
||||||
transition: 'margin-left 0.3s ease',
|
transition: 'margin-left 0.3s ease',
|
||||||
flex: '1 1 auto',
|
flex: '1 1 auto',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
|||||||
@@ -316,9 +316,9 @@ const SiderBar = () => {
|
|||||||
isCollapsed={isCollapsed}
|
isCollapsed={isCollapsed}
|
||||||
onCollapseChange={(collapsed) => {
|
onCollapseChange={(collapsed) => {
|
||||||
setIsCollapsed(collapsed);
|
setIsCollapsed(collapsed);
|
||||||
|
// styleDispatch({ type: 'SET_SIDER', payload: true });
|
||||||
|
styleDispatch({ type: 'SET_SIDER_COLLAPSED', payload: collapsed });
|
||||||
localStorage.setItem('default_collapse_sidebar', collapsed);
|
localStorage.setItem('default_collapse_sidebar', collapsed);
|
||||||
// 始终保持侧边栏显示,只是宽度不同
|
|
||||||
styleDispatch({ type: 'SET_SIDER', payload: true });
|
|
||||||
|
|
||||||
// 确保在收起侧边栏时有选中的项目,避免不必要的计算
|
// 确保在收起侧边栏时有选中的项目,避免不必要的计算
|
||||||
if (selectedKeys.length === 0) {
|
if (selectedKeys.length === 0) {
|
||||||
@@ -330,7 +330,7 @@ const SiderBar = () => {
|
|||||||
} else if (currentPath.startsWith('/chat/')) {
|
} else if (currentPath.startsWith('/chat/')) {
|
||||||
setSelectedKeys(['chat']);
|
setSelectedKeys(['chat']);
|
||||||
} else {
|
} else {
|
||||||
setSelectedKeys(['home']); // 默认选中首页
|
setSelectedKeys(['detail']); // 默认选中首页
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -467,7 +467,7 @@ const SiderBar = () => {
|
|||||||
|
|
||||||
<Nav.Footer
|
<Nav.Footer
|
||||||
style={{
|
style={{
|
||||||
paddingBottom: styleState?.isMobile ? '112px' : '0',
|
paddingBottom: styleState?.isMobile ? '112px' : '20px',
|
||||||
}}
|
}}
|
||||||
collapseButton={true}
|
collapseButton={true}
|
||||||
collapseText={(collapsed)=>
|
collapseText={(collapsed)=>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
|
|||||||
const [state, setState] = useState({
|
const [state, setState] = useState({
|
||||||
isMobile: isMobile(),
|
isMobile: isMobile(),
|
||||||
showSider: false,
|
showSider: false,
|
||||||
|
siderCollapsed: false,
|
||||||
shouldInnerPadding: false,
|
shouldInnerPadding: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -26,6 +27,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_SIDER_COLLAPSED':
|
||||||
|
setState(prev => ({ ...prev, siderCollapsed: action.payload }));
|
||||||
|
break
|
||||||
case 'SET_INNER_PADDING':
|
case 'SET_INNER_PADDING':
|
||||||
setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
|
setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
|
||||||
break;
|
break;
|
||||||
@@ -65,6 +69,13 @@ export const StyleProvider = ({ children }) => {
|
|||||||
|
|
||||||
updateShowSider();
|
updateShowSider();
|
||||||
|
|
||||||
|
const updateSiderCollapsed = () => {
|
||||||
|
const isCollapsed = localStorage.getItem('default_collapse_sidebar') === 'true';
|
||||||
|
dispatch({ type: 'SET_SIDER_COLLAPSED', payload: isCollapsed });
|
||||||
|
};
|
||||||
|
|
||||||
|
updateSiderCollapsed();
|
||||||
|
|
||||||
// Add event listeners to handle window resize
|
// Add event listeners to handle window resize
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
updateIsMobile();
|
updateIsMobile();
|
||||||
|
|||||||
Reference in New Issue
Block a user