dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: unify instance header panel layout for toolbar and stats

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 01:44:45 +08:00
parent 6547029a89
commit a1096155b8
6 changed files with 203 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_theme.css
+127 -30
View File
@@ -76,8 +76,22 @@
align-items: stretch;
}
.instance-toolbar-filter.list-window-bar {
flex-basis: auto;
.instance-header-toolbar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.instance-header-toolbar-filter {
flex-wrap: wrap;
}
.instance-header-theme {
align-self: flex-end;
}
.instance-header-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-strip-inner {
@@ -511,14 +525,17 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
margin-top: 6px;
}
/* ── 顶栏：状态 + 列表筛选 同一行 ── */
.instance-toolbar-row {
/* ── 统一顶栏面板：状态/筛选 + 统计条 ── */
.instance-header-panel {
margin-bottom: 12px;
padding: 10px 14px;
}
.instance-header-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
margin-bottom: 12px;
}
.instance-toolbar-status {
@@ -529,59 +546,88 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
flex: 0 1 auto;
}
.instance-toolbar-filter.list-window-bar {
flex: 1 1 320px;
margin-bottom: 0;
.instance-header-toolbar-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
flex: 1 1 200px;
min-width: 0;
font-size: 0.82rem;
}
.instance-header-toolbar-filter label {
display: inline-flex;
align-items: center;
gap: 6px;
color: #9aa;
margin: 0;
}
.instance-header-theme {
flex: 0 0 auto;
margin-left: auto;
}
.list-window-label {
color: #cfd3ef;
font-size: 0.82rem;
white-space: nowrap;
}
.list-window-hint {
color: #8892b0;
font-size: 0.75rem;
font-size: 0.72rem;
white-space: nowrap;
}
.list-window-apply {
padding: 6px 12px;
padding: 5px 12px;
font-size: 0.82rem;
}
/* ── 单行统计卡 ── */
.stat-strip {
margin-bottom: 12px;
padding: 10px 14px;
}
.stat-strip-inner {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: stretch;
justify-content: space-between;
.instance-header-stats {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-soft, #2a3150);
}
.stat-strip-item {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
min-width: 72px;
flex: 1 1 0;
text-align: center;
min-width: 0;
padding: 0 12px;
border-right: 1px solid var(--border-soft, #2a3150);
text-align: left;
}
.stat-strip-item:first-child {
padding-left: 0;
}
.stat-strip-item:last-child {
border-right: none;
padding-right: 0;
}
.stat-strip-item .label {
font-size: 0.72rem;
font-size: 0.7rem;
color: #8892b0;
margin-bottom: 4px;
margin-bottom: 3px;
white-space: nowrap;
}
.stat-strip-item .value {
font-size: 0.95rem;
font-size: 0.92rem;
font-weight: 600;
color: #e8ecff;
line-height: 1.25;
white-space: nowrap;
}
.stat-strip-item--pnl .value.pnl-pos {
@@ -592,10 +638,61 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
color: #ff6b7a;
}
@media (max-width: 1100px) {
.instance-header-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 10px;
}
.stat-strip-item {
border-right: none;
padding: 0 8px 0 0;
}
.stat-strip-item:first-child {
padding-left: 0;
}
}
/* 旧片段兼容（若仍被引用） */
.instance-toolbar-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
margin-bottom: 12px;
}
.instance-toolbar-filter.list-window-bar {
flex: 1 1 320px;
margin-bottom: 0;
}
.stat-strip {
margin-bottom: 12px;
padding: 10px 14px;
}
.stat-strip-inner {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0;
align-items: stretch;
}
html[data-theme="light"] .stat-strip-item .value {
color: #142232;
}
html[data-theme="light"] .instance-header-stats {
border-top-color: #c8d4e0;
}
html[data-theme="light"] .stat-strip-item {
border-right-color: #d8e2ec;
}
html[data-theme="light"] .list-window-label {
color: #1a2838;
}
lib/instance/templates/embed_shell.html
+2 -3
View File
@@ -7,7 +7,7 @@
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
<link rel="stylesheet" href="/static/instance_page.css?v=3">
<link rel="stylesheet" href="/static/instance_theme.css?v=55">
<link rel="stylesheet" href="/static/instance_theme.css?v=56">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
@@ -41,8 +41,7 @@
<div id="embed-flash" class="flash" style="display:none" role="status"></div>
{% if initial_tab != 'settings' %}
{% include 'instance_toolbar_row.html' %}
{% include 'instance_stats_strip.html' %}
{% include 'instance_header_panel.html' %}
{% endif %}
{% if initial_tab != 'settings' and include_transfer_block %}
{% include 'instance_top_bar.html' %}
lib/instance/templates/index.html
+2 -3
View File
@@ -17,7 +17,7 @@
<link rel="manifest" href="/static/icons/manifest.webmanifest">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
<link rel="stylesheet" href="/static/instance_page.css?v=1">
<link rel="stylesheet" href="/static/instance_theme.css?v=55">
<link rel="stylesheet" href="/static/instance_theme.css?v=56">
</head>
<body
@@ -66,8 +66,7 @@
{% with msg=get_flashed_messages() %}{% if msg %}<div class="flash">{{ msg[0] }}</div>{% endif %}{% endwith %}
{% if page != 'settings' %}
{% include 'instance_toolbar_row.html' %}
{% include 'instance_stats_strip.html' %}
{% include 'instance_header_panel.html' %}
{% endif %}
{% if page != 'settings' %}
{% include 'instance_top_bar.html' %}
lib/instance/templates/instance_header_panel.html
+72
View File
@@ -0,0 +1,72 @@
{# 统一顶栏：状态 + 筛选（上）· 统计条（下） #}
<div class="instance-header-panel card">
<div class="instance-header-toolbar">
<div class="instance-toolbar-status">
<div class="exchange-tag">{{ exchange_display }}</div>
{% if trade_policy.badge_text %}
<span class="trade-policy-badge" title="账户交易限制（.env）">{{ trade_policy.badge_text }}</span>
{% endif %}
{% include 'force_close_header_badge.html' %}
<span class="risk-status-badge risk-status-{{ risk_status.status|default('normal') }}" id="account-risk-badge" role="status" title="{{ risk_status.reason|default('', true) }}" data-status-label="{{ risk_status.status_label|default('正常') }}"{% if risk_status.freeze_until_ms %} data-freeze-until-ms="{{ risk_status.freeze_until_ms }}"{% endif %}>{{ risk_status.status_label|default('正常') }}</span>
</div>
<div class="instance-header-toolbar-filter">
<span class="list-window-label" title="列表按 UTC 时间筛选，默认当日">UTC {{ list_window.label }}</span>
<label class="list-window-preset">预设
<select id="win-preset-select" onchange="toggleListWindowCustom()">
<option value="utc_today" {% if list_window.preset == 'utc_today' %}selected{% endif %}>UTC 当日</option>
<option value="utc_last24h" {% if list_window.preset == 'utc_last24h' %}selected{% endif %}>近 24 小时</option>
<option value="utc_last7d" {% if list_window.preset == 'utc_last7d' %}selected{% endif %}>近 7 天</option>
<option value="custom" {% if list_window.preset == 'custom' %}selected{% endif %}>自定义</option>
</select>
</label>
<span id="win-custom-range" class="list-window-custom" style="{% if list_window.preset != 'custom' %}display:none{% endif %}">
<label>起 <input type="datetime-local" id="win-from-utc" value="{{ list_window.start_utc.strftime('%Y-%m-%dT%H:%M') }}"></label>
<label>止 <input type="datetime-local" id="win-to-utc" value="{{ list_window.end_utc.strftime('%Y-%m-%dT%H:%M') }}"></label>
</span>
<button type="button" class="list-window-apply" onclick="applyListWindow()">应用</button>
<span class="list-window-hint" title="统计分析页按北京时间 {{ stats_bundle.stats_reset_hour|default(reset_hour) }}:00 切交易日">统计切日 {{ stats_bundle.stats_reset_hour|default(reset_hour) }}:00</span>
</div>
<div class="theme-toggle instance-theme-toggle instance-header-theme" role="group" aria-label="界面主题">
<button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/>
</svg>
</button>
<button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
</svg>
</button>
</div>
</div>
<div class="instance-header-stats instance-desktop-only">
<div class="stat-strip-item">
<div class="label">交易所</div>
<div class="value">{{ exchange_display }}</div>
</div>
<div class="stat-strip-item">
<div class="label">总交易</div>
<div class="value" id="stat-total">{{ total }}</div>
</div>
<div class="stat-strip-item">
<div class="label">胜率</div>
<div class="value" id="stat-rate">{{ rate }}%</div>
</div>
<div class="stat-strip-item">
<div class="label">资金账户</div>
<div class="value" id="total-capital">{% if funding_usdt is not none %}{{ funds_fmt(funding_usdt) }}U{% else %}—{% endif %}</div>
</div>
<div class="stat-strip-item">
<div class="label">交易日</div>
<div class="value">{{ trading_day }}</div>
</div>
<div class="stat-strip-item">
<div class="label">当日资金</div>
<div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div>
</div>
<div class="stat-strip-item stat-strip-item--pnl">
<div class="label">实时盈亏</div>
<div class="value" id="realtime-pnl">—</div>
</div>
</div>
</div>
lib/instance/templates/instance_stats_strip.html
-33
View File
@@ -1,33 +0,0 @@
{# 单行统计卡：交易所 / 总交易 / 胜率 / 资金 / 交易日 / 当日资金 / 实时盈亏 #}
<div class="stat-strip card instance-desktop-only">
<div class="stat-strip-inner">
<div class="stat-strip-item">
<div class="label">交易所</div>
<div class="value">{{ exchange_display }}</div>
</div>
<div class="stat-strip-item">
<div class="label">总交易</div>
<div class="value" id="stat-total">{{ total }}</div>
</div>
<div class="stat-strip-item">
<div class="label">胜率</div>
<div class="value" id="stat-rate">{{ rate }}%</div>
</div>
<div class="stat-strip-item">
<div class="label">资金账户(USDT)</div>
<div class="value" id="total-capital">{% if funding_usdt is not none %}{{ funds_fmt(funding_usdt) }}U{% else %}—{% endif %}</div>
</div>
<div class="stat-strip-item">
<div class="label">交易日</div>
<div class="value">{{ trading_day }}</div>
</div>
<div class="stat-strip-item">
<div class="label">当日资金(交易账户)</div>
<div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div>
</div>
<div class="stat-strip-item stat-strip-item--pnl">
<div class="label">实时盈亏</div>
<div class="value" id="realtime-pnl">—</div>
</div>
</div>
</div>
lib/instance/templates/instance_toolbar_row.html
-40
View File
@@ -1,40 +0,0 @@
{# 状态徽章 + 列表筛选 同一行 #}
<div class="instance-toolbar-row">
<div class="instance-toolbar-status">
<div class="exchange-tag">{{ exchange_display }}</div>
{% if trade_policy.badge_text %}
<span class="trade-policy-badge" title="账户交易限制（.env）">{{ trade_policy.badge_text }}</span>
{% endif %}
{% include 'force_close_header_badge.html' %}
<span class="risk-status-badge risk-status-{{ risk_status.status|default('normal') }}" id="account-risk-badge" role="status" title="{{ risk_status.reason|default('', true) }}" data-status-label="{{ risk_status.status_label|default('正常') }}"{% if risk_status.freeze_until_ms %} data-freeze-until-ms="{{ risk_status.freeze_until_ms }}"{% endif %}>{{ risk_status.status_label|default('正常') }}</span>
<div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
<button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/>
</svg>
</button>
<button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
<svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
</svg>
</button>
</div>
</div>
<div class="instance-toolbar-filter list-window-bar">
<span class="list-window-label">列表筛选（<strong>UTC</strong>，默认当日）：{{ list_window.label }}</span>
<label>预设
<select id="win-preset-select" onchange="toggleListWindowCustom()">
<option value="utc_today" {% if list_window.preset == 'utc_today' %}selected{% endif %}>UTC 当日</option>
<option value="utc_last24h" {% if list_window.preset == 'utc_last24h' %}selected{% endif %}>近 24 小时</option>
<option value="utc_last7d" {% if list_window.preset == 'utc_last7d' %}selected{% endif %}>近 7 天</option>
<option value="custom" {% if list_window.preset == 'custom' %}selected{% endif %}>自定义</option>
</select>
</label>
<span id="win-custom-range" style="{% if list_window.preset != 'custom' %}display:none{% endif %}">
<label>起(UTC) <input type="datetime-local" id="win-from-utc" value="{{ list_window.start_utc.strftime('%Y-%m-%dT%H:%M') }}"></label>
<label>止(UTC) <input type="datetime-local" id="win-to-utc" value="{{ list_window.end_utc.strftime('%Y-%m-%dT%H:%M') }}"></label>
</span>
<button type="button" class="list-window-apply" onclick="applyListWindow()">应用</button>
<span class="list-window-hint">统计页仍按北京时间 {{ stats_bundle.stats_reset_hour|default(reset_hour) }}:00 切日</span>
</div>
</div>