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

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,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 {
+  GeneralSchemaDesigner,
+  Icon,
+  SchemaSettings,
+  SortableItem,
+  css,
+  cx,
+  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,6 @@
-import React from 'react';
-import { MenuItem } from './Menu.Item';
+import { useFieldSchema } from '@formily/react';
 import {
+  cx,
   DndContext,
   SchemaComponent,
   SchemaInitializer,
@@ -8,15 +8,17 @@ 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';
+import useStyles from './style';
 
 const InternalMenu: React.FC = (props) => {
+  const { styles } = useStyles();
   const Designer = useDesigner();
   const fieldSchema = useFieldSchema();
   const { insertBeforeEnd, designable } = useDesignable();
@@ -39,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,26 +1,14 @@
-import { css, cx } from '@emotion/css';
 import { RecursionField, useFieldSchema } from '@formily/react';
-import { ActionBarProvider, 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 #f0f2f5;
-    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();
@@ -65,7 +53,7 @@ const InternalPage: React.FC = (props) => {
               }
               forceProps={{
                 layout: 'one-column',
-                className: globalActionCSS,
+                className: styles.globalActionCSS,
               }}
             >
               {props.children}
@@ -79,41 +67,13 @@ const InternalPage: React.FC = (props) => {
   );
 
   return (
-    <SortableItem
-      eid="nb-mobile-scroll-wrapper"
-      className={cx(
-        'nb-mobile-page',
-        css`
-          background: #f0f2f5;
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          height: 100%;
-          overflow-x: hidden;
-          overflow-y: auto;
-          padding-bottom: var(--nb-spacing);
-        `,
-      )}
-    >
+    <SortableItem eid="nb-mobile-scroll-wrapper" 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/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();
@@ -36,6 +37,12 @@ export const InternalTabBar: React.FC = (props) => {
       properties: {
         [uid()]: PageSchema,
       },
+      'x-server-hooks': [
+        {
+          type: 'onSelfSave',
+          method: 'extractTextToLocale',
+        },
+      ],
     });
   }, []);
 
@@ -75,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

@@ -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,12 +9,18 @@ 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: {
         ['x-uid']: fieldSchema['x-uid'],
         'x-component-props': fieldSchema['x-component-props'],
+        'x-server-hooks': [
+          {
+            type: 'onSelfSave',
+            method: 'extractTextToLocale',
+          },
+        ],
       },
     });
     dn.refresh();

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/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

@@ -1,7 +1,8 @@
-import { css, cx } from '@emotion/css';
 import {
   ActionContextProvider,
   AdminProvider,
+  css,
+  cx,
   RemoteSchemaComponent,
   useSystemSettings,
   useViewport,
@@ -42,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;
       }
     }
   }
@@ -68,7 +70,7 @@ const modalProps = {
     position: 'absolute',
   },
   wrapClassName: css`
-    position: absolute;
+    position: absolute !important;
   `,
 };
 
@@ -79,7 +81,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;