行情数据改为顶部Tab切换品种查看行情

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

ft-app/app/templates/index.html

@@ -5,18 +5,32 @@
 
 {% block content %}
 
+{% set active_product = request.query_params.get('product', product_groups[0].code if product_groups else '') %}
+
+<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; }
+</style>
+
+<div class="tabs">
+  {% for pg in product_groups %}
+  <a href="/contracts/?product={{ pg.code }}" class="tab-btn{% if active_product == pg.code %} active{% endif %}">
+    {{ pg.code }} · {{ pg.name }}
+  </a>
+  {% endfor %}
+</div>
+
 {% for pg in product_groups %}
-<div style="margin-bottom:24px;border:1px solid var(--border);border-radius:10px;overflow:hidden;">
-  <div class="product-header"
-       style="display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--th-bg);cursor:pointer;user-select:none;"
-       onclick="toggleProduct(this)">
-    <span class="collapse-arrow" style="font-size:0.75rem;transition:transform .2s;display:inline-block;transform:rotate(0deg);">▼</span>
-    <strong style="font-size:0.92rem;">{{ pg.code }} · {{ pg.name }}</strong>
-    <span style="font-size:0.78rem;color:var(--sub);">{{ pg.exchange }}</span>
-    <span style="font-size:0.78rem;color:var(--sub);margin-left:8px;">{{ pg.contracts|length }} 合约</span>
-  </div>
-  <div class="product-body">
-    <table>
+{% if pg.code == active_product %}
+<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>
   {% for c in pg.contracts %}
   <tr>
@@ -47,22 +61,9 @@
     <td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
   </tr>
   {% endfor %}
-    </table>
-  </div>
+</table>
 </div>
+{% endif %}
 {% endfor %}
 
-<script>
-function toggleProduct(header) {
-  var body = header.nextElementSibling;
-  var arrow = header.querySelector('.collapse-arrow');
-  if (body.style.display === 'none') {
-    body.style.display = 'block';
-    arrow.style.transform = 'rotate(0deg)';
-  } else {
-    body.style.display = 'none';
-    arrow.style.transform = 'rotate(-90deg)';
-  }
-}
-</script>
 {% endblock %}