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

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 16:58:13 +08:00
parent e8b4dbbaca
commit 28875078f1
11 changed files with 785 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+22
View File
@@ -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
+489
View File
@@ -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-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

static/icons/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

static/icons/icon.svg
+12
View File
@@ -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
+53
View File
@@ -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
+76
View File
@@ -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
+33
View File
@@ -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
+61
View File
@@ -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
+27 -15
View File
@@ -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="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 class="header-bar">
<button type="button" class="nav-toggle" id="nav-toggle" aria-label="打开菜单" aria-expanded="false" aria-controls="site-nav">
<span></span><span></span><span></span>
</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
+12 -2
View File
@@ -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>