持仓列表增加品种子tab切换

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

ft-app/app/templates/trades.html

@@ -5,6 +5,12 @@
 {% block content %}
 
 {% set view = request.query_params.get('view', '') %}
+{% set product_tab = request.query_params.get('tab', '全部') %}
+{% set product_codes = product_contracts.keys()|list %}
+{% set grouped_open = {} %}
+{% for t in open_trades %}
+  {% set _ = grouped_open.setdefault(t.product_code, []).append(t) %}
+{% endfor %}
 
 <style>
   .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
@@ -18,6 +24,14 @@
   .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
   .tab-panel { display: none; }
   .tab-panel.active { display: block; }
+  .sub-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
+  .sub-tab-btn {
+    padding: 4px 14px; border: 1px solid var(--border); background: var(--surface);
+    font-size: 0.78rem; color: var(--sub); cursor: pointer; text-decoration: none;
+    border-radius: 4px; transition: color .12s, border-color .12s;
+  }
+  .sub-tab-btn:hover { color: var(--fg); border-color: var(--accent); }
+  .sub-tab-btn.active { color: var(--accent); border-color: var(--accent); font-weight: 600; background: var(--accent-light); }
 </style>
 
 <div class="tabs">
@@ -76,13 +90,27 @@
 {# ── 持仓列表 ── #}
 <div class="section-title">持仓中 · {{ open_trades|length }} 笔</div>
 
+<div class="sub-tabs">
+  <a href="/trades/?tab=全部" class="sub-tab-btn{% if product_tab == '全部' %} active{% endif %}">全部</a>
+  {% for pc in product_codes %}
+  {% set count = grouped_open.get(pc, [])|length %}
+  <a href="/trades/?tab={{ pc }}" class="sub-tab-btn{% if product_tab == pc %} active{% endif %}">{{ pc }}{% if count %} · {{ count }}{% endif %}</a>
+  {% endfor %}
+</div>
+
 {% if open_trades %}
-<div class="table-wrap">
+{% for pc in product_codes %}
+{% if product_tab == '全部' or product_tab == pc %}
+{% set trades = grouped_open.get(pc, []) %}
+{% if trades %}
+<div class="table-wrap" style="margin-bottom:24px;">
+{% if product_tab == '全部' %}
+<div class="section-title" style="font-size:0.88rem;">{{ pc }} · {{ trades|length }} 笔</div>
+{% endif %}
 <table>
-  <tr><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></tr>
-  {% for t in open_trades %}
+  {% for t in trades %}
   <tr>
-    <td>{{ t.product_code }}</td>
     <td><strong>{{ t.contract_code.replace(t.product_code, '', 1) }}</strong></td>
     <td>
       {% if t.direction == 'short' %}
@@ -99,7 +127,7 @@
               onclick="showCloseForm({{ t.id }})">平仓</button>
       <button style="background:var(--success-bg);color:var(--success-fg);border:1px solid var(--success);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;margin-left:8px;"
               onclick="showEditForm('trade', {{ t.id }}, '{{ t.product_code }}', '{{ t.contract_code }}', '{{ t.direction }}', {{ t.open_price }}, {{ t.open_fee or 0 }}, '{{ t.open_date }}', null, null, null, '{{ t.status }}')">编辑</button>
-<form method="post" action="/trades/{{ t.id }}/delete" style="display:inline;margin-left:8px;">
+	<form method="post" action="/trades/{{ t.id }}/delete" style="display:inline;margin-left:8px;">
         <button style="background:transparent;color:#dc2626;border:1px solid #ef4444;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="confirmDelete(event, '确定删除此记录？', this.closest('form').action)">删除</button>
       </form>
     </td>
@@ -107,6 +135,9 @@
   {% endfor %}
 </table>
 </div>
+{% endif %}
+{% endif %}
+{% endfor %}
 {% else %}
 <div style="text-align:center;padding:40px;color:var(--sub);">暂无持仓</div>
 {% endif %}