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