fix(mobile-client): style broken and display correct mobile url in sub app (#2414)
This commit is contained in:
Dunqing
GitHub
parent
05239c8cfe
commit
5edcaaea4b
@ -32,7 +32,6 @@ export const ActionDrawer: ComposedActionDrawer = observer(
|
||||
title={field.title}
|
||||
{...others}
|
||||
{...drawerProps}
|
||||
{...modalProps}
|
||||
rootStyle={{
|
||||
...drawerProps?.style,
|
||||
...others?.style,
|
||||
|
||||
@ -24,8 +24,8 @@ export const GridCardItem = (props) => {
|
||||
padding: 24px 24px 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.nb-action-bar button {
|
||||
margin-bottom: 10px;
|
||||
.nb-action-bar {
|
||||
padding: 5px 0;
|
||||
}
|
||||
`}
|
||||
>
|
||||
|
||||
@ -909,7 +909,20 @@ SchemaSettings.ModalItem = function ModalItem(props) {
|
||||
<CollectionManagerContext.Provider value={cm}>
|
||||
<CollectionProvider collection={collection}>
|
||||
<SchemaComponentOptions scope={options.scope} components={options.components}>
|
||||
<FormLayout layout={'vertical'} style={{ minWidth: 520 }}>
|
||||
<FormLayout
|
||||
layout={'vertical'}
|
||||
className={css`
|
||||
// screen > 576px
|
||||
@media (min-width: 576px) {
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
// screen <= 576px
|
||||
@media (max-width: 576px) {
|
||||
min-width: 320px;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<APIClientProvider apiClient={apiClient}>
|
||||
<SchemaComponent components={components} scope={scope} schema={schema} />
|
||||
</APIClientProvider>
|
||||
|
||||
@ -1,9 +1,18 @@
|
||||
import { Card, Form, Input } from 'antd';
|
||||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from '../locale';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
export const AppConfiguration = () => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const targetUrl = useMemo(() => {
|
||||
let baseUrl = '/mobile';
|
||||
if (location.pathname.startsWith('/apps')) {
|
||||
baseUrl = location.pathname.split('/').slice(0, 3).join('/');
|
||||
}
|
||||
return baseUrl;
|
||||
}, [location.pathname]);
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
@ -12,10 +21,10 @@ export const AppConfiguration = () => {
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<Form.Item
|
||||
tooltip={`${t('The full address is')} ${window.origin}/mobile`}
|
||||
tooltip={`${t('The full address is')} ${window.origin}${targetUrl}`}
|
||||
label={t('Mobile client access address')}
|
||||
>
|
||||
<Input value="/mobile" disabled />
|
||||
<Input value={targetUrl} disabled />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { css, cx } from '@nocobase/client';
|
||||
import React from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import Device from './iOS6';
|
||||
|
||||
export const MobileDevice: React.FC = (props) => {
|
||||
@ -13,6 +14,7 @@ export const MobileDevice: React.FC = (props) => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
`,
|
||||
)}
|
||||
>
|
||||
|
||||
@ -12,6 +12,7 @@ import React, { useMemo } from 'react';
|
||||
import { Outlet, useParams } from 'react-router-dom';
|
||||
import { MobileCore } from '../core';
|
||||
import { useInterfaceContext } from './InterfaceProvider';
|
||||
import { OpenInNewTab } from './OpenInNewTab';
|
||||
|
||||
const commonCSSVariables = css`
|
||||
--nb-spacing: 14px;
|
||||
@ -92,6 +93,7 @@ const MApplication: React.FC = (props) => {
|
||||
return (
|
||||
<Provider>
|
||||
<MobileCore>
|
||||
<OpenInNewTab />
|
||||
<ActionContextProvider modalProps={modalProps as ModalProps} drawerProps={drawerProps}>
|
||||
<div
|
||||
className={cx(
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { usePlugin } from '@nocobase/client';
|
||||
import { css, usePlugin } from '@nocobase/client';
|
||||
import React from 'react';
|
||||
import { MobileClientPlugin } from '../index';
|
||||
import { InterfaceProvider } from './InterfaceProvider';
|
||||
@ -9,7 +9,16 @@ export const InterfaceRouter: React.FC = React.memo(() => {
|
||||
|
||||
return (
|
||||
<InterfaceProvider>
|
||||
<MobileRouter />
|
||||
<div
|
||||
className={css`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
`}
|
||||
>
|
||||
<MobileRouter />
|
||||
</div>
|
||||
</InterfaceProvider>
|
||||
);
|
||||
});
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from '../locale';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { css } from '@nocobase/client';
|
||||
import { Button } from 'antd';
|
||||
import { LinkOutlined } from '@ant-design/icons';
|
||||
|
||||
export const OpenInNewTab = () => {
|
||||
const location = useLocation();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onOpenInNewTab = () => {
|
||||
let baseUrl = window.origin;
|
||||
if (window.location.pathname.startsWith('/apps')) {
|
||||
baseUrl = window.origin + window.location.pathname.split('/').slice(0, 3).join('/');
|
||||
}
|
||||
window.open(`${baseUrl}${location.pathname}${location.search}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css`
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: 0;
|
||||
`}
|
||||
>
|
||||
<Button type="dashed" onClick={onOpenInNewTab} icon={<LinkOutlined />}>
|
||||
{t('Open in new tab')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -28,6 +28,7 @@ const locale = {
|
||||
'Delete menu block': '删除菜单区块',
|
||||
'Mobile client access address': '移动端访问地址',
|
||||
'The full address is': '完整的地址是',
|
||||
'Open in new tab': '在新标签页打开',
|
||||
};
|
||||
|
||||
export default locale;
|
||||
|
||||
@ -62,11 +62,13 @@ const CustomThemeProvider = React.memo((props) => {
|
||||
}, []);
|
||||
|
||||
const contentStyle = useMemo(() => {
|
||||
return open ? { transform: 'rotate(0)', flexGrow: 1, width: 0 } : { flexGrow: 1, width: 0 };
|
||||
return open
|
||||
? { transform: 'rotate(0)', flexGrow: 1, width: 0, height: '100%' }
|
||||
: { flexGrow: 1, width: 0, height: '100%' };
|
||||
}, [open]);
|
||||
|
||||
const editor = (
|
||||
<div style={{ display: 'flex', overflow: 'hidden' }}>
|
||||
<div style={{ display: 'flex', overflow: 'hidden', height: '100%' }}>
|
||||
<div style={contentStyle}>{props.children}</div>
|
||||
{open ? (
|
||||
<div className={styles.editor}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user