@nocobase/plugin-mobile-client 0.10.1-alpha.1 → 0.11.1-alpha.1

package/client.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/client';
-export { default } from './lib/client';
+export * from './src/client';
+export { default } from './src/client';
 

package/client.js

@@ -1,30 +1 @@
-"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];
-    }
-  });
-});
+module.exports = require('./lib/client/index.js');

package/lib/client/MobileClientProvider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MobileClientProvider: React.NamedExoticComponent<object>;

package/lib/client/MobileClientProvider.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileClientProvider = void 0;
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+  _reactRouterDom = function _reactRouterDom() {
+    return data;
+  };
+  return data;
+}
+var _configuration = require("./configuration");
+var _bridge = require("./core/bridge");
+var _locale = require("./locale");
+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; }
+const MobileClientProvider = _react().default.memo(props => {
+  const _useTranslation = (0, _locale.useTranslation)(),
+    t = _useTranslation.t;
+  const location = (0, _reactRouterDom().useLocation)();
+  const navigation = (0, _reactRouterDom().useNavigate)();
+  (0, _react().useEffect)(() => {
+    if ((0, _bridge.isJSBridge)() && location.pathname === '/admin') {
+      navigation('/mobile', {
+        replace: true
+      });
+    }
+  }, [location.pathname, navigation]);
+  return _react().default.createElement(_client().SettingsCenterProvider, {
+    settings: {
+      ['mobile-client']: {
+        title: t('Mobile Client-side'),
+        icon: 'MobileOutlined',
+        tabs: {
+          interface: {
+            title: t('Interface Configuration'),
+            component: _configuration.InterfaceConfiguration
+          },
+          app: {
+            title: t('App Configuration'),
+            component: _configuration.AppConfiguration
+          }
+        }
+      }
+    }
+  }, props.children);
+});
+exports.MobileClientProvider = MobileClientProvider;

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

