fix(frontend): chunk PDFs are single-page — always render page 1

Chunk PDFs like 'NEC4 ACC_page_5.pdf' contain only 1 page (the extracted
page). Passing the original page number (e.g. 5) to <Page> caused
'Invalid page request' because the file only has 1 page.

- Always render pageNumber={1} for <Page> component
- Display originalPage in UI title to show source page number
- Disable prev/next navigation since chunk PDFs are single-page
This commit is contained in:
Woody 2026-04-25 17:56:06 +08:00
parent e34067fe9c
commit 15b17a74ff
1 changed files with 7 additions and 11 deletions

View File

@ -13,11 +13,11 @@ const DEFAULT_ZOOM_INDEX = 2
export const PdfViewerPage: React.FC = () => { export const PdfViewerPage: React.FC = () => {
const [searchParams] = useSearchParams() const [searchParams] = useSearchParams()
const pdfUrl = searchParams.get('url') ?? '' const pdfUrl = searchParams.get('url') ?? ''
const initialPage = parseInt(searchParams.get('page') ?? '1', 10) const originalPage = parseInt(searchParams.get('page') ?? '1', 10)
const title = searchParams.get('title') ?? 'PDF Viewer' const title = searchParams.get('title') ?? 'PDF Viewer'
const [numPages, setNumPages] = useState<number>(0) const [numPages, setNumPages] = useState<number>(0)
const [pageNumber, setPageNumber] = useState<number>(initialPage) const [pageNumber] = useState<number>(1)
const [zoomIndex, setZoomIndex] = useState<number>(DEFAULT_ZOOM_INDEX) const [zoomIndex, setZoomIndex] = useState<number>(DEFAULT_ZOOM_INDEX)
const [loadError, setLoadError] = useState<string | null>(null) const [loadError, setLoadError] = useState<string | null>(null)
const [pageError, setPageError] = useState<string | null>(null) const [pageError, setPageError] = useState<string | null>(null)
@ -36,8 +36,6 @@ export const PdfViewerPage: React.FC = () => {
setPageError(error.message) setPageError(error.message)
}, []) }, [])
const goToPrevPage = () => setPageNumber((prev) => Math.max(1, prev - 1))
const goToNextPage = () => setPageNumber((prev) => Math.min(numPages, prev + 1))
const zoomIn = () => setZoomIndex((prev) => Math.min(ZOOM_LEVELS.length - 1, prev + 1)) const zoomIn = () => setZoomIndex((prev) => Math.min(ZOOM_LEVELS.length - 1, prev + 1))
const zoomOut = () => setZoomIndex((prev) => Math.max(0, prev - 1)) const zoomOut = () => setZoomIndex((prev) => Math.max(0, prev - 1))
@ -61,19 +59,17 @@ export const PdfViewerPage: React.FC = () => {
</Link> </Link>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <button
onClick={goToPrevPage} disabled
disabled={pageNumber <= 1} className="p-1 rounded disabled:opacity-30 disabled:cursor-not-allowed"
className="p-1 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
</button> </button>
<span className="text-sm text-gray-700 min-w-[120px] text-center"> <span className="text-sm text-gray-700 min-w-[120px] text-center">
{title} Page {pageNumber}{numPages > 0 ? ` of ${numPages}` : ''} {title} Page {originalPage}
</span> </span>
<button <button
onClick={goToNextPage} disabled
disabled={pageNumber >= numPages} className="p-1 rounded disabled:opacity-30 disabled:cursor-not-allowed"
className="p-1 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
> >
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />
</button> </button>