632 lines
24 KiB
TypeScript
632 lines
24 KiB
TypeScript
/**
|
||
* PDF 预览组件（设计稿 7c-简化C-极简 · 中栏实现）
|
||
*
|
||
* 与 PdfPreview.tsx 对齐的 props 签名，可直接替换用于测试。
|
||
* 变化：
|
||
* - 单页视口（非连续滚动）
|
||
* - 顶部工具栏：略缩图开关、上/下页、页码、缩放、当前高亮、全屏
|
||
* - 左侧 132px 略缩图面板（filtered / all 两种模式），真实 react-pdf 渲染
|
||
* - 状态徽标由 reviewPoints 聚合得到
|
||
*/
|
||
import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
|
||
import { Document, Page, pdfjs } from 'react-pdf';
|
||
import { toastService } from '~/components/ui/Toast';
|
||
import type { ReviewPoint } from '../ReviewPointsList';
|
||
|
||
import 'react-pdf/dist/esm/Page/TextLayer.css';
|
||
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
|
||
|
||
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
|
||
|
||
// ============================================================
|
||
// 类型
|
||
// ============================================================
|
||
type WorstStatus = 'fail' | 'warn' | 'pending' | 'pass';
|
||
|
||
interface PageAgg {
|
||
worst: WorstStatus;
|
||
count: number;
|
||
issues: number;
|
||
}
|
||
|
||
interface PdfPreviewProps {
|
||
filePath: string;
|
||
targetPage?: number;
|
||
charPositions?: Array<{ box: number[][]; char: string; score: number }>;
|
||
isStructuredView?: boolean;
|
||
activeReviewPointResultId?: string | null;
|
||
pageOffset?: number;
|
||
onNumPagesChange?: (numPages: number) => void;
|
||
onZoomChange?: (zoomLevel: number) => void;
|
||
|
||
// 新增（可选）：用于派生略缩图徽标和当前高亮标签
|
||
reviewPoints?: ReviewPoint[];
|
||
}
|
||
|
||
// ============================================================
|
||
// ReviewPoint → 状态映射
|
||
// ============================================================
|
||
const STATUS_ORDER: Record<WorstStatus, number> = { fail: 0, warn: 1, pending: 2, pass: 3 };
|
||
|
||
const STATUS_BADGE: Record<WorstStatus, { cls: string; ic: string }> = {
|
||
fail: { cls: 'bg-red-500', ic: 'ri-close-circle-fill' },
|
||
warn: { cls: 'bg-amber-500', ic: 'ri-lightbulb-flash-fill' },
|
||
pending: { cls: 'bg-orange-500', ic: 'ri-question-fill' },
|
||
pass: { cls: 'bg-emerald-500', ic: 'ri-checkbox-circle-fill' },
|
||
};
|
||
|
||
function classifyReviewPoint(p: ReviewPoint): WorstStatus | 'skipped' {
|
||
const status = p.status;
|
||
if (status === 'notApplicable' || status === 'not_applicable') return 'skipped';
|
||
if (p.result === true || (p.result === undefined && status === 'success')) return 'pass';
|
||
if (p.result === false) {
|
||
if (status === 'error') return 'fail';
|
||
if (status === 'warning' || status === 'info') return 'warn';
|
||
}
|
||
if (status === 'success') return 'pass';
|
||
if (status === 'warning' || status === 'info') return 'warn';
|
||
if (status === 'error') return 'fail';
|
||
return 'pass';
|
||
}
|
||
|
||
/** 把 ReviewPoint 涉及的所有页号（字段级）抽出 */
|
||
function getPointPages(p: ReviewPoint): number[] {
|
||
const set = new Set<number>();
|
||
const addMaybe = (v: unknown) => {
|
||
const n = typeof v === 'string' ? parseInt(v, 10) : typeof v === 'number' ? v : NaN;
|
||
if (Number.isFinite(n) && n > 0) set.add(n);
|
||
};
|
||
if (p.contentPage) Object.values(p.contentPage).forEach(addMaybe);
|
||
if (p.content) Object.values(p.content).forEach(v => addMaybe(v?.page));
|
||
return [...set].sort((a, b) => a - b);
|
||
}
|
||
|
||
/** 当前规则在某页涉及的字段名列表 */
|
||
function getFieldsOnPage(p: ReviewPoint, page: number): string[] {
|
||
const fields: string[] = [];
|
||
const matches = (v: unknown) => {
|
||
const n = typeof v === 'string' ? parseInt(v, 10) : typeof v === 'number' ? v : NaN;
|
||
return n === page;
|
||
};
|
||
if (p.contentPage) {
|
||
Object.entries(p.contentPage).forEach(([k, v]) => {
|
||
if (matches(v)) fields.push(k);
|
||
});
|
||
}
|
||
if (!fields.length && p.content) {
|
||
Object.entries(p.content).forEach(([k, v]) => {
|
||
if (matches(v?.page)) fields.push(k);
|
||
});
|
||
}
|
||
return fields;
|
||
}
|
||
|
||
// ============================================================
|
||
// 组件
|
||
// ============================================================
|
||
export function PdfPreviewTest({
|
||
filePath,
|
||
targetPage,
|
||
charPositions,
|
||
isStructuredView = false,
|
||
activeReviewPointResultId,
|
||
pageOffset = 0,
|
||
onNumPagesChange,
|
||
onZoomChange,
|
||
reviewPoints,
|
||
}: PdfPreviewProps) {
|
||
// ---------- 基础状态 ----------
|
||
const [numPages, setNumPages] = useState<number | null>(null);
|
||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||
const [zoomLevel, setZoomLevel] = useState(100);
|
||
const [loadError, setLoadError] = useState<string | null>(null);
|
||
|
||
// 略缩图面板
|
||
const [showThumbs, setShowThumbs] = useState(true);
|
||
const [thumbMode, setThumbMode] = useState<'filtered' | 'all'>('filtered');
|
||
|
||
// 坐标校准（保留主视口高亮逻辑）
|
||
const [coordinateScale, setCoordinateScale] = useState(0.83);
|
||
const [isScaleAutoCalculated, setIsScaleAutoCalculated] = useState(false);
|
||
|
||
// 页码跳转输入
|
||
const [pageInputValue, setPageInputValue] = useState<string>('');
|
||
|
||
const viewportRef = useRef<HTMLDivElement>(null);
|
||
const thumbsPanelRef = useRef<HTMLDivElement>(null);
|
||
|
||
// ---------- 派生数据 ----------
|
||
const fileUrl = useMemo(
|
||
() => `/api/pdf-proxy?path=${encodeURIComponent(filePath)}`,
|
||
[filePath],
|
||
);
|
||
|
||
const activePoint = useMemo<ReviewPoint | undefined>(
|
||
() => reviewPoints?.find(p => p.id === activeReviewPointResultId),
|
||
[reviewPoints, activeReviewPointResultId],
|
||
);
|
||
|
||
// 当前规则涉及的页（字段级，带 pageOffset）
|
||
const rulePages = useMemo<number[]>(() => {
|
||
if (!activePoint) return [];
|
||
return getPointPages(activePoint).map(p => p + pageOffset);
|
||
}, [activePoint, pageOffset]);
|
||
|
||
// 每页状态聚合
|
||
const pageStatusMap = useMemo<Map<number, PageAgg>>(() => {
|
||
const m = new Map<number, PageAgg>();
|
||
if (!reviewPoints?.length) return m;
|
||
reviewPoints.forEach(p => {
|
||
const cls = classifyReviewPoint(p);
|
||
if (cls === 'skipped') return;
|
||
const pages = getPointPages(p).map(x => x + pageOffset);
|
||
pages.forEach(pg => {
|
||
const cur = m.get(pg) || { worst: 'pass', count: 0, issues: 0 };
|
||
if (STATUS_ORDER[cls] < STATUS_ORDER[cur.worst]) cur.worst = cls;
|
||
cur.count += 1;
|
||
if (cls !== 'pass') cur.issues += 1;
|
||
m.set(pg, cur);
|
||
});
|
||
});
|
||
return m;
|
||
}, [reviewPoints, pageOffset]);
|
||
|
||
// 当前高亮标签（工具栏右侧）
|
||
const highlightLabel = useMemo(() => {
|
||
if (!activePoint) return null;
|
||
const code = activePoint.pointCode || activePoint.id;
|
||
const name = activePoint.pointName || activePoint.title || '';
|
||
return `${code}${name ? ' · ' + name : ''}`;
|
||
}, [activePoint]);
|
||
|
||
// ---------- 通知上层 ----------
|
||
useEffect(() => {
|
||
if (numPages && onNumPagesChange) onNumPagesChange(numPages);
|
||
}, [numPages, onNumPagesChange]);
|
||
|
||
useEffect(() => {
|
||
if (onZoomChange) onZoomChange(zoomLevel);
|
||
}, [zoomLevel, onZoomChange]);
|
||
|
||
// ---------- targetPage 跳转 ----------
|
||
useEffect(() => {
|
||
if (targetPage && numPages) {
|
||
const next = Math.max(1, Math.min(numPages, targetPage + pageOffset));
|
||
setCurrentPage(next);
|
||
}
|
||
}, [targetPage, numPages, pageOffset, activeReviewPointResultId]);
|
||
|
||
// ---------- 切换规则：重置略缩图模式为 filtered ----------
|
||
useEffect(() => {
|
||
if (activeReviewPointResultId) setThumbMode('filtered');
|
||
}, [activeReviewPointResultId]);
|
||
|
||
// ---------- 文件路径变化：重置坐标自动计算 ----------
|
||
useEffect(() => {
|
||
setIsScaleAutoCalculated(false);
|
||
}, [filePath]);
|
||
|
||
// ---------- 略缩图滚动到当前页 ----------
|
||
useEffect(() => {
|
||
const host = thumbsPanelRef.current;
|
||
if (!host) return;
|
||
const el = host.querySelector<HTMLElement>(`[data-thumb-page="${currentPage}"]`);
|
||
if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||
}, [currentPage, thumbMode, showThumbs]);
|
||
|
||
// ---------- PDF 加载 ----------
|
||
const onDocumentLoadSuccess = useCallback(
|
||
({ numPages: n }: { numPages: number }) => {
|
||
setNumPages(n);
|
||
// 初始页：优先 targetPage，否则第 1 页
|
||
if (targetPage) {
|
||
setCurrentPage(Math.max(1, Math.min(n, targetPage + pageOffset)));
|
||
} else {
|
||
setCurrentPage(p => Math.max(1, Math.min(n, p)));
|
||
}
|
||
},
|
||
[targetPage, pageOffset],
|
||
);
|
||
|
||
const onDocumentLoadError = useCallback((error: Error) => {
|
||
console.error('PDF加载错误:', error);
|
||
setLoadError('PDF文档加载失败：' + (error.message || '未知错误'));
|
||
}, []);
|
||
|
||
// ---------- 主页面加载（自动校准坐标） ----------
|
||
const onMainPageLoadSuccess = useCallback(
|
||
(page: any) => {
|
||
if (isScaleAutoCalculated) return;
|
||
setTimeout(() => {
|
||
const pdfOriginalWidthPt = page.view?.[2] || page.originalWidth || page.width;
|
||
const canvas = viewportRef.current?.querySelector(
|
||
'.pdf-main-canvas .react-pdf__Page__canvas',
|
||
) as HTMLCanvasElement | null;
|
||
if (canvas && pdfOriginalWidthPt) {
|
||
const canvasDisplayWidth = canvas.offsetWidth;
|
||
const currentScale = zoomLevel / 100;
|
||
const autoScale = (canvasDisplayWidth / currentScale) / pdfOriginalWidthPt;
|
||
setCoordinateScale(autoScale);
|
||
setIsScaleAutoCalculated(true);
|
||
}
|
||
}, 200);
|
||
},
|
||
[isScaleAutoCalculated, zoomLevel],
|
||
);
|
||
|
||
// ---------- 翻页 / 缩放 ----------
|
||
const goPrev = () => setCurrentPage(p => Math.max(1, p - 1));
|
||
const goNext = () => setCurrentPage(p => Math.min(numPages || p, p + 1));
|
||
const zoomIn = () => setZoomLevel(z => Math.min(200, z + 10));
|
||
const zoomOut = () => setZoomLevel(z => Math.max(50, z - 10));
|
||
|
||
const jumpToHighlight = () => {
|
||
if (!activePoint || rulePages.length === 0) {
|
||
toastService.info('当前规则无关联页');
|
||
return;
|
||
}
|
||
const first = rulePages[0];
|
||
if (numPages && first >= 1 && first <= numPages) setCurrentPage(first);
|
||
};
|
||
|
||
const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
setPageInputValue(e.target.value.replace(/\D/g, ''));
|
||
};
|
||
const handlePageJump = () => {
|
||
if (!pageInputValue || !numPages) return;
|
||
const n = parseInt(pageInputValue, 10);
|
||
if (n > 0 && n <= numPages) {
|
||
setCurrentPage(n);
|
||
setPageInputValue('');
|
||
} else {
|
||
toastService.warning(`请输入有效页码 (1-${numPages})`);
|
||
setPageInputValue('');
|
||
}
|
||
};
|
||
|
||
// ---------- 高亮矩形（对齐原 PdfPreview 的字符位置） ----------
|
||
const mainHighlight = useMemo(() => {
|
||
if (!charPositions?.length || !targetPage) {
|
||
console.log('[PdfPreviewTest] highlight skipped: no charPositions/targetPage', {
|
||
hasCharPositions: !!charPositions?.length,
|
||
targetPage,
|
||
});
|
||
return null;
|
||
}
|
||
if (currentPage !== targetPage + pageOffset) {
|
||
console.log('[PdfPreviewTest] highlight skipped: page mismatch', {
|
||
currentPage,
|
||
targetPage,
|
||
pageOffset,
|
||
expected: targetPage + pageOffset,
|
||
});
|
||
return null;
|
||
}
|
||
|
||
const scale = zoomLevel / 100;
|
||
let minX = Infinity,
|
||
minY = Infinity,
|
||
maxX = -Infinity,
|
||
maxY = -Infinity;
|
||
const chars: string[] = [];
|
||
charPositions.forEach(cp => {
|
||
chars.push(cp.char);
|
||
cp.box.forEach(pt => {
|
||
const [x, y] = pt;
|
||
if (x < minX) minX = x;
|
||
if (x > maxX) maxX = x;
|
||
if (y < minY) minY = y;
|
||
if (y > maxY) maxY = y;
|
||
});
|
||
});
|
||
return {
|
||
x: minX * coordinateScale * scale,
|
||
y: minY * coordinateScale * scale,
|
||
width: (maxX - minX) * coordinateScale * scale,
|
||
height: (maxY - minY) * coordinateScale * scale,
|
||
text: chars.join(''),
|
||
};
|
||
}, [charPositions, targetPage, currentPage, pageOffset, zoomLevel, coordinateScale]);
|
||
|
||
// ---------- 略缩图可见页列表 ----------
|
||
const effThumbMode: 'filtered' | 'all' =
|
||
thumbMode === 'filtered' && rulePages.length > 0 ? 'filtered' : 'all';
|
||
|
||
const thumbPages = useMemo<number[]>(() => {
|
||
if (!numPages) return [];
|
||
if (effThumbMode === 'filtered') return rulePages.filter(p => p >= 1 && p <= numPages);
|
||
return Array.from({ length: numPages }, (_, i) => i + 1);
|
||
}, [effThumbMode, rulePages, numPages]);
|
||
|
||
// ============================================================
|
||
// 渲染
|
||
// ============================================================
|
||
if (loadError) {
|
||
return (
|
||
<div className="w-full h-full grid place-items-center text-red-500 p-4">{loadError}</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Document
|
||
file={fileUrl}
|
||
onLoadSuccess={onDocumentLoadSuccess}
|
||
onLoadError={onDocumentLoadError}
|
||
className="flex flex-col min-h-0 w-full h-full"
|
||
loading={<div className="flex-1 grid place-items-center text-slate-400 text-sm">PDF 加载中…</div>}
|
||
error={<div className="flex-1 grid place-items-center text-red-500">PDF 文档加载失败</div>}
|
||
noData={<div className="flex-1 grid place-items-center text-slate-400">无数据</div>}
|
||
>
|
||
<section
|
||
className="flex flex-col flex-1 min-h-0 w-full bg-slate-100 border border-slate-200 rounded"
|
||
>
|
||
{/* ═════ 顶部工具栏 ═════ */}
|
||
<div className="shrink-0 h-11 px-4 flex items-center justify-between bg-white border-b border-slate-200 text-[12.5px] text-slate-600">
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => setShowThumbs(s => !s)}
|
||
className={`w-5 h-7 grid place-items-center rounded hover:bg-slate-100 ${
|
||
showThumbs ? 'text-primary' : 'text-slate-400'
|
||
}`}
|
||
title="显示/隐藏页面缩略图"
|
||
>
|
||
<i className="ri-layout-masonry-line"></i>
|
||
</button>
|
||
<span className="mx-0 text-slate-300">|</span>
|
||
<button
|
||
onClick={goPrev}
|
||
disabled={currentPage <= 1}
|
||
className="w-5 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
|
||
title="上一页"
|
||
>
|
||
<i className="ri-arrow-left-s-line"></i>
|
||
</button>
|
||
<span className="font-mono tabular-nums">
|
||
<input
|
||
type="text"
|
||
value={pageInputValue !== '' ? pageInputValue : currentPage}
|
||
onChange={handlePageInputChange}
|
||
onFocus={e => e.currentTarget.select()}
|
||
onBlur={handlePageJump}
|
||
onKeyDown={e => {
|
||
if (e.key === 'Enter') handlePageJump();
|
||
}}
|
||
className="w-5 h-6 text-center bg-slate-50 border border-slate-200 rounded text-[12px] font-mono outline-none focus:border-primary"
|
||
/>
|
||
<span className="text-slate-400"> / {numPages ?? '-'}</span>
|
||
</span>
|
||
<button
|
||
onClick={goNext}
|
||
disabled={!numPages || currentPage >= numPages}
|
||
className="w-5 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
|
||
title="下一页"
|
||
>
|
||
<i className="ri-arrow-right-s-line"></i>
|
||
</button>
|
||
<span className="mx-0 text-slate-300">|</span>
|
||
<button
|
||
onClick={zoomOut}
|
||
disabled={zoomLevel <= 50}
|
||
className="w-5 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40"
|
||
title="缩小"
|
||
>
|
||
<i className="ri-zoom-out-line"></i>
|
||
</button>
|
||
<span className="font-mono min-w-[42px] text-center">{zoomLevel}%</span>
|
||
<button
|
||
onClick={zoomIn}
|
||
disabled={zoomLevel >= 200}
|
||
className="w-5 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40"
|
||
title="放大"
|
||
>
|
||
<i className="ri-zoom-in-line"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 text-[11.5px] min-w-0">
|
||
{highlightLabel && (
|
||
<>
|
||
<span className="text-slate-400 shrink-0">当前高亮:</span>
|
||
<span
|
||
className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-50 text-amber-800 border border-amber-200 max-w-[220px]"
|
||
title={highlightLabel}
|
||
>
|
||
<i className="ri-focus-3-line shrink-0"></i>
|
||
<span className="truncate">{highlightLabel}</span>
|
||
</span>
|
||
<button
|
||
onClick={jumpToHighlight}
|
||
className="w-7 h-7 grid place-items-center rounded hover:bg-slate-100 shrink-0"
|
||
title="跳转到高亮页"
|
||
>
|
||
<i className="ri-crosshair-line"></i>
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ═════ 主体：略缩图 + 视口 ═════ */}
|
||
<div className="flex-1 min-h-0 flex min-w-0">
|
||
{/* ── 略缩图面板 ── */}
|
||
{showThumbs && (
|
||
<div className="w-[132px] shrink-0 bg-white border-r border-slate-200 flex flex-col min-h-0">
|
||
{/* 模式切换条 */}
|
||
<div className="shrink-0 px-2 py-2 border-b border-slate-100">
|
||
<div className="inline-flex rounded border border-slate-200 bg-slate-50 p-0.5 text-[10.5px] w-full">
|
||
<button
|
||
onClick={() => setThumbMode('filtered')}
|
||
disabled={rulePages.length === 0}
|
||
className={`flex-1 h-5 rounded font-medium ${
|
||
effThumbMode === 'filtered'
|
||
? 'bg-white shadow-sm text-primary'
|
||
: 'text-slate-500 hover:text-slate-700'
|
||
} ${rulePages.length === 0 ? 'opacity-40 cursor-not-allowed' : ''}`}
|
||
>
|
||
只看相关
|
||
</button>
|
||
<button
|
||
onClick={() => setThumbMode('all')}
|
||
className={`flex-1 h-5 rounded font-medium ${
|
||
effThumbMode === 'all'
|
||
? 'bg-white shadow-sm text-primary'
|
||
: 'text-slate-500 hover:text-slate-700'
|
||
}`}
|
||
>
|
||
全部 {numPages ?? ''}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 略缩图列表 */}
|
||
<div
|
||
ref={thumbsPanelRef}
|
||
className="flex-1 overflow-y-auto py-2 px-2 space-y-2"
|
||
>
|
||
{numPages === null ? (
|
||
<div className="text-center text-[11px] text-slate-400 py-4">加载中…</div>
|
||
) : thumbPages.length === 0 ? (
|
||
<div className="text-center text-[11px] text-slate-400 py-8">
|
||
<i className="ri-forbid-2-line text-2xl text-slate-300"></i>
|
||
<div className="mt-1">此规则无关联页面</div>
|
||
</div>
|
||
) : (
|
||
thumbPages.map(p => {
|
||
const info = pageStatusMap.get(p);
|
||
const isCur = p === currentPage;
|
||
const isRulePage = rulePages.includes(p);
|
||
|
||
let badge: React.ReactNode = null;
|
||
if (info) {
|
||
const b = STATUS_BADGE[info.worst];
|
||
const num = info.issues > 0 ? info.issues : info.worst === 'pass' ? '' : info.count;
|
||
badge = (
|
||
<span
|
||
className={`absolute top-1 right-1 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full text-[9px] font-semibold text-white ${b.cls} shadow ring-1 ring-white`}
|
||
>
|
||
{num ? num : <i className={`${b.ic} text-[9px]`}></i>}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
const frameCls = isCur
|
||
? 'ring-2 ring-[#00684a] shadow-md'
|
||
: effThumbMode === 'all' && isRulePage
|
||
? 'ring-1 ring-[#00684a]/40 shadow-sm'
|
||
: 'border border-slate-200 group-hover:border-slate-400 shadow-sm';
|
||
|
||
let fieldsLabel: React.ReactNode = null;
|
||
if (effThumbMode === 'filtered' && activePoint) {
|
||
const fs = getFieldsOnPage(activePoint, p - pageOffset);
|
||
const txt = fs.length ? fs.join(' · ') : '规则锚定页';
|
||
fieldsLabel = (
|
||
<div
|
||
className="text-[10px] leading-tight text-slate-500 text-center mt-0.5 line-clamp-2"
|
||
title={txt}
|
||
>
|
||
{txt}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<button
|
||
key={p}
|
||
data-thumb-page={p}
|
||
onClick={() => setCurrentPage(p)}
|
||
className="block w-full group"
|
||
title={`第 ${p} 页`}
|
||
>
|
||
<div className={`relative rounded overflow-hidden bg-white transition ${frameCls}`}>
|
||
<div className="w-full bg-gradient-to-b from-white to-slate-50 overflow-hidden">
|
||
<Page
|
||
pageNumber={p}
|
||
width={112}
|
||
renderTextLayer={false}
|
||
renderAnnotationLayer={false}
|
||
loading={<div className="w-full h-[150px] bg-slate-50" />}
|
||
error={<div className="w-full h-[150px] bg-slate-50" />}
|
||
/>
|
||
</div>
|
||
{badge}
|
||
</div>
|
||
<div
|
||
className={`text-center text-[10.5px] mt-1 ${
|
||
isCur ? 'text-[#00684a] font-semibold' : 'text-slate-500 group-hover:text-slate-700'
|
||
}`}
|
||
>
|
||
{p}
|
||
</div>
|
||
{fieldsLabel}
|
||
</button>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── 视口（单页） ── */}
|
||
<div
|
||
ref={viewportRef}
|
||
className="flex-1 min-h-0 min-w-0 overflow-auto p-4"
|
||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start' }}
|
||
>
|
||
<div
|
||
className="pdf-main-canvas"
|
||
style={{
|
||
position: 'relative',
|
||
display: 'inline-block',
|
||
textAlign: 'left',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{numPages !== null && (
|
||
<>
|
||
<Page
|
||
pageNumber={Math.min(currentPage, numPages)}
|
||
scale={zoomLevel / 100}
|
||
devicePixelRatio={typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1}
|
||
renderTextLayer={false}
|
||
renderAnnotationLayer={false}
|
||
onLoadSuccess={onMainPageLoadSuccess}
|
||
className="border border-slate-200 shadow-lg bg-white"
|
||
loading={<div className="w-[600px] h-[800px] grid place-items-center text-slate-400">页面加载中…</div>}
|
||
/>
|
||
{mainHighlight && (
|
||
<svg
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
pointerEvents: 'none',
|
||
zIndex: 12,
|
||
}}
|
||
>
|
||
<rect
|
||
x={mainHighlight.x}
|
||
y={mainHighlight.y}
|
||
width={mainHighlight.width}
|
||
height={mainHighlight.height}
|
||
fill="#00AA00"
|
||
fillOpacity="0.1"
|
||
stroke="#00684a"
|
||
strokeWidth="0.5"
|
||
rx="2"
|
||
>
|
||
<title>{`高亮文本: ${mainHighlight.text}`}</title>
|
||
</rect>
|
||
</svg>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Document>
|
||
);
|
||
}
|