Merge branch 'main' into next (#4791)

* fix: external data source not reloading when title field is updated (#4786)

* style: list block style improve (#4785)

* chore(client): change default icon size of icon picker

---------

Co-authored-by: Katherine <katherine_15995@163.com>

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -358,16 +358,7 @@ export const Grid: any = observer(
     return (
       <FilterBlockProvider>
         <GridContext.Provider value={gridContextValue}>
-          <div
-            className={cls(
-              'nb-grid-container',
-              // css`
-              //   & {
-              //     margin-bottom: ${designable ? 0 : -token.marginLG}px;
-              //   }
-              // `,
-            )}
-          >
+          <div className={cls('nb-grid-container')}>
             <div className={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
               <div className="nb-grid-warp">
                 <DndWrapper dndContext={props.dndContext}>

packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx

@@ -46,10 +46,10 @@ const useStyle = (isSearchable: IconPickerProps['searchable']) =>
   })();
 
 function IconField(props: IconPickerProps) {
-  const { fontSizeHeading3 } = theme.useToken().token;
+  const { fontSizeXL } = theme.useToken().token;
   const availableIcons = [...icons.keys()];
   const layout = useFormLayout();
-  const { value, onChange, disabled, iconSize = fontSizeHeading3, searchable = true } = props;
+  const { value, onChange, disabled, iconSize = fontSizeXL, searchable = true } = props;
   const [visible, setVisible] = useState(false);
   const [filteredIcons, setFilteredIcons] = useState(availableIcons);
   const { t } = useTranslation();

packages/core/client/src/schema-component/antd/list/List.tsx

@@ -75,46 +75,47 @@ const InternalList = (props) => {
           componentCls,
           hashId,
           css`
-            .ant-spin-nested-loading {
+            .nb-list-container {
               height: ${height ? height + 'px' : '100%'};
-              overflow-y: ${height ? 'auto' : 'null'};
-              .ant-spin-container {
-                width: 100%;
-                overflow-x: clip;
-                padding-right: ${token.paddingSM + 'px'};
-              }
+              overflow-y: auto;
+              margin-left: -${token.marginLG}px;
+              margin-right: -${token.marginLG}px;
+              padding-left: ${token.marginLG}px;
+              padding-right: ${token.marginLG}px;
             }
           `,
         )}
       >
-        <AntdList
-          {...props}
-          pagination={
-            !meta || meta.count <= meta.pageSize
-              ? false
-              : {
-                  onChange: onPaginationChange,
-                  total: meta?.count || 0,
-                  pageSize: meta?.pageSize || 10,
-                  current: meta?.page || 1,
-                }
-          }
-          loading={service?.loading}
-        >
-          {field.value?.length
-            ? field.value.map((item, index) => {
-                return (
-                  <RecursionField
-                    basePath={field.address}
-                    key={index}
-                    name={index}
-                    onlyRenderProperties
-                    schema={getSchema(index)}
-                  ></RecursionField>
-                );
-              })
-            : null}
-        </AntdList>
+        <div className="nb-list-container">
+          <AntdList
+            {...props}
+            pagination={
+              !meta || meta.count <= meta.pageSize
+                ? false
+                : {
+                    onChange: onPaginationChange,
+                    total: meta?.count || 0,
+                    pageSize: meta?.pageSize || 10,
+                    current: meta?.page || 1,
+                  }
+            }
+            loading={service?.loading}
+          >
+            {field.value?.length
+              ? field.value.map((item, index) => {
+                  return (
+                    <RecursionField
+                      basePath={field.address}
+                      key={index}
+                      name={index}
+                      onlyRenderProperties
+                      schema={getSchema(index)}
+                    ></RecursionField>
+                  );
+                })
+              : null}
+          </AntdList>
+        </div>
         <Designer />
       </SortableItem>
     </SchemaComponentOptions>,

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/TitleField.tsx

@@ -16,6 +16,7 @@ import {
   useAPIClient,
   withDynamicSchemaProps,
   useProps,
+  useDataSourceManager,
 } from '@nocobase/client';
 import { useRemoteCollectionContext } from '../CollectionFields';
 
@@ -24,7 +25,7 @@ export const TitleField = withDynamicSchemaProps(
     const { t } = useTranslation();
     const { isTitleField } = useCollectionManager_deprecated();
     const [loadingRecord, setLoadingRecord] = React.useState(null);
-
+    const dm = useDataSourceManager();
     // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
     const { setTitleField, filterByTk, dataSourceKey } = useProps(props);
 
@@ -41,6 +42,7 @@ export const TitleField = withDynamicSchemaProps(
       message.success(t('Saved successfully'));
       refreshRM();
       setTitleField(checked ? record.name : 'id');
+      await dm.getDataSource(dataSourceKey).reload();
       setLoadingRecord(null);
     };
     return isTitleField(record) ? (