refactor: Improve sidebar state management and layout responsiveness

This commit is contained in:
1808837298@qq.com
2025-03-10 19:48:17 +08:00
parent 49bfd2b719
commit 8b99eec440
3 changed files with 17 additions and 6 deletions

View File

@@ -113,7 +113,7 @@ const PageLayout = () => {
</Sider>
)}
<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',
flex: '1 1 auto',
display: 'flex',

View File

@@ -316,10 +316,10 @@ const SiderBar = () => {
isCollapsed={isCollapsed}
onCollapseChange={(collapsed) => {
setIsCollapsed(collapsed);
// styleDispatch({ type: 'SET_SIDER', payload: true });
styleDispatch({ type: 'SET_SIDER_COLLAPSED', payload: collapsed });
localStorage.setItem('default_collapse_sidebar', collapsed);
// 始终保持侧边栏显示,只是宽度不同
styleDispatch({ type: 'SET_SIDER', payload: true });
// 确保在收起侧边栏时有选中的项目,避免不必要的计算
if (selectedKeys.length === 0) {
const currentPath = location.pathname;
@@ -330,7 +330,7 @@ const SiderBar = () => {
} else if (currentPath.startsWith('/chat/')) {
setSelectedKeys(['chat']);
} else {
setSelectedKeys(['home']); // 默认选中首页
setSelectedKeys(['detail']); // 默认选中首页
}
}
}}
@@ -467,7 +467,7 @@ const SiderBar = () => {
<Nav.Footer
style={{
paddingBottom: styleState?.isMobile ? '112px' : '0',
paddingBottom: styleState?.isMobile ? '112px' : '20px',
}}
collapseButton={true}
collapseText={(collapsed)=>

View File

@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
const [state, setState] = useState({
isMobile: isMobile(),
showSider: false,
siderCollapsed: false,
shouldInnerPadding: false,
});
@@ -26,6 +27,9 @@ export const StyleProvider = ({ children }) => {
case 'SET_MOBILE':
setState(prev => ({ ...prev, isMobile: action.payload }));
break;
case 'SET_SIDER_COLLAPSED':
setState(prev => ({ ...prev, siderCollapsed: action.payload }));
break
case 'SET_INNER_PADDING':
setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
break;
@@ -65,6 +69,13 @@ export const StyleProvider = ({ children }) => {
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
const handleResize = () => {
updateIsMobile();