Clarify options review layout with numbered sections and KPI tiles.

Separate trade/review/stats blocks, tuck filters into a toolbar, and hide empty stat groups so the page scans more easily.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/options_review.js

@@ -695,24 +695,18 @@
   }
 
   function renderGroup(title, items) {
-    if (!items || !items.length) {
-      return (
-        '<div class="or-stat-card"><div class="muted">' +
-        title +
-        '</div><div class="muted">无数据</div></div>'
-      );
-    }
+    if (!items || !items.length) return "";
     var lines = items
       .slice(0, 8)
       .map(function (g) {
         return (
-          '<div style="display:flex;justify-content:space-between;gap:8px;font-size:13px">' +
-          "<span>" +
+          '<div class="or-stat-row">' +
+          '<span class="or-stat-key">' +
           escapeHtml(g.key) +
           " · " +
           g.count +
           "笔</span>" +
-          "<span>" +
+          '<span class="or-stat-val">' +
           fmtPnl(g.pnl_sum) +
           " / 胜" +
           (g.win_rate || 0) +
@@ -722,7 +716,7 @@
       })
       .join("");
     return (
-      '<div class="or-stat-card"><div style="font-weight:600;margin-bottom:6px">' +
+      '<div class="or-stat-card"><div class="or-stat-card-title">' +
       title +
       "</div>" +
       lines +
@@ -750,23 +744,31 @@
           ["平均持有", fmtHold(k.avg_hold_sec)],
         ]
           .map(function (pair) {
+            var style = "";
+            if (pair[0] === "累计盈亏") style = pnlStyle(k.pnl_sum);
+            if (pair[0] === "平均盈亏") style = pnlStyle(k.avg_pnl);
             return (
-              '<div><div class="muted" style="font-size:12px">' +
+              '<div class="or-kpi-tile"><div class="or-kpi-label">' +
               pair[0] +
-              '</div><div style="font-weight:600">' +
+              '</div><div class="or-kpi-value" style="' +
+              style +
+              '">' +
               pair[1] +
               "</div></div>"
             );
           })
           .join("");
-        groups.innerHTML = [
+        var html = [
           renderGroup("按类型", data.by_source_type),
           renderGroup("按标的", data.by_underlying),
           renderGroup("按策略", data.by_strategy),
           renderGroup("对冲结束原因", data.by_close_reason),
           renderGroup("持有周期", data.by_hold_bucket),
           renderGroup("Call/Put", data.by_opt_type),
-        ].join("");
+        ]
+          .filter(Boolean)
+          .join("");
+        groups.innerHTML = html || '<div class="muted" style="font-size:.76rem">暂无分组数据</div>';
       })
       .catch(function () {});
   }