重构期货监控系统:多页面导航、开单计划、Ubuntu PM2 部署

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 11:04:00 +08:00
commit ae480cb3e7
16 changed files with 1416 additions and 0 deletions
+87
View File
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}国内期货监控系统{% endblock %}</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0a0a10;color:#eaeaea;min-height:100vh}
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:#12121a;border-right:1px solid #242435;padding:1.5rem 0;flex-shrink:0}
.sidebar .logo{padding:0 1.5rem 1.5rem;font-size:1.1rem;font-weight:600;background:linear-gradient(90deg,#4cc2ff,#7b42ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav a{display:block;padding:.75rem 1.5rem;color:#a9a9c4;text-decoration:none;font-size:.9rem;border-left:3px solid transparent;transition:.2s}
.nav a:hover{color:#fff;background:#1a1a29}
.nav a.active{color:#4cc2ff;border-left-color:#4cc2ff;background:#1a1a29}
.main{flex:1;padding:2rem;overflow-x:auto}
.page-title{font-size:1.5rem;margin-bottom:1.5rem;color:#fff}
.flash{padding:1rem;background:#1e2533;color:#4cc2ff;border-radius:10px;margin-bottom:1.5rem;text-align:center}
.card{background:#12121a;border-radius:16px;padding:1.5rem;border:1px solid #242435;margin-bottom:1.5rem}
.card h2{font-size:1.15rem;margin-bottom:1rem;color:#c4c4ff;display:flex;align-items:center;gap:.5rem}
.card h2:before{content:"";width:4px;height:16px;background:#4cc2ff;border-radius:2px}
.form-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;align-items:flex-start}
input,select,button{padding:.7rem 1rem;border-radius:10px;border:1px solid #2e2e45;background:#1a1a29;color:#fff;font-size:.9rem;outline:none}
input:focus,select:focus{border-color:#4cc2ff}
button.btn-primary{background:linear-gradient(90deg,#4285f4,#7b42ff);border:none;cursor:pointer;color:#fff}
button.btn-primary:hover{opacity:.9}
.list{display:flex;flex-direction:column;gap:.75rem}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#161625;border-radius:10px;gap:1rem;flex-wrap:wrap}
.btn-del{padding:.4rem .8rem;background:#291d2f;color:#ff6666;border-radius:8px;text-decoration:none;font-size:.85rem}
table{width:100%;border-collapse:collapse}
th,td{padding:.85rem;text-align:left;border-bottom:1px solid #242435;font-size:.9rem}
th{color:#a9a9ff}
.badge{padding:.25rem .5rem;border-radius:6px;font-size:.75rem}
.badge.profit{background:#1e332f;color:#4cd97f}
.badge.loss{background:#331e24;color:#ff6666}
.badge.dir{background:#1e2533;color:#4cc2ff}
.badge.planned{background:#29241e;color:#eac147}
.badge.active{background:#1e332f;color:#4cd97f}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-item{background:#161625;padding:1rem;border-radius:12px;text-align:center}
.stat-item .label{font-size:.8rem;color:#999}
.stat-item .value{font-size:1.4rem;font-weight:600;color:#fff;margin-top:.25rem}
.symbol-wrap{position:relative;min-width:180px}
.symbol-wrap input{width:100%}
.symbol-dropdown{position:absolute;top:100%;left:0;right:0;background:#1a1a29;border:1px solid #2e2e45;border-radius:10px;margin-top:4px;z-index:100;max-height:240px;overflow-y:auto;display:none}
.symbol-dropdown.show{display:block}
.symbol-option{padding:.65rem 1rem;cursor:pointer;font-size:.85rem;border-bottom:1px solid #242435}
.symbol-option:hover{background:#242435}
.symbol-option .sub{font-size:.75rem;color:#888;margin-top:2px}
.symbol-selected{font-size:.75rem;color:#4cc2ff;margin-top:4px}
.user-bar{padding:1rem 1.5rem;border-top:1px solid #242435;margin-top:1rem;font-size:.8rem;color:#888}
.user-bar a{color:#ff6666;text-decoration:none}
@media(max-width:768px){
.layout{flex-direction:column}
.sidebar{width:100%}
.nav{display:flex;flex-wrap:wrap}
.nav a{border-left:none;border-bottom:2px solid transparent;padding:.5rem 1rem}
.nav a.active{border-bottom-color:#4cc2ff}
}
</style>
{% block extra_css %}{% endblock %}
</head>
<body>
<div class="layout">
<aside class="sidebar">
<div class="logo">期货监控复盘</div>
<nav class="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('records') }}" class="{% if request.endpoint == 'records' %}active{% endif %}">交易记录与复盘</a>
<a href="{{ url_for('stats') }}" class="{% if request.endpoint == 'stats' %}active{% endif %}">统计分析</a>
<a href="{{ url_for('settings') }}" class="{% if request.endpoint == 'settings' %}active{% endif %}">系统设置</a>
</nav>
<div class="user-bar">
{{ session.username or '用户' }}
<a href="{{ url_for('logout') }}">退出</a>
</div>
</aside>
<main class="main">
{% with msg=get_flashed_messages() %}{% if msg %}<div class="flash">{{ msg[0] }}</div>{% endif %}{% endwith %}
{% block content %}{% endblock %}
</main>
</div>
<script src="{{ url_for('static', filename='js/symbol.js') }}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
+51
View File
@@ -0,0 +1,51 @@
{% extends "base.html" %}
{% block title %}关键位监控 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">关键位监控</h1>
<div class="card">
<h2>新增监控</h2>
<form action="{{ url_for('add_key') }}" method="post" class="form-row">
<div class="symbol-wrap">
<input type="text" class="symbol-input" placeholder="输入中文品种名" autocomplete="off" required>
<input type="hidden" name="symbol" required>
<input type="hidden" name="symbol_name">
<div class="symbol-dropdown"></div>
<div class="symbol-selected"></div>
</div>
<select name="type" required>
<option value="箱体突破">箱体突破</option>
<option value="收敛突破">收敛突破</option>
<option value="关键阻力位">关键阻力位</option>
<option value="关键支撑位">关键支撑位</option>
</select>
<select name="direction" required>
<option value="">选择方向</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
<input name="upper" type="number" step="0.0001" placeholder="上沿/阻力" required>
<input name="lower" type="number" step="0.0001" placeholder="下沿/支撑" required>
<button type="submit" class="btn-primary">添加监控</button>
</form>
</div>
<div class="card">
<h2>监控列表</h2>
<div class="list">
{% for k in keys %}
<div class="list-item">
<div>
<strong>{{ k.symbol_name or k.symbol }}</strong> | {{ k.monitor_type }}
<span class="badge dir">{{ '做多' if k.direction == 'long' else '做空' }}</span>
</div>
<div>上: {{ k.upper }} | 下: {{ k.lower }}</div>
<div style="font-size:.8rem;color:#888">{{ k.symbol }}</div>
<a href="{{ url_for('del_key', pid=k.id) }}" class="btn-del" onclick="return confirm('删除?')">删除</a>
</div>
{% else %}
<div style="color:#888;padding:1rem">暂无关键位监控</div>
{% endfor %}
</div>
</div>
{% endblock %}
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统登录</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a10;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;color:#fff}
.login-box{background:#12121a;padding:2.5rem;border-radius:16px;width:100%;max-width:400px;border:1px solid #242435;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.login-box h2{margin-bottom:2rem;text-align:center;font-size:1.5rem;background:linear-gradient(90deg,#4cc2ff,#7b42ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;margin-bottom:.5rem;font-size:.9rem;color:#a9a9ff}
.form-group input{width:100%;padding:.85rem 1rem;border-radius:10px;border:1px solid #2e2e45;background:#1a1a29;color:#fff;font-size:.95rem;outline:none}
.form-group input:focus{border-color:#4cc2ff}
button{width:100%;padding:.9rem;border-radius:10px;border:none;background:linear-gradient(90deg,#4285f4,#7b42ff);color:#fff;font-size:1rem;font-weight:500;cursor:pointer}
button:hover{opacity:.9}
.flash{padding:.8rem;margin-bottom:1rem;background:#331e24;color:#ff6666;border-radius:8px;text-align:center;font-size:.85rem}
</style>
</head>
<body>
<div class="login-box">
<h2>期货监控系统</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
{% endwith %}
<form method="POST">
<div class="form-group">
<label>账号</label>
<input type="text" name="username" required placeholder="请输入账号">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" name="password" required placeholder="请输入密码">
</div>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
+68
View File
@@ -0,0 +1,68 @@
{% extends "base.html" %}
{% block title %}开单计划 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">开单计划</h1>
<div class="card">
<h2>新增计划</h2>
<form action="{{ url_for('add_plan') }}" method="post" class="form-row">
<div class="symbol-wrap">
<input type="text" class="symbol-input" placeholder="输入中文品种名" autocomplete="off" required>
<input type="hidden" name="symbol" required>
<input type="hidden" name="symbol_name">
<div class="symbol-dropdown"></div>
<div class="symbol-selected"></div>
</div>
<select name="direction" required>
<option value="">选择方向</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
<input name="zone_lower" type="number" step="0.0001" placeholder="决策区间下限" required>
<input name="zone_upper" type="number" step="0.0001" placeholder="决策区间上限" required>
<input name="stop_loss" type="number" step="0.0001" placeholder="止损价位" required>
<input name="take_profit" type="number" step="0.0001" placeholder="止盈价位" required>
<button type="submit" class="btn-primary">添加计划</button>
</form>
</div>
<div class="card">
<h2>进行中计划</h2>
<div class="list">
{% for p in plans %}
<div class="list-item">
<div>
<strong>{{ p.symbol_name or p.symbol }}</strong>
<span class="badge dir">{{ '做多' if p.direction == 'long' else '做空' }}</span>
{% if p.status == 'planned' %}
<span class="badge planned">待触发</span>
{% else %}
<span class="badge active">已激活</span>
{% endif %}
</div>
<div>区间: {{ p.zone_lower }} ~ {{ p.zone_upper }}</div>
<div>止损: {{ p.stop_loss }} | 止盈: {{ p.take_profit }}</div>
<div style="font-size:.8rem;color:#888">{{ p.symbol }}</div>
<a href="{{ url_for('del_plan', pid=p.id) }}" class="btn-del" onclick="return confirm('删除此计划?')">删除</a>
</div>
{% else %}
<div style="color:#888;padding:1rem">暂无进行中的开单计划</div>
{% endfor %}
</div>
</div>
{% if closed %}
<div class="card">
<h2>最近已完成</h2>
<div class="list">
{% for p in closed %}
<div class="list-item">
<div><strong>{{ p.symbol_name or p.symbol }}</strong> <span class="badge dir">{{ '做多' if p.direction == 'long' else '做空' }}</span></div>
<div>区间: {{ p.zone_lower }} ~ {{ p.zone_upper }} | 损: {{ p.stop_loss }} 盈: {{ p.take_profit }}</div>
<a href="{{ url_for('del_plan', pid=p.id) }}" class="btn-del" onclick="return confirm('删除?')">删除</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endblock %}
+47
View File
@@ -0,0 +1,47 @@
{% extends "base.html" %}
{% block title %}交易记录与复盘 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">交易记录与复盘</h1>
<div class="card">
<h2>全部记录</h2>
<table>
<thead>
<tr>
<th>品种</th>
<th>类型</th>
<th>方向</th>
<th>触发价</th>
<th>止损</th>
<th>止盈</th>
<th>结果</th>
<th>时间</th>
<th></th>
</tr>
</thead>
<tbody>
{% for r in records %}
<tr>
<td>{{ r.symbol_name or r.symbol }}</td>
<td>{{ r.monitor_type }}</td>
<td><span class="badge dir">{{ '做多' if r.direction == 'long' else '做空' }}</span></td>
<td>{{ r.trigger_price }}</td>
<td>{{ r.stop_loss }}</td>
<td>{{ r.take_profit }}</td>
<td>
{% if r.result == '止盈' %}
<span class="badge profit">止盈</span>
{% else %}
<span class="badge loss">止损</span>
{% endif %}
</td>
<td>{{ r.created_at[:16] if r.created_at else '' }}</td>
<td><a href="{{ url_for('del_record', rid=r.id) }}" class="btn-del" onclick="return confirm('删除?')"></a></td>
</tr>
{% else %}
<tr><td colspan="9" style="color:#888">暂无交易记录</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
+39
View File
@@ -0,0 +1,39 @@
{% extends "base.html" %}
{% block title %}系统设置 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">系统设置</h1>
<div class="card">
<h2>企业微信推送</h2>
<form action="{{ url_for('settings') }}" method="post" class="form-row">
<input type="hidden" name="action" value="wechat">
<input name="wechat_webhook" type="url" placeholder="企业微信 Webhook 地址" value="{{ webhook }}" style="flex:1;min-width:300px">
<button type="submit" class="btn-primary">保存</button>
</form>
<p style="font-size:.8rem;color:#888;margin-top:.75rem">在企业微信群中添加机器人后,将 Webhook 地址粘贴到上方保存即可。</p>
</div>
<div class="card">
<h2>修改密码</h2>
<form action="{{ url_for('settings') }}" method="post" style="max-width:400px">
<input type="hidden" name="action" value="password">
<div style="margin-bottom:.75rem">
<label style="font-size:.85rem;color:#a9a9ff;display:block;margin-bottom:.35rem">当前账号</label>
<input type="text" value="{{ username }}" disabled style="width:100%">
</div>
<div style="margin-bottom:.75rem">
<label style="font-size:.85rem;color:#a9a9ff;display:block;margin-bottom:.35rem">原密码</label>
<input name="old_password" type="password" required style="width:100%">
</div>
<div style="margin-bottom:.75rem">
<label style="font-size:.85rem;color:#a9a9ff;display:block;margin-bottom:.35rem">新密码(至少 6 位)</label>
<input name="new_password" type="password" required minlength="6" style="width:100%">
</div>
<div style="margin-bottom:.75rem">
<label style="font-size:.85rem;color:#a9a9ff;display:block;margin-bottom:.35rem">确认新密码</label>
<input name="new_password2" type="password" required minlength="6" style="width:100%">
</div>
<button type="submit" class="btn-primary">修改密码</button>
</form>
</div>
{% endblock %}
+91
View File
@@ -0,0 +1,91 @@
{% extends "base.html" %}
{% block title %}统计分析 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">统计分析</h1>
<div class="stat-grid">
<div class="stat-item"><div class="label">总交易</div><div class="value">{{ total }}</div></div>
<div class="stat-item"><div class="label">止盈</div><div class="value" style="color:#4cd97f">{{ win }}</div></div>
<div class="stat-item"><div class="label">止损</div><div class="value" style="color:#ff6666">{{ loss }}</div></div>
<div class="stat-item"><div class="label">胜率</div><div class="value">{{ rate }}%</div></div>
</div>
<div class="card">
<h2>按品种统计</h2>
<table>
<thead><tr><th>品种</th><th>交易次数</th><th>止盈次数</th><th>胜率</th></tr></thead>
<tbody>
{% for s in by_symbol %}
<tr>
<td>{{ s.symbol_name or s.symbol }}</td>
<td>{{ s.cnt }}</td>
<td>{{ s.wins }}</td>
<td>{{ round(s.wins / s.cnt * 100, 2) if s.cnt else 0 }}%</td>
</tr>
{% else %}
<tr><td colspan="4" style="color:#888">暂无数据</td></tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card">
<h2>按类型统计</h2>
<table>
<thead><tr><th>类型</th><th>交易次数</th><th>止盈次数</th><th>胜率</th></tr></thead>
<tbody>
{% for t in by_type %}
<tr>
<td>{{ t.monitor_type }}</td>
<td>{{ t.cnt }}</td>
<td>{{ t.wins }}</td>
<td>{{ round(t.wins / t.cnt * 100, 2) if t.cnt else 0 }}%</td>
</tr>
{% else %}
<tr><td colspan="4" style="color:#888">暂无数据</td></tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card">
<h2>按方向统计</h2>
<table>
<thead><tr><th>方向</th><th>交易次数</th><th>止盈次数</th><th>胜率</th></tr></thead>
<tbody>
{% for d in by_direction %}
<tr>
<td><span class="badge dir">{{ '做多' if d.direction == 'long' else '做空' }}</span></td>
<td>{{ d.cnt }}</td>
<td>{{ d.wins }}</td>
<td>{{ round(d.wins / d.cnt * 100, 2) if d.cnt else 0 }}%</td>
</tr>
{% else %}
<tr><td colspan="4" style="color:#888">暂无数据</td></tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card">
<h2>最近 10 笔交易</h2>
<table>
<thead><tr><th>品种</th><th>方向</th><th>结果</th><th>时间</th></tr></thead>
<tbody>
{% for r in recent %}
<tr>
<td>{{ r.symbol_name or r.symbol }}</td>
<td><span class="badge dir">{{ '做多' if r.direction == 'long' else '做空' }}</span></td>
<td>
{% if r.result == '止盈' %}<span class="badge profit">止盈</span>
{% else %}<span class="badge loss">止损</span>{% endif %}
</td>
<td>{{ r.created_at[:16] if r.created_at else '' }}</td>
</tr>
{% else %}
<tr><td colspan="4" style="color:#888">暂无数据</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}