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

package/lib/client/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MobileClientPlugin = void 0;
 function _client() {
   const data = require("@nocobase/client");
   _client = function _client() {
@@ -18,30 +18,66 @@ function _react() {
   };
   return data;
 }
-var _locale = require("./locale");
-var _configuration = require("./configuration");
-var _router = require("./router");
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+  _reactRouterDom = function _reactRouterDom() {
+    return data;
+  };
+  return data;
+}
+var _MobileClientProvider = require("./MobileClientProvider");
+var _Application = _interopRequireDefault(require("./router/Application"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _react().default.memo(props => {
-  const _useTranslation = (0, _locale.useTranslation)(),
-    t = _useTranslation.t;
-  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
-          }
-        }
-      }
-    }
-  }, _react().default.createElement(_router.RouterSwitchProvider, null, props.children));
-});
+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 MobileClientPlugin extends _client().Plugin {
+  constructor(...args) {
+    super(...args);
+    this.mobileRouter = void 0;
+  }
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.setMobileRouter();
+      _this.addRoutes();
+      _this.app.use(_MobileClientProvider.MobileClientProvider);
+    })();
+  }
+  setMobileRouter() {
+    const router = (0, _client().createRouterManager)({
+      type: 'hash'
+    });
+    router.add('root', {
+      path: '/',
+      element: _react().default.createElement(_reactRouterDom().Navigate, {
+        replace: true,
+        to: "/mobile"
+      })
+    });
+    router.add('mobile', {
+      path: '/mobile',
+      element: _react().default.createElement(_Application.default, null)
+    });
+    router.add('mobile.page', {
+      path: '/mobile/:name',
+      element: _react().default.createElement(_client().RouteSchemaComponent, null)
+    });
+    this.mobileRouter = router;
+  }
+  getMobileRouterComponent() {
+    return this.mobileRouter.getRouterComponent();
+  }
+  addRoutes() {
+    this.app.router.add('mobile', {
+      path: '/mobile',
+      element: _react().default.createElement(_Application.default, null)
+    });
+    this.app.router.add('mobile.page', {
+      path: '/mobile/:name',
+      Component: 'RouteSchemaComponent'
+    });
+  }
+}
+exports.MobileClientPlugin = MobileClientPlugin;
+var _default = MobileClientPlugin;
 exports.default = _default;

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

