refactor: Improve sidebar state management and layout responsiveness
This commit is contained in:
@@ -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',
|
||||
|
||||
@@ -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)=>
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user