feat(client): improve code

packages/client/src/application/demos/demo2/index.tsx

@@ -3,6 +3,7 @@ import {
   Action,
   AdminLayout,
   AntdConfigProvider,
+  AntdSchemaComponentProvider,
   APIClientProvider,
   AuthLayout,
   CollectionManagerShortcut,
@@ -36,6 +37,7 @@ const providers = [
     { components: { ACLShortcut, DesignableSwitch, CollectionManagerShortcut, SystemSettingsShortcut } },
   ],
   [SchemaComponentProvider, { components: { Page, Menu, Action } }],
+  AntdSchemaComponentProvider,
   [DocumentTitleProvider, { addonAfter: 'NocoBase' }],
   [RouteSwitchProvider, { components: { AuthLayout, AdminLayout } }],
 ];

packages/client/src/collection-manager/CollectionManagerShortcut.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
 import { DatabaseOutlined } from '@ant-design/icons';
-import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
 import { ISchema, useForm } from '@formily/react';
+import { uid } from '@formily/shared';
+import React, { useState } from 'react';
 import { PluginManager } from '../plugin-manager';
+import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
 
 const useCloseAction = () => {
   const { setVisible } = useActionVisible();
@@ -20,7 +21,7 @@ const useCloseAction = () => {
 const schema: ISchema = {
   type: 'object',
   properties: {
-    drawer1: {
+    [uid()]: {
       'x-component': 'Action.Drawer',
       type: 'void',
       title: 'Drawer Title',

packages/client/src/plugin-manager/PluginManager.tsx

@@ -1,10 +1,9 @@
-import React, { createContext, useContext } from 'react';
-import { Menu, Space, Tooltip, MenuItemProps } from 'antd';
-import { SettingOutlined, MoreOutlined, DesktopOutlined } from '@ant-design/icons';
-import { get } from 'lodash';
-import { PluginManagerContext } from './context';
+import { MoreOutlined, SettingOutlined } from '@ant-design/icons';
+import { ConfigProvider, Menu, MenuItemProps, Tooltip } from 'antd';
 import cls from 'classnames';
-import { ConfigProvider } from 'antd';
+import { get } from 'lodash';
+import React, { createContext, useContext } from 'react';
+import { PluginManagerContext } from './context';
 
 export const usePrefixCls = (
   tag?: string,
@@ -67,7 +66,7 @@ PluginManager.Toolbar = (props: ToolbarProps) => {
               );
             })}
           <Menu.Divider key={'divider'}></Menu.Divider>
-          <Menu.Item  key={'plugins'} disabled icon={<SettingOutlined />}>
+          <Menu.Item key={'plugins'} disabled icon={<SettingOutlined />}>
             管理插件
           </Menu.Item>
         </Menu.SubMenu>

packages/client/src/schema-component/antd/action/Action.Drawer.tsx

@@ -1,9 +1,9 @@
+import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
+import { Drawer } from 'antd';
 import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { Drawer } from 'antd';
 import { VisibleContext } from './context';
 import { ComposedActionDrawer } from './types';
-import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
 
 export const ActionDrawer: ComposedActionDrawer = observer((props) => {
   const [visible, setVisible] = useContext(VisibleContext);
@@ -13,6 +13,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
     <>
       {createPortal(
         <Drawer
+          width={'50%'}
           title={schema.title}
           {...props}
           destroyOnClose

packages/client/src/schema-component/antd/record-picker/RecordPicker.tsx

@@ -12,7 +12,7 @@ import {
   useFieldSchema
 } from '@formily/react';
 import { toArr } from '@formily/shared';
-import { Button, Drawer, Select, Tag } from 'antd';
+import { Button, Drawer, Select, Space, Tag } from 'antd';
 import React, { createContext, useContext, useMemo, useState } from 'react';
 import { useAttach } from '../../hooks/useAttach';
 import { VisibleContext } from '../action';
@@ -54,28 +54,32 @@ const InputRecordPicker: React.FC = (props) => {
       <FormContext.Provider value={form}>
         <FieldContext.Provider value={f}>
           <Drawer
+            width={'50%'}
             placement={'right'}
             destroyOnClose
             visible={visible}
             onClose={() => setVisible(false)}
             footer={
-              <Button
-                onClick={async () => {
-                  await form.submit();
-                  setVisible(false);
-                }}
-              >
-                提交
-              </Button>
+              <Space style={{ justifyContent: 'flex-end', width: '100%' }}>
+                <Button
+                  type={'primary'}
+                  onClick={async () => {
+                    await form.submit();
+                    setVisible(false);
+                  }}
+                >
+                  Submit
+                </Button>
+              </Space>
             }
           >
             <RecursionField
               onlyRenderProperties
               basePath={f.address}
               schema={fieldSchema}
-              filterProperties={(s) => {
-                return s['x-component'] === 'RowSelection';
-              }}
+              // filterProperties={(s) => {
+              //   return s['x-component'] === 'RowSelection';
+              // }}
             />
           </Drawer>
         </FieldContext.Provider>

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

@@ -1,9 +1,9 @@
-import { Menu } from 'antd';
-import React, { useState } from 'react';
 import { SettingOutlined } from '@ant-design/icons';
-import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
 import { ISchema, useForm } from '@formily/react';
+import { uid } from '@formily/shared';
+import React, { useState } from 'react';
 import { PluginManager } from '..';
+import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
 
 const useCloseAction = () => {
   const { setVisible } = useActionVisible();
@@ -21,7 +21,7 @@ const useCloseAction = () => {
 const schema: ISchema = {
   type: 'object',
   properties: {
-    drawer1: {
+    [uid()]: {
       'x-component': 'Action.Drawer',
       type: 'void',
       title: 'Drawer Title',