update

webapp/static/js/report.js

@@ -117,13 +117,15 @@ const Report = {
     const metrics = report.metrics && report.metrics.length ? report.metrics : summary.metrics;
     metrics.forEach((metric) => {
       const value = report.metric_means ? report.metric_means[metric] : null;
-      const cls = App.scoreClass(value);
+      const cls = App.scoreClass(metric, value);
       const text = value === null || value === undefined ? "n/a" : value.toFixed(2);
+      const description = MetricPresenter.describeMetric(metric);
       const card = document.createElement("div");
       card.className = "metric-card";
       card.innerHTML = `
         <div class="metric-value ${cls}">${text}</div>
         <div class="metric-name">${App.escape(metric)}</div>
+        <div class="metric-desc">${App.escape(description)}</div>
       `;
       wrap.appendChild(card);
     });
@@ -168,17 +170,13 @@ const Report = {
     const bins = distributions[metric] || [];
     const labels = bins.map((b) => b.label);
     const counts = bins.map((b) => b.count);
-    const colors = bins.map((b) => Report._binColor(b.lower));
+    const colors = bins.map((b) => Report._binColor(metric, b.lower));
     Report._drawDistChart(labels, counts, colors);
   },
 
   // 低分箱偏红、高分箱偏绿，直观暴露长尾。
-  _binColor(lower) {
-    if (lower >= 0.8) return "#16a34a";
-    if (lower >= 0.6) return "#84cc16";
-    if (lower >= 0.4) return "#eab308";
-    if (lower >= 0.2) return "#f97316";
-    return "#dc2626";
+  _binColor(metric, lower) {
+    return MetricPresenter.binColor(metric, lower);
   },
 
   // 实际绘制 Chart.js 柱状图。
@@ -247,7 +245,7 @@ const Report = {
       body += `<tr><td>${App.escape(stat.key)}</td><td>${stat.count}</td>`;
       metrics.forEach((m) => {
         const v = stat.means ? stat.means[m] : null;
-        const cls = App.scoreClass(v);
+        const cls = App.scoreClass(m, v);
         const text = v === null || v === undefined ? "—" : v.toFixed(2);
         body += `<td class="${cls}">${text}</td>`;
       });
@@ -271,7 +269,7 @@ const Report = {
       const scoreBadges = metrics
         .map((m) => {
           const v = sample.metrics ? sample.metrics[m] : null;
-          const cls = App.scoreClass(v);
+          const cls = App.scoreClass(m, v);
           const text = v === null || v === undefined ? "—" : v.toFixed(2);
           return `<span class="score-badge ${cls}" title="${App.escape(m)}">${text}</span>`;
         })