fix(mobile-client): style broken and display correct mobile url in sub app (#2414)

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,

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 {
+        .nb-action-bar {
-          margin-bottom: 10px;
+          padding: 5px 0;
         }
       `}
     >

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -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>

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 (
     <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>

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;
         `,
       )}
     >

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 (
     <Provider>
       <MobileCore>
+        <OpenInNewTab />
         <ActionContextProvider modalProps={modalProps as ModalProps} drawerProps={drawerProps}>
           <div
             className={cx(

packages/plugins/mobile-client/src/client/router/InterfaceRouter.tsx

@@ -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>
   );
 });

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 (
+    <div
+      className={css`
+        position: absolute;
+        top: -40px;
+        right: 0;
+      `}
+    >
+      <Button type="dashed" onClick={onOpenInNewTab} icon={<LinkOutlined />}>
+        {t('Open in new tab')}
+      </Button>
+    </div>
+  );
+};

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;

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 = (
-    <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}>