Sync equity curve with card theme and keep trade actions on one row.

Use CSS variables for chart colors with dark/light auto-switch; prevent trade action buttons from wrapping.

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

static/js/equity_curve.js

@@ -3,6 +3,25 @@
     var raw = window.__EQUITY_CURVE__;
     if (!el || !raw || !raw.length || !window.LightweightCharts) return;
 
+    var chart = null;
+    var series = null;
+    var chartData = [];
+
+    function cssVar(name, fallback) {
+        var v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+        return v || fallback;
+    }
+
+    function themeColors() {
+        return {
+            bg: cssVar('--card-inner', '#101424'),
+            text: cssVar('--text-muted', '#7a82a0'),
+            grid: cssVar('--table-border', 'rgba(76,194,255,.1)'),
+            border: cssVar('--card-border', 'rgba(76,194,255,.22)'),
+            line: cssVar('--accent', '#4cc2ff'),
+        };
+    }
+
     function parseTime(s) {
         if (!s) return null;
         var t = String(s).trim().replace(' ', 'T');
@@ -12,50 +31,93 @@
         return Math.floor(d.getTime() / 1000);
     }
 
-    var data = [];
+    function buildData() {
-    var lastTs = 0;
+        var data = [];
-    raw.forEach(function (p) {
+        var lastTs = 0;
-        var ts = parseTime(p.time);
+        raw.forEach(function (p) {
-        if (ts == null) return;
+            var ts = parseTime(p.time);
-        if (ts <= lastTs) ts = lastTs + 1;
+            if (ts == null) return;
-        lastTs = ts;
+            if (ts <= lastTs) ts = lastTs + 1;
-        data.push({ time: ts, value: Number(p.value) });
+            lastTs = ts;
-    });
+            data.push({ time: ts, value: Number(p.value) });
-    if (!data.length) {
+        });
-        el.innerHTML = '<p class="text-muted" style="padding:1rem">暂无资金曲线数据</p>';
+        return data;
-        return;
     }
 
-    var c = {
+    function applyChartTheme() {
-        bg: '#1a1d24',
+        if (!chart || !series) return;
-        text: '#9ca3af',
+        var c = themeColors();
-        grid: '#2d3139',
+        chart.applyOptions({
-        line: '#6366f1',
+            layout: {
-    };
+                background: { type: 'solid', color: c.bg },
-    var chart = LightweightCharts.createChart(el, {
+                textColor: c.text,
-        width: el.clientWidth || 800,
+            },
-        height: 220,
+            grid: {
-        layout: {
+                vertLines: { color: c.grid },
-            background: { type: 'solid', color: c.bg },
+                horzLines: { color: c.grid },
-            textColor: c.text,
+            },
-            fontSize: 11,
+            rightPriceScale: { borderColor: c.border },
-        },
+            timeScale: { borderColor: c.border },
-        grid: {
+        });
-            vertLines: { color: c.grid },
+        series.applyOptions({ color: c.line });
-            horzLines: { color: c.grid },
+    }
-        },
+
-        rightPriceScale: { borderColor: c.grid },
+    function renderChart() {
-        timeScale: { borderColor: c.grid, timeVisible: true, secondsVisible: false },
+        chartData = buildData();
-    });
+        if (!chartData.length) {
-    var series = chart.addLineSeries({
+            el.innerHTML = '<p class="text-muted" style="padding:1rem">暂无资金曲线数据</p>';
-        color: c.line,
+            return;
-        lineWidth: 2,
+        }
-        priceFormat: { type: 'price', precision: 2, minMove: 0.01 },
+
-    });
+        var c = themeColors();
-    series.setData(data);
+        if (chart) {
-    chart.timeScale().fitContent();
+            chart.remove();
+            chart = null;
+            series = null;
+        }
+
+        chart = LightweightCharts.createChart(el, {
+            width: el.clientWidth || 800,
+            height: 220,
+            layout: {
+                background: { type: 'solid', color: c.bg },
+                textColor: c.text,
+                fontSize: 11,
+            },
+            grid: {
+                vertLines: { color: c.grid },
+                horzLines: { color: c.grid },
+            },
+            rightPriceScale: { borderColor: c.border },
+            timeScale: { borderColor: c.border, timeVisible: true, secondsVisible: false },
+        });
+        series = chart.addLineSeries({
+            color: c.line,
+            lineWidth: 2,
+            priceFormat: { type: 'price', precision: 2, minMove: 0.01 },
+        });
+        series.setData(chartData);
+        chart.timeScale().fitContent();
+    }
+
+    renderChart();
 
     window.addEventListener('resize', function () {
-        chart.applyOptions({ width: el.clientWidth || 800 });
+        if (chart) chart.applyOptions({ width: el.clientWidth || 800 });
     });
+
+    document.addEventListener('click', function (e) {
+        if (e.target.closest('[data-theme-pick]')) {
+            setTimeout(applyChartTheme, 50);
+        }
+    });
+
+    if (typeof MutationObserver !== 'undefined') {
+        var obs = new MutationObserver(function (mutations) {
+            mutations.forEach(function (m) {
+                if (m.attributeName === 'data-theme') applyChartTheme();
+            });
+        });
+        obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    }
 })();

templates/base.html

@@ -432,8 +432,8 @@
         .trade-table .cell-readonly{color:var(--text-primary)}
         .records-trade-card{overflow:visible}
         .records-trade-card .card-body{overflow:visible}
-        .trade-actions{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;min-width:148px}
+        .trade-actions{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;min-width:230px;white-space:nowrap}
-        .trade-actions a,.trade-actions button{font-size:.72rem;padding:.3rem .55rem;border-radius:6px;text-decoration:none;border:none;cursor:pointer}
+        .trade-actions a,.trade-actions button{flex-shrink:0;white-space:nowrap;font-size:.72rem;padding:.3rem .55rem;border-radius:6px;text-decoration:none;border:none;cursor:pointer}
         .btn-fill{background:var(--dir-bg);color:var(--accent)}
         .btn-verify{background:var(--nav-active);color:#fff}
         .btn-verify:disabled{opacity:.45;cursor:not-allowed}