feat: url support preview (#4559)

* feat: url support preview

* feat: add settings for Input.Preview

* refactor: refactor CollectionField.tsx to use dynamic component

* Revert "refactor: refactor CollectionField.tsx to use dynamic component"

This reverts commit 37719eb28e5866762459da3b269288340a21b661.

* test: add e2e test

* refactor(e2e): extract template

---------

Co-authored-by: Zeke Zhang <958414905@qq.com>

packages/core/client/src/common/useFieldComponentName.tsx

@@ -30,6 +30,7 @@ export function useFieldComponentName(): string {
     fieldSchema?.['x-component-props']?.['mode'] ||
     field?.componentProps?.['mode'] ||
     (isFileField ? 'FileManager' : '') ||
+    fieldSchema?.['x-component-props']?.['component'] ||
     collectionField?.uiSchema?.['x-component'];
   return map[fieldComponentName] || fieldComponentName;
 }

packages/core/client/src/data-source/collection-field/CollectionField.tsx

@@ -12,12 +12,12 @@ import { connect, useField, useFieldSchema } from '@formily/react';
 import { merge } from '@formily/shared';
 import { concat } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useFormBlockContext } from '../../block-provider/FormBlockProvider';
 import { useDynamicComponentProps } from '../../hoc/withDynamicSchemaProps';
 import { ErrorFallback, useCompile, useComponent } from '../../schema-component';
 import { useIsAllowToSetDefaultValue } from '../../schema-settings/hooks/useIsAllowToSetDefaultValue';
 import { CollectionFieldProvider, useCollectionField } from './CollectionFieldProvider';
