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
2026-06-10 17:12:58 +08:00
parent ec8607932b
commit 9602acafb2
4 changed files with 471 additions and 202 deletions
+51 -30
View File
@@ -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-funds" />
<link rel="stylesheet" href="/assets/app.css?v=20260609-hub-funds-ai" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -44,10 +44,10 @@
</div>
<span id="sys-status" class="sys-pill" title="系统状态">SYNC</span>
<nav class="top-nav">
<a href="/funds" id="nav-funds">资金概况</a>
<a href="/monitor" id="nav-monitor">监控区</a>
<a href="/market" id="nav-market">行情区</a>
<a href="/archive" id="nav-archive">币种档案</a>
<a href="/funds" id="nav-funds">资金概况</a>
<a href="/ai" id="nav-ai">AI 教练</a>
<a href="/settings" id="nav-settings">系统设置</a>
</nav>
@@ -332,33 +332,54 @@
</div>
<div id="page-funds" class="page hidden">
<div class="page-head">
<h1><span class="head-tag">FND</span> 资金概况</h1>
<p class="page-desc">总资金 = 各监控户(资金账户 + 交易账户);自 2026-06-09 起按北京时间交易日切日快照,最多保留 180 天</p>
<div class="funds-stage">
<div class="funds-stage-grid" aria-hidden="true"></div>
<div class="funds-stage-glow" aria-hidden="true"></div>
<div class="funds-stage-scan" aria-hidden="true"></div>
<div class="funds-stage-inner">
<div class="page-head funds-head">
<div class="funds-head-main">
<h1><span class="head-tag funds-tag">CAP</span> 资金概况</h1>
<p class="page-desc funds-desc">总资金 = 各监控户(资金账户 + 交易账户);自 2026-06-09 起按北京时间交易日切日快照,最多保留 180 天</p>
</div>
<div class="funds-live-pill" aria-hidden="true">
<span class="funds-live-dot"></span>
<span>EQUITY FEED</span>
</div>
</div>
<div class="funds-toolbar toolbar">
<button type="button" id="funds-btn-refresh" class="primary funds-btn-refresh">同步快照</button>
<span id="funds-status" class="toolbar-meta funds-status"></span>
</div>
<section class="funds-summary">
<div class="funds-stat-card funds-stat-card-primary">
<div class="funds-stat-label">总资金 · TOTAL</div>
<div id="funds-total-usdt" class="funds-stat-value"></div>
</div>
<div class="funds-stat-card">
<div class="funds-stat-label">较昨日 · Δ24H</div>
<div id="funds-total-delta" class="funds-stat-val"></div>
</div>
<div class="funds-stat-card">
<div class="funds-stat-label">最大回撤 · MDD</div>
<div class="funds-stat-value"><span id="funds-total-dd-u"></span> <small id="funds-total-dd-pct" class="funds-dd-pct"></small></div>
</div>
</section>
<p id="funds-meta" class="funds-meta"></p>
<div class="funds-chart-panel">
<div class="funds-chart-head">
<span class="funds-chart-tag">EQUITY CURVE</span>
<span class="funds-chart-sub">180 TRADING DAYS</span>
</div>
<div id="funds-chart-total" class="funds-chart-host"></div>
</div>
<div class="funds-section-head">
<h2 class="funds-section-title"><span class="funds-section-mark">//</span> 分户资金</h2>
<p class="funds-section-hint">点击卡片放大查看资金曲线与回撤</p>
</div>
<div id="funds-accounts" class="funds-accounts"></div>
</div>
</div>
<div class="funds-toolbar toolbar">
<button type="button" id="funds-btn-refresh" class="primary">刷新</button>
<span id="funds-status" class="toolbar-meta funds-status"></span>
</div>
<section class="funds-summary">
<div class="funds-stat-card">
<div class="funds-stat-label">总资金</div>
<div id="funds-total-usdt" class="funds-stat-value"></div>
</div>
<div class="funds-stat-card">
<div class="funds-stat-label">较昨日</div>
<div id="funds-total-delta" class="funds-stat-val"></div>
</div>
<div class="funds-stat-card">
<div class="funds-stat-label">最大回撤</div>
<div class="funds-stat-value"><span id="funds-total-dd-u"></span> <small id="funds-total-dd-pct" class="funds-dd-pct"></small></div>
</div>
</section>
<p id="funds-meta" class="funds-meta"></p>
<div id="funds-chart-total" class="funds-chart-host"></div>
<h2 class="funds-section-title">分户资金</h2>
<p class="funds-section-hint">圆形为各交易所快照,点击查看资金曲线与回撤</p>
<div id="funds-accounts" class="funds-accounts"></div>
</div>
<div id="funds-fullscreen" class="funds-fullscreen hidden" aria-hidden="true">
@@ -478,8 +499,8 @@
<script src="/assets/chart_draw.js?v=20260609-market-day-split"></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/funds.js?v=20260609-hub-funds-start"></script>
<script src="/assets/funds.js?v=20260609-hub-funds-ai"></script>
<script src="/assets/ai_review_render.js?v=2"></script>
<script src="/assets/app.js?v=20260609-hub-funds"></script>
<script src="/assets/app.js?v=20260609-hub-funds-ai"></script>
</body>
</html>