fix(web): 控件对齐与输入友好整改(控件高度令牌化 + 对齐自检脚本)
问题不是"不好看",而是**可测量的错位**:同一行里原生 date 输入 38.8px、数字输入
36.8px、按钮 34px;16px 的勾选框与 36.8px 的下拉同排;因子行的下拉与权重框没有
可见标签;列表里的勾选框点不中;参数非法时「运行回测」直接置灰且不说原因。
根因:控件高度靠「上下 padding + 行高」拼出来,而 input / select / button 的原生行高
各不相同(Chrome 的 date 还会多 2px),必然参差;加上各处内联像素宽度
(style={{width:220}}、flex:1)与自搓布局,列自然对不齐。
改动:
- 新增控件高度令牌 --ctl-h-sm/md/lg(28/34/38px)与 --ctl-px,.input/select/.btn/
.icon-btn/date 统一显式 height(不再拼 padding);原生 checkbox/radio 统一 16px,
点击热区交给外层 label(.check/.radio-row/.check--cell),表格整格可点
- 因子行、选股条件行改为「表头 + CSS 栅格」成列对齐,列宽由样式决定,
去掉内联像素宽度与 flex 拉伸,配 aria-label 供读屏分辨重复行
- 表单友好化:错误提示改为**失焦或提交后**才出现(清空重填的瞬间不再标红);
提交被拦下时一次展开全部行内错误 + 自动聚焦并滚动到第一个问题字段;
运行/保存按钮不再因参数非法而置灰(灰按钮不说原因 = 看起来不可点却无响应),
改为可点击并讲清原因;补齐 topN/costs 两处「产生了却没人显示」的行内错误落点
- 数值字段补 inputMode/step/min/max 与单位、取值范围提示;工具条检索/筛选用
.input--search/.input--filter/.input--picker 类,不再写内联宽度
- /experiments 筛选无结果的空态与「暂无实验」区分开(原文案会让人以为归档丢了)
- 同一页面可能挂两份表单:radio name 与 label/for 加表单实例前缀(useId),
否则两边单选互相取消、label 指错控件
- 新增 scripts/verify_ui_alignment.py:系统 Chrome + 原生 CDP(仅标准库,
独占随机端口与临时 profile),按 7 个页面 × 1500/375px 检查同排等高、
高度取值归一、点击目标、标签与无障碍名、字号圆角一致、尺寸匹配内容、
横向溢出、提示裁切;本次基线 108/32 → 现 140/140
验证:pytest 388 passed、ruff 全绿(顺带清掉 qlib_verify.py 一处死代码)、
tsc 0 错误、图表单测 7 passed、next build 成功、契约自检 59/59、
对齐自检 140/140(含 375px 小屏)。
This commit is contained in:
@@ -50,6 +50,8 @@ export default function StrategiesPage() {
|
||||
const [msg, setMsg] = useState("");
|
||||
const [editing, setEditing] = useState<StrategyParams | null>(null);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
// 保存被拦下过 → 立即展开全部校验错误(见 StrategyParamsFormProps.revealErrors)
|
||||
const [revealErrors, setRevealErrors] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [docId, setDocId] = useState<string | null>(null);
|
||||
|
||||
@@ -101,6 +103,7 @@ export default function StrategiesPage() {
|
||||
setDocId(null);
|
||||
setMsg("");
|
||||
setErr("");
|
||||
setRevealErrors(false);
|
||||
}
|
||||
|
||||
function startEdit(s: StrategyDefinition) {
|
||||
@@ -109,6 +112,7 @@ export default function StrategiesPage() {
|
||||
setDocId(s.id ?? null);
|
||||
setMsg("");
|
||||
setErr("");
|
||||
setRevealErrors(false);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
@@ -116,6 +120,7 @@ export default function StrategiesPage() {
|
||||
const errors = validateParams(editing, { requireMeta: true });
|
||||
if (Object.keys(errors).length) {
|
||||
setErr(Object.values(errors)[0]);
|
||||
setRevealErrors(true); // 一次把问题全列出来,而不是让用户逐个试
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
@@ -199,6 +204,7 @@ export default function StrategiesPage() {
|
||||
showPeriod={false}
|
||||
disabled={busy}
|
||||
errors={validateParams(editing, { requireMeta: true })}
|
||||
revealErrors={revealErrors}
|
||||
/>
|
||||
<div className="hint" style={{ marginTop: 10 }}>
|
||||
策略只保存「怎么选股/怎么调仓/怎么收费」,**不含回测区间与初始资金** ——
|
||||
@@ -234,8 +240,7 @@ export default function StrategiesPage() {
|
||||
title={`已保存策略${list ? ` · ${list.length}` : ""}`}
|
||||
tools={
|
||||
<input
|
||||
className="input"
|
||||
style={{ width: 220 }}
|
||||
className="input input--search"
|
||||
placeholder="搜索策略名 / 说明 / 因子 / 条件"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
|
||||
Reference in New Issue
Block a user