添加pdf的略缩图组件的实现。

app/components/reviews/FilePreview.tsx

@@ -6,6 +6,7 @@ import { useState, useEffect, useRef, forwardRef, useImperativeHandle, ChangeEve
 import { CollaboraViewer, type CollaboraViewerHandle } from '~/components/collabora/CollaboraViewer';
 import { requestPageInfo, customGotoPage } from '~/components/collabora/lib';
 import { PdfPreview } from './previewComponents/PdfPreview';
+import { PdfPreviewTest } from './previewComponents/PdfPreviewTest';
 import { toastService } from '../ui/Toast';
 
 // 直接从ReviewPointsList导入类型，避免循环依赖
@@ -74,7 +75,7 @@ export interface FilePreviewHandle {
 }
 
 // export function FilePreview({ fileContent, reviewPoints, activeReviewPointResultId, targetPage }: FilePreviewProps) {
-export const FilePreview = forwardRef<FilePreviewHandle, FilePreviewProps>(function FilePreview({ fileContent, activeReviewPointResultId, targetPage, charPositions, highlightValue, isStructuredView = false, userInfo, aiSuggestionReplace, isTemplate = false }, ref) {
+export const FilePreview = forwardRef<FilePreviewHandle, FilePreviewProps>(function FilePreview({ fileContent, reviewPoints, activeReviewPointResultId, targetPage, charPositions, highlightValue, isStructuredView = false, userInfo, aiSuggestionReplace, isTemplate = false }, ref) {
   // 获取文件类型
   const real_path = fileContent.path || fileContent.template_contract_path || '';
   const fileExtension = real_path.split('.').pop()?.toLowerCase();
@@ -232,10 +233,12 @@ export const FilePreview = forwardRef<FilePreviewHandle, FilePreviewProps>(funct
     const pageOffset = fileContent.ocrResult?.__meta?.page_offset || fileContent.ocr_result?.__meta?.page_offset || 0;
     // console.log('pageOffset', pageOffset)
     return (
-      <PdfPreview
+      <PdfPreviewTest
+      // <PdfPreview
         filePath={real_path}
         targetPage={targetPage}
         charPositions={charPositions}
+        reviewPoints={reviewPoints}
         isStructuredView={isStructuredView}
         activeReviewPointResultId={activeReviewPointResultId}
         pageOffset={pageOffset}

app/components/reviews/previewComponents/PdfPreviewTest.tsx

@@ -0,0 +1,631 @@
+/**
+ * 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"
+      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)' }}
+      >
+        {/* ═════ 顶部工具栏 ═════ */}
+        <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 ${
+                showThumbs ? 'text-primary' : 'text-slate-400'
+              }`}
+              title="显示/隐藏页面缩略图"
+            >
+              <i className="ri-layout-masonry-line"></i>
+            </button>
+            <span className="mx-0.5 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"
+              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-9 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"
+              title="下一页"
+            >
+              <i className="ri-arrow-right-s-line"></i>
+            </button>
+            <span className="mx-2 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"
+              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-7 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-primary shadow-md'
+                      : effThumbMode === 'all' && isRulePage
+                      ? 'ring-1 ring-primary/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-primary 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 text-center"
+          >
+            <div
+              className="pdf-main-canvas"
+              style={{
+                position: 'relative',
+                display: 'inline-block',
+                margin: '0 auto',
+                textAlign: 'left',
+              }}
+            >
+              {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>
+  );
+}

app/routes/reviews.tsx

@@ -872,42 +872,13 @@ export default function ReviewDetails() {
         <>
           {/* 自定义面包屑 */}
           <div className="flex justify-between items-center mb-4">
-            <Breadcrumb 
+            {/* <Breadcrumb 
               items={getBreadcrumbItems()} 
               className="items-center flex !mb-0"
-            />
+            /> */}
             
             {/* 在面包屑右侧显示精简版的FileInfo */}
             <div className=" ml-5 text-left flex-1 flex flex-row flex-wrap items-center">
-              {/* 评分tag：优秀、合格、不合格、待评价 */}
-              {/* {(() => {
-                const score = "";
-                let tagText = '待评价';
-                let tagClassName = 'bg-gray-100 text-gray-600 border-gray-300';
-
-                if (score >= 90) {
-                  tagText = '优秀';
-                  tagClassName = 'bg-green-50 text-green-700 border-green-300';
-                } else if (score >= 60) {
-                  tagText = '合格';
-                  tagClassName = 'bg-blue-50 text-blue-700 border-blue-300';
-                } else if (score > 0) {
-                  tagText = '不合格';
-                  tagClassName = 'bg-red-50 text-red-700 border-red-300';
-                }
-
-                return (
-                  <span className={`
-                    px-3 py-0.5 rounded-full text-xs font-medium border mr-1
-                    ${tagClassName}
-                  `}
-                    title="供应商评价"
-                  >
-                    {tagText}
-                  </span>
-                );
-              })()} */}
-
               <span className="mr-2 text-xl font-medium">
                 {reviewData.fileInfo.fileName}
               </span>
@@ -929,29 +900,8 @@ export default function ReviewDetails() {
               </div>
             </div>
           </div>
-          {/* <div className="text-xs text-gray-500 flex items-center mb-1">
-            合同编号：{reviewData.fileInfo.contractNumber}
-            {reviewData.fileInfo.fileSize && (
-              <span className="text-xs text-gray-500 ml-2">
-              |  {reviewData.fileInfo.fileSize} | {reviewData.fileInfo.fileFormat} | {reviewData.fileInfo.pageCount}页&nbsp;
-              </span>
-            )}
-            {reviewData.fileInfo.uploadTime && (
-              <div className="text-xs text-gray-500">
-              | 上传时间：{reviewData.fileInfo.uploadTime} | 上传用户：{reviewData.fileInfo.uploadUser}
-              </div>
-            )}
-          </div> */}
           
           {/* 文件信息和操作按钮 */}
-          {/* <FileInfo 
-            fileInfo={{
-              ...reviewData.fileInfo,
-              previousRoute: loaderData.previousRoute
-            }}
-            onConfirmResults={handleConfirmResults}
-          /> */}
-          
           {/* 选项卡 */}
           <ReviewTabs
             activeTab={activeTab}