@nocobase/plugin-mobile-client 0.10.0-alpha.2 → 0.10.0-alpha.4

package/lib/client/core/bridge/injects.d.ts

@@ -9,5 +9,5 @@ interface InvokeFunction {
     }, cb?: () => void): void;
 }
 export declare const invoke: InvokeFunction;
-export declare const isJSBridge: boolean;
+export declare const isJSBridge: () => boolean;
 export {};

package/lib/client/core/bridge/injects.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isJSBridge = exports.invoke = void 0;
-const JsBridge = window.JsBridge;
+const getJsBridge = () => window.JsBridge;
 const invoke = (params, cb) => {
-  JsBridge.invoke(params, cb);
+  return getJsBridge().invoke(params, cb);
 };
 exports.invoke = invoke;
-const isJSBridge = !!JsBridge;
+const isJSBridge = () => !!getJsBridge();
 exports.isJSBridge = isJSBridge;

package/lib/client/core/schema/components/container/Container.Designer.js

@@ -4,24 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerDesigner = void 0;
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
     return data;
   };
   return data;
 }
 function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function _react() {
-    return data;
-  };
-  return data;
-}
-var _locale = require("../../../../locale");
-function _react2() {
   const data = require("@formily/react");
-  _react2 = function _react2() {
+  _react = function _react() {
     return data;
   };
   return data;
@@ -33,14 +25,13 @@ function _shared() {
   };
   return data;
 }
-function _reactRouterDom() {
-  const data = require("react-router-dom");
-  _reactRouterDom = function _reactRouterDom() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-var _helpers = require("../../helpers");
 function _antd() {
   const data = require("antd");
   _antd = function _antd() {
@@ -48,14 +39,23 @@ function _antd() {
   };
   return data;
 }
-function _icons() {
-  const data = require("@ant-design/icons");
-  _icons = function _icons() {
+function _react2() {
+  const data = _interopRequireDefault(require("react"));
+  _react2 = function _react2() {
     return data;
   };
   return data;
 }
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+  _reactRouterDom = function _reactRouterDom() {
+    return data;
+  };
+  return data;
+}
+var _locale = require("../../../../locale");
 var _common = require("../../common");
+var _helpers = require("../../helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -67,27 +67,28 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 const ContainerDesigner = () => {
   const _useTranslation = (0, _locale.useTranslation)(),
     t = _useTranslation.t;
-  const fieldSchema = (0, _react2().useFieldSchema)();
+  const fieldSchema = (0, _react().useFieldSchema)();
   const _useDesignable = (0, _client().useDesignable)(),
     dn = _useDesignable.dn;
   const tabBarSchema = fieldSchema.reduceProperties((schema, next) => schema || next['x-component'] === 'MTabBar' && next);
   const navigate = (0, _reactRouterDom().useNavigate)();
-  const field = (0, _react2().useField)();
+  const field = (0, _react().useField)();
   const schemaSettingsProps = {
     dn,
     field,
     fieldSchema
   };
-  return _react().default.createElement(_client().SchemaSettings, _objectSpread({
-    title: _react().default.createElement(_antd().Button, {
+  return _react2().default.createElement(_client().SchemaSettings, _objectSpread({
+    title: _react2().default.createElement(_antd().Button, {
       style: {
         borderColor: 'rgb(241, 139, 98)',
-        color: 'rgb(241, 139, 98)'
+        color: 'rgb(241, 139, 98)',
+        width: '100%'
       },
-      icon: _react().default.createElement(_icons().MenuOutlined, null),
+      icon: _react2().default.createElement(_icons().MenuOutlined, null),
       type: "dashed"
     }, t('App level Configuration'))
-  }, schemaSettingsProps), _react().default.createElement(_client().SchemaSettings.SwitchItem, {
+  }, schemaSettingsProps), _react2().default.createElement(_client().SchemaSettings.SwitchItem, {
     checked: !!tabBarSchema,
     title: t('Enable TabBar'),
     onChange: function () {

package/lib/client/core/schema/components/menu/Menu.Item.js

@@ -48,6 +48,7 @@ function _reactRouterDom() {
 }
 var _locale = require("../../../../locale");
 var _hooks = require("../../hooks");
+var _schema = require("./schema");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -94,24 +95,7 @@ const MenuItemDesigner = () => {
   return _react2().default.createElement(_client().GeneralSchemaDesigner, null, _react2().default.createElement(_client().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': {}
-        }
-      }
-    },
+    schema: _schema.menuItemSchema,
     onSubmit: onUpdateComponentProps
   }), _react2().default.createElement(_client().SchemaSettings.Remove, {
     key: "remove",

package/lib/client/core/schema/components/menu/schema.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.menuItemSchema = void 0;
+var _locale = require("../../../../locale");
 const menuItemSchema = {
   properties: {
     name: {
       type: 'string',
-      title: `{{t('Menu name')}}`,
+      title: (0, _locale.generateNTemplate)('Menu name'),
       required: true,
       'x-component': 'Input',
       'x-decorator': 'FormItem'
@@ -16,7 +17,7 @@ const menuItemSchema = {
     icon: {
       'x-decorator': 'FormItem',
       'x-component': 'IconPicker',
-      title: `{{t('Icon')}}`,
+      title: (0, _locale.generateNTemplate)('Icon'),
       'x-component-props': {}
     }
   }

package/lib/client/core/schema/components/page/Page.Designer.js

@@ -4,32 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageDesigner = void 0;
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
     return data;
   };
   return data;
 }
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = require("@formily/react");
   _react = function _react() {
     return data;
   };
   return data;
 }
-var _locale = require("../../../../locale");
-function _react2() {
-  const data = require("@formily/react");
-  _react2 = function _react2() {
+function _shared() {
+  const data = require("@formily/shared");
+  _shared = function _shared() {
     return data;
   };
   return data;
 }
-var _helpers = require("../../helpers");
-function _shared() {
-  const data = require("@formily/shared");
-  _shared = function _shared() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
@@ -41,13 +39,15 @@ function _antd() {
   };
   return data;
 }
-function _icons() {
-  const data = require("@ant-design/icons");
-  _icons = function _icons() {
+function _react2() {
+  const data = _interopRequireDefault(require("react"));
+  _react2 = function _react2() {
     return data;
   };
   return data;
 }
+var _locale = require("../../../../locale");
+var _helpers = require("../../helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -61,27 +61,28 @@ const PageDesigner = props => {
   const showBack = props.showBack;
   const _useTranslation = (0, _locale.useTranslation)(),
     t = _useTranslation.t;
-  const fieldSchema = (0, _react2().useFieldSchema)();
+  const fieldSchema = (0, _react().useFieldSchema)();
   const _useDesignable = (0, _client().useDesignable)(),
     dn = _useDesignable.dn;
   const headerSchema = fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$properti = fieldSchema.properties) === null || _fieldSchema$properti === void 0 ? void 0 : _fieldSchema$properti['header'];
   const tabsSchema = fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$properti2 = fieldSchema.properties) === null || _fieldSchema$properti2 === void 0 ? void 0 : _fieldSchema$properti2['tabs'];
-  const field = (0, _react2().useField)();
+  const field = (0, _react().useField)();
   const schemaSettingsProps = {
     dn,
     field,
     fieldSchema
   };
-  return _react().default.createElement(_client().SchemaSettings, _objectSpread({
-    title: _react().default.createElement(_antd().Button, {
+  return _react2().default.createElement(_client().SchemaSettings, _objectSpread({
+    title: _react2().default.createElement(_antd().Button, {
       style: {
         borderColor: 'rgb(241, 139, 98)',
-        color: 'rgb(241, 139, 98)'
+        color: 'rgb(241, 139, 98)',
+        width: '100%'
       },
-      icon: _react().default.createElement(_icons().MenuOutlined, null),
+      icon: _react2().default.createElement(_icons().MenuOutlined, null),
       type: "dashed"
     }, t('Page configuration'))
-  }, schemaSettingsProps), _react().default.createElement(_client().SchemaSettings.SwitchItem, {
+  }, schemaSettingsProps), _react2().default.createElement(_client().SchemaSettings.SwitchItem, {
     checked: !!headerSchema,
     title: t('Enable Header'),
     onChange: function () {
@@ -108,7 +109,7 @@ const PageDesigner = props => {
       }
       return onChange;
     }()
-  }), _react().default.createElement(_client().SchemaSettings.SwitchItem, {
+  }), _react2().default.createElement(_client().SchemaSettings.SwitchItem, {
     checked: !!tabsSchema,
     title: t('Enable Tabs'),
     onChange: function () {

package/lib/client/core/schema/components/page/Page.js

@@ -78,65 +78,72 @@ const InternalPage = props => {
   // Only support globalActions in page
   const onlyInPage = fieldSchema.root === fieldSchema.parent;
   let hasGlobalActions = false;
-  if (!tabsSchema) {
+  if (!tabsSchema && fieldSchema.properties) {
     hasGlobalActions = (0, _helpers.countGridCol)(fieldSchema.properties['grid'], 2) === 1;
-  } else if (searchParams.has('tab') && ((_tabsSchema$propertie = tabsSchema.properties) === null || _tabsSchema$propertie === void 0 ? void 0 : _tabsSchema$propertie[searchParams.get('tab')])) {
+  } else if (searchParams.has('tab') && (tabsSchema === null || tabsSchema === void 0 ? void 0 : (_tabsSchema$propertie = tabsSchema.properties) === null || _tabsSchema$propertie === void 0 ? void 0 : _tabsSchema$propertie[searchParams.get('tab')])) {
     var _tabsSchema$propertie2, _tabsSchema$propertie3;
     hasGlobalActions = (0, _helpers.countGridCol)((_tabsSchema$propertie2 = tabsSchema.properties[searchParams.get('tab')]) === null || _tabsSchema$propertie2 === void 0 ? void 0 : (_tabsSchema$propertie3 = _tabsSchema$propertie2.properties) === null || _tabsSchema$propertie3 === void 0 ? void 0 : _tabsSchema$propertie3['grid'], 2) === 1;
-  } else if (tabsSchema.properties) {
+  } else if (tabsSchema === null || tabsSchema === void 0 ? void 0 : tabsSchema.properties) {
     const schema = Object.values(tabsSchema.properties).sort((t1, t2) => t1['x-index'] - t2['x-index'])[0];
     if (schema) {
       setTimeout(() => {
-        setSearchParams([['tab', schema.name.toString()]]);
+        setSearchParams([['tab', schema.name.toString()]], {
+          replace: true
+        });
       });
     }
   }
   const onTabsChange = (0, _react2().useCallback)(key => {
-    setSearchParams([['tab', key]]);
+    setSearchParams([['tab', key]], {
+      replace: true
+    });
   }, [setSearchParams]);
-  const GlobalActionProvider = (0, _react2().useMemo)(() => {
+  const GlobalActionProvider = (0, _react2().useCallback)(props => {
     if (hasGlobalActions) {
-      return _client().ActionBarProvider;
+      return _react2().default.createElement(_client().TabsContextProvider, null, _react2().default.createElement(_client().ActionBarProvider, {
+        container: (typeof props.active !== 'undefined' ? props.active : true) && onlyInPage ? document.getElementById('nb-position-container') : null,
+        forceProps: {
+          layout: 'one-column',
+          className: globalActionCSS
+        }
+      }, props.children));
     }
-    return props => _react2().default.createElement(_react2().default.Fragment, null, props.children);
-  }, [hasGlobalActions]);
-  return _react2().default.createElement(GlobalActionProvider, {
-    container: hasGlobalActions && onlyInPage ? document.getElementById('nb-position-container') : null,
-    forceProps: {
-      layout: 'one-column',
-      className: globalActionCSS
-    }
-  }, _react2().default.createElement(_client().SortableItem, {
+    return _react2().default.createElement(_react2().default.Fragment, null, props.children);
+  }, [hasGlobalActions, onlyInPage]);
+  return _react2().default.createElement(_client().SortableItem, {
     eid: "nb-mobile-scroll-wrapper",
     className: (0, _css().cx)('nb-mobile-page', (0, _css().css)`
-            background: #f0f2f5;
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            height: 100%;
-            overflow-x: hidden;
-            overflow-y: auto;
-            padding-bottom: var(--nb-spacing);
-          `)
+          background: #f0f2f5;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+          overflow-x: hidden;
+          overflow-y: auto;
+          padding-bottom: var(--nb-spacing);
+        `)
   }, _react2().default.createElement(Designer, _objectSpread({}, fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-designer-props'])), _react2().default.createElement("div", {
     style: {
       paddingBottom: tabsSchema ? null : 'var(--nb-spacing)'
     },
     className: (0, _css().cx)('nb-mobile-page-header', (0, _css().css)`
-              & > .ant-tabs > .ant-tabs-nav {
-                background: #fff;
-                padding: 0 var(--nb-spacing);
+            & > .ant-tabs > .ant-tabs-nav {
+              .ant-tabs-tab {
+                margin: 0 !important;
+                padding: 0 16px !important;
               }
-              display: flex;
-              flex-direction: column;
-            `)
+              background: #fff;
+            }
+            display: flex;
+            flex-direction: column;
+          `)
   }, _react2().default.createElement(_react().RecursionField, {
     schema: fieldSchema,
     filterProperties: s => {
       return 'MHeader' === s['x-component'];
     }
   }), _react2().default.createElement(_client().TabsContextProvider, {
-    deep: false,
+    PaneRoot: GlobalActionProvider,
     activeKey: searchParams.get('tab'),
     onChange: onTabsChange
   }, _react2().default.createElement(_react().RecursionField, {
@@ -144,7 +151,7 @@ const InternalPage = props => {
     filterProperties: s => {
       return 'Tabs' === s['x-component'];
     }
-  }))), !tabsSchema && _react2().default.createElement(_react().RecursionField, {
+  }))), _react2().default.createElement(GlobalActionProvider, null, !tabsSchema && _react2().default.createElement(_react().RecursionField, {
     schema: fieldSchema,
     filterProperties: s => {
       return s['x-component'] !== 'MHeader';

package/lib/client/core/schema/components/settings/Settings.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MSettings = exports.InternalSettings = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function _react() {
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
     return data;
   };
   return data;
@@ -18,14 +18,14 @@ function _client() {
   };
   return data;
 }
-var _Settings = require("./Settings.Designer");
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
     return data;
   };
   return data;
 }
+var _Settings = require("./Settings.Designer");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const InternalSettings = () => {
   const Designer = (0, _client().useDesigner)();

package/lib/client/locale/index.d.ts

@@ -1,4 +1,4 @@
 export declare const NAMESPACE = "mobile-client";
 export declare function lang(key: string): string;
 export declare function generateNTemplate(key: string): string;
-export declare function useTranslation(): import("react-i18next").UseTranslationResponse<("mobile-client" | "client")[], undefined>;
+export declare function useTranslation(): import("react-i18next").UseTranslationResponse<("client" | "mobile-client")[], undefined>;

package/lib/client/router/Application.js

@@ -4,36 +4,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function _react() {
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
     return data;
   };
   return data;
 }
-function _reactRouterDom() {
-  const data = require("react-router-dom");
-  _reactRouterDom = function _reactRouterDom() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
     return data;
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+  _reactRouterDom = function _reactRouterDom() {
     return data;
   };
   return data;
 }
-var _InterfaceProvider = require("./InterfaceProvider");
 var _core = require("../core");
+var _InterfaceProvider = require("./InterfaceProvider");
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -98,8 +98,14 @@ const modalProps = _objectSpread(_objectSpread({}, drawerProps), {}, {
     position: absolute;
   `
 });
+const useMobileSchemaUid = () => {
+  var _ctx$data, _ctx$data$data, _ctx$data$data$option;
+  const ctx = (0, _client().useSystemSettings)();
+  return ctx === null || ctx === void 0 ? void 0 : (_ctx$data = ctx.data) === null || _ctx$data === void 0 ? void 0 : (_ctx$data$data = _ctx$data.data) === null || _ctx$data$data === void 0 ? void 0 : (_ctx$data$data$option = _ctx$data$data.options) === null || _ctx$data$data$option === void 0 ? void 0 : _ctx$data$data$option.mobileSchemaUid;
+};
 const MApplication = props => {
-  const route = (0, _client().useRoute)();
+  const mobileSchemaUid = useMobileSchemaUid();
+  console.log('mobileSchemaUid', mobileSchemaUid);
   const params = (0, _reactRouterDom().useParams)();
   const interfaceContext = (0, _InterfaceProvider.useInterfaceContext)();
   const Provider = (0, _react().useMemo)(() => {
@@ -119,8 +125,8 @@ const MApplication = props => {
                 overflow: hidden;
               `)
   }, params.name && !params.name.startsWith('tab_') ? _react().default.createElement(_reactRouterDom().Outlet, null) : _react().default.createElement(_client().RemoteSchemaComponent, {
-    key: route.uiSchemaUid,
-    uid: route.uiSchemaUid
+    key: mobileSchemaUid,
+    uid: mobileSchemaUid
   }, props.children), _react().default.createElement("div", {
     id: "nb-position-container"
   })))));

package/lib/client/router/RouteSwitchProvider.js

@@ -43,7 +43,7 @@ const RouterSwitchProvider = props => {
   const location = (0, _reactRouterDom().useLocation)();
   const navigate = (0, _reactRouterDom().useNavigate)();
   (0, _react().useEffect)(() => {
-    if (_bridge.isJSBridge) {
+    if ((0, _bridge.isJSBridge)()) {
       if (location.pathname.includes('/admin')) {
         navigate('/mobile');
       }

package/lib/server/migrations/20230620203217-mobile-ui-schema-uid.d.ts

@@ -0,0 +1,4 @@
+import { Migration } from '@nocobase/server';
+export default class extends Migration {
+    up(): Promise<void>;
+}

package/lib/server/migrations/20230620203217-mobile-ui-schema-uid.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _server() {
+  const data = require("@nocobase/server");
+  _server = function _server() {
+    return data;
+  };
+  return data;
+}
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+class _default extends _server().Migration {
+  up() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      var _instance$get;
+      const systemSettings = _this.db.getRepository('systemSettings');
+      let instance = yield systemSettings.findOne();
+      const uiRoutes = _this.db.getRepository('uiRoutes');
+      const routes = yield uiRoutes.find();
+      var _iterator = _createForOfIteratorHelper(routes),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _route$options;
+          const route = _step.value;
+          if (route.uiSchemaUid && (route === null || route === void 0 ? void 0 : (_route$options = route.options) === null || _route$options === void 0 ? void 0 : _route$options.component) === 'MApplication') {
+            const options = instance.options || {};
+            options['mobileSchemaUid'] = route.uiSchemaUid;
+            instance.set('options', options);
+            instance.changed('options', true);
+            yield instance.save();
+            return;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      instance = yield systemSettings.findOne();
+      if (!((_instance$get = instance.get('options')) === null || _instance$get === void 0 ? void 0 : _instance$get.mobileSchemaUid)) {
+        throw new Error('mobileSchemaUid invalid');
+      }
+      _this.app.log.info('systemSettings.options', instance.toJSON());
+    })();
+  }
+}
+exports.default = _default;

package/lib/server/plugin.js

@@ -11,6 +11,13 @@ function _server() {
   };
   return data;
 }
+function _path() {
+  const data = require("path");
+  _path = function _path() {
+    return data;
+  };
+  return data;
+}
 var _routes = require("./routes");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -20,12 +27,21 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 class MobileClientPlugin extends _server().Plugin {
   afterAdd() {}
   load() {
-    return _asyncToGenerator(function* () {})();
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.db.addMigrations({
+        namespace: 'client',
+        directory: (0, _path().resolve)(__dirname, './migrations'),
+        context: {
+          plugin: _this
+        }
+      });
+    })();
   }
   install() {
-    var _this = this;
+    var _this2 = this;
     return _asyncToGenerator(function* () {
-      const repository = _this.app.db.getRepository('uiRoutes');
+      const repository = _this2.app.db.getRepository('uiRoutes');
       var _iterator = _createForOfIteratorHelper(_routes.routes),
         _step;
       try {
@@ -40,6 +56,35 @@ class MobileClientPlugin extends _server().Plugin {
       } finally {
         _iterator.f();
       }
+      const uiSchemas = _this2.db.getRepository('uiSchemas');
+      const systemSettings = _this2.db.getRepository('systemSettings');
+      const schema = yield uiSchemas.insert({
+        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
+                }
+              }
+            }
+          }
+        }
+      });
+      const instance = yield systemSettings.findOne();
+      instance.set('options.mobileSchemaUid', schema['x-uid']);
+      yield instance.save();
     })();
   }
   afterEnable() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/plugin-mobile-client",
-  "version": "0.10.0-alpha.2",
+  "version": "0.10.0-alpha.4",
   "main": "lib/server/index.js",
   "displayName": "Mobile-client",
   "displayName.zh-CN": "移动端",
@@ -8,11 +8,11 @@
   "description.zh-CN": "提供移动端访问",
   "devDependencies": {
     "@emotion/css": "^11.7.1",
-    "@formily/antd": "2.2.24",
-    "@formily/react": "2.2.24",
-    "@formily/shared": "2.2.24",
-    "@nocobase/server": "0.10.0-alpha.2",
-    "@nocobase/test": "0.10.0-alpha.2",
+    "@formily/antd": "2.2.26",
+    "@formily/react": "2.2.26",
+    "@formily/shared": "2.2.26",
+    "@nocobase/server": "0.10.0-alpha.4",
+    "@nocobase/test": "0.10.0-alpha.4",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "antd": "^4.24.8",
@@ -24,5 +24,5 @@
   "dependencies": {
     "antd-mobile": "^5.29.1"
   },
-  "gitHead": "85028ae1733fcbd46ecd5d291dacbdc175f7f073"
+  "gitHead": "62dacadb2a83d30cb36dda9074f2f3a072a37484"
 }

package/src/client/core/bridge/injects.ts

@@ -3,12 +3,13 @@ interface InvokeFunction {
   (params: { action: 'moveTaskToBack' }, cb?: () => void): void;
 }
 
-const JsBridge = (window as any).JsBridge as {
-  invoke: InvokeFunction;
-};
+const getJsBridge = () =>
+  (window as any).JsBridge as {
+    invoke: InvokeFunction;
+  };
 
 export const invoke: InvokeFunction = (params, cb) => {
-  JsBridge.invoke(params, cb);
+  return getJsBridge().invoke(params, cb);
 };
 
-export const isJSBridge = !!JsBridge;
+export const isJSBridge = () => !!getJsBridge();

package/src/client/core/schema/components/container/Container.Designer.tsx

@@ -1,13 +1,13 @@
-import { SchemaSettings, useDesignable } from '@nocobase/client';
-import React from 'react';
-import { generateNTemplate, useTranslation } from '../../../../locale';
+import { MenuOutlined } from '@ant-design/icons';
 import { Schema, useField, useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
-import { useNavigate } from 'react-router-dom';
-import { findSchema } from '../../helpers';
+import { SchemaSettings, useDesignable } from '@nocobase/client';
 import { Button } from 'antd';
-import { MenuOutlined } from '@ant-design/icons';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { generateNTemplate, useTranslation } from '../../../../locale';
 import { PageSchema } from '../../common';
+import { findSchema } from '../../helpers';
 
 export const ContainerDesigner = () => {
   const { t } = useTranslation();
@@ -32,6 +32,7 @@ export const ContainerDesigner = () => {
           style={{
             borderColor: 'rgb(241, 139, 98)',
             color: 'rgb(241, 139, 98)',
+            width: '100%',
           }}
           icon={<MenuOutlined />}
           type="dashed"

package/src/client/core/schema/components/menu/Menu.Item.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from '../../../../locale';
 import { useSchemaPatch } from '../../hooks';
+import { menuItemSchema } from './schema';
 
 interface MMenuItemProps extends ListItemProps {
   name: string;
@@ -56,24 +57,7 @@ const MenuItemDesigner: React.FC = () => {
       <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': {},
-            },
-          },
-        }}
+        schema={menuItemSchema}
         onSubmit={onUpdateComponentProps}
       />
       <SchemaSettings.Remove

package/src/client/core/schema/components/menu/schema.ts

@@ -1,8 +1,10 @@
+import { generateNTemplate } from '../../../../locale';
+
 export const menuItemSchema = {
   properties: {
     name: {
       type: 'string',
-      title: `{{t('Menu name')}}`,
+      title: generateNTemplate('Menu name'),
       required: true,
       'x-component': 'Input',
       'x-decorator': 'FormItem',
@@ -10,7 +12,7 @@ export const menuItemSchema = {
     icon: {
       'x-decorator': 'FormItem',
       'x-component': 'IconPicker',
-      title: `{{t('Icon')}}`,
+      title: generateNTemplate('Icon'),
       'x-component-props': {},
     },
   },

package/src/client/core/schema/components/page/Page.Designer.tsx

@@ -1,11 +1,11 @@
-import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
-import React from 'react';
-import { generateNTemplate, useTranslation } from '../../../../locale';
+import { MenuOutlined } from '@ant-design/icons';
 import { useField, useFieldSchema } from '@formily/react';
-import { findGridSchema } from '../../helpers';
 import { uid } from '@formily/shared';
+import { SchemaSettings, useDesignable } from '@nocobase/client';
 import { Button } from 'antd';
-import { MenuOutlined } from '@ant-design/icons';
+import React from 'react';
+import { generateNTemplate, useTranslation } from '../../../../locale';
+import { findGridSchema } from '../../helpers';
 
 export const PageDesigner = (props) => {
   const { showBack } = props;
@@ -28,6 +28,7 @@ export const PageDesigner = (props) => {
           style={{
             borderColor: 'rgb(241, 139, 98)',
             color: 'rgb(241, 139, 98)',
+            width: '100%',
           }}
           icon={<MenuOutlined />}
           type="dashed"

package/src/client/core/schema/components/page/Page.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { RecursionField, useFieldSchema } from '@formily/react';
 import { ActionBarProvider, SortableItem, TabsContextProvider, useDesigner } from '@nocobase/client';
 import { TabsProps } from 'antd';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { countGridCol } from '../../helpers';
 import { PageDesigner } from './Page.Designer';
@@ -28,90 +28,113 @@ const InternalPage: React.FC = (props) => {
   // Only support globalActions in page
   const onlyInPage = fieldSchema.root === fieldSchema.parent;
   let hasGlobalActions = false;
-  if (!tabsSchema) {
+  if (!tabsSchema && fieldSchema.properties) {
     hasGlobalActions = countGridCol(fieldSchema.properties['grid'], 2) === 1;
-  } else if (searchParams.has('tab') && tabsSchema.properties?.[searchParams.get('tab')]) {
+  } else if (searchParams.has('tab') && tabsSchema?.properties?.[searchParams.get('tab')]) {
     hasGlobalActions = countGridCol(tabsSchema.properties[searchParams.get('tab')]?.properties?.['grid'], 2) === 1;
-  } else if (tabsSchema.properties) {
+  } else if (tabsSchema?.properties) {
     const schema = Object.values(tabsSchema.properties).sort((t1, t2) => t1['x-index'] - t2['x-index'])[0];
     if (schema) {
       setTimeout(() => {
-        setSearchParams([['tab', schema.name.toString()]]);
+        setSearchParams([['tab', schema.name.toString()]], {
+          replace: true,
+        });
       });
     }
   }
 
   const onTabsChange = useCallback<TabsProps['onChange']>(
     (key) => {
-      setSearchParams([['tab', key]]);
+      setSearchParams([['tab', key]], {
+        replace: true,
+      });
     },
     [setSearchParams],
   );
 
-  const GlobalActionProvider = useMemo(() => {
-    if (hasGlobalActions) {
-      return ActionBarProvider;
-    }
-    return (props) => <>{props.children}</>;
-  }, [hasGlobalActions]);
+  const GlobalActionProvider = useCallback(
+    (props) => {
+      if (hasGlobalActions) {
+        return (
+          <TabsContextProvider>
+            <ActionBarProvider
+              container={
+                (typeof props.active !== 'undefined' ? props.active : true) && onlyInPage
+                  ? document.getElementById('nb-position-container')
+                  : null
+              }
+              forceProps={{
+                layout: 'one-column',
+                className: globalActionCSS,
+              }}
+            >
+              {props.children}
+            </ActionBarProvider>
+          </TabsContextProvider>
+        );
+      }
+      return <>{props.children}</>;
+    },
+    [hasGlobalActions, onlyInPage],
+  );
 
   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);
+        `,
+      )}
     >
-      <SortableItem
-        eid="nb-mobile-scroll-wrapper"
+      <Designer {...fieldSchema?.['x-designer-props']}></Designer>
+      <div
+        style={{
+          paddingBottom: tabsSchema ? null : 'var(--nb-spacing)',
+        }}
         className={cx(
-          'nb-mobile-page',
+          'nb-mobile-page-header',
           css`
-            background: #f0f2f5;
+            & > .ant-tabs > .ant-tabs-nav {
+              .ant-tabs-tab {
+                margin: 0 !important;
+                padding: 0 16px !important;
+              }
+              background: #fff;
+            }
             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)',
+        <RecursionField
+          schema={fieldSchema}
+          filterProperties={(s) => {
+            return 'MHeader' === s['x-component'];
           }}
-          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>
+        <TabsContextProvider
+          PaneRoot={GlobalActionProvider}
+          activeKey={searchParams.get('tab')}
+          onChange={onTabsChange}
         >
           <RecursionField
             schema={fieldSchema}
             filterProperties={(s) => {
-              return 'MHeader' === s['x-component'];
+              return 'Tabs' === s['x-component'];
             }}
           ></RecursionField>
-          <TabsContextProvider deep={false} activeKey={searchParams.get('tab')} onChange={onTabsChange}>
-            <RecursionField
-              schema={fieldSchema}
-              filterProperties={(s) => {
-                return 'Tabs' === s['x-component'];
-              }}
-            ></RecursionField>
-          </TabsContextProvider>
-        </div>
-
+        </TabsContextProvider>
+      </div>
+      <GlobalActionProvider>
         {!tabsSchema && (
           <RecursionField
             schema={fieldSchema}
@@ -120,8 +143,8 @@ const InternalPage: React.FC = (props) => {
             }}
           ></RecursionField>
         )}
-      </SortableItem>
-    </GlobalActionProvider>
+      </GlobalActionProvider>
+    </SortableItem>
   );
 };
 

package/src/client/core/schema/components/settings/Settings.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { css, cx } from '@emotion/css';
 import { SettingsMenu, SortableItem, useDesigner } from '@nocobase/client';
+import React from 'react';
 import { SettingsDesigner } from './Settings.Designer';
-import { css, cx } from '@emotion/css';
 export const InternalSettings = () => {
   const Designer = useDesigner();
   return (

package/src/client/router/Application.tsx

@@ -1,10 +1,16 @@
-import React, { useMemo } from 'react';
-import { Outlet, useParams } from 'react-router-dom';
-import { ActionContextProvider, AdminProvider, RemoteSchemaComponent, useRoute, useViewport } from '@nocobase/client';
 import { css, cx } from '@emotion/css';
-import { useInterfaceContext } from './InterfaceProvider';
+import {
+  ActionContextProvider,
+  AdminProvider,
+  RemoteSchemaComponent,
+  useSystemSettings,
+  useViewport,
+} from '@nocobase/client';
 import { DrawerProps, ModalProps } from 'antd';
+import React, { useMemo } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
 import { MobileCore } from '../core';
+import { useInterfaceContext } from './InterfaceProvider';
 
 const commonCSSVariables = css`
   --nb-spacing: 14px;
@@ -66,8 +72,14 @@ const modalProps = {
   `,
 };
 
+const useMobileSchemaUid = () => {
+  const ctx = useSystemSettings();
+  return ctx?.data?.data?.options?.mobileSchemaUid;
+};
+
 const MApplication: React.FC = (props) => {
-  const route = useRoute();
+  const mobileSchemaUid = useMobileSchemaUid();
+  console.log('mobileSchemaUid', mobileSchemaUid);
   const params = useParams<{ name: string }>();
   const interfaceContext = useInterfaceContext();
   const Provider = useMemo(() => {
@@ -99,10 +111,11 @@ const MApplication: React.FC = (props) => {
             {params.name && !params.name.startsWith('tab_') ? (
               <Outlet />
             ) : (
-              <RemoteSchemaComponent key={route.uiSchemaUid} uid={route.uiSchemaUid}>
+              <RemoteSchemaComponent key={mobileSchemaUid} uid={mobileSchemaUid}>
                 {props.children}
               </RemoteSchemaComponent>
             )}
+            {/* Global action will insert here */}
             <div id="nb-position-container"></div>
           </div>
         </ActionContextProvider>

package/src/client/router/RouteSwitchProvider.tsx

@@ -10,7 +10,7 @@ export const RouterSwitchProvider = (props) => {
   const location = useLocation();
   const navigate = useNavigate();
   useEffect(() => {
-    if (isJSBridge) {
+    if (isJSBridge()) {
       if (location.pathname.includes('/admin')) {
         navigate('/mobile');
       }

package/src/server/migrations/20230620203217-mobile-ui-schema-uid.ts

@@ -0,0 +1,26 @@
+import { Model } from '@nocobase/database';
+import { Migration } from '@nocobase/server';
+
+export default class extends Migration {
+  async up() {
+    const systemSettings = this.db.getRepository('systemSettings');
+    let instance: Model = await systemSettings.findOne();
+    const uiRoutes = this.db.getRepository('uiRoutes');
+    const routes = await uiRoutes.find();
+    for (const route of routes) {
+      if (route.uiSchemaUid && route?.options?.component === 'MApplication') {
+        const options = instance.options || {};
+        options['mobileSchemaUid'] = route.uiSchemaUid;
+        instance.set('options', options);
+        instance.changed('options', true);
+        await instance.save();
+        return;
+      }
+    }
+    instance = await systemSettings.findOne();
+    if (!instance.get('options')?.mobileSchemaUid) {
+      throw new Error('mobileSchemaUid invalid');
+    }
+    this.app.log.info('systemSettings.options', instance.toJSON());
+  }
+}

package/src/server/plugin.ts

@@ -1,10 +1,19 @@
-import { InstallOptions, Plugin } from '@nocobase/server';
+import { Plugin } from '@nocobase/server';
+import { resolve } from 'path';
 import { routes } from './routes';
 
 export class MobileClientPlugin extends Plugin {
   afterAdd() {}
 
-  async load() {}
+  async load() {
+    this.db.addMigrations({
+      namespace: 'client',
+      directory: resolve(__dirname, './migrations'),
+      context: {
+        plugin: this,
+      },
+    });
+  }
 
   async install() {
     const repository = this.app.db.getRepository('uiRoutes');
@@ -13,6 +22,35 @@ export class MobileClientPlugin extends Plugin {
         values,
       });
     }
+    const uiSchemas = this.db.getRepository<any>('uiSchemas');
+    const systemSettings = this.db.getRepository('systemSettings');
+    const schema = await uiSchemas.insert({
+      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,
+              },
+            },
+          },
+        },
+      },
+    });
+    const instance = await systemSettings.findOne();
+    instance.set('options.mobileSchemaUid', schema['x-uid']);
+    await instance.save();
   }
 
   async afterEnable() {}