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

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

@@ -33,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) => {
@@ -64,6 +66,10 @@ 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)();
@@ -86,41 +92,19 @@ const InternalContainer = props => {
   }, [location.pathname, navigate, params.name, redirectToUid]);
   return _react2().default.createElement(_client().SortableItem, {
     eid: "nb-mobile-scroll-wrapper",
-    className: (0, _client().cx)('nb-mobile-container', (0, _client().css)`
-          & > .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;
-        `)
+    className: (0, _client().cx)('nb-mobile-container', styles.mobileContainer)
   }, _react2().default.createElement(Designer, null), _react2().default.createElement("div", {
     style: {
-      paddingBottom: redirectToUid ? '50px' : '0px'
+      paddingBottom: redirectToUid ? token.paddingLG * 2 : 0
     },
-    className: (0, _client().cx)('nb-mobile-container-content')
+    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, _client().cx)('nb-mobile-container-tab-bar', (0, _client().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.js

@@ -61,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, _client().cx)('nb-mobile-header', (0, _client().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.js

@@ -37,8 +37,11 @@ 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, _react().useFieldSchema)();
   const _useDesignable = (0, _client().useDesignable)(),
@@ -60,11 +63,7 @@ const InternalMenu = props => {
     });
   };
   return _react2().default.createElement(_client().SortableItem, {
-    className: (0, _client().cx)('nb-mobile-menu', (0, _client().css)`
-          background: #ffffff;
-          width: 100%;
-          margin-bottom: var(--nb-spacing);
-        `)
+    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

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),

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

@@ -34,6 +34,8 @@ function _reactRouterDom() {
 }
 var _helpers = require("../../helpers");
 var _Page = require("./Page.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; }
 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; }
@@ -47,20 +49,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-const globalActionCSS = (0, _client().css)`
-  #nb-position-container > & {
-    height: 49px;
-    border-top: 1px solid var(--nb-box-bg);
-    margin-bottom: 0px !important;
-    padding: 0 var(--nb-spacing);
-    align-items: center;
-    overflow-x: auto;
-    background: #ffffff;
-    z-index: 100;
-  }
-`;
 const InternalPage = props => {
   var _fieldSchema$properti, _tabsSchema$propertie;
+  const _useStyles = (0, _style.default)(),
+    styles = _useStyles.styles;
   const Designer = (0, _client().useDesigner)();
   const fieldSchema = (0, _react().useFieldSchema)();
   const _useSearchParams = (0, _reactRouterDom().useSearchParams)(),
@@ -97,7 +89,7 @@ const InternalPage = props => {
         container: (typeof props.active !== 'undefined' ? props.active : true) && onlyInPage ? document.getElementById('nb-position-container') : null,
         forceProps: {
           layout: 'one-column',
-          className: globalActionCSS
+          className: styles.globalActionCSS
         }
       }, props.children));
     }
@@ -105,31 +97,12 @@ const InternalPage = props => {
   }, [hasGlobalActions, onlyInPage]);
   return _react2().default.createElement(_client().SortableItem, {
     eid: "nb-mobile-scroll-wrapper",
-    className: (0, _client().cx)('nb-mobile-page', (0, _client().css)`
-          background: var(--nb-box-bg);
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          height: 100%;
-          overflow-x: hidden;
-          overflow-y: auto;
-          padding-bottom: var(--nb-spacing);
-        `)
+    className: (0, _client().cx)('nb-mobile-page', styles.mobilePage)
   }, _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, _client().cx)('nb-mobile-page-header', (0, _client().css)`
-            & > .ant-tabs > .ant-tabs-nav {
-              .ant-tabs-tab {
-                margin: 0 !important;
-                padding: 0 16px !important;
-              }
-              background: #fff;
-            }
-            display: flex;
-            flex-direction: column;
-          `)
+    className: (0, _client().cx)('nb-mobile-page-header', styles.mobilePageHeader)
   }, _react2().default.createElement(_react().RecursionField, {
     schema: fieldSchema,
     filterProperties: s => {

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

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

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

@@ -0,0 +1,55 @@
+"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 {
+    globalActionCSS: css`
+      #nb-position-container > & {
+        height: ${token.sizeXXL}px;
+        border-top: 1px solid var(--nb-box-bg);
+        margin-bottom: 0px !important;
+        padding: 0 var(--nb-spacing);
+        align-items: center;
+        overflow-x: auto;
+        background: ${token.colorBgContainer};
+        z-index: 100;
+      }
+    `,
+    mobilePage: css`
+      background: var(--nb-box-bg);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding-bottom: var(--nb-spacing);
+    `,
+    mobilePageHeader: css`
+      & > .ant-tabs > .ant-tabs-nav {
+        .ant-tabs-tab {
+          margin: 0 !important;
+          padding: 0 ${token.paddingContentHorizontal}px !important;
+        }
+        background: ${token.colorBgContainer};
+      }
+      display: flex;
+      flex-direction: column;
+    `
+  };
+});
+var _default = useStyles;
+exports.default = _default;

