feat: restyle fund overview with HUD UI and nav reorder
Move funds before monitor in nav while keeping monitor the default landing page; use card layout with curves in fullscreen and a tech/AI-themed funds dashboard. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -92,8 +92,8 @@
|
||||
function chartPalette() {
|
||||
const light = document.documentElement.getAttribute("data-theme") === "light";
|
||||
return light
|
||||
? { bg: "#f0f4f9", text: "#4a6078", border: "#b8c8d8", line: "#006e9a" }
|
||||
: { bg: "#0b0e18", text: "#9aa4b8", border: "#2a3348", line: "#3b82f6" };
|
||||
? { bg: "#eef4fa", text: "#4a6078", border: "#c5d4e4", line: "#006e9a", top: "#006e9a44" }
|
||||
: { bg: "#060a14", text: "#6b8aa8", border: "#1a2840", line: "#00d4ff", top: "#00d4ff55" };
|
||||
}
|
||||
|
||||
function createAreaChart(host) {
|
||||
@@ -112,7 +112,7 @@
|
||||
});
|
||||
const s = c.addAreaSeries({
|
||||
lineColor: p.line,
|
||||
topColor: p.line + "44",
|
||||
topColor: p.top || p.line + "44",
|
||||
bottomColor: p.line + "08",
|
||||
lineWidth: 2,
|
||||
priceFormat: { type: "price", precision: 2, minMove: 0.01 },
|
||||
@@ -142,35 +142,11 @@
|
||||
fsLineSeries = built.series;
|
||||
}
|
||||
|
||||
function renderMiniChart(host, series) {
|
||||
if (!host || !window.LightweightCharts) return;
|
||||
host.innerHTML = "";
|
||||
const data = seriesToChartData(series);
|
||||
if (data.length < 2) {
|
||||
host.textContent = "历史不足";
|
||||
return;
|
||||
}
|
||||
const p = chartPalette();
|
||||
const mini = LightweightCharts.createChart(host, {
|
||||
layout: { background: { color: "transparent" }, textColor: p.text },
|
||||
grid: { vertLines: { visible: false }, horzLines: { visible: false } },
|
||||
rightPriceScale: { visible: false },
|
||||
timeScale: { visible: false },
|
||||
crosshair: { mode: LightweightCharts.CrosshairMode.Hidden },
|
||||
handleScroll: false,
|
||||
handleScale: false,
|
||||
});
|
||||
const s = mini.addAreaSeries({
|
||||
lineColor: p.line,
|
||||
topColor: p.line + "55",
|
||||
bottomColor: p.line + "05",
|
||||
lineWidth: 1.5,
|
||||
});
|
||||
s.setData(data);
|
||||
mini.timeScale().fitContent();
|
||||
const w = host.clientWidth;
|
||||
const h = host.clientHeight;
|
||||
if (w > 0 && h > 0) mini.applyOptions({ width: w, height: h });
|
||||
function esc(s) {
|
||||
return String(s || "")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/"/g, """);
|
||||
}
|
||||
|
||||
function accountStatus(ac) {
|
||||
@@ -179,15 +155,6 @@
|
||||
return { text: "余额未齐", cls: "" };
|
||||
}
|
||||
|
||||
function monitoredLabel(ac) {
|
||||
return ac && ac.monitored ? "暂无曲线" : "未参与";
|
||||
}
|
||||
|
||||
function shortAmt(ac) {
|
||||
if (!ac || !ac.monitored || !ac.data_ok) return "—";
|
||||
return fmt(ac.total_usdt, 0) + " U";
|
||||
}
|
||||
|
||||
function renderAccounts(accounts) {
|
||||
if (!elAccounts) return;
|
||||
if (!accounts || !accounts.length) {
|
||||
@@ -200,50 +167,74 @@
|
||||
const offCls = monitored ? "" : " is-off";
|
||||
const st = accountStatus(ac);
|
||||
const clickable = monitored ? "" : ' disabled aria-disabled="true"';
|
||||
const name = ac.name || ac.key || "—";
|
||||
const total =
|
||||
monitored && ac.data_ok ? fmt(ac.total_usdt, 2) + " U" : "—";
|
||||
const funding =
|
||||
monitored && ac.funding_usdt != null ? fmt(ac.funding_usdt, 2) + " U" : "—";
|
||||
const trading =
|
||||
monitored && ac.trading_usdt != null ? fmt(ac.trading_usdt, 2) + " U" : "—";
|
||||
const dd = ac.drawdown || {};
|
||||
const ddU = dd.max_drawdown_u != null ? fmt(dd.max_drawdown_u, 2) + " U" : "—";
|
||||
const ddPct = dd.max_drawdown_pct != null ? fmt(dd.max_drawdown_pct, 2) + "%" : "—";
|
||||
const deltaCls = deltaClass(ac.day_delta_usdt);
|
||||
const deltaText = monitored ? fmtDelta(ac.day_delta_usdt) : "—";
|
||||
return (
|
||||
'<div class="funds-ac-item">' +
|
||||
'<button type="button" class="funds-ac-circle' +
|
||||
'<button type="button" class="funds-ac-card' +
|
||||
offCls +
|
||||
'" data-key="' +
|
||||
(ac.key || "") +
|
||||
esc(ac.key || "") +
|
||||
'"' +
|
||||
clickable +
|
||||
' title="' +
|
||||
(monitored ? "点击查看资金曲线" : "未监控，不参与合计") +
|
||||
esc(monitored ? "点击查看 " + name + " 资金曲线" : "未监控，不参与合计") +
|
||||
'">' +
|
||||
'<div class="funds-ac-circle-chart" aria-hidden="true"></div>' +
|
||||
'<div class="funds-ac-circle-overlay">' +
|
||||
'<span class="funds-ac-circle-name">' +
|
||||
(ac.name || ac.key || "—") +
|
||||
"</span>" +
|
||||
'<span class="funds-ac-circle-amt">' +
|
||||
shortAmt(ac) +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
"</button>" +
|
||||
'<span class="funds-ac-circle-badge ' +
|
||||
'<div class="funds-ac-head">' +
|
||||
'<h3 class="funds-ac-name">' +
|
||||
esc(name) +
|
||||
"</h3>" +
|
||||
'<span class="funds-ac-badge ' +
|
||||
st.cls +
|
||||
'">' +
|
||||
st.text +
|
||||
"</span>" +
|
||||
"</div>"
|
||||
"</div>" +
|
||||
'<div class="funds-ac-total">' +
|
||||
'<span class="k">总资金</span>' +
|
||||
'<span class="v">' +
|
||||
total +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
'<div class="funds-ac-stats">' +
|
||||
'<div><span class="k">资金户</span><span class="v">' +
|
||||
funding +
|
||||
"</span></div>" +
|
||||
'<div><span class="k">交易户</span><span class="v">' +
|
||||
trading +
|
||||
"</span></div>" +
|
||||
'<div><span class="k">较昨日</span><span class="v ' +
|
||||
deltaCls +
|
||||
'">' +
|
||||
deltaText +
|
||||
"</span></div>" +
|
||||
'<div><span class="k">最大回撤</span><span class="v">' +
|
||||
ddU +
|
||||
" / " +
|
||||
ddPct +
|
||||
"</span></div>" +
|
||||
"</div>" +
|
||||
(monitored
|
||||
? '<div class="funds-ac-foot">点击查看资金曲线</div>'
|
||||
: "") +
|
||||
"</button>"
|
||||
);
|
||||
})
|
||||
.join("");
|
||||
|
||||
elAccounts.querySelectorAll(".funds-ac-circle").forEach(function (btn, idx) {
|
||||
const ac = accounts[idx];
|
||||
const host = btn.querySelector(".funds-ac-circle-chart");
|
||||
if (ac && ac.monitored && host) {
|
||||
renderMiniChart(host, ac.series || []);
|
||||
} else if (host) {
|
||||
host.textContent = monitoredLabel(ac);
|
||||
}
|
||||
if (ac && ac.monitored) {
|
||||
btn.addEventListener("click", function () {
|
||||
openAccountFullscreen(ac.key);
|
||||
});
|
||||
}
|
||||
elAccounts.querySelectorAll(".funds-ac-card:not(.is-off)").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
openAccountFullscreen(btn.getAttribute("data-key"));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user