-import { ErrorBoundary } from 'react-error-boundary';
 
 type Props = {
   component: any;
@@ -37,7 +37,9 @@ export const CollectionFieldInternalField: React.FC = (props: Props) => {
   const { uiSchema: uiSchemaOrigin, defaultValue } = collectionField;
   const { isAllowToSetDefaultValue } = useIsAllowToSetDefaultValue();
   const uiSchema = useMemo(() => compile(uiSchemaOrigin), [JSON.stringify(uiSchemaOrigin)]);
-  const Component = useComponent(component || uiSchema?.['x-component'] || 'Input');
+  const Component = useComponent(
+    fieldSchema['x-component-props']?.['component'] || uiSchema?.['x-component'] || 'Input',
+  );
   const setFieldProps = useCallback(
     (key, value) => {
       field[key] = typeof field[key] === 'undefined' ? value : field[key];

packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx

@@ -13,13 +13,13 @@ import { useTranslation } from 'react-i18next';
 import { useApp } from '../../../../application';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
 import { useCollectionManager_deprecated } from '../../../../collection-manager';
+import { useFieldComponentName } from '../../../../common/useFieldComponentName';
 import { useCollection } from '../../../../data-source';
 import { useDesignable } from '../../../../schema-component';
 import { useAssociationFieldContext } from '../../../../schema-component/antd/association-field/hooks';
 import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
 import { SchemaSettingsDefaultValue } from '../../../../schema-settings/SchemaSettingsDefaultValue';
 import { isPatternDisabled } from '../../../../schema-settings/isPatternDisabled';
-import { useFieldComponentName } from './utils';
 
 export const tableColumnSettings = new SchemaSettings({
   name: 'fieldSettings:TableColumn',

packages/core/client/src/modules/blocks/data-blocks/table/utils.tsx

@@ -1,31 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
-import { Field } from '@formily/core';
-import { useField, useFieldSchema } from '@formily/react';
-import { useIsFileField } from '../../../../schema-component';
-import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
-
-export function useFieldComponentName(): string {
-  const { fieldSchema: tableColumnSchema, collectionField } = useColumnSchema();
-  const field = useField<Field>();
-  const isFileField = useIsFileField();
-  const schema = useFieldSchema();
-  const fieldSchema = tableColumnSchema || schema;
-  const map = {
-    // AssociationField 的 mode 默认值是 Select
-    AssociationField: 'Select',
-  };
-  const fieldComponentName =
-    fieldSchema?.['x-component-props']?.['mode'] ||
-    field?.componentProps?.['mode'] ||
-    (isFileField ? 'FileManager' : '') ||
-    collectionField?.uiSchema?.['x-component'];
-  return map[fieldComponentName] || fieldComponentName;
-}

packages/core/client/src/modules/fields/__e2e__/component/Input.Preview/basic.test.ts

@@ -0,0 +1,77 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { expect, test } from '@nocobase/test/e2e';
+import { oneFormAndOneTable } from '../../templates';
+
+const img = 'https://static-docs.nocobase.com/logo-nocobase.png';
+
+test.describe('Input.Preview', () => {
+  test('switch to Input.Preview from Input.URL', async ({ page, mockPage }) => {
+    await mockPage(oneFormAndOneTable).goto();
+
+    // 1. 在表单中的 URL 字段中输入图片地址
+    await page.getByLabel('block-item-CollectionField-').getByRole('textbox').fill(img);
+
+    // 2. 将组建切换到 Input.Preview
+    await page.getByLabel('block-item-CollectionField-').hover();
+    await page.getByLabel('designer-schema-settings-CollectionField-fieldSettings:FormItem-general-general').hover();
+    await page.getByRole('menuitem', { name: 'Field component URL' }).click();
+    await page.getByRole('option', { name: 'Preview' }).click();
+
+    // 3. 图片正常显示
+    await expect(page.getByLabel('block-item-CollectionField-').getByRole('img').first()).toHaveAttribute('src', img);
+    await expect(page.getByLabel('block-item-CollectionField-').getByRole('img').first()).toHaveJSProperty('width', 24);
+
+    // 4. 切换图片大小到 Large，大小切换正常
+    await page.getByLabel('block-item-CollectionField-').hover();
+    await page.getByLabel('designer-schema-settings-CollectionField-fieldSettings:FormItem-general-general').hover();
+    await page.getByRole('menuitem', { name: 'Size Small' }).click();
+    await page.getByRole('option', { name: 'Large' }).click();
+    await expect(page.getByLabel('block-item-CollectionField-').getByRole('img').first()).toHaveJSProperty('width', 72);
+
+    // 5. 点击保存按钮，保存成功
+    await page.getByLabel('action-Action-Submit-submit-').click();
+
+    // 6. Table 区块中显示图片链接
+    await page.getByLabel('action-Action-Refresh-refresh').click();
+    await expect(page.getByLabel('block-item-CardItem-general-table').getByRole('link', { name: img })).toBeVisible();
+
+    // 7. 将 Table 中的单元格组建切换到 Input.Preview，应该正常显示图片
+    await page
+      .getByLabel('block-item-CardItem-general-table')
+      .getByRole('button', { name: 'url', exact: true })
+      .hover();
+    await page
+      .getByRole('button', { name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general' })
+      .hover();
+    await page.getByRole('menuitem', { name: 'Field component URL' }).click();
+    await page.getByRole('option', { name: 'Preview' }).click();
+    await expect(
+      page.getByLabel('block-item-CardItem-general-table').getByRole('cell').getByRole('img').first(),
+    ).toHaveAttribute('src', img);
+    await expect(
+      page.getByLabel('block-item-CardItem-general-table').getByRole('cell').getByRole('img').first(),
+    ).toHaveJSProperty('width', 24);
+
+    // 8. 切换图片大小到 Large，大小切换正常
+    await page
+      .getByLabel('block-item-CardItem-general-table')
+      .getByRole('button', { name: 'url', exact: true })
+      .hover();
+    await page
+      .getByRole('button', { name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general' })
+      .hover();
+    await page.getByRole('menuitem', { name: 'Size Small' }).click();
+    await page.getByRole('option', { name: 'Large' }).click();
+    await expect(
+      page.getByLabel('block-item-CardItem-general-table').getByRole('cell').getByRole('img').first(),
+    ).toHaveJSProperty('width', 72);
+  });
+});

packages/core/client/src/modules/fields/__e2e__/templates.ts

@@ -0,0 +1,380 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+// https://github.com/nocobase/nocobase/pull/4559
+export const oneFormAndOneTable = {
+  collections: [
+    {
+      name: 'general',
+      fields: [
+        {
+          interface: 'url',
+          name: 'url',
+        },
+      ],
+    },
+  ],
+  pageSchema: {
+    _isJSONSchemaObject: true,
+    version: '2.0',
+    type: 'void',
+    'x-component': 'Page',
+    'x-index': 1,
+    properties: {
+      '4nbajnebmlr': {
+        _isJSONSchemaObject: true,
+        version: '2.0',
+        type: 'void',
+        'x-component': 'Grid',
+        'x-initializer': 'page:addBlock',
+        'x-index': 1,
+        properties: {
+          cf8uh9g697n: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-app-version': '1.0.0-alpha.17',
+            'x-index': 1,
+            properties: {
+              '1japwy7nj0k': {
+                _isJSONSchemaObject: true,
+                version: '2.0',
+                type: 'void',
+                'x-component': 'Grid.Col',
+                'x-app-version': '1.0.0-alpha.17',
+                'x-index': 1,
+                properties: {
+                  ahp6bbaj61t: {
+                    _isJSONSchemaObject: true,
+                    version: '2.0',
+                    type: 'void',
+                    'x-acl-action-props': {
+                      skipScopeCheck: true,
+                    },
+                    'x-acl-action': 'general:create',
+                    'x-decorator': 'FormBlockProvider',
+                    'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
+                    'x-decorator-props': {
+                      dataSource: 'main',
+                      collection: 'general',
+                    },
+                    'x-toolbar': 'BlockSchemaToolbar',
+                    'x-settings': 'blockSettings:createForm',
+                    'x-component': 'CardItem',
+                    'x-app-version': '1.0.0-alpha.17',
+                    'x-index': 1,
+                    properties: {
+                      xgf2jpb0mwf: {
+                        _isJSONSchemaObject: true,
+                        version: '2.0',
+                        type: 'void',
+                        'x-component': 'FormV2',
+                        'x-use-component-props': 'useCreateFormBlockProps',
+                        'x-app-version': '1.0.0-alpha.17',
+                        'x-index': 1,
+                        properties: {
+                          grid: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            'x-component': 'Grid',
+                            'x-initializer': 'form:configureFields',
+                            'x-app-version': '1.0.0-alpha.17',
+                            'x-index': 1,
+                            properties: {
+                              yypv0ey12iv: {
+                                _isJSONSchemaObject: true,
+                                version: '2.0',
+                                type: 'void',
+                                'x-component': 'Grid.Row',
+                                'x-app-version': '1.0.0-alpha.17',
+                                'x-index': 1,
+                                properties: {
+                                  '1qgv0svx6i0': {
+                                    _isJSONSchemaObject: true,
+                                    version: '2.0',
+                                    type: 'void',
+                                    'x-component': 'Grid.Col',
+                                    'x-app-version': '1.0.0-alpha.17',
+                                    'x-index': 1,
+                                    properties: {
+                                      url: {
+                                        _isJSONSchemaObject: true,
+                                        version: '2.0',
+                                        type: 'string',
+                                        'x-toolbar': 'FormItemSchemaToolbar',
+                                        'x-settings': 'fieldSettings:FormItem',
+                                        'x-component': 'CollectionField',
+                                        'x-decorator': 'FormItem',
+                                        'x-collection-field': 'general.url',
+                                        'x-component-props': {
+                                          component: 'Input.URL',
+                                        },
+                                        'x-app-version': '1.0.0-alpha.17',
+                                        'x-index': 1,
+                                        'x-uid': '3d99xtkyxa7',
+                                        'x-async': false,
+                                      },
+                                    },
+                                    'x-uid': '4qa57usgxfr',
+                                    'x-async': false,
+                                  },
+                                },
+                                'x-uid': 'c4wm0124cvk',
+                                'x-async': false,
+                              },
+                            },
+                            'x-uid': 'heykz2e3s19',
+                            'x-async': false,
+                          },
+                          '0tquv59oojr': {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            'x-initializer': 'createForm:configureActions',
+                            'x-component': 'ActionBar',
+                            'x-component-props': {
+                              layout: 'one-column',
+                              style: {
+                                marginTop: 'var(--nb-spacing)',
+                              },
+                            },
+                            'x-app-version': '1.0.0-alpha.17',
+                            'x-index': 2,
+                            properties: {
+                              f8subamq3yq: {
+                                _isJSONSchemaObject: true,
+                                version: '2.0',
+                                title: '{{ t("Submit") }}',
+                                'x-action': 'submit',
+                                'x-component': 'Action',
+                                'x-use-component-props': 'useCreateActionProps',
+                                'x-toolbar': 'ActionSchemaToolbar',
+                                'x-settings': 'actionSettings:createSubmit',
+                                'x-component-props': {
+                                  type: 'primary',
+                                  htmlType: 'submit',
+                                },
+                                'x-action-settings': {
+                                  triggerWorkflows: [],
+                                },
+                                type: 'void',
+                                'x-app-version': '1.0.0-alpha.17',
+                                'x-index': 1,
+                                'x-uid': 'j1h5ugxq7nq',
+                                'x-async': false,
+                              },
+                            },
+                            'x-uid': '0r2mv62cvio',
+                            'x-async': false,
+                          },
+                        },
+                        'x-uid': 'em2t2fhaiw6',
+                        'x-async': false,
+                      },
+                    },
+                    'x-uid': 'tpwwr4b5p54',
+                    'x-async': false,
+                  },
+                },
+                'x-uid': 'aq7yxapodnw',
+                'x-async': false,
+              },
+            },
+            'x-uid': '1utnt4iy7th',
+            'x-async': false,
+          },
+          dqg82cp57e1: {
+            _isJSONSchemaObject: true,
+            version: '2.0',
+            type: 'void',
+            'x-component': 'Grid.Row',
+            'x-app-version': '1.0.0-alpha.17',
+            'x-index': 2,
+            properties: {
+              gqlczodkz2b: {
+                _isJSONSchemaObject: true,
+                version: '2.0',
+                type: 'void',
+                'x-component': 'Grid.Col',
+                'x-app-version': '1.0.0-alpha.17',
+                'x-index': 1,
+                properties: {
+                  dlrpbn2z0zb: {
+                    _isJSONSchemaObject: true,
+                    version: '2.0',
+                    type: 'void',
+                    'x-decorator': 'TableBlockProvider',
+                    'x-acl-action': 'general:list',
+                    'x-use-decorator-props': 'useTableBlockDecoratorProps',
+                    'x-decorator-props': {
+                      collection: 'general',
+                      dataSource: 'main',
+                      action: 'list',
+                      params: {
+                        pageSize: 20,
+                      },
+                      rowKey: 'id',
+                      showIndex: true,
+                      dragSort: false,
+                    },
+                    'x-toolbar': 'BlockSchemaToolbar',
+                    'x-settings': 'blockSettings:table',
+                    'x-component': 'CardItem',
+                    'x-filter-targets': [],
+                    'x-app-version': '1.0.0-alpha.17',
+                    'x-index': 1,
+                    properties: {
+                      actions: {
+                        _isJSONSchemaObject: true,
+                        version: '2.0',
+                        type: 'void',
+                        'x-initializer': 'table:configureActions',
+                        'x-component': 'ActionBar',
+                        'x-component-props': {
+                          style: {
+                            marginBottom: 'var(--nb-spacing)',
+                          },
+                        },
+                        'x-app-version': '1.0.0-alpha.17',
+                        'x-index': 1,
+                        properties: {
+                          h38nqwjf1zw: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            title: '{{ t("Refresh") }}',
+                            'x-action': 'refresh',
+                            'x-component': 'Action',
+                            'x-use-component-props': 'useRefreshActionProps',
+                            'x-toolbar': 'ActionSchemaToolbar',
+                            'x-settings': 'actionSettings:refresh',
+                            'x-component-props': {
+                              icon: 'ReloadOutlined',
+                            },
+                            'x-align': 'right',
+                            type: 'void',
+                            'x-app-version': '1.0.0-alpha.17',
+                            'x-uid': '3ym5qa392m0',
+                            'x-async': false,
+                            'x-index': 1,
+                          },
+                        },
+                        'x-uid': 'c6tw6pehj86',
+                        'x-async': false,
+                      },
+                      tvde4dndsqj: {
+                        _isJSONSchemaObject: true,
+                        version: '2.0',
+                        type: 'array',
+                        'x-initializer': 'table:configureColumns',
+                        'x-component': 'TableV2',
+                        'x-use-component-props': 'useTableBlockProps',
+                        'x-component-props': {
+                          rowKey: 'id',
+                          rowSelection: {
+                            type: 'checkbox',
+                          },
+                        },
+                        'x-app-version': '1.0.0-alpha.17',
+                        'x-index': 2,
+                        properties: {
+                          actions: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            title: '{{ t("Actions") }}',
+                            'x-action-column': 'actions',
+                            'x-decorator': 'TableV2.Column.ActionBar',
+                            'x-component': 'TableV2.Column',
+                            'x-toolbar': 'TableColumnSchemaToolbar',
+                            'x-initializer': 'table:configureItemActions',
+                            'x-settings': 'fieldSettings:TableColumn',
+                            'x-toolbar-props': {
+                              initializer: 'table:configureItemActions',
+                            },
+                            'x-app-version': '1.0.0-alpha.17',
+                            'x-index': 1,
+                            properties: {
+                              wptjn8efkdq: {
+                                _isJSONSchemaObject: true,
+                                version: '2.0',
+                                type: 'void',
+                                'x-decorator': 'DndContext',
+                                'x-component': 'Space',
+                                'x-component-props': {
+                                  split: '|',
+                                },
+                                'x-app-version': '1.0.0-alpha.17',
+                                'x-index': 1,
+                                'x-uid': 'x89784q83t2',
+                                'x-async': false,
+                              },
+                            },
+                            'x-uid': '1yzn9sblzep',
+                            'x-async': false,
+                          },
+                          raxcojsopou: {
+                            _isJSONSchemaObject: true,
+                            version: '2.0',
+                            type: 'void',
+                            'x-decorator': 'TableV2.Column.Decorator',
+                            'x-toolbar': 'TableColumnSchemaToolbar',
+                            'x-settings': 'fieldSettings:TableColumn',
+                            'x-component': 'TableV2.Column',
+                            'x-app-version': '1.0.0-alpha.17',
+                            'x-index': 2,
+                            properties: {
+                              url: {
+                                _isJSONSchemaObject: true,
+                                version: '2.0',
+                                'x-collection-field': 'general.url',
+                                'x-component': 'CollectionField',
+                                'x-component-props': {},
+                                'x-read-pretty': true,
+                                'x-decorator': null,
+                                'x-decorator-props': {
+                                  labelStyle: {
+                                    display: 'none',
+                                  },
+                                },
+                                'x-app-version': '1.0.0-alpha.17',
+                                'x-index': 1,
+                                'x-uid': 'qni0na740t1',
+                                'x-async': false,
+                              },
+                            },
+                            'x-uid': '5lq7abdz67x',
+                            'x-async': false,
+                          },
+                        },
+                        'x-uid': 'zc0cntdtdr4',
+                        'x-async': false,
+                      },
+                    },
+                    'x-uid': 'hbmp3k5e1i3',
+                    'x-async': false,
+                  },
+                },
+                'x-uid': 'jbxa0cnjm1w',
+                'x-async': false,
+              },
+            },
+            'x-uid': 'yqvfdsci5v8',
+            'x-async': false,
+          },
+        },
+        'x-uid': 'a1iy1sw0sus',
+        'x-async': false,
+      },
+    },
+    'x-uid': 'v3zv08v0hwn',
+    'x-async': true,
+  },
+};

packages/core/client/src/modules/fields/component/Input.Preview/settings.ts

@@ -0,0 +1,56 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Field } from '@formily/core';
+import { useField, useFieldSchema } from '@formily/react';
+import { useTranslation } from 'react-i18next';
+import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
+import { useColumnSchema, useDesignable } from '../../../../schema-component';
+import { fieldComponent } from '../Input.URL/settings';
+
+const size = {
+  name: 'size',
+  type: 'select',
+  useComponentProps() {
+    const { t } = useTranslation();
+    const field = useField<Field>();
+    const schema = useFieldSchema();
+    const { fieldSchema: tableColumnSchema } = useColumnSchema();
+    const fieldSchema = tableColumnSchema || schema;
+    const { dn } = useDesignable();
+    return {
+      title: t('Size'),
+      options: [
+        { value: 'small', label: 'Small' },
+        { value: 'middle', label: 'Middle' },
+        { value: 'large', label: 'Large' },
+        { value: 'auto', label: 'Auto' },
+      ],
+      value: fieldSchema['x-component-props']?.['size'] || 'small',
+      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,
+        });
+      },
+    };
+  },
+};
+
+export const inputPreviewComponentFieldSettings = new SchemaSettings({
+  name: 'fieldSettings:component:Input.Preview',
+  items: [fieldComponent, size],
+});

packages/core/client/src/modules/fields/component/Input.URL/settings.ts

@@ -0,0 +1,51 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Field } from '@formily/core';
+import { useField, useFieldSchema } from '@formily/react';
+import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
+import { useColumnSchema, useDesignable } from '../../../../schema-component';
+
+export const fieldComponent: any = {
+  name: 'fieldComponent',
+  type: 'select',
+  useComponentProps() {
+    const { t } = useTranslation();
+    const field = useField<Field>();
+    const schema = useFieldSchema();
+    const { fieldSchema: tableColumnSchema } = useColumnSchema();
+    const fieldSchema = tableColumnSchema || schema;
+    const { dn } = useDesignable();
+    return {
+      title: t('Field component'),
+      options: [
+        { value: 'Input.URL', label: 'URL' },
+        { value: 'Input.Preview', label: 'Preview' },
+      ],
+      value: fieldSchema['x-component-props']?.['component'] || 'Input.URL',
+      onChange(component) {
+        _.set(fieldSchema, 'x-component-props.component', component);
+        field.componentProps.component = component;
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-component-props': fieldSchema['x-component-props'],
+          },
+        });
+      },
+    };
+  },
+};
+
+export const inputURLComponentFieldSettings = new SchemaSettings({
+  name: 'fieldSettings:component:Input.URL',
+  items: [fieldComponent],
+});

