From b693af5ca28ffa028c6a7e17a33fde57b17b6cd1 Mon Sep 17 00:00:00 2001
From: GitHub <action@github.com>
Date: Tue, 1 Sep 2026 23:26:39 +0800
Subject: [PATCH] =?UTF-8?q?fix(web-ui):=20=E9=99=84=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E5=BC=80=E5=85=B3=E5=A4=8D=E9=80=89=E6=A1=86=E8=A2=AB?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=20input{width:100%}=20=E6=92=91=E6=BB=A1?=
 =?UTF-8?q?=E6=95=B4=E8=A1=8C=E5=AF=BC=E8=87=B4=E6=96=87=E5=AD=97=E6=8A=98?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：全局样式 input,select,textarea{width:100%}（style.css:75）把勾选框也撑满
整行（实测 156px），文字被挤到下一行、窗口数控件块状堆叠。修复：
- 复选框显式 width:auto 恢复原生 13px（.check-label input[type=checkbox]）
- 布局重写为单行 flex：勾选框+文字+窗口数同行，white-space:nowrap 不折行，
  显式覆盖全局 label{display:block} 与 margin
- 实机验证（Chrome CDP）：复选框 13px 靠左、两行均单行（行高 18-21px）、
  窗口数输入框 44px 同行跟排、区域零横向溢出
---
 web-ui/src/views/BacktestView.vue | 65 +++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/web-ui/src/views/BacktestView.vue b/web-ui/src/views/BacktestView.vue
index 6e041ec..931d54a 100644
--- a/web-ui/src/views/BacktestView.vue
+++ b/web-ui/src/views/BacktestView.vue
@@ -253,21 +253,28 @@ async function onSave() {
 
       <section class="panel-section">
         <h3>附加分析</h3>
-        <label class="check-row" title="把时间轴切 7 窗独立回测，检验跨时段稳定性（每窗独立开仓）">
-          <input v-model="wfEnabled" type="checkbox" />
-          Walk-Forward 样本外验证
-        </label>
-        <div v-if="wfEnabled" class="field wf-windows">
-          <label>窗口数</label>
-          <input v-model.number="wfWindows" type="number" min="2" max="12" step="1" />
+        <div class="check-row">
+          <label
+            class="check-label"
+            title="把时间轴切 7 窗独立回测，检验跨时段稳定性（每窗独立开仓）"
+          >
+            <input v-model="wfEnabled" type="checkbox" />
+            <span>Walk-Forward 样本外验证</span>
+          </label>
+          <span v-if="wfEnabled" class="wf-windows">
+            窗口数
+            <input v-model.number="wfWindows" type="number" min="2" max="12" step="1" />
+          </span>
+        </div>
+        <div class="check-row">
+          <label
+            class="check-label"
+            title="回测+WF+适配性体检+综合评分+买入持有基准对比，一份报告"
+          >
+            <input v-model="evaluateEnabled" type="checkbox" />
+            <span>一条龙评估</span>
+          </label>
         </div>
-        <label
-          class="check-row"
-          title="回测+WF+适配性体检+综合评分+买入持有基准对比，一份报告"
-        >
-          <input v-model="evaluateEnabled" type="checkbox" />
-          一条龙评估
-        </label>
         <p class="extra-hint">勾选后随「开始回测」自动附加运行</p>
       </section>
 
@@ -414,29 +421,45 @@ async function onSave() {
   color: var(--text-dim);
   font-size: 12px;
 }
-/* 附加分析开关 */
+/* 附加分析开关：勾选框靠左、文字单行不折行，窗口数同行跟排 */
 .check-row {
   display: flex;
   align-items: center;
+  flex-wrap: nowrap;
   gap: 6px;
+  margin-bottom: 8px;
+  min-width: 0;
+}
+.check-label {
+  display: inline-flex; /* 覆盖全局 label { display: block } */
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 0; /* 覆盖全局 label 的 margin-bottom: 4px */
   font-size: 12px;
   color: var(--text);
   cursor: pointer;
-  margin-bottom: 8px;
+  white-space: nowrap; /* 文字不折行 */
 }
-.check-row input {
+.check-label input[type='checkbox'] {
+  width: auto; /* 覆盖全局 input{width:100%}——复选框被撑满整行才是折行根因 */
+  flex-shrink: 0;
+  margin: 0;
   accent-color: var(--accent, #4a9eff);
 }
 .wf-windows {
-  margin: -2px 0 8px 20px;
-  max-width: 110px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
 }
 .wf-windows input {
-  width: 100%;
+  width: 44px;
+  padding: 3px 6px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 5px 8px;
   font-size: 12px;
   color: var(--text);
 }