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>
|
||||
|
||||
Reference in New Issue
Block a user