fix(web): 参数表单收束 + 一句话说明改多行(按截图实测修两处失调)

用户给了真实截图,指出两处肉眼可见的不协调,逐项定位后修复:

1. 「一句话说明」是单行 input 被塞进 ~360px 的格子,placeholder
   「例:全市场股息率最高的 2」直接截断 —— 内容太多、框太小。
   → 改为整宽多行 <textarea>(rows=2、min-height 64px、可纵向拉伸),
     与定宽 340px 的策略名并排(.params-meta flex),窄屏自动上下堆叠;
     实时字数 (N/300) 已在提示里。

2. 「太多地方没有对齐」的根因:表单铺满 ~1900px 内容区,5 列各 ~360px,
   控件拉得太开;因子下拉用 1fr 撑到 ~1500px 而权重框才 118px,比例失调;
   数字输入还有 max-width:180px 上限,比同行下拉窄一截。
   → .params-form 约束到 ~1100px(每列 ~210px,所有控件按 1fr 等宽,
     左右边缘严格对齐);移除已多余的 max-width:180px(限宽后它反而
     制造新的不等宽),数值/日期改为填满单元格;因子行首列封顶 460px、
     整行限宽 720px,条件行同理(首列 ≤360px、限宽 760px);
     复权口径选项去掉括号里的「股息策略推荐」(已在 hint 说明),不再截断。

验证方式也升级了:这次是**截图后用 read_image 看渲染像素**确认,而不只量几何。
对齐自检同步把 textarea(高度随行数变、本就该比单行高)排除出「同排等高 /
高度归一」比较,并把数字过宽阈值调到 240px(限宽后 ~210px 属正常)。

门禁:tsc 0 错误、图表单测 7/7、next build 成功、页面 200、
对齐自检 140/140、契约自检 59/59;/backtest 与 /strategies 截图复核通过。
This commit is contained in:
Simon
2026-09-30 19:56:40 +08:00
parent d1287799f7
commit 50a1030afa
4 changed files with 91 additions and 21 deletions
+10 -4
View File
@@ -456,10 +456,16 @@ cd backend && PYTHONPATH=. .venv/bin/python ../scripts/verify_strategy_workspace
`height`,而不是靠上下 padding 拼高度 —— 后者会得到 34 / 36.8 / 38.8 三种结果
(Chrome 的原生 `date` 输入还会多 2px),同一行就肉眼可见地参差。
**② 尺寸与内容匹配**:数值/日期输入不拉满整行(`.form-grid` 下 `max-width:180px`);
选项文案长的选择器给更宽的类(`.input--picker`);工具条检索/筛选用
`.input--search` / `.input--filter`,**不在 JSX 里写内联像素宽度**;重复行(因子、条件)
用"表头 + CSS 栅格"成列对齐,列宽由样式表决定。
**② 尺寸与内容匹配 + 整体收束**:参数表单用 `.params-form` 约束到 **~1100px**
(否则在宽屏上铺满 ~1900px、5 列各 ~360px,控件拉得太开且数字框与下拉宽度不一);
限宽后数值/日期输入直接**填满单元格**,与同行下拉等宽 → 左右边缘严格对齐
(早先在未限宽时用 `max-width:180px` 防数字框过宽,限宽后该上限反而让数字框比
相邻下拉窄一截,故移除)。多行文本(如「一句话说明」,最长 300 字)用
**整宽 `<textarea>`** 而非单行 input —— 单行框必然截断长文案(截图实测
「例:全市场股息率最高的 2」被切掉)。选项文案长的选择器给更宽的类
(`.input--picker`);工具条检索/筛选用 `.input--search` / `.input--filter`,
**不在 JSX 里写内联像素宽度**;重复行(因子、条件)用"表头 + CSS 栅格"成列对齐
且**首列封顶**(因子名 ≤460px),避免一个下拉撑满整行。
**③ 点击目标**:控件 ≥28px;16px 的勾选框/单选按钮由外层 `label`(`.check` / `.radio-row`)
撑开热区,表格里的勾选框用 `.check--cell` 让整个单元可点。