@hsu-react/ui 0.0.1 → 0.0.2

package/src/components/Upload/index.md

@@ -8,10 +8,81 @@ title: Upload 上传
 
 # Upload 上传
 
-> `Upload` 组件。完整 API 见源码类型定义，下方为基础用法。
+在 antd `Upload` 之上封装，内置普通上传与分片（断点）上传、上传进度、文件列表自定义渲染、下载与文件预览能力。
 
 ## 引入
 
 ```ts
 import { Upload } from "@hsu-react/ui";
 ```
+
+## 基础用法
+
+> 演示用的 `action` 为占位地址，真实使用时需替换为可用的上传接口（普通上传用 `action`，分片上传用 `chunkAction` / `mergeChunkAction`）。
+
+```tsx
+import React, { useState } from "react";
+import { Upload } from "@hsu-react/ui";
+import { Button } from "antd";
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  return (
+    <Upload
+      action="/api/upload"
+      data={{ bizType: "demo" }}
+      fileList={fileList}
+      onChange={({ fileList }) => setFileList(fileList)}
+    >
+      <Button>点击上传</Button>
+    </Upload>
+  );
+};
+```
+
+拖拽上传，通过 `drop` 开启：
+
+```tsx
+import React, { useState } from "react";
+import { Upload } from "@hsu-react/ui";
+
+export default () => {
+  const [fileList, setFileList] = useState([]);
+
+  return (
+    <Upload
+      drop
+      action="/api/upload"
+      accept=".zip,.pdf"
+      fileList={fileList}
+      onChange={({ fileList }) => setFileList(fileList)}
+    >
+      <p style={{ padding: 16, margin: 0 }}>将文件拖到此处，或点击上传</p>
+    </Upload>
+  );
+};
+```
+
+## API
+
+继承 antd [UploadProps](https://ant.design/components/upload-cn)（移除原 `action`、`data` 后重新定义），新增/重写属性如下：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| action | 普通上传地址 | `string` | - |
+| data | 上传时附带的额外参数 | `Partial<Record<string, string>>` | - |
+| drop | 是否使用拖拽上传 | `true` | - |
+| sharding | 是否启用分片上传 | `boolean` | - |
+| chunkAction | 分片上传地址 | `string` | - |
+| mergeChunkAction | 分片合并地址 | `string` | - |
+| chunkNum | 分片并发数 | `number` | `3` |
+| size | 文件大小限制（MB） | `number` | - |
+| onUploading | 上传中文件列表变化回调 | `(fileList: UploadFile[]) => void` | - |
+| onUploadingList | 上传中（含取消器）列表变化回调 | `(list: Record<string, Canceler[]>) => void` | - |
+| onUploadSuccess | 单个文件上传成功回调 | `() => void` | - |
+| rmFile | 需要从列表中移除的文件标识 | `string` | - |
+| listProps | 文件列表项渲染配置（名称、进度、下载、预览、删除等） | `object` | - |
+| en | 是否使用英文文案 | `boolean` | - |
+
+> 文件列表项内置下载与预览（依赖 `FilePreview`），可通过 `listProps.itemPreview.formatInfo` / `listProps.itemDownload.formatUrl` 自定义。

package/src/components/Upload/index.module.less

@@ -4,18 +4,18 @@
   width: 100%;
   height: 100%;
 
-  span.ant-upload {
+  span:global(.ant-upload) {
     display: inline-flex;
   }
 
-  .ant-upload-list {
+  :global(.ant-upload-list) {
     display: flex;
     flex-direction: column;
     row-gap: 5px;
 
     width: 100%;
 
-    &.ant-upload-list-picture-card {
+    &:global(.ant-upload-list-picture-card) {
       flex-direction: row;
       flex-wrap: wrap;
       gap: 5px;

package/src/styles/antd-overload.less

@@ -130,4 +130,4 @@
       }
     }
   }
-}
+}