From 5edcaaea4be057ceb444d080fb3e8160c66b495d Mon Sep 17 00:00:00 2001 From: Dunqing Date: Wed, 9 Aug 2023 22:23:15 +0800 Subject: [PATCH] fix(mobile-client): style broken and display correct mobile url in sub app (#2414) --- .../antd/action/Action.Drawer.tsx | 1 - .../antd/grid-card/GridCard.Item.tsx | 4 +-- .../src/schema-settings/SchemaSettings.tsx | 15 ++++++++- .../src/client/configuration/App.tsx | 15 +++++++-- .../src/client/devices/index.tsx | 2 ++ .../src/client/router/Application.tsx | 2 ++ .../src/client/router/InterfaceRouter.tsx | 13 ++++++-- .../src/client/router/OpenInNewTab.tsx | 33 +++++++++++++++++++ .../plugins/mobile-client/src/locale/zh-CN.ts | 1 + .../plugins/theme-editor/src/client/index.tsx | 6 ++-- 10 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 packages/plugins/mobile-client/src/client/router/OpenInNewTab.tsx diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx index 8964cb50a..cbace7c95 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx @@ -32,7 +32,6 @@ export const ActionDrawer: ComposedActionDrawer = observer( title={field.title} {...others} {...drawerProps} - {...modalProps} rootStyle={{ ...drawerProps?.style, ...others?.style, diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx index 7bbf7f616..adc72a515 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx @@ -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; } `} > diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx index 9825e658b..e230f531b 100644 --- a/packages/core/client/src/schema-settings/SchemaSettings.tsx +++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx @@ -909,7 +909,20 @@ SchemaSettings.ModalItem = function ModalItem(props) { - + 576px + @media (min-width: 576px) { + min-width: 520px; + } + + // screen <= 576px + @media (max-width: 576px) { + min-width: 320px; + } + `} + > diff --git a/packages/plugins/mobile-client/src/client/configuration/App.tsx b/packages/plugins/mobile-client/src/client/configuration/App.tsx index c285ceffc..7d8e82916 100644 --- a/packages/plugins/mobile-client/src/client/configuration/App.tsx +++ b/packages/plugins/mobile-client/src/client/configuration/App.tsx @@ -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 ( { >
- +
diff --git a/packages/plugins/mobile-client/src/client/devices/index.tsx b/packages/plugins/mobile-client/src/client/devices/index.tsx index b15a9b755..71bf3ad35 100644 --- a/packages/plugins/mobile-client/src/client/devices/index.tsx +++ b/packages/plugins/mobile-client/src/client/devices/index.tsx @@ -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; `, )} > diff --git a/packages/plugins/mobile-client/src/client/router/Application.tsx b/packages/plugins/mobile-client/src/client/router/Application.tsx index cdec94549..8382e341b 100644 --- a/packages/plugins/mobile-client/src/client/router/Application.tsx +++ b/packages/plugins/mobile-client/src/client/router/Application.tsx @@ -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 ( +
{ return ( - +
+ +
); }); diff --git a/packages/plugins/mobile-client/src/client/router/OpenInNewTab.tsx b/packages/plugins/mobile-client/src/client/router/OpenInNewTab.tsx new file mode 100644 index 000000000..1b63b89c3 --- /dev/null +++ b/packages/plugins/mobile-client/src/client/router/OpenInNewTab.tsx @@ -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 ( +
+ +
+ ); +}; diff --git a/packages/plugins/mobile-client/src/locale/zh-CN.ts b/packages/plugins/mobile-client/src/locale/zh-CN.ts index 1141a440c..4a422faa0 100644 --- a/packages/plugins/mobile-client/src/locale/zh-CN.ts +++ b/packages/plugins/mobile-client/src/locale/zh-CN.ts @@ -28,6 +28,7 @@ const locale = { 'Delete menu block': '删除菜单区块', 'Mobile client access address': '移动端访问地址', 'The full address is': '完整的地址是', + 'Open in new tab': '在新标签页打开', }; export default locale; diff --git a/packages/plugins/theme-editor/src/client/index.tsx b/packages/plugins/theme-editor/src/client/index.tsx index 8d381e057..a1d830d29 100644 --- a/packages/plugins/theme-editor/src/client/index.tsx +++ b/packages/plugins/theme-editor/src/client/index.tsx @@ -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 = ( -
+
{props.children}
{open ? (