From 9c165db0f724fda75f8cb0283ae41818682d8f74 Mon Sep 17 00:00:00 2001
From: Dunqing <dengqing0821@gmail.com>
Date: Thu, 8 Jun 2023 19:54:00 +0800
Subject: [PATCH] feat(plugin-mobile-client): support mobile-side client
 (#1879)

* feat: init mobile client

* feat: add plugin

* feat: ready to develop

* feat: update pm styels

* feat: add mobile center

* feat: router ready

* feat: support menu block, then menu ready

* fix: incorrect path

* feat: support TabBar

* feat: tabbar, menu support dragging

* feat: support page and header

* feat: mobile view

* fix: optional schema

* feat: improve styles

* fix: user-scalable

* feat: support pc component show in mobile

* feat: hidden divider

* fix: improve drawer props

* feat: support list block

* feat: rename to details list

* feat: page support tabs

* feat: improve designer css

* feat: complete enable/disabled header of page

* feat: some improve

* feat: improve empty data

* fix: header info cannot displayed

* chore: update deps

* fix: incorrect spacing

* fix: menu designer

* refactor: re implement

* feat: support page template

* feat: clean code

* feat: support i18n

* chore: update lock

* feat: support GirdCard in mobile

* fix: build failed

* feat: only render one column in mobile interface

* fix: back button should not display in container

* fix: switch to padding

* fix: fixedBlockDesignRItem shouldn't display in dosen't support block

* fix: update font family

* fix: remove gridcard title

* fix: dragging scope is too wide

* fix: add menu cannot direct display

* refactor: improve tabbar schema usage

* refactor: improve menu schema

* feat: should to use simple pagination

* feat: the tag should pre-wrap

* feat: improve the configuration button

* feat: improve name

* fix: clear data when modal is closed

* fix: the tag is too long

* fix: i18n

* fix: font incorrect

* feat: add map block

* fix: some maps error

* feat: support global action in page

* feat: improve border color

* feat: improve performance, the count stop early

* style: improve

* fix: incorrect font

* fix: style conflict

* chore: update version

* chore: missing dep

* feat: support setting block

* feat: improve settings block and improve

* feat: support onBackPressed

* fix: ts error

* feat: improve cannot find tab should navigate to mobile

* docs: update

* chore: update deps

* fix: showTitle state is incorrect

* feat: improve jsbridge apis

* fix: navigate to admin after signout

* chore: remove mgrid block

* fix: ts error

* fix: switch role will reload to root page

* fix: update deps

* fix: upgrade formily to 2.2.24

---------

Co-authored-by: dream2023 <1098626505@qq.com>
Co-authored-by: chenos <chenlinxh@gmail.com>
---
 packages/app/client/src/pages/document.ejs    |   7 +-
 .../app/client/src/plugins/mobile-client.ts   |   1 +
 .../client/src/application/Application.tsx    |   4 +-
 packages/core/client/src/pm/index.tsx         |  28 +++-
 .../client/src/route-switch/RouteSwitch.tsx   |  41 +++--
 .../route-switch/antd/admin-layout/index.tsx  |  28 ++--
 .../core/client/src/route-switch/context.ts   |   4 +-
 .../core/client/src/route-switch/types.ts     |   1 +
 .../antd/action/Action.Drawer.tsx             | 149 +++++++++--------
 .../antd/action/Action.Modal.tsx              | 136 ++++++++--------
 .../schema-component/antd/action/Action.tsx   |  41 ++---
 .../antd/action/ActionBar.tsx                 | 109 ++++++++-----
 .../schema-component/antd/action/context.tsx  |  15 +-
 .../antd/block-item/BlockItem.tsx             |   7 +-
 .../antd/card-item/CardItem.tsx               |   2 +-
 .../antd/grid-card/GridCard.Designer.tsx      |   3 +-
 .../antd/grid-card/GridCard.tsx               |  11 +-
 .../src/schema-component/antd/grid/Grid.tsx   | 111 +++++++------
 .../src/schema-component/antd/index.less      |  16 +-
 .../schema-component/antd/page/FixedBlock.tsx |   7 +-
 .../src/schema-component/antd/page/Page.tsx   |   2 +-
 .../antd/record-picker/InputRecordPicker.tsx  |   6 +-
 .../record-picker/ReadPrettyRecordPicker.tsx  |  12 +-
 .../schema-component/antd/table-v2/index.ts   |   1 +
 .../src/schema-component/antd/tabs/Tabs.tsx   |   5 +-
 .../schema-component/antd/tabs/context.tsx    |  12 ++
 .../src/schema-component/antd/tabs/index.ts   |   1 +
 .../common/sortable-item/SortableItem.tsx     |  30 ++--
 .../schema-component/hooks/useDesignable.tsx  |   8 +-
 .../schema-initializer/SchemaInitializer.tsx  | 136 +++++++++++++---
 .../buttons/TabPaneInitializers.tsx           |   9 +-
 .../client/src/schema-initializer/utils.ts    |   5 +-
 .../src/schema-items/GeneralSchemaItems.tsx   |   2 +-
 .../schema-settings/GeneralSchemaDesigner.tsx |   7 +-
 .../src/schema-settings/SchemaSettings.tsx    |   8 +-
 .../SchemaTemplateManagerProvider.tsx         |   4 +
 .../core/client/src/user/ChangePassword.tsx   |   6 +-
 packages/core/client/src/user/CurrentUser.tsx | 139 ++++++++--------
 packages/core/client/src/user/EditProfile.tsx |   8 +-
 packages/core/client/src/user/SigninPage.tsx  |   2 +-
 packages/core/client/src/user/SwitchRole.tsx  |   3 +-
 .../map/src/client/components/AMap.tsx        |  31 +++-
 packages/plugins/mobile-client/client.d.ts    |   4 +
 packages/plugins/mobile-client/client.js      |  30 ++++
 .../plugins/mobile-client/docs/en-US/index.md |   7 +
 .../mobile-client/docs/en-US/installation.md  |  13 ++
 .../mobile-client/docs/en-US/tabs.json        |  14 ++
 .../plugins/mobile-client/docs/en-US/usage.md |   1 +
 .../plugins/mobile-client/docs/zh-CN/index.md |   7 +
 .../mobile-client/docs/zh-CN/installation.md  |  13 ++
 .../mobile-client/docs/zh-CN/tabs.json        |  14 ++
 .../plugins/mobile-client/docs/zh-CN/usage.md |   2 +
 packages/plugins/mobile-client/package.json   |  27 ++++
 packages/plugins/mobile-client/server.d.ts    |   4 +
 packages/plugins/mobile-client/server.js      |  30 ++++
 .../src/client/configuration/App.tsx          |   5 +
 .../src/client/configuration/Interface.tsx    |  11 ++
 .../src/client/configuration/index.ts         |   2 +
 .../src/client/core/bridge/index.ts           |   1 +
 .../src/client/core/bridge/injects.ts         |  12 ++
 .../src/client/core/bridge/native-call.ts     |  23 +++
 .../mobile-client/src/client/core/index.tsx   |  45 ++++++
 .../container/Container.Designer.tsx          |  85 ++++++++++
 .../schema/components/container/Container.tsx | 130 +++++++++++++++
 .../core/schema/components/container/index.ts |   1 +
 .../components/header/Header.Designer.tsx     |  39 +++++
 .../core/schema/components/header/Header.tsx  |  41 +++++
 .../core/schema/components/header/index.ts    |   1 +
 .../client/core/schema/components/index.ts    |   6 +
 .../schema/components/menu/Menu.Designer.tsx  |  46 ++++++
 .../core/schema/components/menu/Menu.Item.tsx | 104 ++++++++++++
 .../core/schema/components/menu/Menu.tsx      | 105 ++++++++++++
 .../components/menu/MenuBlockInitializer.tsx  |  20 +++
 .../core/schema/components/menu/index.ts      |   2 +
 .../core/schema/components/menu/schema.ts     |  17 ++
 .../schema/components/page/Page.Designer.tsx  | 106 ++++++++++++
 .../core/schema/components/page/Page.tsx      | 140 ++++++++++++++++
 .../core/schema/components/page/index.ts      |   1 +
 .../components/settings/Settings.Designer.tsx |  22 +++
 .../schema/components/settings/Settings.tsx   |  25 +++
 .../settings/SettingsBlockInitializer.tsx     |  20 +++
 .../core/schema/components/settings/index.ts  |   2 +
 .../schema/components/tab-bar/TabBar.Item.tsx |  67 ++++++++
 .../core/schema/components/tab-bar/TabBar.tsx | 113 +++++++++++++
 .../core/schema/components/tab-bar/index.ts   |   1 +
 .../core/schema/components/tab-bar/schema.ts  |  18 +++
 .../src/client/core/schema/helpers/index.ts   |  38 +++++
 .../src/client/core/schema/hooks/index.ts     |   1 +
 .../core/schema/hooks/useSchemaPatch.ts       |  24 +++
 .../src/client/core/schema/index.ts           |   3 +
 .../schema/initializers/BlockInitializers.ts  |  81 ++++++++++
 .../client/core/schema/initializers/index.ts  |   1 +
 .../client/core/schema/scopes/grid-card.ts    |  35 ++++
 .../src/client/core/schema/scopes/index.ts    |   1 +
 .../mobile-client/src/client/devices/iOS6.tsx |  24 +++
 .../src/client/devices/index.tsx              |  27 ++++
 .../mobile-client/src/client/index.tsx        |  33 ++++
 .../mobile-client/src/client/locale/en-US.ts  |   5 +
 .../mobile-client/src/client/locale/index.ts  |  23 +++
 .../mobile-client/src/client/locale/zh-CN.ts  |  31 ++++
 .../src/client/router/Application.tsx         | 111 +++++++++++++
 .../src/client/router/InterfaceProvider.tsx   |  11 ++
 .../src/client/router/InterfaceRouter.tsx     |  33 ++++
 .../src/client/router/RouteSwitchProvider.tsx |  18 +++
 .../mobile-client/src/client/router/index.ts  |   2 +
 packages/plugins/mobile-client/src/index.ts   |   1 +
 .../src/server/collections/.gitkeep           |   0
 .../plugins/mobile-client/src/server/index.ts |   1 +
 .../mobile-client/src/server/plugin.ts        |  62 +++++++
 packages/plugins/mobile-client/types.d.ts     |   0
 packages/presets/nocobase/package.json        |   3 +-
 packages/presets/nocobase/src/index.ts        |   1 +
 yarn.lock                                     | 153 +++++++++++++++++-
 113 files changed, 2807 insertions(+), 451 deletions(-)
 create mode 100644 packages/app/client/src/plugins/mobile-client.ts
 create mode 100644 packages/core/client/src/schema-component/antd/tabs/context.tsx
 create mode 100755 packages/plugins/mobile-client/client.d.ts
 create mode 100755 packages/plugins/mobile-client/client.js
 create mode 100644 packages/plugins/mobile-client/docs/en-US/index.md
 create mode 100644 packages/plugins/mobile-client/docs/en-US/installation.md
 create mode 100644 packages/plugins/mobile-client/docs/en-US/tabs.json
 create mode 100644 packages/plugins/mobile-client/docs/en-US/usage.md
 create mode 100644 packages/plugins/mobile-client/docs/zh-CN/index.md
 create mode 100644 packages/plugins/mobile-client/docs/zh-CN/installation.md
 create mode 100644 packages/plugins/mobile-client/docs/zh-CN/tabs.json
 create mode 100644 packages/plugins/mobile-client/docs/zh-CN/usage.md
 create mode 100644 packages/plugins/mobile-client/package.json
 create mode 100755 packages/plugins/mobile-client/server.d.ts
 create mode 100755 packages/plugins/mobile-client/server.js
 create mode 100644 packages/plugins/mobile-client/src/client/configuration/App.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/configuration/Interface.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/configuration/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/bridge/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/bridge/injects.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/bridge/native-call.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/index.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/container/Container.Designer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/container/Container.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/container/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/header/Header.Designer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/header/Header.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/header/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Designer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/menu/MenuBlockInitializer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/menu/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/menu/schema.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/page/Page.Designer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/page/Page.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/page/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.Designer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/settings/SettingsBlockInitializer.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/settings/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.Item.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/schema.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/helpers/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/hooks/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/hooks/useSchemaPatch.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/initializers/BlockInitializers.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/initializers/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/scopes/grid-card.ts
 create mode 100644 packages/plugins/mobile-client/src/client/core/schema/scopes/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/devices/iOS6.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/devices/index.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/index.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/locale/en-US.ts
 create mode 100644 packages/plugins/mobile-client/src/client/locale/index.ts
 create mode 100644 packages/plugins/mobile-client/src/client/locale/zh-CN.ts
 create mode 100644 packages/plugins/mobile-client/src/client/router/Application.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/router/InterfaceProvider.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/router/InterfaceRouter.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx
 create mode 100644 packages/plugins/mobile-client/src/client/router/index.ts
 create mode 100644 packages/plugins/mobile-client/src/index.ts
 create mode 100644 packages/plugins/mobile-client/src/server/collections/.gitkeep
 create mode 100644 packages/plugins/mobile-client/src/server/index.ts
 create mode 100644 packages/plugins/mobile-client/src/server/plugin.ts
 create mode 100644 packages/plugins/mobile-client/types.d.ts

diff --git a/packages/app/client/src/pages/document.ejs b/packages/app/client/src/pages/document.ejs
index 9f44edc55..349691650 100644
--- a/packages/app/client/src/pages/document.ejs
+++ b/packages/app/client/src/pages/document.ejs
@@ -2,12 +2,17 @@
 <html>
 <head>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, shrink-to-fit=no">
   <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">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
   <link rel="manifest" href="/favicon/site.webmanifest">
   <style>
+  #root {
+    width: 100%;
+    height: 100%;
+  }
   /* width */
   .win ::-webkit-scrollbar {
     width: 8px;
@@ -41,4 +46,4 @@
     window.routerBase = match ? match[0] : "/";
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/app/client/src/plugins/mobile-client.ts b/packages/app/client/src/plugins/mobile-client.ts
new file mode 100644
index 000000000..305f7594c
--- /dev/null
+++ b/packages/app/client/src/plugins/mobile-client.ts
@@ -0,0 +1 @@
+export { default } from '@nocobase/plugin-mobile-client/client';
\ No newline at end of file
diff --git a/packages/core/client/src/application/Application.tsx b/packages/core/client/src/application/Application.tsx
index 03315fd43..d2b2c606e 100644
--- a/packages/core/client/src/application/Application.tsx
+++ b/packages/core/client/src/application/Application.tsx
@@ -53,9 +53,7 @@ const App = React.memo((props: any) => {
   const C = compose(...props.providers)(() => {
     const routes = useRoutes();
     return (
-      <div>
-        <RouteSwitch routes={routes} />
-      </div>
+      <RouteSwitch routes={routes} />
     );
   });
   return <C />;
diff --git a/packages/core/client/src/pm/index.tsx b/packages/core/client/src/pm/index.tsx
index 40e0ee8df..90dfa2b9e 100644
--- a/packages/core/client/src/pm/index.tsx
+++ b/packages/core/client/src/pm/index.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { Layout, Menu, PageHeader, Result, Spin, Tabs } from 'antd';
 import { sortBy } from 'lodash';
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
@@ -262,8 +262,21 @@ const SettingsCenter = (props) => {
       };
     });
   return (
-    <div>
-      <Layout>
+    <div
+      className={cx(
+        'nb-setting-center',
+        css`
+          &.nb-setting-center {
+            flex: 1;
+          }
+        `,
+      )}
+    >
+      <Layout
+        className={css`
+          height: 100%;
+        `}
+      >
         <div
           style={
             {
@@ -302,7 +315,12 @@ const SettingsCenter = (props) => {
             items={menuItems as any}
           />
         </Layout.Sider>
-        <Layout.Content>
+        <Layout.Content
+          className={css`
+            display: flex;
+            flex-direction: column;
+          `}
+        >
           {aclPluginTabCheck && (
             <PageHeader
               ghost={false}
@@ -321,7 +339,7 @@ const SettingsCenter = (props) => {
               }
             />
           )}
-          <div className={'m24'} style={{ margin: 24 }}>
+          <div className={'m24'} style={{ margin: 24, flex: 1 }}>
             {aclPluginTabCheck ? (
               component && React.createElement(component)
             ) : (
diff --git a/packages/core/client/src/route-switch/RouteSwitch.tsx b/packages/core/client/src/route-switch/RouteSwitch.tsx
index 612ce6e3d..6084606b4 100644
--- a/packages/core/client/src/route-switch/RouteSwitch.tsx
+++ b/packages/core/client/src/route-switch/RouteSwitch.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { Redirect, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom';
 import { RouteContext } from './context';
-import { useRouteComponent } from './hooks';
+import { useRoute, useRouteComponent } from './hooks';
 import { RouteSwitchProps } from './types';
 
 export function RouteSwitch(props: RouteSwitchProps) {
   const { routes = [] } = props;
+  const { url: base, path } = useRouteMatch();
+
   if (!routes.length) {
     return null;
   }
@@ -28,21 +30,20 @@ export function RouteSwitch(props: RouteSwitchProps) {
         if (!route.path && Array.isArray(route.routes)) {
           route.path = route.routes.map((r) => r.path) as any;
         }
+        let nextPath = route.path;
+        if (route.path && typeof route.path === 'string' && !route.path.startsWith('/')) {
+          nextPath = `${base.endsWith('/') ? base : base + '/'}${route.path}`;
+        }
         return (
           <Route
-            key={index}
-            path={route.path}
+            key={[nextPath].flat().join(',') as string}
+            path={nextPath}
             exact={route.exact}
             strict={route.strict}
             sensitive={route.sensitive}
-            render={(props) => {
-              return (
-                <RouteContext.Provider value={route}>
-                  <ComponentRenderer {...props} route={route} />
-                </RouteContext.Provider>
-              );
-            }}
-          />
+          >
+            <ComponentRenderer route={route} />
+          </Route>
         );
       })}
     </Switch>
@@ -50,10 +51,16 @@ export function RouteSwitch(props: RouteSwitchProps) {
 }
 
 function ComponentRenderer(props) {
-  const Component = useRouteComponent(props?.route?.component);
+  const { route } = props;
+  const Component = useRouteComponent(route?.component);
+  if (React.isValidElement(Component)) {
+    return React.cloneElement(Component, props, <RouteSwitch routes={route.routes} />);
+  }
   return (
-    <Component {...props}>
-      <RouteSwitch routes={props.route.routes} />
-    </Component>
+    <RouteContext.Provider value={route}>
+      <Component {...props}>
+        <RouteSwitch routes={route?.routes} />
+      </Component>
+    </RouteContext.Provider>
   );
 }
diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
index 6590e4072..57389782c 100644
--- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
+++ b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
@@ -286,19 +286,25 @@ export const InternalAdminLayout = (props: any) => {
   );
 };
 
+export const AdminProvider = (props) => {
+  return <CurrentAppInfoProvider>
+    <CurrentUserProvider>
+      <RemoteSchemaTemplateManagerProvider>
+        <RemoteCollectionManagerProvider>
+          <ACLRolesCheckProvider>
+            {props.children}
+          </ACLRolesCheckProvider>
+        </RemoteCollectionManagerProvider>
+      </RemoteSchemaTemplateManagerProvider>
+    </CurrentUserProvider>
+  </CurrentAppInfoProvider>
+}
+
 export const AdminLayout = (props) => {
   return (
-    <CurrentAppInfoProvider>
-      <CurrentUserProvider>
-        <RemoteSchemaTemplateManagerProvider>
-          <RemoteCollectionManagerProvider>
-            <ACLRolesCheckProvider>
-              <InternalAdminLayout {...props} />
-            </ACLRolesCheckProvider>
-          </RemoteCollectionManagerProvider>
-        </RemoteSchemaTemplateManagerProvider>
-      </CurrentUserProvider>
-    </CurrentAppInfoProvider>
+    <AdminProvider>
+      <InternalAdminLayout {...props} />
+    </AdminProvider>
   );
 };
 
diff --git a/packages/core/client/src/route-switch/context.ts b/packages/core/client/src/route-switch/context.ts
index 58659224e..4039d8a9c 100644
--- a/packages/core/client/src/route-switch/context.ts
+++ b/packages/core/client/src/route-switch/context.ts
@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 import { RouteProps } from './types';
 
 export const RouteSwitchContext = createContext({
@@ -7,3 +7,5 @@ export const RouteSwitchContext = createContext({
 });
 
 export const RouteContext = createContext<RouteProps>(null);
+
+export const useRouteSwitchContext = () => useContext(RouteSwitchContext);
diff --git a/packages/core/client/src/route-switch/types.ts b/packages/core/client/src/route-switch/types.ts
index 0712e5e22..0ffd721c2 100644
--- a/packages/core/client/src/route-switch/types.ts
+++ b/packages/core/client/src/route-switch/types.ts
@@ -31,4 +31,5 @@ export type RouteRedirectProps = RedirectProps | RouteProps;
 export interface RouteSwitchProps {
   routes?: RouteRedirectProps[];
   components?: any;
+  base?: string;
 }
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 6dc6be401..c1d692681 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
@@ -3,11 +3,10 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import { Drawer } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
-import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { OpenSize } from './';
 import { useActionContext } from './hooks';
 import { ComposedActionDrawer } from './types';
-import { OpenSize } from './';
 
 const openSizeWidthMap = new Map<OpenSize, string>([
   ['small', '30%'],
@@ -18,7 +17,7 @@ export const ActionDrawer: ComposedActionDrawer = observer(
   (props) => {
     const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
     const { t } = useTranslation();
-    const { visible, setVisible, openSize = 'middle' } = useActionContext();
+    const { visible, setVisible, openSize = 'middle', drawerProps } = useActionContext();
     const schema = useFieldSchema();
     const field = useField();
     const openSizeFromParent = schema.parent?.['x-component-props']?.['openSize'];
@@ -29,90 +28,86 @@ export const ActionDrawer: ComposedActionDrawer = observer(
       }
       return buf;
     });
+
     return (
-      <>
-        {createPortal(
-          <div
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            <Drawer
-              width={openSizeWidthMap.get(finalOpenSize)}
-              title={field.title}
-              {...others}
-              destroyOnClose
-              open={visible}
-              onClose={() => setVisible(false, true)}
-              className={classNames(
-                others.className,
-                css`
-                  &.nb-action-popup {
-                    .ant-drawer-header {
-                      display: none;
-                    }
-
-                    .ant-drawer-body {
-                      padding-top: 14px;
-                    }
-
-                    .ant-drawer-content {
-                      background: #f0f2f5;
-                    }
-                  }
-
-                  &.nb-record-picker-selector {
-                    .nb-block-item {
-                      margin-bottom: 24px;
-
-                      .general-schema-designer {
-                        top: -8px;
-                        bottom: -8px;
-                        left: -8px;
-                        right: -8px;
-                      }
-                    }
-                  }
-                `,
-              )}
-              footer={
-                footerSchema && (
-                  <div
-                    className={css`
-                      display: flex;
-                      justify-content: flex-end;
-                      width: 100%;
-
-                      .ant-btn {
-                        margin-right: 8px;
-                      }
-                    `}
-                  >
-                    <RecursionField
-                      basePath={field.address}
-                      schema={schema}
-                      onlyRenderProperties
-                      filterProperties={(s) => {
-                        return s['x-component'] === footerNodeName;
-                      }}
-                    />
-                  </div>
-                )
+      <Drawer
+        width={openSizeWidthMap.get(openSize)}
+        title={field.title}
+        {...others}
+        {...drawerProps}
+        style={{
+          ...drawerProps?.style,
+          ...others?.style,
+        }}
+        destroyOnClose
+        open={visible}
+        onClose={() => setVisible(false, true)}
+        className={classNames(
+          drawerProps?.className,
+          others.className,
+          css`
+            &.nb-action-popup {
+              .ant-drawer-header {
+                display: none;
               }
+
+              .ant-drawer-body {
+                padding-top: 14px;
+              }
+
+              .ant-drawer-content {
+                background: #f0f2f5;
+              }
+            }
+
+            &.nb-record-picker-selector {
+              .nb-block-item {
+                margin-bottom: 24px;
+
+                .general-schema-designer {
+                  top: -8px;
+                  bottom: -8px;
+                  left: -8px;
+                  right: -8px;
+                }
+              }
+            }
+          `,
+        )}
+        footer={
+          footerSchema && (
+            <div
+              className={css`
+                display: flex;
+                justify-content: flex-end;
+                width: 100%;
+
+                .ant-btn {
+                  margin-right: 8px;
+                }
+              `}
             >
               <RecursionField
                 basePath={field.address}
                 schema={schema}
                 onlyRenderProperties
                 filterProperties={(s) => {
-                  return s['x-component'] !== footerNodeName;
+                  return s['x-component'] === footerNodeName;
                 }}
               />
-            </Drawer>
-          </div>,
-          document.body,
-        )}
-      </>
+            </div>
+          )
+        }
+      >
+        <RecursionField
+          basePath={field.address}
+          schema={schema}
+          onlyRenderProperties
+          filterProperties={(s) => {
+            return s['x-component'] !== footerNodeName;
+          }}
+        />
+      </Drawer>
     );
   },
   { displayName: 'ActionDrawer' },
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
index d54774f90..c4703c8a3 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
@@ -3,7 +3,6 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import { Modal, ModalProps } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
-import { createPortal } from 'react-dom';
 import { OpenSize, useActionContext } from '.';
 import { ComposedActionDrawer } from './types';
 
@@ -15,7 +14,7 @@ const openSizeWidthMap = new Map<OpenSize, string>([
 export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
   (props) => {
     const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
-    const { visible, setVisible, openSize = 'large' } = useActionContext();
+    const { visible, setVisible, openSize = 'large', modalProps } = useActionContext();
     const actualWidth = width ?? openSizeWidthMap.get(openSize);
     const schema = useFieldSchema();
     const field = useField();
@@ -26,84 +25,79 @@ export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
       return buf;
     });
     return (
-      <>
-        {createPortal(
-          <div
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            <Modal
-              width={actualWidth}
-              title={field.title}
-              {...(others as ModalProps)}
-              destroyOnClose
-              visible={visible}
-              onCancel={() => setVisible(false, true)}
-              className={classNames(
-                others.className,
-                css`
-                  &.nb-action-popup {
-                    .ant-modal-header {
-                      display: none;
-                    }
-
-                    .ant-modal-body {
-                      padding-top: 16px;
-                    }
-
-                    .ant-modal-body {
-                      background: #f0f2f5;
-                    }
-
-                    .ant-modal-close-x {
-                      width: 32px;
-                      height: 32px;
-                      line-height: 32px;
-                    }
-                  }
-                `,
-              )}
-              footer={
-                footerSchema ? (
-                  <div
-                    className={css`
-                      display: flex;
-                      justify-content: flex-end;
-                      width: 100%;
-
-                      .ant-btn {
-                        margin-right: 8px;
-                      }
-                    `}
-                  >
-                    <RecursionField
-                      basePath={field.address}
-                      schema={schema}
-                      onlyRenderProperties
-                      filterProperties={(s) => {
-                        return s['x-component'] === footerNodeName;
-                      }}
-                    />
-                  </div>
-                ) : (
-                  false
-                )
+      <Modal
+        width={actualWidth}
+        title={field.title}
+        {...(others as ModalProps)}
+        {...modalProps}
+        style={{
+          ...modalProps?.style,
+          ...others?.style,
+        }}
+        destroyOnClose
+        open={visible}
+        onCancel={() => setVisible(false, true)}
+        className={classNames(
+          others.className,
+          modalProps?.className,
+          css`
+            &.nb-action-popup {
+              .ant-modal-header {
+                display: none;
               }
+
+              .ant-modal-body {
+                padding-top: 16px;
+              }
+
+              .ant-modal-body {
+                background: #f0f2f5;
+              }
+
+              .ant-modal-close-x {
+                width: 32px;
+                height: 32px;
+                line-height: 32px;
+              }
+            }
+          `,
+        )}
+        footer={
+          footerSchema ? (
+            <div
+              className={css`
+                display: flex;
+                justify-content: flex-end;
+                width: 100%;
+
+                .ant-btn {
+                  margin-right: 8px;
+                }
+              `}
             >
               <RecursionField
                 basePath={field.address}
                 schema={schema}
                 onlyRenderProperties
                 filterProperties={(s) => {
-                  return s['x-component'] !== footerNodeName;
+                  return s['x-component'] === footerNodeName;
                 }}
               />
-            </Modal>
-          </div>,
-          document.body,
-        )}
-      </>
+            </div>
+          ) : (
+            false
+          )
+        }
+      >
+        <RecursionField
+          basePath={field.address}
+          schema={schema}
+          onlyRenderProperties
+          filterProperties={(s) => {
+            return s['x-component'] !== footerNodeName;
+          }}
+        />
+      </Modal>
     );
   },
   { displayName: 'ActionModal' },
diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx
index 504f21ccd..4bc2d2c2b 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
 import { Button, Modal, Popover } from 'antd';
 import classnames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useActionContext } from '../..';
 import { useDesignable } from '../../';
 import { Icon } from '../../../icon';
@@ -16,7 +16,7 @@ import { ActionDrawer } from './Action.Drawer';
 import { ActionLink } from './Action.Link';
 import { ActionModal } from './Action.Modal';
 import { ActionPage } from './Action.Page';
-import { ActionContext } from './context';
+import { ActionContextProvider } from './context';
 import { useA } from './hooks';
 import { ComposedAction } from './types';
 import { linkageAction } from './utils';
@@ -95,16 +95,6 @@ export const Action: ComposedAction = observer(
     const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
     const { designable } = useDesignable();
     const tarComponent = useComponent(component) || component;
-    const renderTitle = useMemo(() => {
-      if (title) {
-        return title;
-      }
-      if (fieldSchema.title) {
-        return compile(fieldSchema.title);
-      }
-      return null;
-    }, [compile, fieldSchema.title, title]);
-
     useEffect(() => {
       field.linkageProperty = {};
       linkageRules
@@ -127,6 +117,7 @@ export const Action: ComposedAction = observer(
           icon={<Icon type={icon} />}
           disabled={disabled}
           style={{
+            ...others.style,
             opacity: designable && field?.data?.hidden && 0.1,
           }}
           onClick={(e: React.MouseEvent) => {
@@ -151,30 +142,28 @@ export const Action: ComposedAction = observer(
           component={tarComponent || Button}
           className={classnames(className, actionDesignerCss)}
         >
-          {renderTitle}
+          {title || compile(fieldSchema.title)}
           <Designer {...designerProps} />
         </SortableItem>
       );
     };
 
     return (
-      <ActionContext.Provider
-        value={{
-          button: renderButton(),
-          visible,
-          setVisible,
-          formValueChanged,
-          setFormValueChanged,
-          openMode,
-          openSize,
-          containerRefKey,
-          fieldSchema,
-        }}
+      <ActionContextProvider
+        button={renderButton()}
+        visible={visible}
+        setVisible={setVisible}
+        formValueChanged={formValueChanged}
+        setFormValueChanged={setFormValueChanged}
+        openMode={openMode}
+        openSize={openSize}
+        containerRefKey={containerRefKey}
+        fieldSchema={fieldSchema}
       >
         {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
         {!popover && renderButton()}
         {!popover && props.children}
-      </ActionContext.Provider>
+      </ActionContextProvider>
     );
   },
   { displayName: 'Action' },
diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
index 39c6cf12c..c91c1df79 100644
--- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
+++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
@@ -1,37 +1,81 @@
-import { css, cx } from '@emotion/css';
+import { cx } from '@emotion/css';
 import { observer, RecursionField, useFieldSchema } from '@formily/react';
 import { Space } from 'antd';
-import React from 'react';
+import React, { CSSProperties, useContext } from 'react';
+import { createPortal } from 'react-dom';
 import { useSchemaInitializer } from '../../../schema-initializer';
 import { DndContext } from '../../common';
 import { useDesignable, useProps } from '../../hooks';
 
+interface ActionBarContextForceProps {
+  layout?: 'one-column' | 'tow-columns';
+  style?: CSSProperties;
+  className?: string;
+}
+
+export interface ActionBarContextValue {
+  container?: Element | DocumentFragment;
+  /**
+   * override props
+   */
+  forceProps?: ActionBarContextForceProps;
+  parentComponents?: string[];
+}
+
+const ActionBarContext = React.createContext<ActionBarContextValue>({
+  container: null,
+});
+
+export const ActionBarProvider: React.FC<ActionBarContextValue> = ({ children, ...props }) => {
+  return <ActionBarContext.Provider value={props}>{children}</ActionBarContext.Provider>;
+};
+
+export const useActionBarContext = () => {
+  return useContext(ActionBarContext);
+};
+
+const Portal: React.FC = (props) => {
+  const filedSchema = useFieldSchema();
+  const { container, parentComponents = ['BlockItem', 'CardItem'] } = useActionBarContext();
+  return (
+    <>
+      {container && parentComponents.includes(filedSchema.parent['x-component'])
+        ? createPortal(props.children, container)
+        : props.children}
+    </>
+  );
+};
+
 export const ActionBar = observer(
   (props: any) => {
-    const { layout = 'tow-columns', style, spaceProps, ...others } = useProps(props);
+    const { forceProps = {} } = useActionBarContext();
+    const { layout = 'tow-columns', style, spaceProps, ...others } = { ...useProps(props), ...forceProps } as any;
     const fieldSchema = useFieldSchema();
     const { InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
     const { designable } = useDesignable();
+
     if (layout === 'one-column') {
       return (
-        <DndContext>
-          <div
-            style={{ display: 'flex', alignItems: 'center', ...style }}
-            {...others}
-            className={cx(others.className, 'nb-action-bar')}
-          >
-            {props.children && (
-              <div style={{ marginRight: 8 }}>
-                <Space {...spaceProps}>
-                  {fieldSchema.mapProperties((schema, key) => {
-                    return <RecursionField key={key} name={key} schema={schema} />;
-                  })}
-                </Space>
-              </div>
-            )}
-            <InitializerComponent />
-          </div>
-        </DndContext>
+        <Portal>
+          <DndContext>
+            <div
+              style={{ display: 'flex', alignItems: 'center', gap: 8, ...style }}
+              {...others}
+              className={cx(others.className, 'nb-action-bar')}
+            >
+              {props.children && (
+                <div>
+                  <Space {...spaceProps}>
+                    {fieldSchema.mapProperties((schema, key) => {
+                      return <RecursionField key={key} name={key} schema={schema} />;
+                    })}
+                  </Space>
+                </div>
+              )}
+              <InitializerComponent style={{ margin: '0 !important' }} />
+            </div>
+          </DndContext>
+        </Portal>
       );
     }
     const hasActions = Object.keys(fieldSchema.properties ?? {}).length > 0;
@@ -41,25 +85,18 @@ export const ActionBar = observer(
           !designable && !hasActions
             ? undefined
             : {
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              overflowX: 'auto',
-              flexShrink: 0,
-              ...style,
-            }
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                overflowX: 'auto',
+                flexShrink: 0,
+                ...style,
+              }
         }
         {...others}
         className={cx(others.className, 'nb-action-bar')}
       >
-        <div
-          className={css`
-            .ant-space:last-child {
-              margin-left: 8px;
-            }
-          `}
-          style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}
-        >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
           <DndContext>
             <Space {...spaceProps}>
               {fieldSchema.mapProperties((schema, key) => {
diff --git a/packages/core/client/src/schema-component/antd/action/context.tsx b/packages/core/client/src/schema-component/antd/action/context.tsx
index a49feefd3..d4b595124 100644
--- a/packages/core/client/src/schema-component/antd/action/context.tsx
+++ b/packages/core/client/src/schema-component/antd/action/context.tsx
@@ -1,8 +1,19 @@
 import { Schema } from '@formily/react';
-import { createContext } from 'react';
+import { DrawerProps, ModalProps } from 'antd';
+import React, { createContext } from 'react';
+import { useActionContext } from './hooks';
 
 export const ActionContext = createContext<ActionContextProps>({});
 
+export const ActionContextProvider: React.FC<ActionContextProps & { value?: ActionContextProps }> = (props) => {
+  const contextProps = useActionContext();
+  return (
+    <ActionContext.Provider value={{ ...contextProps, ...props, ...props?.value }}>
+      {props.children}
+    </ActionContext.Provider>
+  );
+};
+
 export type OpenSize = 'small' | 'middle' | 'large';
 export interface ActionContextProps {
   button?: any;
@@ -15,4 +26,6 @@ export interface ActionContextProps {
   formValueChanged?: boolean;
   setFormValueChanged?: (v: boolean) => void;
   fieldSchema?: Schema;
+  drawerProps?: DrawerProps;
+  modalProps?: ModalProps;
 }
diff --git a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
index 413d02fb0..4f41c2dbd 100644
--- a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
+++ b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
@@ -2,15 +2,16 @@ import { css } from '@emotion/css';
 import cls from 'classnames';
 import React from 'react';
 import { SortableItem } from '../../common';
-import { useDesigner } from '../../hooks';
+import { useDesigner, useProps } from '../../hooks';
 
 export const BlockItem: React.FC<any> = (props) => {
+  const { className, children } = useProps(props);
   const Designer = useDesigner();
   return (
     <SortableItem
       className={cls(
         'nb-block-item',
-        props.className,
+        className,
         css`
           position: relative;
           &:hover {
@@ -57,7 +58,7 @@ export const BlockItem: React.FC<any> = (props) => {
       )}
     >
       <Designer />
-      {props.children}
+      {children}
     </SortableItem>
   );
 };
diff --git a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
index 9839da5ae..998965d1e 100644
--- a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
+++ b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
@@ -12,7 +12,7 @@ export const CardItem: React.FC = (props) => {
 
   return templateKey && !template ? null : (
     <BlockItem className={'noco-card-item'}>
-      <Card style={{ marginBottom: 24 }} bordered={false} {...restProps}>
+      <Card style={{ marginBottom: 'var(--nb-spacing)' }} bordered={false} {...restProps}>
         {props.children}
       </Card>
     </BlockItem>
diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Designer.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Designer.tsx
index a224dd29e..d395b6f04 100644
--- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Designer.tsx
@@ -74,7 +74,6 @@ export const GridCardDesigner = () => {
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       <SchemaComponentOptions components={{ Slider }}>
-        <SchemaSettings.BlockTitleItem />
         <SchemaSettings.ModalItem
           title={t('Set the count of columns displayed in a row')}
           initialValues={columnCount}
@@ -155,7 +154,7 @@ export const GridCardDesigner = () => {
                           field: {
                             type: 'string',
                             enum: sortFields,
-                            required:true,
+                            required: true,
                             'x-decorator': 'FormItem',
                             'x-component': 'Select',
                             'x-component-props': {
diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
index 1f50982a3..ed45b5ad7 100644
--- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
+++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
@@ -5,7 +5,7 @@ import { List as AntdList, PaginationProps, Col } from 'antd';
 import { useGridCardActionBarProps } from './hooks';
 import { SortableItem } from '../../common';
 import { SchemaComponentOptions } from '../../core';
-import { useDesigner } from '../../hooks';
+import { useDesigner, useProps } from '../../hooks';
 import { GridCardItem } from './GridCard.Item';
 import { useGridCardBlockContext, useGridCardItemProps, GridCardBlockProvider } from './GridCard.Decorator';
 import { GridCardDesigner } from './GridCard.Designer';
@@ -55,7 +55,9 @@ const designerCss = css`
 `;
 
 const InternalGridCard = (props) => {
-  const { service, columnCount = defaultColumnCount } = useGridCardBlockContext();
+  const { columnCount: columnCountProp, pagination } = useProps(props);
+  const { service, _columnCount = defaultColumnCount } = useGridCardBlockContext();
+  const columnCount = columnCountProp || _columnCount;
   const { run, params } = service;
   const meta = service?.data?.meta;
   const fieldSchema = useFieldSchema();
@@ -70,7 +72,9 @@ const InternalGridCard = (props) => {
           new Schema({
             type: 'object',
             properties: {
-              [key]: fieldSchema.properties['item'],
+              [key]: {
+                ...fieldSchema.properties['item'],
+              },
             },
           }),
         );
@@ -104,6 +108,7 @@ const InternalGridCard = (props) => {
             !meta || meta.count <= meta.pageSize
               ? false
               : {
+                  ...pagination,
                   onChange: onPaginationChange,
                   total: meta?.count || 0,
                   pageSize: meta?.pageSize || 10,
diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
index abc4594b4..56918a0ed 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -332,6 +332,7 @@ export const useGridRowContext = () => {
 
 export const Grid: any = observer(
   (props: any) => {
+    const { showDivider = true } = props;
     const gridRef = useRef(null);
     const field = useField();
     const fieldSchema = useFieldSchema();
@@ -346,36 +347,40 @@ export const Grid: any = observer(
 
     return (
       <GridContext.Provider
-        value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}
+        value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent, showDivider }}
       >
         <div className={'nb-grid'} style={{ position: 'relative' }} ref={gridRef}>
           <DndWrapper dndContext={props.dndContext}>
-            <RowDivider
-              rows={rows}
-              first
-              id={`${addr}_0`}
-              data={{
-                breakRemoveOn: breakRemoveOnGrid,
-                wrapSchema: wrapRowSchema,
-                insertAdjacent: 'afterBegin',
-                schema: fieldSchema,
-              }}
-            />
+            {showDivider ? (
+              <RowDivider
+                rows={rows}
+                first
+                id={`${addr}_0`}
+                data={{
+                  breakRemoveOn: breakRemoveOnGrid,
+                  wrapSchema: wrapRowSchema,
+                  insertAdjacent: 'afterBegin',
+                  schema: fieldSchema,
+                }}
+              />
+            ) : null}
             {rows.map((schema, index) => {
               return (
                 <React.Fragment key={index}>
                   <RecursionField name={schema.name} schema={schema} />
-                  <RowDivider
-                    rows={rows}
-                    index={index}
-                    id={`${addr}_${index + 1}`}
-                    data={{
-                      breakRemoveOn: breakRemoveOnGrid,
-                      wrapSchema: wrapRowSchema,
-                      insertAdjacent: 'afterEnd',
-                      schema,
-                    }}
-                  />
+                  {showDivider ? (
+                    <RowDivider
+                      rows={rows}
+                      index={index}
+                      id={`${addr}_${index + 1}`}
+                      data={{
+                        breakRemoveOn: breakRemoveOnGrid,
+                        wrapSchema: wrapRowSchema,
+                        insertAdjacent: 'afterEnd',
+                        schema,
+                      }}
+                    />
+                  ) : null}
                 </React.Fragment>
               );
             })}
@@ -394,6 +399,7 @@ Grid.Row = observer(
     const fieldSchema = useFieldSchema();
     const addr = field.address.toString();
     const cols = useColProperties();
+    const { showDivider } = useGridContext();
 
     return (
       <GridRowContext.Provider value={{ schema: fieldSchema, cols }}>
@@ -402,40 +408,46 @@ Grid.Row = observer(
             'nb-grid-row',
             css`
               overflow-x: hidden;
-              margin: 0 calc(-1 * var(--nb-spacing));
               display: flex;
               position: relative;
               /* z-index: 0; */
             `,
           )}
+          style={{
+            margin: showDivider ? '0 calc(-1 * var(--nb-spacing))' : null,
+          }}
         >
-          <ColDivider
-            cols={cols}
-            first
-            id={`${addr}_0`}
-            data={{
-              breakRemoveOn: breakRemoveOnRow,
-              wrapSchema: wrapColSchema,
-              insertAdjacent: 'afterBegin',
-              schema: fieldSchema,
-            }}
-          />
+          {showDivider && (
+            <ColDivider
+              cols={cols}
+              first
+              id={`${addr}_0`}
+              data={{
+                breakRemoveOn: breakRemoveOnRow,
+                wrapSchema: wrapColSchema,
+                insertAdjacent: 'afterBegin',
+                schema: fieldSchema,
+              }}
+            />
+          )}
           {cols.map((schema, index) => {
             return (
               <React.Fragment key={index}>
                 <RecursionField name={schema.name} schema={schema} />
-                <ColDivider
-                  cols={cols}
-                  index={index}
-                  last={index === cols.length - 1}
-                  id={`${addr}_${index + 1}`}
-                  data={{
-                    breakRemoveOn: breakRemoveOnRow,
-                    wrapSchema: wrapColSchema,
-                    insertAdjacent: 'afterEnd',
-                    schema,
-                  }}
-                />
+                {showDivider && (
+                  <ColDivider
+                    cols={cols}
+                    index={index}
+                    last={index === cols.length - 1}
+                    id={`${addr}_${index + 1}`}
+                    data={{
+                      breakRemoveOn: breakRemoveOnRow,
+                      wrapSchema: wrapColSchema,
+                      insertAdjacent: 'afterEnd',
+                      schema,
+                    }}
+                  />
+                )}
               </React.Fragment>
             );
           })}
@@ -449,6 +461,7 @@ Grid.Row = observer(
 Grid.Col = observer(
   (props: any) => {
     const { cols = [] } = useContext(GridRowContext);
+    const { showDivider } = useGridContext();
     const schema = useFieldSchema();
     const field = useField();
 
@@ -456,7 +469,7 @@ Grid.Col = observer(
       let width = '';
       if (cols?.length) {
         const w = schema?.['x-component-props']?.['width'] || 100 / cols.length;
-        width = `calc(${w}% - var(--nb-spacing) *  ${(cols.length + 1) / cols.length})`;
+        width = `calc(${w}% - var(--nb-spacing) *  ${(showDivider ? cols.length + 1 : 0) / cols.length})`;
       }
       return width;
     }, [cols?.length, schema?.['x-component-props']?.['width']]);
@@ -477,5 +490,5 @@ Grid.Col = observer(
       </GridColContext.Provider>
     );
   },
-  { displayName: 'Grid.Col' },
+  { displayName: 'Grid.Row' },
 );
diff --git a/packages/core/client/src/schema-component/antd/index.less b/packages/core/client/src/schema-component/antd/index.less
index c94bc4408..9983da977 100644
--- a/packages/core/client/src/schema-component/antd/index.less
+++ b/packages/core/client/src/schema-component/antd/index.less
@@ -21,12 +21,22 @@
   --nb-designer-offset: -10px;
 }
 .theme-compact {
-  --nb-spacing: 16px;
+  --nb-spacing: 12px;
   --nb-designer-offset: -6px;
   .ant-formily-item {
-    margin-bottom: 16px;
+    margin-bottom: 12px;
   }
   .ant-card {
-    margin-bottom: 16px !important;
+    margin-bottom: 12px !important;
   }
 }
+
+.ant-formily-item-control-content-component .ant-tag {
+  white-space: pre-wrap;
+}
+
+html body {
+  --adm-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
+  Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+  Segoe UI Symbol;
+}
diff --git a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx b/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx
index 8dcd8db9d..ebc2fee89 100644
--- a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx
+++ b/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx
@@ -11,11 +11,13 @@ const FixedBlockContext = React.createContext<{
   height: number | string;
   fixedBlockUID: boolean | string;
   fixedBlockUIDRef: React.MutableRefObject<boolean | string>;
+  inFixedBlock: boolean;
 }>({
   setFixedBlock: () => {},
   height: 0,
   fixedBlockUID: false,
   fixedBlockUIDRef: { current: false },
+  inFixedBlock: false,
 });
 
 export const useFixedSchema = () => {
@@ -69,8 +71,9 @@ export const FixedBlockDesignerItem = () => {
   const fieldSchema = useFieldSchema();
   const { dn } = useDesignable();
   const record = useRecord();
+  const { inFixedBlock } = useFixedBlock();
 
-  if (Object.keys(record).length) {
+  if (Object.keys(record).length || !inFixedBlock) {
     return null;
   }
   return (
@@ -127,7 +130,7 @@ const FixedBlock: React.FC<FixedBlockProps> = (props) => {
     _setFixedBlock(v);
   };
   return (
-    <FixedBlockContext.Provider value={{ height, setFixedBlock, fixedBlockUID, fixedBlockUIDRef }}>
+    <FixedBlockContext.Provider value={{ inFixedBlock: true, height, setFixedBlock, fixedBlockUID, fixedBlockUIDRef }}>
       <div
         className={fixedBlockUID ? fixedBlockCss : ''}
         style={{
diff --git a/packages/core/client/src/schema-component/antd/page/Page.tsx b/packages/core/client/src/schema-component/antd/page/Page.tsx
index 2295cb2b6..92613373f 100644
--- a/packages/core/client/src/schema-component/antd/page/Page.tsx
+++ b/packages/core/client/src/schema-component/antd/page/Page.tsx
@@ -245,7 +245,7 @@ export const Page = (props) => {
                           <Tabs.TabPane
                             tab={
                               <SortableItem
-                                id={schema.name}
+                                id={schema.name as string}
                                 schema={schema}
                                 className={classNames('nb-action-link', designerCss, props.className)}
                               >
diff --git a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
index 29d4b8d95..00c0b8b92 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
@@ -10,7 +10,7 @@ import {
 import { CollectionProvider, useCollection } from '../../../collection-manager';
 import { FormProvider, SchemaComponentOptions } from '../../core';
 import { useCompile } from '../../hooks';
-import { ActionContext, useActionContext } from '../action';
+import { ActionContextProvider, useActionContext } from '../action';
 import { FileSelector } from '../preview';
 import { useFieldNames } from './useFieldNames';
 import { getLabelFormatValue, useLabelUiSchema } from './util';
@@ -269,7 +269,7 @@ const Drawer: React.FunctionComponent<{
   return (
     <RecordPickerProvider {...recordPickerProps}>
       <CollectionProvider allowNull name={collectionField?.target}>
-        <ActionContext.Provider value={{ openMode: 'drawer', visible, setVisible }}>
+        <ActionContextProvider openMode="drawer" visible={visible} setVisible={setVisible}>
           <FormProvider>
             <TableSelectorParamsProvider params={{ filter: getFilter() }}>
               <SchemaComponentOptions scope={{ useTableSelectorProps, usePickActionProps }}>
@@ -283,7 +283,7 @@ const Drawer: React.FunctionComponent<{
               </SchemaComponentOptions>
             </TableSelectorParamsProvider>
           </FormProvider>
-        </ActionContext.Provider>
+        </ActionContextProvider>
       </CollectionProvider>
     </RecordPickerProvider>
   );
diff --git a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
index 8121cf369..9d225052b 100644
--- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
@@ -1,13 +1,12 @@
 import { observer, RecursionField, useFieldSchema } from '@formily/react';
 import { toArr } from '@formily/shared';
 import React, { Fragment, useRef, useState } from 'react';
-import { WithoutTableFieldResource } from '../../../block-provider';
-import { BlockAssociationContext } from '../../../block-provider/BlockProvider';
+import { BlockAssociationContext, WithoutTableFieldResource } from '../../../block-provider';
 import { CollectionProvider, useCollection, useCollectionManager } from '../../../collection-manager';
 import { RecordProvider, useRecord } from '../../../record-provider';
 import { FormProvider } from '../../core';
 import { useCompile } from '../../hooks';
-import { ActionContext, useActionContext } from '../action';
+import { ActionContextProvider, useActionContext } from '../action';
 import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
 import { Preview } from '../preview';
 import { isShowFilePicker } from './InputRecordPicker';
@@ -56,8 +55,7 @@ export const ReadPrettyRecordPicker: React.FC = observer(
         const text = getLabelFormatValue(labelUiSchema, val, true);
         return (
           <Fragment key={`${record.id}_${index}`}>
-            {/* test-record-picker-read-pretty-item 用于在单元测试中方便选中元素 */}
-            <span className="test-record-picker-read-pretty-item">
+            <span>
               {snapshot || isTagsMode ? (
                 text
               ) : (
@@ -112,11 +110,11 @@ export const ReadPrettyRecordPicker: React.FC = observer(
             <EllipsisWithTooltip ellipsis={ellipsis} ref={ellipsisWithTooltipRef}>
               {renderRecords()}
             </EllipsisWithTooltip>
-            <ActionContext.Provider
+            <ActionContextProvider
               value={{ visible, setVisible, openMode: 'drawer', snapshot: collectionField.interface === 'snapshot' }}
             >
               {renderRecordProvider()}
-            </ActionContext.Provider>
+            </ActionContextProvider>
           </CollectionProvider>
         </BlockAssociationContext.Provider>
       </div>
diff --git a/packages/core/client/src/schema-component/antd/table-v2/index.ts b/packages/core/client/src/schema-component/antd/table-v2/index.ts
index 5aa731593..da8fbf138 100644
--- a/packages/core/client/src/schema-component/antd/table-v2/index.ts
+++ b/packages/core/client/src/schema-component/antd/table-v2/index.ts
@@ -10,6 +10,7 @@ import { TableSelector } from './TableSelector';
 export * from './TableBlockDesigner';
 export * from './TableField';
 export * from './TableSelectorDesigner';
+export * from './FilterDynamicComponent';
 
 export const TableV2 = Table;
 
diff --git a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
index 644f882de..60c025af0 100644
--- a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
+++ b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
@@ -7,15 +7,18 @@ import { Icon } from '../../../icon';
 import { useSchemaInitializer } from '../../../schema-initializer';
 import { DndContext, SortableItem } from '../../common';
 import { useDesigner } from '../../hooks/useDesigner';
+import { useTabsContext } from './context';
 import { TabsDesigner } from './Tabs.Designer';
 
 export const Tabs: any = observer(
   (props: TabsProps) => {
     const fieldSchema = useFieldSchema();
     const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
+    const contextProps = useTabsContext();
     return (
       <DndContext>
         <AntdTabs
+          {...contextProps}
           style={props.style}
           tabBarExtraContent={{
             right: render(),
@@ -93,7 +96,7 @@ Tabs.TabPane = observer(
       </SortableItem>
     );
   },
-  { displayName: 'TabPane' },
+  { displayName: 'Tabs.TabPane' },
 );
 
 Tabs.Designer = TabsDesigner;
diff --git a/packages/core/client/src/schema-component/antd/tabs/context.tsx b/packages/core/client/src/schema-component/antd/tabs/context.tsx
new file mode 100644
index 000000000..48b026b4b
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/tabs/context.tsx
@@ -0,0 +1,12 @@
+import { TabsProps } from 'antd';
+import React from 'react';
+
+const TabsContext = React.createContext<TabsProps>({});
+
+export const TabsContextProvider: React.FC<TabsProps> = ({ children, ...props }) => {
+  return <TabsContext.Provider value={props}>{children}</TabsContext.Provider>;
+};
+
+export const useTabsContext = () => {
+  return React.useContext(TabsContext);
+};
diff --git a/packages/core/client/src/schema-component/antd/tabs/index.ts b/packages/core/client/src/schema-component/antd/tabs/index.ts
index 856dbbb34..c6f0911ed 100644
--- a/packages/core/client/src/schema-component/antd/tabs/index.ts
+++ b/packages/core/client/src/schema-component/antd/tabs/index.ts
@@ -1 +1,2 @@
 export * from './Tabs';
+export * from './context';
diff --git a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
index d0d0263fd..1bc1e2563 100644
--- a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
+++ b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
@@ -1,6 +1,7 @@
 import { useDraggable, useDroppable } from '@dnd-kit/core';
-import { observer, useField, useFieldSchema } from '@formily/react';
-import React, { createContext, useContext } from 'react';
+import { cx } from '@emotion/css';
+import { observer, Schema, useField, useFieldSchema } from '@formily/react';
+import React, { createContext, HTMLAttributes, useContext } from 'react';
 
 export const DraggableContext = createContext(null);
 export const SortableContext = createContext(null);
@@ -19,18 +20,21 @@ export const SortableProvider = (props) => {
 };
 
 export const Sortable = (props: any) => {
-  const { component, style, children, openMode, ...others } = props;
-  const { droppable } = useContext(SortableContext);
+  const { component, overStyle, style, children, openMode, ...others } = props;
+  const { draggable, droppable } = useContext(SortableContext);
   const { isOver, setNodeRef } = droppable;
   const droppableStyle = { ...style };
 
-  if (isOver) {
-    droppableStyle['color'] = 'rgba(241, 139, 98, .1)';
+  if (isOver && draggable?.active?.id !== droppable?.over?.id) {
+    droppableStyle[component === 'a' ? 'color' : 'background'] = 'rgba(241, 139, 98, .15)';
+    Object.assign(droppableStyle, overStyle);
   }
+
   return React.createElement(
     component || 'div',
     {
       ...others,
+      className: cx('nb-sortable-designer', props.className),
       ref: setNodeRef,
       style: droppableStyle,
     },
@@ -55,9 +59,15 @@ const useSortableItemId = (props) => {
   return field.address.toString();
 };
 
-export const SortableItem: React.FC<any> = observer(
+interface SortableItemProps extends HTMLAttributes<HTMLDivElement> {
+  eid?: string;
+  schema?: Schema;
+  removeParentsIfNoChildren?: boolean;
+}
+
+export const SortableItem: React.FC<SortableItemProps> = observer(
   (props) => {
-    const { schema, id, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
+    const { schema, id, eid, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
     return (
       <SortableProvider
         id={id}
@@ -67,7 +77,9 @@ export const SortableItem: React.FC<any> = observer(
           removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
         }}
       >
-        <Sortable {...others}>{props.children}</Sortable>
+        <Sortable id={eid} {...others}>
+          {props.children}
+        </Sortable>
       </SortableProvider>
     );
   },
diff --git a/packages/core/client/src/schema-component/hooks/useDesignable.tsx b/packages/core/client/src/schema-component/hooks/useDesignable.tsx
index 1c48dcf76..7a607e4ae 100644
--- a/packages/core/client/src/schema-component/hooks/useDesignable.tsx
+++ b/packages/core/client/src/schema-component/hooks/useDesignable.tsx
@@ -144,7 +144,7 @@ export class Designable {
       if (!current['x-uid']) {
         return;
       }
-      await api.request({
+      const res = await api.request({
         url: `/uiSchemas:insertAdjacent/${current['x-uid']}?position=${position}`,
         method: 'post',
         data: {
@@ -165,7 +165,7 @@ export class Designable {
           method: 'post',
         });
       }
-      onSuccess?.();
+      onSuccess?.(res?.data?.data);
       message.success(t('Saved successfully'), 0.2);
     });
     this.on('patch', async ({ schema }) => {
@@ -321,7 +321,7 @@ export class Designable {
         removed = parent;
       }
     }
-    this.emit('remove', { removed });
+    return this.emit('remove', { removed });
   }
 
   removeWithoutEmit(schema?: Schema, options: RemoveOptions = {}) {
@@ -501,7 +501,7 @@ export class Designable {
     const s = this.current.addProperty(wrapped.name || uid(), wrapped);
     s.parent = this.current;
     const [schema1, schema2] = splitWrapSchema(s, schema);
-    this.emit('insertAdjacent', {
+    return this.emit('insertAdjacent', {
       position: 'beforeEnd',
       schema: schema2,
       wrap: schema1,
diff --git a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
index 2b71c8f76..8e8aca93d 100644
--- a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
+++ b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
-import { ISchema, observer } from '@formily/react';
+import { ISchema, observer, useForm } from '@formily/react';
 import { Button, Dropdown, Menu, Switch } from 'antd';
 import classNames from 'classnames';
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { Icon } from '../icon';
+import { SchemaComponent, useActionContext } from '../schema-component';
 import { useCompile, useDesignable } from '../schema-component/hooks';
 import './style.less';
 import {
@@ -106,6 +107,24 @@ SchemaInitializer.Button = observer(
           }
         });
     };
+
+    const buttonDom = (
+      <Button
+        type={'dashed'}
+        style={{
+          borderColor: '#f18b62',
+          color: '#f18b62',
+          ...style,
+        }}
+        {...others}
+        icon={typeof icon === 'string' ? <Icon type={icon as string} /> : icon}
+      >
+        {compile(props.children || props.title)}
+      </Button>
+    );
+    if (!items.length) {
+      return buttonDom;
+    }
     const menu = <Menu style={{ maxHeight: '60vh', overflowY: 'auto' }}>{renderItems(items)}</Menu>;
     if (!designable && props.designable !== true) {
       return null;
@@ -131,22 +150,7 @@ SchemaInitializer.Button = observer(
           {...dropdown}
           overlay={menu}
         >
-          {component ? (
-            component
-          ) : (
-            <Button
-              type={'dashed'}
-              style={{
-                borderColor: '#f18b62',
-                color: '#f18b62',
-                ...style,
-              }}
-              {...others}
-              icon={<Icon type={icon as string} />}
-            >
-              {compile(props.children || props.title)}
-            </Button>
-          )}
+          {component ? component : buttonDom}
         </Dropdown>
       </SchemaInitializerButtonContext.Provider>
     );
@@ -242,6 +246,102 @@ SchemaInitializer.itemWrap = (component?: SchemaInitializerItemComponent) => {
   return component;
 };
 
+interface SchemaInitializerActionModalProps {
+  title: string;
+  schema: any;
+  onCancel?: () => void;
+  onSubmit?: (values: any) => void;
+  buttonText?: any;
+}
+SchemaInitializer.ActionModal = (props: SchemaInitializerActionModalProps) => {
+  const { title, schema, buttonText, onCancel, onSubmit } = props;
+
+  const useCancelAction = useCallback(() => {
+    const form = useForm();
+    const ctx = useActionContext();
+    return {
+      async run() {
+        await onCancel?.();
+        ctx.setVisible(false);
+        form.reset();
+      },
+    };
+  }, [onCancel]);
+
+  const useSubmitAction = useCallback(() => {
+    const form = useForm();
+    const ctx = useActionContext();
+    return {
+      async run() {
+        await form.validate();
+        await onSubmit?.(form.values);
+        ctx.setVisible(false);
+        form.reset();
+      },
+    };
+  }, [onSubmit]);
+  const defaultSchema = useMemo(() => {
+    return {
+      type: 'void',
+      properties: {
+        action1: {
+          type: 'void',
+          'x-component': 'Action',
+          'x-component-props': {
+            icon: 'PlusOutlined',
+            style: {
+              borderColor: 'rgb(241, 139, 98)',
+              color: 'rgb(241, 139, 98)',
+            },
+            title: buttonText,
+            type: 'dashed',
+          },
+          properties: {
+            drawer1: {
+              'x-decorator': 'Form',
+              'x-component': 'Action.Modal',
+              'x-component-props': {
+                style: {
+                  maxWidth: '520px',
+                  width: '100%',
+                },
+              },
+              type: 'void',
+              title,
+              properties: {
+                ...(schema?.properties || schema),
+                footer: {
+                  'x-component': 'Action.Modal.Footer',
+                  type: 'void',
+                  properties: {
+                    cancel: {
+                      title: '{{t("Cancel")}}',
+                      'x-component': 'Action',
+                      'x-component-props': {
+                        useAction: useCancelAction,
+                      },
+                    },
+                    submit: {
+                      title: '{{t("Submit")}}',
+                      'x-component': 'Action',
+                      'x-component-props': {
+                        type: 'primary',
+                        useAction: useSubmitAction,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+  }, [buttonText, schema, title, useCancelAction, useSubmitAction]);
+
+  return <SchemaComponent schema={defaultSchema as any} />;
+};
+
 SchemaInitializer.SwitchItem = (props) => {
   return (
     <SchemaInitializer.Item onClick={props.onClick}>
diff --git a/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx b/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx
index b34a6454c..7c39e3f11 100644
--- a/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx
+++ b/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx
@@ -4,9 +4,7 @@ import { SchemaComponent, useActionContext, useDesignable, useRecordIndex } from
 
 export const TabPaneInitializers = (props?: any) => {
   const { designable, insertBeforeEnd } = useDesignable();
-  if (!designable) {
-    return null;
-  }
+
   const useSubmitAction = () => {
     const form = useForm();
     const ctx = useActionContext();
@@ -118,6 +116,11 @@ export const TabPaneInitializers = (props?: any) => {
       },
     };
   }, []);
+
+  if (!designable) {
+    return null;
+  }
+
   return <SchemaComponent schema={schema} />;
 };
 
diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts
index fa6759d81..33b9459a7 100644
--- a/packages/core/client/src/schema-initializer/utils.ts
+++ b/packages/core/client/src/schema-initializer/utils.ts
@@ -1064,6 +1064,9 @@ export const createGridCardBlockSchema = (options) => {
       ...others,
     },
     'x-component': 'BlockItem',
+    'x-component-props': {
+      useProps: '{{ useGridCardBlockItemProps }}',
+    },
     'x-designer': 'GridCard.Designer',
     properties: {
       actionBar: {
@@ -1081,7 +1084,7 @@ export const createGridCardBlockSchema = (options) => {
         type: 'array',
         'x-component': 'GridCard',
         'x-component-props': {
-          props: '{{ useGridCardBlockProps }}',
+          useProps: '{{ useGridCardBlockProps }}',
         },
         properties: {
           item: {
diff --git a/packages/core/client/src/schema-items/GeneralSchemaItems.tsx b/packages/core/client/src/schema-items/GeneralSchemaItems.tsx
index ea621f3a5..5ee3bc736 100644
--- a/packages/core/client/src/schema-items/GeneralSchemaItems.tsx
+++ b/packages/core/client/src/schema-items/GeneralSchemaItems.tsx
@@ -56,7 +56,7 @@ export const GeneralSchemaItems: React.FC<{
           />
         )}
         <SchemaSettings.SwitchItem
-          checked={field.decoratorProps.showTitle ?? true}
+          checked={fieldSchema['x-decorator-props']?.['showTitle'] ?? true}
           title={t('Display title')}
           onChange={(checked) => {
             fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
diff --git a/packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx b/packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx
index 02ee01c79..5fafc6fe2 100644
--- a/packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx
+++ b/packages/core/client/src/schema-settings/GeneralSchemaDesigner.tsx
@@ -31,6 +31,11 @@ const titleCss = css`
   }
 `;
 
+const overrideAntdCSS = css`
+  & .ant-space-item .anticon {
+    margin: 0;
+  }
+`;
 export const GeneralSchemaDesigner = (props: any) => {
   const { disableInitializer, title, template, draggable = true } = props;
   const { dn, designable } = useDesignable();
@@ -62,7 +67,7 @@ export const GeneralSchemaDesigner = (props: any) => {
   }
 
   return (
-    <div className={'general-schema-designer'}>
+    <div className={classNames('general-schema-designer', overrideAntdCSS)}>
       {title && (
         <div className={classNames('general-schema-designer-title', titleCss)}>
           <Space size={2}>
diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx
index c407f95e6..22f922389 100644
--- a/packages/core/client/src/schema-settings/SchemaSettings.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx
@@ -148,7 +148,7 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
 };
 
 SchemaSettings.Template = function Template(props) {
-  const { componentName, collectionName, resourceName } = props;
+  const { componentName, collectionName, resourceName, needRender } = props;
   const { t } = useTranslation();
   const { getCollection } = useCollectionManager();
   const { dn, setVisible, template, fieldSchema } = useSchemaSettings();
@@ -156,7 +156,7 @@ SchemaSettings.Template = function Template(props) {
   const api = useAPIClient();
   const { dn: tdn } = useBlockTemplateContext();
   const { saveAsTemplate, copyTemplateSchema } = useSchemaTemplateManager();
-  if (!collectionName) {
+  if (!collectionName && !needRender) {
     return null;
   }
   if (template) {
@@ -182,7 +182,7 @@ SchemaSettings.Template = function Template(props) {
     <SchemaSettings.Item
       onClick={async () => {
         setVisible(false);
-        const { title } = getCollection(collectionName);
+        const { title } = collectionName ? getCollection(collectionName) : { title: '' };
         const values = await FormDialog(t('Save as template'), () => {
           return (
             <FormLayout layout={'vertical'}>
@@ -194,7 +194,7 @@ SchemaSettings.Template = function Template(props) {
                     name: {
                       title: t('Template name'),
                       required: true,
-                      default: `${compile(title)}_${t(componentName)}`,
+                      default: title ? `${compile(title)}_${t(componentName)}` : t(componentName),
                       'x-decorator': 'FormItem',
                       'x-component': 'Input',
                     },
diff --git a/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx b/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
index c01567f45..ef5727820 100644
--- a/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
+++ b/packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx
@@ -123,6 +123,10 @@ export const useSchemaTemplateManager = () => {
       const items = templates?.filter?.((template) => template.collectionName === collectionName);
       return items || [];
     },
+    getTemplatesByComponentName(componentName: string): Array<any> {
+      const items = templates?.filter?.((template) => template.componentName === componentName);
+      return items || [];
+    },
   };
 };
 
diff --git a/packages/core/client/src/user/ChangePassword.tsx b/packages/core/client/src/user/ChangePassword.tsx
index 6ad06f300..d61dda021 100644
--- a/packages/core/client/src/user/ChangePassword.tsx
+++ b/packages/core/client/src/user/ChangePassword.tsx
@@ -3,7 +3,7 @@ import { uid } from '@formily/shared';
 import { Menu } from 'antd';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionContext, SchemaComponent, useActionContext } from '../';
+import { ActionContextProvider, SchemaComponent, useActionContext } from '../';
 import { useAPIClient } from '../api-client';
 import { DropdownVisibleContext } from './CurrentUser';
 
@@ -119,7 +119,7 @@ export const ChangePassword = () => {
   const { t } = useTranslation();
   const ctx = useContext(DropdownVisibleContext);
   return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
+    <ActionContextProvider value={{ visible, setVisible }}>
       <Menu.Item
         key="password"
         eventKey={'ChangePassword'}
@@ -131,6 +131,6 @@ export const ChangePassword = () => {
         {t('Change password')}
       </Menu.Item>
       <SchemaComponent scope={{ useCloseAction, useSaveCurrentUserValues }} schema={schema} />
-    </ActionContext.Provider>
+    </ActionContextProvider>
   );
 };
diff --git a/packages/core/client/src/user/CurrentUser.tsx b/packages/core/client/src/user/CurrentUser.tsx
index 2c2821b2b..eecccbf3f 100644
--- a/packages/core/client/src/user/CurrentUser.tsx
+++ b/packages/core/client/src/user/CurrentUser.tsx
@@ -10,7 +10,6 @@ import { EditProfile } from './EditProfile';
 import { LanguageSettings } from './LanguageSettings';
 import { SwitchRole } from './SwitchRole';
 import { ThemeSettings } from './ThemeSettings';
-
 const ApplicationVersion = () => {
   const data = useCurrentAppInfo();
   return (
@@ -20,16 +19,18 @@ const ApplicationVersion = () => {
   );
 };
 
-export const DropdownVisibleContext = createContext(null);
-
-export const CurrentUser = () => {
+/**
+ * @note If you want to change here, Note the Setting block on the mobile side
+ */
+export const SettingsMenu: React.FC<{
+  redirectUrl?: string;
+}> = (props) => {
+  const { redirectUrl = '' } = props;
+  const { allowAll, snippets } = useACLRoleContext();
+  const appAllowed = allowAll || snippets?.includes('app');
   const history = useHistory();
   const api = useAPIClient();
   const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
-  const { data } = useCurrentUserContext();
-  const { allowAll, snippets } = useACLRoleContext();
-  const appAllowed = allowAll || snippets?.includes('app');
   const silenceApi = useAPIClient();
   const check = async () => {
     return await new Promise((resolve) => {
@@ -52,6 +53,69 @@ export const CurrentUser = () => {
       }, 3000);
     });
   };
+  return (
+    <Menu>
+      <ApplicationVersion />
+      <Menu.Divider />
+      <EditProfile />
+      <ChangePassword />
+      <Menu.Divider />
+      <SwitchRole />
+      <LanguageSettings />
+      <ThemeSettings />
+      <Menu.Divider />
+      {appAllowed && (
+        <>
+          <Menu.Item
+            key="cache"
+            onClick={async () => {
+              await api.resource('app').clearCache();
+              window.location.reload();
+            }}
+          >
+            {t('Clear cache')}
+          </Menu.Item>
+          <Menu.Item
+            key="reboot"
+            onClick={async () => {
+              Modal.confirm({
+                title: t('Reboot application'),
+                content: t(
+                  'The will interrupt service, it may take a few seconds to restart. Are you sure to continue?',
+                ),
+                okText: t('Reboot'),
+                okButtonProps: {
+                  danger: true,
+                },
+                onOk: async () => {
+                  await api.resource('app').reboot();
+                  await check();
+                  window.location.reload();
+                },
+              });
+            }}
+          >
+            {t('Reboot application')}
+          </Menu.Item>
+          <Menu.Divider />
+        </>
+      )}
+      <Menu.Item
+        key="signout"
+        onClick={async () => {
+          await api.auth.signOut();
+          history.push(`/signin?redirect=${encodeURIComponent(redirectUrl)}`);
+        }}
+      >
+        {t('Sign out')}
+      </Menu.Item>
+    </Menu>
+  );
+};
+export const DropdownVisibleContext = createContext(null);
+export const CurrentUser = () => {
+  const [visible, setVisible] = useState(false);
+  const { data } = useCurrentUserContext();
   return (
     <div style={{ display: 'inline-flex', verticalAlign: 'top' }}>
       <DropdownVisibleContext.Provider value={{ visible, setVisible }}>
@@ -60,64 +124,7 @@ export const CurrentUser = () => {
           onOpenChange={(visible) => {
             setVisible(visible);
           }}
-          overlay={
-            <Menu>
-              <ApplicationVersion />
-              <Menu.Divider />
-              <EditProfile />
-              <ChangePassword />
-              <Menu.Divider />
-              <SwitchRole />
-              <LanguageSettings />
-              <ThemeSettings />
-              <Menu.Divider />
-              {appAllowed && (
-                <>
-                  <Menu.Item
-                    key="cache"
-                    onClick={async () => {
-                      await api.resource('app').clearCache();
-                      window.location.reload();
-                    }}
-                  >
-                    {t('Clear cache')}
-                  </Menu.Item>
-                  <Menu.Item
-                    key="reboot"
-                    onClick={async () => {
-                      Modal.confirm({
-                        title: t('Reboot application'),
-                        content: t(
-                          'The will interrupt service, it may take a few seconds to restart. Are you sure to continue?',
-                        ),
-                        okText: t('Reboot'),
-                        okButtonProps: {
-                          danger: true,
-                        },
-                        onOk: async () => {
-                          await api.resource('app').reboot();
-                          await check();
-                          window.location.reload();
-                        },
-                      });
-                    }}
-                  >
-                    {t('Reboot application')}
-                  </Menu.Item>
-                  <Menu.Divider />
-                </>
-              )}
-              <Menu.Item
-                key="signout"
-                onClick={async () => {
-                  await api.auth.signOut();
-                  history.push('/signin');
-                }}
-              >
-                {t('Sign out')}
-              </Menu.Item>
-            </Menu>
-          }
+          overlay={<SettingsMenu />}
         >
           <span
             className={css`
diff --git a/packages/core/client/src/user/EditProfile.tsx b/packages/core/client/src/user/EditProfile.tsx
index 4d1ce4bec..85a68ade3 100644
--- a/packages/core/client/src/user/EditProfile.tsx
+++ b/packages/core/client/src/user/EditProfile.tsx
@@ -4,7 +4,7 @@ import { Menu } from 'antd';
 import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  ActionContext,
+  ActionContextProvider,
   DropdownVisibleContext,
   SchemaComponent,
   useActionContext,
@@ -119,18 +119,18 @@ export const EditProfile = () => {
   const { t } = useTranslation();
   const ctx = useContext(DropdownVisibleContext);
   return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
+    <ActionContextProvider value={{ visible, setVisible }}>
       <Menu.Item
         key="profile"
         eventKey={'EditProfile'}
         onClick={() => {
           setVisible(true);
-          ctx.setVisible(false);
+          ctx?.setVisible(false);
         }}
       >
         {t('Edit profile')}
       </Menu.Item>
       <SchemaComponent scope={{ useCurrentUserValues, useCloseAction, useSaveCurrentUserValues }} schema={schema} />
-    </ActionContext.Provider>
+    </ActionContextProvider>
   );
 };
diff --git a/packages/core/client/src/user/SigninPage.tsx b/packages/core/client/src/user/SigninPage.tsx
index 6060985c4..c98b8beb4 100644
--- a/packages/core/client/src/user/SigninPage.tsx
+++ b/packages/core/client/src/user/SigninPage.tsx
@@ -54,7 +54,7 @@ export function useRedirect(next = '/admin') {
   const history = useHistory();
   const redirect = location?.['query']?.redirect;
   return useCallback(() => {
-    history.push(redirect || '/admin');
+    history.replace(redirect || '/admin');
   }, [redirect]);
 }
 
diff --git a/packages/core/client/src/user/SwitchRole.tsx b/packages/core/client/src/user/SwitchRole.tsx
index a5d0c828e..c621ae281 100644
--- a/packages/core/client/src/user/SwitchRole.tsx
+++ b/packages/core/client/src/user/SwitchRole.tsx
@@ -31,7 +31,6 @@ export const SwitchRole = () => {
   const api = useAPIClient();
   const roles = useCurrentRoles();
   const { t } = useTranslation();
-  const history = useHistory();
   if (roles.length <= 1) {
     return null;
   }
@@ -57,7 +56,7 @@ export const SwitchRole = () => {
           onChange={async (roleName) => {
             api.auth.setRole(roleName);
             await api.resource('users').setDefaultRole({ values: { roleName } });
-            history.push('/');
+            location.reload();
             window.location.reload();
           }}
         />
diff --git a/packages/plugins/map/src/client/components/AMap.tsx b/packages/plugins/map/src/client/components/AMap.tsx
index f341ea564..a37523f75 100644
--- a/packages/plugins/map/src/client/components/AMap.tsx
+++ b/packages/plugins/map/src/client/components/AMap.tsx
@@ -5,7 +5,7 @@ import { css } from '@emotion/css';
 import { useFieldSchema } from '@formily/react';
 import { useCollection } from '@nocobase/client';
 import { useMemoizedFn } from 'ahooks';
-import { Alert, Button, Modal } from 'antd';
+import { Alert, Button, Modal, Spin } from 'antd';
 import React, { useEffect, useCallback, useRef, useState, useMemo, useImperativeHandle } from 'react';
 import { useHistory } from 'react-router';
 import { useMapConfiguration } from '../hooks';
@@ -102,7 +102,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
   const overlay = useRef<AMap.Polygon>();
   const editor = useRef(null);
   const history = useHistory();
-  const id = useRef(`nocobase-map-${type}-${Date.now().toString(32)}`);
+  const id = useRef(`nocobase-map-${type || ''}-${Date.now().toString(32)}`);
 
   const [commonOptions] = useState<AMap.PolylineOptions & AMap.PolygonOptions>({
     strokeWeight: 5,
@@ -316,7 +316,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
       plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.CircleEditor'],
     })
       .then((amap) => {
-        requestIdleCallback(() => {
+        return requestIdleCallback(() => {
           map.current = new amap.Map(id.current, {
             resizeEnable: true,
             zoom,
@@ -327,10 +327,14 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
         });
       })
       .catch((err) => {
-        if (err.includes('多个不一致的 key')) {
-          setErrMessage(t('The AccessKey is incorrect, please check it'));
-        } else {
-          setErrMessage(err);
+        if (typeof err === 'string') {
+          if (err.includes('多个不一致的 key')) {
+            setErrMessage(t('The AccessKey is incorrect, please check it'));
+          } else {
+            setErrMessage(err);
+          }
+        } else if (err?.type === 'error') {
+          setErrMessage('Something went wrong, please refresh the page and try again');
         }
       });
 
@@ -379,6 +383,19 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
       id={id.current}
       style={props?.style}
     >
+      {!aMap.current && (
+        <div
+          className={css`
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          `}
+        >
+          <Spin />
+        </div>
+      )}
       {!disabled ? (
         <>
           <Search toCenter={toCenter} aMap={aMap.current} />
diff --git a/packages/plugins/mobile-client/client.d.ts b/packages/plugins/mobile-client/client.d.ts
new file mode 100755
index 000000000..765db9222
--- /dev/null
+++ b/packages/plugins/mobile-client/client.d.ts
@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/client';
+export { default } from './lib/client';
+
diff --git a/packages/plugins/mobile-client/client.js b/packages/plugins/mobile-client/client.js
new file mode 100755
index 000000000..238820257
--- /dev/null
+++ b/packages/plugins/mobile-client/client.js
@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/client"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});
diff --git a/packages/plugins/mobile-client/docs/en-US/index.md b/packages/plugins/mobile-client/docs/en-US/index.md
new file mode 100644
index 000000000..7f6a2def3
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/en-US/index.md
@@ -0,0 +1,7 @@
+# Mobile-client overview
+
+Provides a mobile client for the desktop client.
+
+## How to visit mobile client?
+
+When your desktop client is started, you can visit the mobile client in the browser by entering `http://localhost:3000/mobile`. Note that `/mobile` is the route of our mobile client.
\ No newline at end of file
diff --git a/packages/plugins/mobile-client/docs/en-US/installation.md b/packages/plugins/mobile-client/docs/en-US/installation.md
new file mode 100644
index 000000000..23dc4aa37
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/en-US/installation.md
@@ -0,0 +1,13 @@
+# Mobile-client Installation
+
+## Installation
+
+```bash
+yarn add @nocobase/plugin-mobile-client
+```
+
+## Activate the plugin
+
+```bash
+yarn pm enable mobile-client
+```
diff --git a/packages/plugins/mobile-client/docs/en-US/tabs.json b/packages/plugins/mobile-client/docs/en-US/tabs.json
new file mode 100644
index 000000000..e52646276
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/en-US/tabs.json
@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Introduction",
+    "path": "index"
+  },
+  {
+    "title": "Installation",
+    "path": "installation"
+  },
+  {
+    "title": "Usage",
+    "path": "usage"
+  }
+]
diff --git a/packages/plugins/mobile-client/docs/en-US/usage.md b/packages/plugins/mobile-client/docs/en-US/usage.md
new file mode 100644
index 000000000..5b42851e8
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/en-US/usage.md
@@ -0,0 +1 @@
+# Mobile-client Usage
diff --git a/packages/plugins/mobile-client/docs/zh-CN/index.md b/packages/plugins/mobile-client/docs/zh-CN/index.md
new file mode 100644
index 000000000..694fc51c5
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/zh-CN/index.md
@@ -0,0 +1,7 @@
+# 移动端
+
+提供移动端应用，独立于桌面端。
+
+## 如何访问？
+
+当你的桌面端启动后，可以在浏览器中输入 `http://localhost:3000/mobile` 访问移动端。注意，`/mobile` 就是我们移动端的路由。
\ No newline at end of file
diff --git a/packages/plugins/mobile-client/docs/zh-CN/installation.md b/packages/plugins/mobile-client/docs/zh-CN/installation.md
new file mode 100644
index 000000000..9c3854a6d
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/zh-CN/installation.md
@@ -0,0 +1,13 @@
+# 移动端安装方法
+
+## 安装
+
+```bash
+yarn add @nocobase/plugin-mobile-client
+```
+
+## 激活插件
+
+```bash
+yarn pm enable mobile-client
+```
diff --git a/packages/plugins/mobile-client/docs/zh-CN/tabs.json b/packages/plugins/mobile-client/docs/zh-CN/tabs.json
new file mode 100644
index 000000000..474ae057b
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/zh-CN/tabs.json
@@ -0,0 +1,14 @@
+[
+  {
+    "title": "介绍",
+    "path": "index"
+  },
+  {
+    "title": "安装",
+    "path": "installation"
+  },
+  {
+    "title": "用法",
+    "path": "usage"
+  }
+]
diff --git a/packages/plugins/mobile-client/docs/zh-CN/usage.md b/packages/plugins/mobile-client/docs/zh-CN/usage.md
new file mode 100644
index 000000000..cd7c194e5
--- /dev/null
+++ b/packages/plugins/mobile-client/docs/zh-CN/usage.md
@@ -0,0 +1,2 @@
+# 移动端用法
+
diff --git a/packages/plugins/mobile-client/package.json b/packages/plugins/mobile-client/package.json
new file mode 100644
index 000000000..bc6e8fbc8
--- /dev/null
+++ b/packages/plugins/mobile-client/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@nocobase/plugin-mobile-client",
+  "version": "0.9.4-alpha.2",
+  "main": "lib/server/index.js",
+  "displayName": "Mobile-client",
+  "displayName.zh-CN": "移动端",
+  "description": "Provide mobile client access",
+  "description.zh-CN": "提供移动端访问",
+  "devDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@formily/react": "2.2.24",
+    "@formily/shared": "2.2.24",
+    "@formily/antd": "2.2.24",
+    "@nocobase/server": "0.9.4-alpha.2",
+    "@nocobase/test": "0.9.4-alpha.2",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "classnames": "^2.3.1",
+    "react": "17.x",
+    "react-dom": "17.x",
+    "react-router-dom": "^5.2.0",
+    "antd": "^4.24.8"
+  },
+  "dependencies": {
+    "antd-mobile": "^5.29.1"
+  }
+}
\ No newline at end of file
diff --git a/packages/plugins/mobile-client/server.d.ts b/packages/plugins/mobile-client/server.d.ts
new file mode 100755
index 000000000..e70edb928
--- /dev/null
+++ b/packages/plugins/mobile-client/server.d.ts
@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/server';
+export { default } from './lib/server';
+
diff --git a/packages/plugins/mobile-client/server.js b/packages/plugins/mobile-client/server.js
new file mode 100755
index 000000000..d06a7eb92
--- /dev/null
+++ b/packages/plugins/mobile-client/server.js
@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/server"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});
diff --git a/packages/plugins/mobile-client/src/client/configuration/App.tsx b/packages/plugins/mobile-client/src/client/configuration/App.tsx
new file mode 100644
index 000000000..97372e1d6
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/configuration/App.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const AppConfiguration = () => {
+  return <>App Configuration</>;
+};
diff --git a/packages/plugins/mobile-client/src/client/configuration/Interface.tsx b/packages/plugins/mobile-client/src/client/configuration/Interface.tsx
new file mode 100644
index 000000000..12901da98
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/configuration/Interface.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { InterfaceRouter } from '../router';
+import { MobileDevice } from '../devices';
+
+export const InterfaceConfiguration = () => {
+  return (
+    <MobileDevice>
+      <InterfaceRouter></InterfaceRouter>
+    </MobileDevice>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/configuration/index.ts b/packages/plugins/mobile-client/src/client/configuration/index.ts
new file mode 100644
index 000000000..ccc2dcdd8
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/configuration/index.ts
@@ -0,0 +1,2 @@
+export * from './App';
+export * from './Interface';
diff --git a/packages/plugins/mobile-client/src/client/core/bridge/index.ts b/packages/plugins/mobile-client/src/client/core/bridge/index.ts
new file mode 100644
index 000000000..0d69b9a8d
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/bridge/index.ts
@@ -0,0 +1 @@
+import './native-call';
diff --git a/packages/plugins/mobile-client/src/client/core/bridge/injects.ts b/packages/plugins/mobile-client/src/client/core/bridge/injects.ts
new file mode 100644
index 000000000..6fa9b1010
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/bridge/injects.ts
@@ -0,0 +1,12 @@
+interface InvokeFunction {
+  (params: { action: 'scan' }, cb: (data: { url: string }) => void): void;
+  (params: { action: 'moveTaskToBack' }, cb?: () => void): void;
+}
+
+const jsBridge = (window as any).jsBridge as {
+  invoke: InvokeFunction;
+};
+
+export const invoke: InvokeFunction = (params, cb) => {
+  jsBridge.invoke(params, cb);
+};
diff --git a/packages/plugins/mobile-client/src/client/core/bridge/native-call.ts b/packages/plugins/mobile-client/src/client/core/bridge/native-call.ts
new file mode 100644
index 000000000..327b8fd2a
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/bridge/native-call.ts
@@ -0,0 +1,23 @@
+import { invoke } from './injects';
+
+/**
+ * App 右滑返回
+ * @param cb 回调函数，返回 true 表示 web 自己消费，false表示 app 消费
+ */
+
+const JSBridgeFunction = {
+  /**
+   * @description JSBridge injects
+   */
+  onBackPressed: () => {
+    if (history.length === 1) {
+      invoke({ action: 'moveTaskToBack' });
+    } else {
+      history.back();
+    }
+  },
+};
+
+Object.keys(JSBridgeFunction).forEach((key) => {
+  window[key] = JSBridgeFunction[key];
+});
diff --git a/packages/plugins/mobile-client/src/client/core/index.tsx b/packages/plugins/mobile-client/src/client/core/index.tsx
new file mode 100644
index 000000000..10ddaf196
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/index.tsx
@@ -0,0 +1,45 @@
+import { SchemaComponentOptions, SchemaInitializerProvider } from '@nocobase/client';
+import React from 'react';
+import {
+  MBlockInitializers,
+  MMenuBlockInitializer,
+  MMenu,
+  MContainer,
+  MTabBar,
+  MPage,
+  MHeader,
+  MSettingsBlockInitializer,
+  MSettings,
+  useGridCardBlockItemProps,
+  useGridCardBlockProps,
+} from './schema';
+import './bridge';
+
+export const MobileCore: React.FC = (props) => {
+  return (
+    <SchemaInitializerProvider
+      initializers={{
+        MBlockInitializers,
+      }}
+    >
+      <SchemaComponentOptions
+        components={{
+          MMenuBlockInitializer,
+          MSettingsBlockInitializer,
+          MContainer,
+          MMenu,
+          MTabBar,
+          MPage,
+          MHeader,
+          MSettings,
+        }}
+        scope={{
+          useGridCardBlockItemProps,
+          useGridCardBlockProps,
+        }}
+      >
+        {props.children}
+      </SchemaComponentOptions>
+    </SchemaInitializerProvider>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.Designer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.Designer.tsx
new file mode 100644
index 000000000..f5966c444
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.Designer.tsx
@@ -0,0 +1,85 @@
+import { SchemaSettings, useDesignable } from '@nocobase/client';
+import React from 'react';
+import { useTranslation } from '../../../../locale';
+import { Schema, useField, useFieldSchema } from '@formily/react';
+import { uid } from '@formily/shared';
+import { useHistory } from 'react-router-dom';
+import { findSchema } from '../../helpers';
+import { Button } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+
+export const ContainerDesigner = () => {
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const tabBarSchema = fieldSchema.reduceProperties(
+    (schema, next) => schema || (next['x-component'] === 'MTabBar' && next),
+  ) as Schema;
+
+  const history = useHistory();
+
+  const field = useField();
+  const schemaSettingsProps = {
+    dn,
+    field,
+    fieldSchema,
+  };
+  return (
+    <SchemaSettings
+      title={
+        <Button
+          style={{
+            borderColor: 'rgb(241, 139, 98)',
+            color: 'rgb(241, 139, 98)',
+          }}
+          icon={<MenuOutlined />}
+          type="dashed"
+        >
+          {t('App level Configuration')}
+        </Button>
+      }
+      {...schemaSettingsProps}
+    >
+      <SchemaSettings.SwitchItem
+        checked={!!tabBarSchema}
+        title={t('Enable TabBar')}
+        onChange={async (v) => {
+          if (v) {
+            const pageSchema = findSchema(fieldSchema, 'MPage');
+            if (!pageSchema) return;
+            await dn.remove(pageSchema);
+            await dn.insertBeforeEnd({
+              type: 'void',
+              'x-component': 'MTabBar',
+              'x-component-props': {},
+              name: 'tabBar',
+              properties: {
+                [uid()]: {
+                  type: 'void',
+                  'x-component': 'MTabBar.Item',
+                  'x-designer': 'MTabBar.Item.Designer',
+                  'x-component-props': {
+                    icon: 'HomeOutlined',
+                    title: t('Untitled'),
+                  },
+                  properties: {
+                    page: pageSchema.toJSON(),
+                  },
+                },
+              },
+            });
+          } else {
+            const pageSchema = findSchema(tabBarSchema.properties[Object.keys(tabBarSchema.properties)[0]], 'MPage');
+            if (!pageSchema) return;
+            await dn.remove(tabBarSchema);
+            await dn.insertBeforeEnd(pageSchema, {
+              onSuccess() {
+                history.push('../');
+              },
+            });
+          }
+        }}
+      />
+    </SchemaSettings>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.tsx
new file mode 100644
index 000000000..bc7c7af87
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.tsx
@@ -0,0 +1,130 @@
+import React, { useMemo } from 'react';
+import { css, cx } from '@emotion/css';
+import { ContainerDesigner } from './Container.Designer';
+import { RouteSwitch, SchemaComponent, SortableItem, useDesigner } from '@nocobase/client';
+import { useFieldSchema } from '@formily/react';
+import { Redirect, RouteProps, useParams, useRouteMatch } from 'react-router-dom';
+
+const findGrid = (schema, uid) => {
+  return schema.reduceProperties((final, next) => {
+    if (final) return final;
+    if (next['x-component'] === 'MTabBar') {
+      return findGrid(next, uid);
+    }
+    if (next['x-component'] === 'MTabBar.Item' && uid === next['x-uid']) {
+      return next;
+    }
+  });
+};
+
+const TabContentComponent = () => {
+  const { name } = useParams<{ name: string }>();
+  const fieldSchema = useFieldSchema();
+  if (!name) return <></>;
+  const gridSchema = findGrid(fieldSchema.properties['tabBar'], name.replace('tab_', ''));
+  if (!gridSchema) {
+    return <Redirect to="../" />;
+  }
+  return <SchemaComponent schema={gridSchema} />;
+};
+
+const InternalContainer: React.FC = (props) => {
+  const Designer = useDesigner();
+  const fieldSchema = useFieldSchema();
+  const params = useParams<{ name: string }>();
+  const match = useRouteMatch();
+  const tabBarSchema = fieldSchema?.properties?.['tabBar'];
+  const redirectToUid = tabBarSchema?.properties[Object.keys(tabBarSchema.properties)[0]]['x-uid'];
+
+  const tabRoutes = useMemo<RouteProps[]>(() => {
+    if (!redirectToUid) {
+      return [];
+    }
+    return [
+      !params.name
+        ? {
+            type: 'redirect',
+            to: `${match.url}/tab_${redirectToUid}`,
+            from: match.url,
+            exact: true,
+          }
+        : null,
+      {
+        type: 'route',
+        path: match.path,
+        component: TabContentComponent,
+      },
+    ].filter(Boolean) as any[];
+  }, [redirectToUid, params.name, match.url, match.path]);
+
+  return (
+    <SortableItem
+      eid="nb-mobile-scroll-wrapper"
+      className={cx(
+        'nb-mobile-container',
+        css`
+          & > .general-schema-designer > .general-schema-designer-icons {
+            right: unset;
+            left: 2px;
+          }
+          background: #f0f2f5;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+          overflow-y: scroll;
+          position: initial !important;
+        `,
+      )}
+    >
+      <Designer></Designer>
+      <div
+        style={{
+          paddingBottom: tabRoutes.length ? '50px' : '0px',
+        }}
+        className={cx('nb-mobile-container-content')}
+      >
+        {tabRoutes.length ? (
+          <RouteSwitch routes={tabRoutes as any} />
+        ) : (
+          <SchemaComponent
+            filterProperties={(schema) => {
+              return schema['x-component'] !== 'MTabBar';
+            }}
+            schema={fieldSchema}
+          />
+        )}
+      </div>
+      <div
+        className={cx(
+          'nb-mobile-container-tab-bar',
+          css`
+            & > .general-schema-designer {
+              --nb-designer-top: 20px;
+            }
+            position: absolute;
+            background: #ffffff;
+            width: 100%;
+            bottom: 0;
+            left: 0;
+            z-index: 1000;
+          `,
+        )}
+      >
+        <SchemaComponent
+          onlyRenderProperties
+          filterProperties={(schema) => {
+            return schema['x-component'] === 'MTabBar';
+          }}
+          schema={fieldSchema}
+        ></SchemaComponent>
+      </div>
+    </SortableItem>
+  );
+};
+
+export const MContainer = InternalContainer as unknown as typeof InternalContainer & {
+  Designer: typeof ContainerDesigner;
+};
+MContainer.Designer = ContainerDesigner;
+MContainer.displayName = 'MContainer';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/container/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/container/index.ts
new file mode 100644
index 000000000..8a1103ffa
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/container/index.ts
@@ -0,0 +1 @@
+export * from './Container';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/header/Header.Designer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/header/Header.Designer.tsx
new file mode 100644
index 000000000..87f110d0d
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/header/Header.Designer.tsx
@@ -0,0 +1,39 @@
+import { Schema, useField, useFieldSchema } from '@formily/react';
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import React from 'react';
+import { Switch } from '@formily/antd';
+import { useTranslation } from '../../../../locale';
+import { useSchemaPatch } from '../../hooks';
+
+export const HeaderDesigner = () => {
+  const field = useField();
+  const { onUpdateComponentProps } = useSchemaPatch();
+  const { t } = useTranslation();
+  return (
+    <GeneralSchemaDesigner draggable={false}>
+      <SchemaSettings.ModalItem
+        title={t('Edit info')}
+        components={{ Switch }}
+        initialValues={field.componentProps}
+        schema={{
+          properties: {
+            title: {
+              type: 'string',
+              title: t('Title'),
+              required: true,
+              'x-component': 'Input',
+              'x-decorator': 'FormItem',
+            },
+            showBack: {
+              type: 'boolean',
+              title: t('Display back button'),
+              'x-component': 'Switch',
+              'x-decorator': 'FormItem',
+            },
+          },
+        }}
+        onSubmit={onUpdateComponentProps}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/header/Header.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/header/Header.tsx
new file mode 100644
index 000000000..46c25b13d
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/header/Header.tsx
@@ -0,0 +1,41 @@
+import { css, cx } from '@emotion/css';
+import { SortableItem, useCompile, useDesigner } from '@nocobase/client';
+import { NavBar, NavBarProps } from 'antd-mobile';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { HeaderDesigner } from './Header.Designer';
+import { useField, useFieldSchema } from '@formily/react';
+
+export interface HeaderProps extends NavBarProps {
+  title?: string;
+  showBack?: boolean;
+}
+const InternalHeader = (props: HeaderProps) => {
+  const field = useField();
+  const { title = '{{ t("Untitled") }}', showBack = false } = { ...props, ...field?.componentProps };
+  const Designer = useDesigner();
+  const compile = useCompile();
+  const history = useHistory();
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-header',
+        css`
+          width: 100%;
+          background: #fff;
+        `,
+      )}
+    >
+      <NavBar backArrow={showBack} onBack={history.goBack}>
+        {compile(title)}
+      </NavBar>
+      <Designer />
+    </SortableItem>
+  );
+};
+
+export const MHeader = InternalHeader as unknown as typeof InternalHeader & {
+  Designer: typeof HeaderDesigner;
+};
+
+MHeader.Designer = HeaderDesigner;
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/header/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/header/index.ts
new file mode 100644
index 000000000..266dec8a1
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/header/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/index.ts
new file mode 100644
index 000000000..3289ab988
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/index.ts
@@ -0,0 +1,6 @@
+export * from './menu';
+export * from './container';
+export * from './tab-bar';
+export * from './page';
+export * from './header';
+export * from './settings';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Designer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Designer.tsx
new file mode 100644
index 000000000..bb1a77162
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Designer.tsx
@@ -0,0 +1,46 @@
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import { MenuOutlined } from '@ant-design/icons';
+import React from 'react';
+import { useTranslation } from '../../../../locale';
+import { Button } from 'antd';
+import { useFieldSchema, useField } from '@formily/react';
+
+export const MenuDesigner: React.FC = (props) => {
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const field = useField();
+  const schemaSettingsProps = {
+    dn,
+    field,
+    fieldSchema,
+  };
+  return (
+    <SchemaSettings
+      title={
+        <Button
+          style={{
+            borderColor: 'rgb(241, 139, 98)',
+            color: 'rgb(241, 139, 98)',
+          }}
+          icon={<MenuOutlined />}
+          type="dashed"
+        >
+          {t('Menu configuration')}
+        </Button>
+      }
+      {...schemaSettingsProps}
+    >
+      <SchemaSettings.Remove
+        key="remove"
+        removeParentsIfNoChildren
+        confirm={{
+          title: t('Delete menu block'),
+        }}
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </SchemaSettings>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx
new file mode 100644
index 000000000..49be19418
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.Item.tsx
@@ -0,0 +1,104 @@
+import { css, cx } from '@emotion/css';
+import { useField, useFieldSchema } from '@formily/react';
+import {
+  GeneralSchemaDesigner,
+  Icon,
+  SchemaSettings,
+  SortableItem,
+  useCompile,
+  useDesignable,
+  useDesigner,
+} from '@nocobase/client';
+import { List, ListItemProps } from 'antd-mobile';
+import React from 'react';
+import { useHistory, useParams, useRouteMatch } from 'react-router-dom';
+import { useTranslation } from '../../../../locale';
+import { useSchemaPatch } from '../../hooks';
+
+interface MMenuItemProps extends ListItemProps {
+  name: string;
+  icon: string;
+}
+
+const InternalMenuItem: React.FC<MMenuItemProps> = (props) => {
+  const { icon, name } = props;
+  const Designer = useDesigner();
+  const history = useHistory();
+  const fieldSchema = useFieldSchema();
+  const compile = useCompile();
+  const match = useRouteMatch();
+  const params = useParams<{ name: string }>();
+
+  const onToPage = () => {
+    history.push(params.name ? fieldSchema['x-uid'] : `${match.url}/${fieldSchema['x-uid']}`);
+  };
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-menu-item',
+        css`
+          width: 100%;
+          background: var(--adm-color-background);
+          > .adm-list-item {
+            background: inherit;
+          }
+        `,
+      )}
+    >
+      <List.Item arrow clickable {...props} prefix={<Icon type={icon} />} onClick={onToPage}>
+        {compile(name)}
+      </List.Item>
+      <Designer></Designer>
+    </SortableItem>
+  );
+};
+
+const MenuItemDesigner: React.FC = () => {
+  const { t } = useTranslation();
+  const { onUpdateComponentProps } = useSchemaPatch();
+  const field = useField();
+
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.ModalItem
+        title={t('Edit menu info')}
+        initialValues={field.componentProps}
+        schema={{
+          properties: {
+            name: {
+              type: 'string',
+              title: t('Menu name'),
+              required: true,
+              'x-component': 'Input',
+              'x-decorator': 'FormItem',
+            },
+            icon: {
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-component': 'IconPicker',
+              title: t('Icon'),
+              'x-component-props': {},
+            },
+          },
+        }}
+        onSubmit={onUpdateComponentProps}
+      />
+      <SchemaSettings.Remove
+        key="remove"
+        removeParentsIfNoChildren
+        confirm={{
+          title: t('Delete menu item?'),
+        }}
+        breakRemoveOn={{
+          'x-component': 'MMenu',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
+
+export const MenuItem = InternalMenuItem as typeof InternalMenuItem as unknown as {
+  Designer: typeof MenuItemDesigner;
+};
+
+MenuItem.Designer = MenuItemDesigner;
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.tsx
new file mode 100644
index 000000000..e8e60a1ac
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/Menu.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { MenuItem } from './Menu.Item';
+import {
+  DndContext,
+  SchemaComponent,
+  SchemaInitializer,
+  SortableItem,
+  useDesignable,
+  useDesigner,
+} from '@nocobase/client';
+import { css, cx } from '@emotion/css';
+import { MenuDesigner } from './Menu.Designer';
+import { useFieldSchema } from '@formily/react';
+import { List } from 'antd-mobile';
+import { useTranslation } from '../../../../locale';
+import { menuItemSchema } from './schema';
+
+const InternalMenu: React.FC = (props) => {
+  const Designer = useDesigner();
+  const fieldSchema = useFieldSchema();
+  const { insertBeforeEnd, designable } = useDesignable();
+
+  const { t } = useTranslation();
+
+  const onAddMenuItem = (values: any) => {
+    const properties = {
+      page: {
+        type: 'void',
+        'x-component': 'MPage',
+        'x-designer': 'MPage.Designer',
+        'x-component-props': {},
+        properties: {
+          header: {
+            type: 'void',
+            'x-component': 'MHeader',
+            'x-designer': 'MHeader.Designer',
+            'x-component-props': {
+              title: values.name,
+              showBack: true,
+            },
+          },
+          grid: {
+            type: 'void',
+            'x-component': 'Grid',
+            'x-component-props': {
+              showDivider: false,
+            },
+            'x-initializer': 'MBlockInitializers',
+          },
+        },
+      },
+    };
+
+    return insertBeforeEnd({
+      type: 'void',
+      title: values.name,
+      'x-component': 'MMenu.Item',
+      'x-component-props': values,
+      'x-designer': 'MMenu.Item.Designer',
+      properties,
+    });
+  };
+
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-menu',
+        css`
+          background: #ffffff;
+          width: 100%;
+          margin-bottom: var(--nb-spacing);
+        `,
+      )}
+    >
+      <List>
+        {designable && (
+          <List.Item>
+            <Designer />
+          </List.Item>
+        )}
+        <DndContext>
+          <SchemaComponent onlyRenderProperties schema={fieldSchema}></SchemaComponent>
+        </DndContext>
+        {designable ? (
+          <List.Item>
+            <SchemaInitializer.ActionModal
+              buttonText={t('Add menu item')}
+              title={t('Add menu item')}
+              schema={menuItemSchema}
+              onSubmit={onAddMenuItem}
+            />
+          </List.Item>
+        ) : null}
+      </List>
+    </SortableItem>
+  );
+};
+
+export const MMenu = InternalMenu as unknown as typeof InternalMenu & {
+  Item: typeof MenuItem;
+  Designer: typeof MenuDesigner;
+};
+
+MMenu.Item = MenuItem;
+MMenu.Designer = MenuDesigner;
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/MenuBlockInitializer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/menu/MenuBlockInitializer.tsx
new file mode 100644
index 000000000..6843e1e5e
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/MenuBlockInitializer.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MenuOutlined } from '@ant-design/icons';
+import { SchemaInitializer } from '@nocobase/client';
+
+export const MMenuBlockInitializer = (props) => {
+  const { insert } = props;
+  return (
+    <SchemaInitializer.Item
+      icon={<MenuOutlined />}
+      onClick={async () => {
+        insert({
+          type: 'void',
+          'x-component': 'MMenu',
+          'x-designer': 'MMenu.Designer',
+          'x-component-props': {},
+        });
+      }}
+    />
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/menu/index.ts
new file mode 100644
index 000000000..1037cb5e5
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/index.ts
@@ -0,0 +1,2 @@
+export * from './MenuBlockInitializer';
+export * from './Menu';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/menu/schema.ts b/packages/plugins/mobile-client/src/client/core/schema/components/menu/schema.ts
new file mode 100644
index 000000000..e6b42d63c
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/menu/schema.ts
@@ -0,0 +1,17 @@
+export const menuItemSchema = {
+  properties: {
+    name: {
+      type: 'string',
+      title: `{{t('Menu name')}}`,
+      required: true,
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+    },
+    icon: {
+      'x-decorator': 'FormItem',
+      'x-component': 'IconPicker',
+      title: `{{t('Icon')}}`,
+      'x-component-props': {},
+    },
+  },
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.Designer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.Designer.tsx
new file mode 100644
index 000000000..dbbfec8b3
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.Designer.tsx
@@ -0,0 +1,106 @@
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import React from 'react';
+import { useTranslation } from '../../../../locale';
+import { useField, useFieldSchema } from '@formily/react';
+import { findGridSchema } from '../../helpers';
+import { uid } from '@formily/shared';
+import { Button } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+
+export const PageDesigner = (props) => {
+  const { showBack } = props;
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const headerSchema = fieldSchema?.properties?.['header'];
+  const tabsSchema = fieldSchema?.properties?.['tabs'];
+  const field = useField();
+  const schemaSettingsProps = {
+    dn,
+    field,
+    fieldSchema,
+  };
+
+  return (
+    <SchemaSettings
+      title={
+        <Button
+          style={{
+            borderColor: 'rgb(241, 139, 98)',
+            color: 'rgb(241, 139, 98)',
+          }}
+          icon={<MenuOutlined />}
+          type="dashed"
+        >
+          {t('Page configuration')}
+        </Button>
+      }
+      {...schemaSettingsProps}
+    >
+      <SchemaSettings.SwitchItem
+        checked={!!headerSchema}
+        title={t('Enable Header')}
+        onChange={async (v) => {
+          if (v) {
+            await dn.insertAfterBegin({
+              type: 'void',
+              name: 'header',
+              'x-component': 'MHeader',
+              'x-designer': 'MHeader.Designer',
+              'x-component-props': {
+                title: fieldSchema.parent['x-component-props']?.name,
+                showBack,
+              },
+            });
+          } else {
+            await dn.remove(headerSchema);
+          }
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.SwitchItem
+        checked={!!tabsSchema}
+        title={t('Enable Tabs')}
+        onChange={async (v) => {
+          if (v) {
+            const gridSchema = findGridSchema(fieldSchema);
+            if (gridSchema) {
+              return dn.remove(gridSchema).then(() => {
+                return dn.insertBeforeEnd({
+                  type: 'void',
+                  name: 'tabs',
+                  'x-component': 'Tabs',
+                  'x-component-props': {},
+                  'x-initializer': 'TabPaneInitializers',
+                  'x-initializer-props': {
+                    gridInitializer: 'MBlockInitializers',
+                  },
+                  properties: {
+                    tab1: {
+                      type: 'void',
+                      title: '{{t("Untitled")}}',
+                      'x-component': 'Tabs.TabPane',
+                      'x-designer': 'Tabs.Designer',
+                      'x-component-props': {},
+                      properties: {
+                        grid: {
+                          ...gridSchema,
+                          'x-uid': uid(),
+                        },
+                      },
+                    },
+                  },
+                });
+              });
+            }
+          } else {
+            const gridSchema = findGridSchema(tabsSchema.properties[Object.keys(tabsSchema.properties)[0]]);
+            if (gridSchema) {
+              return dn.remove(tabsSchema).then(() => dn.insertBeforeEnd(gridSchema, {}));
+            }
+          }
+        }}
+      />
+    </SchemaSettings>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.tsx
new file mode 100644
index 000000000..db5bcadcb
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.tsx
@@ -0,0 +1,140 @@
+import React, { useCallback, useMemo } from 'react';
+import { css, cx } from '@emotion/css';
+import { PageDesigner } from './Page.Designer';
+import { ActionBarProvider, SortableItem, TabsContextProvider, useDesigner } from '@nocobase/client';
+import { RecursionField, useFieldSchema } from '@formily/react';
+import { countGridCol } from '../../helpers';
+import { TabsProps } from 'antd';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+
+const globalActionCSS = css`
+  #nb-position-container > & {
+    height: 49px;
+    border-top: 1px solid #f0f2f5;
+    margin-bottom: 0px !important;
+    padding: 0 var(--nb-spacing);
+    align-items: center;
+    overflow-x: auto;
+    background: #ffffff;
+    z-index: 100;
+  }
+`;
+
+const InternalPage: React.FC = (props) => {
+  const Designer = useDesigner();
+  const fieldSchema = useFieldSchema();
+  const history = useHistory();
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  const tabsSchema = fieldSchema.properties?.['tabs'];
+  // Only support globalActions in page
+  const onlyInPage = fieldSchema.root === fieldSchema.parent;
+  let hasGlobalActions = false;
+  if (!tabsSchema) {
+    hasGlobalActions = countGridCol(fieldSchema.properties['grid'], 2) === 1;
+  } else if (query.has('tab') && tabsSchema.properties[query.get('tab')]) {
+    hasGlobalActions = countGridCol(tabsSchema.properties[query.get('tab')]?.properties?.['grid'], 2) === 1;
+  } else {
+    const schema = Object.values(tabsSchema.properties).sort((t1, t2) => t1['x-index'] - t2['x-index'])[0];
+    history.replace({
+      pathname: location.pathname,
+      search: new URLSearchParams({
+        tab: schema.name.toString(),
+      }).toString(),
+    });
+  }
+
+  const onTabsChange = useCallback<TabsProps['onChange']>(
+    (key) => {
+      history.replace({
+        pathname: history.location.pathname,
+        search: new URLSearchParams({
+          tab: key,
+        }).toString(),
+      });
+    },
+    [history],
+  );
+
+  const GlobalActionProvider = useMemo(() => {
+    if (hasGlobalActions) {
+      return ActionBarProvider;
+    }
+    return React.Fragment;
+  }, [hasGlobalActions]);
+
+  return (
+    <GlobalActionProvider
+      container={hasGlobalActions && onlyInPage ? document.getElementById('nb-position-container') : null}
+      forceProps={{
+        layout: 'one-column',
+        className: globalActionCSS,
+      }}
+    >
+      <SortableItem
+        eid="nb-mobile-scroll-wrapper"
+        className={cx(
+          'nb-mobile-page',
+          css`
+            background: #f0f2f5;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding-bottom: var(--nb-spacing);
+          `,
+        )}
+      >
+        <Designer {...fieldSchema?.['x-designer-props']}></Designer>
+        <div
+          style={{
+            paddingBottom: tabsSchema ? null : 'var(--nb-spacing)',
+          }}
+          className={cx(
+            'nb-mobile-page-header',
+            css`
+              & > .ant-tabs > .ant-tabs-nav {
+                background: #fff;
+                padding: 0 var(--nb-spacing);
+              }
+              display: flex;
+              flex-direction: column;
+            `,
+          )}
+        >
+          <RecursionField
+            schema={fieldSchema}
+            filterProperties={(s) => {
+              return 'MHeader' === s['x-component'];
+            }}
+          ></RecursionField>
+          <TabsContextProvider activeKey={query.get('tab')} onChange={onTabsChange}>
+            <RecursionField
+              schema={fieldSchema}
+              filterProperties={(s) => {
+                return 'Tabs' === s['x-component'];
+              }}
+            ></RecursionField>
+          </TabsContextProvider>
+        </div>
+
+        {!tabsSchema && (
+          <RecursionField
+            schema={fieldSchema}
+            filterProperties={(s) => {
+              return s['x-component'] !== 'MHeader';
+            }}
+          ></RecursionField>
+        )}
+      </SortableItem>
+    </GlobalActionProvider>
+  );
+};
+
+export const MPage = InternalPage as unknown as typeof InternalPage & {
+  Designer: typeof PageDesigner;
+};
+MPage.Designer = PageDesigner;
+MPage.displayName = 'MPage';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/page/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/page/index.ts
new file mode 100644
index 000000000..d9925d752
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/page/index.ts
@@ -0,0 +1 @@
+export * from './Page';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.Designer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.Designer.tsx
new file mode 100644
index 000000000..df6222eb8
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.Designer.tsx
@@ -0,0 +1,22 @@
+import { GeneralSchemaDesigner, SchemaSettings } from '@nocobase/client';
+import React from 'react';
+import { useTranslation } from '../../../../locale';
+
+export const SettingsDesigner = () => {
+  const { t } = useTranslation();
+
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.Remove
+        key="remove"
+        removeParentsIfNoChildren
+        confirm={{
+          title: t('Delete settings block'),
+        }}
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.tsx
new file mode 100644
index 000000000..908f82109
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/settings/Settings.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { SettingsMenu, SortableItem, useDesigner } from '@nocobase/client';
+import { SettingsDesigner } from './Settings.Designer';
+import { css, cx } from '@emotion/css';
+export const InternalSettings = () => {
+  const Designer = useDesigner();
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-setting',
+        css`
+          margin-bottom: var(--nb-spacing);
+        `,
+      )}
+    >
+      <Designer />
+      <SettingsMenu redirectUrl="/mobile" />
+    </SortableItem>
+  );
+};
+export const MSettings = InternalSettings as unknown as typeof InternalSettings & {
+  Designer: typeof SettingsDesigner;
+};
+
+MSettings.Designer = SettingsDesigner;
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/settings/SettingsBlockInitializer.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/settings/SettingsBlockInitializer.tsx
new file mode 100644
index 000000000..8d6da3963
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/settings/SettingsBlockInitializer.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { SettingOutlined } from '@ant-design/icons';
+import { SchemaInitializer } from '@nocobase/client';
+
+export const MSettingsBlockInitializer = (props) => {
+  const { insert } = props;
+  return (
+    <SchemaInitializer.Item
+      icon={<SettingOutlined />}
+      onClick={async () => {
+        insert({
+          type: 'void',
+          'x-component': 'MSettings',
+          'x-designer': 'MSettings.Designer',
+          'x-component-props': {},
+        });
+      }}
+    />
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/settings/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/settings/index.ts
new file mode 100644
index 000000000..85f0b8802
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/settings/index.ts
@@ -0,0 +1,2 @@
+export * from './Settings';
+export * from './SettingsBlockInitializer';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.Item.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.Item.tsx
new file mode 100644
index 000000000..6c65f615d
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.Item.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo } from 'react';
+import { TabBar, TabBarItemProps } from 'antd-mobile';
+import { GeneralSchemaDesigner, SchemaSettings, SortableItem, useDesigner } from '@nocobase/client';
+import { useTranslation } from '../../../../locale';
+import { Schema, useField, useFieldSchema } from '@formily/react';
+import { useSchemaPatch } from '../../hooks';
+import { css, cx } from '@emotion/css';
+import { tabItemSchema } from './schema';
+
+const InternalItem: React.FC<TabBarItemProps> = () => {
+  // NOTE: nothing to do
+  // return <TabBar.Item {...props}></TabBar.Item>;
+  const Designer = useDesigner();
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-tab-bar-item',
+        css`
+          position: absolute !important;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+        `,
+      )}
+    >
+      <Designer />
+    </SortableItem>
+  );
+};
+
+export const Designer = () => {
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const { onUpdateComponentProps } = useSchemaPatch();
+  const field = useField();
+  const tabItems = Object.keys(fieldSchema.parent.properties).length;
+
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.ModalItem
+        title={t('Edit info')}
+        initialValues={field.componentProps}
+        schema={tabItemSchema}
+        onSubmit={onUpdateComponentProps}
+      ></SchemaSettings.ModalItem>
+      {tabItems > 1 ? (
+        <SchemaSettings.Remove
+          key="remove"
+          removeParentsIfNoChildren
+          confirm={{
+            title: t('Delete tab item?'),
+          }}
+          breakRemoveOn={{
+            'x-component': 'MTabBar',
+          }}
+        ></SchemaSettings.Remove>
+      ) : null}
+    </GeneralSchemaDesigner>
+  );
+};
+
+export const TabBarItem = InternalItem as unknown as typeof InternalItem & {
+  Designer: typeof Designer;
+};
+
+TabBarItem.Designer = Designer;
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.tsx b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.tsx
new file mode 100644
index 000000000..180bd3a09
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/TabBar.tsx
@@ -0,0 +1,113 @@
+import { TabBar } from 'antd-mobile';
+import { TabBarItem } from './TabBar.Item';
+import React, { useCallback, useContext } from 'react';
+import { SchemaOptionsContext, useFieldSchema } from '@formily/react';
+import { DndContext, Icon, SchemaComponent, SchemaInitializer, SortableItem, useDesignable } from '@nocobase/client';
+import { useTranslation } from '../../../../locale';
+import { css, cx } from '@emotion/css';
+import { uid } from '@formily/shared';
+import { useHistory, useParams } from 'react-router-dom';
+import { tabItemSchema } from './schema';
+
+export const InternalTabBar: React.FC = (props) => {
+  const fieldSchema = useFieldSchema();
+  const { designable } = useDesignable();
+  const { t } = useTranslation();
+  const options = useContext(SchemaOptionsContext);
+  const { insertBeforeEnd, dn } = useDesignable();
+  const history = useHistory();
+  const params = useParams<{ name: string }>();
+
+  const onAddTab = useCallback((values: any) => {
+    return insertBeforeEnd({
+      type: 'void',
+      'x-component': 'MTabBar.Item',
+      'x-component-props': values,
+      'x-designer': 'MTabBar.Item.Designer',
+      properties: {
+        [uid()]: {
+          type: 'void',
+          'x-component': 'MPage',
+          'x-designer': 'MPage.Designer',
+          'x-component-props': {},
+          properties: {
+            grid: {
+              type: 'void',
+              'x-component': 'Grid',
+              'x-initializer': 'MBlockInitializers',
+              'x-component-props': {
+                showDivider: false,
+              },
+            },
+          },
+        },
+      },
+    });
+  }, []);
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-tab-bar',
+        css`
+          position: relative;
+          width: 100%;
+          display: flex;
+          align-items: center;
+        `,
+      )}
+    >
+      <DndContext>
+        <TabBar
+          activeKey={params.name}
+          onChange={(key) => {
+            if (key === 'add-tab') {
+              return;
+            }
+            history.push(key);
+          }}
+          safeArea
+          className={cx(
+            css`
+              width: 100%;
+            `,
+          )}
+        >
+          {fieldSchema.mapProperties((schema, name) => {
+            const cp = schema['x-component-props'];
+            return (
+              <TabBar.Item
+                {...cp}
+                key={`tab_${schema['x-uid']}`}
+                title={
+                  <>
+                    {cp.title}
+                    <SchemaComponent schema={schema} name={name} />
+                  </>
+                }
+                icon={cp.icon ? <Icon type={cp.icon} /> : undefined}
+              ></TabBar.Item>
+            );
+          })}
+          {designable && Object.keys(fieldSchema.properties).length < 5 ? (
+            <TabBar.Item
+              className={css`
+                .adm-tab-bar-item-icon {
+                  height: auto;
+                }
+              `}
+              icon={<SchemaInitializer.ActionModal title={t('Add tab')} onSubmit={onAddTab} schema={tabItemSchema} />}
+              key="add-tab"
+            ></TabBar.Item>
+          ) : null}
+        </TabBar>
+      </DndContext>
+    </SortableItem>
+  );
+};
+
+export const MTabBar = InternalTabBar as unknown as typeof InternalTabBar & {
+  Item: typeof TabBarItem;
+};
+
+MTabBar.Item = TabBarItem;
+MTabBar.displayName = 'MTabBar';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/index.ts b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/index.ts
new file mode 100644
index 000000000..832e14a54
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/index.ts
@@ -0,0 +1 @@
+export * from './TabBar';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/schema.ts b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/schema.ts
new file mode 100644
index 000000000..e0f503c54
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/tab-bar/schema.ts
@@ -0,0 +1,18 @@
+export const tabItemSchema = {
+  properties: {
+    title: {
+      type: 'string',
+      title: `{{ t('Title') }}`,
+      required: true,
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+    },
+    icon: {
+      required: true,
+      'x-decorator': 'FormItem',
+      'x-component': 'IconPicker',
+      title: `{{ t('Icon') }}`,
+      'x-component-props': {},
+    },
+  },
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/helpers/index.ts b/packages/plugins/mobile-client/src/client/core/schema/helpers/index.ts
new file mode 100644
index 000000000..3e629d64e
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/helpers/index.ts
@@ -0,0 +1,38 @@
+import { ISchema, Schema } from '@formily/react';
+import { uid } from '@formily/shared';
+export const gridItemWrap = (schema: ISchema) => {
+  return {
+    type: 'void',
+    'x-component': 'MGrid.Item',
+    properties: {
+      [schema.name || uid()]: schema,
+    },
+  };
+};
+
+export const findSchema = (schema: Schema, component: string) => {
+  const gridSchema = schema.reduceProperties(
+    (schema, next) => schema || (next['x-component'] === component && next),
+  ) as Schema;
+  return gridSchema;
+};
+export const findGridSchema = (schema: Schema) => {
+  return findSchema(schema, 'Grid');
+};
+
+const allowComponents = ['Grid', 'Grid.Row'];
+const plusComponent = ['Grid.Col'];
+export const countGridCol = (schema: Schema, countToStop?: number) => {
+  if (!schema) return 0;
+  let count = 0;
+  if (plusComponent.includes(schema['x-component'])) {
+    count += 1;
+  }
+  if (typeof countToStop === 'number' && count >= countToStop) return count;
+  if (allowComponents.includes(schema['x-component'])) {
+    schema.mapProperties((schema) => {
+      count += countGridCol(schema, countToStop);
+    });
+  }
+  return count;
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/hooks/index.ts b/packages/plugins/mobile-client/src/client/core/schema/hooks/index.ts
new file mode 100644
index 000000000..414110151
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useSchemaPatch';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/hooks/useSchemaPatch.ts b/packages/plugins/mobile-client/src/client/core/schema/hooks/useSchemaPatch.ts
new file mode 100644
index 000000000..d24eaf13b
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/hooks/useSchemaPatch.ts
@@ -0,0 +1,24 @@
+import { useField, useFieldSchema } from '@formily/react';
+import { useDesignable } from '@nocobase/client';
+import _ from 'lodash';
+import { useCallback } from 'react';
+
+export const useSchemaPatch = () => {
+  const { dn } = useDesignable();
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+
+  const onUpdateComponentProps = useCallback((data) => {
+    _.set(fieldSchema, 'x-component-props', data);
+    field.componentProps = { ...field.componentProps, ...data };
+    dn.emit('patch', {
+      schema: {
+        ['x-uid']: fieldSchema['x-uid'],
+        'x-component-props': fieldSchema['x-component-props'],
+      },
+    });
+    dn.refresh();
+  }, []);
+
+  return { onUpdateComponentProps };
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/index.ts b/packages/plugins/mobile-client/src/client/core/schema/index.ts
new file mode 100644
index 000000000..3ea8346c4
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/index.ts
@@ -0,0 +1,3 @@
+export * from './initializers';
+export * from './components';
+export * from './scopes';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/initializers/BlockInitializers.ts b/packages/plugins/mobile-client/src/client/core/schema/initializers/BlockInitializers.ts
new file mode 100644
index 000000000..2551d4f7f
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/initializers/BlockInitializers.ts
@@ -0,0 +1,81 @@
+import { gridRowColWrap } from '@nocobase/client';
+import { generateNTemplate } from '../../../locale';
+
+// 页面里添加区块
+export const MBlockInitializers = {
+  title: '{{t("Add block")}}',
+  icon: 'PlusOutlined',
+  wrap: gridRowColWrap,
+  items: [
+    {
+      key: 'dataBlocks',
+      type: 'itemGroup',
+      title: '{{t("Data blocks")}}',
+      children: [
+        {
+          key: 'GridCard',
+          type: 'item',
+          title: '{{t("Grid Card")}}',
+          component: 'GridCardBlockInitializer',
+        },
+        {
+          key: 'table',
+          type: 'item',
+          title: '{{t("Table")}}',
+          component: 'TableBlockInitializer',
+        },
+        {
+          key: 'form',
+          type: 'item',
+          title: '{{t("Form")}}',
+          component: 'FormBlockInitializer',
+        },
+        {
+          key: 'details',
+          type: 'item',
+          title: '{{t("Details")}}',
+          component: 'DetailsBlockInitializer',
+        },
+        {
+          key: 'calendar',
+          type: 'item',
+          title: '{{t("Calendar")}}',
+          component: 'CalendarBlockInitializer',
+        },
+        {
+          key: 'mapBlock',
+          type: 'item',
+          title: generateNTemplate('Map'),
+          component: 'MapBlockInitializer',
+        },
+      ],
+    },
+    {
+      key: 'otherBlocks',
+      type: 'itemGroup',
+      title: '{{t("Other blocks")}}',
+      children: [
+        {
+          key: 'menu',
+          type: 'item',
+          title: generateNTemplate('Menu'),
+          component: 'MMenuBlockInitializer',
+          sort: 100,
+        },
+        {
+          key: 'markdown',
+          type: 'item',
+          title: '{{t("Markdown")}}',
+          component: 'MarkdownBlockInitializer',
+        },
+        {
+          key: 'settings',
+          type: 'item',
+          title: generateNTemplate('Settings'),
+          component: 'MSettingsBlockInitializer',
+          sort: 100,
+        },
+      ],
+    },
+  ],
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/initializers/index.ts b/packages/plugins/mobile-client/src/client/core/schema/initializers/index.ts
new file mode 100644
index 000000000..2421a851c
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/initializers/index.ts
@@ -0,0 +1 @@
+export * from './BlockInitializers';
diff --git a/packages/plugins/mobile-client/src/client/core/schema/scopes/grid-card.ts b/packages/plugins/mobile-client/src/client/core/schema/scopes/grid-card.ts
new file mode 100644
index 000000000..77975fe58
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/scopes/grid-card.ts
@@ -0,0 +1,35 @@
+import { css } from '@emotion/css';
+import { useInterfaceContext } from '../../../router/InterfaceProvider';
+import { PaginationProps } from 'antd';
+
+const listCss = css`
+  padding: 0 var(--nb-spacing);
+  & > .nb-action-bar {
+    padding: unset !important;
+    background: unset !important;
+  }
+`;
+export const useGridCardBlockItemProps = () => {
+  return {
+    className: listCss,
+  };
+};
+
+const columnCountConfig = {
+  xs: 1,
+  sm: 1,
+  md: 1,
+  lg: 1,
+  xl: 1,
+  xxl: 1,
+};
+
+export const useGridCardBlockProps = () => {
+  const isInterface = useInterfaceContext();
+  return {
+    columnCount: isInterface ? columnCountConfig : null,
+    pagination: {
+      simple: true,
+    } as PaginationProps,
+  };
+};
diff --git a/packages/plugins/mobile-client/src/client/core/schema/scopes/index.ts b/packages/plugins/mobile-client/src/client/core/schema/scopes/index.ts
new file mode 100644
index 000000000..e4f68f226
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/core/schema/scopes/index.ts
@@ -0,0 +1 @@
+export * from './grid-card';
diff --git a/packages/plugins/mobile-client/src/client/devices/iOS6.tsx b/packages/plugins/mobile-client/src/client/devices/iOS6.tsx
new file mode 100644
index 000000000..df2069b36
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/devices/iOS6.tsx
@@ -0,0 +1,24 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+const iOS6: React.FC<{
+  className: string;
+}> = (props) => {
+  return (
+    <div
+      className={cx(
+        'nb-mobile-device-ios6',
+        css(`
+          display: flex;
+          width: 375px;
+          height: 667px;
+      `),
+        props.className,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default iOS6;
diff --git a/packages/plugins/mobile-client/src/client/devices/index.tsx b/packages/plugins/mobile-client/src/client/devices/index.tsx
new file mode 100644
index 000000000..7aa5fb7c0
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/devices/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Device from './iOS6';
+import { css, cx } from '@emotion/css';
+
+export const MobileDevice: React.FC = (props) => {
+  return (
+    <div
+      className={cx(
+        'nb-mobile-device-wrapper',
+        css`
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        `,
+      )}
+    >
+      <Device
+        className={css`
+          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+        `}
+        {...props}
+      ></Device>
+    </div>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/index.tsx b/packages/plugins/mobile-client/src/client/index.tsx
new file mode 100644
index 000000000..a7e17fa17
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/index.tsx
@@ -0,0 +1,33 @@
+import { SettingsCenterProvider } from '@nocobase/client';
+import React from 'react';
+import { useTranslation } from './locale';
+import { AppConfiguration, InterfaceConfiguration } from './configuration';
+import { RouterSwitchProvider } from './router';
+import { MobileCore } from './core';
+
+export default React.memo((props) => {
+  const { t } = useTranslation();
+
+  return (
+    <SettingsCenterProvider
+      settings={{
+        ['mobile-client']: {
+          title: t('Mobile Client-side'),
+          icon: 'MobileOutlined',
+          tabs: {
+            interface: {
+              title: t('Interface Configuration'),
+              component: InterfaceConfiguration,
+            },
+            app: {
+              title: t('App Configuration'),
+              component: AppConfiguration,
+            },
+          },
+        },
+      }}
+    >
+      <RouterSwitchProvider>{props.children}</RouterSwitchProvider>
+    </SettingsCenterProvider>
+  );
+});
diff --git a/packages/plugins/mobile-client/src/client/locale/en-US.ts b/packages/plugins/mobile-client/src/client/locale/en-US.ts
new file mode 100644
index 000000000..53b270f6f
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/locale/en-US.ts
@@ -0,0 +1,5 @@
+const locale = {
+
+}
+
+export default locale;
diff --git a/packages/plugins/mobile-client/src/client/locale/index.ts b/packages/plugins/mobile-client/src/client/locale/index.ts
new file mode 100644
index 000000000..b0507aa0f
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/locale/index.ts
@@ -0,0 +1,23 @@
+import { i18n } from '@nocobase/client';
+import { useTranslation as useT } from 'react-i18next';
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+export const NAMESPACE = 'mobile-client';
+
+i18n.addResources('zh-CN', NAMESPACE, zhCN);
+i18n.addResources('en-US', NAMESPACE, enUS);
+
+export function lang(key: string) {
+  return i18n.t(key, { ns: NAMESPACE });
+}
+
+export function generateNTemplate(key: string) {
+  return `{{t('${key}', { ns: '${NAMESPACE}' })}}`;
+}
+
+export function useTranslation() {
+  return useT([NAMESPACE, 'client'], {
+    nsMode: 'fallback',
+  });
+}
diff --git a/packages/plugins/mobile-client/src/client/locale/zh-CN.ts b/packages/plugins/mobile-client/src/client/locale/zh-CN.ts
new file mode 100644
index 000000000..04f3f7e31
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/locale/zh-CN.ts
@@ -0,0 +1,31 @@
+const locale = {
+  'Mobile Client-side': '移动端',
+  'Interface Configuration': '界面配置',
+  'App Configuration': 'App配置',
+  'Enable TabBar': '启用底部标签栏',
+  Untitled: '未设置标题',
+  'Edit info': '编辑信息',
+  Title: '标题',
+  'Display back button': '展示退后按钮',
+  'Delete menu': '删除菜单',
+  'Edit menu info': '编辑菜单信息',
+  Menu: '菜单',
+  'Menu name': '菜单名',
+  Icon: '图标',
+  'Delete menu item?': '删除菜单项',
+  'Add menu item': '添加菜单项',
+  'Page template': '页面模板',
+  'Template mode': '模板模式',
+  'Enable Header': '启用头部栏',
+  'Enable Tabs': '启用标签栏',
+  'Delete tab item?': '是否删除标签项？',
+  'Add tab': '添加标签页',
+  'App level Configuration': '应用级别配置',
+  'Menu configuration': '菜单配置',
+  'Page configuration': '页面配置',
+  Settings: '设置',
+  'Delete settings block': '删除设置区块',
+  'Delete menu block': '删除菜单区块',
+};
+
+export default locale;
diff --git a/packages/plugins/mobile-client/src/client/router/Application.tsx b/packages/plugins/mobile-client/src/client/router/Application.tsx
new file mode 100644
index 000000000..a38a3e954
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/router/Application.tsx
@@ -0,0 +1,111 @@
+import React, { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { ActionContextProvider, AdminProvider, RemoteSchemaComponent, useRoute } from '@nocobase/client';
+import { css, cx } from '@emotion/css';
+import { useInterfaceContext } from './InterfaceProvider';
+import { DrawerProps, ModalProps } from 'antd';
+import { MobileCore } from '../core';
+
+const commonCSSVariables = css`
+  --nb-spacing: 14px;
+`;
+const commonCSSOverride = css``;
+const commonDesignerCSS = css`
+  --nb-designer-top: 2px;
+  --nb-designer-right: 2px;
+  .nb-sortable-designer:hover {
+    position: relative;
+    > .general-schema-designer {
+      display: block;
+    }
+  }
+  .general-schema-designer {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+    border: 0;
+    pointer-events: none;
+    > .general-schema-designer-icons {
+      position: absolute;
+      top: var(--nb-designer-top);
+      right: var(--nb-designer-right);
+      line-height: 16px;
+      pointer-events: all;
+      .ant-space-item {
+        background-color: #f18b62;
+        color: #fff;
+        line-height: 16px;
+        width: 16px;
+        padding-left: 1px;
+      }
+    }
+  }
+`;
+
+const drawerProps: DrawerProps = {
+  getContainer: '.nb-mobile-application',
+  width: '90%',
+  style: {
+    position: 'absolute',
+  },
+};
+const modalProps = {
+  ...drawerProps,
+  style: {
+    maxWidth: 'calc(100% - 16px)',
+  },
+  maskStyle: {
+    position: 'absolute',
+  },
+  wrapClassName: css`
+    position: absolute;
+  `,
+};
+
+const MApplication: React.FC = (props) => {
+  const route = useRoute();
+  const params = useParams<{ name: string }>();
+  const interfaceContext = useInterfaceContext();
+  const Provider = useMemo(() => {
+    return interfaceContext ? React.Fragment : AdminProvider;
+  }, [interfaceContext]);
+  return (
+    <Provider>
+      <MobileCore>
+        <ActionContextProvider modalProps={modalProps as ModalProps} drawerProps={drawerProps}>
+          <div
+            className={cx(
+              'nb-mobile-application',
+              commonDesignerCSS,
+              commonCSSVariables,
+              commonCSSOverride,
+              css`
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+                position: relative;
+                overflow: hidden;
+              `,
+            )}
+          >
+            {params.name && !params.name.startsWith('tab_') ? (
+              props.children
+            ) : (
+              <RemoteSchemaComponent key={route.uiSchemaUid} uid={route.uiSchemaUid}>
+                {props.children}
+              </RemoteSchemaComponent>
+            )}
+            <div id="nb-position-container"></div>
+          </div>
+        </ActionContextProvider>
+      </MobileCore>
+    </Provider>
+  );
+};
+
+export default MApplication;
diff --git a/packages/plugins/mobile-client/src/client/router/InterfaceProvider.tsx b/packages/plugins/mobile-client/src/client/router/InterfaceProvider.tsx
new file mode 100644
index 000000000..2ad8157d4
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/router/InterfaceProvider.tsx
@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+
+export const InterfaceContext = React.createContext(null);
+
+export const InterfaceProvider = (props) => {
+  return <InterfaceContext.Provider value={{ interface: true }}>{props.children}</InterfaceContext.Provider>;
+};
+
+export const useInterfaceContext = () => {
+  return useContext(InterfaceContext);
+};
diff --git a/packages/plugins/mobile-client/src/client/router/InterfaceRouter.tsx b/packages/plugins/mobile-client/src/client/router/InterfaceRouter.tsx
new file mode 100644
index 000000000..6984655e0
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/router/InterfaceRouter.tsx
@@ -0,0 +1,33 @@
+import { RouteSwitch, useRoutes } from '@nocobase/client';
+import React, { useEffect, useMemo } from 'react';
+import { HashRouter } from 'react-router-dom';
+import { InterfaceProvider } from './InterfaceProvider';
+
+interface InterfaceRouterProps {
+  [key: string]: any;
+}
+export const InterfaceRouter: React.FC<InterfaceRouterProps> = (props) => {
+  const allRoutes = useRoutes();
+  const routes = useMemo(
+    () =>
+      allRoutes.reduce((nextRoutes, item) => {
+        if (item['component'] === 'MApplication') {
+          nextRoutes.push(item, {
+            type: 'redirect',
+            to: '/mobile',
+            exact: true,
+          });
+        }
+        return nextRoutes;
+      }, []),
+    [allRoutes],
+  );
+
+  return (
+    <InterfaceProvider>
+      <HashRouter>
+        <RouteSwitch routes={routes}></RouteSwitch>
+      </HashRouter>
+    </InterfaceProvider>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx b/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx
new file mode 100644
index 000000000..3c78ed6f5
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/router/RouteSwitchProvider.tsx
@@ -0,0 +1,18 @@
+import { RouteSwitchProvider, useRouteSwitchContext } from '@nocobase/client';
+import React, { useEffect } from 'react';
+import MApplication from './Application';
+
+export const RouterSwitchProvider = (props) => {
+  const { routes, components } = useRouteSwitchContext();
+  return (
+    <RouteSwitchProvider
+      routes={routes}
+      components={{
+        ...components,
+        MApplication,
+      }}
+    >
+      {props.children}
+    </RouteSwitchProvider>
+  );
+};
diff --git a/packages/plugins/mobile-client/src/client/router/index.ts b/packages/plugins/mobile-client/src/client/router/index.ts
new file mode 100644
index 000000000..5066c6abf
--- /dev/null
+++ b/packages/plugins/mobile-client/src/client/router/index.ts
@@ -0,0 +1,2 @@
+export * from './InterfaceRouter';
+export * from './RouteSwitchProvider';
diff --git a/packages/plugins/mobile-client/src/index.ts b/packages/plugins/mobile-client/src/index.ts
new file mode 100644
index 000000000..7ddad5814
--- /dev/null
+++ b/packages/plugins/mobile-client/src/index.ts
@@ -0,0 +1 @@
+export { default } from './server';
diff --git a/packages/plugins/mobile-client/src/server/collections/.gitkeep b/packages/plugins/mobile-client/src/server/collections/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/plugins/mobile-client/src/server/index.ts b/packages/plugins/mobile-client/src/server/index.ts
new file mode 100644
index 000000000..b68aea57f
--- /dev/null
+++ b/packages/plugins/mobile-client/src/server/index.ts
@@ -0,0 +1 @@
+export { default } from './plugin';
diff --git a/packages/plugins/mobile-client/src/server/plugin.ts b/packages/plugins/mobile-client/src/server/plugin.ts
new file mode 100644
index 000000000..a5eeb6372
--- /dev/null
+++ b/packages/plugins/mobile-client/src/server/plugin.ts
@@ -0,0 +1,62 @@
+import { InstallOptions, Plugin } from '@nocobase/server';
+
+export class MobileClientPlugin extends Plugin {
+  afterAdd() {}
+
+  async load() {
+    const repository = this.app.db.getRepository('uiRoutes');
+    const routes = [
+      {
+        type: 'route',
+        path: '/mobile/:name(.+)?',
+        component: 'MApplication',
+        uiSchema: {
+          type: 'void',
+          'x-component': 'MContainer',
+          'x-designer': 'MContainer.Designer',
+          'x-component-props': {},
+          properties: {
+            page: {
+              type: 'void',
+              'x-component': 'MPage',
+              'x-designer': 'MPage.Designer',
+              'x-component-props': {},
+              properties: {
+                grid: {
+                  type: 'void',
+                  'x-component': 'Grid',
+                  'x-initializer': 'MBlockInitializers',
+                  'x-component-props': {
+                    showDivider: false,
+                  },
+                },
+              },
+            },
+          },
+        },
+        routes: [
+          {
+            type: 'route',
+            path: '',
+            component: 'RouteSchemaComponent',
+          },
+        ],
+      },
+    ];
+    for (const values of routes) {
+      await repository.create({
+        values,
+      });
+    }
+  }
+
+  async install(options?: InstallOptions) {}
+
+  async afterEnable() {}
+
+  async afterDisable() {}
+
+  async remove() {}
+}
+
+export default MobileClientPlugin;
diff --git a/packages/plugins/mobile-client/types.d.ts b/packages/plugins/mobile-client/types.d.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/presets/nocobase/package.json b/packages/presets/nocobase/package.json
index fd17a84b6..054f6a8ba 100644
--- a/packages/presets/nocobase/package.json
+++ b/packages/presets/nocobase/package.json
@@ -37,7 +37,8 @@
     "@nocobase/plugin-users": "0.9.4-alpha.2",
     "@nocobase/plugin-verification": "0.9.4-alpha.2",
     "@nocobase/plugin-workflow": "0.9.4-alpha.2",
-    "@nocobase/server": "0.9.4-alpha.2"
+    "@nocobase/server": "0.9.4-alpha.2",
+    "@nocobase/plugin-mobile-client": "0.9.4-alpha.2"
   },
   "repository": {
     "type": "git",
diff --git a/packages/presets/nocobase/src/index.ts b/packages/presets/nocobase/src/index.ts
index 305b60d19..a560e663b 100644
--- a/packages/presets/nocobase/src/index.ts
+++ b/packages/presets/nocobase/src/index.ts
@@ -37,6 +37,7 @@ export class PresetNocoBase extends Plugin {
     'map',
     'snapshot-field',
     'graph-collection-manager',
+    'mobile-client',
   ];
 
   splitNames(name: string) {
diff --git a/yarn.lock b/yarn.lock
index 6e9c46e5e..7b1948e9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3107,6 +3107,18 @@
   version "8.39.0"
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
 
+"@floating-ui/core@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0"
+  integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==
+
+"@floating-ui/dom@^1.2.6":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.9.tgz#b9ed1c15d30963419a6736f1b7feb350dd49c603"
+  integrity sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==
+  dependencies:
+    "@floating-ui/core" "^1.2.6"
+
 "@formily/antd@2.2.24":
   version "2.2.24"
   resolved "https://registry.yarnpkg.com/@formily/antd/-/antd-2.2.24.tgz#d536cba6d4691b9c2089efd818cb85681a6d4c9b"
@@ -4554,6 +4566,13 @@
   version "2.11.7"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
 
+"@rc-component/mini-decimal@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@rc-component/mini-decimal/-/mini-decimal-1.0.1.tgz#e5dbc20a6a5b0e234d279bc71ce730ab865d3910"
+  integrity sha512-9N8nRk0oKj1qJzANKl+n9eNSMUGsZtjwNuDCiZ/KA+dt1fE3zq5x2XxclRcAbOIXnZcJ53ozP2Pa60gyELXagA==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+
 "@rc-component/portal@^1.0.0-6", "@rc-component/portal@^1.0.0-8", "@rc-component/portal@^1.0.2":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.1.tgz#1a30ffe51c240b54360cba8e8bfc5d1f559325c4"
@@ -4562,6 +4581,52 @@
     classnames "^2.3.2"
     rc-util "^5.24.4"
 
+"@react-spring/animated@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.6.1.tgz#ccc626d847cbe346f5f8815d0928183c647eb425"
+  integrity sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==
+  dependencies:
+    "@react-spring/shared" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/core@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.6.1.tgz#ebe07c20682b360b06af116ea24e2b609e778c10"
+  integrity sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==
+  dependencies:
+    "@react-spring/animated" "~9.6.1"
+    "@react-spring/rafz" "~9.6.1"
+    "@react-spring/shared" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/rafz@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.6.1.tgz#d71aafb92b78b24e4ff84639f52745afc285c38d"
+  integrity sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==
+
+"@react-spring/shared@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.6.1.tgz#4e2e4296910656c02bd9fd54c559702bc836ac4e"
+  integrity sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==
+  dependencies:
+    "@react-spring/rafz" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
+"@react-spring/types@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.6.1.tgz#913d3a68c5cbc1124fdb18eff919432f7b6abdde"
+  integrity sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==
+
+"@react-spring/web@~9.6.1":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.6.1.tgz#3e4c03b724d2b545dc2fa2649eb6109318ab9178"
+  integrity sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==
+  dependencies:
+    "@react-spring/animated" "~9.6.1"
+    "@react-spring/core" "~9.6.1"
+    "@react-spring/shared" "~9.6.1"
+    "@react-spring/types" "~9.6.1"
+
 "@restart/hooks@^0.3.25":
   version "0.3.27"
   resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505"
@@ -5718,6 +5783,18 @@
     "@umijs/babel-preset-umi" "3.5.39"
     "@umijs/deps" "3.5.39"
 
+"@use-gesture/core@10.2.20":
+  version "10.2.20"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.20.tgz#b29e0aadd5e90336e599d849e50eef0e06aa28bf"
+  integrity sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ==
+
+"@use-gesture/react@10.2.20":
+  version "10.2.20"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.20.tgz#2d556a62c22200507b9d478ce7159057004acb8d"
+  integrity sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==
+  dependencies:
+    "@use-gesture/core" "10.2.20"
+
 "@vitejs/plugin-react@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmmirror.com/@vitejs/plugin-react/-/plugin-react-4.0.0.tgz#46d1c37c507447d10467be1c111595174555ef28"
@@ -5932,6 +6009,22 @@ ahooks@^3.7.2:
     screenfull "^5.0.0"
     tslib "^2.4.1"
 
+ahooks@^3.7.6:
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/ahooks/-/ahooks-3.7.7.tgz#b046f8a23a6e6d6695a37ba44f5f4331cf09f1eb"
+  integrity sha512-5e5WlPq81Y84UnTLOKIQeq2cJw4aa7yj8fR2Nb/oMmXPrWMjIMCbPS1o+fpxSfCaNA3AzOnnMc8AehWRZltkJQ==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@types/js-cookie" "^2.x.x"
+    ahooks-v3-count "^1.0.0"
+    dayjs "^1.9.1"
+    intersection-observer "^0.12.0"
+    js-cookie "^2.x.x"
+    lodash "^4.17.21"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+    tslib "^2.4.1"
+
 airbnb-prop-types@^2.16.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz#b96274cefa1abb14f623f804173ee97c13971dc2"
@@ -6131,6 +6224,39 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
 
+antd-mobile-icons@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/antd-mobile-icons/-/antd-mobile-icons-0.3.0.tgz#9b29e4588a62370909061f10ff0579aabb0b32a9"
+  integrity sha512-rqINQpJWZWrva9moCd1Ye695MZYWmqLPE+bY8d2xLRy7iSQwPsinCdZYjpUPp2zL/LnKYSyXxP2ut2A+DC+whQ==
+
+antd-mobile-v5-count@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/antd-mobile-v5-count/-/antd-mobile-v5-count-1.0.1.tgz#85f20c46d1635c24e856bcf5ad55e8c98e44a523"
+  integrity sha512-YGsiEDCPUDz3SzfXi6gLZn/HpeSMW+jgPc4qiYUr1fSopg3hkUie2TnooJdExgfiETHefH3Ggs58He0OVfegLA==
+
+antd-mobile@^5.29.1:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/antd-mobile/-/antd-mobile-5.30.0.tgz#e7540617bbaf9cbe0a1ab69b9811a1906b8a85b8"
+  integrity sha512-M42VrDvFNzTr1OovLa9HezkD2oXmkDERolha9292FNNTvF1QikIcLZA/o1PDP9+0oWvuz59PW1ZfhjTNx6rUyg==
+  dependencies:
+    "@floating-ui/dom" "^1.2.6"
+    "@rc-component/mini-decimal" "^1.0.1"
+    "@react-spring/web" "~9.6.1"
+    "@use-gesture/react" "10.2.20"
+    ahooks "^3.7.6"
+    antd-mobile-icons "^0.3.0"
+    antd-mobile-v5-count "^1.0.1"
+    classnames "^2.3.2"
+    dayjs "^1.11.7"
+    lodash "^4.17.21"
+    rc-field-form "~1.27.4"
+    rc-util "^5.30.0"
+    react-is "^18.2.0"
+    runes2 "^1.1.2"
+    staged-components "^1.1.3"
+    tslib "^2.5.0"
+    use-sync-external-store "^1.2.0"
+
 antd@^4.24.8:
   version "4.24.8"
   resolved "https://registry.yarnpkg.com/antd/-/antd-4.24.8.tgz#22f34de6857556868780dfa5fe7b374b0b71b517"
@@ -18104,7 +18230,7 @@ rc-dropdown@~4.0.0:
     rc-trigger "^5.3.1"
     rc-util "^5.17.0"
 
-rc-field-form@~1.27.0:
+rc-field-form@~1.27.0, rc-field-form@~1.27.4:
   version "1.27.4"
   resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.27.4.tgz#53600714af5b28c226c70d34867a8c52ccd64d44"
   dependencies:
@@ -18386,6 +18512,14 @@ rc-util@^5.0.1, rc-util@^5.0.6, rc-util@^5.12.0, rc-util@^5.15.0, rc-util@^5.16.
     "@babel/runtime" "^7.18.3"
     react-is "^16.12.0"
 
+rc-util@^5.30.0:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.30.0.tgz#76ae9019ff72a5b519ce51465cd77b2e451207e3"
+  integrity sha512-uaWpF/CZGyXuhQG71MWxkU+0bWkPEgqZUxEv251Cu7p3kpHDNm5+Ygu/U8ux0a/zbfGW8PsKcJL0XVBOMrlIZg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+
 rc-virtual-list@^3.2.0, rc-virtual-list@^3.4.8:
   version "3.4.13"
   resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.13.tgz#20acc934b263abcf7b7c161f50ef82281b2f7e8d"
@@ -18527,7 +18661,7 @@ react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
 
@@ -19536,6 +19670,11 @@ run-series@^1.1.8:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/run-series/-/run-series-1.1.9.tgz#15ba9cb90e6a6c054e67c98e1dc063df0ecc113a"
 
+runes2@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/runes2/-/runes2-1.1.2.tgz#408a4cdd31077ca62f52a9aa5bd22d6d16ae6a41"
+  integrity sha512-v6XIdRpUKdFLNhgF2AC9XvntZsDzxyTpVlpQ8HD592XD6vHiW8jEcHFnTV5ztUjWJC5cGOcdi9YKIwxWVh0f9w==
+
 rw@1, rw@^1.3.2:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
@@ -20227,6 +20366,11 @@ stackframe@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
 
+staged-components@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/staged-components/-/staged-components-1.1.3.tgz#bb5a396df2d9b48fbc31841a59f53437ed8b8ac6"
+  integrity sha512-9EIswzDqjwlEu+ymkV09TTlJfzSbKgEnNteUnZSTxkpMgr5Wx2CzzA9WcMFWBNCldqVPsHVnRGGrApduq2Se5A==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -21792,6 +21936,11 @@ use-subscription@1.5.1:
   dependencies:
     object-assign "^4.1.1"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"