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

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

ft-app/app/templates/base.html

@@ -59,6 +59,11 @@
     border-left-color: var(--accent); font-weight: 600;
   }
   .sidebar-nav .icon { font-size: 1.1rem; width: 22px; text-align: center; }
+  .nav-group .nav-arrow { font-size: 0.65rem; margin-left: auto; transition: transform .2s; color: var(--sub); }
+  .nav-group.open .nav-arrow { transform: rotate(-180deg); }
+  .nav-group .nav-children { display: none; }
+  .nav-group.open .nav-children { display: block; }
+  .nav-children a { padding-left: 48px !important; font-size: 0.84rem !important; }
   .sidebar-footer {
     padding: 16px 20px; border-top: 1px solid var(--border);
   }
@@ -201,9 +206,20 @@
     <a href="/positions/" class="{% if active_nav == 'positions' %}active{% endif %}">
       <span class="icon">📐</span> 仓位管理
     </a>
-    <a href="/trades/" class="{% if active_nav == 'trades' %}active{% endif %}">
+    <div class="nav-group{% if active_nav == 'trades' %} open{% endif %}" id="nav-trades">
+      <a class="nav-parent{% if active_nav == 'trades' %} active{% endif %}" onclick="toggleNavGroup(event, 'nav-trades')" href="#">
         <span class="icon">📝</span> 交易记录
+        <span class="nav-arrow">▼</span>
       </a>
+      <div class="nav-children">
+        <a href="/trades/" class="{% if active_nav == 'trades' and not request.query_params.get('view') %}active{% endif %}">
+          <span class="icon">📋</span> 持仓
+        </a>
+        <a href="/trades/?view=closed" class="{% if request.query_params.get('view') == 'closed' %}active{% endif %}">
+          <span class="icon">📊</span> 已平仓
+        </a>
+      </div>
+    </div>
     <a href="/admin/" class="{% if active_nav == 'admin' %}active{% endif %}">
       <span class="icon">⚙️</span> 系统管理
     </a>

ft-app/app/templates/trades.html

@@ -1,11 +1,16 @@
 {% 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">
@@ -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 %}