dekun/qihuo
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Flatten records visuals and show stats summary in one row.

Browse Source 
Use transparent chart/table surfaces on records page; merge 14 stat metrics into a single compact card row.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-26 01:41:35 +08:00
parent 64adce0e24
commit 1cc0cd5f8d
5 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/responsive.css
+33 -4
View File
@@ -206,7 +206,9 @@ body {
}
.stat-grid-summary {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
}
@@ -357,15 +359,39 @@ body {
}
.stat-grid,
.stat-grid-summary {
.stat-grid:not(.stat-grid-summary) {
grid-template-columns: repeat(2, 1fr);
gap: .65rem;
}
.stat-grid-summary {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.stat-grid-summary .stat-item {
flex: 0 0 auto;
min-width: 4.25rem;
padding: .35rem .15rem;
}
.stat-grid-summary .stat-item .label {
font-size: .58rem;
}
.stat-grid-summary .stat-item .value {
font-size: .72rem;
}
.stat-item {
padding: .75rem .5rem;
}
.stat-grid-summary .stat-item {
padding: .35rem .15rem;
}
.stat-item .value {
font-size: 1.1rem;
}
@@ -426,11 +452,14 @@ body {
}
@media (max-width: 479px) {
.stat-grid,
.stat-grid-summary {
.stat-grid:not(.stat-grid-summary) {
grid-template-columns: 1fr 1fr;
}
.stat-grid-summary .stat-item {
min-width: 3.75rem;
}
.theme-switch-btn {
padding: .35rem .55rem;
font-size: .7rem;
static/js/equity_curve.js
+1 -1
View File
@@ -14,7 +14,7 @@
function themeColors() {
return {
bg: cssVar('--card-bg', '#0a0c16'),
bg: 'transparent',
text: cssVar('--text-muted', '#7a82a0'),
grid: cssVar('--table-border', 'rgba(76,194,255,.1)'),
border: cssVar('--card-border', 'rgba(76,194,255,.22)'),
templates/base.html
+15 -11
View File
@@ -430,10 +430,10 @@
padding:.35rem .45rem;font-size:.78rem;border-radius:6px;width:100%;min-width:0;
}
.trade-table .cell-readonly{color:var(--text-primary)}
.records-equity-card .card-body{padding-top:0}
.records-equity-card #equity-curve-chart{background:transparent}
.records-equity-card .card-body{padding-top:0;background:transparent}
.records-equity-card #equity-curve-chart{background:transparent;border-radius:0}
.records-trade-card{overflow:visible}
.records-trade-card .card-body{overflow:visible}
.records-trade-card .card-body{overflow:visible;background:transparent}
.records-trade-card .trade-table-wrap{
--rec-row-h:2.35rem;
--rec-head-h:2.1rem;
@@ -446,22 +446,26 @@
border-radius:0;
background:transparent;
}
.records-trade-card .trade-table th,
.records-trade-card .trade-table td{
background:transparent;
}
.records-trade-card .trade-table thead th{
position:sticky;
top:0;
z-index:2;
background:var(--card-bg);
background:transparent;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 1px 0 var(--table-border);
}
.records-trade-card .trade-table th:last-child,
.records-trade-card .trade-table td:last-child{
box-shadow:none;
background:transparent;
}
.records-trade-card .trade-table thead th:last-child{
z-index:5;
background:var(--card-bg);
}
.records-trade-card .trade-table tbody td{
background:var(--card-bg);
}
.records-trade-card .trade-table tbody td:last-child{
background:var(--card-bg);
}
.trade-actions{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;min-width:230px;white-space:nowrap}
.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;width:auto;min-width:0}
templates/records.html
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="card records-equity-card" style="margin-bottom:1.25rem">
<h2>资金曲线</h2>
<div class="card-body">
<div id="equity-curve-chart" style="width:100%;min-height:220px;border-radius:6px;overflow:hidden"></div>
<div id="equity-curve-chart" style="width:100%;min-height:220px;overflow:hidden"></div>
</div>
</div>
templates/stats.html
+27 -7
View File
@@ -2,12 +2,12 @@
{% block title %}统计分析 - 国内期货监控系统{% endblock %}
{% block content %}
<div class="stats-toolbar">
<div class="card stats-summary-card">
<div class="stats-toolbar">
<span id="stats-updated" class="hint">正在加载统计…</span>
<button type="button" class="btn-secondary" id="stats-refresh-btn">重新计算</button>
</div>
<div class="stat-grid stat-grid-summary" id="stats-summary">
</div>
<div class="stat-grid stat-grid-summary" id="stats-summary">
<div class="stat-item"><div class="label">总交易次数</div><div class="value" data-k="total_trades">-</div></div>
<div class="stat-item"><div class="label">胜率</div><div class="value" data-k="win_rate">-</div></div>
<div class="stat-item"><div class="label">平均盈利</div><div class="value text-profit" data-k="avg_profit">-</div></div>
@@ -22,6 +22,7 @@
<div class="stat-item"><div class="label">累计手续费</div><div class="value text-loss" data-k="total_fee">-</div></div>
<div class="stat-item"><div class="label">情绪单数量</div><div class="value" data-k="emotion_count">-</div></div>
<div class="stat-item"><div class="label">情绪单占比</div><div class="value" data-k="emotion_ratio">-</div></div>
</div>
</div>
<div class="card">
@@ -43,10 +44,29 @@
</div>
<style>
.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.stats-toolbar .btn-secondary{width:auto;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--input-border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;font-size:.85rem}
.stats-summary-card{margin-bottom:1.25rem}
.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
.stats-toolbar .btn-secondary{width:auto;padding:.45rem .85rem;border-radius:8px;border:1px solid var(--input-border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;font-size:.78rem}
.stats-toolbar .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.stat-grid-summary{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.stat-grid-summary{
display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;
margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.stat-grid-summary .stat-item{
flex:1 1 0;min-width:4.5rem;background:transparent;border:none;border-radius:0;
padding:.35rem .2rem;text-align:center;position:relative;overflow:visible;
border-right:1px solid var(--table-border);
}
.stat-grid-summary .stat-item:last-child{border-right:none}
.stat-grid-summary .stat-item::before{display:none}
.stat-grid-summary .stat-item:hover{transform:none;box-shadow:none}
.stat-grid-summary .stat-item .label{
font-size:.62rem;line-height:1.25;color:var(--text-muted);white-space:nowrap;
}
.stat-grid-summary .stat-item .value{
font-size:.78rem;font-weight:600;color:var(--text-title);margin-top:.12rem;
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stats-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.stats-card-head h2{margin-bottom:0}
.stats-view-field{width:auto;min-width:200px}