From 8fcd79b608fa149c8b0c8c0e6f97bc96f6167e40 Mon Sep 17 00:00:00 2001
From: wren <“porlong@qq.com”>
Date: Wed, 6 May 2026 18:34:03 +0800
Subject: [PATCH] fix: unify review detail page badges

---
 app/components/reviews/rightColumn/DetailPanel.tsx     | 10 ++++++++--
 .../reviews/rightColumn/ReviewPointDetailCard.tsx      |  8 +++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/components/reviews/rightColumn/DetailPanel.tsx b/app/components/reviews/rightColumn/DetailPanel.tsx
index e2a7c23..7841af5 100644
--- a/app/components/reviews/rightColumn/DetailPanel.tsx
+++ b/app/components/reviews/rightColumn/DetailPanel.tsx
@@ -126,6 +126,12 @@ function formatPageLabel(page?: number): string {
   return `第${page}页`;
 }
 
+function getPageBadgeClass(page?: number): string {
+  return page && Number.isFinite(page) && page > 0
+    ? 'mt-0.5 inline-flex items-center rounded border border-emerald-200 bg-emerald-50 px-1.5 py-0.5 text-[10px] text-[#00684a] hover:bg-emerald-100'
+    : 'mt-0.5 inline-flex items-center rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] text-slate-400';
+}
+
 function ExtractedFieldsPanel({
   reviewPoints,
   onFieldClick,
@@ -223,7 +229,7 @@ function ExtractedFieldsPanel({
                 {f.page ? (
                   <button
                     type="button"
-                    className="mt-0.5 text-[10px] text-[#00684a] hover:underline"
+                    className={getPageBadgeClass(f.page)}
                     onClick={(event) => {
                       event.stopPropagation();
                       handleFieldNavigate(f.pointId, f.page, f.highlightValue, f.bboxHighlight);
@@ -232,7 +238,7 @@ function ExtractedFieldsPanel({
                     {formatPageLabel(f.page)}
                   </button>
                 ) : (
-                  <div className="mt-0.5 text-[10px] text-slate-300">未定位</div>
+                  <div className={getPageBadgeClass()}>未定位</div>
                 )}
               </div>
             </div>
diff --git a/app/components/reviews/rightColumn/ReviewPointDetailCard.tsx b/app/components/reviews/rightColumn/ReviewPointDetailCard.tsx
index 0911a8c..22c37e1 100644
--- a/app/components/reviews/rightColumn/ReviewPointDetailCard.tsx
+++ b/app/components/reviews/rightColumn/ReviewPointDetailCard.tsx
@@ -94,6 +94,12 @@ function formatPageLabel(page?: number): string {
   return `第${page}页`;
 }
 
+function getPageBadgeClass(page?: number): string {
+  return page && Number.isFinite(page) && page > 0
+    ? 'inline-flex items-center rounded border border-emerald-200 bg-emerald-50 px-1.5 py-0.5 text-[10.5px] text-[#00684a]'
+    : 'inline-flex items-center rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10.5px] text-slate-400';
+}
+
 // ── Tooltip 系统 ──
 let activeTooltip = { show: false, content: null as React.ReactNode, position: { top: 0, left: 0 }, ready: false };
 function TooltipPortal() {
@@ -713,7 +719,7 @@ function LeauditReviewPointDetailCard({ reviewPoint, onReviewPointSelect, onStat
               {enterpriseButton && enterpriseButton}
             </div>
             <div className="flex items-center gap-2 shrink-0">
-              <span className={`text-[10.5px] shrink-0 ${page ? 'text-slate-400' : 'text-slate-300'}`}>
+              <span className={`${getPageBadgeClass(page)} shrink-0`}>
                 {formatPageLabel(page)}
               </span>
             </div>