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;
     }
-    onChange?.(options);
+    if (options.length === 1 && !options[0].value) {
+      onChange?.(null);
+    } else {
+      onChange?.(options);
+    }
   };
 
   const onDropdownVisibleChange = async (visible, selectedValue, index) => {
@@ -238,28 +244,38 @@ export const InternalCascadeSelect = observer(
     const fieldSchema = useFieldSchema();
     const { loading, data: formData } = useDataBlockRequest() || {};
     const initialValue = formData?.data?.[fieldSchema.name];
+
+    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,
+        );
+        setTimeout(() => {
+          field.value = value;
+        });
+      }
+    }, 300);
+
     useEffect(() => {
       const id = uid();
       selectForm.addEffects(id, () => {
         onFormValuesChange((form) => {
-          if (collectionField.interface === 'm2o') {
+          handleFormValuesChange(form);
-            const value = extractLastNonNullValueObjects(form.values?.[fieldSchema.name]);
-            setTimeout(() => {
-              form.setValuesIn(fieldSchema.name, value);
-              field.value = value;
-            });
-          } else {
-            const value = extractLastNonNullValueObjects(form.values?.select_array).filter(
-              (v) => v && Object.keys(v).length > 0,
-            );
-            setTimeout(() => {
-              field.value = value;
-            });
-          }
         });
       });
+
       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',