@nocobase/plugin-mobile-client 0.10.0-alpha.2

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

@@ -0,0 +1,35 @@
+import { css } from '@emotion/css';
+import { useInterfaceContext } from '../../../router/InterfaceProvider';
+import { PaginationProps } from 'antd';
+
+const listCss = css`
+  padding: 0 var(--nb-spacing);
+  & > .nb-action-bar {
+    padding: unset !important;
+    background: unset !important;
+  }
+`;
+export const useGridCardBlockItemProps = () => {
+  return {
+    className: listCss,
+  };
+};
+
+const columnCountConfig = {
+  xs: 1,
+  sm: 1,
+  md: 1,
+  lg: 1,
+  xl: 1,
+  xxl: 1,
+};
+
+export const useGridCardBlockProps = () => {
+  const isInterface = useInterfaceContext();
+  return {
+    columnCount: isInterface ? columnCountConfig : null,
+    pagination: {
+      simple: true,
+    } as PaginationProps,
+  };
+};

package/src/client/core/schema/scopes/index.ts

@@ -0,0 +1 @@
+export * from './grid-card';

package/src/client/devices/iOS6.tsx

@@ -0,0 +1,24 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+const iOS6: React.FC<{
+  className: string;
+}> = (props) => {
+  return (
+    <div
+      className={cx(
+        'nb-mobile-device-ios6',
+        css(`
+          display: flex;
+          width: 375px;
+          height: 667px;
+      `),
+        props.className,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default iOS6;

package/src/client/devices/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Device from './iOS6';
+import { css, cx } from '@emotion/css';
+
+export const MobileDevice: React.FC = (props) => {
+  return (
+    <div
+      className={cx(
+        'nb-mobile-device-wrapper',
+        css`
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        `,
+      )}
+    >
+      <Device
+        className={css`
+          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+        `}
+        {...props}
+      ></Device>
+    </div>
+  );
+};

package/src/client/index.tsx

@@ -0,0 +1,33 @@
+import { SettingsCenterProvider } from '@nocobase/client';
+import React from 'react';
+import { useTranslation } from './locale';
+import { AppConfiguration, InterfaceConfiguration } from './configuration';
+import { RouterSwitchProvider } from './router';
+import { MobileCore } from './core';
+
+export default React.memo((props) => {
+  const { t } = useTranslation();
+
+  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>
+  );
+});

package/src/client/locale/en-US.ts

@@ -0,0 +1,5 @@
+const locale = {
+
+}
+
+export default locale;

package/src/client/locale/index.ts

@@ -0,0 +1,23 @@
+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);
+
+export function lang(key: string) {
+  return i18n.t(key, { ns: NAMESPACE });
+}
+
+export function generateNTemplate(key: string) {
+  return `{{t('${key}', { ns: '${NAMESPACE}', nsMode: 'fallback' })}}`;
+}
+
+export function useTranslation() {
+  return useT([NAMESPACE, 'client'], {
+    nsMode: 'fallback',
+  });
+}

package/src/client/locale/zh-CN.ts

@@ -0,0 +1,33 @@
+const locale = {
+  'Mobile Client-side': '移动端',
+  'Interface Configuration': '界面配置',
+  'App Configuration': 'App配置',
+  'Enable TabBar': '启用底部标签栏',
+  Untitled: '未设置标题',
+  'Edit info': '编辑信息',
+  Title: '标题',
+  'Display back button': '展示退后按钮',
+  'Delete menu': '删除菜单',
+  'Edit menu info': '编辑菜单信息',
+  Menu: '菜单',
+  'Menu name': '菜单名',
+  Icon: '图标',
+  'Delete menu item?': '删除菜单项',
+  'Add menu item': '添加菜单项',
+  'Page template': '页面模板',
+  'Template mode': '模板模式',
+  'Enable Header': '启用头部栏',
+  'Enable Tabs': '启用标签栏',
+  'Delete tab item?': '是否删除标签项？',
+  'Add tab': '添加标签页',
+  'App level Configuration': '应用级别配置',
+  'Menu configuration': '菜单配置',
+  'Page configuration': '页面配置',
+  Settings: '设置',
+  'Delete settings block': '删除设置区块',
+  'Delete menu block': '删除菜单区块',
+  'Mobile client access address': '移动端访问地址',
+  'The full address is': '完整的地址是',
+};
+
+export default locale;

package/src/client/router/Application.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
+import { ActionContextProvider, AdminProvider, RemoteSchemaComponent, useRoute, useViewport } from '@nocobase/client';
+import { css, cx } from '@emotion/css';
+import { useInterfaceContext } from './InterfaceProvider';
+import { DrawerProps, ModalProps } from 'antd';
+import { MobileCore } from '../core';
+
+const commonCSSVariables = css`
+  --nb-spacing: 14px;
+`;
+const commonCSSOverride = css``;
+const commonDesignerCSS = css`
+  --nb-designer-top: 2px;
+  --nb-designer-right: 2px;
+  .nb-sortable-designer:hover {
+    position: relative;
+    > .general-schema-designer {
+      display: block;
+    }
+  }
+  .general-schema-designer {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+    border: 0;
+    pointer-events: none;
+    > .general-schema-designer-icons {
+      position: absolute;
+      top: var(--nb-designer-top);
+      right: var(--nb-designer-right);
+      line-height: 16px;
+      pointer-events: all;
+      .ant-space-item {
+        background-color: #f18b62;
+        color: #fff;
+        line-height: 16px;
+        width: 16px;
+        padding-left: 1px;
+      }
+    }
+  }
+`;
+
+const drawerProps: DrawerProps = {
+  getContainer: '.nb-mobile-application',
+  width: '90%',
+  style: {
+    position: 'absolute',
+  },
+};
+const modalProps = {
+  ...drawerProps,
+  style: {
+    maxWidth: 'calc(100% - 16px)',
+  },
+  maskStyle: {
+    position: 'absolute',
+  },
+  wrapClassName: css`
+    position: absolute;
+  `,
+};
+
+const MApplication: React.FC = (props) => {
+  const route = useRoute();
+  const params = useParams<{ name: string }>();
+  const interfaceContext = useInterfaceContext();
+  const Provider = useMemo(() => {
+    return interfaceContext ? React.Fragment : AdminProvider;
+  }, [interfaceContext]);
+
+  useViewport();
+
+  return (
+    <Provider>
+      <MobileCore>
+        <ActionContextProvider modalProps={modalProps as ModalProps} drawerProps={drawerProps}>
+          <div
+            className={cx(
+              'nb-mobile-application',
+              commonDesignerCSS,
+              commonCSSVariables,
+              commonCSSOverride,
+              css`
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+                position: relative;
+                overflow: hidden;
+              `,
+            )}
+          >
+            {params.name && !params.name.startsWith('tab_') ? (
+              <Outlet />
+            ) : (
+              <RemoteSchemaComponent key={route.uiSchemaUid} uid={route.uiSchemaUid}>
+                {props.children}
+              </RemoteSchemaComponent>
+            )}
+            <div id="nb-position-container"></div>
+          </div>
+        </ActionContextProvider>
+      </MobileCore>
+    </Provider>
+  );
+};
+
+export default MApplication;

package/src/client/router/InterfaceProvider.tsx

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+
+export const InterfaceContext = React.createContext(null);
+
+export const InterfaceProvider = (props) => {
+  return <InterfaceContext.Provider value={{ interface: true }}>{props.children}</InterfaceContext.Provider>;
+};
+
+export const useInterfaceContext = () => {
+  return useContext(InterfaceContext);
+};

package/src/client/router/InterfaceRouter.tsx

@@ -0,0 +1,48 @@
+import { RouteSwitch, useRoutes } from '@nocobase/client';
+import React, { useMemo } from 'react';
+import { HashRouter, UNSAFE_LocationContext, UNSAFE_RouteContext } from 'react-router-dom';
+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>
+  );
+}
+
+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>
+  );
+};

