交易记录改为顶部Tab切换，统一系统管理样式

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

ft-app/app/templates/base.html

@@ -206,20 +206,9 @@
     <a href="/positions/" class="{% if active_nav == 'positions' %}active{% endif %}">
       <span class="icon">📐</span> 仓位管理
     </a>
-    <div class="nav-group{% if active_nav == 'trades' %} open{% endif %}" id="nav-trades">
+    <a href="/trades/" class="{% if active_nav == 'trades' %}active{% endif %}">
-      <a class="nav-parent{% if active_nav == 'trades' %} active{% endif %}" onclick="toggleNavGroup(event, 'nav-trades')" href="#">
+      <span class="icon">📝</span> 交易记录
-        <span class="icon">📝</span> 交易记录
+    </a>
-        <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,14 +1,33 @@
 {% extends "base.html" %}
 {% block title %}交易记录{% endblock %}
 {% block heading %}交易记录{% endblock %}
-{% block breadcrumb %}{% if request.query_params.get('view') == 'closed' %}已平仓记录{% else %}开平仓记录{% endif %}{% endblock %}
+{% block breadcrumb %}开平仓记录{% endblock %}
 
 {% block content %}
 
 {% set view = request.query_params.get('view', '') %}
 
+<style>
+  .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
+  .tab-btn {
+    padding: 10px 20px; border: none; background: none;
+    font-size: 0.88rem; font-weight: 500; color: var(--sub);
+    cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent;
+    margin-bottom: -2px; transition: color .12s, border-color .12s;
+  }
+  .tab-btn:hover { color: var(--fg); }
+  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+</style>
+
+<div class="tabs">
+  <a href="/trades/" class="tab-btn{% if view != 'closed' %} active{% endif %}">持仓</a>
+  <a href="/trades/?view=closed" class="tab-btn{% if view == 'closed' %} active{% endif %}">已平仓</a>
+</div>
+
 {% if view != 'closed' %}
-{# ═══════════════ 持仓 ═══════════════ #}
+<div class="tab-panel active">
 
 {# ── 新建开仓 ── #}
 <div class="section-title">新建开仓</div>
@@ -109,7 +128,9 @@
   </form>
 </div>
 
+</div>
 {% else %}
+<div class="tab-panel active">
 {# ═══════════════ 已平仓 ═══════════════ #}
 
 {% if closed_trades %}
@@ -171,6 +192,7 @@
 <div style="text-align:center;padding:60px;color:var(--sub);">暂无已平仓记录</div>
 {% endif %}
 
+</div>
 {% endif %}
 
 {% if view != 'closed' %}