Skip to content

添加压缩文件预览 #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zhipenglin merged 1 commit into from
Mar 24, 2026
Merged

添加压缩文件预览 #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 132 additions & 96 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,53 +418,61 @@ const BaseExample = createWithRemoteLoader({
modules: ['components-core:Global@PureGlobal', 'components-core:InfoPage']
})(({ remoteModules }) => {
const [PureGlobal, InfoPage] = remoteModules;
return <PureGlobal preset={{
ajax: async api => {
return { data: { code: 0, data: api.loader() } };
}, apis: {
file: {
staticUrl: getPublicPath('react-file') || window.PUBLIC_URL, getUrl: {
loader: async ({ params }) => {
const urlMap = {
1: '/mock/resume.png',
2: '/mock/resume.pdf',
3: '/mock/resume.html',
4: '/mock/resume.txt',
5: '/mock/audio.wav',
6: 'http://ieee802.org:80/secmail/docIZSEwEqHFr.doc'
};
return new Promise(resolve => {
setTimeout(() => {
resolve(urlMap[params.id]);
}, 1000);
});
return (
<PureGlobal
preset={{
ajax: async api => {
return { data: { code: 0, data: api.loader() } };
},
apis: {
file: {
staticUrl: getPublicPath('react-file') || window.PUBLIC_URL,
getUrl: {
loader: async ({ params }) => {
const urlMap = {
1: '/mock/resume.png',
2: '/mock/resume.pdf',
3: '/mock/resume.html',
4: '/mock/resume.txt',
5: '/mock/audio.wav',
6: 'http://ieee802.org:80/secmail/docIZSEwEqHFr.doc',
7: '/mock/example.zip'
};
return new Promise(resolve => {
setTimeout(() => {
resolve(urlMap[params.id]);
}, 1000);
});
}
}
}
}
}
}
}}>
<InfoPage>
<InfoPage.Part title="预览图片">
<FilePreview id="1" />
</InfoPage.Part>
<InfoPage.Part title="预览PDF">
<FilePreview id="2" />
</InfoPage.Part>
<InfoPage.Part title="预览HTML">
<FilePreview id="3" />
</InfoPage.Part>
<InfoPage.Part title="预览TXT">
<FilePreview id="4" />
</InfoPage.Part>
<InfoPage.Part title="预览AUDIO">
<FilePreview id="5" />
</InfoPage.Part>
<InfoPage.Part title="预览OFFICE">
<FilePreview id="6" />
</InfoPage.Part>
</InfoPage>

</PureGlobal>;
}}>
<InfoPage>
<InfoPage.Part title="预览图片">
<FilePreview id="1" />
</InfoPage.Part>
<InfoPage.Part title="预览PDF">
<FilePreview id="2" />
</InfoPage.Part>
<InfoPage.Part title="预览HTML">
<FilePreview id="3" />
</InfoPage.Part>
<InfoPage.Part title="预览TXT">
<FilePreview id="4" />
</InfoPage.Part>
<InfoPage.Part title="预览AUDIO">
<FilePreview id="5" />
</InfoPage.Part>
<InfoPage.Part title="预览OFFICE">
<FilePreview id="6" />
</InfoPage.Part>
<InfoPage.Part title="预览ZIP">
<FilePreview id="7" />
</InfoPage.Part>
</InfoPage>
</PureGlobal>
);
});

render(<BaseExample />);
Expand Down Expand Up @@ -505,14 +513,14 @@ render(<BaseExample />);

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|----------|-----------|-----------|----------------------------|
| accept | string | undefined | 接受的文件类型，如 ".jpg,.png,.pdf" |
| multiple | boolean | false | 是否支持多文件上传 |
| onChange | function | - | 文件选择后的回调函数，参数为选择的文件数组 |
| disabled | boolean | false | 是否禁用上传功能 |
| maxSize | number | - | 单个文件最大尺寸（字节） |
| children | ReactNode | - | 自定义上传按钮内容 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| accept | string | undefined | 接受的文件类型，如 ".jpg,.png,.pdf" |
| multiple | boolean | false | 是否支持多文件上传 |
| onChange | function | - | 文件选择后的回调函数，参数为选择的文件数组 |
| disabled | boolean | false | 是否禁用上传功能 |
| maxSize | number | - | 单个文件最大尺寸（字节） |
| children | ReactNode | - | 自定义上传按钮内容 |

### MarkdownPreview

Expand All @@ -521,92 +529,120 @@ Markdown文件预览组件，支持渲染Markdown格式的文档。
#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|-------|------|
|------|------|--------|------|
| url | string | - | Markdown文件的URL地址 |
| className | string | - | 自定义容器类名 |
| maxWidth | string/number | - | 容器最大宽度 |

### ZipPreview

ZIP压缩包文件预览组件，支持查看压缩包内部的文件列表和目录结构。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| url | string | - | ZIP文件的URL地址 |
| className | string | - | 自定义容器类名 |
| maxWidth | string/number | - | 容器最大宽度 |

#### 功能特性

- 支持解析ZIP压缩包内容
- 以树形结构展示文件和目录
- 显示文件大小和压缩后大小
- 支持嵌套目录结构
- 自动格式化文件大小（B、KB、MB、GB）

#### 支持的压缩格式

- `.zip` - ZIP压缩文件
- `.rar` - RAR压缩文件
- `.7z` - 7-Zip压缩文件
- `.tar` - TAR归档文件
- `.gz` - Gzip压缩文件

### FilePreview

文件预览组件，支持多种文件格式的预览。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|-----------|--------|-----|----------------------|
| url | string | - | 文件URL |
| filename | string | - | 文件名，用于确定文件类型 |
| type | string | - | 文件类型，可选，如不提供则根据文件名推断 |
| staticUrl | string | - | 静态资源URL前缀 |
| apis | object | - | API配置对象 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| url | string | - | 文件URL |
| filename | string | - | 文件名，用于确定文件类型 |
| type | string | - | 文件类型，可选，如不提供则根据文件名推断 |
| staticUrl | string | - | 静态资源URL前缀 |
| apis | object | - | API配置对象 |

### FileList

文件列表组件，用于展示和管理文件。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|------------|----------|-----|-------------|
| files | array | [] | 文件列表数据 |
| onDelete | function | - | 删除文件的回调函数 |
| onPreview | function | - | 预览文件的回调函数 |
| onDownload | function | - | 下载文件的回调函数 |
| renderItem | function | - | 自定义渲染文件项的函数 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| files | array | [] | 文件列表数据 |
| onDelete | function | - | 删除文件的回调函数 |
| onPreview | function | - | 预览文件的回调函数 |
| onDownload | function | - | 下载文件的回调函数 |
| renderItem | function | - | 自定义渲染文件项的函数 |

### Download

文件下载组件。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|-----------|-----------|-----|-----------|
| url | string | - | 下载文件的URL |
| filename | string | - | 下载后的文件名 |
| children | ReactNode | - | 触发下载的元素 |
| onSuccess | function | - | 下载成功的回调函数 |
| onError | function | - | 下载失败的回调函数 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| url | string | - | 下载文件的URL |
| filename | string | - | 下载后的文件名 |
| children | ReactNode | - | 触发下载的元素 |
| onSuccess | function | - | 下载成功的回调函数 |
| onError | function | - | 下载失败的回调函数 |

### Image

图片组件，支持默认头像和加载失败处理。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|---------------|----------|-----|-----------------------------------|
| src | string | - | 图片源URL |
| alt | string | - | 图片替代文本 |
| defaultAvatar | string | - | 默认头像类型（'male'/'female'/'default'） |
| onError | function | - | 图片加载失败的回调函数 |
| className | string | - | 自定义类名 |
| style | object | - | 自定义样式 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| src | string | - | 图片源URL |
| alt | string | - | 图片替代文本 |
| defaultAvatar | string | - | 默认头像类型（'male'/'female'/'default'） |
| onError | function | - | 图片加载失败的回调函数 |
| className | string | - | 自定义类名 |
| style | object | - | 自定义样式 |

### FileButton

文件操作按钮组件。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|-----------|-----------|-------|-----------|
| onClick | function | - | 点击按钮的回调函数 |
| disabled | boolean | false | 是否禁用按钮 |
| children | ReactNode | - | 按钮内容 |
| className | string | - | 自定义类名 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| onClick | function | - | 点击按钮的回调函数 |
| disabled | boolean | false | 是否禁用按钮 |
| children | ReactNode | - | 按钮内容 |
| className | string | - | 自定义类名 |

### PrintButton

打印按钮组件。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|---------------|-----------|-----|----------|
| onBeforePrint | function | - | 打印前的回调函数 |
| onAfterPrint | function | - | 打印后的回调函数 |
| children | ReactNode | - | 按钮内容 |
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| onBeforePrint | function | - | 打印前的回调函数 |
| onAfterPrint | function | - | 打印后的回调函数 |
| children | ReactNode | - | 按钮内容 |

### 类型定义

Expand Down Expand Up @@ -669,14 +705,14 @@ const {
计算接受的文件类型。

```typescript
computedAccept(accept:string | string[]):string
computedAccept(accept: string | string[]): string
```

#### typeFormatComponent

根据文件名获取对应的预览组件。

```typescript
typeFormatComponent(filename:string):React.ComponentType
typeFormatComponent(filename: string): React.ComponentType
```

Loading
Loading