From b4df926e93c7e194fd04c72611a527644f3825a9 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 24 May 2026 13:58:09 +0800
Subject: [PATCH] update

---
 app/web/web_server.py     |   2 +
 static/app.html           |  76 ++---
 static/chart_widgets.js   | 625 ++++++++++++++++++++++++++++++++++++++
 static/paper_trading.html |   3 +-
 4 files changed, 648 insertions(+), 58 deletions(-)
 create mode 100644 static/chart_widgets.js

diff --git a/app/web/web_server.py b/app/web/web_server.py
index 2a08803..80e87ba 100644
--- a/app/web/web_server.py
+++ b/app/web/web_server.py
@@ -7,6 +7,7 @@ from pathlib import Path
 
 from fastapi import FastAPI, Request
 from fastapi.responses import JSONResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
 from app.db.schema import init_db
@@ -45,6 +46,7 @@ async def lifespan(app: FastAPI):
 
 app = FastAPI(title="AlphaX Agent", lifespan=lifespan)
 templates = Jinja2Templates(directory=str(REPO_ROOT / "static"))
+app.mount("/static", StaticFiles(directory=str(REPO_ROOT / "static")), name="static")
 
 app.include_router(auth_router)
 app.include_router(chat_router)
diff --git a/static/app.html b/static/app.html
index 0901775..f9fc5c7 100644
--- a/static/app.html
+++ b/static/app.html
@@ -216,7 +216,8 @@
 .kline-int-btn { border: 1px solid var(--hairline); background: var(--canvas); color: var(--stone); padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; cursor: pointer; transition: .15s; }
 .kline-int-btn:hover { border-color: var(--hairline-strong); color: var(--slate); }
 .kline-int-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
-.kline-container svg { display:block; margin:0 auto; }
+.kline-container { position: relative; width: 100%; height: 200px; }
+.kline-container .ax-chart { min-height: 200px; }
 .chart-loading { color: var(--stone); font-size: 12px; text-align: center; padding: 16px; }
 
 /* ===== ENTRY PLAN ===== */
@@ -339,6 +340,7 @@
 {% endblock %}
 
 {% block extra_script %}
+<script src="/static/chart_widgets.js"></script>
 <script>
 function drawPin(){ return null; }
 var curTab = 'live';
