ui: 持仓监控卡片与关键位同宽,完善多端与 PWA

改用 split-grid 全宽布局;手机/平板/电脑断点适配;更新 manifest 与 Service Worker 支持安装为 App。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-24 12:50:58 +08:00
parent 67683f5562
commit 3ba3be6035
6 changed files with 104 additions and 35 deletions
+18 -16
View File
@@ -6,21 +6,24 @@
{% block content %}
<div class="trade-page">
<div class="trade-top-bar">
<span class="badge dir">{{ trading_mode_label }}</span>
<span class="badge {% if ctp_status.connected %}profit{% else %}planned{% endif %}" id="ctp-badge">
{% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %}
</span>
<span class="badge {% if risk_status.can_trade %}profit{% else %}loss{% endif %}" id="risk-badge">{{ risk_status.status_label }}</span>
<span class="text-muted">权益 <strong id="cap-display">{{ '%.2f'|format(capital) }}</strong></span>
{% if ctp_account.available is defined and ctp_status.connected %}
<span class="text-muted">可用 <strong id="avail-display">{{ '%.2f'|format(ctp_account.available) }}</strong></span>
{% endif %}
<button type="button" class="btn-primary" id="btn-ctp-connect" style="padding:.4rem .9rem;font-size:.8rem">{% if ctp_status.connected %}重连 CTP{% else %}连接 CTP{% endif %}</button>
<span class="text-muted" style="font-size:.72rem">断线自动重连</span>
<div class="trade-top-bar-main">
<span class="badge dir">{{ trading_mode_label }}</span>
<span class="badge {% if ctp_status.connected %}profit{% else %}planned{% endif %}" id="ctp-badge">
{% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %}
</span>
<span class="badge {% if risk_status.can_trade %}profit{% else %}loss{% endif %}" id="risk-badge">{{ risk_status.status_label }}</span>
<span class="text-muted">权益 <strong id="cap-display">{{ '%.2f'|format(capital) }}</strong></span>
{% if ctp_account.available is defined and ctp_status.connected %}
<span class="text-muted">可用 <strong id="avail-display">{{ '%.2f'|format(ctp_account.available) }}</strong></span>
{% endif %}
</div>
<div class="trade-top-bar-actions">
<button type="button" class="btn-primary btn-ctp-sm" id="btn-ctp-connect">{% if ctp_status.connected %}重连 CTP{% else %}连接 CTP{% endif %}</button>
<span class="text-muted trade-top-hint">断线自动重连</span>
</div>
</div>
<div class="trade-dashboard">
<div class="trade-row-split">
<div class="split-grid trade-split">
<div class="card trade-card" id="order">
<h2>期货下单</h2>
<div class="card-body">
@@ -98,9 +101,9 @@
<div class="empty-hint">{% if ctp_status.connected %}加载中…{% else %}请先连接 CTP 查看柜台持仓{% endif %}</div>
</div>
</div>
</div>
</div>
<div class="card trade-card trade-card-full" id="recommend">
<div class="card trade-card trade-card-full" id="recommend">
<h2>品种推荐</h2>
<div class="card-body">
<p class="hint">按权益 <strong class="text-accent" id="rec-capital">{{ '%.2f'|format(capital) }}</strong> 元筛选,仅显示可开 1 手的品种。
@@ -132,7 +135,6 @@
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}