feat(plugin-fm): make rules configurable

.github/workflows/deploy-client-docs.yml

@@ -16,6 +16,7 @@ on:
  branches:
  - '**'
  paths:
+ - 'packages/core/client/**'
  - 'packages/core/client/docs/**'
  - '.github/workflows/deploy-client-docs.yml'
 

packages/core/client/.dumirc.ts

@@ -398,10 +398,6 @@ export default defineConfig({
  "title": "Pagination",
  "link": "/components/pagination"
  },
- {
- "title": "Preview",
- "link": "/components/preview"
- },
  ]
  },
  ]

packages/core/client/package.json

@@ -37,6 +37,7 @@
  "classnames": "^2.3.1",
  "cronstrue": "^2.11.0",
  "file-saver": "^2.0.5",
+ "filesize": "9.0.11",
  "flat": "^5.0.2",
  "i18next": "^22.4.9",
  "i18next-http-backend": "^2.1.1",

packages/core/client/src/locale/zh-CN.json

@@ -795,8 +795,13 @@
  "Render Failed": "渲染失败",
  "Feedback": "反馈问题",
  "Try again": "重试一下",
+ "Download": "下载",
  "Click or drag file to this area to upload": "点击或拖拽文件到此区域上传",
- "Support for a single or bulk upload, file size should not exceed": "支持单个或批量上传，文件大小不能超过",
+ "Support for a single or bulk upload.": "支持单个或批量上传",
+ "File size should not exceed {{size}}.": "文件大小不能超过 {{size}}",
+ "File size exceeds the limit": "文件大小超过限制",
+ "File type is not allowed": "文件类型不允许",
+ "Incomplete uploading files need to be resolved": "未完成上传的文件需要处理",
  "Default title for each record": "用作数据的默认标题",
  "If collection inherits, choose inherited collections as templates": "当前表有继承关系时，可选择继承链路上的表作为模板来源",
  "Select an existing piece of data as the initialization data for the form": "选择一条已有的数据作为表单的初始化数据",

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

@@ -7,15 +7,20 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { RecursionField, connect, useField, useFieldSchema } from '@formily/react';
+import { RecursionField, connect, useExpressionScope, useField, useFieldSchema } from '@formily/react';
 import { differenceBy, unionBy } from 'lodash';
+import cls from 'classnames';
 import React, { useContext, useEffect, useState } from 'react';
