ui: 系统设置卡片对齐，策略页说明与布局完善
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+115
-90
@@ -2,113 +2,138 @@
|
||||
{% block title %}系统设置 - 国内期货监控系统{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
|
||||
.settings-grid .card{margin-bottom:0}
|
||||
.settings-password-form{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .75rem;max-width:520px}
|
||||
.settings-page{display:flex;flex-direction:column;gap:1.25rem}
|
||||
.settings-page .split-grid{margin-bottom:0}
|
||||
.settings-page .split-grid .card{margin-bottom:0;min-height:100%;height:100%;display:flex;flex-direction:column}
|
||||
.settings-page .split-grid .card > form,
|
||||
.settings-page .split-grid .card > .card-inner{flex:1;display:flex;flex-direction:column}
|
||||
.settings-password-form{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .75rem}
|
||||
.settings-password-form .field-full{grid-column:1/-1}
|
||||
.settings-password-form .field label{font-size:.78rem}
|
||||
.settings-password-form input{padding:.55rem .7rem;font-size:.85rem}
|
||||
.settings-tips{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin:0;padding:0;list-style:none;font-size:.85rem;color:var(--text-muted);line-height:1.55}
|
||||
.settings-tips li{padding-left:1rem;position:relative}
|
||||
.settings-tips li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
|
||||
@media(max-width:900px){
|
||||
.settings-grid{grid-template-columns:1fr}
|
||||
.settings-password-form{grid-template-columns:1fr;max-width:none}
|
||||
.settings-password-form{grid-template-columns:1fr}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="settings-grid">
|
||||
<div class="settings-page">
|
||||
|
||||
<div class="card">
|
||||
<h2>导航显示</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="nav">
|
||||
<p class="hint" style="margin-bottom:.75rem">关闭后顶栏隐藏对应入口，直接访问 URL 也会跳转回持仓监控。</p>
|
||||
<div class="check-row">
|
||||
{% for key, label in nav_toggles.items() %}
|
||||
<label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap">
|
||||
<input type="checkbox" name="nav_{{ key }}" {% if nav_items[key] %}checked{% endif %}>
|
||||
<span>{{ label }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="submit" class="btn-primary" style="margin-top:.75rem">保存导航</button>
|
||||
</form>
|
||||
<div class="split-grid">
|
||||
<div class="card">
|
||||
<h2>导航显示</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="nav">
|
||||
<p class="hint" style="margin-bottom:.75rem">关闭后顶栏隐藏对应入口，直接访问 URL 也会跳转回持仓监控。</p>
|
||||
<div class="check-row">
|
||||
{% for key, label in nav_toggles.items() %}
|
||||
<label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap">
|
||||
<input type="checkbox" name="nav_{{ key }}" {% if nav_items[key] %}checked{% endif %}>
|
||||
<span>{{ label }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="submit" class="btn-primary" style="margin-top:.75rem">保存导航</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>交易模式</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="trading">
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>交易通道</label>
|
||||
<select name="trading_mode">
|
||||
<option value="simulation" {% if trading_mode == 'simulation' %}selected{% endif %}>SimNow（vnpy CTP）</option>
|
||||
<option value="live" {% if trading_mode == 'live' %}selected{% endif %}>期货公司 CTP（后期接入）</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>计仓模式</label>
|
||||
<select name="position_sizing_mode">
|
||||
<option value="risk" {% if position_sizing_mode == 'risk' %}selected{% endif %}>以损定仓</option>
|
||||
<option value="fixed" {% if position_sizing_mode == 'fixed' %}selected{% endif %}>固定张数</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>单笔风险比例（以损定仓，%）</label>
|
||||
<input name="risk_percent" type="number" step="0.1" min="0.1" max="100" value="{{ risk_percent }}">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary" style="margin-top:.75rem">保存交易设置</button>
|
||||
<p class="hint" style="margin-top:.75rem;margin-bottom:0">
|
||||
在 <code>.env</code> 配置 <code>SIMNOW_USER</code>，于「持仓监控」连接 CTP；权益与行情优先来自柜台。
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>交易模式</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="trading">
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label>交易通道</label>
|
||||
<select name="trading_mode">
|
||||
<option value="simulation" {% if trading_mode == 'simulation' %}selected{% endif %}>模拟盘 · SimNow（vnpy CTP）</option>
|
||||
<option value="live" {% if trading_mode == 'live' %}selected{% endif %}>实盘 · 期货公司 CTP（后期接入）</option>
|
||||
</select>
|
||||
<div class="split-grid">
|
||||
<div class="card">
|
||||
<h2>行情说明</h2>
|
||||
<div class="card-inner">
|
||||
<p class="hint" style="font-size:.88rem;line-height:1.6;margin:0">
|
||||
当前行情源：<strong class="text-accent">{{ quote_label }}</strong><br>
|
||||
CTP 已连接时使用<strong>柜台行情</strong>；未连接时回退新浪接口。<br>
|
||||
合约代码按同花顺格式（如 ag2608、IF2606）。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>企业微信推送</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post">
|
||||
<input type="hidden" name="action" value="wechat">
|
||||
<div class="field" style="margin-bottom:.75rem">
|
||||
<label>Webhook 地址</label>
|
||||
<input name="wechat_webhook" type="url" placeholder="https://qyapi.weixin.qq.com/..." value="{{ webhook }}">
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">保存</button>
|
||||
<p class="hint" style="margin-top:.75rem;margin-bottom:0">在企业微信群添加机器人后，粘贴 Webhook 地址保存。</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split-grid">
|
||||
<div class="card">
|
||||
<h2>修改密码</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post" class="settings-password-form">
|
||||
<input type="hidden" name="action" value="password">
|
||||
<div class="field field-full">
|
||||
<label>当前账号</label>
|
||||
<input type="text" value="{{ username }}" disabled>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>计仓模式</label>
|
||||
<select name="position_sizing_mode">
|
||||
<option value="risk" {% if position_sizing_mode == 'risk' %}selected{% endif %}>以损定仓</option>
|
||||
<option value="fixed" {% if position_sizing_mode == 'fixed' %}selected{% endif %}>固定张数</option>
|
||||
</select>
|
||||
<label>原密码</label>
|
||||
<input name="old_password" type="password" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>单笔风险比例（以损定仓，%）</label>
|
||||
<input name="risk_percent" type="number" step="0.1" min="0.1" max="100" value="{{ risk_percent }}">
|
||||
<label>新密码</label>
|
||||
<input name="new_password" type="password" required minlength="6" placeholder="至少 6 位">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary" style="margin-top:.75rem">保存交易设置</button>
|
||||
</form>
|
||||
<p class="hint" style="margin-top:.75rem">
|
||||
<strong>模拟盘</strong>在 <code>.env</code> 配置 <code>SIMNOW_USER</code> 等，于「持仓监控」连接 CTP。
|
||||
权益与行情优先来自<strong> CTP 柜台</strong>。
|
||||
</p>
|
||||
</div>
|
||||
<div class="field field-full">
|
||||
<label>确认新密码</label>
|
||||
<input name="new_password2" type="password" required minlength="6">
|
||||
</div>
|
||||
<div class="field-full">
|
||||
<button type="submit" class="btn-primary">修改密码</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>行情说明</h2>
|
||||
<p class="hint" style="font-size:.88rem;line-height:1.6;margin:0">
|
||||
当前行情源：<strong class="text-accent">{{ quote_label }}</strong><br>
|
||||
CTP 已连接时使用<strong>柜台行情</strong>（与下单、持仓一致）；未连接时回退新浪免费接口。<br>
|
||||
合约代码按<strong>同花顺格式</strong>显示（如 ag2608、IF2606）。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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:0">
|
||||
<button type="submit" class="btn-primary">保存</button>
|
||||
</form>
|
||||
<p class="hint" style="margin-top:.75rem">在企业微信群中添加机器人后，将 Webhook 地址粘贴到上方保存即可。</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>修改密码</h2>
|
||||
<form action="{{ url_for('settings') }}" method="post" class="settings-password-form">
|
||||
<input type="hidden" name="action" value="password">
|
||||
<div class="field field-full">
|
||||
<label>当前账号</label>
|
||||
<input type="text" value="{{ username }}" disabled>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>原密码</label>
|
||||
<input name="old_password" type="password" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>新密码（至少 6 位）</label>
|
||||
<input name="new_password" type="password" required minlength="6">
|
||||
</div>
|
||||
<div class="field field-full">
|
||||
<label>确认新密码</label>
|
||||
<input name="new_password2" type="password" required minlength="6">
|
||||
</div>
|
||||
<div class="field-full">
|
||||
<button type="submit" class="btn-primary">修改密码</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="card">
|
||||
<h2>使用提示</h2>
|
||||
<ul class="settings-tips">
|
||||
<li>持仓监控：连接 CTP 后下单、看持仓与品种推荐</li>
|
||||
<li>策略交易：趋势回调自动补仓；顺势加仓需先开仓</li>
|
||||
<li>手续费：默认 CTP 柜台费率，连接后点同步</li>
|
||||
<li>手机端：浏览器菜单可「添加到主屏幕」安装 App</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+58
-21
@@ -1,20 +1,37 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}策略交易 - 国内期货监控系统{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.strategy-page .split-grid .card{min-height:420px;display:flex;flex-direction:column}
|
||||
.strategy-page .split-grid .card-body{flex:1}
|
||||
.strategy-preview{background:var(--card-inner);border:1px solid var(--card-border);border-radius:8px;padding:.65rem .85rem;font-size:.78rem;line-height:1.5;margin-top:.75rem;white-space:pre-wrap;max-height:200px;overflow:auto}
|
||||
.strategy-steps{margin:.75rem 0 0;padding-left:1.1rem;font-size:.82rem;color:var(--text-muted);line-height:1.6}
|
||||
.strategy-steps a{color:var(--accent)}
|
||||
.strategy-active-roll{margin-top:.65rem;padding:.55rem .75rem;background:var(--card-inner);border-radius:8px;font-size:.8rem;border:1px solid var(--card-border)}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="strategy-page">
|
||||
<div class="split-grid">
|
||||
<div class="card">
|
||||
<h2>趋势回调</h2>
|
||||
<div class="card-body">
|
||||
{% if active_trend %}
|
||||
<p class="hint">运行中 #{{ active_trend.id }} {{ active_trend.symbol }} {{ active_trend.direction }}
|
||||
已开 {{ active_trend.lots_open or 0 }}/{{ active_trend.target_lots }} 手</p>
|
||||
<form id="trend-stop-form" class="form-row">
|
||||
<p class="hint">运行中 #{{ active_trend.id }} · {{ active_trend.symbol }} · {{ '做多' if active_trend.direction == 'long' else '做空' }}</p>
|
||||
<p class="hint">已开 <strong>{{ active_trend.lots_open or 0 }}</strong> / {{ active_trend.target_lots }} 手 · 止损 {{ active_trend.stop_loss }} · 止盈 {{ active_trend.take_profit }}</p>
|
||||
<form id="trend-stop-form" class="form-row" style="margin-top:.75rem">
|
||||
<input type="hidden" name="plan_id" value="{{ active_trend.id }}">
|
||||
<button type="button" class="btn-primary" id="btn-trend-stop">结束计划</button>
|
||||
</form>
|
||||
<p class="hint" style="margin-top:.75rem;font-size:.75rem">后台按档位自动补仓，触及止盈或手动结束。</p>
|
||||
{% else %}
|
||||
<p class="hint" style="margin-bottom:.65rem">设置止损/补仓边界/止盈 → 预览 → 确认执行首仓；后续自动分档加仓。</p>
|
||||
<form id="trend-form" class="form-compact">
|
||||
<div class="form-line line-2">
|
||||
<div class="symbol-wrap"><input class="symbol-input" name="symbol" placeholder="合约" required><div class="symbol-dropdown"></div></div>
|
||||
<div class="symbol-wrap symbol-mains">
|
||||
<input class="symbol-input" name="symbol" placeholder="品种，输入中文或代码" autocomplete="off" required>
|
||||
<div class="symbol-dropdown"></div>
|
||||
</div>
|
||||
<select name="direction"><option value="long">做多</option><option value="short">做空</option></select>
|
||||
</div>
|
||||
<div class="form-line line-3">
|
||||
@@ -23,41 +40,61 @@
|
||||
<input name="take_profit" type="number" step="any" placeholder="止盈" required>
|
||||
</div>
|
||||
<div class="form-line line-2">
|
||||
<input name="risk_percent" type="number" step="0.1" value="{{ risk_percent }}" placeholder="风险%">
|
||||
<button type="button" class="btn-primary" id="btn-trend-preview">预览</button>
|
||||
<input name="risk_percent" type="number" step="0.1" value="{{ risk_percent }}" placeholder="单笔风险 %" title="单笔风险%">
|
||||
<button type="button" class="btn-primary" id="btn-trend-preview">预览计划</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre id="trend-preview" class="hint" style="white-space:pre-wrap;margin-top:.75rem"></pre>
|
||||
<button type="button" class="btn-primary" id="btn-trend-exec" hidden>确认执行首仓</button>
|
||||
<div id="trend-preview" class="strategy-preview" hidden></div>
|
||||
<button type="button" class="btn-primary" id="btn-trend-exec" hidden style="margin-top:.65rem;width:100%">确认执行首仓</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>顺势加仓（滚仓）</h2>
|
||||
<p class="hint">须先有「下单监控」持仓；最多 3 腿；止盈锁首仓。</p>
|
||||
<div class="card-body">
|
||||
<p class="hint" style="margin-bottom:.65rem">在已有持仓上扩大仓位，统一抬高止损；最多 3 腿，止盈锁定首仓。</p>
|
||||
{% if roll_groups %}
|
||||
{% for g in roll_groups %}
|
||||
<div class="strategy-active-roll">
|
||||
运行中 · 监控 #{{ g.order_monitor_id }} · {{ g.leg_count or 1 }} 腿 · 止损 {{ g.current_stop_loss }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if monitors %}
|
||||
<form id="roll-form" class="form-compact">
|
||||
<select name="monitor_id" required>
|
||||
{% for m in monitors %}
|
||||
<option value="{{ m.id }}">{{ m.symbol }} {{ m.direction }} {{ m.lots }}手</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="field" style="margin-bottom:.5rem">
|
||||
<label class="text-label" style="font-size:.72rem">选择下单监控（开仓后生成）</label>
|
||||
<select name="monitor_id" required>
|
||||
{% for m in monitors %}
|
||||
<option value="{{ m.id }}">{{ m.symbol_name or m.symbol }} {{ m.symbol }} · {{ '多' if m.direction == 'long' else '空' }} {{ m.lots }}手 · SL {{ m.stop_loss or '—' }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-line line-2">
|
||||
<input name="new_stop_loss" type="number" step="any" placeholder="新统一止损" required>
|
||||
<input name="risk_percent" type="number" step="0.1" value="2" placeholder="总风险%">
|
||||
<input name="risk_percent" type="number" step="0.1" value="2" placeholder="总风险 %" title="总风险%">
|
||||
</div>
|
||||
<div class="form-line line-2">
|
||||
<input name="add_price" type="number" step="any" placeholder="加仓参考价">
|
||||
<button type="button" class="btn-primary" id="btn-roll-preview">预览</button>
|
||||
<input name="add_price" type="number" step="any" placeholder="加仓参考价（可选）">
|
||||
<button type="button" class="btn-primary" id="btn-roll-preview">预览滚仓</button>
|
||||
</div>
|
||||
<pre id="roll-preview" class="hint" style="white-space:pre-wrap"></pre>
|
||||
<button type="button" class="btn-primary" id="btn-roll-exec" hidden>执行滚仓</button>
|
||||
<div id="roll-preview" class="strategy-preview" hidden></div>
|
||||
<button type="button" class="btn-primary" id="btn-roll-exec" hidden style="margin-top:.65rem;width:100%">执行滚仓</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<p class="empty-hint">请先在「持仓监控 → 期货下单」进入策略交易开仓。</p>
|
||||
<p class="empty-hint">暂无可用持仓监控</p>
|
||||
<ol class="strategy-steps">
|
||||
<li>打开 <a href="{{ url_for('positions') }}">持仓监控</a>，连接 CTP</li>
|
||||
<li>在「期货下单」填写品种、止损/止盈并<strong>开仓</strong></li>
|
||||
<li>开仓成功后会生成本页可选的监控记录，即可滚仓</li>
|
||||
</ol>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hint"><a href="{{ url_for('strategy_records_page') }}">策略交易记录 →</a></p>
|
||||
<p class="hint" style="margin-top:1rem"><a href="{{ url_for('strategy_records_page') }}">策略交易记录 →</a></p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', filename='js/strategy.js') }}"></script>
|
||||
|
||||
Reference in New Issue
Block a user