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

紧凑复盘表单：多列布局一屏显示

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-15 12:48:19 +08:00
parent ea680e0485
commit 105f630388
2 changed files with 81 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+16
View File
@@ -28,10 +28,26 @@
.form-compact .form-line{display:grid;gap:.5rem;align-items:center}
.form-compact .line-3{grid-template-columns:repeat(3,1fr)}
.form-compact .line-4{grid-template-columns:repeat(4,1fr)}
.form-compact .line-5{grid-template-columns:repeat(5,1fr)}
.form-compact.line-tight{gap:.35rem;margin-bottom:.5rem}
.form-compact .line-btn{display:flex;gap:.5rem;align-items:center}
.form-compact input,.form-compact select{padding:.55rem .7rem;font-size:.85rem;border-radius:8px}
.form-compact .symbol-selected{font-size:.7rem;margin-top:2px}
.form-compact button.btn-primary{padding:.55rem 1.5rem;font-size:.85rem;white-space:nowrap}
.form-compact-review input.calc-readonly{color:#4cc2ff;background:#151520;font-size:.82rem}
.form-compact-review textarea{min-height:44px;font-size:.85rem;padding:.45rem .65rem}
.form-compact-review .section-hint{font-size:.72rem;color:#888;margin:.25rem 0 .15rem}
.form-compact-review .tag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.15rem .5rem;font-size:.75rem}
.form-compact-review .tag-grid label{display:flex;align-items:center;gap:.3rem;cursor:pointer;color:#bbb;white-space:nowrap}
.form-compact-review .tag-grid input{width:auto;flex-shrink:0}
.form-compact-review input[type="file"]{font-size:.72rem;padding:.4rem .5rem}
.form-compact-review .mini-field span{font-size:.65rem;color:#888;display:block;line-height:1;margin-bottom:2px}
.form-compact-review .kline-row label{display:flex;align-items:center;gap:.35rem;color:#bbb;white-space:nowrap}
.form-compact-review .kline-row{display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:.5rem;align-items:end;font-size:.78rem}
.split-grid.records-split .card{min-height:auto}
.split-grid.records-split .card h2{font-size:1rem;margin-bottom:.5rem}
.split-grid.records-split .card{padding:1rem 1.25rem}
.page-title-sm{font-size:1.25rem;margin-bottom:.75rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-bottom:1rem}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:.8rem;color:#a9a9ff;margin-bottom:.35rem}
templates/records.html
+65 -66
View File
@@ -1,79 +1,78 @@
{% extends "base.html" %}
{% block title %}交易记录与复盘 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">交易记录与复盘</h1>
<h1 class="page-title page-title-sm">交易记录与复盘</h1>
<div class="split-grid">
<div class="split-grid records-split">
<div class="card">
<h2>交易复盘记录上传（含截图）</h2>
<div class="card-body card-scroll">
<form id="review-form" action="{{ url_for('add_review') }}" method="post" enctype="multipart/form-data">
<div class="form-grid">
<div class="field"><label>品种</label><input name="symbol" placeholder="ag2608" required></div>
<div class="field">
<label>方向</label>
<select name="direction" required>
<option value="">请选择</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
</div>
<div class="field"><label>成交价</label><input name="entry_price" type="number" step="0.0001" required></div>
<div class="field"><label>止损</label><input name="stop_loss" type="number" step="0.0001" required></div>
<div class="field"><label>止盈</label><input name="take_profit" type="number" step="0.0001" required></div>
<div class="field"><label>平仓价格</label><input name="close_price" type="number" step="0.0001" required></div>
<div class="field"><label>张数</label><input name="lots" type="number" step="1" min="1" value="1" required></div>
<div class="field"><label>开仓时间</label><input type="datetime-local" name="open_time" required></div>
<div class="field"><label>平仓时间</label><input type="datetime-local" name="close_time" required></div>
<div class="field"><label>持仓时长（自动）</label><input id="holding_duration" type="text" readonly class="calc-readonly" placeholder="自动计算"></div>
<div class="field"><label>初始盈亏（自动）</label><input id="initial_pnl" type="text" readonly class="calc-readonly" placeholder="按止盈测算"></div>
<div class="field"><label>实际盈亏（自动）</label><input id="actual_pnl" type="text" readonly class="calc-readonly" placeholder="按平仓价测算"></div>
<div class="field"><label>盈亏金额（手动）</label><input name="pnl" type="number" step="0.01" placeholder="实际盈亏金额"></div>
<div class="field"><label>周期</label><input name="timeframe" value="5m"></div>
<div class="field full">
<label>开仓类型（必选）</label>
<select name="open_type" required>
<option value="">请选择</option>
{% for t in open_types %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
</select>
</div>
<div class="field"><label>预期 RR</label><input name="expected_rr" type="number" step="0.01"></div>
<div class="field"><label>实际 RR</label><input name="actual_rr" type="number" step="0.01"></div>
<div class="field">
<label>离场触发（必选）</label>
<select name="exit_trigger" required>
<option value="">请选择</option>
{% for t in exit_triggers %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
</select>
</div>
<div class="field"><label>离场补充</label><input name="exit_supplement" placeholder="手工平仓说明"></div>
<div class="field">
<label>保本后盯盘</label>
<select name="watch_after_breakeven"><option value="否">否</option><option value="是">是</option></select>
</div>
<div class="field">
<label>占用时新开仓</label>
<select name="new_position_while_occupied"><option value="否">否</option><option value="是">是</option></select>
</div>
<div class="field"><label>截图上传</label><input type="file" name="screenshot" accept="image/*"></div>
<h2>复盘上传</h2>
<div class="card-body">
<form id="review-form" action="{{ url_for('add_review') }}" method="post" enctype="multipart/form-data" class="form-compact form-compact-review line-tight">
<div class="form-line line-4">
<input name="symbol" placeholder="品种 ag2608" required>
<select name="direction" required>
<option value="">方向</option>
<option value="long">做多</option>
<option value="short">做空</option>
</select>
<input name="lots" type="number" step="1" min="1" value="1" placeholder="张数" required>
<input name="timeframe" value="5m" placeholder="周期">
</div>
<div class="check-row"><label><input type="checkbox" name="auto_kline" value="1"> 保存时自动生成 K 线图并作为截图</label></div>
<div class="form-grid">
<div class="field"><label>周期1</label><select name="kline_period1">{% for p in kline_periods %}<option value="{{ p }}" {% if p=='15m' %}selected{% endif %}>{{ p }}</option>{% endfor %}</select></div>
<div class="field"><label>周期2</label><select name="kline_period2">{% for p in kline_periods %}<option value="{{ p }}" {% if p=='1h' %}selected{% endif %}>{{ p }}</option>{% endfor %}</select></div>
<div class="field"><label>K线数</label><input name="kline_count" type="number" value="300"></div>
<div class="field"><label>K线截止</label><select name="kline_cutoff">{% for c in kline_cutoffs %}<option value="{{ c }}">{{ c }}</option>{% endfor %}</select></div>
<div class="form-line line-4">
<input name="entry_price" 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>
<input name="close_price" type="number" step="0.0001" placeholder="平仓价" required>
</div>
<p class="hint">下方勾选行为标签的均为<strong>情绪单</strong></p>
<div class="check-row">
<div class="form-line line-4">
<div class="mini-field"><span>开仓时间</span><input type="datetime-local" name="open_time" required></div>
<div class="mini-field"><span>平仓时间</span><input type="datetime-local" name="close_time" required></div>
<input id="holding_duration" type="text" readonly class="calc-readonly" placeholder="持仓时长(自动)">
<input name="pnl" type="number" step="0.01" placeholder="盈亏金额(手动)">
</div>
<div class="form-line line-4">
<input id="initial_pnl" type="text" readonly class="calc-readonly" placeholder="初始盈亏(自动)">
<input id="actual_pnl" type="text" readonly class="calc-readonly" placeholder="实际盈亏(自动)">
<input name="expected_rr" type="number" step="0.01" placeholder="预期RR">
<input name="actual_rr" type="number" step="0.01" placeholder="实际RR">
</div>
<div class="form-line line-4">
<select name="open_type" required>
<option value="">开仓类型</option>
{% for t in open_types %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
</select>
<select name="exit_trigger" required>
<option value="">离场触发</option>
{% for t in exit_triggers %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
</select>
<input name="exit_supplement" placeholder="离场补充">
<select name="watch_after_breakeven" title="保本后盯盘">
<option value="否">保本盯盘:否</option>
<option value="是">保本盯盘:是</option>
</select>
</div>
<div class="form-line line-4">
<select name="new_position_while_occupied" title="占用时新开仓">
<option value="否">占用新开:否</option>
<option value="是">占用新开:是</option>
</select>
<input type="file" name="screenshot" accept="image/*" title="截图上传">
<textarea name="notes" placeholder="备注" rows="1"></textarea>
<button type="submit" class="btn-primary">保存</button>
</div>
<div class="kline-row">
<label><input type="checkbox" name="auto_kline" value="1"> 自动K线</label>
<select name="kline_period1" title="周期1">{% for p in kline_periods %}<option value="{{ p }}" {% if p=='15m' %}selected{% endif %}>{{ p }}</option>{% endfor %}</select>
<select name="kline_period2" title="周期2">{% for p in kline_periods %}<option value="{{ p }}" {% if p=='1h' %}selected{% endif %}>{{ p }}</option>{% endfor %}</select>
<input name="kline_count" type="number" value="300" placeholder="K线数" title="K线数">
<select name="kline_cutoff" title="K线截止">{% for c in kline_cutoffs %}<option value="{{ c }}">{{ c }}</option>{% endfor %}</select>
</div>
<p class="section-hint">勾选行为标签即为情绪单</p>
<div class="tag-grid">
{% for tag in behavior_tags %}
<label><input type="checkbox" name="tag_{{ tag }}" value="1"> {{ tag }}</label>
{% endfor %}
</div>
<div class="field" style="margin-top:.75rem"><label>备注</label><textarea name="notes"></textarea></div>
<button type="submit" class="btn-primary" style="margin-top:1rem">保存复盘记录</button>
</form>
</div>
</div>
@@ -149,7 +148,7 @@
</div>
{% if auto_records %}
<div class="card" style="margin-top:1.5rem">
<div class="card" style="margin-top:1rem">
<h2>系统自动记录（止盈/止损）</h2>
<table>
<thead><tr><th>品种</th><th>类型</th><th>方向</th><th>触发价</th><th>结果</th><th>时间</th></tr></thead>