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

package/src/client/core/bridge/native-call.ts

@@ -0,0 +1,23 @@
+import { invoke } from './injects';
+
+/**
+ * App 右滑返回
+ * @param cb 回调函数，返回 true 表示 web 自己消费，false表示 app 消费
+ */
+
+const JSBridgeFunction = {
+  /**
+   * @description JSBridge injects
+   */
+  onBackPressed: () => {
+    if (history.length === 1) {
+      invoke({ action: 'moveTaskToBack' });
+    } else {
+      history.back();
+    }
+  },
+};
+
+Object.keys(JSBridgeFunction).forEach((key) => {
+  window[key] = JSBridgeFunction[key];
+});

package/src/client/core/index.tsx

@@ -0,0 +1,45 @@
+import { SchemaComponentOptions, SchemaInitializerProvider } from '@nocobase/client';
+import React from 'react';
+import {
+  MBlockInitializers,
+  MMenuBlockInitializer,
+  MMenu,
+  MContainer,
+  MTabBar,
+  MPage,
+  MHeader,
+  MSettingsBlockInitializer,
+  MSettings,
+  useGridCardBlockItemProps,
+  useGridCardBlockProps,
+} from './schema';
+import './bridge';
+
+export const MobileCore: React.FC = (props) => {
+  return (
+    <SchemaInitializerProvider
+      initializers={{
+        MBlockInitializers,
+      }}
+    >
+      <SchemaComponentOptions
+        components={{
+          MMenuBlockInitializer,
+          MSettingsBlockInitializer,
+          MContainer,
+          MMenu,
+          MTabBar,
+          MPage,
+          MHeader,
+          MSettings,
+        }}
+        scope={{
+          useGridCardBlockItemProps,
+          useGridCardBlockProps,
+        }}
+      >
+        {props.children}
+      </SchemaComponentOptions>
+    </SchemaInitializerProvider>
+  );
+};

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

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

package/src/client/core/schema/common/page.ts

