feat: improve the system settings module

This commit is contained in:
chenos 2022-02-04 23:21:36 +08:00
parent 7ed5054c41
commit ef24f7cfea
7 changed files with 144 additions and 25 deletions

View File

@ -17,6 +17,7 @@ import {
RouteSwitch, RouteSwitch,
RouteSwitchProvider, RouteSwitchProvider,
SchemaComponentProvider, SchemaComponentProvider,
SystemSettingsProvider,
SystemSettingsShortcut, SystemSettingsShortcut,
useRequest useRequest
} from '@nocobase/client'; } from '@nocobase/client';
@ -32,6 +33,7 @@ const providers = [
[APIClientProvider, { apiClient }], [APIClientProvider, { apiClient }],
[I18nextProvider, { i18n }], [I18nextProvider, { i18n }],
[AntdConfigProvider, { remoteLocale: true }], [AntdConfigProvider, { remoteLocale: true }],
SystemSettingsProvider,
[ [
PluginManagerProvider, PluginManagerProvider,
{ components: { ACLShortcut, DesignableSwitch, CollectionManagerShortcut, SystemSettingsShortcut } }, { components: { ACLShortcut, DesignableSwitch, CollectionManagerShortcut, SystemSettingsShortcut } },

View File

@ -8,6 +8,12 @@ export default (apiClient: APIClient) => {
data: { lang: 'en-US' }, data: { lang: 'en-US' },
}); });
mock.onGet('/system_settings:get').reply(200, {
data: {
title: 'NocoBase',
},
});
const jsonSchema = { const jsonSchema = {
qqzzjakwkwl: { qqzzjakwkwl: {
name: 'qqzzjakwkwl', name: 'qqzzjakwkwl',

View File

@ -1,8 +1,15 @@
import { Layout } from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { Button, Layout } from 'antd';
import { useRoute } from '../../hooks';
import { useHistory, useRouteMatch } from 'react-router-dom'; import { useHistory, useRouteMatch } from 'react-router-dom';
import { findMenuItem, RemoteSchemaComponent, PluginManager, CurrentUser, useDocumentTitle } from '../../../'; import {
CurrentUser,
findMenuItem,
PluginManager,
RemoteSchemaComponent,
useDocumentTitle,
useSystemSettings
} from '../../../';
import { useRoute } from '../../hooks';
export function AdminLayout(props: any) { export function AdminLayout(props: any) {
const route = useRoute(); const route = useRoute();
@ -19,10 +26,12 @@ export function AdminLayout(props: any) {
history.push(`/admin/${schema['x-uid']}`); history.push(`/admin/${schema['x-uid']}`);
}; };
const [hidden, setHidden] = useState(false); const [hidden, setHidden] = useState(false);
const result = useSystemSettings();
return ( return (
<Layout> <Layout>
<Layout.Header style={{ position: 'relative' }}> <Layout.Header style={{ position: 'relative', paddingLeft: 0 }}>
<div> <div style={{ display: 'flex' }}>
<div style={{ display: 'inline-flex', color: '#fff', padding: '0 24px' }}>{result?.data?.data?.title}</div>
<RemoteSchemaComponent <RemoteSchemaComponent
hidden={hidden} hidden={hidden}
uid={route.uiSchemaUid} uid={route.uiSchemaUid}
@ -55,7 +64,7 @@ export function AdminLayout(props: any) {
{ component: 'SystemSettingsShortcut' }, { component: 'SystemSettingsShortcut' },
]} ]}
/> />
<CurrentUser.Dropdown/> <CurrentUser.Dropdown />
</div> </div>
</Layout.Header> </Layout.Header>
<Layout> <Layout>

View File

@ -1,3 +1,4 @@
import { css } from '@emotion/css';
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react'; import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
import { Drawer } from 'antd'; import { Drawer } from 'antd';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
@ -27,14 +28,25 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
onClose={() => setVisible(false)} onClose={() => setVisible(false)}
footer={ footer={
footerSchema && ( footerSchema && (
<RecursionField <div
basePath={field.address} className={css`
schema={schema} display: flex;
onlyRenderProperties justify-content: flex-end;
filterProperties={(s) => { width: 100%;
return s['x-component'] === 'Action.Drawer.Footer'; .ant-btn {
}} margin-right: 8px;
/> }
`}
>
<RecursionField
basePath={field.address}
schema={schema}
onlyRenderProperties
filterProperties={(s) => {
return s['x-component'] === 'Action.Drawer.Footer';
}}
/>
</div>
) )
} }
> >

View File

@ -0,0 +1,24 @@
import { Result } from 'ahooks/lib/useRequest/src/types';
import { Spin } from 'antd';
import React, { createContext, useContext } from 'react';
import { useRequest } from '..';
export const SystemSettingsContext = createContext<Result<any, any>>(null);
export const useSystemSettings = () => {
return useContext(SystemSettingsContext);
};
export const SystemSettingsProvider: React.FC = (props) => {
const result = useRequest({
resource: 'system_settings',
action: 'get',
params: {
filterByTk: 1,
},
});
if (result.loading) {
return <Spin />;
}
return <SystemSettingsContext.Provider value={result}>{props.children}</SystemSettingsContext.Provider>;
};

View File

@ -2,17 +2,37 @@ import { SettingOutlined } from '@ant-design/icons';
import { ISchema, useForm } from '@formily/react'; import { ISchema, useForm } from '@formily/react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { PluginManager } from '..'; import { useSystemSettings } from '.';
import { PluginManager, useRequest } from '..';
import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component'; import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
const useCloseAction = () => { const useCloseAction = () => {
const { setVisible } = useActionVisible(); const { setVisible } = useActionVisible();
const form = useForm(); // const form = useForm();
return { return {
async run() { async run() {
setVisible(false); setVisible(false);
form.submit((values) => { },
console.log(values); };
};
const useSystemSettingsValues = (props, options) => {
const result = useSystemSettings();
return useRequest(() => Promise.resolve(result.data), {
...options,
});
};
const useSaveSystemSettingsValues = () => {
const { setVisible } = useActionVisible();
const form = useForm();
const { mutate } = useSystemSettings();
return {
async run() {
await form.submit();
setVisible(false);
mutate({
data: form.values,
}); });
}, },
}; };
@ -22,25 +42,66 @@ const schema: ISchema = {
type: 'object', type: 'object',
properties: { properties: {
[uid()]: { [uid()]: {
'x-decorator': 'Form',
'x-decorator-props': {
useValues: '{{ useSystemSettingsValues }}',
},
'x-component': 'Action.Drawer', 'x-component': 'Action.Drawer',
type: 'void', type: 'void',
title: 'Drawer Title', title: '系统设置',
properties: { properties: {
hello1: { title: {
'x-content': 'Hello', type: 'string',
title: 'T1', title: "{{t('System title')}}",
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
},
logo: {
type: 'string',
title: "{{t('Logo')}}",
'x-decorator': 'FormItem',
'x-component': 'Upload.Attachment',
'x-component-props': {
// accept: 'jpg,png'
},
},
appLang: {
type: 'string',
title: '{{t("Language")}}',
'x-component': 'Select',
'x-decorator': 'FormItem',
enum: [
{ label: 'English', value: 'en-US' },
{ label: '简体中文', value: 'zh-CN' },
],
},
allowSignUp: {
type: 'string',
title: '{{t("Allow sign up")}}',
'x-component': 'Checkbox',
'x-decorator': 'FormItem',
default: true,
}, },
footer1: { footer1: {
'x-component': 'Action.Drawer.Footer', 'x-component': 'Action.Drawer.Footer',
type: 'void', type: 'void',
properties: { properties: {
close1: { cancel: {
title: 'Close', title: 'Cancel',
'x-component': 'Action', 'x-component': 'Action',
'x-component-props': { 'x-component-props': {
useAction: '{{ useCloseAction }}', useAction: '{{ useCloseAction }}',
}, },
}, },
submit: {
title: 'Submit',
'x-component': 'Action',
'x-component-props': {
type: 'primary',
useAction: '{{ useSaveSystemSettingsValues }}',
},
},
}, },
}, },
}, },
@ -60,7 +121,10 @@ export const SystemSettingsShortcut = () => {
icon={<SettingOutlined />} icon={<SettingOutlined />}
title={'系统设置'} title={'系统设置'}
/> />
<SchemaComponent scope={{ useCloseAction }} schema={schema} /> <SchemaComponent
scope={{ useSaveSystemSettingsValues, useSystemSettingsValues, useCloseAction }}
schema={schema}
/>
</VisibleContext.Provider> </VisibleContext.Provider>
); );
}; };

View File

@ -1 +1,3 @@
export * from './SystemSettingsProvider';
export * from './SystemSettingsShortcut'; export * from './SystemSettingsShortcut';