feat: 初步完成评查详情页面的work文档和pdf文档的加载的页面三栏设计的重构。
This commit is contained in:
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user