Selaa lähdekoodia

判断页面是否是手机端

tianyunperfect 4 vuotta sitten
vanhempi
commit
1cc9a16e97
1 muutettua tiedostoa jossa 26 lisäystä ja 13 poistoa
  1. 26 13
      src/layouts/BasicLayout.tsx

+ 26 - 13
src/layouts/BasicLayout.tsx

@@ -4,21 +4,22 @@
  * https://github.com/ant-design/ant-design-pro-layout
  */
 import ProLayout, {
-  MenuDataItem,
   BasicLayoutProps as ProLayoutProps,
-  Settings,
   DefaultFooter,
+  MenuDataItem,
+  Settings,
 } from '@ant-design/pro-layout';
-import React from 'react';
-import { Link, useIntl, connect, Dispatch } from 'umi';
+import React, {useEffect, useState} from 'react';
+import {connect, Dispatch, Link, useIntl} from 'umi';
 // import { GithubOutlined } from '@ant-design/icons';
-import { Result, Button } from 'antd';
+import {Button, Result} from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
-import { ConnectState } from '@/models/connect';
-import { getAuthorityFromRouter } from '@/utils/utils';
+import {ConnectState} from '@/models/connect';
+import {getAuthorityFromRouter} from '@/utils/utils';
 import logo from '../assets/logo.svg';
 
+
 const noMatch = (
   <Result
     status={403}
@@ -31,6 +32,7 @@ const noMatch = (
     }
   />
 );
+
 export interface BasicLayoutProps extends ProLayoutProps {
   breadcrumbNameMap: {
     [path: string]: MenuDataItem;
@@ -41,6 +43,7 @@ export interface BasicLayoutProps extends ProLayoutProps {
   settings: Settings;
   dispatch: Dispatch;
 }
+
 export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
   breadcrumbNameMap: {
     [path: string]: MenuDataItem;
@@ -52,7 +55,7 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
 
 const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
   menuList.map((item) => {
-    const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
+    const localItem = {...item, children: item.children ? menuDataRender(item.children) : []};
     return Authorized.check(item.authority, localItem, null) as MenuDataItem;
   });
 
@@ -97,11 +100,21 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
     authority: undefined,
   };
-  const { formatMessage } = useIntl();
+  const {formatMessage} = useIntl();
+
+  // 设置header是否展示,通过判断是否是手机端
+  const [isPhone, setPhone] = useState<any>(false);
+  useEffect(()=>{
+    if (/mobile/i.test(navigator.userAgent) || /android/i.test(navigator.userAgent)) {
+      setPhone(undefined);
+    } else {
+      setPhone(false);
+    }
+  },[]);
 
   return (
     <ProLayout
-      headerRender={false}
+      headerRender={isPhone}
       logo={logo}
       formatMessage={formatMessage}
       menuHeaderRender={(logoDom, titleDom) => (
@@ -121,7 +134,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       breadcrumbRender={(routers = []) => [
         {
           path: '/',
-          breadcrumbName: formatMessage({ id: 'menu.home' }),
+          breadcrumbName: formatMessage({id: 'menu.home'}),
         },
         ...routers,
       ]}
@@ -135,7 +148,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       }}
       footerRender={() => defaultFooterDom}
       menuDataRender={menuDataRender}
-      rightContentRender={() => <RightContent />}
+      rightContentRender={() => <RightContent/>}
       {...props}
       {...settings}
     >
@@ -146,7 +159,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   );
 };
 
-export default connect(({ global, settings }: ConnectState) => ({
+export default connect(({global, settings}: ConnectState) => ({
   collapsed: global.collapsed,
   settings,
 }))(BasicLayout);