From 0f42fa13f13e235d10b7625ae760d6eb72251eff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E9=9B=A8=E9=B9=8F?= <846149189@qq.com>
Date: Tue, 9 Jun 2026 11:17:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(graph):=20=E6=88=98=E6=96=97=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=94=B9=E5=B7=A6=E5=8F=B3=E4=B8=A4=E6=A0=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=88=A9=E7=94=A8=E5=B7=A6=E4=BE=A7=E7=A9=BA=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原描述挤在顶部一行被截断、左下大块留白。改为两栏：左栏战斗描述占满左侧、
可换行、垂直居中；右栏胜/败出口行。.fbody align-items:flex-end + 出口列
justify-content:flex-end 保持黄点与胜/败行对齐。
---
 web/static/graph.js  | 7 ++++---
 web/static/style.css | 9 ++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/static/graph.js b/web/static/graph.js
index 96db943..662af3b 100644
--- a/web/static/graph.js
+++ b/web/static/graph.js
@@ -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);
diff --git a/web/static/style.css b/web/static/style.css
index 3d935b8..07659ca 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -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 ---- */