@@ -841,7 +843,22 @@ function loadOneKline(container) {
       var slTime = container.dataset.slTime||'';
       var actionStatus = container.dataset.actionStatus || container.dataset.status || '';
       var refPrice = Number(container.dataset.refPrice || entryPrice || (candles[0] && candles[0].close) || 0);
-      container.innerHTML = renderKlineChart(symbol, candles, entryPrice, stopLoss, tp1, recTime, tp1Time, slTime, actionStatus, refPrice);
+      if (!window.AlphaXCharts || !window.AlphaXCharts.renderKline) {
+        throw new Error('AlphaXCharts.renderKline is not available');
+      }
+      container.innerHTML = '';
+      window.AlphaXCharts.renderKline(container, {
+        symbol: symbol,
+        candles: candles,
+        entryPrice: entryPrice,
+        stopLoss: stopLoss,
+        tp1: tp1,
+        recTime: recTime,
+        tp1Time: tp1Time,
+        slTime: slTime,
+        actionStatus: actionStatus,
+        refPrice: refPrice
+      });
       container.classList.remove('loading');
       container.dataset.klineLoaded = '1';
       delete container.dataset.klineLoading;
@@ -902,61 +919,6 @@ function switchKlineInterval(btn) {
   loadOneKline(container);
 }
 
-function renderKlineChart(symbol, candles, entryPrice, stopLoss, tp1, recTime, tp1Time, slTime, actionStatus, refPrice) {
-  if(!candles||candles.length<5) return '<div class="chart-loading">K线数据不足</div>';
-  var recPrice=Number(entryPrice||0), slPrice=Number(stopLoss||0), tpPrice=Number(tp1||0);
-  var isWait = (actionStatus === '等回踩');
-  var W=360,H=200,volH=28,padL=2,padR=2,padT=8,padB=18,chartW=W-padL-padR,chartH=H-padT-padB-volH;
-  var data=candles.slice(-60),n=data.length;
-  var candleW=Math.max(1.5,(chartW/n)*0.75),gap=Math.max(0.5,(chartW/n)-candleW);
-  var minPrice=Infinity,maxPrice=-Infinity,maxVol=0;
-  data.forEach(function(c){minPrice=Math.min(minPrice,c.low);maxPrice=Math.max(maxPrice,c.high);maxVol=Math.max(maxVol,c.volume||0);});
-  if(recPrice>0){minPrice=Math.min(minPrice,recPrice);maxPrice=Math.max(maxPrice,recPrice);}
-  if(slPrice>0){minPrice=Math.min(minPrice,slPrice);maxPrice=Math.max(maxPrice,slPrice);}
-  if(tpPrice>0){minPrice=Math.min(minPrice,tpPrice);maxPrice=Math.max(maxPrice,tpPrice);}
-  var priceRange=maxPrice-minPrice||1,volMaxH=volH-2;
-  var decimals = priceDecimals(refPrice || recPrice || maxPrice || minPrice);
-  var pt=function(p){return padT+chartH-(p-minPrice)/priceRange*chartH;};
-  function cx(i){return padL+i*(candleW+gap)+candleW/2;}
-
-  var svg='<svg viewBox="0 0 '+W+' '+H+'" width="100%" style="display:block"><style>.c-up{fill:#00b473;stroke:#00b473}.c-down{fill:#e53e3e;stroke:#e53e3e}.c-wick{stroke-width:1}.v-up{fill:rgba(0,180,115,.2)}.v-down{fill:rgba(229,62,62,.15)}.grid{stroke:#eef0f3;stroke-width:0.5}.label{font:8px sans-serif;fill:#a5a8b5}.htag{font:8px sans-serif}.event-marker{font:9px sans-serif;font-weight:700}</style>';
-
-  for(var i=0;i<=4;i++){var y=padT+chartH*i/4;svg+='<line class="grid" x1="'+padL+'" y1="'+y.toFixed(1)+'" x2="'+(W-padR)+'" y2="'+y.toFixed(1)+'"/><text class="label" x="'+(W-padR)+'" y="'+(y+10)+'" text-anchor="end">'+fmtPrice(maxPrice-priceRange*i/4, decimals)+'</text>';}
-
-  data.forEach(function(c,i){
-    var x=padL+i*(candleW+gap),open=pt(c.open),close=pt(c.close),high=pt(c.high),low=pt(c.low);
-    var isUp=c.close>=c.open,cls=isUp?'c-up':'c-down',vCls=isUp?'v-up':'v-down';
-    svg+='<line class="'+cls+' c-wick" x1="'+(x+candleW/2)+'" y1="'+high+'" x2="'+(x+candleW/2)+'" y2="'+low+'"/>';
-    svg+='<rect class="'+cls+'" x="'+x+'" y="'+Math.min(open,close)+'" width="'+candleW+'" height="'+Math.max(1,Math.abs(close-open))+'\"/>';
-    var vh=Math.max(1,(c.volume||0)/maxVol*volMaxH);
-    svg+='<rect class="'+vCls+'" x="'+x+'" y="'+(H-padB-vh)+'" width="'+candleW+'" height="'+vh+'"/>';
-  });
-
-  function markerAt(eventTime,label,color,price){
-    if(!eventTime) return;
-    var et=new Date(eventTime).getTime(),bestIdx=-1,bestDiff=Infinity;
-    data.forEach(function(c,i){var diff=Math.abs(c.time-et);if(diff<bestDiff){bestDiff=diff;bestIdx=i;}});
-    if(bestIdx<0||bestIdx>=n) return;
-    var mx=cx(bestIdx),candleLow=pt(data[bestIdx].low);
-    var my=H-padB-volH+12;
-    svg+='<line stroke="'+color+'" stroke-width="0.8" stroke-dasharray="2,2" x1="'+mx+'" y1="'+(candleLow+2)+'" x2="'+mx+'" y2="'+my+'"/>';
-    svg+='<text class="event-marker" fill="'+color+'" x="'+mx+'" y="'+(my+10)+'" text-anchor="middle">'+label+'</text>';
-    if(price>0) svg+='<text class="htag" fill="'+color+'" x="'+mx+'" y="'+(my+22)+'" text-anchor="middle">$'+fmtPrice(price, decimals)+'</text>';
-  }
-  if(recTime) {
-    if(isWait) {
-      markerAt(recTime,'\u25B3','#a5a8b5',0);
-    } else {
-      markerAt(recTime,'\u25B2','#4262ff',recPrice);
-    }
-  }
-  if(tp1Time) markerAt(tp1Time,'\u2713','#00b473',tpPrice);
-  if(slTime) markerAt(slTime,'\u2717','#e53e3e',slPrice);
-
-  svg+='</svg>';
-  return svg;
-}
-
 
 // ====== HISTORY ======
 function historyOutcome(r) {
diff --git a/static/chart_widgets.js b/static/chart_widgets.js
new file mode 100644
index 0000000..862b495
--- /dev/null
+++ b/static/chart_widgets.js
@@ -0,0 +1,625 @@
+window.AlphaXCharts = (function () {
+  var cssInjected = false;
+
+  function injectCss() {
+    if (cssInjected) return;
+    cssInjected = true;
+    var style = document.createElement("style");
+    style.textContent = [
+      ".ax-chart{position:relative;width:100%;height:100%;min-height:220px;outline:none;touch-action:pan-y}",
+      ".ax-chart canvas{display:block;width:100%;height:100%}",
+      ".ax-tooltip{position:absolute;z-index:4;min-width:172px;max-width:240px;padding:10px 11px;border:1px solid rgba(148,163,184,.32);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(15,23,42,.16);backdrop-filter:blur(10px);font-size:12px;color:var(--slate,#4b5563);pointer-events:none;transform:translate(-50%,-112%);opacity:0;transition:opacity .12s ease}",
+      ".ax-tooltip.show{opacity:1}",
+      ".ax-tip-date{font-weight:950;color:var(--ink,#111827);margin-bottom:6px}",
+      ".ax-tip-row{display:flex;justify-content:space-between;gap:14px;line-height:1.55}",
+      ".ax-tip-row b{color:var(--ink,#111827)}",
+      ".ax-tip-row .pos{color:var(--green,#00b473)}",
+      ".ax-tip-row .neg{color:var(--red,#e53e3e)}",
+      ".ax-hint{position:absolute;right:10px;bottom:8px;border:1px solid rgba(148,163,184,.24);background:rgba(255,255,255,.72);border-radius:999px;padding:4px 8px;color:var(--stone,#8e91a0);font-size:10px;font-weight:850;pointer-events:none}"
+    ].join("");
+    document.head.appendChild(style);
+  }
+
+  function esc(v) {
+    return String(v == null ? "" : v).replace(/[&<>"']/g, function (c) {
+      return {"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[c];
+    });
+  }
+
+  function fmt(v, d) {
+    v = Number(v || 0);
+    return v.toLocaleString(undefined, {maximumFractionDigits: d == null ? 2 : d, minimumFractionDigits: 0});
+  }
+
+  function color(name, fallback) {
+    var value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return value || fallback;
+  }
+
+  function cls(v) {
+    v = Number(v || 0);
+    return v > 0 ? "pos" : v < 0 ? "neg" : "";
+  }
+
+  function renderEquity(container, payload) {
+    injectCss();
+    var points = (payload && payload.points) || [];
+    if (!container) return;
+    if (container._axDestroy) {
+      container._axDestroy();
+      container._axDestroy = null;
+    }
+    if (!points.length) {
+      container.innerHTML = '<div class="empty">暂无收益曲线数据</div>';
+      return;
+    }
+
+    container.innerHTML = '<div class="ax-chart" tabindex="0" aria-label="可交互权益曲线，移动鼠标查看每日明细，点击可锁定"><canvas></canvas><div class="ax-tooltip" aria-hidden="true"></div><div class="ax-hint">hover 查看明细</div></div>';
+
+    var root = container.querySelector(".ax-chart");
+    var canvas = root.querySelector("canvas");
+    var ctx = canvas.getContext("2d");
+    var tip = root.querySelector(".ax-tooltip");
+    var locked = false;
+    var activeIdx = points.length - 1;
+    var ro = null;
+
+    var equities = points.map(function (p) { return Number(p.equity_usdt || 0); });
+    var pnls = points.map(function (p) { return Number(p.daily_pnl_usdt || 0); });
+    var minEq = Math.min.apply(null, equities);
+    var maxEq = Math.max.apply(null, equities);
+    if (maxEq === minEq) { maxEq += 1; minEq -= 1; }
+    var maxAbs = Math.max.apply(null, [1].concat(pnls.map(function (v) { return Math.abs(v); })));
+
+    function metrics() {
+      var rect = root.getBoundingClientRect();
+      var w = Math.max(320, rect.width || container.clientWidth || 960);
+      var h = Math.max(220, rect.height || container.clientHeight || 260);
+      var padL = 4, padR = 4, top = 22, barBase = h - 36, lineH = Math.max(96, barBase - top - 52);
+      var chartW = w - padL - padR;
+      return {w: w, h: h, padL: padL, padR: padR, top: top, barBase: barBase, lineH: lineH, chartW: chartW};
+    }
+
+    function x(i, m) {
+      return m.padL + (points.length === 1 ? m.chartW / 2 : i * m.chartW / (points.length - 1));
+    }
+
+    function y(v, m) {
+      return m.top + (maxEq - v) * m.lineH / (maxEq - minEq);
+    }
+
+    function resizeCanvas(m) {
+      var dpr = Math.max(1, window.devicePixelRatio || 1);
+      var bw = Math.round(m.w * dpr);
+      var bh = Math.round(m.h * dpr);
+      if (canvas.width !== bw || canvas.height !== bh) {
+        canvas.width = bw;
+        canvas.height = bh;
+      }
+      canvas.style.width = m.w + "px";
+      canvas.style.height = m.h + "px";
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    function drawGrid(m) {
+      ctx.strokeStyle = "rgba(148,163,184,.25)";
+      ctx.lineWidth = 1;
+      [m.top, m.top + m.lineH / 2, m.top + m.lineH].forEach(function (gy) {
+        ctx.beginPath();
+        ctx.moveTo(m.padL, gy);
+        ctx.lineTo(m.w - m.padR, gy);
+        ctx.stroke();
+      });
+    }
+
+    function drawBars(m) {
+      var barW = Math.max(3, m.chartW / points.length * .55);
+      points.forEach(function (p, i) {
+        var v = Number(p.daily_pnl_usdt || 0);
+        var bh = Math.abs(v) / maxAbs * 44;
+        var bx = x(i, m) - barW / 2;
+        var by = v >= 0 ? m.barBase - bh : m.barBase;
+        ctx.fillStyle = v >= 0 ? "rgba(0,180,115,.45)" : "rgba(229,62,62,.42)";
+        ctx.fillRect(bx, by, barW, Math.max(1, bh));
+      });
+    }
+
+    function drawEquity(m) {
+      var blue = color("--blue", "#4262ff");
+      var area = ctx.createLinearGradient(0, m.top, 0, m.barBase);
+      area.addColorStop(0, "rgba(66,98,255,.16)");
+      area.addColorStop(1, "rgba(66,98,255,.015)");
+      ctx.beginPath();
+      ctx.moveTo(x(0, m), m.barBase);
+      points.forEach(function (p, i) { ctx.lineTo(x(i, m), y(Number(p.equity_usdt || 0), m)); });
+      ctx.lineTo(x(points.length - 1, m), m.barBase);
+      ctx.closePath();
+      ctx.fillStyle = area;
+      ctx.fill();
+
+      ctx.beginPath();
+      points.forEach(function (p, i) {
+        var px = x(i, m), py = y(Number(p.equity_usdt || 0), m);
+        if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
+      });
+      ctx.strokeStyle = blue;
+      ctx.lineWidth = 3;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.stroke();
+    }
+
+    function drawLabels(m) {
+      ctx.fillStyle = color("--stone", "#8e91a0");
+      ctx.font = "800 11px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      ctx.fillText(String(points[0].date || ""), m.padL + 6, m.h - 14);
+      ctx.fillText("权益 " + fmt(minEq, 0) + "U - " + fmt(maxEq, 0) + "U", m.padL + 6, 14);
+      ctx.textAlign = "right";
+      ctx.fillText(String(points[points.length - 1].date || ""), m.w - m.padR - 6, m.h - 14);
+      ctx.fillText("点击锁定 · Esc 取消", m.w - m.padR - 6, 14);
+    }
+
+    function drawFocus(m) {
+      if (activeIdx == null) return;
+      var p = points[activeIdx];
+      var px = x(activeIdx, m);
+      var py = y(Number(p.equity_usdt || 0), m);
+      ctx.save();
+      ctx.strokeStyle = "rgba(15,23,42,.38)";
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(px, m.top);
+      ctx.lineTo(px, m.barBase);
+      ctx.moveTo(m.padL, py);
+      ctx.lineTo(m.w - m.padR, py);
+      ctx.stroke();
+      ctx.restore();
+      ctx.beginPath();
+      ctx.arc(px, py, 5, 0, Math.PI * 2);
+      ctx.fillStyle = color("--canvas", "#fff");
+      ctx.fill();
+      ctx.strokeStyle = color("--blue", "#4262ff");
+      ctx.lineWidth = 3;
+      ctx.stroke();
+      placeTip(p, px, py, m);
+    }
+
+    function render() {
+      var m = metrics();
+      resizeCanvas(m);
+      ctx.clearRect(0, 0, m.w, m.h);
+      drawGrid(m);
+      drawBars(m);
+      drawEquity(m);
+      drawFocus(m);
+      drawLabels(m);
+    }
+
+    function nearestFromEvent(ev) {
+      var rect = canvas.getBoundingClientRect();
+      var sx = ev.clientX - rect.left;
+      var m = metrics();
+      var idx = Math.round((sx - m.padL) / Math.max(1, m.chartW) * (points.length - 1));
+      return Math.max(0, Math.min(points.length - 1, idx));
+    }
+
+    function placeTip(p, px, py, m) {
+      tip.innerHTML =
+        '<div class="ax-tip-date">' + esc(p.date || "--") + '</div>' +
+        '<div class="ax-tip-row"><span>账户权益</span><b>' + fmt(p.equity_usdt, 2) + 'U</b></div>' +
+        '<div class="ax-tip-row"><span>每日收益</span><b class="' + cls(p.daily_pnl_usdt) + '">' + (Number(p.daily_pnl_usdt || 0) > 0 ? "+" : "") + fmt(p.daily_pnl_usdt, 2) + 'U</b></div>' +
+        '<div class="ax-tip-row"><span>累计收益</span><b class="' + cls(p.total_pnl_usdt) + '">' + (Number(p.total_pnl_usdt || 0) > 0 ? "+" : "") + fmt(p.total_pnl_usdt, 2) + 'U</b></div>';
+      tip.style.left = Math.max(96, Math.min(m.w - 96, px)) + "px";
+      tip.style.top = Math.max(42, py) + "px";
+      tip.classList.add("show");
+    }
+
+    function hide() {
+      if (locked) return;
+      activeIdx = null;
+      tip.classList.remove("show");
+      render();
+    }
+
+    root.addEventListener("mousemove", function (ev) {
+      if (locked) return;
+      activeIdx = nearestFromEvent(ev);
+      render();
+    });
+    root.addEventListener("mouseleave", hide);
+    root.addEventListener("click", function (ev) {
+      activeIdx = nearestFromEvent(ev);
+      locked = !locked;
+      render();
+    });
+    root.addEventListener("keydown", function (ev) {
+      if (ev.key === "Escape") {
+        locked = false;
+        hide();
+      }
+    });
+
+    if (window.ResizeObserver) {
+      ro = new ResizeObserver(render);
+      ro.observe(root);
+    } else {
+      window.addEventListener("resize", render);
+    }
+    render();
+    root._axDestroy = function () {
+      if (ro) ro.disconnect();
+      window.removeEventListener("resize", render);
+    };
+    container._axDestroy = root._axDestroy;
+  }
+
+  function priceDecimals(ref) {
+    ref = Math.abs(Number(ref || 0));
+    if (ref >= 1000) return 1;
+    if (ref >= 100) return 2;
+    if (ref >= 1) return 4;
+    if (ref >= 0.01) return 6;
+    return 8;
+  }
+
+  function fmtPrice(v, decimals) {
+    v = Number(v || 0);
+    if (!Number.isFinite(v)) return "--";
+    return v.toLocaleString(undefined, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: decimals == null ? priceDecimals(v) : decimals
+    });
+  }
+
+  function candleTime(c) {
+    var t = c && (c.time || c.timestamp || c.open_time || c.openTime || c.t);
+    if (typeof t === "string") {
+      var parsed = Date.parse(t);
+      return Number.isFinite(parsed) ? parsed : 0;
+    }
+    t = Number(t || 0);
+    return t > 0 && t < 100000000000 ? t * 1000 : t;
+  }
+
+  function fmtCandleDate(t) {
+    if (!t) return "--";
+    var d = new Date(t);
+    if (Number.isNaN(d.getTime())) return "--";
+    var mm = String(d.getMonth() + 1).padStart(2, "0");
+    var dd = String(d.getDate()).padStart(2, "0");
+    var hh = String(d.getHours()).padStart(2, "0");
+    var mi = String(d.getMinutes()).padStart(2, "0");
+    return mm + "-" + dd + " " + hh + ":" + mi;
+  }
+
+  function roundedRect(ctx, x, y, w, h, r) {
+    r = Math.max(0, Math.min(r || 0, w / 2, h / 2));
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+  }
+
+  function renderKline(container, payload) {
+    injectCss();
+    if (!container) return;
+    if (container._axDestroy) {
+      container._axDestroy();
+      container._axDestroy = null;
+    }
+    var candles = ((payload && payload.candles) || []).slice(-60).map(function (c) {
+      return {
+        time: candleTime(c),
+        open: Number(c.open || 0),
+        high: Number(c.high || 0),
+        low: Number(c.low || 0),
+        close: Number(c.close || 0),
+        volume: Number(c.volume || 0)
+      };
+    }).filter(function (c) {
+      return c.high > 0 && c.low > 0 && c.close > 0;
+    });
+    if (candles.length < 5) {
+      container.innerHTML = '<div class="chart-loading">K线数据不足</div>';
+      return;
+    }
+
+    var symbol = (payload && payload.symbol) || "";
+    var entryPrice = Number((payload && payload.entryPrice) || 0);
+    var stopLoss = Number((payload && payload.stopLoss) || 0);
+    var tp1 = Number((payload && payload.tp1) || 0);
+    var recTime = payload && payload.recTime ? Date.parse(payload.recTime) : 0;
+    var tp1Time = payload && payload.tp1Time ? Date.parse(payload.tp1Time) : 0;
+    var slTime = payload && payload.slTime ? Date.parse(payload.slTime) : 0;
+    var actionStatus = (payload && payload.actionStatus) || "";
+    var refPrice = Number((payload && payload.refPrice) || entryPrice || candles[candles.length - 1].close || 0);
+    var decimals = priceDecimals(refPrice || entryPrice || candles[candles.length - 1].close);
+
+    container.innerHTML = '<div class="ax-chart ax-kline" tabindex="0" aria-label="可交互K线图，移动鼠标查看K线明细，点击可锁定"><canvas></canvas><div class="ax-tooltip" aria-hidden="true"></div><div class="ax-hint">hover 查看K线</div></div>';
+    var root = container.querySelector(".ax-chart");
+    var canvas = root.querySelector("canvas");
+    var ctx = canvas.getContext("2d");
+    var tip = root.querySelector(".ax-tooltip");
+    var locked = false;
+    var activeIdx = null;
+    var ro = null;
+
+    var minPrice = Infinity, maxPrice = -Infinity, maxVol = 1;
+    candles.forEach(function (c) {
+      minPrice = Math.min(minPrice, c.low);
+      maxPrice = Math.max(maxPrice, c.high);
+      maxVol = Math.max(maxVol, c.volume || 0);
+    });
+    [entryPrice, stopLoss, tp1].forEach(function (p) {
+      if (p > 0) {
+        minPrice = Math.min(minPrice, p);
+        maxPrice = Math.max(maxPrice, p);
+      }
+    });
+    var padding = Math.max((maxPrice - minPrice) * 0.06, maxPrice * 0.001);
+    minPrice -= padding;
+    maxPrice += padding;
+    if (maxPrice <= minPrice) maxPrice = minPrice + 1;
+
+    function metrics() {
+      var rect = root.getBoundingClientRect();
+      var w = Math.max(300, rect.width || container.clientWidth || 360);
+      var h = Math.max(190, rect.height || container.clientHeight || 200);
+      var padL = 4, padR = 4, padT = 12, padB = 20, volH = 32;
+      var chartH = Math.max(108, h - padT - padB - volH);
+      var chartW = Math.max(1, w - padL - padR);
+      return {w: w, h: h, padL: padL, padR: padR, padT: padT, padB: padB, volH: volH, chartH: chartH, chartW: chartW};
+    }
+
+    function resizeCanvas(m) {
+      var dpr = Math.max(1, window.devicePixelRatio || 1);
+      var bw = Math.round(m.w * dpr);
+      var bh = Math.round(m.h * dpr);
+      if (canvas.width !== bw || canvas.height !== bh) {
+        canvas.width = bw;
+        canvas.height = bh;
+      }
+      canvas.style.width = m.w + "px";
+      canvas.style.height = m.h + "px";
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    function x(i, m) {
+      var step = m.chartW / candles.length;
+      return m.padL + step * i + step / 2;
+    }
+
+    function y(price, m) {
+      return m.padT + (maxPrice - price) * m.chartH / (maxPrice - minPrice);
+    }
+
+    function nearestIndexFromTime(ts) {
+      if (!ts) return -1;
+      var best = -1, diff = Infinity;
+      candles.forEach(function (c, i) {
+        var d = Math.abs(c.time - ts);
+        if (d < diff) {
+          diff = d;
+          best = i;
+        }
+      });
+      return best;
+    }
+
+    function drawGrid(m) {
+      ctx.strokeStyle = "rgba(148,163,184,.20)";
+      ctx.lineWidth = 1;
+      ctx.font = "800 10px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+      ctx.fillStyle = color("--stone", "#8e91a0");
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "right";
+      for (var i = 0; i <= 3; i++) {
+        var gy = m.padT + m.chartH * i / 3;
+        var p = maxPrice - (maxPrice - minPrice) * i / 3;
+        ctx.beginPath();
+        ctx.moveTo(m.padL, gy);
+        ctx.lineTo(m.w - m.padR, gy);
+        ctx.stroke();
+        ctx.fillText(fmtPrice(p, decimals), m.w - m.padR - 4, gy + 8);
+      }
+    }
+
+    function drawCandles(m) {
+      var step = m.chartW / candles.length;
+      var cw = Math.max(2, Math.min(9, step * 0.62));
+      candles.forEach(function (c, i) {
+        var up = c.close >= c.open;
+        var cx = x(i, m);
+        var x0 = cx - cw / 2;
+        var yo = y(c.open, m), yc = y(c.close, m), yh = y(c.high, m), yl = y(c.low, m);
+        ctx.strokeStyle = up ? "rgba(0,180,115,.95)" : "rgba(229,62,62,.92)";
+        ctx.fillStyle = up ? "rgba(0,180,115,.86)" : "rgba(229,62,62,.84)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(cx, yh);
+        ctx.lineTo(cx, yl);
+        ctx.stroke();
+        ctx.fillRect(x0, Math.min(yo, yc), cw, Math.max(1, Math.abs(yc - yo)));
+
+        var vh = Math.max(1, (c.volume || 0) / maxVol * (m.volH - 4));
+        ctx.fillStyle = up ? "rgba(0,180,115,.24)" : "rgba(229,62,62,.20)";
+        ctx.fillRect(x0, m.h - m.padB - vh, cw, vh);
+      });
+    }
+
+    function drawPriceMarker(m, value, label, markerColor) {
+      if (!(value > 0)) return;
+      var py = y(value, m);
+      ctx.save();
+      ctx.strokeStyle = markerColor;
+      ctx.globalAlpha = 0.75;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([5, 4]);
+      ctx.beginPath();
+      ctx.moveTo(m.padL, py);
+      ctx.lineTo(m.w - m.padR, py);
+      ctx.stroke();
+      ctx.restore();
+      var text = label + " " + fmtPrice(value, decimals);
+      ctx.font = "900 10px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+      var tw = ctx.measureText(text).width + 10;
+      ctx.fillStyle = "rgba(255,255,255,.88)";
+      ctx.strokeStyle = markerColor;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      roundedRect(ctx, m.padL + 4, py - 9, tw, 18, 9);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = markerColor;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, m.padL + 9, py);
+    }
+
+    function drawEventMarker(m, ts, label, markerColor, price) {
+      var idx = nearestIndexFromTime(ts);
+      if (idx < 0) return;
+      var px = x(idx, m);
+      var baseY = m.h - m.padB - m.volH + 14;
+      ctx.save();
+      ctx.strokeStyle = markerColor;
+      ctx.globalAlpha = 0.78;
+      ctx.setLineDash([3, 4]);
+      ctx.beginPath();
+      ctx.moveTo(px, y(candles[idx].low, m) + 3);
+      ctx.lineTo(px, baseY);
+      ctx.stroke();
+      ctx.restore();
+      ctx.font = "950 12px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillStyle = markerColor;
+      ctx.fillText(label, px, baseY + 9);
+      if (price > 0) {
+        ctx.font = "850 9px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+        ctx.fillText("$" + fmtPrice(price, decimals), px, baseY + 22);
+      }
+    }
+
+    function drawLabels(m) {
+      ctx.fillStyle = color("--stone", "#8e91a0");
+      ctx.font = "850 10px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      ctx.fillText(fmtCandleDate(candles[0].time), m.padL + 6, m.h - 10);
+      ctx.textAlign = "right";
+      ctx.fillText(fmtCandleDate(candles[candles.length - 1].time), m.w - m.padR - 6, m.h - 10);
+    }
+
+    function drawFocus(m) {
+      if (activeIdx == null) return;
+      var c = candles[activeIdx];
+      var px = x(activeIdx, m);
+      var py = y(c.close, m);
+      ctx.save();
+      ctx.strokeStyle = "rgba(15,23,42,.35)";
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(px, m.padT);
+      ctx.lineTo(px, m.h - m.padB);
+      ctx.moveTo(m.padL, py);
+      ctx.lineTo(m.w - m.padR, py);
+      ctx.stroke();
+      ctx.restore();
+      ctx.beginPath();
+      ctx.arc(px, py, 4, 0, Math.PI * 2);
+      ctx.fillStyle = color("--canvas", "#fff");
+      ctx.fill();
+      ctx.strokeStyle = color("--blue", "#4262ff");
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      placeTip(c, px, py, m);
+    }
+
+    function render() {
+      var m = metrics();
+      resizeCanvas(m);
+      ctx.clearRect(0, 0, m.w, m.h);
+      drawGrid(m);
+      drawPriceMarker(m, tp1, "TP", color("--green", "#00b473"));
+      drawPriceMarker(m, entryPrice, actionStatus === "等回踩" ? "回踩" : "入场", color("--blue", "#4262ff"));
+      drawPriceMarker(m, stopLoss, "SL", color("--red", "#e53e3e"));
+      drawCandles(m);
+      if (recTime) drawEventMarker(m, recTime, actionStatus === "等回踩" ? "△" : "▲", actionStatus === "等回踩" ? "#8e91a0" : color("--blue", "#4262ff"), entryPrice);
+      if (tp1Time) drawEventMarker(m, tp1Time, "✓", color("--green", "#00b473"), tp1);
+      if (slTime) drawEventMarker(m, slTime, "×", color("--red", "#e53e3e"), stopLoss);
+      drawFocus(m);
+      drawLabels(m);
+    }
+
+    function nearestFromEvent(ev) {
+      var rect = canvas.getBoundingClientRect();
+      var sx = ev.clientX - rect.left;
+      var m = metrics();
+      var idx = Math.floor((sx - m.padL) / Math.max(1, m.chartW) * candles.length);
+      return Math.max(0, Math.min(candles.length - 1, idx));
+    }
+
+    function placeTip(c, px, py, m) {
+      var pct = c.open ? (c.close / c.open - 1) * 100 : 0;
+      tip.innerHTML =
+        '<div class="ax-tip-date">' + esc(symbol ? symbol + " · " : "") + esc(fmtCandleDate(c.time)) + '</div>' +
+        '<div class="ax-tip-row"><span>开</span><b>$' + fmtPrice(c.open, decimals) + '</b></div>' +
+        '<div class="ax-tip-row"><span>高 / 低</span><b>$' + fmtPrice(c.high, decimals) + ' / $' + fmtPrice(c.low, decimals) + '</b></div>' +
+        '<div class="ax-tip-row"><span>收</span><b class="' + cls(pct) + '">$' + fmtPrice(c.close, decimals) + ' (' + (pct > 0 ? "+" : "") + pct.toFixed(2) + '%)</b></div>' +
+        '<div class="ax-tip-row"><span>成交量</span><b>' + fmt(c.volume, 0) + '</b></div>';
+      tip.style.left = Math.max(96, Math.min(m.w - 96, px)) + "px";
+      tip.style.top = Math.max(42, py) + "px";
+      tip.classList.add("show");
+    }
+
+    function hide() {
+      if (locked) return;
+      activeIdx = null;
+      tip.classList.remove("show");
+      render();
+    }
+
+    root.addEventListener("mousemove", function (ev) {
+      if (locked) return;
+      activeIdx = nearestFromEvent(ev);
+      render();
+    });
+    root.addEventListener("mouseleave", hide);
+    root.addEventListener("click", function (ev) {
+      activeIdx = nearestFromEvent(ev);
+      locked = !locked;
+      render();
+    });
+    root.addEventListener("keydown", function (ev) {
+      if (ev.key === "Escape") {
+        locked = false;
+        hide();
+      }
+    });
+
+    if (window.ResizeObserver) {
+      ro = new ResizeObserver(render);
+      ro.observe(root);
+    } else {
+      window.addEventListener("resize", render);
+    }
+    render();
+    root._axDestroy = function () {
+      if (ro) ro.disconnect();
+      window.removeEventListener("resize", render);
+    };
+    container._axDestroy = root._axDestroy;
+  }
+
+  return { renderEquity: renderEquity, renderKline: renderKline };
+})();
diff --git a/static/paper_trading.html b/static/paper_trading.html
index 9ad66c7..90d9e07 100644
--- a/static/paper_trading.html
+++ b/static/paper_trading.html
@@ -117,6 +117,7 @@
 </div>
 {% endblock %}
 {% block extra_script %}
+<script src="/static/chart_widgets.js"></script>
 <script>
 var LIMIT=50,openOffset=0,openTotal=0,EVENT_LIMIT=80,eventOffset=0,eventTotal=0;
 function $(id){return document.getElementById(id)}
@@ -151,7 +152,7 @@ function renderPerformance(d){var points=d.points||[];if(!points.length){$('perf
   '<span class="perf-pill '+(ret>=0?'pos':'neg')+'">总收益率 '+(ret>0?'+':'')+fmt(ret,2)+'%</span>',
   '<span class="perf-pill">最大回撤 '+fmt(dd,2)+'%</span>',
   '<span class="perf-pill '+(pnl>=0?'pos':'neg')+'">总收益 '+(pnl>0?'+':'')+fmt(pnl,2)+'U</span>'
-].join('');var w=960,h=260,pad=38,top=22,lineH=150,barBase=224;var equities=points.map(function(p){return Number(p.equity_usdt||0)}),pnls=points.map(function(p){return Number(p.daily_pnl_usdt||0)});var minEq=Math.min.apply(null,equities),maxEq=Math.max.apply(null,equities);if(maxEq===minEq){maxEq+=1;minEq-=1}function x(i){return pad+(points.length===1?0:i*(w-pad*2)/(points.length-1))}function y(v){return top+(maxEq-v)*lineH/(maxEq-minEq)}var line=points.map(function(p,i){return x(i).toFixed(1)+','+y(Number(p.equity_usdt||0)).toFixed(1)}).join(' ');var area=pad+','+barBase+' '+line+' '+x(points.length-1).toFixed(1)+','+barBase;var maxAbs=Math.max.apply(null,[1].concat(pnls.map(function(v){return Math.abs(v)})));var barW=Math.max(3,(w-pad*2)/points.length*.55);var bars=points.map(function(p,i){var v=Number(p.daily_pnl_usdt||0),bh=Math.abs(v)/maxAbs*44,bx=x(i)-barW/2,by=v>=0?barBase-bh:barBase;return '<rect class="'+(v>=0?'bar-pos':'bar-neg')+'" x="'+bx.toFixed(1)+'" y="'+by.toFixed(1)+'" width="'+barW.toFixed(1)+'" height="'+Math.max(1,bh).toFixed(1)+'"><title>'+esc(p.date)+' 每日收益 '+(v>0?'+':'')+fmt(v,2)+'U</title></rect>'}).join('');var first=points[0],last=points[points.length-1];var grid=[top,top+lineH/2,top+lineH].map(function(gy){return '<line class="chart-grid" x1="'+pad+'" x2="'+(w-pad)+'" y1="'+gy+'" y2="'+gy+'"></line>'}).join('');$('performanceChart').innerHTML='<svg viewBox="0 0 '+w+' '+h+'" role="img" aria-label="策略交易每日收益与权益曲线">'+grid+'<polygon class="equity-area" points="'+area+'"></polygon>'+bars+'<polyline class="equity-line" points="'+line+'"></polyline><text class="chart-label" x="'+pad+'" y="248">'+esc(first.date)+'</text><text class="chart-label" text-anchor="end" x="'+(w-pad)+'" y="248">'+esc(last.date)+'</text><text class="chart-label" x="'+pad+'" y="14">权益 '+fmt(minEq,0)+'U - '+fmt(maxEq,0)+'U</text><text class="chart-label" text-anchor="end" x="'+(w-pad)+'" y="14">柱状图：每日实现收益</text></svg>'}
+].join('');AlphaXCharts.renderEquity($('performanceChart'),d)}
 async function loadOrders(){$('orderRows').innerHTML='<tr><td colspan="11" class="loading">加载中...</td></tr>';try{var d=await api('/api/paper-trading/orders?limit=50&offset=0&status=pending');renderOrders(d.items||[])}catch(e){$('orderRows').innerHTML='<tr><td colspan="11" class="empty">'+esc(e.message)+'</td></tr>'}}
 function renderOrders(items){if(!items.length){$('orderRows').innerHTML='<tr><td colspan="11" class="empty">暂无等待触价的策略挂单</td></tr>';return}$('orderRows').innerHTML=items.map(function(x){var latest=x.latest_price||x.current_price_at_create||0,dist=Number(x.distance_to_target_pct||0);return '<tr>'+
   '<td><div class="sym">'+esc(x.symbol)+'</div><div class="muted">#'+esc(x.id)+' · Rec '+esc(x.recommendation_id)+'</div></td>'+