交易记录拆分为持仓和已平仓两个子页面

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ft-app/app/templates/trades.html

@@ -1,16 +1,21 @@
 {% extends "base.html" %}
 {% block title %}交易记录{% endblock %}
 {% block heading %}交易记录{% endblock %}
-{% block breadcrumb %}开平仓记录 · 盈亏统计{% endblock %}
+{% block breadcrumb %}{% if request.query_params.get('view') == 'closed' %}已平仓记录{% else %}开平仓记录{% endif %}{% endblock %}
 
 {% block content %}
 
-{# ═══════════════ 新建开仓 ═══════════════ #}
+{% set view = request.query_params.get('view', '') %}
+
+{% if view != 'closed' %}
+{# ═══════════════ 持仓 ═══════════════ #}
+
+{# ── 新建开仓 ── #}
 <div class="section-title">新建开仓</div>
 <div class="form-card" style="margin-bottom:28px;max-width:100%;">
   <form method="post" action="/trades/open">
     <div style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
-<div class="form-group" style="margin-bottom:0;flex:0 0 auto;min-width:120px;">
+      <div class="form-group" style="margin-bottom:0;flex:0 0 auto;min-width:120px;">
         <label>合约</label>
         <select name="contract_code" required>
           <option value="">--</option>
@@ -44,7 +49,7 @@
   </form>
 </div>
 
-{# ═══════════════ 持仓中 ═══════════════ #}
+{# ── 持仓列表 ── #}
 <div class="section-title">持仓中 · {{ open_trades|length }} 笔</div>
 
 {% if open_trades %}
@@ -80,7 +85,7 @@
 <div style="text-align:center;padding:40px;color:var(--sub);">暂无持仓</div>
 {% endif %}
 
-{# ═══════════════ 平仓表单（隐藏） ═══════════════ #}
+{# ── 平仓弹窗 ── #}
 <div id="closeFormOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;" onclick="hideCloseForm()"></div>
 <div id="closeFormBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px;z-index:100;width:360px;max-width:90vw;">
   <h3 style="margin-bottom:16px;">平仓</h3>
@@ -104,12 +109,14 @@
   </form>
 </div>
 
+{% else %}
 {# ═══════════════ 已平仓 ═══════════════ #}
+
 {% if closed_trades %}
-<div class="section-title" style="margin-top:32px;">已平仓 · {{ closed_trades|length }} 笔</div>
+<div class="section-title">已平仓 · {{ closed_trades|length }} 笔</div>
 <div class="table-wrap">
 <table>
-  <tr><th>品种</th><th>合约</th><th>方向</th><th>开仓</th><th>平仓</th><th>开仓价</th><th>平仓价</th><th>盈亏</th><th>操作</th></tr>
+  <tr><th>品种</th><th>合约</th><th>方向</th><th>开仓</th><th>平仓</th><th>开仓价</th><th>平仓价</th><th>开仓费</th><th>平仓费</th><th>盈亏</th><th>操作</th></tr>
   {% for t in closed_trades %}
   <tr>
     <td>{{ t.product_code }}</td>
@@ -125,6 +132,8 @@
     <td style="font-size:0.8rem;">{{ t.close_date }}</td>
     <td>{{ t.open_price }}</td>
     <td>{{ t.close_price }}</td>
+    <td>{{ t.open_fee or 0 }}</td>
+    <td>{{ t.close_fee or 0 }}</td>
     <td>
       {% set p = t.pnl %}
       {% if p is not none %}
@@ -158,8 +167,13 @@
   <span style="color:var(--sub);">|</span>
   <span>手续费合计 <b>{{ '%.2f'|format(ns.total_open_fee + ns.total_close_fee) }}</b></span>
 </div>
+{% else %}
+<div style="text-align:center;padding:60px;color:var(--sub);">暂无已平仓记录</div>
 {% endif %}
 
+{% endif %}
+
+{% if view != 'closed' %}
 <script>
 function showCloseForm(tradeId) {
   document.getElementById('closeForm').action = '/trades/' + tradeId + '/close';
@@ -171,4 +185,5 @@ function hideCloseForm() {
   document.getElementById('closeFormBox').style.display = 'none';
 }
 </script>
+{% endif %}
 {% endblock %}