feat: improve code

packages/client/src/components/schema-renderer/index.tsx

@@ -79,6 +79,10 @@ interface DesignableContextProps {
 
 export const useAsyncDataSource = (service: any) => (field: any) => {
   field.loading = true;
+  const disableAsyncDataSource = field.componentProps.disableAsyncDataSource;
+  if (disableAsyncDataSource) {
+    return;
+  }
   service(field).then(
     action.bound((data: any) => {
       field.dataSource = data;
@@ -87,29 +91,23 @@ export const useAsyncDataSource = (service: any) => (field: any) => {
   );
 };
 
-export const useChinaRegionDataSource = ({ onSuccess }) => {
-  const field = useField<ArrayField>();
+export const loadChinaRegionDataSource = async (field) => {
   const maxLevel = field.componentProps.maxLevel || 3;
   const resource = Resource.make('china_regions');
-  console.log('useChinaRegionDataSource');
-  useRequest(
-    () =>
-      resource.list({
-        perPage: -1,
-        filter: {
-          level: 1,
-        },
-      }),
-    {
-      formatResult: (data) =>
-        data?.data?.map((item) => {
-          if (maxLevel !== 1) {
-            item.isLeaf = false;
-          }
-          return item;
-        }),
-      onSuccess,
+  const { data } = await resource.list({
+    perPage: -1,
+    filter: {
+      level: 1,
     },
+  });
+  console.log('loadChinaRegions', data, field.value);
+  return (
+    data?.map((item) => {
+      if (maxLevel !== 1) {
+        item.isLeaf = false;
+      }
+      return item;
+    }) || []
   );
 };
 
@@ -147,7 +145,7 @@ export const SchemaField = createSchemaField({
     useAsyncDataSource,
     ChinaRegion: {
       loadData: loadChinaRegionData,
-      useDataSource: useChinaRegionDataSource,
+      loadDataSource: loadChinaRegionDataSource,
     },
   },
   components: {

packages/client/src/schemas/chart/index.tsx

@@ -73,7 +73,7 @@ Chart.DesignableBar = observer((props) => {
                     setVisible(false);
                   }}
                 >
-                  修改文本段
+                  修改内容
                 </Menu.Item>
                 <Menu.Divider />
                 <Menu.Item
@@ -87,7 +87,7 @@ Chart.DesignableBar = observer((props) => {
                     }
                   }}
                 >
-                  删除当前文本
+                  移除
                 </Menu.Item>
               </Menu>
             }

packages/client/src/schemas/database-field/interfaces/chinaRegion.ts

@@ -19,7 +19,6 @@ export const chinaRegion: FieldOptions = {
       'x-component-props': {
         changeOnSelect: true,
         loadData: '{{ ChinaRegion.loadData }}',
-        useDataSource: '{{ ChinaRegion.useDataSource }}',
         labelInValue: true,
         maxLevel: 3,
         fieldNames: {
@@ -28,7 +27,7 @@ export const chinaRegion: FieldOptions = {
           children: 'children',
         },
       },
-      'x-reactions': ['{{useAsyncDataSource(loadChinaRegions)}}'],
+      'x-reactions': ['{{useAsyncDataSource(ChinaRegion.loadDataSource)}}'],
       'x-decorator': 'FormItem',
       'x-designable-bar': 'Cascader.DesignableBar',
     },

packages/client/src/schemas/designable-bar/style.less

@@ -0,0 +1,8 @@
+.designable-info {
+  position: absolute;
+  font-size: 12px;
+  background: #1890ff;
+  color: #fff;
+  padding: 0 5px;
+  border-bottom-right-radius: 2px;
+}

packages/client/src/schemas/form/DesignableBar.tsx

@@ -12,12 +12,7 @@ import {
   useForm,
   RecursionField,
 } from '@formily/react';
-import {
-  useSchemaPath,
-  SchemaField,
-  useDesignable,
-  removeSchema,
-} from '../';
+import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
 import get from 'lodash/get';
 import { Button, Dropdown, Menu, Space } from 'antd';
 import { MenuOutlined, DragOutlined } from '@ant-design/icons';
@@ -31,17 +26,18 @@ import constate from 'constate';
 import { useEffect } from 'react';
 import { uid } from '@formily/shared';
 import { getSchemaPath } from '../../components/schema-renderer';
+import { useCollection } from '../../constate';
 
 export const DesignableBar = observer((props) => {
   const field = useField();
   const { designable, schema, refresh, deepRemove } = useDesignable();
   const [visible, setVisible] = useState(false);
   const { dragRef } = useContext(DraggableBlockContext);
-  if (!designable) {
-    return null;
-  }
+  const collectionName = field.componentProps.collectionName;
+  const { collection } = useCollection({ collectionName });
   return (
     <div className={cls('designable-bar', { active: visible })}>
+      <div className={'designable-info'}>{collection?.title || collection?.name}</div>
       <span
         onClick={(e) => {
           e.stopPropagation();

packages/client/src/schemas/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { ISchema as IFormilySchema, observer, Schema, useField } from '@formily/react';
 import { extend } from 'umi-request';
 
+import './designable-bar/style.less';
+
 export type FormilyISchema = IFormilySchema
 
 export interface ISchema extends IFormilySchema {

packages/client/src/schemas/input/index.tsx

@@ -93,7 +93,7 @@ Input.DesignableBar = observer((props) => {
                     // }
                   }}
                 >
-                  删除当前区块
+                  移除
                 </Menu.Item>
               </Menu>
             }

packages/client/src/schemas/markdown/index.tsx

@@ -137,7 +137,7 @@ Markdown.Void.DesignableBar = observer((props) => {
                     setVisible(false);
                   }}
                 >
-                  修改文本段
+                  修改内容
                 </Menu.Item>
                 <Menu.Divider />
                 <Menu.Item
@@ -151,7 +151,7 @@ Markdown.Void.DesignableBar = observer((props) => {
                     }
                   }}
                 >
-                  删除当前文本
+                  移除
                 </Menu.Item>
               </Menu>
             }
@@ -206,7 +206,7 @@ Markdown.DesignableBar = observer((props) => {
                     }
                   }}
                 >
-                  删除当前字段
+                  移除
                 </Menu.Item>
               </Menu>
             }

packages/client/src/schemas/table/index.tsx

@@ -1953,10 +1953,11 @@ Table.DesignableBar = observer((props) => {
   const defaultPageSize =
     field?.componentProps?.pagination?.defaultPageSize || 10;
   const collectionName = field?.componentProps?.collectionName;
-  const { fields } = useCollection({ collectionName });
+  const { collection, fields } = useCollection({ collectionName });
   console.log({ collectionName });
   return (
     <div className={cls('designable-bar', { active: visible })}>
+      <div className={'designable-info'}>{collection?.title || collection?.name}</div>
       <span
         onClick={(e) => {
           e.stopPropagation();