三端自适应布局与 PWA 可安装支持

新增响应式样式、手机侧滑导航、manifest 与 Service Worker；补充根路径重定向与安装 App 入口。

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

app.py

@@ -551,6 +551,28 @@ def login_required(f):
     return wrap
 
 
+@app.route("/")
+def index():
+    if session.get("logged_in"):
+        return redirect(url_for("plans"))
+    return redirect(url_for("login"))
+
+
+@app.route("/manifest.webmanifest")
+def web_manifest():
+    response = app.send_static_file("manifest.json")
+    response.mimetype = "application/manifest+json"
+    return response
+
+
+@app.route("/sw.js")
+def service_worker():
+    response = app.send_static_file("sw.js")
+    response.headers["Cache-Control"] = "no-cache"
+    response.headers["Service-Worker-Allowed"] = "/"
+    return response
+
+
 @app.route("/login", methods=["GET", "POST"])
 def login():
     if request.method == "POST":

static/css/responsive.css

@@ -0,0 +1,489 @@
+/* 响应式布局 — 电脑 / 平板 / 手机 + PWA 独立窗口 */
+
+:root {
+    --safe-top: env(safe-area-inset-top, 0px);
+    --safe-right: env(safe-area-inset-right, 0px);
+    --safe-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-left: env(safe-area-inset-left, 0px);
+    --touch-min: 44px;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+body {
+    padding-left: var(--safe-left);
+    padding-right: var(--safe-right);
+    padding-bottom: var(--safe-bottom);
+}
+
+.page-wrap {
+    padding-top: var(--safe-top);
+}
+
+.header-bar {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: .5rem .75rem;
+    margin-bottom: .85rem;
+    min-height: var(--touch-min);
+}
+
+.nav-toggle {
+    display: none;
+    width: var(--touch-min);
+    height: var(--touch-min);
+    border: 1px solid var(--toggle-border);
+    border-radius: 10px;
+    background: var(--toggle-bg);
+    cursor: pointer;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.nav-toggle span {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: var(--text-primary);
+    border-radius: 2px;
+    transition: transform .2s, opacity .2s;
+}
+
+.nav-toggle[aria-expanded="true"] span:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+}
+
+.nav-toggle[aria-expanded="true"] span:nth-child(2) {
+    opacity: 0;
+}
+
+.nav-toggle[aria-expanded="true"] span:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+}
+
+.header-tools {
+    position: static;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+}
+
+.user-bar {
+    position: static;
+    text-align: right;
+    justify-self: end;
+}
+
+.pwa-install-btn {
+    padding: .38rem .7rem;
+    border-radius: 999px;
+    border: 1px solid var(--accent);
+    background: transparent;
+    color: var(--accent);
+    font-size: .72rem;
+    cursor: pointer;
+    white-space: nowrap;
+    width: auto;
+    flex-shrink: 0;
+    min-height: 32px;
+}
+
+.pwa-install-btn:hover {
+    background: var(--dir-bg);
+}
+
+.pwa-ios-hint {
+    display: none;
+    font-size: .72rem;
+    color: var(--text-muted);
+    padding: .5rem .75rem;
+    margin: 0 0 .75rem;
+    border-radius: 10px;
+    border: 1px dashed var(--card-border);
+    background: var(--card-inner);
+    line-height: 1.5;
+}
+
+.pwa-ios-hint.show {
+    display: block;
+}
+
+.nav-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: var(--modal-mask);
+    z-index: 90;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.nav-backdrop.show {
+    display: block;
+}
+
+@media (min-width: 1025px) {
+    .site-header {
+        padding: 1.5rem 1.5rem 1.25rem;
+    }
+
+    .site-nav {
+        justify-content: center;
+    }
+
+    .main {
+        padding: 1.5rem 1.75rem;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+    .site-header {
+        padding: 1.25rem 1rem 1rem;
+    }
+
+    .site-title {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .site-nav {
+        gap: .4rem;
+        justify-content: center;
+    }
+
+    .site-nav a {
+        padding: .5rem .85rem;
+        font-size: .82rem;
+    }
+
+    .main {
+        padding: 1.25rem 1rem;
+    }
+
+    .card {
+        padding: 1.25rem;
+    }
+
+    .split-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .form-compact .line-4,
+    .form-compact .line-5 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .form-compact .line-plan-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .pos-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .review-detail-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .stat-grid-summary {
+        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    }
+}
+
+@media (max-width: 767px) {
+    .nav-toggle {
+        display: inline-flex;
+    }
+
+    .header-bar {
+        grid-template-columns: auto 1fr;
+        grid-template-areas:
+            "toggle tools"
+            "user user";
+    }
+
+    .nav-toggle { grid-area: toggle; }
+    .header-tools { grid-area: tools; justify-content: flex-end; }
+    .user-bar {
+        grid-area: user;
+        text-align: center;
+        width: 100%;
+    }
+
+    .site-header {
+        padding: .85rem .75rem .75rem;
+        text-align: left;
+    }
+
+    .site-title {
+        font-size: 1.15rem;
+        margin-bottom: .65rem;
+        text-align: center;
+    }
+
+    .site-title-sub {
+        font-size: .58rem;
+        letter-spacing: .14em;
+    }
+
+    .site-nav {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: min(86vw, 320px);
+        height: 100dvh;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: flex-start;
+        gap: .35rem;
+        padding: calc(var(--safe-top) + 3.5rem) 1rem 1.5rem;
+        background: var(--card-bg);
+        border-right: 1px solid var(--card-border);
+        box-shadow: var(--shadow-card-hover);
+        z-index: 100;
+        transform: translateX(-105%);
+        transition: transform .28s ease;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .site-nav.open {
+        transform: translateX(0);
+    }
+
+    .site-nav a {
+        width: 100%;
+        text-align: left;
+        padding: .75rem 1rem;
+        font-size: .9rem;
+        min-height: var(--touch-min);
+        display: flex;
+        align-items: center;
+        border-radius: 10px;
+    }
+
+    .main {
+        padding: .85rem .75rem 1.25rem;
+    }
+
+    .card {
+        padding: 1rem;
+        border-radius: 12px;
+        margin-bottom: 1rem;
+    }
+
+    .card h2 {
+        font-size: 1rem;
+    }
+
+    .form-compact .line-2,
+    .form-compact .line-3,
+    .form-compact .line-4,
+    .form-compact .line-5,
+    .form-compact .line-plan-1,
+    .form-compact .line-plan-2 {
+        grid-template-columns: 1fr;
+    }
+
+    .form-compact-review .tag-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .form-compact-review .kline-row {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .split-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .split-grid .card {
+        min-height: auto;
+    }
+
+    .pos-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .review-detail-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .review-detail-item.wide {
+        grid-column: span 1;
+    }
+
+    .stat-grid,
+    .stat-grid-summary {
+        grid-template-columns: repeat(2, 1fr);
+        gap: .65rem;
+    }
+
+    .stat-item {
+        padding: .75rem .5rem;
+    }
+
+    .stat-item .value {
+        font-size: 1.1rem;
+    }
+
+    .filter-row .field {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .trade-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .profile-row {
+        grid-template-columns: 1fr;
+        gap: .25rem;
+    }
+
+    .modal-box {
+        padding: 1rem;
+        border-radius: 12px;
+        max-height: calc(100dvh - 1rem);
+    }
+
+    .modal-box.review-modal-fullscreen {
+        width: 100%;
+        height: 100dvh;
+        border-radius: 0;
+    }
+
+    th, td {
+        padding: .55rem .45rem;
+        font-size: .8rem;
+    }
+
+    .card-scroll {
+        max-height: none;
+    }
+
+    .stats-card-head {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .stats-view-field {
+        width: 100%;
+    }
+
+    input, select, textarea, button {
+        font-size: 16px;
+    }
+
+    .form-compact input,
+    .form-compact select {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 479px) {
+    .stat-grid,
+    .stat-grid-summary {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .theme-switch-btn {
+        padding: .35rem .55rem;
+        font-size: .7rem;
+    }
+
+    .pos-metrics {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (display-mode: standalone) {
+    .site-header {
+        padding-top: max(.75rem, var(--safe-top));
+    }
+
+    .pwa-install-btn,
+    .pwa-ios-hint {
+        display: none !important;
+    }
+}
+
+@media (max-width: 767px) and (orientation: landscape) {
+    .site-nav {
+        width: min(50vw, 280px);
+        padding-top: calc(var(--safe-top) + 2.5rem);
+    }
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .site-nav a,
+    .btn-del,
+    .trade-actions a,
+    .trade-actions button,
+    .preset-tabs a {
+        min-height: var(--touch-min);
+    }
+
+    .card:hover {
+        transform: none;
+    }
+
+    .list-item:hover {
+        box-shadow: none;
+    }
+
+    .stat-item:hover {
+        transform: none;
+    }
+}
+
+.table-responsive {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.table-responsive table {
+    min-width: 560px;
+}
+
+body.login-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 1rem;
+    padding-top: max(1rem, var(--safe-top));
+    padding-bottom: max(1rem, var(--safe-bottom));
+}
+
+@media (max-width: 767px) {
+    body.login-page {
+        align-items: flex-start;
+        padding: .75rem;
+        padding-top: max(.75rem, var(--safe-top));
+    }
+
+    body.login-page .login-wrap {
+        max-width: 100%;
+    }
+
+    body.login-page .login-box {
+        padding: 1.75rem 1.25rem 1.5rem;
+    }
+}

static/icons/icon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="'ѧ">
+  <defs>
+    <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4cc2ff"/>
+      <stop offset="100%" stop-color="#9d6bff"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="96" fill="#0a0c16"/>
+  <rect x="48" y="48" width="416" height="416" rx="72" fill="#141a2e" stroke="url(#g)" stroke-width="8"/>
+  <polygon points="148,320 256,168 364,320" fill="url(#g)"/>
+  <rect x="196" y="320" width="120" height="56" rx="8" fill="#9d6bff"/>
+</svg>

static/js/nav.js

@@ -0,0 +1,53 @@
+(function () {
+    var toggle = document.getElementById('nav-toggle');
+    var nav = document.getElementById('site-nav');
+    var backdrop = document.getElementById('nav-backdrop');
+    if (!toggle || !nav) return;
+
+    function openNav() {
+        nav.classList.add('open');
+        if (backdrop) {
+            backdrop.hidden = false;
+            backdrop.classList.add('show');
+        }
+        toggle.setAttribute('aria-expanded', 'true');
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeNav() {
+        nav.classList.remove('open');
+        if (backdrop) {
+            backdrop.classList.remove('show');
+            backdrop.hidden = true;
+        }
+        toggle.setAttribute('aria-expanded', 'false');
+        document.body.style.overflow = '';
+    }
+
+    function isMobileNav() {
+        return window.matchMedia('(max-width: 767px)').matches;
+    }
+
+    toggle.addEventListener('click', function () {
+        if (nav.classList.contains('open')) closeNav();
+        else openNav();
+    });
+
+    if (backdrop) {
+        backdrop.addEventListener('click', closeNav);
+    }
+
+    nav.querySelectorAll('a').forEach(function (link) {
+        link.addEventListener('click', function () {
+            if (isMobileNav()) closeNav();
+        });
+    });
+
+    window.addEventListener('resize', function () {
+        if (!isMobileNav()) closeNav();
+    });
+
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') closeNav();
+    });
+})();

static/js/pwa.js

@@ -0,0 +1,76 @@
+(function () {
+    var deferredPrompt = null;
+    var installBtn = document.getElementById('pwa-install-btn');
+    var iosHint = document.getElementById('pwa-ios-hint');
+
+    function isStandalone() {
+        return window.matchMedia('(display-mode: standalone)').matches
+            || window.navigator.standalone === true;
+    }
+
+    function isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent)
+            && !window.MSStream;
+    }
+
+    function updateThemeColor() {
+        var meta = document.getElementById('meta-theme-color');
+        if (!meta) return;
+        var theme = document.documentElement.getAttribute('data-theme');
+        meta.setAttribute('content', theme === 'light' ? '#e8eef8' : '#050508');
+    }
+
+    function showInstallBtn() {
+        if (installBtn && !isStandalone()) {
+            installBtn.hidden = false;
+        }
+    }
+
+    function showIosHint() {
+        if (iosHint && isIOS() && !isStandalone()) {
+            iosHint.classList.add('show');
+        }
+    }
+
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function () {
+            navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(function () { /* ignore */ });
+        });
+    }
+
+    window.addEventListener('beforeinstallprompt', function (e) {
+        e.preventDefault();
+        deferredPrompt = e;
+        showInstallBtn();
+    });
+
+    if (installBtn) {
+        installBtn.addEventListener('click', function () {
+            if (!deferredPrompt) return;
+            deferredPrompt.prompt();
+            deferredPrompt.userChoice.then(function () {
+                deferredPrompt = null;
+                installBtn.hidden = true;
+            });
+        });
+    }
+
+    window.addEventListener('appinstalled', function () {
+        deferredPrompt = null;
+        if (installBtn) installBtn.hidden = true;
+        if (iosHint) iosHint.classList.remove('show');
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+        updateThemeColor();
+        showIosHint();
+        if (!isStandalone() && !deferredPrompt && installBtn) {
+            installBtn.hidden = true;
+        }
+    });
+
+    document.addEventListener('click', function (e) {
+        var pick = e.target.closest('[data-theme-pick]');
+        if (pick) setTimeout(updateThemeColor, 80);
+    });
+})();

static/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "国内期货交易监控复盘系统",
+  "short_name": "期货监控",
+  "description": "期货交易监控、持仓管理、复盘与统计分析",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#050508",
+  "theme_color": "#050508",
+  "lang": "zh-CN",
+  "categories": ["finance", "productivity"],
+  "icons": [
+    {
+      "src": "/static/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/static/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/static/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

static/sw.js

@@ -0,0 +1,61 @@
+var CACHE_VERSION = 'qihuo-v2';
+var STATIC_CACHE = CACHE_VERSION + '-static';
+var STATIC_ASSETS = [
+    '/static/css/tech.css',
+    '/static/css/responsive.css',
+    '/static/js/theme.js',
+    '/static/js/nav.js',
+    '/static/js/pwa.js',
+    '/static/js/symbol.js',
+    '/static/icons/icon-192.png',
+    '/static/icons/icon-512.png',
+    '/static/manifest.json',
+    '/login'
+];
+
+self.addEventListener('install', function (event) {
+    event.waitUntil(
+        caches.open(STATIC_CACHE).then(function (cache) {
+            return cache.addAll(STATIC_ASSETS).catch(function () { /* ignore partial */ });
+        }).then(function () { return self.skipWaiting(); })
+    );
+});
+
+self.addEventListener('activate', function (event) {
+    event.waitUntil(
+        caches.keys().then(function (keys) {
+            return Promise.all(keys.filter(function (k) {
+                return k.startsWith('qihuo-') && k !== STATIC_CACHE;
+            }).map(function (k) { return caches.delete(k); }));
+        }).then(function () { return self.clients.claim(); })
+    );
+});
+
+self.addEventListener('fetch', function (event) {
+    var req = event.request;
+    if (req.method !== 'GET') return;
+
+    var url = new URL(req.url);
+    if (url.origin !== self.location.origin) return;
+
+    if (url.pathname.indexOf('/static/') === 0) {
+        event.respondWith(
+            caches.match(req).then(function (cached) {
+                return cached || fetch(req).then(function (res) {
+                    var copy = res.clone();
+                    caches.open(STATIC_CACHE).then(function (cache) { cache.put(req, copy); });
+                    return res;
+                });
+            })
+        );
+        return;
+    }
+
+    if (req.mode === 'navigate' || (req.headers.get('accept') || '').indexOf('text/html') !== -1) {
+        event.respondWith(
+            fetch(req).catch(function () {
+                return caches.match('/login');
+            })
+        );
+    }
+});

templates/base.html

@@ -2,7 +2,16 @@
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="theme-color" content="#050508" id="meta-theme-color">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="期货监控">
+    <meta name="application-name" content="期货监控">
+    <link rel="manifest" href="{{ url_for('web_manifest') }}">
+    <link rel="icon" href="{{ url_for('static', filename='icons/icon.svg') }}" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192.png') }}">
     <title>{% block title %}国内期货监控系统{% endblock %}</title>
     <script>
     try {
@@ -411,16 +420,9 @@
             .split-grid{grid-template-columns:1fr}
             .split-grid .card{min-height:auto}
         }
-        @media(max-width:768px){
-            .site-header{padding:1.25rem .75rem 1rem}
-            .site-title{font-size:1.35rem;margin-bottom:.85rem}
-            .header-tools{position:static;justify-content:center;margin-bottom:.75rem}
-            .user-bar{position:static;text-align:center;margin-bottom:.75rem}
-            .site-nav{gap:.35rem}
-            .site-nav a{padding:.45rem .75rem;font-size:.82rem}
-        }
     </style>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
     {% block extra_css %}{% endblock %}
 </head>
 <body>
@@ -432,15 +434,23 @@
     </div>
     <div class="page-wrap">
         <header class="site-header">
-            <div class="header-tools">
+            <div class="header-bar">
-                <div class="theme-switch" role="group" aria-label="主题模式">
+                <button type="button" class="nav-toggle" id="nav-toggle" aria-label="打开菜单" aria-expanded="false" aria-controls="site-nav">
-                    <button type="button" class="theme-switch-btn" data-theme-pick="dark">深色</button>
+                    <span></span><span></span><span></span>
-                    <button type="button" class="theme-switch-btn" data-theme-pick="light">浅色</button>
+                </button>
+                <div class="header-tools">
+                    <div class="theme-switch" role="group" aria-label="主题模式">
+                        <button type="button" class="theme-switch-btn" data-theme-pick="dark">深色</button>
+                        <button type="button" class="theme-switch-btn" data-theme-pick="light">浅色</button>
+                    </div>
+                    <button type="button" class="pwa-install-btn" id="pwa-install-btn" hidden>安装 App</button>
                 </div>
+                <div class="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div>
             </div>
-            <div class="user-bar">{{ session.username or '用户' }}<a href="{{ url_for('logout') }}">退出</a></div>
+            <p class="pwa-ios-hint" id="pwa-ios-hint">iOS 安装：Safari 浏览器点击底部分享按钮，选择「添加到主屏幕」。</p>
             <h1 class="site-title">国内期货 · 交易监控 + 复盘<span class="site-title-sub">FUTURES MONITOR SYSTEM</span></h1>
-            <nav class="site-nav">
+            <button type="button" class="nav-backdrop" id="nav-backdrop" aria-label="关闭菜单" hidden></button>
+            <nav class="site-nav" id="site-nav">
                 <a href="{{ url_for('plans') }}" class="{% if request.endpoint == 'plans' %}active{% endif %}">开单计划</a>
                 <a href="{{ url_for('keys') }}" class="{% if request.endpoint == 'keys' %}active{% endif %}">关键位监控</a>
                 <a href="{{ url_for('positions') }}" class="{% if request.endpoint == 'positions' %}active{% endif %}">持仓监控</a>
@@ -457,6 +467,8 @@
         </main>
     </div>
     <script src="{{ url_for('static', filename='js/symbol.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/nav.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>

templates/login.html

@@ -2,7 +2,15 @@
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="theme-color" content="#050508" id="meta-theme-color">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="期货监控">
+    <link rel="manifest" href="{{ url_for('web_manifest') }}">
+    <link rel="icon" href="{{ url_for('static', filename='icons/icon.svg') }}" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192.png') }}">
     <title>系统登录</title>
     <script>
     try {
@@ -157,8 +165,9 @@
         }
     </style>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
 </head>
-<body>
+<body class="login-page">
     <div class="tech-bg" aria-hidden="true">
         <div class="tech-grid"></div>
         <div class="tech-glow"></div>
@@ -191,5 +200,6 @@
             </form>
         </div>
     </div>
+    <script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
 </body>
 </html>