Skip to content

Commit c5e68ff

Browse files
committed
fix: remove image hover mask and keep click to preview
1 parent 879b799 commit c5e68ff

File tree

2 files changed

+10
-29
lines changed

2 files changed

+10
-29
lines changed

src/components/ChallengeDetailPage/ChallengeDescription.tsx

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const MarkdownImage = (props: any) => {
2525
// 使用传入的src或回退到默认图片
2626
const imageSrc = src || FALLBACK_IMAGE;
2727

28-
// 使用Ant Design的Image组件,支持点击预览
28+
// 使用Ant Design的Image组件,支持点击预览但无蒙版和提示文本
2929
return (
3030
<Image
3131
src={imageSrc}
@@ -37,14 +37,8 @@ const MarkdownImage = (props: any) => {
3737
display: 'block',
3838
}}
3939
preview={{
40-
mask: <div className="image-preview-mask">点击查看大图</div>,
41-
maskClassName: "image-preview-mask",
42-
rootClassName: "custom-image-preview",
43-
toolbarRender: () => (
44-
<div className="image-preview-tip">
45-
点击图片外区域关闭 | 滚轮缩放 | 左键拖动
46-
</div>
47-
)
40+
mask: false,
41+
rootClassName: "custom-image-preview"
4842
}}
4943
fallback={FALLBACK_IMAGE}
5044
/>
@@ -246,13 +240,8 @@ const ChallengeDescription: React.FC<ChallengeDescriptionProps> = ({ challenge,
246240
display: 'block'
247241
}}
248242
preview={{
249-
mask: '点击查看大图',
250-
maskClassName: 'image-preview-mask',
251-
toolbarRender: () => (
252-
<div className="image-preview-tip">
253-
点击图片外区域关闭 | 滚轮缩放 | 左键拖动
254-
</div>
255-
),
243+
mask: false,
244+
rootClassName: "custom-image-preview"
256245
}}
257246
fallback={FALLBACK_IMAGE}
258247
/>
@@ -289,14 +278,8 @@ const ChallengeDescription: React.FC<ChallengeDescriptionProps> = ({ challenge,
289278
display: 'block'
290279
}}
291280
preview={{
292-
mask: <div className="image-preview-mask">点击查看大图</div>,
293-
maskClassName: "image-preview-mask",
294-
rootClassName: "custom-image-preview",
295-
toolbarRender: () => (
296-
<div className="image-preview-tip">
297-
点击图片外区域关闭 | 滚轮缩放 | 左键拖动
298-
</div>
299-
)
281+
mask: false,
282+
rootClassName: "custom-image-preview"
300283
}}
301284
fallback={FALLBACK_IMAGE}
302285
/>

src/styles/markdown.css

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -203,11 +203,9 @@
203203
color: #fff !important;
204204
}
205205

206-
.image-preview-mask {
207-
font-size: 14px !important;
208-
font-weight: bold !important;
209-
color: #fff !important;
210-
background-color: rgba(0, 0, 0, 0.6) !important;
206+
/* 移除悬浮蒙版 */
207+
.ant-image-mask {
208+
display: none !important;
211209
}
212210

213211
/* 关闭按钮指示器 */

0 commit comments

Comments
 (0)