From 1f8c5f510bb0aa47975a3a542b0b51740a4df6f1 Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 24 Feb 2022 00:04:41 +0800 Subject: [PATCH] feat: improve code --- package.json | 1 + packages/client/package.json | 1 + .../collection-manager/CollectionField.tsx | 1 + .../client/src/collection-manager/types.ts | 1 + .../antd/form/Form.Designer.tsx | 4 ++- .../src/schema-component/antd/form/Form.tsx | 4 ++- .../antd/void-table/VoidTable.Designer.tsx | 4 ++- .../Initializers/GridFormItemInitializers.tsx | 4 +-- .../schema-initializer/SchemaInitializer.tsx | 36 +++++++++++++------ .../schema-settings/GeneralSchemaDesigner.tsx | 19 ++++++++++ packages/client/src/user/CurrentUser.tsx | 14 +++++++- 11 files changed, 73 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 5c349ea9c..e92faac4e 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@typescript-eslint/eslint-plugin": "^4.9.1", "@typescript-eslint/parser": "^4.8.2", "antd": "^4.18.5", + "classnames": "^2.3.1", "concurrently": "^7.0.0", "cross-env": "^5.2.0", "dotenv": "^10.0.0", diff --git a/packages/client/package.json b/packages/client/package.json index a33aed155..b3f92d793 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -26,6 +26,7 @@ "ahooks": "^3.0.5", "antd": "^4.18.5", "axios": "^0.24.0", + "classnames": "^2.3.1", "file-saver": "^2.0.5", "i18next": "^21.6.0", "marked": "^4.0.12", diff --git a/packages/client/src/collection-manager/CollectionField.tsx b/packages/client/src/collection-manager/CollectionField.tsx index dd65948ee..7adb00717 100644 --- a/packages/client/src/collection-manager/CollectionField.tsx +++ b/packages/client/src/collection-manager/CollectionField.tsx @@ -29,6 +29,7 @@ const InternalField: React.FC = (props) => { setFieldProps('title', uiSchema.title); setFieldProps('description', uiSchema.description); setFieldProps('initialValue', uiSchema.default); + field.readPretty = uiSchema['x-read-pretty']; setRequired(); // @ts-ignore field.dataSource = uiSchema.enum; diff --git a/packages/client/src/collection-manager/types.ts b/packages/client/src/collection-manager/types.ts index 1859999db..356df241b 100644 --- a/packages/client/src/collection-manager/types.ts +++ b/packages/client/src/collection-manager/types.ts @@ -16,6 +16,7 @@ export interface FieldOptions { export interface CollectionOptions { name?: string; + title?: string; filterTargetKey?: string; targetKey?: string; fields?: FieldOptions[]; diff --git a/packages/client/src/schema-component/antd/form/Form.Designer.tsx b/packages/client/src/schema-component/antd/form/Form.Designer.tsx index 8c6d95cce..50592b662 100644 --- a/packages/client/src/schema-component/antd/form/Form.Designer.tsx +++ b/packages/client/src/schema-component/antd/form/Form.Designer.tsx @@ -1,9 +1,11 @@ import React from 'react'; +import { useCollection } from '../../../collection-manager'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; export const FormDesigner = () => { + const { name, title } = useCollection(); return ( - + & { uid?: string }; @@ -100,8 +101,9 @@ export const Form: React.FC & { Designer?: any } = observer((props) = }); Form.Designer = () => { + const { name, title } = useCollection(); return ( - + ); diff --git a/packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx b/packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx index cd6480215..d58f0e843 100644 --- a/packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx +++ b/packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx @@ -1,9 +1,11 @@ import React from 'react'; +import { useCollection } from '../../../collection-manager'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; export const VoidTableDesigner = () => { + const { name, title } = useCollection(); return ( - + { items={[ { type: 'itemGroup', - title: 'Display fields', + title: t('Display fields'), children: useFormItemInitializerFields(), }, { @@ -20,7 +20,7 @@ export const GridFormItemInitializers = (props: any) => { }, { type: 'item', - title: 'Add text', + title: t('Add text'), component: 'GeneralInitializer', schema: { type: 'void', diff --git a/packages/client/src/schema-initializer/SchemaInitializer.tsx b/packages/client/src/schema-initializer/SchemaInitializer.tsx index 41402c45d..38b8ce28c 100644 --- a/packages/client/src/schema-initializer/SchemaInitializer.tsx +++ b/packages/client/src/schema-initializer/SchemaInitializer.tsx @@ -1,7 +1,7 @@ import { ISchema, observer } from '@formily/react'; import { Button, Dropdown, Menu } from 'antd'; import React, { createContext, useContext, useState } from 'react'; -import { useDesignable } from '../schema-component/hooks'; +import { useCompile, useDesignable } from '../schema-component/hooks'; import { initializes, items } from './Initializers'; import { SchemaInitializerButtonProps, @@ -31,6 +31,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { style, ...others } = props; + const compile = useCompile(); let { insertAdjacent, findComponent, designable } = useDesignable(); const [visible, setVisible] = useState(false); const insertSchema = (schema) => { @@ -59,14 +60,21 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { insert: insertSchema, }} > - + ) ); } return ( item?.children?.length > 0 && ( - + {item?.children?.map((child, indexB) => { if (!child.component) { return null; @@ -83,7 +91,14 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { insert: insertSchema, }} > - + ) ); @@ -117,7 +132,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { color: '#f18b62', }} > - {props.children || props.title} + {compile(props.children || props.title)} ); @@ -125,6 +140,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { const { index, info } = useContext(SchemaInitializerItemContext); + const compile = useCompile(); const { items = [], children = info?.title, icon, onClick, ...others } = props; if (items?.length > 0) { const renderMenuItem = (items: SchemaInitializerItemOptions[]) => { @@ -138,7 +154,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { if (item.type === 'itemGroup') { return ( // @ts-ignore - + {renderMenuItem(item.children)} ); @@ -146,7 +162,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { if (item.type === 'subMenu') { return ( // @ts-ignore - + {renderMenuItem(item.children)} ); @@ -159,14 +175,14 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { onClick({ ...info, item }); }} > - {item.title} + {compile(item.title)} ); }); }; return ( // @ts-ignore - + {renderMenuItem(items)} ); @@ -180,7 +196,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { }} {...others} > - {children} + {compile(children)} ); }; diff --git a/packages/client/src/schema-settings/GeneralSchemaDesigner.tsx b/packages/client/src/schema-settings/GeneralSchemaDesigner.tsx index 3487a3153..b46ca0f3e 100644 --- a/packages/client/src/schema-settings/GeneralSchemaDesigner.tsx +++ b/packages/client/src/schema-settings/GeneralSchemaDesigner.tsx @@ -1,11 +1,29 @@ import { DragOutlined, MenuOutlined } from '@ant-design/icons'; +import { css } from '@emotion/css'; import { useField, useFieldSchema } from '@formily/react'; import { Space } from 'antd'; +import classNames from 'classnames'; import React from 'react'; import { DragHandler, useDesignable } from '../schema-component'; import { SchemaSettings } from './SchemaSettings'; +const titleCss = css` + pointer-events: none; + position: absolute; + font-size: 12px; + background: #f18b62; + color: #fff; + padding: 0 5px; + line-height: 16px; + height: 16px; + border-bottom-right-radius: 2px; + border-radius: 2px; + top: 2px; + left: 2px; +`; + export const GeneralSchemaDesigner = (props: any) => { + const { title } = props; const { dn, designable } = useDesignable(); const field = useField(); const fieldSchema = useFieldSchema(); @@ -19,6 +37,7 @@ export const GeneralSchemaDesigner = (props: any) => { } return (
+ {title &&
{title}
}
diff --git a/packages/client/src/user/CurrentUser.tsx b/packages/client/src/user/CurrentUser.tsx index 7f36a358d..655200e8f 100644 --- a/packages/client/src/user/CurrentUser.tsx +++ b/packages/client/src/user/CurrentUser.tsx @@ -1,17 +1,29 @@ import { Menu } from 'antd'; import React from 'react'; +import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; +import { useDesignable } from '..'; import { ProfileAction } from './ProfileAction'; export const CurrentUser = () => { const history = useHistory(); + const { reset } = useDesignable(); + const { i18n } = useTranslation(); return (
切换角色 - 语言设置 + { + i18n.changeLanguage(i18n.language === 'en-US' ? 'zh-CN' : 'en-US'); + // reset(); + window.location.reload(); + }} + > + 语言设置 + {