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 = "" + s + "s"; + const t = document.createElement("div"); t.className = "se-tick"; t.style.left = (s * PX + LABEL_W) + "px"; t.innerHTML = "" + s + "s"; 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 = '' + esc(who) + '' + '' + ''; 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;