From 44a489363057cea85fe2541b2050aef2ed014d9a Mon Sep 17 00:00:00 2001 From: chenos Date: Sun, 20 Feb 2022 20:00:15 +0800 Subject: [PATCH] feat: improve code --- .../Configuration/AddFieldAction.tsx | 22 ++- .../Configuration/interfaces.tsx | 45 +++++ .../collection-manager/interfaces/checkbox.ts | 22 +++ .../interfaces/checkboxGroup.ts | 22 +++ .../interfaces/createdAt.ts | 26 +++ .../collection-manager/interfaces/email.ts | 22 +++ .../collection-manager/interfaces/index.ts | 4 + .../collection-manager/interfaces/input.ts | 2 +- .../plugin-ui-routes-storage/src/index.ts | 162 +++++++++--------- 9 files changed, 238 insertions(+), 89 deletions(-) create mode 100644 packages/client/src/collection-manager/Configuration/interfaces.tsx create mode 100644 packages/client/src/collection-manager/interfaces/checkbox.ts create mode 100644 packages/client/src/collection-manager/interfaces/checkboxGroup.ts create mode 100644 packages/client/src/collection-manager/interfaces/createdAt.ts create mode 100644 packages/client/src/collection-manager/interfaces/email.ts diff --git a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx index 1ef79a364..8b8e7876b 100644 --- a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx +++ b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx @@ -1,11 +1,13 @@ import { PlusOutlined } from '@ant-design/icons'; +import { ArrayTable } from '@formily/antd'; import { ISchema } from '@formily/react'; import { uid } from '@formily/shared'; import { Button, Dropdown, Menu } from 'antd'; import React, { useState } from 'react'; -import { ActionContext, SchemaComponent } from '../../schema-component'; +import { ActionContext, SchemaComponent, useCompile } from '../../schema-component'; import { useCollectionManager } from '../hooks'; import { IField } from '../interfaces/types'; +import { options } from './interfaces'; const getSchema = (schema: IField): ISchema => { if (!schema) { @@ -74,6 +76,7 @@ export const AddFieldAction = () => { const { getInterface } = useCollectionManager(); const [visible, setVisible] = useState(false); const [schema, setSchema] = useState({}); + const compile = useCompile(); return ( { setVisible(true); }} > - - input - textarea - China region - + {options.map((option) => { + return ( + + {option.children.map((child) => { + console.log(child); + return {compile(child.title)}; + })} + + ); + })} } > @@ -97,7 +105,7 @@ export const AddFieldAction = () => { 添加字段 - + ); }; diff --git a/packages/client/src/collection-manager/Configuration/interfaces.tsx b/packages/client/src/collection-manager/Configuration/interfaces.tsx new file mode 100644 index 000000000..10e8e5451 --- /dev/null +++ b/packages/client/src/collection-manager/Configuration/interfaces.tsx @@ -0,0 +1,45 @@ +import { ISchema } from '@formily/react'; +import set from 'lodash/set'; +import * as types from '../interfaces'; + +export const interfaces = new Map(); + +const fields = {}; +const groupLabels = {}; + +export function registerField(group: string, type: string, schema) { + fields[group] = fields[group] || {}; + set(fields, [group, type], schema); + interfaces.set(type, schema); +} + +export function registerGroupLabel(key: string, label: string) { + groupLabels[key] = label; +} + +Object.keys(types).forEach((type) => { + const schema = types[type]; + registerField(schema.group || 'others', type, { order: 0, ...schema }); +}); + +registerGroupLabel('basic', '{{t("Basic")}}'); +registerGroupLabel('choices', '{{t("Choices")}}'); +registerGroupLabel('media', '{{t("Media")}}'); +registerGroupLabel('datetime', '{{t("Date & Time")}}'); +registerGroupLabel('relation', '{{t("Relation")}}'); +registerGroupLabel('systemInfo', '{{t("System info")}}'); +registerGroupLabel('others', '{{t("Others")}}'); + +export const options = Object.keys(groupLabels).map((groupName) => { + return { + label: groupLabels[groupName], + children: Object.keys(fields[groupName] || {}) + .map((type) => { + return { + name: type, + ...fields[groupName][type], + }; + }) + .sort((a, b) => a.order - b.order), + }; +}); diff --git a/packages/client/src/collection-manager/interfaces/checkbox.ts b/packages/client/src/collection-manager/interfaces/checkbox.ts new file mode 100644 index 000000000..31c5bf00a --- /dev/null +++ b/packages/client/src/collection-manager/interfaces/checkbox.ts @@ -0,0 +1,22 @@ +import { IField } from './types'; + +export const checkbox: IField = { + name: 'checkbox', + type: 'object', + group: 'choices', + order: 1, + title: '{{t("Checkbox")}}', + default: { + type: 'boolean', + // name, + uiSchema: { + type: 'boolean', + 'x-component': 'Checkbox', + }, + }, + properties: {}, + operators: [ + { label: '{{t("Yes")}}', value: '$isTruly', selected: true, noValue: true }, + { label: '{{t("No")}}', value: '$isFalsy', noValue: true }, + ], +}; diff --git a/packages/client/src/collection-manager/interfaces/checkboxGroup.ts b/packages/client/src/collection-manager/interfaces/checkboxGroup.ts new file mode 100644 index 000000000..f135f6dc6 --- /dev/null +++ b/packages/client/src/collection-manager/interfaces/checkboxGroup.ts @@ -0,0 +1,22 @@ +import { dataSource } from './properties'; +import { IField } from './types'; + +export const checkboxGroup: IField = { + name: 'checkboxGroup', + type: 'object', + group: 'choices', + order: 5, + title: '{{t("Checkbox group")}}', + default: { + interface: 'checkboxGroup', + type: 'json', + // name, + uiSchema: { + type: 'string', + 'x-component': 'Checkbox.Group', + }, + }, + properties: { + 'uiSchema.enum': dataSource, + }, +}; diff --git a/packages/client/src/collection-manager/interfaces/createdAt.ts b/packages/client/src/collection-manager/interfaces/createdAt.ts new file mode 100644 index 000000000..b22a404fa --- /dev/null +++ b/packages/client/src/collection-manager/interfaces/createdAt.ts @@ -0,0 +1,26 @@ +import { dateTimeProps } from './properties'; +import { IField } from './types'; + +export const createdAt: IField = { + name: 'createdAt', + type: 'object', + group: 'systemInfo', + order: 1, + title: '{{t("Created at")}}', + sortable: true, + default: { + type: 'date', + field: 'created_at', + // name, + uiSchema: { + type: 'datetime', + title: '{{t("Created at")}}', + 'x-component': 'DatePicker', + 'x-component-props': {}, + 'x-read-pretty': true, + }, + }, + properties: { + ...dateTimeProps, + }, +}; diff --git a/packages/client/src/collection-manager/interfaces/email.ts b/packages/client/src/collection-manager/interfaces/email.ts new file mode 100644 index 000000000..8d4608396 --- /dev/null +++ b/packages/client/src/collection-manager/interfaces/email.ts @@ -0,0 +1,22 @@ +import { IField } from './types'; + +export const email: IField = { + name: 'email', + type: 'object', + group: 'basic', + order: 4, + title: '{{t("Email")}}', + sortable: true, + default: { + type: 'string', + // name, + uiSchema: { + type: 'string', + // title, + 'x-component': 'Input', + 'x-decorator': 'FormItem', + 'x-validator': 'email', + 'x-designable-bar': 'Input.DesignableBar', + }, + }, +}; diff --git a/packages/client/src/collection-manager/interfaces/index.ts b/packages/client/src/collection-manager/interfaces/index.ts index bddb0ff70..fbdc6c298 100644 --- a/packages/client/src/collection-manager/interfaces/index.ts +++ b/packages/client/src/collection-manager/interfaces/index.ts @@ -1,4 +1,8 @@ +export * from './checkbox'; +export * from './checkboxGroup'; export * from './chinaRegion'; +export * from './createdAt'; +export * from './email'; export * from './input'; export * from './textarea'; diff --git a/packages/client/src/collection-manager/interfaces/input.ts b/packages/client/src/collection-manager/interfaces/input.ts index 239025df7..c09d0a6ba 100644 --- a/packages/client/src/collection-manager/interfaces/input.ts +++ b/packages/client/src/collection-manager/interfaces/input.ts @@ -1,7 +1,7 @@ import { IField } from './types'; export const input: IField = { - name: 'string', + name: 'input', type: 'object', group: 'basic', order: 1, diff --git a/packages/plugin-ui-routes-storage/src/index.ts b/packages/plugin-ui-routes-storage/src/index.ts index 34cf301f0..07d43c3f8 100644 --- a/packages/plugin-ui-routes-storage/src/index.ts +++ b/packages/plugin-ui-routes-storage/src/index.ts @@ -30,87 +30,87 @@ export class UiRoutesStoragePlugin extends Plugin { sideMenuRefScopeKey: 'sideMenuRef', }, properties: { - item3: { - type: 'void', - title: 'SubMenu u3', - 'x-component': 'Menu.SubMenu', - 'x-component-props': {}, - properties: { - item6: { - type: 'void', - title: 'SubMenu u6', - 'x-component': 'Menu.SubMenu', - 'x-component-props': {}, - properties: { - item7: { - type: 'void', - title: 'Menu Item u7', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - properties: { - page1: { - type: 'void', - 'x-component': 'Page', - 'x-async': true, - properties: { - grid1: { - type: 'void', - 'x-component': 'Grid', - 'x-item-initializer': 'BlockInitializer', - properties: {}, - }, - }, - }, - }, - }, - item8: { - type: 'void', - title: 'Menu Item u8', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - }, - }, - }, - item4: { - type: 'void', - title: 'Menu Item u4', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - }, - item5: { - type: 'void', - title: 'Menu Item u5', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - }, - }, - }, - item1: { - type: 'void', - title: 'Menu Item u1', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - }, - item2: { - type: 'void', - title: 'Menu Item u2', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - }, - item9: { - type: 'void', - title: 'SubMenu u9', - 'x-component': 'Menu.SubMenu', - 'x-component-props': {}, - properties: { - item10: { - type: 'void', - title: 'Menu Item u10', - 'x-component': 'Menu.Item', - 'x-component-props': {}, - }, - }, - }, + // item3: { + // type: 'void', + // title: 'SubMenu u3', + // 'x-component': 'Menu.SubMenu', + // 'x-component-props': {}, + // properties: { + // item6: { + // type: 'void', + // title: 'SubMenu u6', + // 'x-component': 'Menu.SubMenu', + // 'x-component-props': {}, + // properties: { + // item7: { + // type: 'void', + // title: 'Menu Item u7', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // properties: { + // page1: { + // type: 'void', + // 'x-component': 'Page', + // 'x-async': true, + // properties: { + // grid1: { + // type: 'void', + // 'x-component': 'Grid', + // 'x-item-initializer': 'BlockInitializer', + // properties: {}, + // }, + // }, + // }, + // }, + // }, + // item8: { + // type: 'void', + // title: 'Menu Item u8', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // }, + // }, + // }, + // item4: { + // type: 'void', + // title: 'Menu Item u4', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // }, + // item5: { + // type: 'void', + // title: 'Menu Item u5', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // }, + // }, + // }, + // item1: { + // type: 'void', + // title: 'Menu Item u1', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // }, + // item2: { + // type: 'void', + // title: 'Menu Item u2', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // }, + // item9: { + // type: 'void', + // title: 'SubMenu u9', + // 'x-component': 'Menu.SubMenu', + // 'x-component-props': {}, + // properties: { + // item10: { + // type: 'void', + // title: 'Menu Item u10', + // 'x-component': 'Menu.Item', + // 'x-component-props': {}, + // }, + // }, + // }, }, }, path: '/admin/:name(.+)?',