feat: add trading day split lines on hub market chart

Add toggle before technical indicators to show blue dashed vertical lines at Beijing 8:00 day boundaries.

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

manual_trading_hub/static/app.css

@@ -2831,6 +2831,34 @@ body.login-page {
   gap: 6px 10px;
 }
 
+.market-day-split-opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.72rem;
+  color: var(--muted);
+  cursor: pointer;
+  user-select: none;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border-soft);
+  white-space: nowrap;
+}
+
+.market-day-split-opt:hover {
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.market-day-split-opt input {
+  accent-color: #3b82f6;
+}
+
+.market-day-split-opt:has(input:checked) {
+  color: #3b82f6;
+  border-color: rgba(59, 130, 246, 0.45);
+}
+
 .market-ind-menu {
   position: relative;
   font-size: 0.72rem;

manual_trading_hub/static/chart.js

@@ -193,6 +193,8 @@
   const elIndEma = document.getElementById("market-ind-ema");
   const elIndMacd = document.getElementById("market-ind-macd");
   const elIndRsi = document.getElementById("market-ind-rsi");
+  const elDaySplit = document.getElementById("market-day-split");
+  const DAY_SPLIT_STORAGE_KEY = "hub-market-day-split";
   const elFsToolbar = document.getElementById("market-fs-toolbar");
   const elFsExchange = document.getElementById("market-fs-exchange");
   const elFsSymbol = document.getElementById("market-fs-symbol");
@@ -308,6 +310,33 @@
     syncChartWrapLayout();
   }
 
+  function loadDaySplitPref() {
+    try {
+      const raw = localStorage.getItem(DAY_SPLIT_STORAGE_KEY);
+      if (raw === "1" || raw === "true") return true;
+      if (raw === "0" || raw === "false") return false;
+    } catch (_) {}
+    return false;
+  }
+
+  function saveDaySplitPref(on) {
+    try {
+      localStorage.setItem(DAY_SPLIT_STORAGE_KEY, on ? "1" : "0");
+    } catch (_) {}
+  }
+
+  function applyTradingDaySplit(enabled) {
+    if (window.HubChartDraw && typeof window.HubChartDraw.setTradingDaySplit === "function") {
+      window.HubChartDraw.setTradingDaySplit(enabled);
+    }
+  }
+
+  function syncTradingDaySplitUi() {
+    const on = !!(elDaySplit && elDaySplit.checked);
+    saveDaySplitPref(on);
+    applyTradingDaySplit(on);
+  }
+
   function ensureDrawLayer() {
     if (drawAttached || !window.HubChartDraw || !chart || !candleSeries) return;
     window.HubChartDraw.attach({
@@ -322,6 +351,7 @@
       },
     });
     window.HubChartDraw.setViewKey(currentChartViewKey());
+    applyTradingDaySplit(elDaySplit ? elDaySplit.checked : loadDaySplitPref());
     drawAttached = true;
   }
 
@@ -3006,6 +3036,11 @@
         updateIndicators();
       });
     });
