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

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

ft-app/app/templates/index.html

@@ -5,64 +5,65 @@
 
 {% block content %}
 
-{% for pg in product_groups %}
+{% set active_product = request.query_params.get('product', product_groups[0].code if product_groups else '') %}
-<div style="margin-bottom:24px;border:1px solid var(--border);border-radius:10px;overflow:hidden;">
+
-  <div class="product-header"
+<style>
-       style="display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--th-bg);cursor:pointer;user-select:none;"
+  .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
-       onclick="toggleProduct(this)">
+  .tab-btn {
-    <span class="collapse-arrow" style="font-size:0.75rem;transition:transform .2s;display:inline-block;transform:rotate(0deg);">▼</span>
+    padding: 10px 20px; border: none; background: none;
-    <strong style="font-size:0.92rem;">{{ pg.code }} · {{ pg.name }}</strong>
+    font-size: 0.88rem; font-weight: 500; color: var(--sub);
-    <span style="font-size:0.78rem;color:var(--sub);">{{ pg.exchange }}</span>
+    cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent;
-    <span style="font-size:0.78rem;color:var(--sub);margin-left:8px;">{{ pg.contracts|length }} 合约</span>
+    margin-bottom: -2px; transition: color .12s, border-color .12s;
-  </div>
+  }
-  <div class="product-body">
+  .tab-btn:hover { color: var(--fg); }
-    <table>
+  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
-      <tr><th>合约</th><th>日期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>振幅</th><th>次日振幅</th><th>操作</th></tr>
+</style>
-      {% for c in pg.contracts %}
+
-      <tr>
+<div class="tabs">
-        <td><strong>{{ c }}</strong></td>
+  {% for pg in product_groups %}
-        {% if c in contract_bars %}
+  <a href="/contracts/?product={{ pg.code }}" class="tab-btn{% if active_product == pg.code %} active{% endif %}">
-        <td>{{ contract_bars[c].date }}</td>
+    {{ pg.code }} · {{ pg.name }}
-        <td>{{ contract_bars[c].open|int }}</td>
+  </a>
-        <td>{{ contract_bars[c].close|int }}</td>
+  {% endfor %}
-        <td>{{ contract_bars[c].high|int }}</td>
-        <td>{{ contract_bars[c].low|int }}</td>
-        <td>
-          {% if contract_bars[c].amp_5d %}
-          <span class="badge badge-up">{{ contract_bars[c].amp_5d|int }}</span>
-          {% else %}
-          <span class="na">—</span>
-          {% endif %}
-        </td>
-        <td>
-          {% if c in contract_next_amp %}
-          <span class="badge badge-warn">{{ contract_next_amp[c] }}</span>
-          {% else %}
-          <span class="na">—</span>
-          {% endif %}
-        </td>
-        {% else %}
-        <td colspan="7" class="na">暂无数据</td>
-        {% endif %}
-        <td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
-      </tr>
-      {% endfor %}
-    </table>
-  </div>
 </div>
+
+{% for pg in product_groups %}
+{% 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>
+    <td><strong>{{ c }}</strong></td>
+    {% if c in contract_bars %}
+    <td>{{ contract_bars[c].date }}</td>
+    <td>{{ contract_bars[c].open|int }}</td>
+    <td>{{ contract_bars[c].close|int }}</td>
+    <td>{{ contract_bars[c].high|int }}</td>
+    <td>{{ contract_bars[c].low|int }}</td>
+    <td>
+      {% if contract_bars[c].amp_5d %}
+      <span class="badge badge-up">{{ contract_bars[c].amp_5d|int }}</span>
+      {% else %}
+      <span class="na">—</span>
+      {% endif %}
+    </td>
+    <td>
+      {% if c in contract_next_amp %}
+      <span class="badge badge-warn">{{ contract_next_amp[c] }}</span>
+      {% else %}
+      <span class="na">—</span>
+      {% endif %}
+    </td>
+    {% else %}
+    <td colspan="7" class="na">暂无数据</td>
+    {% endif %}
+    <td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
+  </tr>
+  {% endfor %}
+</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 %}