packages/core/client/src/schema-component/antd/input/Input.tsx

@@ -13,7 +13,7 @@ import { Input as AntdInput } from 'antd';
 import { InputProps, TextAreaProps } from 'antd/es/input';
 import React from 'react';
 import { JSONTextAreaProps, Json } from './Json';
-import { ReadPretty, InputReadPrettyComposed } from './ReadPretty';
+import { InputReadPrettyComposed, ReadPretty } from './ReadPretty';
 
 export { ReadPretty as InputReadPretty } from './ReadPretty';
 
@@ -52,6 +52,7 @@ export const Input: ComposedInput = Object.assign(
     URL: connect(AntdInput, mapReadPretty(ReadPretty.URL)),
     JSON: connect(Json, mapReadPretty(ReadPretty.JSON)),
     ReadPretty: ReadPretty.Input,
+    Preview: ReadPretty.Preview,
   } as unknown as ComposedInput,
 );
 

packages/core/client/src/schema-component/antd/input/ReadPretty.tsx

@@ -9,16 +9,18 @@
 
 import { css, cx } from '@emotion/css';
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
-import { Typography } from 'antd';
+import { useFieldSchema } from '@formily/react';
+import { Image, Typography } from 'antd';
 import cls from 'classnames';
 import React from 'react';
