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

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

Co-authored-by: Cursor <cursoragent@cursor.com>

static/css/responsive.css

@@ -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

@@ -1,11 +1,20 @@
-.trade-page{max-width:1200px;margin:0 auto}
+/* 持仓监控页 — 与 split-grid（关键位监控）同宽，全端自适应 */
-.trade-top-bar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin-bottom:1.25rem}
+.trade-page{width:100%}
-.trade-dashboard{display:flex;flex-direction:column;gap:1.25rem}
+.trade-split{margin-bottom:1.25rem}
-.trade-row-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch}
+.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 .card-body{flex:1;min-height:0;display:flex;flex-direction:column}
-.trade-card-full{margin-bottom:0}
+.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){
+@media (min-width:768px) and (max-width:1100px){
-    .trade-row-split{grid-template-columns:1fr}
+    .trade-split .card{min-height:420px}
-    #positions .card-body{max-height:360px}
+    .trade-form-line.line-3{grid-template-columns:1fr 1fr}
-    .trade-form-line.line-3{grid-template-columns: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

@@ -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) {
+        if (isStandalone()) {
-            installBtn.hidden = true;
+            if (installBtn) installBtn.hidden = true;
+            if (iosHint) iosHint.classList.remove('show');
+            return;
+        }
+        if (isTouchDevice() && installBtn && deferredPrompt) {
+            showInstallBtn();
         }
     });
 

static/manifest.json

@@ -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",
+  "background_color": "#e8eef8",
-  "theme_color": "#050508",
+  "theme_color": "#2563eb",
   "lang": "zh-CN",
   "categories": ["finance", "productivity"],
   "icons": [

static/sw.js

@@ -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

@@ -6,21 +6,24 @@
 {% block content %}
 <div class="trade-page">
     <div class="trade-top-bar">
-        <span class="badge dir">{{ trading_mode_label }}</span>
+        <div class="trade-top-bar-main">
-        <span class="badge {% if ctp_status.connected %}profit{% else %}planned{% endif %}" id="ctp-badge">
+            <span class="badge dir">{{ trading_mode_label }}</span>
-            {% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %}
+            <span class="badge {% if ctp_status.connected %}profit{% else %}planned{% endif %}" id="ctp-badge">
-        </span>
+                {% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %}
-        <span class="badge {% if risk_status.can_trade %}profit{% else %}loss{% endif %}" id="risk-badge">{{ risk_status.status_label }}</span>
+            </span>
-        <span class="text-muted">权益 <strong id="cap-display">{{ '%.2f'|format(capital) }}</strong> 元</span>
+            <span class="badge {% if risk_status.can_trade %}profit{% else %}loss{% endif %}" id="risk-badge">{{ risk_status.status_label }}</span>
-        {% if ctp_account.available is defined and ctp_status.connected %}
+            <span class="text-muted">权益 <strong id="cap-display">{{ '%.2f'|format(capital) }}</strong> 元</span>
-        <span class="text-muted">可用 <strong id="avail-display">{{ '%.2f'|format(ctp_account.available) }}</strong> 元</span>
+            {% if ctp_account.available is defined and ctp_status.connected %}
-        {% endif %}
+            <span class="text-muted">可用 <strong id="avail-display">{{ '%.2f'|format(ctp_account.available) }}</strong> 元</span>
-        <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>
+            {% endif %}
-        <span class="text-muted" style="font-size:.72rem">断线自动重连</span>
+        </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="split-grid trade-split">
-        <div class="trade-row-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 %}