@fe-free/core 3.0.14 → 3.0.16

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 3.0.16
+
+### Patch Changes
+
+- feat: upload
+  - @fe-free/tool@3.0.16
+
+## 3.0.15
+
+### Patch Changes
+
+- feat: uploader
+  - @fe-free/tool@3.0.15
+
 ## 3.0.14
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.14"
+    "@fe-free/tool": "3.0.16"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/form/form.stories.tsx

@@ -210,7 +210,7 @@ function customRequest(option: any) {
         },
       });
     }
-  }, 100);
+  }, 1000);
 
   // 返回 abort 方法，用于取消上传
   return {
@@ -228,13 +228,40 @@ export const ProFormUploadComponent: Story = {
       <ProFormUploadDragger
         label="file_dragger"
         name="file_dragger"
-        fieldProps={{ customRequest }}
+        fieldProps={{
+          title: '这是标题',
+          description: '这是描述',
+          customRequest,
+        }}
       />
       <ProFormUploadDragger
         label="files_dragger"
         name="files_dragger"
         fieldProps={{ multiple: true, maxCount: 2, customRequest }}
       />
+      <ProFormUploadDragger
+        label="knowledge_files_dragger"
+        name="knowledge_files_dragger"
+        fieldProps={{
+          accept: '.doc,.docx,.pdf,.ppt,.jpg, jpeg,.png,.mp3,.mp4,.txt,.markdown,.excel',
+          multiple: true,
+          maxCount: 100,
+          customRequest,
+          showStatus: true,
+          description: (
+            <div>
+              <div className="text-01">
+                支持doc、docx、pdf、ppt、jpg、png、mp3、mp4、txt、markdown、excel格式文件
+              </div>
+              <div className="text-03">
+                pdf
+                文件不超过100MiB、图片文件不超过10MiB、音频文件不超过300MiB、视频文件不超过400MiB
+                其他单文件不超过50MiB 单次最多上传 100 个文件
+              </div>
+            </div>
+          ),
+        }}
+      />
       <ProFormUpload
         label="files"
         name="files"

package/src/form/pro_form_upload.tsx

@@ -1,5 +1,7 @@
 // 避免循环引用
 import { ProForm, type ProFormItemProps } from '@ant-design/pro-components';
+import { App } from 'antd';
+import { useState } from 'react';
 import type {
   AvatarImageUploadProps,
   ImageUploadDraggerProps,
@@ -27,9 +29,38 @@ function ProFormUpload(props: ProFormItemProps<UploadProps>) {
 
 function ProFormUploadDragger(props: ProFormItemProps<UploadDraggerProps>) {
   const { fieldProps, ...rest } = props;
+  const { message } = App.useApp();
+
+  const [info, setInfo] = useState<any>(undefined);
+
+  const successList = info?.fileList
+    ?.map((item) => item.url || item.response?.data.url)
+    .filter(Boolean);
+
   return (
-    <ProForm.Item {...rest}>
-      <UploadDragger {...fieldProps} />
+    <ProForm.Item
+      {...rest}
+      validateTrigger={['onSubmit']}
+      rules={[
+        ...(props.rules || []),
+        {
+          validator: () => {
+            if (successList?.length !== info?.fileList?.length) {
+              message.error('存在未成功的文件，请处理！');
+              return Promise.reject('');
+            }
+            return Promise.resolve();
+          },
+        },
+      ]}
+    >
+      <UploadDragger
+        {...fieldProps}
+        onChangeOriginal={(info) => {
+          setInfo(info);
+          fieldProps?.onChangeOriginal?.(info);
+        }}
+      />
     </ProForm.Item>
   );
 }

package/src/upload/index.tsx

@@ -1,9 +1,11 @@
-// 避免循环引用
 import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
 import { Upload as AntdUpload, Avatar, Button, message } from 'antd';
+import type { UploadChangeParam } from 'antd/es/upload';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
+import './style.scss';
 
 interface UploadBaseProps {
   value?: string[] | string;
@@ -19,11 +21,11 @@ interface UploadBaseProps {
 interface UploadProps extends UploadBaseProps {
   showCount?: boolean;
 }
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface UploadDraggerProps extends UploadBaseProps {}
 
-function useUpload(props: ImageUploadProps) {
-  const { value, onChange, multiple, maxCount } = props;
+function useUpload(
+  props: ImageUploadProps & { onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void },
+) {
+  const { value, onChange, multiple, maxCount, onChangeOriginal } = props;
   // 转换成 Upload 格式。
   const defaultFileList = useMemo(() => {
     if (!value) {
@@ -37,6 +39,9 @@ function useUpload(props: ImageUploadProps) {
   // 存起来，已选的文件。以便做一些判断。
   const [fileList, setFileList] = useState<UploadFile[]>(defaultFileList);
 
+  // 找到真正上传成功的。
+  const successList = fileList.map((item) => item.url || item.response?.data.url).filter(Boolean);
+
   const handleChange = useCallback(
     (info) => {
       setFileList(info.fileList);
@@ -47,8 +52,10 @@ function useUpload(props: ImageUploadProps) {
         .filter(Boolean);
 
       onChange?.(multiple ? newValue : newValue[0]);
+
+      onChangeOriginal?.(info);
     },
-    [multiple, onChange],
+    [multiple, onChange, onChangeOriginal],
   );
 
   // 选文件还是可能多选，如果多选，则提示。
@@ -80,6 +87,7 @@ function useUpload(props: ImageUploadProps) {
     beforeUpload: handleBeforeUpload,
     isDisabled,
     fileList,
+    successList,
   };
 }
 
@@ -115,9 +123,45 @@ function Upload(props: ImageUploadProps) {
   );
 }
 
-function UploadDragger(props: ImageUploadDraggerProps) {
-  const { multiple, maxCount, action, customRequest, listType, accept } = props;
-  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+interface UploadDraggerProps extends UploadBaseProps {
+  title?: string;
+  description?: string | ReactNode;
+  onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void;
+  showStatus?: boolean;
+}
+function UploadDragger(props: UploadDraggerProps) {
+  const {
+    multiple,
+    maxCount,
+    action,
+    customRequest,
+    listType,
+    accept,
+    title,
+    description,
+    showStatus,
+  } = props;
+  const { onChange, beforeUpload, isDisabled, fileList, successList } = useUpload(props);
+
+  const itemRender = useCallback(
+    (originNode, file, fileList) => {
+      const isFirst = fileList.findIndex((item) => item.uid === file.uid) === 0;
+
+      if (maxCount && maxCount > 1 && showStatus && isFirst) {
+        return (
+          <div>
+            <div className="py-1">
+              文件数量 ({successList.length}/{fileList.length})
+            </div>
+            {originNode}
+          </div>
+        );
+      }
+
+      return originNode;
+    },
+    [maxCount, showStatus, successList.length],
+  );
 
   return (
     <AntdUpload.Dragger
@@ -132,6 +176,10 @@ function UploadDragger(props: ImageUploadDraggerProps) {
       beforeUpload={beforeUpload}
       // 不可，否则会没法删除
       // disabled={isDisabled}
+      className={classNames('fec-upload-dragger', {
+        'fec-upload-dragger-count-ten': fileList.length >= 10,
+      })}
+      itemRender={itemRender}
     >
       <div
         className={classNames({
@@ -150,8 +198,9 @@ function UploadDragger(props: ImageUploadDraggerProps) {
             '!text-03': isDisabled,
           })}
         >
-          点击或拖拽到此区域进行上传
+          {title || '点击或拖拽到此区域进行上传'}
         </p>
+        {description && <p className={classNames('ant-upload-hint')}>{description}</p>}
       </div>
     </AntdUpload.Dragger>
   );

package/src/upload/style.scss

@@ -0,0 +1,8 @@
+.fec-upload-dragger {
+  &.fec-upload-dragger-count-ten {
+    .ant-upload-list.ant-upload-list-text {
+      max-height: calc(10 * 30px);
+      overflow: auto;
+    }
+  }
+}