From 9cde8f0a1b6ff6fc023470cbb13083e8593ae661 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 24 Apr 2024 11:34:49 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(preview):=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=9B=BE=E7=89=87=E6=B0=B4=E5=8D=B0=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E7=A6=81=E6=AD=A2=E5=8F=B3=E9=94=AE=E4=B8=8B=E8=BD=BD?= =?UTF-8?q?=E5=9B=BE=E7=89=87(#2808)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/preview/src/Preview.tsx | 77 ++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 11 deletions(-) diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index 4b952b946..dc34e2cbd 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/packages/ui/preview/src/Preview.tsx @@ -2,6 +2,7 @@ import React, { forwardRef, useCallback, useState, useEffect, useRef, useMemo } import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { Portal } from '@hi-ui/portal' +import { Watermark, WatermarkProps } from '@hi-ui/watermark' import { CSSTransition } from 'react-transition-group' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' import { HiBaseHTMLProps } from '@hi-ui/core' @@ -43,6 +44,8 @@ export const Preview = forwardRef( onError, onClose, src, + previewWatermarkProps, + ifAllowDownload = false, }, ref ) => { @@ -65,6 +68,27 @@ export const Preview = forwardRef( const isMultiple = useMemo(() => Array.isArray(src) && src.length > 1, [src]) + // 图片加水印 + const [waterMarkElement, setWaterMarkElement] = useState(undefined) + useEffect(() => { + if (visible) { + setWaterMarkElement(document.querySelector(`.${prefixCls}__box`) as HTMLDivElement) + } + }, [visible]) + + // 图片是否允许下载 + useEffect(() => { + const handleContextMenu = (evt: MouseEvent) => { + evt.preventDefault() + } + if (imgRef.current && !ifAllowDownload && visible) { + imgRef.current.addEventListener('contextmenu', handleContextMenu) + } + return () => { + imgRef.current?.removeEventListener('contextmenu', handleContextMenu) + } + }, [imgRef, visible, ifAllowDownload]) + // 重置图片 const resetTransform = useCallback(() => { updateImgTransform(defaultTransform) @@ -226,20 +250,29 @@ export const Preview = forwardRef( onMouseMove={onMoving} onKeyDown={handleKeyDown} > - { - setIsLoaded(true) - }} - onError={onError} - onMouseDown={onMoveStart} - onMouseUp={onMoveEnd} - src={Array.isArray(src) ? src[active] : src} - className={`${prefixCls}__image`} +
+ > + { + setIsLoaded(true) + }} + onError={onError} + onMouseDown={onMoveStart} + onMouseUp={onMoveEnd} + src={Array.isArray(src) ? src[active] : src} + className={`${prefixCls}__image`} + // style={{ + // transform: `scale(${imgTransform.scale}, ${imgTransform.scale}) translate(${imgTransform.translateX}px,${imgTransform.translateY}px) rotate(${imgTransform.rotate}deg)`, + // }} + /> +
{ @@ -286,6 +319,20 @@ export const Preview = forwardRef( )}
+ )} @@ -315,6 +362,14 @@ export interface PreviewProps extends Omit, 'onError'> { * 当前预览图片索引 */ defaultCurrent?: number + /** + * 设置图片水印 + */ + previewWatermarkProps?: Omit + /** + * 是否允许右键下载图片 + */ + ifAllowDownload?: boolean /** * 加载错误回调 */ From 9103ff92e490105df57e0369ed6512a10e1818de Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 24 Apr 2024 11:39:04 +0800 Subject: [PATCH 2/6] =?UTF-8?q?chore(preview):=20=E7=94=9F=E6=88=90?= =?UTF-8?q?=E5=8F=98=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/large-glasses-share.md | 5 +++++ .changeset/serious-penguins-provide.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/large-glasses-share.md create mode 100644 .changeset/serious-penguins-provide.md diff --git a/.changeset/large-glasses-share.md b/.changeset/large-glasses-share.md new file mode 100644 index 000000000..d6e705ac4 --- /dev/null +++ b/.changeset/large-glasses-share.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/preview": minor +--- + +feat: 支持配置图片水印以及禁止右键下载图片 diff --git a/.changeset/serious-penguins-provide.md b/.changeset/serious-penguins-provide.md new file mode 100644 index 000000000..da704d2c1 --- /dev/null +++ b/.changeset/serious-penguins-provide.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(preview): 支持图片配置水印以及禁止右键下载图片 From 4906055f8c7c4949c94c2a2b667a03bada5d7cb2 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 9 May 2024 11:54:11 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feature(preview):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=B0=B4=E5=8D=B0=E7=A4=BA=E4=BE=8B=E5=92=8C=E7=A6=81=E6=AD=A2?= =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E7=A4=BA=E4=BE=8B(#2808)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/preview/src/Preview.tsx | 17 +---- .../ui/preview/stories/banned.stories.tsx | 51 +++++++++++++++ packages/ui/preview/stories/index.stories.tsx | 2 + .../ui/preview/stories/watermark.stories.tsx | 62 +++++++++++++++++++ 4 files changed, 117 insertions(+), 15 deletions(-) create mode 100644 packages/ui/preview/stories/banned.stories.tsx create mode 100644 packages/ui/preview/stories/watermark.stories.tsx diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index dc34e2cbd..bbf3c259d 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/packages/ui/preview/src/Preview.tsx @@ -45,7 +45,7 @@ export const Preview = forwardRef( onClose, src, previewWatermarkProps, - ifAllowDownload = false, + ifAllowDownload = true, }, ref ) => { @@ -319,20 +319,7 @@ export const Preview = forwardRef( )} - + )} diff --git a/packages/ui/preview/stories/banned.stories.tsx b/packages/ui/preview/stories/banned.stories.tsx new file mode 100644 index 000000000..14d5c3c9b --- /dev/null +++ b/packages/ui/preview/stories/banned.stories.tsx @@ -0,0 +1,51 @@ +import React from 'react' +import Preview from '../src' +import Grid from '@hi-ui/grid' + +/** + * @title 禁止右键下载 + */ +export const Banned = () => { + const [showIndex, setShowIndex] = React.useState(-1) + const [images] = React.useState([ + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_4.png', + ]) + + return ( + <> +

Banned

+
+ { + setShowIndex(-1) + }} + /> + + + {images.map((url, index) => { + return ( + +
+ { + setShowIndex(index) + }} + /> +
+ + ) + })} + +
+ + ) +} diff --git a/packages/ui/preview/stories/index.stories.tsx b/packages/ui/preview/stories/index.stories.tsx index 2a2e3581e..d74e26467 100644 --- a/packages/ui/preview/stories/index.stories.tsx +++ b/packages/ui/preview/stories/index.stories.tsx @@ -3,6 +3,8 @@ import Preview from '../src' export * from './basic.stories' export * from './multiple.stories' +export * from './watermark.stories' +export * from './banned.stories' export default { title: 'Data Display/Preview', diff --git a/packages/ui/preview/stories/watermark.stories.tsx b/packages/ui/preview/stories/watermark.stories.tsx new file mode 100644 index 000000000..49b6a76a3 --- /dev/null +++ b/packages/ui/preview/stories/watermark.stories.tsx @@ -0,0 +1,62 @@ +import React from 'react' +import Preview from '../src' +import Grid from '@hi-ui/grid' + +/** + * @title 添加水印 + */ +export const Watermark = () => { + const [showIndex, setShowIndex] = React.useState(-1) + const [images] = React.useState([ + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_4.png', + ]) + + return ( + <> +

Watermark

+
+ { + setShowIndex(-1) + }} + previewWatermarkProps={{ + content: ['HiUI', '做中台，就用 HiUI'], + style: { + pointerEvents: 'none', + position: 'fixed', + top: 0, + right: 0, + bottom: 0, + left: 0, + zIndex: 2048, + }, + }} + /> + + + {images.map((url, index) => { + return ( + +
+ { + setShowIndex(index) + }} + /> +
+ + ) + })} + +
+ + ) +} From 4ab05e0e2d20f854cdf9bace06cc18c5045d3c79 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 9 May 2024 19:00:53 +0800 Subject: [PATCH 4/6] =?UTF-8?q?chore(preview):=20=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=A7=84=E8=8C=83=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/preview/src/Preview.tsx | 33 +++++++++---------- .../ui/preview/stories/banned.stories.tsx | 2 +- .../ui/preview/stories/watermark.stories.tsx | 2 +- 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index bbf3c259d..67c0ed360 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/packages/ui/preview/src/Preview.tsx @@ -44,8 +44,8 @@ export const Preview = forwardRef( onError, onClose, src, - previewWatermarkProps, - ifAllowDownload = true, + watermarkProps, + disableDownload = false, }, ref ) => { @@ -69,10 +69,13 @@ export const Preview = forwardRef( const isMultiple = useMemo(() => Array.isArray(src) && src.length > 1, [src]) // 图片加水印 - const [waterMarkElement, setWaterMarkElement] = useState(undefined) + const waterMarkRef = useRef(undefined) + useEffect(() => { if (visible) { - setWaterMarkElement(document.querySelector(`.${prefixCls}__box`) as HTMLDivElement) + waterMarkRef.current = document.querySelector( + `.${prefixCls}__img-wrapper` + ) as HTMLDivElement } }, [visible]) @@ -81,13 +84,10 @@ export const Preview = forwardRef( const handleContextMenu = (evt: MouseEvent) => { evt.preventDefault() } - if (imgRef.current && !ifAllowDownload && visible) { - imgRef.current.addEventListener('contextmenu', handleContextMenu) - } - return () => { - imgRef.current?.removeEventListener('contextmenu', handleContextMenu) + if (imgRef.current && disableDownload && visible) { + imgRef.current.oncontextmenu = handleContextMenu } - }, [imgRef, visible, ifAllowDownload]) + }, [imgRef, visible, disableDownload]) // 重置图片 const resetTransform = useCallback(() => { @@ -251,7 +251,7 @@ export const Preview = forwardRef( onKeyDown={handleKeyDown} >
( onMouseUp={onMoveEnd} src={Array.isArray(src) ? src[active] : src} className={`${prefixCls}__image`} - // style={{ - // transform: `scale(${imgTransform.scale}, ${imgTransform.scale}) translate(${imgTransform.translateX}px,${imgTransform.translateY}px) rotate(${imgTransform.rotate}deg)`, - // }} />
@@ -319,7 +316,7 @@ export const Preview = forwardRef( )}
- + )} @@ -352,11 +349,11 @@ export interface PreviewProps extends Omit, 'onError'> { /** * 设置图片水印 */ - previewWatermarkProps?: Omit + watermarkProps?: Omit /** - * 是否允许右键下载图片 + * 是否禁止右键下载图片 */ - ifAllowDownload?: boolean + disableDownload?: boolean /** * 加载错误回调 */ diff --git a/packages/ui/preview/stories/banned.stories.tsx b/packages/ui/preview/stories/banned.stories.tsx index 14d5c3c9b..6663968c8 100644 --- a/packages/ui/preview/stories/banned.stories.tsx +++ b/packages/ui/preview/stories/banned.stories.tsx @@ -22,7 +22,7 @@ export const Banned = () => { title={`pic_${showIndex}.png`} src={images[showIndex]} visible={showIndex !== -1} - ifAllowDownload={false} + disableDownload={true} onClose={() => { setShowIndex(-1) }} diff --git a/packages/ui/preview/stories/watermark.stories.tsx b/packages/ui/preview/stories/watermark.stories.tsx index 49b6a76a3..a6b359efa 100644 --- a/packages/ui/preview/stories/watermark.stories.tsx +++ b/packages/ui/preview/stories/watermark.stories.tsx @@ -25,7 +25,7 @@ export const Watermark = () => { onClose={() => { setShowIndex(-1) }} - previewWatermarkProps={{ + watermarkProps={{ content: ['HiUI', '做中台，就用 HiUI'], style: { pointerEvents: 'none', From 22d2eab5711dee7b7e0a9c045cc7915a624b02e8 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Fri, 10 May 2024 16:37:27 +0800 Subject: [PATCH 5/6] =?UTF-8?q?chore(preview):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=E7=A0=81(#2808)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/preview/src/Preview.tsx | 41 ++++++++----------- packages/ui/preview/src/styles/preview.scss | 4 ++ .../ui/preview/stories/banned.stories.tsx | 2 +- .../ui/preview/stories/watermark.stories.tsx | 1 + 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index 67c0ed360..2f768a693 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/packages/ui/preview/src/Preview.tsx @@ -45,7 +45,8 @@ export const Preview = forwardRef( onClose, src, watermarkProps, - disableDownload = false, + disabledDownload = false, + disabledPortal = true, }, ref ) => { @@ -69,25 +70,11 @@ export const Preview = forwardRef( const isMultiple = useMemo(() => Array.isArray(src) && src.length > 1, [src]) // 图片加水印 - const waterMarkRef = useRef(undefined) + const [watermarkContainerRef, setWatermarkContainerRef] = useState(null) - useEffect(() => { - if (visible) { - waterMarkRef.current = document.querySelector( - `.${prefixCls}__img-wrapper` - ) as HTMLDivElement - } - }, [visible]) - - // 图片是否允许下载 - useEffect(() => { - const handleContextMenu = (evt: MouseEvent) => { - evt.preventDefault() - } - if (imgRef.current && disableDownload && visible) { - imgRef.current.oncontextmenu = handleContextMenu - } - }, [imgRef, visible, disableDownload]) + const handleContextMenu = useLatestCallback((evt: React.MouseEvent) => { + evt.preventDefault() + }) // 重置图片 const resetTransform = useCallback(() => { @@ -252,10 +239,11 @@ export const Preview = forwardRef( >
{ + setWatermarkContainerRef(e) + }} style={{ - display: 'inline-block', transform: `scale(${imgTransform.scale}, ${imgTransform.scale}) translate(${imgTransform.translateX}px,${imgTransform.translateY}px) rotate(${imgTransform.rotate}deg)`, - zIndex: 1, }} > ( onError={onError} onMouseDown={onMoveStart} onMouseUp={onMoveEnd} + onContextMenu={disabledDownload ? handleContextMenu : undefined} src={Array.isArray(src) ? src[active] : src} className={`${prefixCls}__image`} /> @@ -316,7 +305,9 @@ export const Preview = forwardRef( )}
- + {!disabledPortal && ( + + )} )} @@ -346,6 +337,10 @@ export interface PreviewProps extends Omit, 'onError'> { * 当前预览图片索引 */ defaultCurrent?: number + /** + * 禁止挂载水印 + */ + disabledPortal?: boolean /** * 设置图片水印 */ @@ -353,7 +348,7 @@ export interface PreviewProps extends Omit, 'onError'> { /** * 是否禁止右键下载图片 */ - disableDownload?: boolean + disabledDownload?: boolean /** * 加载错误回调 */ diff --git a/packages/ui/preview/src/styles/preview.scss b/packages/ui/preview/src/styles/preview.scss index 5f3659cb4..8b80e80b4 100644 --- a/packages/ui/preview/src/styles/preview.scss +++ b/packages/ui/preview/src/styles/preview.scss @@ -152,4 +152,8 @@ $prefix: '#{$component-prefix}-preview' !default; pointer-events: auto; display: inline-block; } + + &__img-wrapper { + display: inline-block; + } } diff --git a/packages/ui/preview/stories/banned.stories.tsx b/packages/ui/preview/stories/banned.stories.tsx index 6663968c8..603623e0e 100644 --- a/packages/ui/preview/stories/banned.stories.tsx +++ b/packages/ui/preview/stories/banned.stories.tsx @@ -22,7 +22,7 @@ export const Banned = () => { title={`pic_${showIndex}.png`} src={images[showIndex]} visible={showIndex !== -1} - disableDownload={true} + disabledDownload={true} onClose={() => { setShowIndex(-1) }} diff --git a/packages/ui/preview/stories/watermark.stories.tsx b/packages/ui/preview/stories/watermark.stories.tsx index a6b359efa..197baf97c 100644 --- a/packages/ui/preview/stories/watermark.stories.tsx +++ b/packages/ui/preview/stories/watermark.stories.tsx @@ -25,6 +25,7 @@ export const Watermark = () => { onClose={() => { setShowIndex(-1) }} + disabledPortal={false} watermarkProps={{ content: ['HiUI', '做中台，就用 HiUI'], style: { From e133da05d0b1a3f4083f3f8777d21721fcc421ad Mon Sep 17 00:00:00 2001 From: xiamiao Date: Fri, 10 May 2024 16:57:33 +0800 Subject: [PATCH 6/6] =?UTF-8?q?chore(preview):=20=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E4=BC=98=E5=8C=96(#2808)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/preview/src/Preview.tsx | 7 +------ packages/ui/preview/stories/watermark.stories.tsx | 1 - 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index 2f768a693..32f89a6b1 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/packages/ui/preview/src/Preview.tsx @@ -46,7 +46,6 @@ export const Preview = forwardRef( src, watermarkProps, disabledDownload = false, - disabledPortal = true, }, ref ) => { @@ -305,7 +304,7 @@ export const Preview = forwardRef( )} - {!disabledPortal && ( + {watermarkProps && ( )} @@ -337,10 +336,6 @@ export interface PreviewProps extends Omit, 'onError'> { * 当前预览图片索引 */ defaultCurrent?: number - /** - * 禁止挂载水印 - */ - disabledPortal?: boolean /** * 设置图片水印 */ diff --git a/packages/ui/preview/stories/watermark.stories.tsx b/packages/ui/preview/stories/watermark.stories.tsx index 197baf97c..a6b359efa 100644 --- a/packages/ui/preview/stories/watermark.stories.tsx +++ b/packages/ui/preview/stories/watermark.stories.tsx @@ -25,7 +25,6 @@ export const Watermark = () => { onClose={() => { setShowIndex(-1) }} - disabledPortal={false} watermarkProps={{ content: ['HiUI', '做中台，就用 HiUI'], style: {