ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: display on the PC side of moblie access is incomplete (#2039)

Browse Source 
* fix: display on the PC side of moblie access is incomplete

* fix: need refresh should work

* fix: again

* fix: keep 0.1
This commit is contained in:
Dunqing 2023-06-14 10:41:07 +08:00 committed by GitHub
parent af37e26640
commit 3332a488ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 55 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/client/src/pages/document.ejs
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, shrink-to-fit=no">
<meta name="viewport" content="initial-scale=0.1">
<title>Loading...</title>
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

3
packages/core/client/src/auth/SigninPage.tsx
View File

@ -11,7 +11,7 @@ import React, {
import { css } from '@emotion/css';
import { useTranslation } from 'react-i18next';
import { useHistory, useLocation } from 'react-router-dom';
import { useAPIClient, useCurrentDocumentTitle, useRequest } from '..';
import { useAPIClient, useCurrentDocumentTitle, useRequest, useViewport } from '..';
import { useSigninPageExtension } from './SigninPageExtension';
import { useForm } from '@formily/react';
@ -72,6 +72,7 @@ export const useSignIn = (authenticator) => {
export const SigninPage = () => {
const { t } = useTranslation();
useCurrentDocumentTitle('Signin');
useViewport();
const signInPages = useContext(SigninPageContext);
const api = useAPIClient();
const [authenticators, setAuthenticators] = useState<Authenticator[]>([]);

3
packages/core/client/src/auth/SignupPage.tsx
View File

@ -2,7 +2,7 @@ import { message } from 'antd';
import React, { useContext, createContext, FunctionComponent, createElement } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
import { useAPIClient, useCurrentDocumentTitle } from '..';
import { useAPIClient, useCurrentDocumentTitle, useViewport } from '..';
import { useForm } from '@formily/react';
export const SignupPageContext = createContext<{
@ -58,6 +58,7 @@ function useQuery() {
export const SignupPage = () => {
const { t } = useTranslation();
useViewport();
useCurrentDocumentTitle('Signup');
const query = useQuery();
const authType = query.get('authType');

1
packages/core/client/src/hooks/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './useViewport';

44
packages/core/client/src/hooks/useViewport.ts Normal file
View File

@ -0,0 +1,44 @@
import { useEffect, useRef } from 'react';
const useViewportMeta = () => {
const contentRef = useRef<string>('initial-scale=0.1');
const metaRef = useRef<HTMLMetaElement>();
useEffect(() => {
let meta = document.querySelector<HTMLMetaElement>('meta[name="viewport"]');
if (meta) {
contentRef.current = meta.content;
} else {
meta = document.createElement('meta');
meta.name = 'viewport';
}
if (meta) {
meta.content = 'width=device-width, initial-scale=1, user-scalable=0';
metaRef.current = meta;
}
}, []);
const restore = () => {
if (metaRef.current) {
metaRef.current.content = contentRef.current;
}
};
return {
metaRef,
restore,
};
};
export function useViewport() {
const { metaRef, restore } = useViewportMeta();
useEffect(() => {
if (!metaRef.current) {
return;
}
document.head.insertBefore(metaRef.current, document.head.firstChild);
return () => {
restore();
};
}, []);
}

1
packages/core/client/src/index.ts
View File

@ -29,3 +29,4 @@ export * from './schema-items';
export * from './settings-form';
export * from './system-settings';
export * from './user';
export * from './hooks';

5
packages/plugins/mobile-client/src/client/router/Application.tsx
View File

@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { ActionContextProvider, AdminProvider, RemoteSchemaComponent, useRoute } from '@nocobase/client';
import { ActionContextProvider, AdminProvider, RemoteSchemaComponent, useRoute, useViewport } from '@nocobase/client';
import { css, cx } from '@emotion/css';
import { useInterfaceContext } from './InterfaceProvider';
import { DrawerProps, ModalProps } from 'antd';
@ -73,6 +73,9 @@ const MApplication: React.FC = (props) => {
const Provider = useMemo(() => {
return interfaceContext ? React.Fragment : AdminProvider;
}, [interfaceContext]);
useViewport();
return (
<Provider>
<MobileCore>