+import { useCompile } from '../../hooks';
 import { EllipsisWithTooltip } from './EllipsisWithTooltip';
 import { HTMLEncode } from './shared';
-import { useCompile } from '../../hooks';
 
 export type InputReadPrettyComposed = {
   Input: React.FC<InputReadPrettyProps>;
   URL: React.FC<URLReadPrettyProps>;
+  Preview: React.FC<URLReadPrettyProps>;
   TextArea: React.FC<TextAreaReadPrettyProps>;
   Html: React.FC<HtmlReadPrettyProps>;
   JSON: React.FC<JSONTextAreaReadPrettyProps>;
@@ -186,6 +188,33 @@ ReadPretty.URL = (props) => {
   );
 };
 
+ReadPretty.Preview = function Preview(props: any) {
+  const fieldSchema = useFieldSchema();
+  const size = fieldSchema['x-component-props']?.['size'] || 'small';
+  if (!props.value) {
+    return props.value;
+  }
+  const sizes = {
+    small: 24,
+    middle: 48,
+    large: 72,
+  };
+  return (
+    <Image
+      style={
+        ['small', 'middle', 'large'].includes(size)
+          ? {
+              width: sizes[size],
+              height: sizes[size],
+              objectFit: 'cover',
+            }
+          : {}
+      }
+      src={props.value}
+    />
+  );
+};
+
 export interface JSONTextAreaReadPrettyProps {
   value?: any;
   className?: string;

packages/core/client/src/schema-settings/SchemaSettingsPlugin.ts

@@ -16,13 +16,13 @@ import { deleteActionSettings } from '../modules/actions/delete/deleteActionSett
 import { disassociateActionSettings } from '../modules/actions/disassociate/disassociateActionSettings';
 import { expendableActionSettings } from '../modules/actions/expand-collapse/expendableActionSettings';
 import { filterActionSettings } from '../modules/actions/filter/filterActionSettings';
+import { customizeLinkActionSettings } from '../modules/actions/link/customizeLinkActionSettings';
 import { refreshActionSettings } from '../modules/actions/refresh/refreshActionSettings';
 import { customizeSaveRecordActionSettings } from '../modules/actions/save-record/customizeSaveRecordActionSettings';
 import { createSubmitActionSettings } from '../modules/actions/submit/createSubmitActionSettings';
 import { submitActionSettings, updateSubmitActionSettings } from '../modules/actions/submit/updateSubmitActionSettings';
 import { customizeUpdateRecordActionSettings } from '../modules/actions/update-record/customizeUpdateRecordActionSettings';
 import { customizePopupActionSettings } from '../modules/actions/view-edit-popup/customizePopupActionSettings';
-import { customizeLinkActionSettings } from '../modules/actions/link/customizeLinkActionSettings';
 
 import { editActionSettings } from '../modules/actions/view-edit-popup/editActionSettings';
 import { viewActionSettings } from '../modules/actions/view-edit-popup/viewActionSettings';
@@ -52,6 +52,8 @@ import { datePickerComponentFieldSettings } from '../modules/fields/component/Da
 import { fileManagerComponentFieldSettings } from '../modules/fields/component/FileManager/fileManagerComponentFieldSettings';
 import { previewComponentFieldSettings } from '../modules/fields/component/FileManager/previewComponentFieldSettings';
 import { uploadAttachmentComponentFieldSettings } from '../modules/fields/component/FileManager/uploadAttachmentComponentFieldSettings';
+import { inputPreviewComponentFieldSettings } from '../modules/fields/component/Input.Preview/settings';
+import { inputURLComponentFieldSettings } from '../modules/fields/component/Input.URL/settings';
 import { inputNumberComponentFieldSettings } from '../modules/fields/component/InputNumber/inputNumberComponentFieldSettings';
 import { subformComponentFieldSettings } from '../modules/fields/component/Nester/subformComponentFieldSettings';
 import { recordPickerComponentFieldSettings } from '../modules/fields/component/Picker/recordPickerComponentFieldSettings';
@@ -117,6 +119,8 @@ export class SchemaSettingsPlugin extends Plugin {
     this.schemaSettingsManager.add(fileManagerComponentFieldSettings);
     this.schemaSettingsManager.add(tagComponentFieldSettings);
     this.schemaSettingsManager.add(cascadeSelectComponentFieldSettings);
+    this.schemaSettingsManager.add(inputPreviewComponentFieldSettings);
+    this.schemaSettingsManager.add(inputURLComponentFieldSettings);
     this.schemaSettingsManager.add(uploadAttachmentComponentFieldSettings);
     this.schemaSettingsManager.add(previewComponentFieldSettings);
   }