@@ -0,0 +1,16 @@
+export const PageSchema = {
+  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,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,88 @@
+import { SchemaSettings, useDesignable } from '@nocobase/client';
+import React from 'react';
+import { generateNTemplate, useTranslation } from '../../../../locale';
+import { Schema, useField, useFieldSchema } from '@formily/react';
+import { uid } from '@formily/shared';
+import { useNavigate } from 'react-router-dom';
+import { findSchema } from '../../helpers';
+import { Button } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+import { PageSchema } from '../../common';
+
+export const ContainerDesigner = () => {
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const tabBarSchema = fieldSchema.reduceProperties(
+    (schema, next) => schema || (next['x-component'] === 'MTabBar' && next),
+  ) as Schema;
+
+  const navigate = useNavigate();
+
+  const field = useField();
+  const schemaSettingsProps = {
+    dn,
+    field,
+    fieldSchema,
+  };
+  return (
+    <SchemaSettings
+      title={
+        <Button
+          style={{
+            borderColor: 'rgb(241, 139, 98)',
+            color: 'rgb(241, 139, 98)',
+          }}
+          icon={<MenuOutlined />}
+          type="dashed"
+        >
+          {t('App level Configuration')}
+        </Button>
+      }
+      {...schemaSettingsProps}
+    >
+      <SchemaSettings.SwitchItem
+        checked={!!tabBarSchema}
+        title={t('Enable TabBar')}
+        onChange={async (v) => {
+          if (v) {
+            const pageSchema = findSchema(fieldSchema, 'MPage');
+            if (!pageSchema) return;
+            await dn.remove(pageSchema);
+            await dn.insertBeforeEnd({
+              type: 'void',
+              'x-component': 'MTabBar',
+              'x-component-props': {},
+              name: 'tabBar',
+              properties: {
+                [uid()]: {
+                  type: 'void',
+                  'x-component': 'MTabBar.Item',
+                  'x-designer': 'MTabBar.Item.Designer',
+                  'x-component-props': {
+                    icon: 'HomeOutlined',
+                    title: generateNTemplate('Untitled'),
+                  },
+                  properties: {
+                    page: pageSchema.toJSON(),
+                  },
+                },
+              },
+            });
+          } else {
+            const tabBarSchemaFirstKey = Object.keys(tabBarSchema.properties || {})?.[0];
+            const pageSchema = tabBarSchemaFirstKey
+              ? findSchema(tabBarSchema.properties[tabBarSchemaFirstKey], 'MPage')
+              : null;
+            await dn.remove(tabBarSchema);
+            await dn.insertBeforeEnd(pageSchema || PageSchema, {
+              onSuccess() {
+                navigate('../');
+              },
+            });
+          }
+        }}
+      />
+    </SchemaSettings>
+  );
+};

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

@@ -0,0 +1,135 @@
+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 { ContainerDesigner } from './Container.Designer';
+
+const findGrid = (schema, uid) => {
+  return schema.reduceProperties((final, next) => {
+    if (final) return final;
+    if (next['x-component'] === 'MTabBar') {
+      return findGrid(next, uid);
+    }
+    if (next['x-component'] === 'MTabBar.Item' && uid === next['x-uid']) {
+      return next;
+    }
+  });
+};
+
+const TabContentComponent = () => {
+  const { name } = useParams<{ name: string }>();
+  const fieldSchema = useFieldSchema();
+  if (!name) return <></>;
+  const gridSchema = findGrid(fieldSchema.properties['tabBar'], name.replace('tab_', ''));
+  if (!gridSchema) {
+    return <Navigate replace to="../" />;
+  }
+  return <SchemaComponent schema={gridSchema} />;
+};
+
+const InternalContainer: React.FC = (props) => {
+  const Designer = useDesigner();
+  const fieldSchema = useFieldSchema();
+  const params = useParams<{ name: string }>();
+  const location = useLocation();
+  const tabBarSchema = fieldSchema?.properties?.['tabBar'];
+  const tabBarCurrentFirstKey = tabBarSchema?.properties ? Object.keys(tabBarSchema.properties)[0] : null;
+  let redirectToUid = null;
+  if (tabBarCurrentFirstKey) {
+    redirectToUid = tabBarSchema?.properties[tabBarCurrentFirstKey]?.['x-uid'];
+  }
+
+  const tabRoutes = useMemo<RouteProps[]>(() => {
+    if (!redirectToUid) {
+      return [];
+    }
+    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]);
+
+  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;
+        `,
+      )}
+    >
+      <Designer></Designer>
+      <div
+        style={{
+          paddingBottom: tabRoutes.length ? '50px' : '0px',
+        }}
+        className={cx('nb-mobile-container-content')}
+      >
+        {tabRoutes.length ? (
+          <RouteSwitch routes={tabRoutes as any} />
+        ) : (
+          <SchemaComponent
+            filterProperties={(schema) => {
+              return schema['x-component'] !== 'MTabBar';
+            }}
+            schema={fieldSchema}
+          />
+        )}
+      </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;
+          `,
+        )}
+      >
+        <SchemaComponent
+          onlyRenderProperties
+          filterProperties={(schema) => {
+            return schema['x-component'] === 'MTabBar';
+          }}
+          schema={fieldSchema}
+        ></SchemaComponent>
+      </div>
+    </SortableItem>
+  );
+};
+
+export const MContainer = InternalContainer as unknown as typeof InternalContainer & {
+  Designer: typeof ContainerDesigner;
+};
+MContainer.Designer = ContainerDesigner;
+MContainer.displayName = 'MContainer';

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

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

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

