From 030f1ee34d3d0adc45f65fdd7ad452d07bcf53fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E9=9B=A8=E9=B9=8F?= <846149189@qq.com>
Date: Sat, 13 Jun 2026 22:50:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(scene-edit):=20=E8=BD=A8=E9=81=93=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E7=AB=96=E6=8E=92=E6=88=AA=E6=96=AD=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E5=8A=A0=E5=AE=BD=E6=A0=87=E7=AD=BE=E5=88=97=2054=E2=86=9296px?=
 =?UTF-8?q?=20+=20=E5=90=8D=E5=AD=97=E5=8D=95=E8=A1=8C=E7=9C=81=E7=95=A5?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文 actor 名(神秘剑客/客栈小二)被挤成竖排单字、与 ＋/✕ 按钮抢宽换行。
- 标签列宽 54→96px，引入 LABEL_W 常量统一 clip/标尺左偏移与 CSS 宽度
- 名字包进 .se-lname：flex:1 + nowrap + 省略号；按钮 flex:none 不参与换行
---
 web/static/scene_edit.js | 11 ++++++-----
 web/static/style.css     |  7 ++++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/static/scene_edit.js b/web/static/scene_edit.js
index 97d57a8..724ce8a 100644
--- a/web/static/scene_edit.js
+++ b/web/static/scene_edit.js
@@ -4,7 +4,7 @@
 // 时长口径复用 window.Timeline._clipDur（与播放/校验单一来源）。
 // 暴露 window.SceneEdit = { open(sceneId, ir, ctx, pointsets, dict) }。
 (function () {
-  const PX = 90, LANE_H = 34, GRID = 0.1, MIN_DUR = 0.2;
+  const PX = 90, LANE_H = 34, GRID = 0.1, MIN_DUR = 0.2, LABEL_W = 96;   // LABEL_W 须与 .se-lane-label 宽一致
   let ir, ctx, dict, pointsets, sceneId, posMap = {}, sel = null;
   let root = null, lanesEl = null, propEl = null, lintEl = null, previewEl = null, rulerWrapEl = null;
 
@@ -89,13 +89,13 @@
     const sc = scene(); if (!sc) { close(); return; }
     if (!sc.tracks) sc.tracks = [];
     const froms = moveFroms(sc), total = sceneEnd(sc, froms);
-    const W = Math.max(total, 4) * PX + 60;
+    const W = Math.max(total, 4) * PX + LABEL_W + 40;
     root.querySelector(".se-total").textContent = "总时长 ≈ " + round1(total) + "s" + (sc.duration ? "（显式 " + sc.duration + "s）" : "");
 
     // 标尺
     rulerWrapEl.innerHTML = ""; rulerWrapEl.style.width = W + "px";
     for (let s = 0; s <= Math.ceil(total) + 1; s++) {
-      const t = document.createElement("div"); t.className = "se-tick"; t.style.left = (s * PX + 56) + "px"; t.innerHTML = "<span>" + s + "s</span>";
+      const t = document.createElement("div"); t.className = "se-tick"; t.style.left = (s * PX + LABEL_W) + "px"; t.innerHTML = "<span>" + s + "s</span>";
       rulerWrapEl.appendChild(t);
     }
 
@@ -105,7 +105,8 @@
       const lane = document.createElement("div"); lane.className = "se-lane"; lane.style.height = LANE_H + "px";
       const isCam = tk.role === "camera";
       const label = document.createElement("div"); label.className = "se-lane-label";
-      label.innerHTML = (isCam ? "🎬 镜头" : esc(actorName(tk.actor || "P1"))) +
+      const who = isCam ? "🎬 镜头" : actorName(tk.actor || "P1");
+      label.innerHTML = '<span class="se-lname" title="' + esc(who) + '">' + esc(who) + '</span>' +
         '<button class="se-addclip" title="加 clip">＋</button>' +
         '<button class="se-deltrack" title="删轨道">✕</button>';
       label.querySelector(".se-addclip").onclick = e => { e.stopPropagation(); addClip(ti); };
@@ -122,7 +123,7 @@
   function clipEl(tk, ti, c, ci, froms) {
     const dur = durOf(c, froms), el = document.createElement("div");
     el.className = "se-clip k-" + (c.kind === "narration" ? "dialogue" : c.kind) + (sel && sel.ti === ti && sel.ci === ci ? " sel" : "");
-    el.style.left = ((c.start || 0) * PX + 56) + "px";
+    el.style.left = ((c.start || 0) * PX + LABEL_W) + "px";
     el.style.width = Math.max(14, dur * PX - 2) + "px";
     el.textContent = clipLabel(c);
     el.title = clipLabel(c) + "（start " + round1(c.start || 0) + "s · " + round1(dur) + "s" + (c.dur ? " 显式" : " 自动") + "）";
diff --git a/web/static/style.css b/web/static/style.css
index 3be4515..b55bd56 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -346,10 +346,11 @@ body.perform-mode .mode-switch { border-color:#2f7a60; }
 .se-tick span { font-size:9px; color:#6a6256; padding-left:3px; }
 .se-lanes { position:relative; min-width:100%; }
 .se-lane { position:relative; border-bottom:1px solid #211c15; }
-.se-lane-label { position:sticky; left:0; z-index:5; display:inline-flex; align-items:center; gap:3px;
-                 width:54px; height:100%; background:#1d1810; color:#d8cda0; font-size:11px; padding:0 3px;
+.se-lane-label { position:sticky; left:0; z-index:5; display:flex; align-items:center; gap:2px;
+                 width:96px; height:100%; background:#1d1810; color:#d8cda0; font-size:11px; padding:0 4px;
                  border-right:1px solid #2a2419; box-sizing:border-box; }
-.se-lane-label button { background:none; border:none; color:#9a8f78; cursor:pointer; font-size:11px; padding:0 1px; }
+.se-lane-label .se-lname { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.se-lane-label button { flex:none; background:none; border:none; color:#9a8f78; cursor:pointer; font-size:12px; padding:0 1px; line-height:1; }
 .se-lane-label .se-addclip:hover { color:#7ee3c8; }
 .se-lane-label .se-deltrack:hover { color:#e38f7e; }
 .se-clip { position:absolute; top:5px; height:24px; line-height:24px; padding:0 6px; border-radius:4px;