package/lib/client/core/schema/components/tab-bar/TabBar.js

@@ -76,7 +76,11 @@ const InternalTabBar = props => {
       'x-designer': 'MTabBar.Item.Designer',
       properties: {
         [(0, _shared().uid)()]: _common.PageSchema
-      }
+      },
+      'x-server-hooks': [{
+        type: 'onSelfSave',
+        method: 'extractTextToLocale'
+      }]
     });
   }, []);
   return _react2().default.createElement(_client().SortableItem, {
@@ -102,7 +106,7 @@ const InternalTabBar = props => {
     const cp = schema['x-component-props'];
     return _react2().default.createElement(_antdMobile().TabBar.Item, _objectSpread(_objectSpread({}, cp), {}, {
       key: `tab_${schema['x-uid']}`,
-      title: _react2().default.createElement(_react2().default.Fragment, null, compile(cp.title), _react2().default.createElement(_client().SchemaComponent, {
+      title: _react2().default.createElement(_react2().default.Fragment, null, t(compile(cp.title)), _react2().default.createElement(_client().SchemaComponent, {
         schema: schema,
         name: name
       })),

package/lib/client/core/schema/hooks/useSchemaPatch.js

@@ -48,7 +48,11 @@ const useSchemaPatch = () => {
     dn.emit('patch', {
       schema: {
         ['x-uid']: fieldSchema['x-uid'],
-        'x-component-props': fieldSchema['x-component-props']
+        'x-component-props': fieldSchema['x-component-props'],
+        'x-server-hooks': [{
+          type: 'onSelfSave',
+          method: 'extractTextToLocale'
+        }]
       }
     });
     dn.refresh();

package/lib/client/locale/index.js

@@ -21,13 +21,10 @@ function _reactI18next() {
   };
   return data;
 }
-var _enUS = _interopRequireDefault(require("./en-US"));
-var _zhCN = _interopRequireDefault(require("./zh-CN"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const NAMESPACE = 'mobile-client';
+// i18n.addResources('zh-CN', NAMESPACE, zhCN);
+// i18n.addResources('en-US', NAMESPACE, enUS);
 exports.NAMESPACE = NAMESPACE;
-_client().i18n.addResources('zh-CN', NAMESPACE, _zhCN.default);
-_client().i18n.addResources('en-US', NAMESPACE, _enUS.default);
 function lang(key) {
   return _client().i18n.t(key, {
     ns: NAMESPACE

package/lib/client/router/Application.js

@@ -64,11 +64,12 @@ const commonDesignerCSS = (0, _client().css)`
       line-height: 16px;
       pointer-events: all;
       .ant-space-item {
-        background-color: #f18b62;
+        background-color: var(--colorSettings);
         color: #fff;
         line-height: 16px;
         width: 16px;
         padding-left: 1px;
+        align-self: stretch;
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/plugin-mobile-client",
-  "version": "0.11.0-alpha.1",
+  "version": "0.11.1-alpha.2",
   "main": "./lib/server/index.js",
   "files": [
     "lib",
@@ -22,11 +22,11 @@
     "@formily/antd-v5": "^1.1.0-beta.4",
     "@formily/react": "2.2.26",
     "@formily/shared": "2.2.26",
-    "@nocobase/client": "0.11.0-alpha.1",
-    "@nocobase/database": "0.11.0-alpha.1",
-    "@nocobase/server": "0.11.0-alpha.1",
-    "@nocobase/test": "0.11.0-alpha.1",
-    "@nocobase/utils": "0.11.0-alpha.1",
+    "@nocobase/client": "0.11.1-alpha.2",
+    "@nocobase/database": "0.11.1-alpha.2",
+    "@nocobase/server": "0.11.1-alpha.2",
+    "@nocobase/test": "0.11.1-alpha.2",
+    "@nocobase/utils": "0.11.1-alpha.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "antd": "^5.6.4",
@@ -40,5 +40,5 @@
     "antd-mobile": "^5.29.1",
     "classnames": "^2.3.1"
   },
-  "gitHead": "7581b6d3a3a54f09f06a9effb7e3e65328281b2b"
+  "gitHead": "8482aa720ea1c3abbbb9fe1208e73778bd63f1cf"
 }

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

@@ -30,8 +30,8 @@ export const ContainerDesigner = () => {
       title={
         <Button
           style={{
-            borderColor: 'rgb(241, 139, 98)',
-            color: 'rgb(241, 139, 98)',
+            borderColor: 'var(--colorSettings)',
+            color: 'var(--colorSettings)',
             width: '100%',
           }}
           icon={<MenuOutlined />}

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

@@ -1,8 +1,9 @@
 import { useFieldSchema } from '@formily/react';
-import { css, cx, SchemaComponent, SortableItem, useDesigner } from '@nocobase/client';
+import { cx, SchemaComponent, SortableItem, useDesigner, useToken } from '@nocobase/client';
 import React, { useEffect } from 'react';
 import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ContainerDesigner } from './Container.Designer';
+import useStyles from './style';
 
 const findGrid = (schema, uid) => {
   return schema.reduceProperties((final, next) => {
@@ -28,6 +29,8 @@ const TabContentComponent = () => {
 };
 
 const InternalContainer: React.FC = (props) => {
+  const { styles } = useStyles();
+  const { token } = useToken();
   const Designer = useDesigner();
   const fieldSchema = useFieldSchema();
   const navigate = useNavigate();
@@ -47,31 +50,13 @@ const InternalContainer: React.FC = (props) => {
   }, [location.pathname, navigate, params.name, redirectToUid]);
 
   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: var(--nb-box-bg);
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          height: 100%;
-          overflow-y: scroll;
-          position: initial !important;
-        `,
-      )}
-    >
+    <SortableItem eid="nb-mobile-scroll-wrapper" className={cx('nb-mobile-container', styles.mobileContainer)}>
       <Designer></Designer>
       <div
         style={{
-          paddingBottom: redirectToUid ? '50px' : '0px',
+          paddingBottom: redirectToUid ? token.paddingLG * 2 : 0,
         }}
-        className={cx('nb-mobile-container-content')}
+        className="nb-mobile-container-content"
       >
         {redirectToUid ? (
           <TabContentComponent />
@@ -84,22 +69,7 @@ const InternalContainer: React.FC = (props) => {
           />
         )}
       </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;
-          `,
-        )}
-      >
+      <div className={cx('nb-mobile-container-tab-bar', styles.tabBar)}>
         <SchemaComponent
           onlyRenderProperties
           filterProperties={(schema) => {

package/src/client/core/schema/components/container/style.ts

@@ -0,0 +1,35 @@
+import { createStyles } from '@nocobase/client';
+
+const useStyles = 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;
+    `,
+  };
+});
+
+export default useStyles;

package/src/client/core/schema/components/header/Header.tsx

@@ -1,7 +1,7 @@
 import { useField } from '@formily/react';
-import { css, cx, SortableItem, useCompile, useDesigner, useDocumentTitle } from '@nocobase/client';
+import { cx, SortableItem, useCompile, useDesigner, useDocumentTitle, useToken } from '@nocobase/client';
 import { NavBar, NavBarProps } from 'antd-mobile';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { generateNTemplate } from '../../../../locale';
 import { HeaderDesigner } from './Header.Designer';
@@ -18,22 +18,22 @@ const InternalHeader = (props: HeaderProps) => {
   const compiledTitle = compile(title);
   const navigate = useNavigate();
   const { setTitle } = useDocumentTitle();
+  const { token } = useToken();
 
   useEffect(() => {
     // sync title
     setTitle(compiledTitle);
   }, [compiledTitle]);
 
+  const style = useMemo(() => {
+    return {
+      width: '100%',
+      background: token.colorBgContainer,
+    };
+  }, [token.colorBgContainer]);
+
   return (
-    <SortableItem
-      className={cx(
-        'nb-mobile-header',
-        css`
-          width: 100%;
-          background: #fff;
-        `,
-      )}
-    >
+    <SortableItem className={cx('nb-mobile-header')} style={style}>
       <NavBar backArrow={showBack} onBack={() => navigate(-1)}>
         {compiledTitle}
       </NavBar>

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

@@ -1,9 +1,9 @@
-import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
 import { MenuOutlined } from '@ant-design/icons';
+import { useField, useFieldSchema } from '@formily/react';
+import { SchemaSettings, useDesignable } from '@nocobase/client';
+import { Button } from 'antd';
 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();
@@ -20,8 +20,8 @@ export const MenuDesigner: React.FC = (props) => {
       title={
         <Button
           style={{
-            borderColor: 'rgb(241, 139, 98)',
-            color: 'rgb(241, 139, 98)',
+            borderColor: 'var(--colorSettings)',
+            color: 'var(--colorSettings)',
           }}
           icon={<MenuOutlined />}
           type="dashed"

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

@@ -1,11 +1,11 @@
 import { useField, useFieldSchema } from '@formily/react';
 import {
-  css,
-  cx,
   GeneralSchemaDesigner,
   Icon,
   SchemaSettings,
   SortableItem,
+  css,
+  cx,
   useCompile,
   useDesigner,
 } from '@nocobase/client';

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

@@ -1,6 +1,5 @@
 import { useFieldSchema } from '@formily/react';
 import {
-  css,
   cx,
   DndContext,
   SchemaComponent,
@@ -16,8 +15,10 @@ import { PageSchema } from '../../common';
 import { MenuDesigner } from './Menu.Designer';
 import { MenuItem } from './Menu.Item';
 import { menuItemSchema } from './schema';
+import useStyles from './style';
 
 const InternalMenu: React.FC = (props) => {
+  const { styles } = useStyles();
   const Designer = useDesigner();
   const fieldSchema = useFieldSchema();
   const { insertBeforeEnd, designable } = useDesignable();
@@ -40,16 +41,7 @@ const InternalMenu: React.FC = (props) => {
   };
 
   return (
-    <SortableItem
-      className={cx(
-        'nb-mobile-menu',
-        css`
-          background: #ffffff;
-          width: 100%;
-          margin-bottom: var(--nb-spacing);
-        `,
-      )}
-    >
+    <SortableItem className={cx('nb-mobile-menu', styles.mobileMenu)}>
       <List>
         {designable && (
           <List.Item>

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

@@ -0,0 +1,20 @@
+import { createStyles } from '@nocobase/client';
+
+const useStyles = 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);
+    `,
+  };
+});
+
+export default useStyles;

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

@@ -26,8 +26,8 @@ export const PageDesigner = (props) => {
       title={
         <Button
           style={{
-            borderColor: 'rgb(241, 139, 98)',
-            color: 'rgb(241, 139, 98)',
+            borderColor: 'var(--colorSettings)',
+            color: 'var(--colorSettings)',
             width: '100%',
           }}
           icon={<MenuOutlined />}

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

@@ -1,25 +1,14 @@
 import { RecursionField, useFieldSchema } from '@formily/react';
-import { ActionBarProvider, css, cx, SortableItem, TabsContextProvider, useDesigner } from '@nocobase/client';
+import { ActionBarProvider, SortableItem, TabsContextProvider, cx, useDesigner } from '@nocobase/client';
 import { TabsProps } from 'antd';
 import React, { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { countGridCol } from '../../helpers';
 import { PageDesigner } from './Page.Designer';
-
-const globalActionCSS = css`
-  #nb-position-container > & {
-    height: 49px;
-    border-top: 1px solid var(--nb-box-bg);
-    margin-bottom: 0px !important;
-    padding: 0 var(--nb-spacing);
-    align-items: center;
-    overflow-x: auto;
-    background: #ffffff;
-    z-index: 100;
-  }
-`;
+import useStyles from './style';
 
 const InternalPage: React.FC = (props) => {
+  const { styles } = useStyles();
   const Designer = useDesigner();
   const fieldSchema = useFieldSchema();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -64,7 +53,7 @@ const InternalPage: React.FC = (props) => {
               }
               forceProps={{
                 layout: 'one-column',
-                className: globalActionCSS,
+                className: styles.globalActionCSS,
               }}
             >
               {props.children}
@@ -78,41 +67,13 @@ const InternalPage: React.FC = (props) => {
   );
 
   return (
-    <SortableItem
-      eid="nb-mobile-scroll-wrapper"
-      className={cx(
-        'nb-mobile-page',
-        css`
-          background: var(--nb-box-bg);
-          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" className={cx('nb-mobile-page', styles.mobilePage)}>
       <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 {
-              .ant-tabs-tab {
-                margin: 0 !important;
-                padding: 0 16px !important;
-              }
-              background: #fff;
-            }
-            display: flex;
-            flex-direction: column;
-          `,
-        )}
+        className={cx('nb-mobile-page-header', styles.mobilePageHeader)}
       >
         <RecursionField
           schema={fieldSchema}

package/src/client/core/schema/components/page/style.ts

@@ -0,0 +1,43 @@
+import { createStyles } from '@nocobase/client';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    globalActionCSS: css`
+      #nb-position-container > & {
+        height: ${token.sizeXXL}px;
+        border-top: 1px solid var(--nb-box-bg);
+        margin-bottom: 0px !important;
+        padding: 0 var(--nb-spacing);
+        align-items: center;
+        overflow-x: auto;
+        background: ${token.colorBgContainer};
+        z-index: 100;
+      }
+    `,
+
+    mobilePage: css`
+      background: var(--nb-box-bg);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding-bottom: var(--nb-spacing);
+    `,
+
+    mobilePageHeader: css`
+      & > .ant-tabs > .ant-tabs-nav {
+        .ant-tabs-tab {
+          margin: 0 !important;
+          padding: 0 ${token.paddingContentHorizontal}px !important;
+        }
+        background: ${token.colorBgContainer};
+      }
+      display: flex;
+      flex-direction: column;
+    `,
+  };
+});
+
+export default useStyles;

package/src/client/core/schema/components/tab-bar/TabBar.tsx

@@ -37,6 +37,12 @@ export const InternalTabBar: React.FC = (props) => {
       properties: {
         [uid()]: PageSchema,
       },
+      'x-server-hooks': [
+        {
+          type: 'onSelfSave',
+          method: 'extractTextToLocale',
+        },
+      ],
     });
   }, []);
 
@@ -76,7 +82,7 @@ export const InternalTabBar: React.FC = (props) => {
                 key={`tab_${schema['x-uid']}`}
                 title={
                   <>
-                    {compile(cp.title)}
+                    {t(compile(cp.title))}
                     <SchemaComponent schema={schema} name={name} />
                   </>
                 }

package/src/client/core/schema/hooks/useSchemaPatch.ts

@@ -15,6 +15,12 @@ export const useSchemaPatch = () => {
       schema: {
         ['x-uid']: fieldSchema['x-uid'],
         'x-component-props': fieldSchema['x-component-props'],
+        'x-server-hooks': [
+          {
+            type: 'onSelfSave',
+            method: 'extractTextToLocale',
+          },
+        ],
       },
     });
     dn.refresh();

package/src/client/locale/index.ts

@@ -1,12 +1,10 @@
 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);
+// i18n.addResources('zh-CN', NAMESPACE, zhCN);
+// i18n.addResources('en-US', NAMESPACE, enUS);
 
 export function lang(key: string) {
   return i18n.t(key, { ns: NAMESPACE });

package/src/client/router/Application.tsx

@@ -43,11 +43,12 @@ const commonDesignerCSS = css`
       line-height: 16px;
       pointer-events: all;
       .ant-space-item {
-        background-color: #f18b62;
+        background-color: var(--colorSettings);
         color: #fff;
         line-height: 16px;
         width: 16px;
         padding-left: 1px;
+        align-self: stretch;
       }
     }
   }