feat(graph): 战斗节点显示战斗描述(类型+敌我)

战斗节点原本只显示胜/败两个出口、看不出打谁。现在在胜/败行上方加一行
'击倒/死斗 · [我方 vs] 敌方角色名'。描述使内容变高,故 .kind-fight .outputs
用 align-self:stretch + justify-content:flex-end 把胜/败两个黄点压到底部两行,
维持端口与出口行逐行对齐。
This commit is contained in:
2026-06-09 10:58:31 +08:00
parent 864688c0fc
commit f2ebbbd87a
2 changed files with 15 additions and 2 deletions

View File

@ -71,9 +71,18 @@
return label + '<div class="nbody"><div class="t">' + esc(node.summary || "") + '</div><div class="rw">' + esc(g) + '</div></div>';
}
const outs = getOutlets(node);
// 多出口(选择/随机/战斗):每出口一行(右对齐),是唯一流内容 → 垂直居中 → 与居中的黄点逐行平齐
// 多出口(选择/随机/战斗):每出口一行(右对齐)。战斗节点额外在出口行上方加一行战斗描述,
// 出口黄点靠 .kind-fight .outputs{justify-content:flex-end} 压到底部两行(胜/败)保持逐行平齐。
if (outs.length > 1) {
return label + '<div class="ch-opts">' + outs.map(o => '<div class="ch-opt" title="' + esc(o.label) + '">' + esc(o.label) + '</div>').join("") + '</div>';
let desc = "";
if (!end && node.kind === "fight") {
const ft = node.fight_type === 2 ? "死斗" : "击倒";
const foes = (node.camp2 || []).map(s => nameOf(ir, names, s)).join("、") || "未设敌方";
const allies = (node.camp1 || []).map(s => nameOf(ir, names, s)).join("、");
const full = ft + " · " + (allies ? (allies + " vs ") : "vs ") + foes;
desc = '<div class="fdesc" title="' + esc(full) + '">' + esc(full) + '</div>';
}
return label + desc + '<div class="ch-opts">' + outs.map(o => '<div class="ch-opt" title="' + esc(o.label) + '">' + esc(o.label) + '</div>').join("") + '</div>';
}
// 线性 / 单出口:角色(可选)+ 文本
const sm = summary(ir, names, node);

View File

@ -130,6 +130,10 @@ button.mini { padding:2px 8px; font-size:12px; }
.ch-opts { position:relative; top:2px; }
.ch-opt { height:25px; line-height:25px; text-align:right; font-size:12px; color:#dfe7f2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:3px; }
/* 战斗节点:出口行(胜/败)上方加一行战斗描述;描述使内容变高,故让两个出口黄点贴底部两行 */
.drawflow-node .fdesc { font-size:11.5px; color:#e6b8a0; text-align:center; margin-bottom:4px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#drawflow .kind-fight .outputs { align-self:stretch; justify-content:flex-end; }
/* ---- toast ---- */
#toast { position:fixed; left:50%; bottom:38px; transform:translateX(-50%) translateY(10px);