合约管理改为先选品种再填合约，表单收敛到顶部

ft-app/app/templates/admin.html

@@ -133,33 +133,38 @@
 {# ═══════════════════ Tab: 合约管理 ═══════════════════ #}
 <div class="tab-panel{% if tab == 'contract' %} active{% endif %}" id="tab-contract">
   {% if products %}
-  {% for p in products %}
+  {# ── Add contract form ── #}
-  <div class="section-title" style="margin-top:{% if not loop.first %}24px{% else %}0{% endif %};">{{ p.code }} · {{ p.name }}</div>
+  <div class="form-card" style="margin-bottom:24px;">
-
+    <div class="section-title">添加合约</div>
-  <div class="form-card" style="margin-bottom:12px;">
     <form method="post" action="/admin/contract" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
-      <input type="hidden" name="product_id" value="{{ p.id }}">
       <div class="form-group" style="margin-bottom:0;flex:1;min-width:140px;">
-        <label>合约代码</label>
+        <label>品种</label>
-        <select name="code" required style="text-transform:uppercase;">
+        <select name="product_id" id="contract-product" required onchange="onProductChange()">
-          <option value="">-- 选择月份 --</option>
+          <option value="">-- 选择品种 --</option>
-          {% for ym in ['2609','2610','2611','2612','2701','2702','2703','2704','2705','2706','2707','2708'] %}
+          {% for p in products %}
-          <option value="{{ p.code }}{{ ym }}">{{ p.code }}{{ ym }}</option>
+          <option value="{{ p.id }}" data-code="{{ p.code }}">{{ p.code }} · {{ p.name }}</option>
           {% endfor %}
         </select>
       </div>
+      <div class="form-group" style="margin-bottom:0;flex:1;min-width:140px;">
+        <label>合约代码 <span style="font-weight:400;color:var(--sub);font-size:0.75rem;">品种代码加月份</span></label>
+        <input type="text" name="code" id="contract-code" required placeholder="先选品种" maxlength="10" style="text-transform:uppercase;">
+      </div>
       <div class="form-group" style="margin-bottom:0;flex:1;min-width:100px;">
-        <label>名称</label>
+        <label>月份 <span style="font-weight:400;color:var(--sub);font-size:0.75rem;">如 2609</span></label>
         <input type="text" name="name" required placeholder="2609" maxlength="4" style="text-transform:uppercase;">
       </div>
-      <button type="submit" class="btn btn-primary">添加合约</button>
+      <button type="submit" class="btn btn-primary">添加</button>
     </form>
   </div>
 
+  {# ── Contract tables per product ── #}
+  {% for p in products %}
   {% if p.contracts %}
+  <div class="section-title" style="margin-top:{% if not loop.first %}24px{% else %}0{% endif %};">{{ p.code }} · {{ p.name }}</div>
   <div class="table-wrap" style="margin-bottom:20px;">
   <table>
-    <tr><th>合约代码</th><th>名称</th><th>状态</th><th>操作</th></tr>
+    <tr><th>合约代码</th><th>月份</th><th>状态</th><th>操作</th></tr>
     {% for c in p.contracts %}
     <tr>
       <td><strong>{{ c.code }}</strong></td>
@@ -181,8 +186,6 @@
     {% endfor %}
   </table>
   </div>
-  {% else %}
-  <div style="color:var(--sub);font-size:0.85rem;margin-bottom:16px;">暂无合约</div>
   {% endif %}
   {% endfor %}
   {% else %}
@@ -212,5 +215,17 @@ function toggleProduct(header) {
     arrow.style.transform = 'rotate(-90deg)';
   }
 }
+
+function onProductChange() {
+  var sel = document.getElementById('contract-product');
+  var opt = sel.options[sel.selectedIndex];
+  var code = opt.dataset.code || '';
+  var input = document.getElementById('contract-code');
+  if (code) {
+    input.placeholder = code + '2609';
+  } else {
+    input.placeholder = '先选品种';
+  }
+}
 </script>
 {% endblock %}