From e8759531b7d3d09e80222f86bb8e8db2923fe56c Mon Sep 17 00:00:00 2001
From: Jacky Ser <jacky@MacBook-Pro-5.local>
Date: Tue, 11 Aug 2026 16:28:39 +0800
Subject: [PATCH] Add large image action to AI recommendations

---
 app/globals.css | 13 +++++++------
 app/page.tsx    | 11 ++++++++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0f2ff57..c130e0a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -170,14 +170,15 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
 .recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
 .recommendation-card { min-width: 0; min-height: 442px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dce3ed; border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(38,70,125,.06); }
 .recommendation-card.is-primary { border-color: #cfdaf0; box-shadow: 0 8px 24px rgba(38,70,125,.1); }
-.recommendation-image-wrap { position: relative; display: grid; place-items: center; overflow: hidden; background: #eff4fb; }
-.recommendation-image-wrap img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
-.match-badge { position: absolute; left: 12px; top: 12px; padding: 6px 9px; border-radius: 7px; color: white; background: var(--orange); font-size: 9px; font-weight: 800; }
+.recommendation-image-wrap { position: relative; width: 100%; padding: 0; display: grid; place-items: center; overflow: hidden; border: 0; color: inherit; background: #eff4fb; cursor: pointer; text-align: left; }
+.recommendation-image-wrap img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
+.recommendation-image-wrap:hover img { transform: scale(1.04); }
+.recommendation-image-wrap:focus-visible { outline: 3px solid rgba(24,94,232,.28); outline-offset: -3px; }
+.match-badge { position: absolute; left: 12px; bottom: 12px; padding: 6px 9px; border-radius: 7px; color: white; background: var(--orange); font-size: 9px; font-weight: 800; box-shadow: 0 5px 13px rgba(80,45,13,.2); }
+.recommendation-zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; color: #53637b; background: rgba(255,255,255,.9); font-size: 8px; font-weight: 700; }
 .recommendation-content { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px 13px 12px; }
-.match-score { position: absolute; right: 16px; top: 15px; display: grid; text-align: right; color: #7c889a; font-size: 9px; }
-.match-score strong { color: var(--blue); font-size: 18px; }
 .product-code { margin: 0 0 4px; color: #8b96a8; font-size: 9px; }
-.recommendation-content h3 { min-height: 38px; max-width: calc(100% - 42px); margin: 0; overflow: hidden; font-size: 14px; line-height: 1.35; }
+.recommendation-content h3 { min-height: 38px; max-width: 100%; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.35; }
 .product-subtitle { margin: 5px 0 13px; color: #7b8799; font-size: 10px; }
 .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
 .metric { padding: 8px 9px; border-radius: 8px; background: #f4f7fb; display: grid; gap: 3px; }
diff --git a/app/page.tsx b/app/page.tsx
index 2ca6091..6f1573d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -838,14 +838,19 @@ export default function Home() {
               <div className="recommendation-grid">
                 {topMatches.map((match, index) => (
                   <article className={`recommendation-card ${index === 0 ? "is-primary" : ""}`} key={match.product.id}>
-                    <div className="recommendation-image-wrap">
+                    <button
+                      type="button"
+                      className="recommendation-image-wrap"
+                      onClick={() => setSelectedCatalogProduct(match.product)}
+                      aria-label={`查看${match.product.name}大图`}
+                    >
                       <img src={match.product.image} alt={match.product.name} />
                       <span className="match-badge">
                         {index === 0 ? (match.coreCompatible ? "首选推荐" : "待复核候选") : `${match.confidence}% 匹配`}
                       </span>
-                    </div>
+                      <span className="recommendation-zoom-hint">点击查看大图</span>
+                    </button>
                     <div className="recommendation-content">
-                      <div className="match-score"><span>匹配度</span><strong>{match.confidence}%</strong></div>
                       <p className="product-code">{match.product.code}</p>
                       <h3>{match.product.name}</h3>
                       <p className="product-subtitle">{match.product.category} · {match.product.size || "尺寸待复核"}</p>