合约管理支持按交易所筛选品种；品种列表按交易所分组展示

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

ft-app/app/templates/admin.html

@@ -118,14 +118,24 @@
   </div>
 
   {% if products %}
-  <div class="table-wrap">
+  {% for ex in exchanges %}
-  <table>
+  {% set ex_products = products | selectattr('exchange', 'equalto', ex[0]) | list %}
-    <tr><th>代码</th><th>名称</th><th>交易所</th><th>每点</th><th>合约数</th><th>操作</th></tr>
+  {% if ex_products %}
-    {% for p in products %}
+  <div style="margin-bottom:16px;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(-90deg);">▼</span>
+      <strong style="font-size:0.92rem;">{{ ex[1] }}</strong>
+      <span style="font-size:0.78rem;color:var(--sub);">{{ ex_products|length }} 个品种</span>
+    </div>
+    <div class="product-body" style="display:none;">
+      <table style="font-size:0.88rem;">
+        <tr><th>代码</th><th>名称</th><th>每点</th><th>合约数</th><th>操作</th></tr>
+        {% for p in ex_products %}
         <tr>
           <td><strong>{{ p.code }}</strong></td>
           <td>{{ p.name }}</td>
-      <td>{{ exchange_names.get(p.exchange, p.exchange) }}</td>
           <td>{{ p.point_value }}</td>
           <td>{{ p.contracts|length }}</td>
           <td>
@@ -137,6 +147,9 @@
         {% endfor %}
       </table>
     </div>
+  </div>
+  {% endif %}
+  {% endfor %}
   {% else %}
   <div style="text-align:center;padding:40px;color:var(--sub);">暂无品种，请先新建。</div>
   {% endif %}
@@ -146,16 +159,22 @@
 <div class="tab-panel{% if tab == 'contract' %} active{% endif %}" id="tab-contract">
   {% if products %}
   {# ── Add contract form ── #}
-  <div class="form-card" style="margin-bottom:24px;">
+  <div class="form-card" style="margin-bottom:24px;max-width:720px;">
     <div class="section-title">添加合约</div>
     <form method="post" action="/admin/contract" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
+      <div class="form-group" style="margin-bottom:0;flex:1;min-width:200px;">
+        <label>交易所</label>
+        <select id="contractExchange" required onchange="filterProductsByExchange()">
+          <option value="">-- 选择交易所 --</option>
+          {% for ex in exchanges %}
+          <option value="{{ ex[0] }}">{{ ex[1] }}</option>
+          {% endfor %}
+        </select>
+      </div>
       <div class="form-group" style="margin-bottom:0;flex:1;min-width:140px;">
         <label>品种</label>
-        <select name="product_id" required>
+        <select name="product_id" id="contractProduct" required disabled>
-          <option value="">-- 选择品种 --</option>
+          <option value="">-- 先选交易所 --</option>
-          {% for p in products %}
-          <option value="{{ p.id }}">{{ p.code }} · {{ p.name }}</option>
-          {% endfor %}
         </select>
       </div>
       <div class="form-group" style="margin-bottom:0;flex:1;min-width:140px;">
@@ -208,6 +227,26 @@
 </div>
 
 <script>
+var productList = [
+  {% for p in products %}
+  {id: {{ p.id }}, code: '{{ p.code }}', name: '{{ p.name }}', exchange: '{{ p.exchange }}'}{% if not loop.last %},{% endif %}
+  {% endfor %}
+];
+
+function filterProductsByExchange() {
+  var exchange = document.getElementById('contractExchange').value;
+  var sel = document.getElementById('contractProduct');
+  sel.innerHTML = '<option value="">-- 选择品种 --</option>';
+  sel.disabled = !exchange;
+  if (exchange) {
+    productList.forEach(function(p) {
+      if (p.exchange === exchange) {
+        sel.innerHTML += '<option value="' + p.id + '">' + p.code + ' · ' + p.name + '</option>';
+      }
+    });
+  }
+}
+
 function escapeHtml(s) {
   var d = document.createElement('div');
   d.appendChild(document.createTextNode(s));