refactor: support attachmentURL (#5313)

* refactor: support  attachmentURL

* refactor: support attachment field

* fix: bug

* refactor: attachment url field

* fix: bug

* fix: bug

* fix: merge bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: kanban appends

* fix: action export

* fix: action import

* fix: test

* fix: bug

* fix(client): fix file type check logic

* fix(client): fix image previewer by file type

* fix(client): fix null file type caused error in matching

* fix(client): fix thumbnail data

* refactor: datetime

* test: fix test

* fix(client): fix preview based on file type when url contains search part

* refactor: remote select

* fix: test

* fix: bug

---------

Co-authored-by: mytharcher <mytharcher@gmail.com>

packages/core/client/package.json

@@ -49,6 +49,7 @@
     "markdown-it-highlightjs": "3.3.1",
     "mathjs": "^10.6.0",
     "mermaid": "9.4.3",
+    "mime": "^4.0.4",
     "mime-match": "^1.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-drag-listview": "^0.1.9",

packages/core/client/src/filter-provider/__tests__/utiles.test.ts

@@ -166,9 +166,9 @@ describe('transformToFilter', () => {
   const getCollectionJoinField = vi.fn((name: string) => {
     if (name === `${collectionName}.field1`) return {};
     if (name === `${collectionName}.field2`) return {};
-    if (name === `${collectionName}.field3`) return { target: 'targetCollection', targetKey: 'id' };
+    if (name === `${collectionName}.field3`) return { target: 'targetCollection', targetKey: 'id', type: 'belongsTo' };
     if (name === `${collectionName}.chinaRegion`)
-      return { target: 'chinaRegions', targetKey: 'code', interface: 'chinaRegion' };
+      return { target: 'chinaRegions', targetKey: 'code', interface: 'chinaRegion', type: 'belongsToMany' };
     return {};
   });
 

packages/core/client/src/filter-provider/utils.ts

@@ -139,7 +139,10 @@ export const transformToFilter = (
         let value = _.get(values, key);
         const collectionField = getCollectionJoinField(`${collectionName}.${key}`);
 
-        if (collectionField?.target) {
+        if (
+          collectionField?.target &&
+          ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany', 'belongsToArray'].includes(collectionField.type)
+        ) {
           value = getValuesByPath(value, collectionField.targetKey || 'id');
           key = `${key}.${collectionField.targetKey || 'id'}`;
 

packages/core/client/src/schema-component/antd/association-field/FileManager.tsx

@@ -82,14 +82,13 @@ const useTableSelectorProps = () => {
 };
 
 function FileSelector(props) {
-  const { disabled, multiple, value, onChange, action, onSelect, quickUpload, selectFile } = props;
+  const { disabled, multiple, value, onChange, action, onSelect, quickUpload, selectFile, ...other } = props;
   const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
   const { useFileCollectionStorageRules } = useExpressionScope();
   const { t } = useTranslation();
   const rules = useFileCollectionStorageRules();
   // 兼容旧版本
   const showSelectButton = selectFile === undefined && quickUpload === undefined;
-
   return wrapSSR(
     <div className={cls(`${prefixCls}-wrapper`, `${prefixCls}-picture-card-wrapper`, 'nb-upload', hashId)}>
       <div className={cls(`${prefixCls}-list`, `${prefixCls}-list-picture-card`)}>
@@ -122,6 +121,8 @@ function FileSelector(props) {
             onChange={onChange}
             action={action}
             rules={rules}
+            disabled={disabled}
+            {...other}
           />
         ) : null}
         {selectFile && (multiple || !value) ? (
@@ -216,6 +217,7 @@ const InternalFileManager = (props) => {
   return (
     <div style={{ width: '100%', overflow: 'auto' }}>
       <FileSelector
+        {...others}
         value={multiple ? options : options?.[0]}
         multiple={multiple}
         quickUpload={fieldSchema['x-component-props']?.quickUpload !== false}
@@ -268,4 +270,4 @@ const FileManageReadPretty = connect((props) => {
   );
 });
 
-export { FileManageReadPretty, InternalFileManager };
+export { FileManageReadPretty, InternalFileManager, FileSelector };

packages/core/client/src/schema-component/antd/association-field/index.ts

@@ -14,7 +14,7 @@ import { InternalPicker } from './InternalPicker';
 import { Nester } from './Nester';
 import { ReadPretty } from './ReadPretty';
 import { SubTable } from './SubTable';
-
+import { FileSelector } from './FileManager';
 export {
   AssociationFieldMode,
   AssociationFieldModeProvider,
@@ -29,3 +29,4 @@ AssociationField.Selector = Action.Container;
 AssociationField.Viewer = Action.Container;
 AssociationField.InternalSelect = InternalPicker;
 AssociationField.ReadPretty = ReadPretty;
+AssociationField.FileSelector = FileSelector;

packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx

@@ -21,6 +21,7 @@ import { FieldNames, Select, SelectProps, defaultFieldNames } from '../select';
 import { ReadPretty } from './ReadPretty';
 import { useDataSourceHeaders } from '../../../data-source/utils';
 import { useDataSourceKey } from '../../../data-source/data-source/DataSourceProvider';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 const EMPTY = 'N/A';
 
 export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
@@ -44,9 +45,11 @@ export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
   dataSource?: string;
   CustomDropdownRender?: (v: any) => any;
   optionFilter?: (option: any) => boolean;
+  toOptionsItem?: (data) => any;
 };
 
-const InternalRemoteSelect = connect(
+const InternalRemoteSelect = withDynamicSchemaProps(
+  connect(
     (props: RemoteSelectProps) => {
       const {
         fieldNames = {} as FieldNames,
@@ -61,6 +64,7 @@ const InternalRemoteSelect = connect(
         CustomDropdownRender,
         optionFilter,
         dataSource: propsDataSource,
+        toOptionsItem = (value) => value,
         ...others
       } = props;
       const dataSource = useDataSourceKey();
@@ -248,7 +252,7 @@ const InternalRemoteSelect = connect(
           defaultValue={defaultValue}
           {...others}
           loading={data! ? loading : true}
-        options={mapOptionsToTags(options)}
+          options={toOptionsItem(mapOptionsToTags(options))}
           rawOptions={options}
           dropdownRender={(menu) => {
             const isFullMatch = options.some((v) => v[fieldNames.label] === searchData.current);
@@ -288,6 +292,7 @@ const InternalRemoteSelect = connect(
       },
     ),
     mapReadPretty(ReadPretty),
+  ),
 );
 
 export const RemoteSelect = InternalRemoteSelect as unknown as typeof InternalRemoteSelect & {

packages/core/client/src/schema-component/antd/upload/Upload.tsx

@@ -18,7 +18,6 @@ import filesize from 'filesize';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import LightBox from 'react-image-lightbox';
-import match from 'mime-match';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { useProps } from '../../hooks/useProps';
@@ -26,9 +25,10 @@ import {
   FILE_SIZE_LIMIT_DEFAULT,
   attachmentFileTypes,
   getThumbnailPlaceholderURL,
+  matchMimetype,
   normalizeFile,
   toFileList,
-  toValueItem,
+  toValueItem as toValueItemDefault,
   useBeforeUpload,
   useUploadProps,
 } from './shared';
@@ -37,7 +37,7 @@ import type { ComposedUpload, DraggerProps, DraggerV2Props, UploadProps } from '
 
 attachmentFileTypes.add({
   match(file) {
-    return match(file.mimetype || file.type, 'image/*');
+    return matchMimetype(file, 'image/*');
   },
   getThumbnailURL(file) {
     return file.url ? `${file.url}${file.thumbnailRule || ''}` : URL.createObjectURL(file.originFileObj);
@@ -136,7 +136,7 @@ function IframePreviewer({ index, list, onSwitchIndex }) {
           overflowY: 'auto',
         }}
       >
-        {iframePreviewSupportedTypes.some((type) => match(file.mimetype || file.extname, type)) ? (
+        {iframePreviewSupportedTypes.some((type) => matchMimetype(file, type)) ? (
           <iframe
             src={file.url}
             style={{
@@ -174,7 +174,6 @@ function ReadPretty({ value, onChange, disabled, multiple, size }: UploadProps)
   const useUploadStyleVal = (useUploadStyle as any).default ? (useUploadStyle as any).default : useUploadStyle;
   // 加载 antd 的样式
   useUploadStyleVal(prefixCls);
-
   return wrapSSR(
     <div
       className={cls(
@@ -245,12 +244,12 @@ function AttachmentListItem(props) {
       {file.status === 'uploading' ? t('Uploading') : file.title}
     </span>,
   ];
-  const wrappedItem = file.id ? (
+  const wrappedItem = file.url ? (
     <a target="_blank" rel="noopener noreferrer" href={file.url} onClick={handleClick}>
       {item}
     </a>
   ) : (
-    <span className={`${prefixCls}-span`}>{item}</span>
+    <span className={`${prefixCls}-span`}>{item}3</span>
   );
 
   const content = (
@@ -264,7 +263,7 @@ function AttachmentListItem(props) {
       <div className={`${prefixCls}-list-item-info`}>{wrappedItem}</div>
       <span className={`${prefixCls}-list-item-actions`}>
         <Space size={3}>
-          {!readPretty && file.id && (
+          {!readPretty && file.url && (
             <Button size={'small'} type={'text'} icon={<DownloadOutlined />} onClick={onDownload} />
           )}
           {!readPretty && !disabled && file.status !== 'uploading' && (
@@ -299,7 +298,6 @@ function Previewer({ index, onSwitchIndex, list }) {
   }
   const file = list[index];
   const { Previewer: Component = IframePreviewer } = attachmentFileTypes.getTypeByFile(file) ?? {};
-
   return <Component index={index} list={list} onSwitchIndex={onSwitchIndex} />;
 }
 
@@ -331,12 +329,11 @@ export function AttachmentList(props) {
     },
     [multiple, onChange, value],
   );
-
   return (
     <>
       {fileList.map((file, index) => (
         <AttachmentListItem
-          key={file.id}
+          key={file.id || file.url}
           file={file}
           index={index}
           disabled={disabled}
@@ -351,7 +348,7 @@ export function AttachmentList(props) {
 }
 
 export function Uploader({ rules, ...props }: UploadProps) {
-  const { disabled, multiple, value, onChange } = props;
+  const { disabled, multiple, value, onChange, toValueItem = toValueItemDefault } = props;
   const [pendingList, setPendingList] = useState<any[]>([]);
   const { t } = useTranslation();
   const { componentCls: prefixCls } = useStyles();
@@ -378,7 +375,7 @@ export function Uploader({ rules, ...props }: UploadProps) {
       if (multiple) {
         const uploadedList = info.fileList.filter((file) => file.status === 'done');
         if (uploadedList.length) {
-          const valueList = [...(value ?? []), ...uploadedList.map(toValueItem)];
+          const valueList = [...(value ?? []), ...uploadedList.map((v) => toValueItem(v.response?.data))];
           onChange?.(valueList);
         }
         setPendingList(info.fileList.filter((file) => file.status !== 'done').map(normalizeFile));
@@ -386,7 +383,7 @@ export function Uploader({ rules, ...props }: UploadProps) {
         // NOTE: 用 fileList 里的才有附加的验证状态信息，file 没有（不清楚为何）
         const file = info.fileList.find((f) => f.uid === info.file.uid);
         if (file.status === 'done') {
-          onChange?.(toValueItem(file));
+          onChange?.(toValueItem(file.response?.data));
           setPendingList([]);
         } else {
           setPendingList([normalizeFile(file)]);
@@ -408,7 +405,6 @@ export function Uploader({ rules, ...props }: UploadProps) {
   const sizeHint = useSizeHint(size);
   const selectable =
     !disabled && (multiple || ((!value || (Array.isArray(value) && !value.length)) && !pendingList.length));
-
   return (
     <>
       {pendingList.map((file, index) => (
@@ -451,7 +447,6 @@ export function Uploader({ rules, ...props }: UploadProps) {
 
 function Attachment(props: UploadProps) {
   const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
-
   return wrapSSR(
     <div className={cls(`${prefixCls}-wrapper`, `${prefixCls}-picture-card-wrapper`, 'nb-upload', hashId)}>
       <div className={cls(`${prefixCls}-list`, `${prefixCls}-list-picture-card`)}>

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

@@ -10,6 +10,7 @@
 import { isArr, isValid, toArr as toArray } from '@formily/shared';
 import { UploadFile } from 'antd/es/upload/interface';
 import { useTranslation } from 'react-i18next';
+import mime from 'mime';
 import match from 'mime-match';
 import React, { useCallback } from 'react';
 import { useAPIClient } from '../../../api-client';
@@ -58,6 +59,17 @@ export class AttachmentFileTypes {
  */
 export const attachmentFileTypes = new AttachmentFileTypes();
 
+export function matchMimetype(file: FileModel, type: string) {
+  if (file.mimetype) {
+    return match(file.mimetype, type);
+  }
+  if (file.url) {
+    const [fileUrl] = file.url.split('?');
+    return match(mime.getType(fileUrl) || '', type);
+  }
+  return false;
+}
+
 const toArr = (value) => {
   if (!isValid(value)) {
     return [];
@@ -81,6 +93,9 @@ const testOpts = (ext: RegExp, options: { exclude?: string[]; include?: string[]
 };
 
 export function getThumbnailPlaceholderURL(file, options: any = {}) {
+  if (file.url) {
+    return file.url;
+  }
   for (let i = 0; i < UPLOAD_PLACEHOLDER.length; i++) {
     // console.log(UPLOAD_PLACEHOLDER[i].ext, testOpts(UPLOAD_PLACEHOLDER[i].ext, options));
     if (UPLOAD_PLACEHOLDER[i].ext.test(file.extname || file.filename || file.url || file.name)) {
@@ -166,11 +181,16 @@ export function useUploadProps<T extends IUploadProps = UploadProps>(props: T) {
   };
 }
 
-export function toValueItem(file) {
+export function toValueItem(data) {
-  return file.response?.data;
+  return data;
 }
 
 export const toItem = (file) => {
+  if (typeof file === 'string') {
+    return {
+      url: file,
+    };
+  }
   if (file?.response?.data) {
     file = {
       uid: file.uid,

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

@@ -19,6 +19,7 @@ export type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
   value?: any;
   size?: string;
   rules?: PropsRules;
+  toValueItem?: function;
 };
 
 export type DraggerProps = Omit<AntdDraggerProps, 'onChange'> & {

packages/core/client/src/schema-component/hooks/useFieldModeOptions.tsx

@@ -32,7 +32,7 @@ export const useFieldModeOptions = (props?) => {
       return;
     }
     if (
-      !['o2o', 'oho', 'obo', 'o2m', 'linkTo', 'm2o', 'm2m', 'updatedBy', 'createdBy', 'mbm'].includes(
+      !['o2o', 'oho', 'obo', 'o2m', 'linkTo', 'm2o', 'm2m', 'updatedBy', 'createdBy', 'mbm', 'attachmentURL'].includes(
         collectionField.interface,
       )
     )

packages/core/client/src/schema-initializer/utils.ts

@@ -510,6 +510,7 @@ export const useAssociatedFormItemInitializerFields = (options?: any) => {
   const { t } = useTranslation();
   const { readPretty = form.readPretty, block = 'Form' } = options || {};
   const interfaces = block === 'Form' ? ['m2o'] : ['o2o', 'oho', 'obo', 'm2o'];
+
   const groups = fields
     ?.filter((field) => {
       return interfaces.includes(field.interface);
@@ -592,8 +593,9 @@ const associationFieldToMenu = (
 export const useFilterAssociatedFormItemInitializerFields = () => {
   const { name, fields } = useCollection_deprecated();
   const { getCollectionFields } = useCollectionManager_deprecated();
+  const interfaces = ['o2o', 'oho', 'obo', 'm2o', 'm2m'];
   return fields
-    ?.filter((field) => field.target && field.uiSchema)
+    ?.filter((field) => field.target && field.uiSchema && interfaces.includes(field.interface))
     .map((field) => associationFieldToMenu(field, field.name, name, getCollectionFields, []))
     .filter(Boolean);
 };

packages/plugins/@nocobase/plugin-action-export/src/client/useFields.ts

@@ -28,7 +28,7 @@ export const useFields = (collectionName: string) => {
       return option;
     }
 
-    if (field.target) {
+    if (field.target && ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany', 'belongsToArray'].includes(field.type)) {
       const targetFields = getCollectionFields(field.target);
       const options = getOptions(targetFields, depth + 1).filter(Boolean);
       option['children'] = option['children'] || [];

packages/plugins/@nocobase/plugin-action-import/src/client/useFields.ts

@@ -39,7 +39,7 @@ export const useFields = (collectionName: string) => {
       return option;
     }
 
-    if (field.target) {
+    if (field.target && ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany', 'belongsToArray'].includes(field.type)) {
       const targetFields = getCollectionFields(field.target);
       const options = getOptions(targetFields, depth + 1).filter(Boolean);
       option['children'] = option['children'] || [];

packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx

@@ -8,14 +8,12 @@
  */
 
 import { ArrayField } from '@formily/core';
-import { Schema, useField, useFieldSchema } from '@formily/react';
+import { useField } from '@formily/react';
 import { Spin } from 'antd';
-import uniq from 'lodash/uniq';
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import {
   useACLRoleContext,
   useCollection_deprecated,
-  useCollectionManager_deprecated,
   FixedBlockWrapper,
   BlockProvider,
   useBlockRequestContext,
@@ -70,60 +68,8 @@ const InternalKanbanBlockProvider = (props) => {
   );
 };
 
-const recursiveProperties = (schema: Schema, component = 'CollectionField', associationFields, appends: any = []) => {
-  schema.mapProperties((s: any) => {
-    const name = s.name.toString();
-    if (s['x-component'] === component && !appends.includes(name)) {
-      // 关联字段和关联的关联字段
-      const [firstName] = name.split('.');
-      if (associationFields.has(name)) {
-        appends.push(name);
-      } else if (associationFields.has(firstName) && !appends.includes(firstName)) {
-        appends.push(firstName);
-      }
-    } else {
-      recursiveProperties(s, component, associationFields, appends);
-    }
-  });
-};
-
-const useAssociationNames = (collection) => {
-  const { getCollectionFields } = useCollectionManager_deprecated(collection.dataSource);
-  const collectionFields = getCollectionFields(collection);
-  const associationFields = new Set();
-  for (const collectionField of collectionFields) {
-    if (collectionField.target) {
-      associationFields.add(collectionField.name);
-      const fields = getCollectionFields(collectionField.target);
-      for (const field of fields) {
-        if (field.target) {
-          associationFields.add(`${collectionField.name}.${field.name}`);
-        }
-      }
-    }
-  }
-  const fieldSchema = useFieldSchema();
-  const kanbanSchema = fieldSchema.reduceProperties((buf, schema) => {
-    if (schema['x-component'].startsWith('Kanban')) {
-      return schema;
-    }
-    return buf;
-  }, new Schema({}));
-  const gridSchema: any = kanbanSchema?.properties?.card?.properties?.grid;
-  const appends = [];
-  if (gridSchema) {
-    recursiveProperties(gridSchema, 'CollectionField', associationFields, appends);
-  }
-
-  return uniq(appends);
-};
-
 export const KanbanBlockProvider = (props) => {
   const params = { ...props.params };
-  const appends = useAssociationNames(props.association || props.collection);
-  if (!Object.keys(params).includes('appends')) {
-    params['appends'] = appends;
-  }
   return (
     <BlockProvider name="kanban" {...props} params={params}>
       <InternalKanbanBlockProvider {...props} params={params} />