From 105f6303886de3552f19eb3301ecf4f1f63cf9b3 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Mon, 15 Jun 2026 12:48:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B4=A7=E5=87=91=E5=A4=8D=E7=9B=98=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=EF=BC=9A=E5=A4=9A=E5=88=97=E5=B8=83=E5=B1=80=E4=B8=80?=
 =?UTF-8?q?=E5=B1=8F=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 templates/base.html    |  16 +++++
 templates/records.html | 131 ++++++++++++++++++++---------------------
 2 files changed, 81 insertions(+), 66 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index d20424f..686da7f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -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}
diff --git a/templates/records.html b/templates/records.html
index c8eff60..21a8880 100644
--- a/templates/records.html
+++ b/templates/records.html
@@ -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>