fix(settings): equal columns, form-style option transfers, compact export

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/instance_theme.css

@@ -2184,7 +2184,7 @@ html[data-theme="light"] .journal-detail-img-thumb {
 
 .settings-cards-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 12px;
   align-items: stretch;
 }
@@ -2197,46 +2197,34 @@ html[data-theme="light"] .journal-detail-img-thumb {
 .settings-side-col {
   display: flex;
   flex-direction: column;
-  gap: 0;
   align-self: stretch;
-  height: 100%;
-  min-height: 0;
 }
 
 .settings-card--side-panel {
   height: 100%;
-  min-height: 0;
   display: flex;
   flex-direction: column;
   padding: 10px 12px;
-  overflow: hidden;
 }
 
 .settings-side-subcards {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   flex: 1 1 auto;
-  min-height: 0;
 }
 
 .settings-side-subcards > .settings-subcard {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
+  flex: 0 0 auto;
   padding: 8px 10px;
   margin: 0;
 }
 
-.settings-side-subcards > .settings-subcard--export {
-  flex: 0 0 auto;
-  overflow: visible;
-}
-
 .settings-subcard-desc {
   font-size: 0.7rem;
   margin: 0 0 6px;
   line-height: 1.4;
+  color: var(--muted, #8892b0);
 }
 
 .settings-card--risk {
@@ -2246,28 +2234,46 @@ html[data-theme="light"] .journal-detail-img-thumb {
   flex-direction: column;
 }
 
-.settings-link-list--export {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 6px;
+.settings-side-export {
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-soft, #2a3150);
 }
 
-.settings-link-list--export .settings-export-link {
+.settings-side-export-head {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 7px 5px;
-  font-size: 0.7rem;
-  line-height: 1.25;
-  min-height: 32px;
-  word-break: break-word;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
 }
 
-@media (max-width: 520px) {
-  .settings-link-list--export {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.settings-side-export-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #a8b0cc;
+}
+
+.settings-side-export-meta {
+  font-size: 0.68rem;
+}
+
+.settings-export-links-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+}
+
+.settings-export-links-inline a {
+  font-size: 0.72rem;
+  color: #8fc8ff;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.settings-export-links-inline a:hover {
+  text-decoration: underline;
 }
 
 .settings-card--compact {
@@ -2863,84 +2869,6 @@ html[data-theme="light"] .settings-export-link {
   margin: 0 0 6px;
   line-height: 1.45;
 }
-.options-transfer-compact {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.options-transfer-block {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.options-transfer-head {
-  font-size: 0.72rem;
-  font-weight: 600;
-  color: #a8b0cc;
-  line-height: 1.3;
-}
-
-.options-transfer-line {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 5px;
-}
-
-.options-transfer-acct {
-  font-size: 0.68rem;
-  color: #8892b0;
-  white-space: nowrap;
-  padding: 0 2px;
-}
-
-.opt-set-chip-group {
-  display: inline-flex;
-  border: 1px solid var(--border-soft, #2a3150);
-  border-radius: 6px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.opt-set-chip {
-  border: none;
-  background: transparent;
-  color: #a8b0cc;
-  font-size: 0.68rem;
-  line-height: 1.2;
-  padding: 4px 7px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.opt-set-chip:hover {
-  background: rgba(143, 200, 255, 0.08);
-  color: #cfd3ef;
-}
-
-.opt-set-chip.active {
-  background: #1f3a5a;
-  color: #8fc8ff;
-}
-
-.opt-set-amount {
-  width: 72px;
-  min-width: 64px;
-  font-size: 0.72rem;
-  padding: 4px 6px;
-  min-height: 26px;
-}
-
-.options-swap-compact .options-settings-hint {
-  margin: 0 0 5px;
-}
-
-.options-swap-compact .options-transfer-line {
-  margin-bottom: 0;
-}
-
 .options-settings-msg {
   font-size: 0.68rem;
   margin-top: 2px;

lib/common/static/options_settings.js

@@ -16,31 +16,6 @@
     el.classList.toggle("opt-error", !!isErr);
   }
 
-  function wireChipGroup(id) {
-    const group = document.getElementById(id);
-    if (!group) return function () {
-      return null;
-    };
-    const chips = group.querySelectorAll(".opt-set-chip");
-    chips.forEach(function (chip) {
-      chip.addEventListener("click", function () {
-        chips.forEach(function (c) {
-          c.classList.remove("active");
-        });
-        chip.classList.add("active");
-      });
-    });
-    return function () {
-      return group.querySelector(".opt-set-chip.active");
-    };
-  }
-
-  const activeSwapDir = wireChipGroup("opt-set-swap-dir");
-  const activeIntDir = wireChipGroup("opt-set-int-dir");
-  const activeIntCcy = wireChipGroup("opt-set-int-ccy");
-  const activeCrossDir = wireChipGroup("opt-set-cross-dir");
-  const activeCrossCcy = wireChipGroup("opt-set-cross-ccy");
-
   const swapBtn = document.getElementById("opt-set-swap-btn");
   if (swapBtn) {
     swapBtn.addEventListener("click", async function () {
@@ -49,12 +24,11 @@
         setMsg("opt-set-swap-msg", "请输入有效数量", true);
         return;
       }
-      const dirChip = activeSwapDir();
       const d = await apiJson("/api/options/spot/swap", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          direction: (dirChip && dirChip.getAttribute("data-dir")) || "usdt_to_usdc",
+          direction: document.getElementById("opt-set-swap-dir").value,
           amount: amount,
         }),
       });
@@ -70,15 +44,13 @@
         setMsg("opt-set-int-msg", "请输入有效数量", true);
         return;
       }
-      const dirChip = activeIntDir();
-      const ccyChip = activeIntCcy();
       const d = await apiJson("/api/options/transfer", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          ccy: (ccyChip && ccyChip.getAttribute("data-ccy")) || "USDC",
-          from: (dirChip && dirChip.getAttribute("data-from")) || "funding",
-          to: (dirChip && dirChip.getAttribute("data-to")) || "trading",
+          ccy: document.getElementById("opt-set-int-ccy").value,
+          from: document.getElementById("opt-set-int-from").value,
+          to: document.getElementById("opt-set-int-to").value,
           amount: amount,
         }),
       });
@@ -94,17 +66,15 @@
         setMsg("opt-set-cross-msg", "请输入有效数量", true);
         return;
       }
-      const dirChip = activeCrossDir();
-      const ccyChip = activeCrossCcy();
       const d = await apiJson("/api/options/cross-transfer", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          ccy: (ccyChip && ccyChip.getAttribute("data-ccy")) || "USDT",
+          ccy: document.getElementById("opt-set-cross-ccy").value,
           amount: amount,
-          from_account: "funding",
-          to_account: "funding",
-          direction: (dirChip && dirChip.getAttribute("data-dir")) || "sub_to_main",
+          from_account: document.getElementById("opt-set-cross-from").value,
+          to_account: document.getElementById("opt-set-cross-to").value,
+          direction: document.getElementById("opt-set-cross-dir").value,
         }),
       });
       setMsg("opt-set-cross-msg", d.ok ? "划转成功" : (d.msg || "失败"), !d.ok);

lib/instance/templates/embed_shell.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
     <link rel="stylesheet" href="/static/instance_page.css?v=4">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=67">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=68">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">
     <title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>

lib/instance/templates/index.html

@@ -17,7 +17,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=1">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=67">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=68">
 
 </head>
 <body

lib/instance/templates/settings_panel.html

@@ -65,22 +65,21 @@
                     {% if instance_settings.show_transfer %}
                     <div class="card settings-subcard settings-subcard--ops">
                         <h3 class="settings-subcard-title">永续资金划转</h3>
-                        <p class="settings-card-desc settings-subcard-desc">子账户永续：资金账户与交易账户之间划转 USDT。</p>
+                        <p class="settings-subcard-desc">子账户永续：资金账户与交易账户之间划转 USDT。</p>
                         {% include 'instance_transfer_panel.html' %}
                     </div>
                     {% endif %}
 
-                    <div class="card settings-subcard settings-subcard--export">
-                        <h3 class="settings-subcard-title">数据导出</h3>
-                        <p class="settings-card-desc settings-subcard-desc">
-                            CSV · UTF-8 · v{{ instance_settings.data_export_version }}。
-                            交易记录含开仓类型列；复盘单独导出。
-                        </p>
-                        <div class="settings-link-list settings-link-list--export">
-                            <a class="settings-export-link" href="/export/trade_records">交易记录</a>
-                            <a class="settings-export-link" href="/export/journal_entries">复盘记录</a>
-                            <a class="settings-export-link" href="/export/key_monitors">关键位（当前）</a>
-                            <a class="settings-export-link" href="/export/key_monitor_history">关键位历史</a>
+                    <div class="settings-side-export">
+                        <div class="settings-side-export-head">
+                            <span class="settings-side-export-label">数据导出</span>
+                            <span class="settings-side-export-meta muted">CSV · v{{ instance_settings.data_export_version }}</span>
+                        </div>
+                        <div class="settings-export-links-inline">
+                            <a href="/export/trade_records">交易记录</a>
+                            <a href="/export/journal_entries">复盘记录</a>
+                            <a href="/export/key_monitors">关键位（当前）</a>
+                            <a href="/export/key_monitor_history">关键位历史</a>
                         </div>
                     </div>
                 </div>

lib/options/templates/options_settings_panel.html

@@ -1,4 +1,4 @@
 {# 期权设置脚本挂载点（卡片在 settings_panel 中拆分） #}
 <div id="options-settings-root" hidden
      data-sub-account="{{ instance_settings.options_sub_account | default('', true) }}"></div>
-<script src="/static/options_settings.js?v=4"></script>
+<script src="/static/options_settings.js?v=5"></script>

lib/options/templates/options_settings_swap.html

@@ -1,12 +1,12 @@
-<div class="options-settings-section options-swap-compact">
+<div class="options-settings-section">
     <p class="options-settings-hint">主账户资金账户：USDT ↔ USDC 现货市价单。</p>
-    <div class="options-transfer-line">
-        <div class="opt-set-chip-group" id="opt-set-swap-dir" role="group" aria-label="兑换方向">
-            <button type="button" class="opt-set-chip active" data-dir="usdt_to_usdc">USDT→USDC</button>
-            <button type="button" class="opt-set-chip" data-dir="usdc_to_usdt">USDC→USDT</button>
-        </div>
-        <input type="number" id="opt-set-swap-amount" class="opt-set-amount" min="0.01" step="0.01" placeholder="数量">
-        <button type="button" class="btn-primary btn-sm" id="opt-set-swap-btn">兑换</button>
+    <div class="form-row settings-transfer-form options-settings-row">
+        <select id="opt-set-swap-dir" aria-label="兑换方向">
+            <option value="usdt_to_usdc" selected>USDT → USDC</option>
+            <option value="usdc_to_usdt">USDC → USDT</option>
+        </select>
+        <input type="number" id="opt-set-swap-amount" min="0.01" step="0.01" placeholder="数量">
+        <button type="button" class="btn-primary btn-sm" id="opt-set-swap-btn">市价兑换</button>
     </div>
     <div id="opt-set-swap-msg" class="options-settings-msg muted"></div>
 </div>

lib/options/templates/options_settings_transfer.html

@@ -1,39 +1,48 @@
-<div class="options-transfer-compact">
-    <div class="options-transfer-block">
-        <div class="options-transfer-head">主账户内</div>
-        <div class="options-transfer-line">
-            <div class="opt-set-chip-group" id="opt-set-int-dir" role="group" aria-label="划转方向">
-                <button type="button" class="opt-set-chip active" data-from="funding" data-to="trading">资金→交易</button>
-                <button type="button" class="opt-set-chip" data-from="trading" data-to="funding">交易→资金</button>
-            </div>
-            <div class="opt-set-chip-group" id="opt-set-int-ccy" role="group" aria-label="币种">
-                <button type="button" class="opt-set-chip active" data-ccy="USDC">USDC</button>
-                <button type="button" class="opt-set-chip" data-ccy="USDT">USDT</button>
-            </div>
-            <input type="number" id="opt-set-int-amount" class="opt-set-amount" min="0.01" step="0.01" placeholder="数量">
-            <button type="button" class="btn-primary btn-sm" id="opt-set-int-btn">划转</button>
-        </div>
-        <div id="opt-set-int-msg" class="options-settings-msg muted"></div>
-    </div>
-
-    <div class="options-transfer-block">
-        <div class="options-transfer-head">
-            主子账户
-            <span class="muted">（{{ instance_settings.options_sub_account or '未配置' }}）</span>
-        </div>
-        <div class="options-transfer-line">
-            <div class="opt-set-chip-group" id="opt-set-cross-dir" role="group" aria-label="主子方向">
-                <button type="button" class="opt-set-chip active" data-dir="sub_to_main">子→主</button>
-                <button type="button" class="opt-set-chip" data-dir="main_to_sub">主→子</button>
-            </div>
-            <div class="opt-set-chip-group" id="opt-set-cross-ccy" role="group" aria-label="币种">
-                <button type="button" class="opt-set-chip active" data-ccy="USDT">USDT</button>
-                <button type="button" class="opt-set-chip" data-ccy="USDC">USDC</button>
-            </div>
-            <span class="options-transfer-acct">资金↔资金</span>
-            <input type="number" id="opt-set-cross-amount" class="opt-set-amount" min="0.01" step="0.01" placeholder="数量">
-            <button type="button" class="btn-primary btn-sm" id="opt-set-cross-btn">划转</button>
-        </div>
-        <div id="opt-set-cross-msg" class="options-settings-msg muted"></div>
+<div class="options-settings-section">
+    <div class="options-settings-subtitle">主账户内</div>
+    <div class="form-row settings-transfer-form options-settings-row">
+        <select id="opt-set-int-ccy" aria-label="币种">
+            <option value="USDC" selected>USDC</option>
+            <option value="USDT">USDT</option>
+        </select>
+        <select id="opt-set-int-from" aria-label="划出账户">
+            <option value="funding" selected>from: 资金</option>
+            <option value="trading">from: 交易</option>
+        </select>
+        <select id="opt-set-int-to" aria-label="划入账户">
+            <option value="trading" selected>to: 交易</option>
+            <option value="funding">to: 资金</option>
+        </select>
+        <input type="number" id="opt-set-int-amount" min="0.01" step="0.01" placeholder="数量">
+        <button type="button" class="btn-primary btn-sm" id="opt-set-int-btn">划转</button>
     </div>
+    <div id="opt-set-int-msg" class="options-settings-msg muted"></div>
+</div>
+
+<div class="options-settings-section">
+    <div class="options-settings-subtitle">
+        主子账户
+        <span class="muted">（{{ instance_settings.options_sub_account or '未配置' }}）</span>
+    </div>
+    <div class="form-row settings-transfer-form options-settings-row">
+        <select id="opt-set-cross-dir" aria-label="主子方向">
+            <option value="main_to_sub" selected>主 → 子</option>
+            <option value="sub_to_main">子 → 主</option>
+        </select>
+        <select id="opt-set-cross-ccy" aria-label="币种">
+            <option value="USDT" selected>USDT</option>
+            <option value="USDC">USDC</option>
+        </select>
+        <select id="opt-set-cross-from" aria-label="划出账户">
+            <option value="funding" selected>from: 资金</option>
+            <option value="trading">from: 交易</option>
+        </select>
+        <select id="opt-set-cross-to" aria-label="划入账户">
+            <option value="trading" selected>to: 交易</option>
+            <option value="funding">to: 资金</option>
+        </select>
+        <input type="number" id="opt-set-cross-amount" min="0.01" step="0.01" placeholder="数量">
+        <button type="button" class="btn-primary btn-sm" id="opt-set-cross-btn">划转</button>
+    </div>
+    <div id="opt-set-cross-msg" class="options-settings-msg muted"></div>
 </div>