Merge pull request #94 from QuantStrategyLab/fix/console-layout-restore

Restore strategy switch console layout

Author: Pigbibi

tests/strategy_switch_worker_validation.mjs

@@ -45,9 +45,9 @@ assert.ok(indexHtml.includes('qmt: { label: "QMT"'));
 assert.ok(indexHtml.includes('cn_industry_etf_rotation'));
 assert.ok(indexHtml.includes('id="income-layer-section"'));
 assert.ok(indexHtml.includes('id="option-overlay-section"'));
-assert.ok(indexHtml.includes('id="margin-policy-card"'));
-assert.ok(indexHtml.includes('id="reserve-policy-card"'));
-assert.ok(indexHtml.includes('class="policy-card"'));
+assert.ok(indexHtml.includes('id="reserve-policy-stack"'));
+assert.ok(indexHtml.includes('class="reserve-policy-stack"'));
+assert.equal(indexHtml.match(/class="form-section dca-section"/g)?.length, 1);
 assert.ok(indexHtml.includes('qmtDryRunOnlyNote'));
 assert.ok(indexHtml.includes('cashOnlyExecutionMode: "允许融资"'));
 assert.ok(indexHtml.includes('cashOnlyExecutionValueYes: "允许融资：是"'));

web/strategy-switch-console/index.html

@@ -319,25 +319,15 @@
     }
 
     .execution-cash-policy-section {
-      gap: 12px 14px;
+      grid-template-columns: 1fr;
     }
 
