fix: improve card item (#4036)

* fix: add block card item(T-4026 and T-4022)

* fix: bug

packages/core/client/src/data-source/components/CollectionDeletedPlaceholder.tsx

@@ -1,11 +1,12 @@
 import { App, Button, Result, Typography } from 'antd';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CardItem, EllipsisWithTooltip, useCompile, useDesignable } from '../../schema-component';
+import { EllipsisWithTooltip, useCompile, useDesignable } from '../../schema-component';
 import { useDataSource } from '../data-source/DataSourceProvider';
 import { useDataSourceManager } from '../data-source';
 import { DEFAULT_DATA_SOURCE_KEY } from '../../data-source/data-source/DataSourceManager';
 import { useCollection } from '../collection';
+import { BlockItemCard } from '../../schema-component/antd/block-item/BlockItemCard';
 
 export interface CollectionDeletedPlaceholderProps {
   type: 'Collection' | 'Field' | 'Data Source' | 'Block template';
@@ -74,7 +75,7 @@ export const CollectionDeletedPlaceholder: FC<CollectionDeletedPlaceholderProps>
     }
 
     return (
-      <CardItem>
+      <BlockItemCard>
         <Result
           status="404"
           subTitle={messageValue}
@@ -96,7 +97,7 @@ export const CollectionDeletedPlaceholder: FC<CollectionDeletedPlaceholderProps>
             </Button>
           }
         />
-      </CardItem>
+      </BlockItemCard>
     );
   }
 

packages/core/client/src/schema-component/antd/block-item/BlockItemCard.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card, CardProps, theme } from 'antd';
+
+export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps>(({ children, ...props }, ref) => {
+  const { token } = theme.useToken();
+
+  return (
+    <Card ref={ref} bordered={false} style={{ marginBottom: token.marginLG }} {...props}>
+      {children}
+    </Card>
+  );
+});
+
+BlockItemCard.displayName = 'BlockItemCard';

packages/core/client/src/schema-component/antd/block-item/BlockItemError.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FC } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { BlockItemCard } from './BlockItemCard';
+import { ErrorFallback } from '../error-fallback';
+
+const FallbackComponent: FC<FallbackProps> = (props) => {
+  return (
+    <BlockItemCard>
+      <ErrorFallback {...props} />
+    </BlockItemCard>
+  );
+};
+
+export const BlockItemError: FC = ({ children }) => {
+  const handleErrors = (error) => {
+    console.error(error);
+  };
+  return (
+    <ErrorBoundary FallbackComponent={FallbackComponent} onError={handleErrors}>
+      {children}
+    </ErrorBoundary>
+  );
+};

packages/core/client/src/schema-component/antd/card-item/CardItem.tsx

@@ -1,10 +1,12 @@
 import { useFieldSchema } from '@formily/react';
-import { Card, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import React from 'react';
 import { useSchemaTemplate } from '../../../schema-templates';
 import { BlockItem } from '../block-item';
-import useStyles from './style';
 import { useInView } from 'react-intersection-observer';
+import { BlockItemCard } from '../block-item/BlockItemCard';
+import { BlockItemError } from '../block-item/BlockItemError';
+import useStyles from './style';
 
 interface Props {
   children?: React.ReactNode;
@@ -18,21 +20,22 @@ export const CardItem = (props: Props) => {
   const template = useSchemaTemplate();
   const fieldSchema = useFieldSchema();
   const templateKey = fieldSchema?.['x-template-key'];
-  const { wrapSSR, componentCls, hashId } = useStyles();
   const { ref, inView } = useInView({
     threshold: 0,
     initialInView: true,
     triggerOnce: true,
     skip: !!process.env.__E2E__,
   });
+  const { wrapSSR, componentCls, hashId } = useStyles();
 
+  if (templateKey && !template) return null;
   return wrapSSR(
-    templateKey && !template ? null : (
+    <BlockItemError>
       <BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
-        <Card ref={ref} className="card" bordered={false} {...restProps}>
+        <BlockItemCard ref={ref} {...restProps}>
           {inView ? props.children : <Skeleton active paragraph={{ rows: 4 }} />}
-        </Card>
+        </BlockItemCard>
       </BlockItem>
-    ),
+    </BlockItemError>,
   );
 };

packages/core/client/src/schema-component/antd/card-item/style.ts

@@ -5,9 +5,7 @@ const useStyles = genStyleHook('nb-card-item', (token) => {
 
   return {
     [componentCls]: {
-      '.card': {
+      marginBottom: token.marginLG,
-        marginBottom: token.marginLG,
-      },
     },
   };
 });