fix: cascade issue: 'The value of xxx cannot be in array format' when deleting and re-selecting (#6585)

* fix: cascade  issue: 'The value of xxx cannot be in array format' when deleting and re-selecting

* fix: bug

* fix: bug

packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx

@@ -13,6 +13,8 @@ import { FormProvider, connect, createSchemaField, observer, useField, useFieldS
 import { uid } from '@formily/shared';
 import { Select as AntdSelect, Input, Space, Spin, Tag } from 'antd';
 import dayjs from 'dayjs';
+import { css } from '@emotion/css';
+import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAPIClient, useCollectionManager_deprecated } from '../../../';
@@ -152,7 +154,11 @@ const CascadeSelect = connect((props) => {
     } else {
       associationField.value = option;
     }
+    if (options.length === 1 && !options[0].value) {
+      onChange?.(null);
+    } else {
       onChange?.(options);
+    }
   };
 
   const onDropdownVisibleChange = async (visible, selectedValue, index) => {
@@ -238,17 +244,17 @@ export const InternalCascadeSelect = observer(
     const fieldSchema = useFieldSchema();
     const { loading, data: formData } = useDataBlockRequest() || {};
     const initialValue = formData?.data?.[fieldSchema.name];
-    useEffect(() => {
-      const id = uid();
-      selectForm.addEffects(id, () => {
-        onFormValuesChange((form) => {
+
+    const handleFormValuesChange = debounce((form) => {
       if (collectionField.interface === 'm2o') {
+        // 对 m2o 类型字段，提取最后一个非 null 值
         const value = extractLastNonNullValueObjects(form.values?.[fieldSchema.name]);
         setTimeout(() => {
           form.setValuesIn(fieldSchema.name, value);
           field.value = value;
         });
       } else {
+        // 对 select_array 类型字段，过滤掉空对象
         const value = extractLastNonNullValueObjects(form.values?.select_array).filter(
           (v) => v && Object.keys(v).length > 0,
         );
@@ -256,10 +262,20 @@ export const InternalCascadeSelect = observer(
           field.value = value;
         });
       }
+    }, 300);
+
+    useEffect(() => {
+      const id = uid();
+      selectForm.addEffects(id, () => {
+        onFormValuesChange((form) => {
+          handleFormValuesChange(form);
         });
       });
+
       return () => {
         selectForm.removeEffects(id);
+        // 清除防抖定时器
+        handleFormValuesChange.cancel();
       };
     }, []);
 
@@ -282,6 +298,24 @@ export const InternalCascadeSelect = observer(
           items: {
             type: 'void',
             'x-component': 'Space',
+            'x-component-props': {
+              style: {
+                width: '100%',
+                display: 'flex',
+              },
+              className: css`
+                .ant-formily-item-control {
+                  max-width: 100% !important;
+                }
+                .ant-space-item:nth-child(1) {
+                  flex: 0.1;
+                }
+
+                .ant-space-item:nth-child(2) {
+                  flex: 3;
+                }
+              `,
+            },
             properties: {
               sort: {
                 type: 'void',