feat(web): 字段库页 + 界面单位换算 + 因子目录参数化 + 选股策略条件表单
字段库与单位： - `/fields`：字段库管理页（中文名/说明可改、可停用；kind 是引擎事实不可改）； 单位只在字段自己的阶梯里选（总市值 = 万元/亿元），越界 422 原样展示。 - `lib/units.ts`：界面单位 ⇄ 基准单位换算集中一处，条件输入按界面单位回显、 提交前换回基准单位（引擎只认基准单位，库里存的也永远是基准单位）。 - `SelectionStrategyForm` 取代 `StrategyParamsForm`：一个策略只定义「怎么选」 （股票池 + 因子 + 过滤条件），条件字段来自字段库接口而不是前端硬编码枚举。 因子参数化（名字即身份，界面不许藏）： - `/factors` 新增「参数」列与展开行：精确引擎键、每个参数的允许范围、来源、依赖列 （依赖列标明「引擎事实，不可改」）；说明文案从「不可修改」改为 「改参数 = 新建参数化因子 = 新身份，旧因子/既有策略不变义」。 - 「新建参数化因子」卡片：模板下拉 + 受控窗口（min/max）+ 方向枚举下拉， 实时预览规范键/中文名/渲染公式；后端 422 的原文原样展示，不静默截断。 - 因子下拉显示中文名（含参数）与短键，**value 一律是完整引擎键**； 停用的因子从各页候选里消失（/strategies、/selection、/signals、/factors/compose）， 既有策略/归档仍按名字解析；`/factors/compose` 顺手修了勾选框点击目标过小。 - `/fields` 加提示：字段库只列内置因子名，参数化因子在 /factors 管理， 选股策略条件下拉里会一并出现。 tsc --noEmit 0 error；verify_ui_alignment 8 页 160 项全过（另跑 3 个选因子页 51/54）。
This commit is contained in:
Simon
@@ -708,11 +708,13 @@ input[type="date"].input {
|
||||
.factor-row {
|
||||
display: grid;
|
||||
/* 因子名列封顶 460px：再宽就是「momentum_60」配 1500px 下拉的失调（截图实测）。
|
||||
权重列固定，操作列按内容。整行也限宽，避免在宽屏上拉成一条长线。 */
|
||||
权重列固定，操作列按内容。整行也限宽，避免在宽屏上拉成一条长线。
|
||||
start 对齐：因子列比别列高（下拉 + 口径/方向/简介两行说明），
|
||||
居中会让权重框浮在说明旁边显得没对齐。 */
|
||||
grid-template-columns: minmax(150px, 460px) 118px auto;
|
||||
align-items: center;
|
||||
align-items: start;
|
||||
gap: var(--sp-2);
|
||||
max-width: 720px;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.factor-rows__head {
|
||||
@@ -731,17 +733,69 @@ input[type="date"].input {
|
||||
.cond-rows {
|
||||
display: grid;
|
||||
gap: var(--sp-2);
|
||||
max-width: 760px;
|
||||
max-width: 940px;
|
||||
}
|
||||
|
||||
.cond-rows__head,
|
||||
.cond-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 360px) 84px minmax(96px, 160px) auto;
|
||||
align-items: center;
|
||||
grid-template-columns: minmax(150px, 260px) 84px 110px minmax(120px, 190px) auto;
|
||||
align-items: start;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
/* 单元格：下拉 + 该选项的口径说明（因子行与条件行共用 —— 选了就能看到含义，
|
||||
不用切到「字段库」/「因子研究」页去查） */
|
||||
.cell-stack {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.cell-hint {
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 取值单元格：输入框 + 右侧的**界面单位**后缀。存储值一律是基准单位，这里显示的是
|
||||
字段库选的界面单位（如「亿元」），提交时按系数换算 —— 所以后缀必须始终可见，
|
||||
否则用户会把「5 亿元」当成「5 万元」来读。 */
|
||||
.unit-input {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.unit-suffix {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 因子 vs 条件 的关系说明卡（表单内固定展示） */
|
||||
.relation-note {
|
||||
margin-top: 14px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-2);
|
||||
background: var(--surface-2, transparent);
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.relation-note__title {
|
||||
font-weight: 600;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.relation-note__flow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cond-rows__head {
|
||||
color: var(--text-3);
|
||||
font-size: var(--fs-xs);
|
||||
@@ -2026,3 +2080,108 @@ button.chip:hover {
|
||||
background: var(--bg-2);
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
/* ---------- 回测组合：选股策略多选卡片 ---------- */
|
||||
.strategy-pick {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.strategy-pick__item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas:
|
||||
"check name"
|
||||
"check meta"
|
||||
"desc desc"
|
||||
"factors factors";
|
||||
gap: 2px var(--sp-2);
|
||||
align-items: center;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--surface-2);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.strategy-pick__item:hover {
|
||||
border-color: rgba(150, 165, 195, 0.42);
|
||||
}
|
||||
|
||||
.strategy-pick__item.is-on {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.strategy-pick__item input[type="checkbox"] {
|
||||
grid-area: check;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.strategy-pick__name {
|
||||
grid-area: name;
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.strategy-pick__meta {
|
||||
grid-area: meta;
|
||||
color: var(--text-3);
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
.strategy-pick__desc {
|
||||
grid-area: desc;
|
||||
color: var(--text-2);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.strategy-pick__factors {
|
||||
grid-area: factors;
|
||||
color: var(--violet);
|
||||
font-size: var(--fs-xs);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ---------- 回测组合：已保存组合库 ---------- */
|
||||
/* 单列纵向列表（每行「摘要 + 操作」），与选股策略卡的网格区分：
|
||||
组合条目信息更密（参数 chip + 说明 + 三个动作），横排比网格更好扫读。 */
|
||||
.combo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.combo-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-3);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--surface-2);
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.combo-item:hover {
|
||||
border-color: rgba(150, 165, 195, 0.42);
|
||||
}
|
||||
|
||||
/* 当前载入的组合：与 .strategy-pick__item.is-on 同一视觉语言（强调色描边） */
|
||||
.combo-item.is-on {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.combo-item__main {
|
||||
min-width: 0;
|
||||
flex: 1 1 320px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user