From ef24f7cfea8176e0a97f2f817384064f17ea2a0d Mon Sep 17 00:00:00 2001 From: chenos Date: Fri, 4 Feb 2022 23:21:36 +0800 Subject: [PATCH] feat: improve the system settings module --- .../src/application/demos/demo2/index.tsx | 2 + .../src/application/demos/demo2/mock.ts | 6 ++ .../route-switch/antd/admin-layout/index.tsx | 21 +++-- .../antd/action/Action.Drawer.tsx | 28 ++++-- .../SystemSettingsProvider.tsx | 24 ++++++ .../SystemSettingsShortcut.tsx | 86 ++++++++++++++++--- packages/client/src/system-settings/index.tsx | 2 + 7 files changed, 144 insertions(+), 25 deletions(-) create mode 100644 packages/client/src/system-settings/SystemSettingsProvider.tsx diff --git a/packages/client/src/application/demos/demo2/index.tsx b/packages/client/src/application/demos/demo2/index.tsx index 21d6d55b98..6f534d0442 100644 --- a/packages/client/src/application/demos/demo2/index.tsx +++ b/packages/client/src/application/demos/demo2/index.tsx @@ -17,6 +17,7 @@ import { RouteSwitch, RouteSwitchProvider, SchemaComponentProvider, + SystemSettingsProvider, SystemSettingsShortcut, useRequest } from '@nocobase/client'; @@ -32,6 +33,7 @@ const providers = [ [APIClientProvider, { apiClient }], [I18nextProvider, { i18n }], [AntdConfigProvider, { remoteLocale: true }], + SystemSettingsProvider, [ PluginManagerProvider, { components: { ACLShortcut, DesignableSwitch, CollectionManagerShortcut, SystemSettingsShortcut } }, diff --git a/packages/client/src/application/demos/demo2/mock.ts b/packages/client/src/application/demos/demo2/mock.ts index eadde72a78..02ed7ba744 100644 --- a/packages/client/src/application/demos/demo2/mock.ts +++ b/packages/client/src/application/demos/demo2/mock.ts @@ -8,6 +8,12 @@ export default (apiClient: APIClient) => { data: { lang: 'en-US' }, }); + mock.onGet('/system_settings:get').reply(200, { + data: { + title: 'NocoBase', + }, + }); + const jsonSchema = { qqzzjakwkwl: { name: 'qqzzjakwkwl', diff --git a/packages/client/src/route-switch/antd/admin-layout/index.tsx b/packages/client/src/route-switch/antd/admin-layout/index.tsx index 2908829baa..fd2aa2eaa6 100644 --- a/packages/client/src/route-switch/antd/admin-layout/index.tsx +++ b/packages/client/src/route-switch/antd/admin-layout/index.tsx @@ -1,8 +1,15 @@ +import { Layout } from 'antd'; import React, { useRef, useState } from 'react'; -import { Button, Layout } from 'antd'; -import { useRoute } from '../../hooks'; 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) { const route = useRoute(); @@ -19,10 +26,12 @@ export function AdminLayout(props: any) { history.push(`/admin/${schema['x-uid']}`); }; const [hidden, setHidden] = useState(false); + const result = useSystemSettings(); return ( - -
+ +
+
{result?.data?.data?.title}
 diff --git a/packages/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/client/src/schema-component/antd/action/Action.Drawer.tsx index 1f2e3b7ef2..254179e8dc 100644 --- a/packages/client/src/schema-component/antd/action/Action.Drawer.tsx +++ b/packages/client/src/schema-component/antd/action/Action.Drawer.tsx @@ -1,3 +1,4 @@ +import { css } from '@emotion/css'; import { observer, RecursionField, useField, useFieldSchema } from '@formily/react'; import { Drawer } from 'antd'; import React, { useContext } from 'react'; @@ -27,14 +28,25 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => { onClose={() => setVisible(false)} footer={ footerSchema && ( - { - return s['x-component'] === 'Action.Drawer.Footer'; - }} - /> +
+ { + return s['x-component'] === 'Action.Drawer.Footer'; + }} + /> +
) } > diff --git a/packages/client/src/system-settings/SystemSettingsProvider.tsx b/packages/client/src/system-settings/SystemSettingsProvider.tsx new file mode 100644 index 0000000000..d14c87283f --- /dev/null +++ b/packages/client/src/system-settings/SystemSettingsProvider.tsx @@ -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>(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 ; + } + return {props.children}; +}; diff --git a/packages/client/src/system-settings/SystemSettingsShortcut.tsx b/packages/client/src/system-settings/SystemSettingsShortcut.tsx index 46b5ce5abc..4f541d57ee 100644 --- a/packages/client/src/system-settings/SystemSettingsShortcut.tsx +++ b/packages/client/src/system-settings/SystemSettingsShortcut.tsx @@ -2,17 +2,37 @@ import { SettingOutlined } from '@ant-design/icons'; import { ISchema, useForm } from '@formily/react'; import { uid } from '@formily/shared'; import React, { useState } from 'react'; -import { PluginManager } from '..'; +import { useSystemSettings } from '.'; +import { PluginManager, useRequest } from '..'; import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component'; const useCloseAction = () => { const { setVisible } = useActionVisible(); - const form = useForm(); + // const form = useForm(); return { async run() { 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', properties: { [uid()]: { + 'x-decorator': 'Form', + 'x-decorator-props': { + useValues: '{{ useSystemSettingsValues }}', + }, 'x-component': 'Action.Drawer', type: 'void', - title: 'Drawer Title', + title: '系统设置', properties: { - hello1: { - 'x-content': 'Hello', - title: 'T1', + title: { + type: 'string', + 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: { 'x-component': 'Action.Drawer.Footer', type: 'void', properties: { - close1: { - title: 'Close', + cancel: { + title: 'Cancel', 'x-component': 'Action', 'x-component-props': { useAction: '{{ useCloseAction }}', }, }, + submit: { + title: 'Submit', + 'x-component': 'Action', + 'x-component-props': { + type: 'primary', + useAction: '{{ useSaveSystemSettingsValues }}', + }, + }, }, }, }, @@ -60,7 +121,10 @@ export const SystemSettingsShortcut = () => { icon={} title={'系统设置'} /> - + ); }; diff --git a/packages/client/src/system-settings/index.tsx b/packages/client/src/system-settings/index.tsx index e1f4f1820d..5cb23c1ff0 100644 --- a/packages/client/src/system-settings/index.tsx +++ b/packages/client/src/system-settings/index.tsx @@ -1 +1,3 @@ +export * from './SystemSettingsProvider'; export * from './SystemSettingsShortcut'; +