-    .form-section-head {
+    .execution-cash-policy-heading {
       grid-column: 1 / -1;
       margin: 0;
-      font-size: 12px;
-      line-height: 1.3;
+      font-size: 13px;
       font-weight: 780;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      color: var(--muted);
-    }
-
-    .execution-cash-policy-heading {
       color: var(--ink);
-      font-size: 13px;
-      letter-spacing: 0.03em;
-      text-transform: none;
     }
 
     .execution-cash-policy-note {
@@ -353,45 +343,19 @@
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 14px;
-      align-items: stretch;
+      align-items: start;
     }
 
-    .policy-card {
+    .reserve-policy-stack {
       display: grid;
-      gap: 12px;
+      gap: 14px;
       min-width: 0;
-      padding: 14px 14px 12px;
-      border: 1px solid var(--line);
-      border-radius: 10px;
-      background:
-        linear-gradient(180deg, color-mix(in srgb, var(--platform-color, var(--accent)) 4%, #ffffff), #ffffff 72%);
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
     }
 
-    .policy-card-title {
-      margin: 0;
-      font-size: 13px;
-      line-height: 1.35;
-      font-weight: 780;
-      color: var(--ink);
-    }
-
-    .policy-card .control-block {
-      grid-template-rows: auto 48px minmax(18px, auto);
-    }
-
-    .policy-card .control-block > span:first-child:not(.selection-meta) {
-      display: none;
-    }
-
-    .policy-card.policy-card-muted {
+    .reserve-policy-stack.policy-stack-muted {
       opacity: 0.58;
     }
 
-    .policy-card.policy-card-muted .selection-meta {
-      color: var(--danger);
-    }
-
     .policy-block-muted .selection-meta {
       color: var(--danger);
     }
@@ -498,7 +462,7 @@
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       align-items: start;
-      gap: 18px 14px;
+      gap: 16px 14px;
     }
 
     .control-block {
@@ -521,8 +485,7 @@
     }
 
     .form-section + .form-section {
-      padding-top: 18px;
-      margin-top: 2px;
+      padding-top: 16px;
       border-top: 1px solid var(--line);
     }
 
@@ -1205,7 +1168,7 @@
       background: transparent;
     }
 
-    @media (max-width: 980px) {
+    @media (max-width: 820px) {
       .platform-strip {
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
@@ -1393,7 +1356,6 @@ <h2 id="platform-title">LongBridge</h2>
           </div>
 
           <div class="form-section runtime-section">
-            <h3 class="form-section-head" data-i18n="runtimeSectionTitle">运行与插件</h3>
             <label class="control-block account-status-block">
               <span data-i18n="runtimeTargetMode">账号运行状态</span>
               <select id="runtime-target-enabled-select"></select>
@@ -1414,7 +1376,6 @@ <h3 class="form-section-head" data-i18n="runtimeSectionTitle">运行与插件</h
           </div>
 
           <div class="form-section income-layer-section" id="income-layer-section">
-            <h3 class="form-section-head" data-i18n="incomeLayerSectionTitle">收入层</h3>
             <label class="control-block income-layer-mode-block section-wide">
               <span data-i18n="incomeLayerMode">收入层状态</span>
               <select id="income-layer-mode-select"></select>
@@ -1435,7 +1396,6 @@ <h3 class="form-section-head" data-i18n="incomeLayerSectionTitle">收入层</h3>
           </div>
 
           <div class="form-section option-overlay-section" id="option-overlay-section">
-            <h3 class="form-section-head" data-i18n="optionOverlaySectionTitle">期权层</h3>
             <label class="control-block option-overlay-mode-block section-wide">
               <span data-i18n="optionOverlayMode">期权层状态</span>
               <select id="option-overlay-mode-select"></select>
@@ -1444,21 +1404,17 @@ <h3 class="form-section-head" data-i18n="optionOverlaySectionTitle">期权层</h
           </div>
 
           <div class="form-section execution-cash-policy-section" id="execution-cash-policy-section">
-            <h3 class="form-section-head execution-cash-policy-heading" data-i18n="executionCashPolicyTitle">现金与融资</h3>
+            <h3 class="execution-cash-policy-heading" data-i18n="executionCashPolicyTitle">现金与融资</h3>
             <p class="execution-cash-policy-note" id="execution-cash-policy-note" data-i18n="executionCashPolicyNote">允许融资与预留现金覆盖不能同时生效。</p>
             <p class="execution-cash-policy-note qmt-platform-cash-note" id="qmt-platform-cash-note" hidden data-i18n="qmtPlatformCashNote">A 股 QMT 不使用 margin / 平台预留现金；现金约束在策略参数 execution_cash_reserve_ratio 内配置。</p>
             <div class="execution-cash-policy-grid" id="execution-cash-policy-grid">
-              <div class="policy-card" id="margin-policy-card">
-                <p class="policy-card-title" data-i18n="cashOnlyExecutionMode">允许融资</p>
-                <label class="control-block cash-only-mode-block policy-block" id="cash-only-policy-block">
-                  <span data-i18n="cashOnlyExecutionMode">允许融资</span>
-                  <select id="cash-only-execution-mode-select"></select>
-                  <span class="selection-meta" id="cash-only-execution-mode-meta"></span>
-                </label>
-              </div>
+              <label class="control-block cash-only-mode-block policy-block" id="cash-only-policy-block">
+                <span data-i18n="cashOnlyExecutionMode">允许融资</span>
+                <select id="cash-only-execution-mode-select"></select>
+                <span class="selection-meta" id="cash-only-execution-mode-meta"></span>
+              </label>
 
-              <div class="policy-card" id="reserve-policy-card">
-                <p class="policy-card-title" data-i18n="reservedCashMode">预留现金策略</p>
+              <div class="reserve-policy-stack" id="reserve-policy-stack">
                 <label class="control-block reserve-policy-block policy-block" id="reserve-policy-block">
                   <span data-i18n="reservedCashMode">预留现金策略</span>
                   <select id="reserve-policy-mode-select"></select>
@@ -1481,7 +1437,6 @@ <h3 class="form-section-head execution-cash-policy-heading" data-i18n="execution
           </div>
 
           <div class="form-section dca-section">
-            <h3 class="form-section-head" data-i18n="dcaSectionTitle">定投</h3>
             <label class="control-block dca-mode-block">
               <span data-i18n="dcaMode">定投模式</span>
               <select id="dca-mode-select"></select>
@@ -1494,8 +1449,6 @@ <h3 class="form-section-head" data-i18n="dcaSectionTitle">定投</h3>
               <span class="selection-meta" id="dca-base-meta"></span>
             </label>
           </div>
-
-          <div class="form-section dca-section">
         </div>
 
         <div class="run-area" id="run-area">
@@ -3724,7 +3677,7 @@ <h2 data-i18n="summary">切换摘要</h2>
         el("reserve-policy-block").classList.toggle("policy-block-muted", marginBlocksReserve);
         el("min-reserve-block").classList.toggle("policy-block-muted", marginBlocksReserve);
         el("reserve-ratio-block").classList.toggle("policy-block-muted", marginBlocksReserve);
-        el("reserve-policy-card").classList.toggle("policy-card-muted", marginBlocksReserve);
+        el("reserve-policy-stack").classList.toggle("policy-stack-muted", marginBlocksReserve);
         el("reserve-policy-mode-meta").textContent = marginBlocksReserve
           ? t("executionCashMarginBlocksReserve")
           : t("reservedCashModeMeta");
@@ -3783,7 +3736,6 @@ <h2 data-i18n="summary">切换摘要</h2>
           cashOnlyExecutionModeSelect.append(option);
         }
         el("cash-only-policy-block").classList.toggle("policy-block-muted", reserveBlocksMargin);
-        el("margin-policy-card").classList.toggle("policy-card-muted", reserveBlocksMargin);
         el("cash-only-execution-mode-meta").textContent = reserveBlocksMargin
           ? t("executionCashReserveBlocksMargin")
           : t("cashOnlyExecutionModeMeta");