opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-09-08 02:43:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): name image previewer actions (#40283)

Browse Source
This commit is contained in:
yyh 2026-08-10 10:56:14 +08:00 committed by GitHub
parent 2a66b49bc7
commit 7295d9306f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
View File

@ -32,15 +32,11 @@ const images = [
const successfulResponse = () => new Response(new Blob(['test'], { type: 'image/png' }))
const getPreviewButtons = () => {
const [closeButton, previousButton, nextButton] = screen.getAllByRole('button')
expect(closeButton).toBeInTheDocument()
expect(previousButton).toBeInTheDocument()
expect(nextButton).toBeInTheDocument()
return { closeButton: closeButton!, previousButton: previousButton!, nextButton: nextButton! }
}
const getPreviewButtons = () => ({
closeButton: screen.getByRole('button', { name: 'common.operation.close' }),
previousButton: screen.getByRole('button', { name: 'common.pagination.previous' }),
nextButton: screen.getByRole('button', { name: 'common.pagination.next' }),
})
describe('ImagePreviewer', () => {
beforeEach(() => {
@ -137,10 +133,9 @@ describe('ImagePreviewer', () => {
render(<ImagePreviewer images={images} onClose={vi.fn()} />)
expect(await screen.findByText(/Failed to load image/)).toHaveTextContent(images[0]!.url)
const [, retryButton] = screen.getAllByRole('button')
expect(retryButton).toBeInTheDocument()
const retryButton = screen.getByRole('button', { name: 'common.operation.retry' })
await user.click(retryButton!)
await user.click(retryButton)
expect(await screen.findByRole('img', { name: 'image1.png' })).toBeInTheDocument()
expect(mockFetch).toHaveBeenCalledTimes(4)

6
web/app/components/datasets/common/image-previewer/index.tsx
View File

@ -4,6 +4,7 @@ import { Kbd } from '@langgenius/dify-ui/kbd'
import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@remixicon/react'
import { formatForDisplay, useHotkey } from '@tanstack/react-hotkeys'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import { formatFileSize } from '@/utils/format'
@ -29,6 +30,7 @@ type ImagePreviewerProps = {
}
const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerProps) => {
const { t } = useTranslation()
const [currentIndex, setCurrentIndex] = useState(initialIndex)
const [cachedImages, setCachedImages] = useState<Record<string, CachedImage>>(() => {
return images.reduce(
@ -159,6 +161,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
<div className="absolute top-6 right-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
<Button
variant="tertiary"
aria-label={t(($) => $['operation.close'], { ns: 'common' })}
onClick={onClose}
className="size-9 rounded-[10px] p-0"
size="large"
@ -173,6 +176,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
<span>{`Failed to load image: ${currentImage!.url}. Please try again.`}</span>
<Button
variant="secondary"
aria-label={t(($) => $['operation.retry'], { ns: 'common' })}
onClick={() => retryImage(currentImage!)}
className="size-9 rounded-full p-0"
size="large"
@ -199,6 +203,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
)}
<Button
variant="secondary"
aria-label={t(($) => $['pagination.previous'], { ns: 'common' })}
onClick={prevImage}
className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
disabled={currentIndex === 0}
@ -208,6 +213,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
</Button>
<Button
variant="secondary"
aria-label={t(($) => $['pagination.next'], { ns: 'common' })}
onClick={nextImage}
className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
disabled={currentIndex === images.length - 1}