@@ -0,0 +1,39 @@
+import { Schema, useField, useFieldSchema } from '@formily/react';
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import React from 'react';
+import { Switch } from '@formily/antd';
+import { useTranslation } from '../../../../locale';
+import { useSchemaPatch } from '../../hooks';
+
+export const HeaderDesigner = () => {
+  const field = useField();
+  const { onUpdateComponentProps } = useSchemaPatch();
+  const { t } = useTranslation();
+  return (
+    <GeneralSchemaDesigner draggable={false}>
+      <SchemaSettings.ModalItem
+        title={t('Edit info')}
+        components={{ Switch }}
+        initialValues={field.componentProps}
+        schema={{
+          properties: {
+            title: {
+              type: 'string',
+              title: t('Title'),
+              required: true,
+              'x-component': 'Input',
+              'x-decorator': 'FormItem',
+            },
+            showBack: {
+              type: 'boolean',
+              title: t('Display back button'),
+              'x-component': 'Switch',
+              'x-decorator': 'FormItem',
+            },
+          },
+        }}
+        onSubmit={onUpdateComponentProps}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

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

@@ -0,0 +1,49 @@
+import { css, cx } from '@emotion/css';
+import { SortableItem, useCompile, useDesigner } from '@nocobase/client';
+import { NavBar, NavBarProps } from 'antd-mobile';
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HeaderDesigner } from './Header.Designer';
+import { useField } from '@formily/react';
+import { generateNTemplate } from '../../../../locale';
+
+export interface HeaderProps extends NavBarProps {
+  title?: string;
+  showBack?: boolean;
+}
+const InternalHeader = (props: HeaderProps) => {
+  const field = useField();
+  const { title = generateNTemplate('Untitled'), showBack = false } = { ...props, ...field?.componentProps };
+  const Designer = useDesigner();
+  const compile = useCompile();
+  const compiledTitle = compile(title);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // sync title
+    document.title = `${compiledTitle} - NocoBase`;
+  }, [compiledTitle]);
+
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-header',
+        css`
+          width: 100%;
+          background: #fff;
+        `,
+      )}
+    >
+      <NavBar backArrow={showBack} onBack={() => navigate(-1)}>
+        {compiledTitle}
+      </NavBar>
+      <Designer />
+    </SortableItem>
+  );
+};
+
+export const MHeader = InternalHeader as unknown as typeof InternalHeader & {
+  Designer: typeof HeaderDesigner;
+};
+
+MHeader.Designer = HeaderDesigner;

package/src/client/core/schema/components/header/index.ts

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

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

@@ -0,0 +1,6 @@
+export * from './menu';
+export * from './container';
+export * from './tab-bar';
+export * from './page';
+export * from './header';
+export * from './settings';

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

@@ -0,0 +1,46 @@
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import { MenuOutlined } from '@ant-design/icons';
+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();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const field = useField();
+  const schemaSettingsProps = {
+    dn,
+    field,
+    fieldSchema,
+  };
+  return (
+    <SchemaSettings
+      title={
+        <Button
+          style={{
+            borderColor: 'rgb(241, 139, 98)',
+            color: 'rgb(241, 139, 98)',
+          }}
+          icon={<MenuOutlined />}
+          type="dashed"
+        >
+          {t('Menu configuration')}
+        </Button>
+      }
+      {...schemaSettingsProps}
+    >
+      <SchemaSettings.Remove
+        key="remove"
+        removeParentsIfNoChildren
+        confirm={{
+          title: t('Delete menu block'),
+        }}
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </SchemaSettings>
+  );
+};

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

