@nocobase/plugin-mobile-client 0.10.0-alpha.5 → 0.11.0-alpha.1

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.tsx

@@ -1,8 +1,7 @@
-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 { css, cx, SchemaComponent, SortableItem, useDesigner } from '@nocobase/client';
+import React, { useEffect } from 'react';
+import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ContainerDesigner } from './Container.Designer';
 
 const findGrid = (schema, uid) => {
@@ -31,6 +30,7 @@ const TabContentComponent = () => {
 const InternalContainer: React.FC = (props) => {
   const Designer = useDesigner();
   const fieldSchema = useFieldSchema();
+  const navigate = useNavigate();
   const params = useParams<{ name: string }>();
   const location = useLocation();
   const tabBarSchema = fieldSchema?.properties?.['tabBar'];
@@ -39,28 +39,12 @@ 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
@@ -72,7 +56,7 @@ const InternalContainer: React.FC = (props) => {
             right: unset;
             left: 2px;
           }
-          background: #f0f2f5;
+          background: var(--nb-box-bg);
           display: flex;
           flex-direction: column;
           width: 100%;
@@ -85,12 +69,12 @@ const InternalContainer: React.FC = (props) => {
       <Designer></Designer>
       <div
         style={{
-          paddingBottom: tabRoutes.length ? '50px' : '0px',
+          paddingBottom: redirectToUid ? '50px' : '0px',
         }}
         className={cx('nb-mobile-container-content')}
       >
-        {tabRoutes.length ? (
-          <RouteSwitch routes={tabRoutes as any} />
+        {redirectToUid ? (
+          <TabContentComponent />
         ) : (
           <SchemaComponent
             filterProperties={(schema) => {

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,6 +1,5 @@
-import { css, cx } from '@emotion/css';
 import { useField } from '@formily/react';
-import { SortableItem, useCompile, useDesigner, useDocumentTitle } from '@nocobase/client';
+import { css, cx, SortableItem, useCompile, useDesigner, useDocumentTitle } from '@nocobase/client';
 import { NavBar, NavBarProps } from 'antd-mobile';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';

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

@@ -1,6 +1,14 @@
-import { css, cx } from '@emotion/css';
 import { useField, useFieldSchema } from '@formily/react';
-import { GeneralSchemaDesigner, Icon, SchemaSettings, SortableItem, useCompile, useDesigner } from '@nocobase/client';
+import {
+  css,
+  cx,
+  GeneralSchemaDesigner,
+  Icon,
+  SchemaSettings,
+  SortableItem,
+  useCompile,
+  useDesigner,
+} from '@nocobase/client';
 import { List, ListItemProps } from 'antd-mobile';
 import React from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';

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

@@ -1,6 +1,7 @@
-import React from 'react';
-import { MenuItem } from './Menu.Item';
+import { useFieldSchema } from '@formily/react';
 import {
+  css,
+  cx,
   DndContext,
   SchemaComponent,
   SchemaInitializer,
@@ -8,13 +9,13 @@ import {
   useDesignable,
   useDesigner,
 } from '@nocobase/client';
-import { css, cx } from '@emotion/css';
-import { MenuDesigner } from './Menu.Designer';
-import { useFieldSchema } from '@formily/react';
 import { List } from 'antd-mobile';
+import React from 'react';
 import { useTranslation } from '../../../../locale';
-import { menuItemSchema } from './schema';
 import { PageSchema } from '../../common';
+import { MenuDesigner } from './Menu.Designer';
+import { MenuItem } from './Menu.Item';
+import { menuItemSchema } from './schema';
 
 const InternalMenu: React.FC = (props) => {
   const Designer = useDesigner();

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

@@ -1,6 +1,5 @@
-import { css, cx } from '@emotion/css';
 import { RecursionField, useFieldSchema } from '@formily/react';
-import { ActionBarProvider, SortableItem, TabsContextProvider, useDesigner } from '@nocobase/client';
+import { ActionBarProvider, css, cx, SortableItem, TabsContextProvider, useDesigner } from '@nocobase/client';
 import { TabsProps } from 'antd';
 import React, { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -10,7 +9,7 @@ import { PageDesigner } from './Page.Designer';
 const globalActionCSS = css`
   #nb-position-container > & {
     height: 49px;
-    border-top: 1px solid #f0f2f5;
+    border-top: 1px solid var(--nb-box-bg);
     margin-bottom: 0px !important;
     padding: 0 var(--nb-spacing);
     align-items: center;
@@ -84,7 +83,7 @@ const InternalPage: React.FC = (props) => {
       className={cx(
         'nb-mobile-page',
         css`
-          background: #f0f2f5;
+          background: var(--nb-box-bg);
           display: flex;
           flex-direction: column;
           width: 100%;

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

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

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

@@ -1,10 +1,9 @@
-import React, { useEffect, useMemo } from 'react';
-import { TabBar, TabBarItemProps } from 'antd-mobile';
-import { GeneralSchemaDesigner, SchemaSettings, SortableItem, useDesigner } from '@nocobase/client';
+import { useField, useFieldSchema } from '@formily/react';
+import { css, cx, GeneralSchemaDesigner, SchemaSettings, SortableItem, useDesigner } from '@nocobase/client';
+import { TabBarItemProps } from 'antd-mobile';
+import React from 'react';
 import { useTranslation } from '../../../../locale';
-import { Schema, useField, useFieldSchema } from '@formily/react';
 import { useSchemaPatch } from '../../hooks';
-import { css, cx } from '@emotion/css';
 import { tabItemSchema } from './schema';
 
 const InternalItem: React.FC<TabBarItemProps> = () => {

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

@@ -1,8 +1,8 @@
-import { TabBar } from 'antd-mobile';
-import { TabBarItem } from './TabBar.Item';
-import React, { useCallback } from 'react';
 import { useFieldSchema } from '@formily/react';
+import { uid } from '@formily/shared';
 import {
+  css,
+  cx,
   DndContext,
   Icon,
   SchemaComponent,
@@ -11,12 +11,13 @@ import {
   useCompile,
   useDesignable,
 } from '@nocobase/client';
-import { useTranslation } from '../../../../locale';
-import { css, cx } from '@emotion/css';
-import { uid } from '@formily/shared';
+import { TabBar } from 'antd-mobile';
+import React, { useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { tabItemSchema } from './schema';
+import { useTranslation } from '../../../../locale';
 import { PageSchema } from '../../common';
+import { tabItemSchema } from './schema';
+import { TabBarItem } from './TabBar.Item';
 
 export const InternalTabBar: React.FC = (props) => {
   const fieldSchema = useFieldSchema();

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

@@ -1,6 +1,6 @@
 import { useField, useFieldSchema } from '@formily/react';
 import { useDesignable } from '@nocobase/client';
-import _ from 'lodash';
+import { lodash } from '@nocobase/utils/client';
 import { useCallback } from 'react';
 
 export const useSchemaPatch = () => {
@@ -9,7 +9,7 @@ export const useSchemaPatch = () => {
   const field = useField();
 
   const onUpdateComponentProps = useCallback((data) => {
-    _.set(fieldSchema, 'x-component-props', data);
+    lodash.set(fieldSchema, 'x-component-props', data);
     field.componentProps = { ...field.componentProps, ...data };
     dn.emit('patch', {
       schema: {

package/src/client/core/schema/scopes/grid-card.ts

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css } from '@nocobase/client';
 import { useInterfaceContext } from '../../../router/InterfaceProvider';
 import { PaginationProps } from 'antd';
 

package/src/client/devices/iOS6.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css, cx } from '@nocobase/client';
 import React from 'react';
 
 const iOS6: React.FC<{

package/src/client/devices/index.tsx

@@ -1,6 +1,6 @@
+import { css, cx } from '@nocobase/client';
 import React from 'react';
 import Device from './iOS6';
-import { css, cx } from '@emotion/css';
 
 export const MobileDevice: React.FC = (props) => {
   return (

package/src/client/index.tsx

@@ -1,33 +1,48 @@
-import { SettingsCenterProvider } from '@nocobase/client';
+import { createRouterManager, Plugin, RouterManager, RouteSchemaComponent } from '@nocobase/client';
 import React from 'react';
-import { useTranslation } from './locale';
-import { AppConfiguration, InterfaceConfiguration } from './configuration';
-import { RouterSwitchProvider } from './router';
-import { MobileCore } from './core';
+import { Navigate } from 'react-router-dom';
+import { MobileClientProvider } from './MobileClientProvider';
+import MApplication from './router/Application';
 
-export default React.memo((props) => {
-  const { t } = useTranslation();
+export class MobileClientPlugin extends Plugin {
+  public mobileRouter: RouterManager;
+  async load() {
+    this.setMobileRouter();
+    this.addRoutes();
+    this.app.use(MobileClientProvider);
+  }
 
-  return (
-    <SettingsCenterProvider
-      settings={{
-        ['mobile-client']: {
-          title: t('Mobile Client-side'),
-          icon: 'MobileOutlined',
-          tabs: {
-            interface: {
-              title: t('Interface Configuration'),
-              component: InterfaceConfiguration,
-            },
-            app: {
-              title: t('App Configuration'),
-              component: AppConfiguration,
-            },
-          },
-        },
-      }}
-    >
-      <RouterSwitchProvider>{props.children}</RouterSwitchProvider>
-    </SettingsCenterProvider>
-  );
-});
+  setMobileRouter() {
+    const router = createRouterManager({ type: 'hash' });
+    router.add('root', {
+      path: '/',
+      element: <Navigate replace to="/mobile" />,
+    });
+    router.add('mobile', {
+      path: '/mobile',
+      element: <MApplication />,
+    });
+    router.add('mobile.page', {
+      path: '/mobile/:name',
+      element: <RouteSchemaComponent />,
+    });
+    this.mobileRouter = router;
+  }
+
+  getMobileRouterComponent() {
+    return this.mobileRouter.getRouterComponent();
+  }
+
+  addRoutes() {
+    this.app.router.add('mobile', {
+      path: '/mobile',
+      element: <MApplication />,
+    });
+    this.app.router.add('mobile.page', {
+      path: '/mobile/:name',
+      Component: 'RouteSchemaComponent',
+    });
+  }
+}
+
+export default MobileClientPlugin;

package/src/client/router/Application.tsx

@@ -1,7 +1,8 @@
-import { css, cx } from '@emotion/css';
 import {
   ActionContextProvider,
   AdminProvider,
+  css,
+  cx,
   RemoteSchemaComponent,
   useSystemSettings,
   useViewport,
@@ -68,7 +69,7 @@ const modalProps = {
     position: 'absolute',
   },
   wrapClassName: css`
-    position: absolute;
+    position: absolute !important;
   `,
 };
 
@@ -79,7 +80,6 @@ const useMobileSchemaUid = () => {
 
 const MApplication: React.FC = (props) => {
   const mobileSchemaUid = useMobileSchemaUid();
-  console.log('mobileSchemaUid', mobileSchemaUid);
   const params = useParams<{ name: string }>();
   const interfaceContext = useInterfaceContext();
   const Provider = useMemo(() => {

package/src/client/router/InterfaceRouter.tsx

@@ -1,48 +1,16 @@
-import { RouteSwitch, useRoutes } from '@nocobase/client';
-import React, { useMemo } from 'react';
-import { HashRouter, UNSAFE_LocationContext, UNSAFE_RouteContext } from 'react-router-dom';
+import { usePlugin } from '@nocobase/client';
+import React from 'react';
+import { MobileClientPlugin } from '../index';
 import { InterfaceProvider } from './InterfaceProvider';
 
-function RouteCleaner(props) {
-  return (
-    <UNSAFE_RouteContext.Provider
-      value={{
-        outlet: null,
-        matches: [],
-        isDataRoute: false,
-      }}
-    >
-      <UNSAFE_LocationContext.Provider value={null as any}>{props.children}</UNSAFE_LocationContext.Provider>
-    </UNSAFE_RouteContext.Provider>
-  );
-}
+export const InterfaceRouter: React.FC = React.memo(() => {
+  const plugin = usePlugin(MobileClientPlugin);
+  const MobileRouter = plugin.getMobileRouterComponent();
 
-interface InterfaceRouterProps {
-  [key: string]: any;
-}
-export const InterfaceRouter: React.FC<InterfaceRouterProps> = (props) => {
-  const allRoutes = useRoutes();
-  const routes = useMemo(
-    () =>
-      allRoutes.reduce((nextRoutes, item) => {
-        if (item['component'] === 'MApplication') {
-          nextRoutes.push(item, {
-            type: 'redirect',
-            to: '/mobile',
-            from: '/',
-          });
-        }
-        return nextRoutes;
-      }, []),
-    [allRoutes],
-  );
   return (
-    <RouteCleaner>
-      <HashRouter>
-        <InterfaceProvider>
-          <RouteSwitch routes={routes}></RouteSwitch>
-        </InterfaceProvider>
-      </HashRouter>
-    </RouteCleaner>
+    <InterfaceProvider>
+      <MobileRouter />
+    </InterfaceProvider>
   );
-};
+});
+InterfaceRouter.displayName = 'InterfaceRouter';

package/src/client/router/index.ts

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

package/docs/en-US/index.md

@@ -1,7 +0,0 @@
-# Mobile-client overview
-
-Provides a mobile client for the desktop client.
-
-## How to visit mobile client?
-
-When your desktop client is started, you can visit the mobile client in the browser by entering `http://localhost:3000/mobile`. Note that `/mobile` is the route of our mobile client.

package/docs/en-US/installation.md

@@ -1,13 +0,0 @@
-# Mobile-client Installation
-
-## Installation
-
-```bash
-yarn add @nocobase/plugin-mobile-client
-```
-
-## Activate the plugin
-
-```bash
-yarn pm enable mobile-client
-```

package/docs/en-US/tabs.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "Introduction",
-    "path": "index"
-  },
-  {
-    "title": "Installation",
-    "path": "installation"
-  },
-  {
-    "title": "Usage",
-    "path": "usage"
-  }
-]

package/docs/en-US/usage.md

@@ -1 +0,0 @@
-# Mobile-client Usage

package/docs/zh-CN/index.md

@@ -1,7 +0,0 @@
-# 移动端
-
-提供移动端应用，独立于桌面端。
-
-## 如何访问？
-
-当你的桌面端启动后，可以在浏览器中输入 `http://localhost:3000/mobile` 访问移动端。注意，`/mobile` 就是我们移动端的路由。

package/docs/zh-CN/installation.md

@@ -1,13 +0,0 @@
-# 移动端安装方法
-
-## 安装
-
-```bash
-yarn add @nocobase/plugin-mobile-client
-```
-
-## 激活插件
-
-```bash
-yarn pm enable mobile-client
-```

package/docs/zh-CN/tabs.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "介绍",
-    "path": "index"
-  },
-  {
-    "title": "安装",
-    "path": "installation"
-  },
-  {
-    "title": "用法",
-    "path": "usage"
-  }
-]

package/docs/zh-CN/usage.md

@@ -1,2 +0,0 @@
-# 移动端用法
-

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RouterSwitchProvider: (props: any) => React.JSX.Element;

package/lib/client/router/RouteSwitchProvider.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RouterSwitchProvider = 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 _bridge = require("../core/bridge");
-var _Application = _interopRequireDefault(require("./Application"));
-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; }
-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; }
-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 RouterSwitchProvider = props => {
-  const _useRouteSwitchContex = (0, _client().useRouteSwitchContext)(),
-    routes = _useRouteSwitchContex.routes,
-    components = _useRouteSwitchContex.components;
-  // redirect to mobile
-  const location = (0, _reactRouterDom().useLocation)();
-  const navigate = (0, _reactRouterDom().useNavigate)();
-  (0, _react().useEffect)(() => {
-    if ((0, _bridge.isJSBridge)()) {
-      if (location.pathname.includes('/admin')) {
-        navigate('/mobile');
-      }
-    }
-  }, [location.pathname, navigate]);
-  return _react().default.createElement(_client().RouteSwitchProvider, {
-    routes: routes,
-    components: _objectSpread(_objectSpread({}, components), {}, {
-      MApplication: _Application.default
-    })
-  }, props.children);
-};
-exports.RouterSwitchProvider = RouterSwitchProvider;