fix: update mobile layout handling and clean up unused context (#6600)

This commit is contained in:
Zeke Zhang 2025-04-01 11:36:37 +08:00 committed by GitHub
parent b8b539dbc8
commit 3558fc3ced
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -8,7 +8,7 @@
*/
import { EllipsisOutlined } from '@ant-design/icons';
import ProLayout, { RouteContext, RouteContextType } from '@ant-design/pro-layout';
import ProLayout, { RouteContext } from '@ant-design/pro-layout';
import { HeaderViewProps } from '@ant-design/pro-layout/es/components/Header';
import { css } from '@emotion/css';
import { theme as antdTheme, ConfigProvider, Popover, Tooltip } from 'antd';
@ -53,6 +53,7 @@ import { KeepAlive } from './KeepAlive';
import { NocoBaseDesktopRoute, NocoBaseDesktopRouteType } from './convertRoutesToSchema';
import { MenuSchemaToolbar, ResetThemeTokenAndKeepAlgorithm } from './menuItemSettings';
import { userCenterSettings } from './userCenterSettings';
import { isMobile } from 'react-device-detect';
export { KeepAlive, NocoBaseDesktopRouteType };
@ -75,7 +76,7 @@ const AllAccessDesktopRoutesContext = createContext<{
refresh: () => void;
}>({
allAccessRoutes: emptyArray,
refresh: () => {},
refresh: () => { },
});
AllAccessDesktopRoutesContext.displayName = 'AllAccessDesktopRoutesContext';
@ -564,11 +565,11 @@ const IsMobileLayoutContext = React.createContext<{
setIsMobileLayout: React.Dispatch<React.SetStateAction<boolean>>;
}>({
isMobileLayout: false,
setIsMobileLayout: () => {},
setIsMobileLayout: () => { },
});
const MobileLayoutProvider: FC = (props) => {
const [isMobileLayout, setIsMobileLayout] = useState(false);
const [isMobileLayout, setIsMobileLayout] = useState(isMobile);
const value = useMemo(() => ({ isMobileLayout, setIsMobileLayout }), [isMobileLayout]);
return <IsMobileLayoutContext.Provider value={value}>{props.children}</IsMobileLayoutContext.Provider>;
@ -585,7 +586,7 @@ export const InternalAdminLayout = () => {
const location = useLocation();
const { onDragEnd } = useMenuDragEnd();
const { token } = useToken();
const { isMobileLayout, setIsMobileLayout } = useMobileLayout();
const { isMobileLayout } = useMobileLayout();
const [collapsed, setCollapsed] = useState(isMobileLayout);
const doNotChangeCollapsedRef = useRef(false);
const { t } = useMenuTranslation();
@ -680,21 +681,9 @@ export const InternalAdminLayout = () => {
onPageChange={onPageChange}
menuProps={menuProps}
>
<RouteContext.Consumer>
{(value: RouteContextType) => {
const { isMobile: _isMobile } = value;
if (_isMobile !== isMobileLayout) {
setIsMobileLayout(_isMobile);
}
return (
<ConfigProvider theme={_isMobile ? mobileTheme : theme}>
<LayoutContent />
</ConfigProvider>
);
}}
</RouteContext.Consumer>
<ConfigProvider theme={isMobileLayout ? mobileTheme : theme}>
<LayoutContent />
</ConfigProvider>
</ProLayout>
</DndContext>
);