fix(image-viewer): optimize the image download logic

packages/components/image-viewer/ImageViewer.tsx

@@ -1,19 +1,21 @@
 import React, { useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { isFunction, isNumber } from 'lodash-es';
+
+import { formatImages } from '@tdesign/common-js/image-viewer/utils';
+import { canUseDocument } from '../_util/dom';
+import useAttach from '../hooks/useAttach';
+import useControlled from '../hooks/useControlled';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { ImageModal } from './ImageViewerModal';
 import { imageViewerDefaultProps } from './defaultProps';
-import type { TdImageViewerProps } from './type';
-import type { ImageModalProps } from './ImageViewerModal';
-import type { StyledProps, TNode } from '../common';
 import useImageScale from './hooks/useImageScale';
-import useList from './hooks/useList';
-import useViewerScale from './hooks/useViewerScale';
-import useControlled from '../hooks/useControlled';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { canUseDocument } from '../_util/dom';
-import useAttach from '../hooks/useAttach';
 import useIndex from './hooks/useIndex';
+import useViewerScale from './hooks/useViewerScale';
+
+import type { StyledProps, TNode } from '../common';
+import type { ImageModalProps } from './ImageViewerModal';
+import type { TdImageViewerProps } from './type';
 
 export interface ImageViewerProps extends TdImageViewerProps, StyledProps {}
 
@@ -27,7 +29,8 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
   });
 
   const [visibled, setVisibled] = useState(false);
-  const list = useList(images);
+  const imageList = useMemo(() => formatImages(images), [images]);
+
   const { index, setIndex } = useIndex(props, images);
   const imageScale = useImageScale(imageScaleD);
   const viewerScale = useViewerScale(viewerScaleD);
@@ -70,7 +73,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
           <ImageModal
             title={title}
             visible={visible}
-            images={list}
+            images={imageList}
             isMini={isMini}
             imageScale={imageScale}
             viewerScale={viewerScale}

packages/components/image-viewer/ImageViewerModal.tsx

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { isArray, isFunction } from 'lodash-es';
 import {
@@ -7,24 +7,26 @@ import {
   MirrorIcon as TdMirrorIcon,
   RotationIcon as TdRotationIcon,
 } from 'tdesign-icons-react';
+
+import { downloadImage } from '@tdesign/common-js/image-viewer/utils';
 import { largeNumberToFixed } from '@tdesign/common-js/input-number/large-number';
-import type { TNode } from '../common';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import useImagePreviewUrl from '../hooks/useImagePreviewUrl';
 import Image from '../image';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
 import { TooltipLite } from '../tooltip';
-import type { ImageViewerProps } from './ImageViewer';
 import { ImageModalMini } from './ImageViewerMini';
 import useIconMap from './hooks/useIconMap';
 import useIndex from './hooks/useIndex';
 import useMirror from './hooks/useMirror';
 import usePosition from './hooks/usePosition';
 import useRotate from './hooks/useRotate';
 import useScale from './hooks/useScale';
+
+import type { TNode } from '../common';
+import type { ImageViewerProps } from './ImageViewer';
 import type { ImageInfo, ImageScale, ImageViewerScale, TdImageViewerProps } from './type';
-import { downloadFile } from './utils';
 
 const ImageError = ({ errorText }: { errorText: string }) => {
   const { classPrefix } = useConfig();
@@ -196,7 +198,7 @@ interface ImageModalIconProps {
   className?: string;
   disabled?: boolean;
   isRange?: boolean;
-  onClick?: (e: MouseEvent<HTMLElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
 const ImageModalIcon = ({ onClick, className, disabled, isRange, name, label, size = '16px' }: ImageModalIconProps) => {
@@ -304,7 +306,7 @@ export const ImageViewerUtils: React.FC<ImageViewerUtilsProps> = ({
                 onDownload(currentImage.mainImage);
                 return;
               }
-              downloadFile(currentImage.mainImage);
+              downloadImage(currentImage.mainImage);
             }}
           />
         )}
@@ -396,7 +398,10 @@ export interface ImageModalProps {
   closeBtn: boolean | TNode;
   closeOnEscKeydown?: boolean;
   imageReferrerpolicy?: ImageViewerProps['imageReferrerpolicy'];
-  onClose: (context: { trigger: 'close-btn' | 'overlay' | 'esc'; e: MouseEvent<HTMLElement> | KeyboardEvent }) => void;
+  onClose: (context: {
+    trigger: 'close-btn' | 'overlay' | 'esc';
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent;
+  }) => void;
   onOpen: () => void;
   onDownload?: TdImageViewerProps['onDownload'];
   onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' | 'current' }) => void;
@@ -514,7 +519,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
         name="close"
         size="24px"
         className={`${classPrefix}-image-viewer__modal-close-bt `}
-        onClick={(e: MouseEvent<HTMLElement>) => onClose && onClose({ trigger: 'close-btn', e })}
+        onClick={(e: React.MouseEvent<HTMLElement>) => onClose && onClose({ trigger: 'close-btn', e })}
       />
     );
   } else if (isFunction(closeBtn)) closeNode = closeBtn({ onClose, onOpen });
@@ -529,7 +534,7 @@ export const ImageModal: React.FC<ImageModalProps> = (props) => {
       {!!showOverlay && (
         <div
           className={`${classPrefix}-image-viewer__modal-mask`}
-          onClick={(e: MouseEvent<HTMLElement>) => closeOnOverlay && onClose?.({ trigger: 'overlay', e })}
+          onClick={(e: React.MouseEvent<HTMLElement>) => closeOnOverlay && onClose?.({ trigger: 'overlay', e })}
         />
       )}
       {images.length > 1 && (