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

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

Browse Source 
改用 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
Download Patch File Download Diff File Expand all files Collapse all files
static/css/responsive.css
+30
View File
@@ -176,6 +176,18 @@ body {
grid-template-columns: 1fr;
}
.trade-split .card {
min-height: auto;
}
.trade-form-line.line-3 {
grid-template-columns: 1fr 1fr;
}
.trade-form-line.line-3 .trade-field:first-child {
grid-column: 1 / -1;
}
.form-compact .line-4,
.form-compact .line-5 {
grid-template-columns: repeat(2, 1fr);
@@ -314,6 +326,24 @@ body {
min-height: auto;
}
.trade-split .card {
min-height: auto;
}
.trade-top-bar {
flex-direction: column;
align-items: stretch;
}
.trade-top-bar-actions {
width: 100%;
}
.trade-top-bar-actions .btn-ctp-sm {
width: 100%;
min-height: var(--touch-min);
}
.pos-metrics {
grid-template-columns: repeat(2, 1fr);
}
static/css/trade.css
+31 -12
View File
@@ -1,11 +1,20 @@
.trade-page{max-width:1200px;margin:0 auto}
.trade-top-bar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin-bottom:1.25rem}
.trade-dashboard{display:flex;flex-direction:column;gap:1.25rem}
.trade-row-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch}
/* 持仓监控页 — 与 split-grid（关键位监控）同宽，全端自适应 */
.trade-page{width:100%}
.trade-split{margin-bottom:1.25rem}
.trade-split .card{min-height:480px}
.trade-top-bar{
display:flex;flex-wrap:wrap;gap:.65rem 1rem;
align-items:center;justify-content:space-between;
margin-bottom:1.25rem;
}
.trade-top-bar-main{display:flex;flex-wrap:wrap;gap:.5rem .65rem;align-items:center;flex:1;min-width:0}
.trade-top-bar-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.trade-top-hint{font-size:.72rem;white-space:nowrap}
.btn-ctp-sm{padding:.4rem .9rem;font-size:.8rem;width:auto;white-space:nowrap}
.trade-card{margin-bottom:0;height:100%;display:flex;flex-direction:column}
.trade-card h2{margin-bottom:.35rem;flex-shrink:0}
.trade-card .card-body{flex:1;min-height:0}
.trade-card-full{margin-bottom:0}
.trade-card .card-body{flex:1;min-height:0;display:flex;flex-direction:column}
.trade-card-full{margin-bottom:1.5rem}
.pos-hint{font-size:.75rem;margin:-.15rem 0 .5rem .25rem;color:var(--text-muted)}
.trade-order-status{display:grid;gap:.55rem;margin:.5rem 0 .75rem;padding:.65rem .85rem;background:var(--card-inner);border:1px solid var(--card-border);border-radius:8px;font-size:.82rem}
.trade-order-status-compact{margin-top:0}
@@ -30,18 +39,28 @@
.trade-footer strong{color:var(--accent)}
.rec-blocked td{opacity:.55}
.rec-ok td:first-child{font-weight:600}
#positions .card-body{max-height:460px;overflow-y:auto}
#positions .card-body.card-scroll{flex:1;max-height:none;overflow-y:auto}
.pos-pending-orders{margin-top:.55rem;padding-top:.55rem;border-top:1px dashed var(--table-border)}
.pos-pending-orders .pending-title{font-size:.68rem;color:var(--text-muted);margin-bottom:.35rem}
.pos-pending-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.75rem;padding:.35rem .5rem;border-radius:6px;margin-bottom:.25rem;background:var(--list-item-bg)}
.pos-pending-item.sl{border-left:3px solid var(--loss)}
.pos-pending-item.tp{border-left:3px solid var(--profit)}
.pos-pending-item.ctp{border-left:3px solid var(--accent)}
.pos-close-btn{padding:.4rem .85rem;font-size:.78rem;border-radius:8px;border:1px solid var(--loss);background:var(--loss-bg);color:var(--loss);cursor:pointer;white-space:nowrap;width:auto;flex-shrink:0}
.pos-close-btn{padding:.4rem .85rem;font-size:.78rem;border-radius:8px;border:1px solid var(--loss);background:var(--loss-bg);color:var(--loss);cursor:pointer;white-space:nowrap;width:auto;flex-shrink:0;min-height:36px}
.pos-close-btn:disabled{opacity:.55;cursor:wait}
@media (max-width:900px){
.trade-row-split{grid-template-columns:1fr}
#positions .card-body{max-height:360px}
.trade-form-line.line-3{grid-template-columns:1fr}
@media (min-width:768px) and (max-width:1100px){
.trade-split .card{min-height:420px}
.trade-form-line.line-3{grid-template-columns:1fr 1fr}
.trade-form-line.line-3 .trade-field:first-child{grid-column:1/-1}
}
@media (max-width:767px){
.trade-top-bar{flex-direction:column;align-items:stretch}
.trade-top-bar-actions{width:100%}
.btn-ctp-sm{width:100%;min-height:44px}
.trade-split .card{min-height:auto}
.trade-form-line.line-3{grid-template-columns:1fr}
.trade-card-full{margin-bottom:1rem}
.trade-table-wrap{max-height:320px}
}
static/js/pwa.js
+16 -3
View File
@@ -13,6 +13,11 @@
&& !window.MSStream;
}
function isTouchDevice() {
return window.matchMedia('(hover: none) and (pointer: coarse)').matches
|| window.matchMedia('(max-width: 1024px)').matches;
}
function updateThemeColor() {
var meta = document.getElementById('meta-theme-color');
if (!meta) return;
@@ -46,7 +51,10 @@
if (installBtn) {
installBtn.addEventListener('click', function () {
if (!deferredPrompt) return;
if (!deferredPrompt) {
if (isIOS()) showIosHint();
return;
}
deferredPrompt.prompt();
deferredPrompt.userChoice.then(function () {
deferredPrompt = null;
@@ -64,8 +72,13 @@
document.addEventListener('DOMContentLoaded', function () {
updateThemeColor();
showIosHint();
if (!isStandalone() && !deferredPrompt && installBtn) {
installBtn.hidden = true;
if (isStandalone()) {
if (installBtn) installBtn.hidden = true;
if (iosHint) iosHint.classList.remove('show');
return;
}
if (isTouchDevice() && installBtn && deferredPrompt) {
showInstallBtn();
}
});
static/manifest.json
+5 -3
View File
@@ -1,13 +1,15 @@
{
"id": "/",
"name": "国内期货交易监控复盘系统",
"short_name": "期货监控",
"description": "期货交易监控、持仓管理、复盘与统计分析",
"start_url": "/",
"start_url": "/login",
"scope": "/",
"display": "standalone",
"display_override": ["standalone", "browser"],
"orientation": "any",
"background_color": "#050508",
"theme_color": "#050508",
"background_color": "#e8eef8",
"theme_color": "#2563eb",
"lang": "zh-CN",
"categories": ["finance", "productivity"],
"icons": [
static/sw.js
+4 -1
View File
@@ -1,14 +1,17 @@
var CACHE_VERSION = 'qihuo-v2';
var CACHE_VERSION = 'qihuo-v3';
var STATIC_CACHE = CACHE_VERSION + '-static';
var STATIC_ASSETS = [
'/static/css/tech.css',
'/static/css/responsive.css',
'/static/css/trade.css',
'/static/js/theme.js',
'/static/js/nav.js',
'/static/js/pwa.js',
'/static/js/symbol.js',
'/static/js/trade.js',
'/static/icons/icon-192.png',
'/static/icons/icon-512.png',
'/static/icons/icon.svg',
'/static/manifest.json',
'/login'
];
templates/trade.html
+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 %}