+import { Upload as AntdUpload } from 'antd';
 import {
+ AttachmentList,
  FormProvider,
  RecordPickerContext,
  RecordPickerProvider,
  SchemaComponentOptions,
+ Uploader,
  useActionContext,
+ useSchemaOptionsContext,
 } from '../..';
 import {
  TableSelectorParamsProvider,
@@ -29,11 +34,13 @@ import {
 import { useCompile } from '../../hooks';
 import { ActionContextProvider } from '../action';
 import { EllipsisWithTooltip } from '../input';
-import { FileSelector, Preview } from '../preview';
-import { ReadPrettyInternalViewer } from './InternalViewer';
+import { Upload } from '../upload';
 import { useFieldNames, useInsertSchema } from './hooks';
 import schema from './schema';
-import { flatData, getLabelFormatValue, isShowFilePicker, useLabelUiSchema } from './util';
+import { flatData, getLabelFormatValue, useLabelUiSchema } from './util';
+import { useTranslation } from 'react-i18next';
+import { PlusOutlined } from '@ant-design/icons';
+import { useStyles } from '../upload/style';
 
 const useTableSelectorProps = () => {
  const field: any = useField();
@@ -73,6 +80,75 @@ const useTableSelectorProps = () => {
  },
  };
 };
+
+function FileSelector(props) {
+ const { disabled, multiple, value, onChange, action, onSelect, quickUpload, selectFile } = 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`)}>
+ <AttachmentList disabled={disabled} multiple={multiple} value={value} onChange={onChange} />
+ {showSelectButton ? (
+ <div className={cls(`${prefixCls}-list-picture-card-container`, `${prefixCls}-list-item-container`)}>
+ <AntdUpload disabled={disabled} multiple={multiple} listType={'picture-card'} showUploadList={false}>
+ <div
+ style={{
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ onClick={onSelect}
+ >
+ <PlusOutlined />
+ {t('Select')}
+ </div>
+ </AntdUpload>
+ </div>
+ ) : null}
+ {quickUpload ? (
+ <Uploader
+ value={value}
+ multiple={multiple}
+ // onRemove={handleRemove}
+ onChange={onChange}
+ action={action}
+ rules={rules}
+ />
+ ) : null}
+ {selectFile && (multiple || !value) ? (
+ <div className={cls(`${prefixCls}-list-picture-card-container`, `${prefixCls}-list-item-container`)}>
+ <AntdUpload disabled={disabled} multiple={multiple} listType={'picture-card'} showUploadList={false}>
+ <div
+ style={{
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ onClick={onSelect}
+ >
+ <PlusOutlined />
+ {t('Select')}
+ </div>
+ </AntdUpload>
+ </div>
+ ) : null}
+ </div>
+ </div>,
+ );
+}
+
 const InternalFileManager = (props) => {
  const { value, multiple, onChange, ...others } = props;
  const fieldSchema = useFieldSchema();
@@ -87,13 +163,9 @@ const InternalFileManager = (props) => {
  const labelUiSchema = useLabelUiSchema(collectionField?.target, fieldNames?.label || 'label');
  const compile = useCompile();
  const { modalProps } = useActionContext();
- const getFilter = () => {
- const targetKey = collectionField?.targetKey || 'id';
- const list = options.map((option) => option[targetKey]).filter(Boolean);
- const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {};
- return filter;
- };
- const handleSelect = () => {
+ const handleSelect = (ev) => {
+ ev.stopPropagation();
+ ev.preventDefault();
  insertSelector(schema.Selector);
  setVisibleSelector(true);
  setSelectedRows([]);
@@ -114,14 +186,6 @@ const InternalFileManager = (props) => {
  }
  }, [value, fieldNames?.label]);
 
- const handleRemove = (file) => {
- const newOptions = options.filter((option) => option.id !== file.id);
- setOptions(newOptions);
- if (newOptions.length === 0) {
- return onChange(null);
- }
- onChange(newOptions);
- };
  const pickerProps = {
  size: 'small',
  fieldNames,
@@ -152,23 +216,13 @@ const InternalFileManager = (props) => {
  return (
  <div style={{ width: '100%', overflow: 'auto' }}>
  <FileSelector
- value={options}
+ value={multiple ? options : options?.[0]}
  multiple={multiple}
  quickUpload={fieldSchema['x-component-props']?.quickUpload !== false}
  selectFile={fieldSchema['x-component-props']?.selectFile !== false}
  action={`${collectionField?.target}:create`}
  onSelect={handleSelect}
- onRemove={handleRemove}
- onChange={(changed) => {
- if (changed.every((file) => file.status !== 'uploading')) {
- changed = changed.filter((file) => file.status === 'done').map((file) => file.response.data);
- if (multiple) {
- onChange([...options, ...changed]);
- } else {
- onChange(changed[0]);
- }
- }
- }}
+ onChange={onChange}
  />
  <ActionContextProvider
  value={{
@@ -184,7 +238,7 @@ const InternalFileManager = (props) => {
  <RecordPickerProvider {...pickerProps}>
  <CollectionProvider_deprecated name={collectionField?.target}>
  <FormProvider>
- <TableSelectorParamsProvider params={{ filter: getFilter() }}>
+ <TableSelectorParamsProvider params={{}}>
  <SchemaComponentOptions scope={{ usePickActionProps, useTableSelectorProps }}>
  <RecursionField
  onlyRenderProperties
@@ -209,7 +263,9 @@ const FileManageReadPretty = connect((props) => {
  const { getField } = useCollection_deprecated();
  const { getCollectionJoinField } = useCollectionManager_deprecated();
  const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema['x-collection-field']);
- return <EllipsisWithTooltip ellipsis>{collectionField ? <Preview {...props} /> : null}</EllipsisWithTooltip>;
+ return (
+ <EllipsisWithTooltip ellipsis>{collectionField ? <Upload.ReadPretty {...props} /> : null}</EllipsisWithTooltip>
+ );
 });
 
 export { FileManageReadPretty, InternalFileManager };