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

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

This reverts commit 3558fc3ced64cbdd8aedece062d9a221821ba55d.

* fix: update mobile detection logic in PublicFormPage component

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

@@ -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 };
 
@@ -76,7 +75,7 @@ const AllAccessDesktopRoutesContext = createContext<{
   refresh: () => void;
 }>({
   allAccessRoutes: emptyArray,
-  refresh: () => { },
+  refresh: () => {},
 });
 AllAccessDesktopRoutesContext.displayName = 'AllAccessDesktopRoutesContext';
 
@@ -565,11 +564,11 @@ const IsMobileLayoutContext = React.createContext<{
   setIsMobileLayout: React.Dispatch<React.SetStateAction<boolean>>;
 }>({
   isMobileLayout: false,
-  setIsMobileLayout: () => { },
+  setIsMobileLayout: () => {},
 });
 
 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}>
-          <LayoutContent />
-        </ConfigProvider>
+        <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>
   );

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

@@ -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>