fix: loosen divergence scan list layout with card-style rows

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

manual_trading_hub/static/chart.js

@@ -3041,6 +3041,7 @@
   function renderDivergenceScan(data) {
     if (!elVolRankMeta || !elVolRankList) return;
     elVolRankList.innerHTML = "";
+    elVolRankList.classList.add("is-div-scan-list");
     const tabLabel = (data && data.tab_label) || "背离";
     if (!data || !data.ok || !data.items || !data.items.length) {
       elVolRankMeta.textContent =
@@ -3050,20 +3051,23 @@
     }
     const rankDate = data.rank_date || "—";
     const updated = data.scanned_at || data.updated_at || "—";
-    let meta =
+    elVolRankMeta.innerHTML =
+      "<div class=\"div-scan-meta-title\">" +
       tabLabel +
-      " · Top20 内 MACD 档A · 交易日 " +
+      " · Top20 · MACD 档A</div>" +
+      "<div class=\"div-scan-meta-sub\">交易日 " +
       rankDate +
       " · 扫描 " +
       updated +
-      " · " +
+      " · 共 " +
       data.items.length +
-      " 条";
-    elVolRankMeta.textContent = meta;
+      " 条</div>";
     const curSym = (elSymbol && elSymbol.value.trim().toUpperCase()) || "";
     const tabTf = data.tab || activeScanTab;
+    const tfShort = { "4h": "4h", "1d": "日线", "1w": "周线" };
     data.items.forEach(function (row) {
       const li = document.createElement("li");
+      li.className = "market-vol-rank-li";
       const btn = document.createElement("button");
       btn.type = "button";
       const css = row.confluence_css || "none";
@@ -3075,21 +3079,50 @@
       const dirLabel = row.is_split
         ? "分歧"
         : row.tab_direction_label || row.direction_label || "";
-      const confLabel = row.is_split ? row.split_detail || "分歧" : row.confluence_kind || "";
+      const confLabel = row.is_split ? "分歧" : row.confluence_kind || "—";
       const fresh = row.tab_freshness || "";
+      const dirClass =
+        row.tab_direction === "bull"
+          ? "is-bull"
+          : row.tab_direction === "bear"
+            ? "is-bear"
+            : row.is_split
+              ? "is-split"
+              : "";
+      const tfPills = [];
+      const tfs = row.timeframes || {};
+      ["4h", "1d", "1w"].forEach(function (tf) {
+        if (!tfs[tf]) return;
+        const pillDir = tfs[tf] === "bull" ? "底" : "顶";
+        tfPills.push(
+          '<span class="div-scan-tf-pill">' + (tfShort[tf] || tf) + pillDir + "</span>"
+        );
+      });
+      const subExtra = row.is_split && row.split_detail
+        ? '<span class="div-scan-split-detail">' + row.split_detail + "</span>"
+        : tfPills.length
+          ? '<span class="div-scan-tf-pills">' + tfPills.join("") + "</span>"
+          : "";
       btn.innerHTML =
+        '<div class="div-scan-row div-scan-head">' +
         '<span class="market-vol-rank-badge confluence-' +
         css +
         '">' +
-        (confLabel || "—") +
-        '</span><span class="market-vol-rank-no">' +
-        (row.rank || "") +
+        confLabel +
+        '</span><span class="market-vol-rank-no">#' +
+        (row.rank || "—") +
         '</span><span class="market-vol-rank-sym">' +
         (row.symbol || "") +
-        '</span><span class="market-vol-rank-div">' +
+        "</span></div>" +
+        '<div class="div-scan-row div-scan-sub">' +
+        '<span class="div-scan-dir ' +
+        dirClass +
+        '">' +
         dirLabel +
-        (fresh ? " · " + fresh : "") +
-        "</span>";
+        "</span>" +
+        (fresh ? '<span class="div-scan-fresh">' + fresh + "</span>" : "") +
+        subExtra +
+        "</div>";
       btn.addEventListener("click", function () {
         applyScanSymbolSelection(row.symbol, tabTf);
       });
@@ -3124,6 +3157,7 @@
   function renderVolumeRank(data) {
     if (!elVolRankMeta || !elVolRankList) return;
     elVolRankList.innerHTML = "";
+    elVolRankList.classList.remove("is-div-scan-list");
     if (!data || !data.ok || !data.items || !data.items.length) {
       elVolRankMeta.textContent =
         (data && data.msg) ||