@@ -4,13 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 function _client() {
   const data = require("@nocobase/client");
   _client = function _client() {
@@ -41,11 +34,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-const commonCSSVariables = (0, _css().css)`
+const commonCSSVariables = (0, _client().css)`
   --nb-spacing: 14px;
 `;
-const commonCSSOverride = (0, _css().css)``;
-const commonDesignerCSS = (0, _css().css)`
+const commonCSSOverride = (0, _client().css)``;
+const commonDesignerCSS = (0, _client().css)`
   --nb-designer-top: 2px;
   --nb-designer-right: 2px;
   .nb-sortable-designer:hover {
@@ -71,11 +64,12 @@ const commonDesignerCSS = (0, _css().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;
       }
     }
   }
@@ -94,8 +88,8 @@ const modalProps = _objectSpread(_objectSpread({}, drawerProps), {}, {
   maskStyle: {
     position: 'absolute'
   },
-  wrapClassName: (0, _css().css)`
-    position: absolute;
+  wrapClassName: (0, _client().css)`
+    position: absolute !important;
   `
 });
 const useMobileSchemaUid = () => {
@@ -105,7 +99,6 @@ const useMobileSchemaUid = () => {
 };
 const MApplication = props => {
   const mobileSchemaUid = useMobileSchemaUid();
-  console.log('mobileSchemaUid', mobileSchemaUid);
   const params = (0, _reactRouterDom().useParams)();
   const interfaceContext = (0, _InterfaceProvider.useInterfaceContext)();
   const Provider = (0, _react().useMemo)(() => {
@@ -116,7 +109,7 @@ const MApplication = props => {
     modalProps: modalProps,
     drawerProps: drawerProps
   }, _react().default.createElement("div", {
-    className: (0, _css().cx)('nb-mobile-application', commonDesignerCSS, commonCSSVariables, commonCSSOverride, (0, _css().css)`
+    className: (0, _client().cx)('nb-mobile-application', commonDesignerCSS, commonCSSVariables, commonCSSOverride, (0, _client().css)`
                 display: flex;
                 flex-direction: column;
                 width: 100%;

package/lib/client/router/InterfaceRouter.d.ts

@@ -1,6 +1,2 @@
 import React from 'react';
-interface InterfaceRouterProps {
-    [key: string]: any;
-}
-export declare const InterfaceRouter: React.FC<InterfaceRouterProps>;
-export {};
+export declare const InterfaceRouter: React.FC;

package/lib/client/router/InterfaceRouter.js

@@ -12,47 +12,19 @@ function _client() {
   return data;
 }
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = _interopRequireDefault(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 _index = require("../index");
 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 RouteCleaner(props) {
-  return _react().default.createElement(_reactRouterDom().UNSAFE_RouteContext.Provider, {
-    value: {
-      outlet: null,
-      matches: [],
-      isDataRoute: false
-    }
-  }, _react().default.createElement(_reactRouterDom().UNSAFE_LocationContext.Provider, {
-    value: null
-  }, props.children));
-}
-const InterfaceRouter = props => {
-  const allRoutes = (0, _client().useRoutes)();
-  const routes = (0, _react().useMemo)(() => allRoutes.reduce((nextRoutes, item) => {
-    if (item['component'] === 'MApplication') {
-      nextRoutes.push(item, {
-        type: 'redirect',
-        to: '/mobile',
-        from: '/'
-      });
-    }
-    return nextRoutes;
-  }, []), [allRoutes]);
-  return _react().default.createElement(RouteCleaner, null, _react().default.createElement(_reactRouterDom().HashRouter, null, _react().default.createElement(_InterfaceProvider.InterfaceProvider, null, _react().default.createElement(_client().RouteSwitch, {
-    routes: routes
-  }))));
-};
-exports.InterfaceRouter = InterfaceRouter;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const InterfaceRouter = _react().default.memo(() => {
+  const plugin = (0, _client().usePlugin)(_index.MobileClientPlugin);
+  const MobileRouter = plugin.getMobileRouterComponent();
+  return _react().default.createElement(_InterfaceProvider.InterfaceProvider, null, _react().default.createElement(MobileRouter, null));
+});
+exports.InterfaceRouter = InterfaceRouter;
+InterfaceRouter.displayName = 'InterfaceRouter';

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

@@ -1,2 +1 @@
 export * from './InterfaceRouter';
-export * from './RouteSwitchProvider';

package/lib/client/router/index.js

@@ -13,15 +13,4 @@ Object.keys(_InterfaceRouter).forEach(function (key) {
       return _InterfaceRouter[key];
     }
   });
-});
-var _RouteSwitchProvider = require("./RouteSwitchProvider");
-Object.keys(_RouteSwitchProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _RouteSwitchProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _RouteSwitchProvider[key];
-    }
-  });
 });

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

@@ -46,7 +46,7 @@ class _default extends _server().Migration {
         _iterator.f();
       }
       instance = yield systemSettings.findOne();
-      if (!((_instance = instance) === null || _instance === void 0 ? void 0 : (_instance$options = _instance.options) === null || _instance$options === void 0 ? void 0 : _instance$options.mobileSchemaUid)) {
+      if (!((_instance = instance) !== null && _instance !== void 0 && (_instance$options = _instance.options) !== null && _instance$options !== void 0 && _instance$options.mobileSchemaUid)) {
         throw new Error('mobileSchemaUid invalid');
       }
       _this.app.log.info('systemSettings.options', instance.toJSON());

package/package.json

@@ -1,28 +1,44 @@
 {
   "name": "@nocobase/plugin-mobile-client",
-  "version": "0.10.1-alpha.1",
-  "main": "lib/server/index.js",
+  "version": "0.11.1-alpha.1",
+  "main": "./lib/server/index.js",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "README.zh-CN.md",
+    "CHANGELOG.md",
+    "server.js",
+    "server.d.ts",
+    "client.js",
+    "client.d.ts"
+  ],
   "displayName": "Mobile-client",
   "displayName.zh-CN": "移动端",
   "description": "Provide mobile client access",
   "description.zh-CN": "提供移动端访问",
   "devDependencies": {
-    "@emotion/css": "^11.7.1",
-    "@formily/antd": "2.2.26",
+    "@ant-design/icons": "^5.1.4",
+    "@formily/antd-v5": "^1.1.0-beta.4",
     "@formily/react": "2.2.26",
     "@formily/shared": "2.2.26",
-    "@nocobase/server": "0.10.1-alpha.1",
-    "@nocobase/test": "0.10.1-alpha.1",
+    "@nocobase/client": "0.11.1-alpha.1",
+    "@nocobase/database": "0.11.1-alpha.1",
+    "@nocobase/server": "0.11.1-alpha.1",
+    "@nocobase/test": "0.11.1-alpha.1",
+    "@nocobase/utils": "0.11.1-alpha.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "antd": "^4.24.8",
-    "classnames": "^2.3.1",
+    "antd": "^5.6.4",
+    "antd-style": "^3.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-i18next": "^11.15.1",
     "react-router-dom": "^6.11.2"
   },
   "dependencies": {
-    "antd-mobile": "^5.29.1"
+    "antd-mobile": "^5.29.1",
+    "classnames": "^2.3.1"
   },
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "gitHead": "9ed1dba520bc5f3a7cb1255ea8d92ccbefc11bc8"
 }

package/server.d.ts

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

package/server.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/server"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/server/index.js');

package/src/client/MobileClientProvider.tsx

@@ -0,0 +1,41 @@
+import { SettingsCenterProvider } from '@nocobase/client';
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { AppConfiguration, InterfaceConfiguration } from './configuration';
+import { isJSBridge } from './core/bridge';
+import { useTranslation } from './locale';
+
+export const MobileClientProvider = React.memo((props) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigation = useNavigate();
+
+  useEffect(() => {
+    if (isJSBridge() && location.pathname === '/admin') {
+      navigation('/mobile', { replace: true });
+    }
+  }, [location.pathname, navigation]);
+
+  return (
+    <SettingsCenterProvider
+      settings={{
+        ['mobile-client']: {
+          title: t('Mobile Client-side'),
+          icon: 'MobileOutlined',
+          tabs: {
+            interface: {
+              title: t('Interface Configuration'),
+              component: InterfaceConfiguration,
+            },
+            app: {
+              title: t('App Configuration'),
+              component: AppConfiguration,
+            },
+          },
+        },
+      }}
+    >
+      {props.children}
+    </SettingsCenterProvider>
+  );
+});

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,9 +1,9 @@
-import { css, cx } from '@emotion/css';
 import { useFieldSchema } from '@formily/react';
