From 7ed5054c41cb0324e224051b90197bcb145bb847 Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 3 Feb 2022 22:27:26 +0800 Subject: [PATCH] feat: collection configuration interface --- packages/client/src/acl/ACLShortcut.tsx | 15 +- .../client/src/acl/RolePermissionManager.tsx | 2 +- .../CollectionManagerShortcut.tsx | 23 +-- .../src/collection-manager/Configuration.tsx | 146 ++++++++++++++++++ packages/client/src/i18n/i18n.ts | 50 ++++++ packages/client/src/i18n/index.ts | 55 +------ .../antd/action/Action.Drawer.tsx | 24 ++- 7 files changed, 220 insertions(+), 95 deletions(-) create mode 100644 packages/client/src/collection-manager/Configuration.tsx create mode 100644 packages/client/src/i18n/i18n.ts diff --git a/packages/client/src/acl/ACLShortcut.tsx b/packages/client/src/acl/ACLShortcut.tsx index cc408d929..cb2f4397d 100644 --- a/packages/client/src/acl/ACLShortcut.tsx +++ b/packages/client/src/acl/ACLShortcut.tsx @@ -25,25 +25,12 @@ const schema: ISchema = { [uid()]: { 'x-component': 'Action.Drawer', type: 'void', - title: 'Drawer Title', + title: '角色配置', properties: { hello1: { type: 'void', 'x-component': 'RoleTable', }, - // footer1: { - // 'x-component': 'Action.Drawer.Footer', - // type: 'void', - // properties: { - // close1: { - // title: 'Close', - // 'x-component': 'Action', - // 'x-component-props': { - // useAction: '{{ useCloseAction }}', - // }, - // }, - // }, - // }, }, }, }, diff --git a/packages/client/src/acl/RolePermissionManager.tsx b/packages/client/src/acl/RolePermissionManager.tsx index ae4b4b7b4..b7b7c15d4 100644 --- a/packages/client/src/acl/RolePermissionManager.tsx +++ b/packages/client/src/acl/RolePermissionManager.tsx @@ -215,7 +215,7 @@ export const ResourceActionsForm = () => { title: '可操作的数据范围', dataIndex: 'scope', key: 'scope', - render: () => + render: () => , }, ]} dataSource={[ diff --git a/packages/client/src/collection-manager/CollectionManagerShortcut.tsx b/packages/client/src/collection-manager/CollectionManagerShortcut.tsx index b2d81d8b1..46de0c19f 100644 --- a/packages/client/src/collection-manager/CollectionManagerShortcut.tsx +++ b/packages/client/src/collection-manager/CollectionManagerShortcut.tsx @@ -4,6 +4,7 @@ import { uid } from '@formily/shared'; import React, { useState } from 'react'; import { PluginManager } from '../plugin-manager'; import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component'; +import { ConfigurationTable } from './Configuration'; const useCloseAction = () => { const { setVisible } = useActionVisible(); @@ -24,24 +25,10 @@ const schema: ISchema = { [uid()]: { 'x-component': 'Action.Drawer', type: 'void', - title: 'Drawer Title', + title: '数据表配置', properties: { - hello1: { - 'x-content': 'Hello', - title: 'T1', - }, - footer1: { - 'x-component': 'Action.Drawer.Footer', - type: 'void', - properties: { - close1: { - title: 'Close', - 'x-component': 'Action', - 'x-component-props': { - useAction: '{{ useCloseAction }}', - }, - }, - }, + configuration: { + 'x-component': 'ConfigurationTable', }, }, }, @@ -59,7 +46,7 @@ export const CollectionManagerShortcut = () => { setVisible(true); }} /> - + ); }; diff --git a/packages/client/src/collection-manager/Configuration.tsx b/packages/client/src/collection-manager/Configuration.tsx new file mode 100644 index 000000000..edce1060e --- /dev/null +++ b/packages/client/src/collection-manager/Configuration.tsx @@ -0,0 +1,146 @@ +import { Button, Divider, Drawer, Space, Table, Typography } from 'antd'; +import React, { useState } from 'react'; + +export const ConfigurationTable = () => { + return ( +
+ + + + + ( + }> + + Edit + Delete + + ), + }, + ]} + dataSource={[ + { + name: 'users', + title: '用户', + }, + ]} + /> + + ); +}; + +export const ConfigureFields = () => { + const [visible, setVisible] = useState(false); + return ( + <> + setVisible(true)}>Configure + setVisible(false)}> + + + + ); +}; + +export const CollectionFieldList = () => { + return ( +
+ + + + +
( + }> + + Delete + + ), + }, + ]} + dataSource={[ + { + name: 'title', + title: '标题', + }, + ]} + /> + + ); +}; + +export const CollectionFieldEdit = () => { + const [visible, setVisible] = useState(false); + return ( + <> + setVisible(true)}>Edit + setVisible(false)} + footer={ + + + + + } + > + CollectionFieldEdit + + + ); +}; diff --git a/packages/client/src/i18n/i18n.ts b/packages/client/src/i18n/i18n.ts new file mode 100644 index 000000000..16afc9b3f --- /dev/null +++ b/packages/client/src/i18n/i18n.ts @@ -0,0 +1,50 @@ +import i18next from 'i18next'; +import moment from 'moment'; +import { initReactI18next } from 'react-i18next'; + +const zhCN = require('../locale/zh_CN'); +const enUS = require('../locale/en_US'); +const log = require('debug')('i18next'); + +export const i18n = i18next.createInstance(); + +i18n.use(initReactI18next).init({ + lng: localStorage.getItem('locale') || 'en-US', + debug: false, + defaultNS: 'client', + // parseMissingKeyHandler: (key) => { + // console.log('parseMissingKeyHandler', `'${key}': '${key}',`); + // return key; + // }, + // ns: ['client'], + resources: { + 'en-US': { + client: { + ...enUS, + }, + }, + 'zh-CN': { + client: { + ...zhCN, + }, + }, + }, +}); + +const momentLngs = { + 'en-US': 'en', + 'zh-CN': 'zh-cn', +}; + +function setMomentLng(language) { + const lng = momentLngs[language || 'en-US'] || 'en'; + log(lng); + moment.locale(lng); +} + +setMomentLng(localStorage.getItem('locale')); + +i18n.on('languageChanged', (lng) => { + localStorage.setItem('locale', lng); + setMomentLng(lng); +}); diff --git a/packages/client/src/i18n/index.ts b/packages/client/src/i18n/index.ts index a1b0539c0..e82230f1b 100644 --- a/packages/client/src/i18n/index.ts +++ b/packages/client/src/i18n/index.ts @@ -1,54 +1 @@ -import i18next from 'i18next'; -import { initReactI18next } from 'react-i18next'; -import moment from 'moment'; - -const zhCN = require('../locale/zh_CN'); -const enUS = require('../locale/en_US'); -const log = require('debug')('i18next'); - -export const i18n = i18next.createInstance(); - -i18n.use(initReactI18next).init({ - lng: localStorage.getItem('locale') || 'en-US', - debug: false, - defaultNS: 'client', - // parseMissingKeyHandler: (key) => { - // console.log('parseMissingKeyHandler', `'${key}': '${key}',`); - // return key; - // }, - // ns: ['client'], - resources: { - 'en-US': { - client: { - ...enUS, - }, - }, - 'zh-CN': { - client: { - ...zhCN, - }, - }, - }, -}); - -const momentLngs = { - 'en-US': 'en', - 'zh-CN': 'zh-cn', -}; - -function setMomentLng(language) { - const lng = momentLngs[language || 'en-US'] || 'en'; - log(lng); - moment.locale(lng); -} - -setMomentLng(localStorage.getItem('locale')); - -i18n.on('languageChanged', (lng) => { - localStorage.setItem('locale', lng); - setMomentLng(lng); -}); - -// export const t = i18n.t; - -export default i18n; +export * from './i18n'; 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 1dd27ab5d..1f2e3b7ef 100644 --- a/packages/client/src/schema-component/antd/action/Action.Drawer.tsx +++ b/packages/client/src/schema-component/antd/action/Action.Drawer.tsx @@ -9,6 +9,12 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => { const [visible, setVisible] = useContext(VisibleContext); const schema = useFieldSchema(); const field = useField(); + const footerSchema = schema.reduceProperties((buf, s) => { + if (s['x-component'] === 'Action.Drawer.Footer') { + return s; + } + return buf; + }); return ( <> {createPortal( @@ -20,14 +26,16 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => { visible={visible} onClose={() => setVisible(false)} footer={ - { - return s['x-component'] === 'Action.Drawer.Footer'; - }} - /> + footerSchema && ( + { + return s['x-component'] === 'Action.Drawer.Footer'; + }} + /> + ) } >