bia/story-edit-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(graph): 战斗节点改左右两栏，利用左侧空间

Browse Source 
原描述挤在顶部一行被截断、左下大块留白。改为两栏：左栏战斗描述占满左侧、
可换行、垂直居中；右栏胜/败出口行。.fbody align-items:flex-end + 出口列
justify-content:flex-end 保持黄点与胜/败行对齐。
This commit is contained in:
邓雨鹏
2026-06-09 11:17:31 +08:00
parent f2ebbbd87a
commit 0f42fa13f1
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/static/graph.js
View File

@ -74,15 +74,16 @@
// 多出口（选择/随机/战斗）：每出口一行（右对齐）。战斗节点额外在出口行上方加一行战斗描述，
// 出口黄点靠 .kind-fight .outputs{justify-content:flex-end} 压到底部两行(胜/败)保持逐行平齐。
if (outs.length > 1) {
let desc = "";
const chOpts = '<div class="ch-opts">' + outs.map(o => '<div class="ch-opt" title="' + esc(o.label) + '">' + esc(o.label) + '</div>').join("") + '</div>';
// 战斗：左栏战斗描述（占满左侧、可换行）+ 右栏胜/败出口行
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 + '<div class="fbody"><div class="fdesc" title="' + esc(full) + '">' + esc(full) + '</div>' + chOpts + '</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>';
return label + chOpts;
}
// 线性 / 单出口：角色（可选）+ 文本
const sm = summary(ir, names, node);

9
web/static/style.css
View File

@ -130,9 +130,12 @@ 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-node .fbody { display:flex; align-items:flex-end; gap:10px; }
.drawflow-node .fbody .fdesc { flex:1; min-width:0; align-self:center; font-size:12px;
color:#e6b8a0; line-height:1.45; text-align:left; word-break:break-all; }
.drawflow-node .fbody .ch-opts { flex:none; }
/* 描述使内容变高，故让胜/败两个黄点贴底部两行，与右栏出口行逐行对齐 */
#drawflow .kind-fight .outputs { align-self:stretch; justify-content:flex-end; }
/* ---- toast ---- */