fix(scene-edit): 轨道标签竖排截断——加宽标签列 54→96px + 名字单行省略号

中文 actor 名(神秘剑客/客栈小二)被挤成竖排单字、与 +/✕ 按钮抢宽换行。
- 标签列宽 54→96px,引入 LABEL_W 常量统一 clip/标尺左偏移与 CSS 宽度
- 名字包进 .se-lname:flex:1 + nowrap + 省略号;按钮 flex:none 不参与换行
This commit is contained in:
2026-06-13 22:50:05 +08:00
parent 021080dd56
commit 030f1ee34d
2 changed files with 10 additions and 8 deletions

View File

@ -4,7 +4,7 @@
// 时长口径复用 window.Timeline._clipDur与播放/校验单一来源)。 // 时长口径复用 window.Timeline._clipDur与播放/校验单一来源)。
// 暴露 window.SceneEdit = { open(sceneId, ir, ctx, pointsets, dict) }。 // 暴露 window.SceneEdit = { open(sceneId, ir, ctx, pointsets, dict) }。
(function () { (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 ir, ctx, dict, pointsets, sceneId, posMap = {}, sel = null;
let root = null, lanesEl = null, propEl = null, lintEl = null, previewEl = null, rulerWrapEl = 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; } const sc = scene(); if (!sc) { close(); return; }
if (!sc.tracks) sc.tracks = []; if (!sc.tracks) sc.tracks = [];
const froms = moveFroms(sc), total = sceneEnd(sc, froms); 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" : ""); root.querySelector(".se-total").textContent = "总时长 ≈ " + round1(total) + "s" + (sc.duration ? "(显式 " + sc.duration + "s" : "");
// 标尺 // 标尺
rulerWrapEl.innerHTML = ""; rulerWrapEl.style.width = W + "px"; rulerWrapEl.innerHTML = ""; rulerWrapEl.style.width = W + "px";
for (let s = 0; s <= Math.ceil(total) + 1; s++) { 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); rulerWrapEl.appendChild(t);
} }
@ -105,7 +105,8 @@
const lane = document.createElement("div"); lane.className = "se-lane"; lane.style.height = LANE_H + "px"; const lane = document.createElement("div"); lane.className = "se-lane"; lane.style.height = LANE_H + "px";
const isCam = tk.role === "camera"; const isCam = tk.role === "camera";
const label = document.createElement("div"); label.className = "se-lane-label"; 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-addclip" title="加 clip"></button>' +
'<button class="se-deltrack" title="删轨道">✕</button>'; '<button class="se-deltrack" title="删轨道">✕</button>';
label.querySelector(".se-addclip").onclick = e => { e.stopPropagation(); addClip(ti); }; label.querySelector(".se-addclip").onclick = e => { e.stopPropagation(); addClip(ti); };
@ -122,7 +123,7 @@
function clipEl(tk, ti, c, ci, froms) { function clipEl(tk, ti, c, ci, froms) {
const dur = durOf(c, froms), el = document.createElement("div"); 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.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.style.width = Math.max(14, dur * PX - 2) + "px";
el.textContent = clipLabel(c); el.textContent = clipLabel(c);
el.title = clipLabel(c) + "start " + round1(c.start || 0) + "s · " + round1(dur) + "s" + (c.dur ? " 显式" : " 自动") + ""; el.title = clipLabel(c) + "start " + round1(c.start || 0) + "s · " + round1(dur) + "s" + (c.dur ? " 显式" : " 自动") + "";

View File

@ -346,10 +346,11 @@ body.perform-mode .mode-switch { border-color:#2f7a60; }
.se-tick span { font-size:9px; color:#6a6256; padding-left:3px; } .se-tick span { font-size:9px; color:#6a6256; padding-left:3px; }
.se-lanes { position:relative; min-width:100%; } .se-lanes { position:relative; min-width:100%; }
.se-lane { position:relative; border-bottom:1px solid #211c15; } .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; .se-lane-label { position:sticky; left:0; z-index:5; display:flex; align-items:center; gap:2px;
width:54px; height:100%; background:#1d1810; color:#d8cda0; font-size:11px; padding:0 3px; width:96px; height:100%; background:#1d1810; color:#d8cda0; font-size:11px; padding:0 4px;
border-right:1px solid #2a2419; box-sizing:border-box; } 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-addclip:hover { color:#7ee3c8; }
.se-lane-label .se-deltrack:hover { color:#e38f7e; } .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; .se-clip { position:absolute; top:5px; height:24px; line-height:24px; padding:0 6px; border-radius:4px;