@@ -81,8 +81,8 @@ const ContainerDesigner = () => {
   return _react2().default.createElement(_client().SchemaSettings, _objectSpread({
     title: _react2().default.createElement(_antd().Button, {
       style: {
-        borderColor: 'rgb(241, 139, 98)',
-        color: 'rgb(241, 139, 98)',
+        borderColor: 'var(--colorSettings)',
+        color: 'var(--colorSettings)',
         width: '100%'
       },
       icon: _react2().default.createElement(_icons().MenuOutlined, null),

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

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MContainer = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 function _react() {
   const data = require("@formily/react");
   _react = function _react() {
@@ -40,6 +33,8 @@ function _reactRouterDom() {
   return data;
 }
 var _Container = require("./Container.Designer");
+var _style = _interopRequireDefault(require("./style"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
 const findGrid = (schema, uid) => {
@@ -71,71 +66,45 @@ const TabContentComponent = () => {
 };
 const InternalContainer = props => {
   var _fieldSchema$properti;
+  const _useStyles = (0, _style.default)(),
+    styles = _useStyles.styles;
+  const _useToken = (0, _client().useToken)(),
+    token = _useToken.token;
   const Designer = (0, _client().useDesigner)();
   const fieldSchema = (0, _react().useFieldSchema)();
+  const navigate = (0, _reactRouterDom().useNavigate)();
   const params = (0, _reactRouterDom().useParams)();
   const location = (0, _reactRouterDom().useLocation)();
   const tabBarSchema = fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$properti = fieldSchema.properties) === null || _fieldSchema$properti === void 0 ? void 0 : _fieldSchema$properti['tabBar'];
-  const tabBarCurrentFirstKey = (tabBarSchema === null || tabBarSchema === void 0 ? void 0 : tabBarSchema.properties) ? Object.keys(tabBarSchema.properties)[0] : null;
+  const tabBarCurrentFirstKey = tabBarSchema !== null && tabBarSchema !== void 0 && tabBarSchema.properties ? Object.keys(tabBarSchema.properties)[0] : null;
   let redirectToUid = null;
   if (tabBarCurrentFirstKey) {
     var _tabBarSchema$propert;
     redirectToUid = tabBarSchema === null || tabBarSchema === void 0 ? void 0 : (_tabBarSchema$propert = tabBarSchema.properties[tabBarCurrentFirstKey]) === null || _tabBarSchema$propert === void 0 ? void 0 : _tabBarSchema$propert['x-uid'];
   }
-  const tabRoutes = (0, _react2().useMemo)(() => {
-    if (!redirectToUid) {
-      return [];
+  (0, _react2().useEffect)(() => {
+    if (redirectToUid && !params.name) {
+      const locationPath = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
+      navigate(`${locationPath}/tab_${redirectToUid}`, {
+        replace: true
+      });
     }
-    const locationPath = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
-    return [!params.name ? {
-      type: 'redirect',
-      to: `${locationPath}/tab_${redirectToUid}`,
-      from: location.pathname
-    } : null, {
-      type: 'route',
-      path: location.pathname,
-      component: TabContentComponent
-    }].filter(Boolean);
-  }, [redirectToUid, params.name, location.pathname]);
+  }, [location.pathname, navigate, params.name, redirectToUid]);
   return _react2().default.createElement(_client().SortableItem, {
     eid: "nb-mobile-scroll-wrapper",
-    className: (0, _css().cx)('nb-mobile-container', (0, _css().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;
-        `)
+    className: (0, _client().cx)('nb-mobile-container', styles.mobileContainer)
   }, _react2().default.createElement(Designer, null), _react2().default.createElement("div", {
     style: {
-      paddingBottom: tabRoutes.length ? '50px' : '0px'
+      paddingBottom: redirectToUid ? token.paddingLG * 2 : 0
     },
-    className: (0, _css().cx)('nb-mobile-container-content')
-  }, tabRoutes.length ? _react2().default.createElement(_client().RouteSwitch, {
-    routes: tabRoutes
-  }) : _react2().default.createElement(_client().SchemaComponent, {
+    className: "nb-mobile-container-content"
+  }, redirectToUid ? _react2().default.createElement(TabContentComponent, null) : _react2().default.createElement(_client().SchemaComponent, {
     filterProperties: schema => {
       return schema['x-component'] !== 'MTabBar';
     },
     schema: fieldSchema
   })), _react2().default.createElement("div", {
-    className: (0, _css().cx)('nb-mobile-container-tab-bar', (0, _css().css)`
-            & > .general-schema-designer {
-              --nb-designer-top: 20px;
-            }
-            position: absolute;
-            background: #ffffff;
-            width: 100%;
-            bottom: 0;
-            left: 0;
-            z-index: 1000;
-          `)
+    className: (0, _client().cx)('nb-mobile-container-tab-bar', styles.tabBar)
   }, _react2().default.createElement(_client().SchemaComponent, {
     onlyRenderProperties: true,
     filterProperties: schema => {

package/lib/client/core/schema/components/container/style.d.ts

@@ -0,0 +1,5 @@
+declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    mobileContainer: import("antd-style").SerializedStyles;
+    tabBar: import("antd-style").SerializedStyles;
+}>;
+export default useStyles;

package/lib/client/core/schema/components/container/style.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+const useStyles = (0, _client().createStyles)(({
+  token,
+  css
+}) => {
+  return {
+    mobileContainer: css`
+      --adm-color-primary: ${token.colorPrimary};
+
+      & > .general-schema-designer > .general-schema-designer-icons {
+        right: unset;
+        left: 2px;
+      }
+      background: var(--nb-box-bg);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+      position: initial !important;
+    `,
+    tabBar: css`
+      & > .general-schema-designer {
+        --nb-designer-top: ${token.marginMD}px;
+      }
+      position: absolute;
+      background: ${token.colorBgContainer};
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      z-index: 1000;
+    `
+  };
+});
+var _default = useStyles;
+exports.default = _default;

package/lib/client/core/schema/components/header/Header.Designer.js

@@ -4,6 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HeaderDesigner = void 0;
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
+    return data;
+  };
+  return data;
+}
 function _react() {
   const data = require("@formily/react");
   _react = function _react() {
@@ -25,13 +32,6 @@ function _react2() {
   };
   return data;
 }
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
-    return data;
-  };
-  return data;
-}
 var _locale = require("../../../../locale");
 var _hooks = require("../../hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,7 +46,7 @@ const HeaderDesigner = () => {
   }, _react2().default.createElement(_client().SchemaSettings.ModalItem, {
     title: t('Edit info'),
     components: {
-      Switch: _antd().Switch
+      Switch: _antdV().Switch
     },
     initialValues: field.componentProps,
     schema: {

package/lib/client/core/schema/components/header/Header.js

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MHeader = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 function _react() {
   const data = require("@formily/react");
   _react = function _react() {
@@ -68,15 +61,21 @@ const InternalHeader = props => {
   const navigate = (0, _reactRouterDom().useNavigate)();
   const _useDocumentTitle = (0, _client().useDocumentTitle)(),
     setTitle = _useDocumentTitle.setTitle;
+  const _useToken = (0, _client().useToken)(),
+    token = _useToken.token;
   (0, _react2().useEffect)(() => {
     // sync title
     setTitle(compiledTitle);
   }, [compiledTitle]);
+  const style = (0, _react2().useMemo)(() => {
+    return {
+      width: '100%',
+      background: token.colorBgContainer
+    };
+  }, [token.colorBgContainer]);
   return _react2().default.createElement(_client().SortableItem, {
-    className: (0, _css().cx)('nb-mobile-header', (0, _css().css)`
-          width: 100%;
-          background: #fff;
-        `)
+    className: (0, _client().cx)('nb-mobile-header'),
+    style: style
   }, _react2().default.createElement(_antdMobile().NavBar, {
     backArrow: showBack,
     onBack: () => navigate(-1)

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

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuDesigner = void 0;
-function _client() {
-  const data = require("@nocobase/client");
-  _client = function _client() {
-    return data;
-  };
-  return data;
-}
 function _icons() {
   const data = require("@ant-design/icons");
   _icons = function _icons() {
@@ -19,13 +12,19 @@ function _icons() {
   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 _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
 function _antd() {
   const data = require("antd");
   _antd = function _antd() {
@@ -34,12 +33,13 @@ function _antd() {
   return data;
 }
 function _react2() {
-  const data = require("@formily/react");
+  const data = _interopRequireDefault(require("react"));
   _react2 = function _react2() {
     return data;
   };
   return data;
 }
+var _locale = require("../../../../locale");
 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; }
@@ -49,25 +49,25 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 const MenuDesigner = props => {
   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 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)'
+        borderColor: 'var(--colorSettings)',
+        color: 'var(--colorSettings)'
       },
-      icon: _react().default.createElement(_icons().MenuOutlined, null),
+      icon: _react2().default.createElement(_icons().MenuOutlined, null),
       type: "dashed"
     }, t('Menu configuration'))
-  }, schemaSettingsProps), _react().default.createElement(_client().SchemaSettings.Remove, {
+  }, schemaSettingsProps), _react2().default.createElement(_client().SchemaSettings.Remove, {
     key: "remove",
     removeParentsIfNoChildren: true,
     confirm: {

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

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MenuItem = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 function _react() {
   const data = require("@formily/react");
   _react = function _react() {
@@ -69,7 +62,7 @@ const InternalMenuItem = props => {
     navigate(params.name ? `/mobile/${fieldSchema['x-uid']}` : `${locationPath}/${fieldSchema['x-uid']}`);
   };
   return _react2().default.createElement(_client().SortableItem, {
-    className: (0, _css().cx)('nb-mobile-menu-item', (0, _css().css)`
+    className: (0, _client().cx)('nb-mobile-menu-item', (0, _client().css)`
           width: 100%;
           background: var(--adm-color-background);
           > .adm-list-item {

package/lib/client/core/schema/components/menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MenuItem } from './Menu.Item';
 import { MenuDesigner } from './Menu.Designer';
+import { MenuItem } from './Menu.Item';
 export declare const MMenu: React.FC<{}> & {
     Item: typeof MenuItem;
     Designer: typeof MenuDesigner;

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

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MMenu = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = require("@formily/react");
   _react = function _react() {
     return data;
   };
   return data;
 }
-var _Menu = require("./Menu.Item");
 function _client() {
   const data = require("@nocobase/client");
   _client = function _client() {
@@ -19,35 +18,32 @@ function _client() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _antdMobile() {
+  const data = require("antd-mobile");
+  _antdMobile = function _antdMobile() {
     return data;
   };
   return data;
 }
-var _Menu2 = require("./Menu.Designer");
 function _react2() {
-  const data = require("@formily/react");
+  const data = _interopRequireDefault(require("react"));
   _react2 = function _react2() {
     return data;
   };
   return data;
 }
-function _antdMobile() {
-  const data = require("antd-mobile");
-  _antdMobile = function _antdMobile() {
-    return data;
-  };
-  return data;
-}
 var _locale = require("../../../../locale");
-var _schema = require("./schema");
 var _common = require("../../common");
+var _Menu = require("./Menu.Designer");
+var _Menu2 = require("./Menu.Item");
+var _schema = require("./schema");
+var _style = _interopRequireDefault(require("./style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const InternalMenu = props => {
+  const _useStyles = (0, _style.default)(),
+    styles = _useStyles.styles;
   const Designer = (0, _client().useDesigner)();
-  const fieldSchema = (0, _react2().useFieldSchema)();
+  const fieldSchema = (0, _react().useFieldSchema)();
   const _useDesignable = (0, _client().useDesignable)(),
     insertBeforeEnd = _useDesignable.insertBeforeEnd,
     designable = _useDesignable.designable;
@@ -66,16 +62,12 @@ const InternalMenu = props => {
       properties
     });
   };
-  return _react().default.createElement(_client().SortableItem, {
-    className: (0, _css().cx)('nb-mobile-menu', (0, _css().css)`
-          background: #ffffff;
-          width: 100%;
-          margin-bottom: var(--nb-spacing);
-        `)
-  }, _react().default.createElement(_antdMobile().List, null, designable && _react().default.createElement(_antdMobile().List.Item, null, _react().default.createElement(Designer, null)), _react().default.createElement(_client().DndContext, null, _react().default.createElement(_client().SchemaComponent, {
+  return _react2().default.createElement(_client().SortableItem, {
+    className: (0, _client().cx)('nb-mobile-menu', styles.mobileMenu)
+  }, _react2().default.createElement(_antdMobile().List, null, designable && _react2().default.createElement(_antdMobile().List.Item, null, _react2().default.createElement(Designer, null)), _react2().default.createElement(_client().DndContext, null, _react2().default.createElement(_client().SchemaComponent, {
     onlyRenderProperties: true,
     schema: fieldSchema
-  })), designable ? _react().default.createElement(_antdMobile().List.Item, null, _react().default.createElement(_client().SchemaInitializer.ActionModal, {
+  })), designable ? _react2().default.createElement(_antdMobile().List.Item, null, _react2().default.createElement(_client().SchemaInitializer.ActionModal, {
     buttonText: t('Add menu item'),
     title: t('Add menu item'),
     schema: _schema.menuItemSchema,
@@ -84,5 +76,5 @@ const InternalMenu = props => {
 };
 const MMenu = InternalMenu;
 exports.MMenu = MMenu;
-MMenu.Item = _Menu.MenuItem;
-MMenu.Designer = _Menu2.MenuDesigner;
+MMenu.Item = _Menu2.MenuItem;
+MMenu.Designer = _Menu.MenuDesigner;

package/lib/client/core/schema/components/menu/style.d.ts

@@ -0,0 +1,4 @@
+declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    mobileMenu: import("antd-style").SerializedStyles;
+}>;
+export default useStyles;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
+    return data;
+  };
+  return data;
+}
+const useStyles = (0, _client().createStyles)(({
+  token,
+  css
+}) => {
+  return {
+    mobileMenu: css`
+      --adm-color-primary: ${token.colorPrimary};
+      --adm-color-primary-hover: ${token.colorPrimaryHover};
+      --adm-color-primary-active: ${token.colorPrimaryActive};
+      --padding-left: ${token.paddingSM}px;
+      --adm-color-background: ${token.colorBgContainer};
+      --adm-color-border: ${token.colorBorder};
+
+      background: ${token.colorBgContainer};
+      width: 100%;
+      margin-bottom: var(--nb-spacing);
+    `
+  };
+});
+var _default = useStyles;
+exports.default = _default;

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

@@ -75,8 +75,8 @@ const PageDesigner = props => {
   return _react2().default.createElement(_client().SchemaSettings, _objectSpread({
     title: _react2().default.createElement(_antd().Button, {
       style: {
-        borderColor: 'rgb(241, 139, 98)',
-        color: 'rgb(241, 139, 98)',
+        borderColor: 'var(--colorSettings)',
+        color: 'var(--colorSettings)',
         width: '100%'
       },
       icon: _react2().default.createElement(_icons().MenuOutlined, null),