From b3d11685e479d28c5b1eed1deb873d142eefca38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=96=BB=E9=95=BF=E5=8F=91?= <changfa199327@gmail.com>
Date: Fri, 4 Sep 2026 17:18:20 +0800
Subject: [PATCH] Polish report CSS and JS presentation tweaks.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 server/report.css | 15 +++++++++++++++
 server/report.js  |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/server/report.css b/server/report.css
index f1a940c..ec3d1c7 100644
--- a/server/report.css
+++ b/server/report.css
@@ -614,3 +614,18 @@ body{background:#fff;color:var(--v92-text);font-size:14px;line-height:1.55}
 @media(max-width:700px){.role-evidence>div.role-evidence-list{grid-template-columns:1fr}.role-evidence-item.has-image{grid-template-columns:58px minmax(0,1fr)}.role-evidence-item>img{width:58px!important;height:58px!important}}
 /* 审核失败仍输出报告时的非阻断提示 */
 .report-audit-notice{margin-top:14px!important;padding:10px 12px;border-left:3px solid #d59b3f;background:#fff7e8;color:#805a20!important;font-size:13px!important;line-height:1.5!important;text-shadow:none!important}
+
+/* Cover emphasis: give the evidence gallery more visual weight and make report status scannable. */
+.hero-deck{right:3%;width:590px;height:650px}
+.hero-deck-card{width:340px;height:550px}
+.hero-carousel .hero-copy{max-width:560px}
+.hero-meta{gap:12px;align-items:stretch}
+.hero-stat{display:inline-flex;flex-direction:column;gap:3px;padding:9px 14px;border:1px solid #d9e1e8;background:#f7f9fb;color:#27313d;font-size:14px;line-height:1.2}
+.hero-stat small{font-size:10px;color:#7a8794;letter-spacing:.03em}
+.hero-stat b{font-size:16px;font-weight:750}
+.hero-stat-status{border:2px solid #2c8a68;background:#eaf8f1;color:#145d43;box-shadow:0 5px 16px rgba(44,138,104,.14)}
+.hero-stat-status small{color:#237454;font-weight:800}
+.hero-stat-status b{font-size:20px;letter-spacing:.02em}
+@media(max-width:1050px){.hero-deck{right:0;width:470px;height:560px}.hero-deck-card{width:285px;height:460px}}
+@media(max-width:800px){.hero-deck{width:380px;height:400px}.hero-deck-card{width:215px;height:340px}}
+@media(max-width:560px){.hero-deck{width:300px;height:320px}.hero-deck-card{width:175px;height:275px}.hero-stat{padding:7px 10px}.hero-stat-status b{font-size:17px}}
diff --git a/server/report.js b/server/report.js
index aa7e34c..564d7c7 100644
--- a/server/report.js
+++ b/server/report.js
@@ -342,9 +342,9 @@ async function main() {
   const navNames = {decision:'老板速览',detail:'详情',review:'评论',verification:'验证闭环',roles:'完整分析'};
   const navLinks = bodies.filter(([id])=>navNames[id]).map(([id])=>`<a href="#${id}">${navNames[id]}</a>`).join('');
   const hasPlans = bodies.some(([id])=>id==='plan');
-  const heroStats = [['当前价格',sales.currentPrice],['评论样本',data.baseline?.reviewCount],['数据质量',data.dataQuality?.grade]].filter(([,value])=>hasContent(value));
+  const heroStats = [['当前价格',sales.currentPrice,'price'],['评论样本',data.baseline?.reviewCount,'sample'],['数据质量',data.dataQuality?.grade,'status']].filter(([,value])=>hasContent(value));
   document.title = summary.title || product.title || '商品开品分析报告';
-  document.getElementById('app').innerHTML = `<div class="report-top"><nav class="report-nav"><div class="wrap"><a class="brand" href="#top">三笙 · 商品开品分析</a><div class="report-nav-actions">${navLinks}${hasPlans?'<a class="quick-product-btn" href="#plan">快速开品 <span>→</span></a>':''}</div></div></nav><header id="top" class="report-hero hero-carousel" tabindex="0">${heroSlides?`<div class="hero-slides">${heroSlides}</div><div class="hero-shade"></div>`:''}<div class="wrap hero-overlay"><div class="hero-copy"><div class="report-kicker">PRODUCT DECISION REPORT · EVIDENCE BASED</div><h1>${esc(summary.title || product.title || '商品分析报告')}</h1>${hasContent(summary.verdict)?`<p>${esc(summary.verdict)}</p>`:''}${auditNotice?`<p class="report-audit-notice" role="status">${esc(auditNotice)}</p>`:''}${heroStats.length?`<div class="hero-meta">${heroStats.map(([label,value])=>`<span>${label} ${esc(value)}</span>`).join('')}</div>`:''}</div>${heroDeck?`<div class="hero-deck" aria-label="商品主图牌组">${heroDeck}</div>`:''}${orderedMain.length>1?`<div class="hero-carousel-ui"><button type="button" data-carousel-prev aria-label="上一张主图">←</button><div class="hero-dots">${heroDots}</div><button type="button" data-carousel-next aria-label="下一张主图">→</button></div>`:''}</div></header></div>${sectionHtml}${hasPlans?'<dialog id="quick-plan-dialog" class="quick-plan-dialog"><button class="dialog-close" type="button" data-close-plan aria-label="关闭">×</button><span>QUICK PRODUCT BRIEF</span><h2 data-plan-title>快速开品方案</h2><p data-plan-reason></p><dl><div><dt>产品动作</dt><dd data-plan-product></dd></div><div><dt>页面动作</dt><dd data-plan-page></dd></div><div><dt>验证指标</dt><dd data-plan-validation></dd></div></dl><button class="copy-plan-btn" type="button" data-copy-plan>复制开品任务</button></dialog>':''}<footer class="report-footer"><div class="wrap"><b>数据边界</b> 本报告仅使用本次采集证据；评论主题可以重叠，未完成采集时不宣称平台全量。</div></footer>`;
+  document.getElementById('app').innerHTML = `<div class="report-top"><nav class="report-nav"><div class="wrap"><a class="brand" href="#top">三笙 · 商品开品分析</a><div class="report-nav-actions">${navLinks}${hasPlans?'<a class="quick-product-btn" href="#plan">快速开品 <span>→</span></a>':''}</div></div></nav><header id="top" class="report-hero hero-carousel" tabindex="0">${heroSlides?`<div class="hero-slides">${heroSlides}</div><div class="hero-shade"></div>`:''}<div class="wrap hero-overlay"><div class="hero-copy"><div class="report-kicker">PRODUCT DECISION REPORT · EVIDENCE BASED</div><h1>${esc(summary.title || product.title || '商品分析报告')}</h1>${hasContent(summary.verdict)?`<p>${esc(summary.verdict)}</p>`:''}${auditNotice?`<p class="report-audit-notice" role="status">${esc(auditNotice)}</p>`:''}${heroStats.length?`<div class="hero-meta">${heroStats.map(([label,value,tone])=>`<span class="hero-stat hero-stat-${tone}"><small>${label}</small><b>${esc(value)}</b></span>`).join('')}</div>`:''}</div>${heroDeck?`<div class="hero-deck" aria-label="商品主图牌组">${heroDeck}</div>`:''}${orderedMain.length>1?`<div class="hero-carousel-ui"><button type="button" data-carousel-prev aria-label="上一张主图">←</button><div class="hero-dots">${heroDots}</div><button type="button" data-carousel-next aria-label="下一张主图">→</button></div>`:''}</div></header></div>${sectionHtml}${hasPlans?'<dialog id="quick-plan-dialog" class="quick-plan-dialog"><button class="dialog-close" type="button" data-close-plan aria-label="关闭">×</button><span>QUICK PRODUCT BRIEF</span><h2 data-plan-title>快速开品方案</h2><p data-plan-reason></p><dl><div><dt>产品动作</dt><dd data-plan-product></dd></div><div><dt>页面动作</dt><dd data-plan-page></dd></div><div><dt>验证指标</dt><dd data-plan-validation></dd></div></dl><button class="copy-plan-btn" type="button" data-copy-plan>复制开品任务</button></dialog>':''}<footer class="report-footer"><div class="wrap"><b>数据边界</b> 本报告仅使用本次采集证据；评论主题可以重叠，未完成采集时不宣称平台全量。</div></footer>`;
   initHeroCarousel();
   initPlanActions(plans);
 }