refactor: simplify SchemaInitializerItemGroup and update menu item handling

2025-05-05 13:39:24 +08:00 · 2025-04-16 09:11:01 +08:00 · 2025-04-16 09:11:01 +08:00 · 4f29541598
commit 4f29541598
parent c10579e57f
4 changed files with 105 additions and 91 deletions
--- a/packages/core/client/src/application/schema-initializer/components/SchemaInitializerItemGroup.tsx
+++ b/packages/core/client/src/application/schema-initializer/components/SchemaInitializerItemGroup.tsx
@ -15,7 +15,6 @@ import { SchemaInitializerOptions } from '../types';
 import { SchemaInitializerChildren } from './SchemaInitializerChildren';
 import { SchemaInitializerDivider } from './SchemaInitializerDivider';
 import { useSchemaInitializerStyles } from './style';
-import { useMenuSearch } from './SchemaInitializerItemSearchFields';
 export interface SchemaInitializerItemGroupProps {
  title: string;
  children?: SchemaInitializerOptions['items'];
@ -47,11 +46,5 @@ export const SchemaInitializerItemGroup: FC<SchemaInitializerItemGroupProps> = (

 export const SchemaInitializerItemGroupInternal = () => {
  const itemConfig: any = useSchemaInitializerItem<SchemaInitializerItemGroupProps>();
-
-  const searchedChildren = useMenuSearch(itemConfig);
-  if (itemConfig.name && itemConfig.name !== 'displayFields') {
-    return <SchemaInitializerItemGroup {...itemConfig} />;
-  }
-  /* eslint-disable react/no-children-prop */
-  return <SchemaInitializerItemGroup {...itemConfig} children={searchedChildren} />;
+  return <SchemaInitializerItemGroup {...itemConfig} />;
 };
--- a/packages/core/client/src/application/schema-initializer/hooks/useGetSchemaInitializerMenuItems.tsx
+++ b/packages/core/client/src/application/schema-initializer/hooks/useGetSchemaInitializerMenuItems.tsx
@ -68,12 +68,17 @@ export function useGetSchemaInitializerMenuItems(onClick?: (args: any) => void)
          };
        }
        if (item.type === 'subMenu') {
-          const label = compiledTitle;
          const key = item.key || item.name || `${parentKey}-sub-menu-${indexA}`;
+
          return {
            key,
-            label,
-            children: item?.children?.length ? getMenuItems(item.children, key) : [],
+            label: <SchemaInitializerChild {...item} title={compiledTitle} />,
+            // 子菜单的内容已经完全交给 SchemaInitializerChild 处理了，所以这些属性不需要传递下去。但是为了兼容旧版的代码，这里还暂时保留。
+            item_deprecated: {
+              key,
+              label: compiledTitle,
+              children: item?.children?.length ? getMenuItems(item.children, key) : [],
+            },
          };
        }
        if (item.isMenuType) {
--- a/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx
+++ b/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx
@ -147,22 +147,30 @@ export function useMenuSearch({
  const currentItems = useMemo(() => {
    if (isMuliSource) {
      if (!openKey) return [];
-      return data.find((item) => (item.key || item.name) === openKey)?.children || [];
+      let result = data.find((item) => (item.key || item.name) === openKey);
+      result = result.item_deprecated || result;
+
+      return result?.children || [];
    }
-    return data[0]?.children || [];
+
+    let result = data[0];
+    result = result.item_deprecated || result;
+    return result?.children || [];
  }, [data, isMuliSource, openKey]);

  // 根据搜索的值进行处理
  const searchedItems = useMemo(() => {
    if (!searchValue) return currentItems;
    const lowerSearchValue = searchValue.toLocaleLowerCase();
-    return currentItems.filter(
-      (item) =>
+    return currentItems.filter((item) => {
+      item = item.item_deprecated || item;
+      return (
        (item.label || item.title) &&
        String(item.label || item.title)
          .toLocaleLowerCase()
-          .includes(lowerSearchValue),
-    );
+          .includes(lowerSearchValue)
+      );
+    });
  }, [searchValue, currentItems]);

  const shouldLoadMore = useMemo(() => searchedItems.length > count, [count, searchedItems]);
@ -248,6 +256,8 @@ export function useMenuSearch({
  const res = useMemo(() => {
    if (!isMuliSource) return resultItems;
    return data.map((item) => {
+      item = item.item_deprecated || item;
+
      if (openKey && item.key === openKey) {
        return {
          ...item,
--- a/packages/core/client/src/schema-initializer/utils.ts
+++ b/packages/core/client/src/schema-initializer/utils.ts
@ -219,92 +219,98 @@ function getGroupItemForTable({
  depth: number;
  t: any;
 }) {
-  const subFields = getCollectionFields(field.target);
-  const items = subFields
-    ?.filter(
-      (subField) => subField?.interface && !['subTable'].includes(subField?.interface) && !subField?.treeChildren,
-    )
-    ?.map((subField) => {
-      const interfaceConfig = getInterface(subField.interface);
-      const newSchemaName = `${schemaName}.${subField.name}`;
-      const schema = {
-        // type: 'string',
-        name: newSchemaName,
-        // title: subField?.uiSchema?.title || subField.name,
-        'x-component': 'CollectionField',
-        'x-read-pretty': true,
-        'x-collection-field': `${field.target}.${subField.name}`,
-        'x-component-props': {},
-      };
+  const getChildren = () => {
+    const subFields = getCollectionFields(field.target);
+    const items = subFields
+      ?.filter(
+        (subField) => subField?.interface && !['subTable'].includes(subField?.interface) && !subField?.treeChildren,
+      )
+      ?.map((subField) => {
+        const interfaceConfig = getInterface(subField.interface);
+        const newSchemaName = `${schemaName}.${subField.name}`;
+        const schema = {
+          // type: 'string',
+          name: newSchemaName,
+          // title: subField?.uiSchema?.title || subField.name,
+          'x-component': 'CollectionField',
+          'x-read-pretty': true,
+          'x-collection-field': `${field.target}.${subField.name}`,
+          'x-component-props': {},
+        };

-      return {
-        type: 'item',
-        key: `${field.target}_${subField.name}_${newSchemaName}`,
-        name: newSchemaName,
-        title: subField?.uiSchema?.title || subField.name,
-        Component: 'TableCollectionFieldInitializer',
-        find: findTableColumn,
-        remove: removeTableColumn,
-        schemaInitialize: (s) => {
-          interfaceConfig?.schemaInitialize?.(s, {
-            field: subField,
-            readPretty: true,
-            block: 'Table',
-            targetCollection: getCollection(field.target),
-          });
-        },
-        field: subField,
-        schema,
-      } as SchemaInitializerItemType;
-    });
-
-  const displayCollectionFields = {
-    type: 'itemGroup',
-    key: `${field.target}_${schemaName}_displayFields`,
-    name: `${schemaName}-displayCollectionFields`,
-    title: t('Display fields'),
-    children: items,
-  };
-
-  const children = [displayCollectionFields];
-
-  if (depth < maxDepth) {
-    const subChildren = subFields
-      ?.filter((subField) => {
-        return ['o2o', 'oho', 'obo', 'm2o'].includes(subField.interface);
-      })
-      .map((subField) => {
-        return getGroupItemForTable({
-          getCollectionFields,
+        return {
+          type: 'item',
+          key: `${field.target}_${subField.name}_${newSchemaName}`,
+          name: newSchemaName,
+          title: subField?.uiSchema?.title || subField.name,
+          Component: 'TableCollectionFieldInitializer',
+          find: findTableColumn,
+          remove: removeTableColumn,
+          schemaInitialize: (s) => {
+            interfaceConfig?.schemaInitialize?.(s, {
+              field: subField,
+              readPretty: true,
+              block: 'Table',
+              targetCollection: getCollection(field.target),
+            });
+          },
          field: subField,
-          getInterface,
-          getCollection,
-          schemaName: `${schemaName}.${subField.name}`,
-          maxDepth,
-          depth: depth + 1,
-          t,
-        });
+          schema,
+        } as SchemaInitializerItemType;
      });

-    if (subChildren.length) {
-      const group: any = {
-        type: 'itemGroup',
-        key: `${field.target}_${schemaName}_associationFields`,
-        name: `${schemaName}-associationFields`,
-        title: t('Display association fields'),
-        children: subChildren,
-      };
+    const displayCollectionFields = {
+      type: 'itemGroup',
+      key: `${field.target}_${schemaName}_displayFields`,
+      name: `${schemaName}-displayCollectionFields`,
+      title: t('Display fields'),
+      children: items,
+    };

-      children.push(group);
+    const children = [displayCollectionFields];
+
+    if (depth < maxDepth) {
+      const subChildren = subFields
+        ?.filter((subField) => {
+          return ['o2o', 'oho', 'obo', 'm2o'].includes(subField.interface);
+        })
+        .map((subField) => {
+          return getGroupItemForTable({
+            getCollectionFields,
+            field: subField,
+            getInterface,
+            getCollection,
+            schemaName: `${schemaName}.${subField.name}`,
+            maxDepth,
+            depth: depth + 1,
+            t,
+          });
+        });
+
+      if (subChildren.length) {
+        const group: any = {
+          type: 'itemGroup',
+          key: `${field.target}_${schemaName}_associationFields`,
+          name: `${schemaName}-associationFields`,
+          title: t('Display association fields'),
+          children: subChildren,
+        };
+
+        children.push(group);
+      }
    }
-  }
+
+    return children;
+  };

  return {
    type: 'subMenu',
    key: `${field.target}_${schemaName}_submenu`,
    name: schemaName,
    title: field.uiSchema?.title,
-    children,
+    useChildren() {
+      return getChildren() || [];
+    },
  } as SchemaInitializerItemType;
 }