+    if (elDaySplit) {
+      elDaySplit.checked = loadDaySplitPref();
+      elDaySplit.addEventListener("change", syncTradingDaySplitUi);
+      applyTradingDaySplit(elDaySplit.checked);
+    }
     const pageMarket = document.getElementById("page-market");
     const fsKeyTargets = [window, pageMarket, elChartWrap, chartHost].filter(Boolean);
     fsKeyTargets.forEach(function (el) {

manual_trading_hub/static/chart_draw.js

@@ -67,6 +67,8 @@
   let menuEl = null;
   let unsubClick = null;
   let mainBound = false;
+  let tradingDaySplitEnabled = false;
+  const BJ_OFFSET_SEC = 8 * 60 * 60;
 
   function uid() {
     return "d" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
@@ -354,6 +356,59 @@
     drawLine(ctx, x, 0, x, h, selected);
   }
 
+  function utcSecToBjParts(utcSec) {
+    const d = new Date((Number(utcSec) + BJ_OFFSET_SEC) * 1000);
+    return {
+      y: d.getUTCFullYear(),
+      m: d.getUTCMonth(),
+      d: d.getUTCDate(),
+      h: d.getUTCHours(),
+    };
+  }
+
+  function collectTradingDayBoundaries(candles) {
+    if (!candles.length) return [];
+    const minT = Number(candles[0].time);
+    const maxT = Number(candles[candles.length - 1].time);
+    const minP = utcSecToBjParts(minT);
+    const maxP = utcSecToBjParts(maxT);
+    const out = [];
+    let curMs = Date.UTC(minP.y, minP.m, minP.d) - 86400000;
+    const endMs = Date.UTC(maxP.y, maxP.m, maxP.d) + 2 * 86400000;
+    while (curMs <= endMs) {
+      const boundary = Math.floor(curMs / 1000);
+      if (boundary >= minT - 3600 && boundary <= maxT + 3600) {
+        if (!out.length || out[out.length - 1] !== boundary) {
+          out.push(boundary);
+        }
+      }
+      curMs += 86400000;
+    }
+    return out;
+  }
+
+  function drawTradingDaySplits(ctx, w, h) {
+    if (!tradingDaySplitEnabled || !chart) return;
+    const candles = getCandles();
+    if (!candles.length) return;
+    const boundaries = collectTradingDayBoundaries(candles);
+    if (!boundaries.length) return;
+    ctx.save();
+    ctx.strokeStyle = "#3b82f6";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 4]);
+    boundaries.forEach(function (t) {
+      const x = timeToX(t);
+      if (x == null || !Number.isFinite(x) || x < -2 || x > w + 2) return;
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, h);
+      ctx.stroke();
+    });
+    ctx.setLineDash([]);
+    ctx.restore();
+  }
+
   function drawRect(ctx, x1, y1, x2, y2, selected) {
     if (x1 == null || y1 == null || x2 == null || y2 == null) return;
     const l = Math.min(x1, x2);
@@ -687,6 +742,7 @@
     const w = hostEl.clientWidth;
     const h = hostEl.clientHeight;
     ctx.clearRect(0, 0, w, h);
+    drawTradingDaySplits(ctx, w, h);
     drawings.forEach(function (d) {
       if (d.hidden) ctx.globalAlpha = 0.14;
       renderDrawing(ctx, d, w, h, d.id === selectedId);
@@ -1390,9 +1446,15 @@
     setChartInteraction(true);
   }
 
+  function setTradingDaySplit(enabled) {
+    tradingDaySplitEnabled = !!enabled;
+    scheduleRedraw();
+  }
+
   window.HubChartDraw = {
     attach: attach,
     setViewKey: setViewKey,
+    setTradingDaySplit: setTradingDaySplit,
     resize: scheduleRedraw,
     redraw: scheduleRedraw,
     destroy: destroy,

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260609-hub-mobile-ai-v3" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260609-market-day-split" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>
@@ -129,6 +129,9 @@
             <span id="mkt-symbol-label">—</span>
             <span id="mkt-tf-label">1d</span>
             <div class="market-chart-actions">
+              <label class="market-day-split-opt" title="北京时间 8:00 交易切日竖线">
+                <input type="checkbox" id="market-day-split" /> 交易间隔日
+              </label>
               <details class="market-ind-menu">
                 <summary>技术指标</summary>
                 <div class="market-ind-options">
@@ -420,8 +423,8 @@
 
   <div id="toast"></div>
   <script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
-  <script src="/assets/chart_draw.js?v=20260608-market-vol-rank"></script>
+  <script src="/assets/chart_draw.js?v=20260609-market-day-split"></script>
-  <script src="/assets/chart.js?v=20260608-market-tz8"></script>
+  <script src="/assets/chart.js?v=20260609-market-day-split"></script>
   <script src="/assets/archive.js?v=20260608-hub-archive-history"></script>
   <script src="/assets/ai_review_render.js?v=2"></script>
   <script src="/assets/app.js?v=20260609-hub-mobile-ai-v3"></script>