feat: 初步完成评查详情页面的work文档和pdf文档的加载的页面三栏设计的重构。

This commit is contained in:
2026-04-21 15:08:14 +08:00
parent 4e19672b38
commit a3fd2c7fed
13 changed files with 1781 additions and 332 deletions
@@ -352,32 +352,31 @@ export function PdfPreviewTest({
file={fileUrl}
onLoadSuccess={onDocumentLoadSuccess}
onLoadError={onDocumentLoadError}
className="flex flex-col min-h-0 w-full"
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 min-h-0 bg-slate-100 border border-slate-200 rounded"
style={{ height: 'calc(100vh - 120px)' }}
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-7 h-7 grid place-items-center rounded hover:bg-slate-100 ${
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.5 text-slate-300">|</span>
<span className="mx-0 text-slate-300">|</span>
<button
onClick={goPrev}
disabled={currentPage <= 1}
className="w-7 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
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>
@@ -392,23 +391,23 @@ export function PdfPreviewTest({
onKeyDown={e => {
if (e.key === 'Enter') handlePageJump();
}}
className="w-9 h-6 text-center bg-slate-50 border border-slate-200 rounded text-[12px] font-mono outline-none focus:border-primary"
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-7 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed"
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-2 text-slate-300">|</span>
<span className="mx-0 text-slate-300">|</span>
<button
onClick={zoomOut}
disabled={zoomLevel <= 50}
className="w-7 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40"
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>
@@ -417,7 +416,7 @@ export function PdfPreviewTest({
<button
onClick={zoomIn}
disabled={zoomLevel >= 200}
className="w-7 h-7 grid place-items-center rounded hover:bg-slate-100 disabled:opacity-40"
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>
@@ -511,9 +510,9 @@ export function PdfPreviewTest({
}
const frameCls = isCur
? 'ring-2 ring-primary shadow-md'
? 'ring-2 ring-[#00684a] shadow-md'
: effThumbMode === 'all' && isRulePage
? 'ring-1 ring-primary/40 shadow-sm'
? 'ring-1 ring-[#00684a]/40 shadow-sm'
: 'border border-slate-200 group-hover:border-slate-400 shadow-sm';
let fieldsLabel: React.ReactNode = null;
@@ -553,7 +552,7 @@ export function PdfPreviewTest({
</div>
<div
className={`text-center text-[10.5px] mt-1 ${
isCur ? 'text-primary font-semibold' : 'text-slate-500 group-hover:text-slate-700'
isCur ? 'text-[#00684a] font-semibold' : 'text-slate-500 group-hover:text-slate-700'
}`}
>
{p}
@@ -570,15 +569,16 @@ export function PdfPreviewTest({
{/* ── 视口(单页) ── */}
<div
ref={viewportRef}
className="flex-1 min-h-0 min-w-0 overflow-auto p-4 text-center"
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',
margin: '0 auto',
textAlign: 'left',
flexShrink: 0,
}}
>
{numPages !== null && (