refactor: attachment field support size config (#2552)

* refactor: attachment field support size config

* style: style improve

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -223,6 +223,8 @@ FormItem.Designer = function Designer() {
   const showFieldMode = isAssociationField && fieldModeOptions && !isTableField;
   const showModeSelect = showFieldMode && isPickerMode;
   const isDateField = ['datetime', 'createdAt', 'updatedAt'].includes(collectionField?.interface);
+  const isAttachmentField =
+    ['attachment'].includes(collectionField?.interface) || targetCollection?.template === 'file';
 
   return (
     <GeneralSchemaDesigner>
@@ -727,6 +729,33 @@ FormItem.Designer = function Designer() {
       )}
       {isDateField && <SchemaSettings.DataFormat fieldSchema={fieldSchema} />}
 
+      {isAttachmentField && field.readPretty && (
+        <SchemaSettings.SelectItem
+          key="size"
+          title={t('Size')}
+          options={[
+            { label: t('Large'), value: 'large' },
+            { label: t('Default'), value: 'default' },
+            { label: t('Small'), value: 'small' },
+          ]}
+          value={field?.componentProps?.size || 'default'}
+          onChange={(size) => {
+            const schema = {
+              ['x-uid']: fieldSchema['x-uid'],
+            };
+            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+            fieldSchema['x-component-props']['size'] = size;
+            schema['x-component-props'] = fieldSchema['x-component-props'];
+            field.componentProps = field.componentProps || {};
+            field.componentProps.size = size;
+            dn.emit('patch', {
+              schema,
+            });
+            dn.refresh();
+          }}
+        />
+      )}
+
       {isAssociationField && ['Tag'].includes(fieldMode) && (
         <SchemaSettings.SelectItem
           key="title-field"
@@ -768,11 +797,6 @@ export function isFileCollection(collection: Collection) {
   return collection?.template === 'file';
 }
 
-function extractFirstPart(path) {
-  const firstDotIndex = path.indexOf('.');
-  return firstDotIndex !== -1 ? path.slice(0, firstDotIndex) : path;
-}
-
 FormItem.FilterFormDesigner = FilterFormDesigner;
 
 export function getFieldDefaultValue(fieldSchema: ISchema, collectionField: CollectionFieldOptions) {

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

@@ -20,7 +20,14 @@ export const useStyles = genStyleHook('upload', (token) => {
             padding: '1px !important',
           },
       },
-
+      '&.nb-upload-large': {
+        [`${componentCls}-list-picture-card-container${componentCls}-list-picture-card-container`]: {
+          margin: '0 3px 3px 0 !important',
+          height: '160px !important',
+          width: '160px !important',
+          marginBlock: '0 28px !important',
+        },
+      },
       '&.nb-upload': {
         [`${componentCls}-list-item${componentCls}-list-item-list-type-picture-card`]: {
           padding: '3px !important',