-import { RouteSwitch, SchemaComponent, SortableItem, useDesigner } from '@nocobase/client';
-import React, { useMemo } from 'react';
-import { Navigate, RouteProps, useLocation, useParams } from 'react-router-dom';
+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) => {
@@ -29,8 +29,11 @@ const TabContentComponent = () => {
 };
 
 const InternalContainer: React.FC = (props) => {
+  const { styles } = useStyles();
+  const { token } = useToken();
   const Designer = useDesigner();
   const fieldSchema = useFieldSchema();
+  const navigate = useNavigate();
   const params = useParams<{ name: string }>();
   const location = useLocation();
   const tabBarSchema = fieldSchema?.properties?.['tabBar'];
@@ -39,58 +42,24 @@ const InternalContainer: React.FC = (props) => {
   if (tabBarCurrentFirstKey) {
     redirectToUid = tabBarSchema?.properties[tabBarCurrentFirstKey]?.['x-uid'];
   }
-
-  const tabRoutes = useMemo<RouteProps[]>(() => {
-    if (!redirectToUid) {
-      return [];
+  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) as any[];
-  }, [redirectToUid, params.name, location.pathname]);
+  }, [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: #f0f2f5;
-          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: tabRoutes.length ? '50px' : '0px',
+          paddingBottom: redirectToUid ? token.paddingLG * 2 : 0,
         }}
-        className={cx('nb-mobile-container-content')}
+        className="nb-mobile-container-content"
       >
-        {tabRoutes.length ? (
-          <RouteSwitch routes={tabRoutes as any} />
+        {redirectToUid ? (
+          <TabContentComponent />
         ) : (
           <SchemaComponent
             filterProperties={(schema) => {
@@ -100,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.Designer.tsx

@@ -1,7 +1,7 @@
-import { Schema, useField, useFieldSchema } from '@formily/react';
-import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import { Switch } from '@formily/antd-v5';
+import { useField } from '@formily/react';
+import { GeneralSchemaDesigner, SchemaSettings } from '@nocobase/client';
 import React from 'react';
-import { Switch } from '@formily/antd';
 import { useTranslation } from '../../../../locale';
 import { useSchemaPatch } from '../../hooks';
 

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

@@ -1,8 +1,7 @@
-import { css, cx } from '@emotion/css';
 import { useField } from '@formily/react';
-import { 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';
@@ -19,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>