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:
+10
-4
@@ -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` 让整个单元可点。
|
||||
|
||||
Reference in New Issue
Block a user