feat: improve the system settings module

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 } },

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',

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 (
     <Layout>
-      <Layout.Header style={{ position: 'relative' }}>
-        <div>
+      <Layout.Header style={{ position: 'relative', paddingLeft: 0 }}>
+        <div style={{ display: 'flex' }}>
+          <div style={{ display: 'inline-flex', color: '#fff', padding: '0 24px' }}>{result?.data?.data?.title}</div>
           <RemoteSchemaComponent
             hidden={hidden}
             uid={route.uiSchemaUid}
@@ -55,7 +64,7 @@ export function AdminLayout(props: any) {
               { component: 'SystemSettingsShortcut' },
             ]}
           />
-          <CurrentUser.Dropdown/>
+          <CurrentUser.Dropdown />
         </div>
       </Layout.Header>
       <Layout>

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 && (
-              <RecursionField
-                basePath={field.address}
-                schema={schema}
-                onlyRenderProperties
-                filterProperties={(s) => {
-                  return s['x-component'] === 'Action.Drawer.Footer';
-                }}
-              />
+              <div
+                className={css`
+                  display: flex;
+                  justify-content: flex-end;
+                  width: 100%;
+                  .ant-btn {
+                    margin-right: 8px;
+                  }
+                `}
+              >
+                <RecursionField
+                  basePath={field.address}
+                  schema={schema}
+                  onlyRenderProperties
+                  filterProperties={(s) => {
+                    return s['x-component'] === 'Action.Drawer.Footer';
+                  }}
+                />
+              </div>
             )
           }
         >

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<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>;
+};

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={<SettingOutlined />}
         title={'系统设置'}
       />
-      <SchemaComponent scope={{ useCloseAction }} schema={schema} />
+      <SchemaComponent
+        scope={{ useSaveSystemSettingsValues, useSystemSettingsValues, useCloseAction }}
+        schema={schema}
+      />
     </VisibleContext.Provider>
   );
 };

packages/client/src/system-settings/index.tsx

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