@fe-free/core 3.0.15 → 3.0.17

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.15",
+  "version": "3.0.17",
   "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.15"
+    "@fe-free/tool": "3.0.17"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud/crud.tsx

@@ -5,11 +5,11 @@ import classNames from 'classnames';
 import { isString } from 'lodash-es';
 import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
-import type { TableProps } from '../table';
-import { getTableScroll, Table } from '../table';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
+import type { TableProps } from './table';
+import { getTableScroll, Table } from './table';
 import type { CRUDProps } from './types';
 import { useRowSelection } from './use_row_selection';
 import { useTips } from './use_tips';

package/src/crud/types.tsx

@@ -1,6 +1,6 @@
 import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
 import type { MouseEvent, ReactNode, Ref, RefObject } from 'react';
-import type { TableProps } from '../table';
+import type { TableProps } from './table';
 
 /**
  * create 创建

package/src/form/form.stories.tsx

@@ -210,7 +210,7 @@ function customRequest(option: any) {
         },
       });
     }
-  }, 100);
+  }, 1000);
 
   // 返回 abort 方法，用于取消上传
   return {
@@ -239,6 +239,30 @@ export const ProFormUploadComponent: Story = {
         name="files_dragger"
         fieldProps={{ multiple: true, maxCount: 2, customRequest }}
       />
+      <ProFormUploadDragger
+        label="knowledge_files_dragger"
+        name="knowledge_files_dragger"
+        fieldProps={{
+          directory: true,
+          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/index.ts

@@ -57,8 +57,6 @@ export type { RecordArrayProps, RecordProps } from './record';
 export { routeTool } from './route';
 export { NumberSlider, PercentageSlider } from './slider';
 export type { NumberSliderProps, PercentageSliderProps } from './slider';
-export { Table } from './table';
-export type { TableProps } from './table';
 export { Tabs } from './tabs';
 export type { TabsProps } from './tabs';
 export { themeVariables } from './theme';

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;
@@ -14,14 +16,17 @@ interface UploadBaseProps {
   customRequest?: AntdUploadProps['customRequest'];
   listType?: AntdUploadProps['listType'];
   accept?: string;
+  directory?: AntdUploadProps['directory'];
 }
 
 interface UploadProps extends UploadBaseProps {
   showCount?: boolean;
 }
 
-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) {
@@ -35,6 +40,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);
@@ -45,8 +53,10 @@ function useUpload(props: ImageUploadProps) {
         .filter(Boolean);
 
       onChange?.(multiple ? newValue : newValue[0]);
+
+      onChangeOriginal?.(info);
     },
-    [multiple, onChange],
+    [multiple, onChange, onChangeOriginal],
   );
 
   // 选文件还是可能多选，如果多选，则提示。
@@ -78,11 +88,13 @@ function useUpload(props: ImageUploadProps) {
     beforeUpload: handleBeforeUpload,
     isDisabled,
     fileList,
+    successList,
   };
 }
 
 function Upload(props: ImageUploadProps) {
-  const { multiple, maxCount, showCount, action, customRequest, listType, accept } = props;
+  const { multiple, maxCount, showCount, action, customRequest, listType, accept, directory } =
+    props;
   const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
 
   return (
@@ -96,6 +108,7 @@ function Upload(props: ImageUploadProps) {
       maxCount={multiple ? maxCount : 1}
       multiple={multiple}
       beforeUpload={beforeUpload}
+      directory={directory}
       // 不可，否则会没法删除
       // disabled={isDisabled}
     >
@@ -115,11 +128,44 @@ function Upload(props: ImageUploadProps) {
 
 interface UploadDraggerProps extends UploadBaseProps {
   title?: string;
-  description?: string;
+  description?: string | ReactNode;
+  onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void;
+  showStatus?: boolean;
 }
 function UploadDragger(props: UploadDraggerProps) {
-  const { multiple, maxCount, action, customRequest, listType, accept, title, description } = props;
-  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+  const {
+    multiple,
+    maxCount,
+    action,
+    customRequest,
+    listType,
+    accept,
+    title,
+    description,
+    showStatus,
+    directory,
+  } = 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,8 +178,13 @@ function UploadDragger(props: UploadDraggerProps) {
       maxCount={multiple ? maxCount : 1}
       multiple={multiple}
       beforeUpload={beforeUpload}
+      directory={directory}
       // 不可，否则会没法删除
       // disabled={isDisabled}
+      className={classNames('fec-upload-dragger', {
+        'fec-upload-dragger-count-ten': fileList.length >= 10,
+      })}
+      itemRender={itemRender}
     >
       <div
         className={classNames({

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;
+    }
+  }
+}

package/src/table/table.stories.tsx

@@ -1,95 +0,0 @@
-import type { ProColumns } from '@ant-design/pro-components';
-import { Table } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fakeData } from '../crud/demo/data';
-
-const meta: Meta<typeof Table> = {
-  title: '@fe-free/core/Table',
-  component: Table,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `Table 基于 ProTable 做了一些封装：<br>
-- props column 需要显示的提供 search: true;
-- 列宽默认 120，和滚动条
-- 搜索样式做了默认设置，具体见代码
-- 页码做了默认设置，具体见代码
-`,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-// 定义列配置
-const columns: ProColumns[] = [
-  {
-    title: 'id',
-    dataIndex: 'id',
-    search: true,
-  },
-  {
-    title: '名字(省略)',
-    dataIndex: 'name',
-    search: true,
-    ellipsis: true,
-  },
-  {
-    title: 'city',
-    dataIndex: 'city',
-  },
-  {
-    title: 'area',
-    dataIndex: 'area',
-  },
-];
-
-export const Basic: Story = {
-  render: () => (
-    <Table
-      rowKey="id"
-      columns={columns}
-      request={async (params) => {
-        console.log(params);
-        return {
-          data: fakeData,
-          success: true,
-          total: fakeData.length,
-        };
-      }}
-    />
-  ),
-};
-
-export const ScrollX: Story = {
-  render: () => (
-    <div className="w-[400px]">
-      <Table
-        rowKey="id"
-        columns={[
-          {
-            title: 'id',
-            dataIndex: 'id',
-          },
-          {
-            title: '名字(省略)',
-            dataIndex: 'name',
-
-            ellipsis: true,
-          },
-          {
-            title: 'city',
-            dataIndex: 'city',
-          },
-          {
-            title: 'area',
-            dataIndex: 'area',
-          },
-        ]}
-      />
-    </div>
-  ),
-};