feat: improve code

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

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

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;

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[];

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 (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner title={title || name}>
       <SchemaSettings.Remove
         removeParentsIfNoChildren
         breakRemoveOn={{

packages/client/src/schema-component/antd/form/Form.tsx

@@ -6,6 +6,7 @@ import { Spin } from 'antd';
 import React, { useMemo } from 'react';
 import { useAttach, useComponent } from '../..';
 import { useRequest } from '../../../api-client';
+import { useCollection } from '../../../collection-manager';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 
 type Opts = Options<any, any> & { uid?: string };
@@ -100,8 +101,9 @@ export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) =
 });
 
 Form.Designer = () => {
+  const { name, title } = useCollection();
   return (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner title={title || name}>
       <SchemaSettings.Remove />
     </GeneralSchemaDesigner>
   );

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 (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner title={title || name}>
       <SchemaSettings.Remove
         removeParentsIfNoChildren
         breakRemoveOn={{

packages/client/src/schema-initializer/Initializers/GridFormItemInitializers.tsx

@@ -12,7 +12,7 @@ export const GridFormItemInitializers = (props: any) => {
       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',

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,
                 }}
               >
-                <Component {...item} item={item} insert={insertSchema} />
+                <Component
+                  {...item}
+                  item={{
+                    ...item,
+                    title: compile(item.title),
+                  }}
+                  insert={insertSchema}
+                />
               </SchemaInitializerItemContext.Provider>
             )
           );
         }
         return (
           item?.children?.length > 0 && (
-            <Menu.ItemGroup key={`item-group-${indexA}`} title={item.title}>
+            <Menu.ItemGroup key={`item-group-${indexA}`} title={compile(item.title)}>
               {item?.children?.map((child, indexB) => {
                 if (!child.component) {
                   return null;
@@ -83,7 +91,14 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
                         insert: insertSchema,
                       }}
                     >
-                      <Component {...child} item={child} insert={insertSchema} />
+                      <Component
+                        {...child}
+                        item={{
+                          ...child,
+                          title: compile(child.title),
+                        }}
+                        insert={insertSchema}
+                      />
                     </SchemaInitializerItemContext.Provider>
                   )
                 );
@@ -117,7 +132,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
           color: '#f18b62',
         }}
       >
-        {props.children || props.title}
+        {compile(props.children || props.title)}
       </Button>
     </Dropdown>
   );
@@ -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
-            <Menu.ItemGroup eventKey={`item-group-${indexA}`} key={`item-group-${indexA}`} title={item.title}>
+            <Menu.ItemGroup eventKey={`item-group-${indexA}`} key={`item-group-${indexA}`} title={compile(item.title)}>
               {renderMenuItem(item.children)}
             </Menu.ItemGroup>
           );
@@ -146,7 +162,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
         if (item.type === 'subMenu') {
           return (
             // @ts-ignore
-            <Menu.SubMenu eventKey={`sub-menu-${indexA}`} key={`sub-menu-${indexA}`} title={item.title}>
+            <Menu.SubMenu eventKey={`sub-menu-${indexA}`} key={`sub-menu-${indexA}`} title={compile(item.title)}>
               {renderMenuItem(item.children)}
             </Menu.SubMenu>
           );
@@ -159,14 +175,14 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
               onClick({ ...info, item });
             }}
           >
-            {item.title}
+            {compile(item.title)}
           </Menu.Item>
         );
       });
     };
     return (
       // @ts-ignore
-      <Menu.SubMenu eventKey={index} key={index} title={children} icon={icon}>
+      <Menu.SubMenu eventKey={index} key={index} title={compile(children)} icon={icon}>
         {renderMenuItem(items)}
       </Menu.SubMenu>
     );
@@ -180,7 +196,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
       }}
       {...others}
     >
-      {children}
+      {compile(children)}
     </Menu.Item>
   );
 };

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 (
     <div className={'general-schema-designer'}>
+      {title && <div className={classNames('general-schema-designer-title', titleCss)}>{title}</div>}
       <div className={'general-schema-designer-icons'}>
         <Space size={2} align={'center'}>
           <DragHandler>

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 (
     <div style={{ display: 'inline-block' }}>
       <Menu selectable={false} mode={'horizontal'} theme={'dark'}>
         <Menu.SubMenu key={'current-user'} title={'超级管理员'}>
           <ProfileAction />
           <Menu.Item>切换角色</Menu.Item>
-          <Menu.Item>语言设置</Menu.Item>
+          <Menu.Item
+            onClick={() => {
+              i18n.changeLanguage(i18n.language === 'en-US' ? 'zh-CN' : 'en-US');
+              // reset();
+              window.location.reload();
+            }}
+          >
+            语言设置
+          </Menu.Item>
           <Menu.Divider />
           <Menu.Item
             onClick={() => {