fix(mobile-client): style broken and display correct mobile url in sub app (#2414)
This commit is contained in:
		
							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