fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-01 18:52:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into next

Browse Source
This commit is contained in:
GitHub Actions Bot 2024-09-01 09:55:55 +00:00
commit 23b60561d6
20 changed files with 206 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/client/src/acl/ACLProvider.tsx
View File

@ -204,6 +204,17 @@ export function useACLRoleContext() {
};
}
/**
* Used to get whether the current user has permission to configure UI
* @returns {allowConfigUI: boolean}
*/
export function useUIConfigurationPermissions(): { allowConfigUI: boolean } {
const { allowAll, snippets } = useACLRoleContext();
return {
allowConfigUI: allowAll || snippets.includes('ui.*'),
};
}
export const ACLCollectionProvider = (props) => {
const { allowAll, parseAction } = useACLRoleContext();
const app = useApp();

1
packages/plugins/@nocobase/plugin-collection-tree/src/client/index.tsx
View File

@ -18,7 +18,6 @@ export class PluginCollectionTreeClient extends Plugin {
// You can get and modify the app instance here
async load() {
console.log(this.app);
// this.app.addComponents({})
// this.app.addScopes({})
// this.app.addProvider()

81
packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/redirectInDesktopDevices.test.ts Normal file
View File

@ -0,0 +1,81 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { expect, test } from '@nocobase/test/e2e';
import { uid } from '@nocobase/utils';
test.describe('desktop devices: redirect to other page', () => {
test('redirect to signin page', async ({ page }) => {
const baseURL = process.env.APP_BASE_URL || `http://localhost:${process.env.APP_PORT || 20000}`;
await page.goto('/m/signin');
await page.waitForURL(`${baseURL}/signin`);
expect(page.url()).toBe(`${baseURL}/signin`);
// do not redirect to mobile page
await page.waitForTimeout(5000);
expect(page.url()).toBe(`${baseURL}/signin`);
});
test('redirect to admin page', async ({ page }) => {
const baseURL = process.env.APP_BASE_URL || `http://localhost:${process.env.APP_PORT || 20000}`;
await page.goto('/m/admin/settings/@nocobase/plugin-api-keys');
await page.waitForURL(`${baseURL}/admin/settings/@nocobase/plugin-api-keys`);
expect(page.url()).toBe(`${baseURL}/admin/settings/@nocobase/plugin-api-keys`);
// do not redirect to mobile page
await page.waitForTimeout(5000);
expect(page.url()).toBe(`${baseURL}/admin/settings/@nocobase/plugin-api-keys`);
});
test('different roles', async ({ page }) => {
await page.goto('/m');
// 1. the root role has the permission to configure UI --------------------------
await expect(page.getByTestId('ui-editor-button')).toBeVisible();
const pageTitle = uid();
// should be able to create an empty page successfully
await page.getByTestId('schema-initializer-MobileTabBar').hover();
await page.getByRole('menuitem', { name: 'Page' }).click();
await page.getByLabel('block-item-Input-Title').getByRole('textbox').fill(pageTitle);
await page.getByRole('button', { name: 'Select icon' }).click();
await page.getByRole('tooltip').getByLabel('account-book').locator('svg').click();
await page.getByLabel('action-Action-Submit').click();
// the bottom tab bar should be visible
await expect(page.getByLabel('block-item-MobileTabBar.Page').filter({ hasText: pageTitle })).toBeVisible();
// the "Add blocks" button should be visible
await expect(page.getByLabel('schema-initializer-Grid-')).toBeVisible();
// delete the page
await page.getByLabel('block-item-MobileTabBar.Page').filter({ hasText: pageTitle }).hover();
await page.getByRole('button', { name: 'designer-schema-settings-' }).hover();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'OK', exact: true }).click();
// 2. the member role has no permission to configure UI --------------------------
await page.evaluate(() => {
localStorage.setItem('NOCOBASE_ROLE', 'member');
});
await page.reload();
await expect(page.getByTestId('ui-editor-button')).not.toBeVisible();
// but the "Add blocks" button should not be visible
await expect(page.getByTestId('schema-initializer-MobileTabBar')).not.toBeVisible();
// reset role
await page.evaluate(() => {
localStorage.setItem('NOCOBASE_ROLE', 'root');
});
});
});

2
packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/redirect.test.ts → packages/plugins/@nocobase/plugin-mobile/src/client/__e2e__/redirectInMobileDevices.test.ts
View File

@ -13,7 +13,7 @@ test.use({
...devices['Galaxy S9+'],
});
test.describe('redirect to other page from mobile', () => {
test.describe('mobile devices: redirect to other page', () => {
test('redirect to signin page', async ({ page }) => {
const baseURL = process.env.APP_BASE_URL || `http://localhost:${process.env.APP_PORT || 20000}`;

4
packages/plugins/@nocobase/plugin-mobile/src/client/__tests__/Mobile.test.tsx
View File

@ -7,11 +7,11 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { act, render, screen, userEvent, waitFor, waitForApp } from '@nocobase/test/client';
import React from 'react';
import App from '../demos/Mobile-basic';
describe('Mobile', () => {
describe.skip('Mobile', () => {
test('desktop mode', async () => {
render(<App />);
await waitForApp();

24
packages/plugins/@nocobase/plugin-mobile/src/client/demos/DesktopMode-basic.tsx
View File

@ -1,11 +1,31 @@
import { Plugin } from '@nocobase/client';
import { ACLRolesCheckProvider, APIClientProvider, mockAPIClient, Plugin } from '@nocobase/client';
import { DesktopMode } from '@nocobase/plugin-mobile/client';
import { mockApp } from '@nocobase/client/demo-utils';
import React from 'react';
const { apiClient, mockRequest } = mockAPIClient();
mockRequest.onGet('/roles:check').reply(() => {
return [
200,
{
data: {
role: 'root',
snippets: ['ui.*'],
},
},
];
});
const Demo = () => {
return <DesktopMode>demo content</DesktopMode>;
return (
<APIClientProvider apiClient={apiClient}>
<ACLRolesCheckProvider>
<DesktopMode>demo content</DesktopMode>
</ACLRolesCheckProvider>
</APIClientProvider>
);
};
class DemoPlugin extends Plugin {

2
packages/plugins/@nocobase/plugin-mobile/src/client/demos/Mobile-basic.tsx
View File

@ -1,6 +1,6 @@
import { Plugin } from '@nocobase/client';
import PluginMobileClient, { Mobile } from '@nocobase/plugin-mobile/client';
import { mockApp } from '@nocobase/client/demo-utils';
import PluginMobileClient, { Mobile } from '@nocobase/plugin-mobile/client';
class DemoPlugin extends Plugin {
async beforeLoad(): Promise<void> {

4
packages/plugins/@nocobase/plugin-mobile/src/client/demos/MobileTabBar-basic.tsx
View File

@ -3,8 +3,8 @@
* compact: true
*/
import { Plugin } from '@nocobase/client';
import { MobileProviders, MobileTabBar, mobileTabBarInitializer } from '@nocobase/plugin-mobile/client';
import { mockApp } from '@nocobase/client/demo-utils';
import { MobileProviders, MobileTabBar, mobileTabBarInitializer } from '@nocobase/plugin-mobile/client';
import React from 'react';
class DemoPlugin extends Plugin {
@ -15,7 +15,7 @@ class DemoPlugin extends Plugin {
this.app.router.add('schema.page', {
path: '/page/:pageSchemaUid',
element: (
<MobileProviders skipLogin={true}>
<MobileProviders>
<MobileTabBar />
</MobileProviders>
),

4
packages/plugins/@nocobase/plugin-mobile/src/client/demos/MobileTabBar-false.tsx
View File

@ -3,8 +3,8 @@
* compact: true
*/
import { Plugin } from '@nocobase/client';
import { MobileProviders, MobileTabBar, mobileTabBarInitializer } from '@nocobase/plugin-mobile/client';
import { mockApp } from '@nocobase/client/demo-utils';
import { MobileProviders, MobileTabBar, mobileTabBarInitializer } from '@nocobase/plugin-mobile/client';
import React from 'react';
class DemoPlugin extends Plugin {
@ -15,7 +15,7 @@ class DemoPlugin extends Plugin {
this.app.router.add('schema.page', {
path: '/page/:pageSchemaUid',
element: (
<MobileProviders skipLogin={true}>
<MobileProviders>
<MobileTabBar enableTabBar={false} />
</MobileProviders>
),

4
packages/plugins/@nocobase/plugin-mobile/src/client/demos/MobileTabBar-inner-page.tsx
View File

@ -3,8 +3,8 @@
* compact: true
*/
import { Plugin } from '@nocobase/client';
import { MobileProviders, MobileTabBar, mobileTabBarInitializer } from '@nocobase/plugin-mobile/client';
import { mockApp } from '@nocobase/client/demo-utils';
import { MobileProviders, MobileTabBar, mobileTabBarInitializer } from '@nocobase/plugin-mobile/client';
import React from 'react';
class DemoPlugin extends Plugin {
@ -15,7 +15,7 @@ class DemoPlugin extends Plugin {
this.app.router.add('schema.page', {
path: '/page/:pageSchemaUid',
element: (
<MobileProviders skipLogin={true}>
<MobileProviders>
<MobileTabBar />
</MobileProviders>
),

12
packages/plugins/@nocobase/plugin-mobile/src/client/demos/MobileTabBar.Link-settings.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { Plugin, SchemaComponent } from '@nocobase/client';
import { mockApp } from '@nocobase/client/demo-utils';
import { SchemaComponent, Plugin } from '@nocobase/client';
import {
mobileTabBarLinkSettings,
MobileProviders,
MobileTabBar,
getMobileTabBarItemSchema,
mobileTabBarLinkSettings,
} from '@nocobase/plugin-mobile/client';
import React from 'react';
import { schemaViewer } from './fixtures/schemaViewer';
@ -16,14 +16,14 @@ const schema = getMobileTabBarItemSchema({
title: 'Link',
icon: 'AppstoreOutlined',
options: {
url: 'https://github.com'
}
url: 'https://github.com',
},
});
const Demo = () => {
return (
<div>
<MobileProviders skipLogin={true}>
<MobileProviders>
<SchemaComponent schema={schemaViewer(schema, 'x-component-props')} />
</MobileProviders>
</div>

8
packages/plugins/@nocobase/plugin-mobile/src/client/demos/MobileTabBar.Page-settings.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { Plugin, SchemaComponent } from '@nocobase/client';
import { mockApp } from '@nocobase/client/demo-utils';
import { SchemaComponent, Plugin } from '@nocobase/client';
import {
mobileTabBarPageSettings,
MobileProviders,
MobileTabBar,
getMobileTabBarItemSchema,
mobileTabBarPageSettings,
} from '@nocobase/plugin-mobile/client';
import React from 'react';
import { schemaViewer } from './fixtures/schemaViewer';
@ -21,7 +21,7 @@ const schema = getMobileTabBarItemSchema({
const Demo = () => {
return (
<div>
<MobileProviders skipLogin={true}>
<MobileProviders>
<SchemaComponent schema={schemaViewer(schema, 'x-component-props')} />
</MobileProviders>
</div>

6
packages/plugins/@nocobase/plugin-mobile/src/client/demos/pages-dynamic-page-schema.tsx
View File

@ -1,13 +1,13 @@
import React from 'react';
import { BlockItem, Grid, Plugin, SchemaComponent } from '@nocobase/client';
import { mockApp } from '@nocobase/client/demo-utils';
import { SchemaComponent, Plugin, Grid, BlockItem } from '@nocobase/client';
import PluginMobileClient, { MobileProviders, getMobilePageSchema } from '@nocobase/plugin-mobile/client';
import React from 'react';
import { schemaViewer } from './fixtures/schemaViewer';
const Demo = () => {
return (
<MobileProviders skipLogin={true}>
<MobileProviders>
<SchemaComponent schema={schemaViewer(getMobilePageSchema('page1', 'tab1').schema)} />
</MobileProviders>
);

9
packages/plugins/@nocobase/plugin-mobile/src/client/desktop-mode/Header.tsx
View File

@ -12,7 +12,7 @@ import { Button, Popover, QRCode } from 'antd';
import React, { FC, useState } from 'react';
import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import { css, DesignableSwitch, Icon, useApp } from '@nocobase/client';
import { css, DesignableSwitch, Icon, useApp, useUIConfigurationPermissions } from '@nocobase/client';
import { usePluginTranslation } from '../locale';
import { useSize } from './sizeContext';
@ -61,7 +61,8 @@ export const DesktopModeHeader: FC = () => {
const app = useApp();
const { setSize } = useSize();
const [open, setOpen] = useState(false);
const handleQrcodeOpen = (newOpen: boolean) => {
const { allowConfigUI } = useUIConfigurationPermissions();
const handleQRCodeOpen = (newOpen: boolean) => {
setOpen(newOpen);
};
@ -98,7 +99,7 @@ export const DesktopModeHeader: FC = () => {
{t('Back')}
</Button>
<div style={{ display: 'flex', alignItems: 'center' }}>
<DesignableSwitch />
{allowConfigUI ? <DesignableSwitch /> : null}
<Button
onClick={() => {
setSize({ width: 768, height: 667 });
@ -116,7 +117,7 @@ export const DesktopModeHeader: FC = () => {
<Popover
trigger={'hover'}
open={open}
onOpenChange={handleQrcodeOpen}
onOpenChange={handleQRCodeOpen}
content={open ? <QRCode value={window.location.href} bordered={false} /> : ' '}
>
<Button

7
packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/MobileLayout.tsx
View File

@ -7,13 +7,11 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { usePlugin } from '@nocobase/client';
import React, { FC } from 'react';
import { Outlet } from 'react-router-dom';
import { PluginMobileClient } from '../index';
import { useMobileApp } from '../mobile';
import { MobileProviders } from '../mobile-providers';
import { MobileProviders } from '../mobile-providers/MobileProviders';
import { MobileTabBar } from './mobile-tab-bar';
export interface MobileLayoutProps {
@ -21,10 +19,9 @@ export interface MobileLayoutProps {
}
export const MobileLayout: FC<MobileLayoutProps> = () => {
const mobilePlugin = usePlugin(PluginMobileClient);
const { showTabBar } = useMobileApp();
return (
<MobileProviders skipLogin={mobilePlugin?.options?.config?.skipLogin}>
<MobileProviders>
<Outlet />
<MobileTabBar enableTabBar={showTabBar} />
</MobileProviders>

9
packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/MobileTabBar.tsx
View File

@ -10,12 +10,11 @@
import { SafeArea } from 'antd-mobile';
import 'antd-mobile/es/components/tab-bar/tab-bar.css';
import React, { FC, useCallback } from 'react';
import { Navigate } from 'react-router-dom';
import { useMobileRoutes } from '../../mobile-providers';
import { useStyles } from './styles';
import { css, cx, DndContext, DndContextProps, SchemaComponent, useApp, useDesignable } from '@nocobase/client';
import { css, cx, DndContext, DndContextProps, SchemaComponent, useDesignable } from '@nocobase/client';
import { isInnerLink } from '../../utils';
import { MobileTabBarInitializer } from './initializer';
import { getMobileTabBarItemSchema, MobileTabBarItem } from './MobileTabBar.Item';
@ -33,8 +32,6 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
Page: typeof MobileTabBarPage;
Link: typeof MobileTabBarLink;
} = ({ enableTabBar = true }) => {
const app = useApp();
const hasAuth = app.pluginSettingsManager.hasAuth('mobile');
const { styles } = useStyles();
const { designable } = useDesignable();
const { routeList, activeTabBarItem, resource, refresh } = useMobileRoutes();
@ -56,10 +53,6 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
[resource, refresh],
);
if (!hasAuth) {
return <Navigate to={app.getRouteUrl('/admin')} />;
}
if (!enableTabBar) {
return null;
}

14
packages/plugins/@nocobase/plugin-mobile/src/client/mobile-providers/MobileProviders.tsx
View File

@ -7,29 +7,23 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { AdminProvider } from '@nocobase/client';
import React, { FC, useEffect } from 'react';
import { MobileRoutesProvider, MobileTitleProvider } from './context';
export interface MobileProvidersProps {
children?: React.ReactNode;
skipLogin?: boolean;
}
export const MobileProviders: FC<MobileProvidersProps> = ({ children, skipLogin }) => {
const AdminProviderComponent = skipLogin ? React.Fragment : AdminProvider;
export const MobileProviders: FC<MobileProvidersProps> = ({ children }) => {
useEffect(() => {
document.body.style.setProperty('--nb-mobile-page-tabs-content-padding', '12px');
document.body.style.setProperty('--nb-mobile-page-header-height', '50px');
}, []);
return (
<AdminProviderComponent>
<MobileTitleProvider>
<MobileRoutesProvider>{children}</MobileRoutesProvider>
</MobileTitleProvider>
</AdminProviderComponent>
<MobileTitleProvider>
<MobileRoutesProvider>{children}</MobileRoutesProvider>
</MobileTitleProvider>
);
};

14
packages/plugins/@nocobase/plugin-mobile/src/client/mobile-providers/context/MobileRoutes.tsx
View File

@ -104,6 +104,11 @@ export const MobileRoutesProvider = ({ children }) => {
useTitle(activeTabBarItem);
const value = useMemo(
() => ({ api, activeTabBarItem, activeTabItem, routeList, refresh, resource, schemaResource }),
[activeTabBarItem, activeTabItem, api, refresh, resource, routeList, schemaResource],
);
if (loading) {
return (
<div data-testid="mobile-loading" style={{ textAlign: 'center', margin: '20px 0' }}>
@ -111,11 +116,6 @@ export const MobileRoutesProvider = ({ children }) => {
</div>
);
}
return (
<MobileRoutesContext.Provider
value={{ api, activeTabBarItem, activeTabItem, routeList, refresh, resource, schemaResource }}
>
{children}
</MobileRoutesContext.Provider>
);
return <MobileRoutesContext.Provider value={value}>{children}</MobileRoutesContext.Provider>;
};

78
packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx
View File

@ -9,6 +9,7 @@
import {
Action,
AdminProvider,
AntdAppProvider,
AssociationFieldModeProvider,
BlockTemplateProvider,
@ -39,6 +40,7 @@ export const Mobile = () => {
const { styles } = useStyles();
const mobilePlugin = usePlugin(PluginMobileClient);
const MobileRouter = mobilePlugin.getRouterComponent();
const AdminProviderComponent = mobilePlugin?.options?.config?.skipLogin ? React.Fragment : AdminProvider;
// 设置的移动端 meta
React.useEffect(() => {
if (!isDesktop) {
@ -70,42 +72,44 @@ export const Mobile = () => {
}, []);
return (
<DesktopComponent>
{/* 目前移动端由于和客户端的主题对不上，所以先使用 `GlobalThemeProvider` 和 `AntdAppProvider` 进行重置为默认主题 */}
<GlobalThemeProvider
theme={{
token: {
marginBlock: 18,
borderRadiusBlock: 0,
boxShadowTertiary: 'none',
},
}}
>
<AntdAppProvider className={`mobile-container ${styles.nbMobile}`}>
<OpenModeProvider
defaultOpenMode="page"
hideOpenMode
openModeToComponent={{
page: MobileActionPage,
drawer: ActionDrawerUsedInMobile,
modal: Action.Modal,
}}
>
<BlockTemplateProvider componentNamePrefix="mobile-">
<MobileAppProvider>
<ResetSchemaOptionsProvider>
<AssociationFieldModeProvider modeToComponent={modeToComponent}>
{/* the z-index of all popups and subpages will be based on this value */}
<BasicZIndexProvider basicZIndex={1000}>
<MobileRouter />
</BasicZIndexProvider>
</AssociationFieldModeProvider>
</ResetSchemaOptionsProvider>
</MobileAppProvider>
</BlockTemplateProvider>
</OpenModeProvider>
</AntdAppProvider>
</GlobalThemeProvider>
</DesktopComponent>
<AdminProviderComponent>
<DesktopComponent>
{/* 目前移动端由于和客户端的主题对不上，所以先使用 `GlobalThemeProvider` 和 `AntdAppProvider` 进行重置为默认主题 */}
<GlobalThemeProvider
theme={{
token: {
marginBlock: 18,
borderRadiusBlock: 0,
boxShadowTertiary: 'none',
},
}}
>
<AntdAppProvider className={`mobile-container ${styles.nbMobile}`}>
<OpenModeProvider
defaultOpenMode="page"
hideOpenMode
openModeToComponent={{
page: MobileActionPage,
drawer: ActionDrawerUsedInMobile,
modal: Action.Modal,
}}
>
<BlockTemplateProvider componentNamePrefix="mobile-">
<MobileAppProvider>
<ResetSchemaOptionsProvider>
<AssociationFieldModeProvider modeToComponent={modeToComponent}>
{/* the z-index of all popups and subpages will be based on this value */}
<BasicZIndexProvider basicZIndex={1000}>
<MobileRouter />
</BasicZIndexProvider>
</AssociationFieldModeProvider>
</ResetSchemaOptionsProvider>
</MobileAppProvider>
</BlockTemplateProvider>
</OpenModeProvider>
</AntdAppProvider>
</GlobalThemeProvider>
</DesktopComponent>
</AdminProviderComponent>
);
};

11
packages/plugins/@nocobase/plugin-mobile/src/server/plugin.ts
View File

@ -12,9 +12,16 @@ import { Plugin } from '@nocobase/server';
export class PluginMobileServer extends Plugin {
async load() {
this.app.acl.registerSnippet({
name: `pm.${this.name}`,
actions: ['mobileRoutes:*'],
name: `ui.${this.name}`,
actions: ['mobileRoutes:create', 'mobileRoutes:update', 'mobileRoutes:destroy'],
});
this.app.acl.registerSnippet({
name: `pm.${this.name}`,
actions: ['mobileRoutes:list'],
});
this.app.acl.allow('mobileRoutes', 'list', 'loggedIn');
}
}