fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-07 22:49:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(public-form): determine whether it is a mobile terminal based on the device type (#6611)

Browse Source 
* Revert "fix: update mobile layout handling and clean up unused context (#6600)"

This reverts commit 3558fc3ced64cbdd8aedece062d9a221821ba55d.

* fix: update mobile detection logic in PublicFormPage component
This commit is contained in:
Zeke Zhang 2025-04-02 11:00:31 +08:00 committed by GitHub
parent c3b4c06996
commit 23f0fdefb1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/core/client/src/route-switch/antd/admin-layout/index.tsx
View File

@ -8,7 +8,7 @@
*/
import { EllipsisOutlined } from '@ant-design/icons';
import ProLayout, { RouteContext } from '@ant-design/pro-layout';
import ProLayout, { RouteContext, RouteContextType } 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,7 +53,6 @@ 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 };
@ -569,7 +568,7 @@ const IsMobileLayoutContext = React.createContext<{
});
const MobileLayoutProvider: FC = (props) => {
const [isMobileLayout, setIsMobileLayout] = useState(isMobile);
const [isMobileLayout, setIsMobileLayout] = useState(false);
const value = useMemo(() => ({ isMobileLayout, setIsMobileLayout }), [isMobileLayout]);
return <IsMobileLayoutContext.Provider value={value}>{props.children}</IsMobileLayoutContext.Provider>;
@ -586,7 +585,7 @@ export const InternalAdminLayout = () => {
const location = useLocation();
const { onDragEnd } = useMenuDragEnd();
const { token } = useToken();
const { isMobileLayout } = useMobileLayout();
const { isMobileLayout, setIsMobileLayout } = useMobileLayout();
const [collapsed, setCollapsed] = useState(isMobileLayout);
const doNotChangeCollapsedRef = useRef(false);
const { t } = useMenuTranslation();
@ -681,9 +680,21 @@ export const InternalAdminLayout = () => {
onPageChange={onPageChange}
menuProps={menuProps}
>
<ConfigProvider theme={isMobileLayout ? mobileTheme : theme}>
<RouteContext.Consumer>
{(value: RouteContextType) => {
const { isMobile: _isMobile } = value;
if (_isMobile !== isMobileLayout) {
setIsMobileLayout(_isMobile);
}
return (
<ConfigProvider theme={_isMobile ? mobileTheme : theme}>
<LayoutContent />
</ConfigProvider>
);
}}
</RouteContext.Consumer>
</ProLayout>
</DndContext>
);

8
packages/plugins/@nocobase/plugin-public-forms/src/client/components/PublicFormPage.tsx
View File

@ -33,7 +33,7 @@ import {
import { Input, Modal, Spin } from 'antd';
import { useTranslation } from 'react-i18next';
import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { isDesktop } from 'react-device-detect';
import { isDesktop, isMobile } from 'react-device-detect';
import { useParams } from 'react-router';
import { usePublicSubmitActionProps } from '../hooks';
import { UnEnabledFormPlaceholder, UnFoundFormPlaceholder } from './UnEnabledFormPlaceholder';
@ -129,9 +129,6 @@ const PublicFormMessageProvider = ({ children }) => {
</PublicFormMessageContext.Provider>
);
};
function isMobile() {
return window.matchMedia('(max-width: 768px)').matches;
}
const AssociationFieldMobile = (props) => {
return <AssociationField {...props} popupMatchSelectWidth={true} />;
@ -165,7 +162,6 @@ const mobileComponents = {
function InternalPublicForm() {
const params = useParams();
const apiClient = useAPIClient();
const isMobileMedia = isMobile();
const { error, data, loading, run } = useRequest<any>(
{
url: `publicForms:getMeta/${params.name}`,
@ -243,7 +239,7 @@ function InternalPublicForm() {
if (!data?.data) {
return <UnEnabledFormPlaceholder />;
}
const components = isMobileMedia ? mobileComponents : {};
const components = isMobile ? mobileComponents : {};
return (
<ACLCustomContext.Provider value={{ allowAll: true }}>
<PublicAPIClientProvider>