fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 05:29:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: add global style for LightBox to prevent image overlay issues (#6651)

Browse Source
This commit is contained in:
Zeke Zhang 2025-04-13 14:05:24 +08:00 committed by GitHub
parent 4bc16e52f2
commit c9b1c893e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/core/client/src/schema-component/antd/upload/Upload.tsx
View File

@ -11,6 +11,7 @@ import { DeleteOutlined, DownloadOutlined, InboxOutlined, LoadingOutlined, PlusO
import { Field } from '@formily/core';
import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
import { Alert, Upload as AntdUpload, Button, Modal, Progress, Space, Tooltip } from 'antd';
import { createGlobalStyle } from 'antd-style';
import useUploadStyle from 'antd/es/upload/style';
import cls from 'classnames';
import { saveAs } from 'file-saver';
@ -36,6 +37,12 @@ import {
import { useStyles } from './style';
import type { ComposedUpload, DraggerProps, DraggerV2Props, UploadProps } from './type';
const LightBoxGlobalStyle = createGlobalStyle`
.ReactModal__Overlay.ReactModal__Overlay--after-open {
z-index: 3000 !important; // 避免预览图片时被遮挡
}
`;
attachmentFileTypes.add({
match(file) {
return matchMimetype(file, 'image/*');
@ -62,29 +69,32 @@ attachmentFileTypes.add({
[index, list],
);
return (
<LightBox
// discourageDownloads={true}
mainSrc={list[index]?.url}
nextSrc={list[(index + 1) % list.length]?.url}
prevSrc={list[(index + list.length - 1) % list.length]?.url}
onCloseRequest={() => onSwitchIndex(null)}
onMovePrevRequest={() => onSwitchIndex((index + list.length - 1) % list.length)}
onMoveNextRequest={() => onSwitchIndex((index + 1) % list.length)}
imageTitle={list[index]?.title}
toolbarButtons={[
<button
key={'preview-img'}
style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
type="button"
aria-label="Download"
title="Download"
className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
onClick={onDownload}
>
<DownloadOutlined />
</button>,
]}
/>
<>
<LightBoxGlobalStyle />
<LightBox
// discourageDownloads={true}
mainSrc={list[index]?.url}
nextSrc={list[(index + 1) % list.length]?.url}
prevSrc={list[(index + list.length - 1) % list.length]?.url}
onCloseRequest={() => onSwitchIndex(null)}
onMovePrevRequest={() => onSwitchIndex((index + list.length - 1) % list.length)}
onMoveNextRequest={() => onSwitchIndex((index + 1) % list.length)}
imageTitle={list[index]?.title}
toolbarButtons={[
<button
key={'preview-img'}
style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
type="button"
aria-label="Download"
title="Download"
className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
onClick={onDownload}
>
<DownloadOutlined />
</button>,
]}
/>
</>
);
},
});