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:
@@ -308,10 +308,13 @@ export function StrategyParamsForm({
|
||||
set({ factors: p.factors.map((f, j) => (j === i ? { ...f, ...patch } : f)) });
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="params-form">
|
||||
{showMeta && (
|
||||
<div className="form-grid">
|
||||
<Field label="策略名(必填)" hint="在策略库中唯一">
|
||||
/* 策略名(定宽)+ 一句话说明(占满剩余宽度、多行)并排:
|
||||
说明最长 300 字,塞进单行 input 必然截断(截图实测「例:全市场股息率最高的 2」
|
||||
就被切掉),所以这里用 textarea 并给足高度。 */
|
||||
<div className="params-meta">
|
||||
<Field label="策略名(必填)" hint="在策略库中唯一" className="params-meta__name">
|
||||
<input
|
||||
className="input"
|
||||
value={p.name}
|
||||
@@ -319,24 +322,28 @@ export function StrategyParamsForm({
|
||||
placeholder="例:高股息 6 月择股 · 低频"
|
||||
disabled={disabled}
|
||||
onChange={(e) => set({ name: e.target.value })}
|
||||
onBlur={blur("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
{showErr("name") && (
|
||||
<div className="field-err" role="alert">
|
||||
{errors.name}
|
||||
{showErr("name")}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
label="一句话说明(必填)"
|
||||
hint={`说清这个策略做什么、怎么选股(${p.description.length}/300,落库列宽上限)`}
|
||||
className="params-meta__desc"
|
||||
>
|
||||
<input
|
||||
className="input"
|
||||
<textarea
|
||||
className={`input${showErr("description") ? " input--invalid" : ""}`}
|
||||
rows={2}
|
||||
value={p.description}
|
||||
maxLength={300}
|
||||
placeholder="例:全市场股息率最高的 20 只,每 6 个月重新择股并等权持有"
|
||||
disabled={disabled}
|
||||
onChange={(e) => set({ description: e.target.value })}
|
||||
onBlur={blur("description")}
|
||||
/>
|
||||
{showErr("description") && (
|
||||
<div className="field-err" role="alert">
|
||||
@@ -557,7 +564,7 @@ export function StrategyParamsForm({
|
||||
disabled={disabled}
|
||||
onChange={(e) => set({ priceAdjustment: e.target.value as "none" | "qfq" | "hfq" })}
|
||||
>
|
||||
<option value="hfq">后复权 hfq(股息策略推荐)</option>
|
||||
<option value="hfq">后复权 hfq</option>
|
||||
<option value="qfq">前复权 qfq</option>
|
||||
<option value="none">不复权 none</option>
|
||||
</select>
|
||||
@@ -808,6 +815,6 @@ export function StrategyParamsForm({
|
||||
(财务按公告日 ≤ 择股日取用)。
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user