@@ -0,0 +1,97 @@
+import { css, cx } from '@emotion/css';
+import { useField, useFieldSchema } from '@formily/react';
+import { 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';
+import { useTranslation } from '../../../../locale';
+import { useSchemaPatch } from '../../hooks';
+
+interface MMenuItemProps extends ListItemProps {
+  name: string;
+  icon: string;
+}
+
+const InternalMenuItem: React.FC<MMenuItemProps> = (props) => {
+  const { icon, name } = props;
+  const Designer = useDesigner();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const fieldSchema = useFieldSchema();
+  const compile = useCompile();
+  const params = useParams<{ name: string }>();
+
+  const onToPage = () => {
+    const locationPath = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
+    navigate(params.name ? `/mobile/${fieldSchema['x-uid']}` : `${locationPath}/${fieldSchema['x-uid']}`);
+  };
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-menu-item',
+        css`
+          width: 100%;
+          background: var(--adm-color-background);
+          > .adm-list-item {
+            background: inherit;
+          }
+        `,
+      )}
+    >
+      <List.Item arrow clickable {...props} prefix={<Icon type={icon} />} onClick={onToPage}>
+        {compile(name)}
+      </List.Item>
+      <Designer></Designer>
+    </SortableItem>
+  );
+};
+
+const MenuItemDesigner: React.FC = () => {
+  const { t } = useTranslation();
+  const { onUpdateComponentProps } = useSchemaPatch();
+  const field = useField();
+
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.ModalItem
+        title={t('Edit menu info')}
+        initialValues={field.componentProps}
+        schema={{
+          properties: {
+            name: {
+              type: 'string',
+              title: t('Menu name'),
+              required: true,
+              'x-component': 'Input',
+              'x-decorator': 'FormItem',
+            },
+            icon: {
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-component': 'IconPicker',
+              title: t('Icon'),
+              'x-component-props': {},
+            },
+          },
+        }}
+        onSubmit={onUpdateComponentProps}
+      />
+      <SchemaSettings.Remove
+        key="remove"
+        removeParentsIfNoChildren
+        confirm={{
+          title: t('Delete menu item?'),
+        }}
+        breakRemoveOn={{
+          'x-component': 'MMenu',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
+
+export const MenuItem = InternalMenuItem as typeof InternalMenuItem as unknown as {
+  Designer: typeof MenuItemDesigner;
+};
+
+MenuItem.Designer = MenuItemDesigner;

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { MenuItem } from './Menu.Item';
+import {
+  DndContext,
+  SchemaComponent,
+  SchemaInitializer,
+  SortableItem,
+  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 { useTranslation } from '../../../../locale';
+import { menuItemSchema } from './schema';
+import { PageSchema } from '../../common';
+
+const InternalMenu: React.FC = (props) => {
+  const Designer = useDesigner();
+  const fieldSchema = useFieldSchema();
+  const { insertBeforeEnd, designable } = useDesignable();
+
+  const { t } = useTranslation();
+
+  const onAddMenuItem = (values: any) => {
+    const properties = {
+      page: PageSchema,
+    };
+
+    return insertBeforeEnd({
+      type: 'void',
+      title: values.name,
+      'x-component': 'MMenu.Item',
+      'x-component-props': values,
+      'x-designer': 'MMenu.Item.Designer',
+      properties,
+    });
+  };
+
+  return (
+    <SortableItem
+      className={cx(
+        'nb-mobile-menu',
+        css`
+          background: #ffffff;
+          width: 100%;
+          margin-bottom: var(--nb-spacing);
+        `,
+      )}
+    >
+      <List>
+        {designable && (
+          <List.Item>
+            <Designer />
+          </List.Item>
+        )}
+        <DndContext>
+          <SchemaComponent onlyRenderProperties schema={fieldSchema}></SchemaComponent>
+        </DndContext>
+        {designable ? (
+          <List.Item>
+            <SchemaInitializer.ActionModal
+              buttonText={t('Add menu item')}
+              title={t('Add menu item')}
+              schema={menuItemSchema}
+              onSubmit={onAddMenuItem}
+            />
+          </List.Item>
+        ) : null}
+      </List>
+    </SortableItem>
+  );
+};
+
+export const MMenu = InternalMenu as unknown as typeof InternalMenu & {
+  Item: typeof MenuItem;
+  Designer: typeof MenuDesigner;
+};
+
+MMenu.Item = MenuItem;
+MMenu.Designer = MenuDesigner;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MenuOutlined } from '@ant-design/icons';
+import { SchemaInitializer } from '@nocobase/client';
+
+export const MMenuBlockInitializer = (props) => {
+  const { insert } = props;
+  return (
+    <SchemaInitializer.Item
+      icon={<MenuOutlined />}
+      onClick={async () => {
+        insert({
+          type: 'void',
+          'x-component': 'MMenu',
+          'x-designer': 'MMenu.Designer',
+          'x-component-props': {},
+        });
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './MenuBlockInitializer';
+export * from './Menu';

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

@@ -0,0 +1,17 @@
+export const menuItemSchema = {
+  properties: {
+    name: {
+      type: 'string',
+      title: `{{t('Menu name')}}`,
+      required: true,
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+    },
+    icon: {
+      'x-decorator': 'FormItem',
+      'x-component': 'IconPicker',
+      title: `{{t('Icon')}}`,
+      'x-component-props': {},
+    },
+  },
+};