feat: improve the system settings module
This commit is contained in:
parent
7ed5054c41
commit
ef24f7cfea
@ -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 } },
|
||||||
|
@ -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',
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
@ -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>;
|
||||||
|
};
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1 +1,3 @@
|
|||||||
|
export * from './SystemSettingsProvider';
|
||||||
export * from './SystemSettingsShortcut';
|
export * from './SystemSettingsShortcut';
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user