package/src/client/router/RouteSwitchProvider.tsx

@@ -0,0 +1,31 @@
+import { RouteSwitchProvider, useRouteSwitchContext } from '@nocobase/client';
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { isJSBridge } from '../core/bridge';
+import MApplication from './Application';
+
+export const RouterSwitchProvider = (props) => {
+  const { routes, components } = useRouteSwitchContext();
+  // redirect to mobile
+  const location = useLocation();
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (isJSBridge) {
+      if (location.pathname.includes('/admin')) {
+        navigate('/mobile');
+      }
+    }
+  }, [location.pathname, navigate]);
+
+  return (
+    <RouteSwitchProvider
+      routes={routes}
+      components={{
+        ...components,
+        MApplication,
+      }}
+    >
+      {props.children}
+    </RouteSwitchProvider>
+  );
+};

package/src/client/router/index.ts

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

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

package/src/server/index.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

package/src/server/plugin.ts

@@ -0,0 +1,25 @@
+import { InstallOptions, Plugin } from '@nocobase/server';
+import { routes } from './routes';
+
+export class MobileClientPlugin extends Plugin {
+  afterAdd() {}
+
+  async load() {}
+
+  async install() {
+    const repository = this.app.db.getRepository('uiRoutes');
+    for (const values of routes) {
+      await repository.create({
+        values,
+      });
+    }
+  }
+
+  async afterEnable() {}
+
+  async afterDisable() {}
+
+  async remove() {}
+}
+
+export default MobileClientPlugin;

package/src/server/routes.ts

@@ -0,0 +1,38 @@
+export const routes = [
+  {
+    type: 'route',
+    path: '/mobile/:name(.+)?',
+    component: 'MApplication',
+    uiSchema: {
+      type: 'void',
+      'x-component': 'MContainer',
+      'x-designer': 'MContainer.Designer',
+      'x-component-props': {},
+      properties: {
+        page: {
+          type: 'void',
+          'x-component': 'MPage',
+          'x-designer': 'MPage.Designer',
+          'x-component-props': {},
+          properties: {
+            grid: {
+              type: 'void',
+              'x-component': 'Grid',
+              'x-initializer': 'MBlockInitializers',
+              'x-component-props': {
+                showDivider: false,
+              },
+            },
+          },
+        },
+      },
+    },
+    routes: [
+      {
+        type: 'route',
+        path: '',
+        component: 'RouteSchemaComponent',
+      },
+    ],
+  },
+];