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

feat(timeline): 交互式分支演出 + 从任意节点开始 + 时间轴分面板/自适应

Browse Source 
- 交互分支：播到选择/战斗/随机节点暂停，在镜头下方弹按钮手选，点完接对应分支续演
- 从任意节点开始：单击节点选中→「从选中处开始」或双击节点，立即从该处播放；
  起始位置按从开头到该节点途中的走位重放算出(角色站在应有位置)，已离线验证
- 布局分两块(上舞台/下时间轴)，时间轴 playhead 仅播放时居中、暂停可自由滚
- 时间轴自适应宽度按钮(整条压进可视区)+鼠标滚轮横向滚动，解决长时间轴够不着节点
- 演示事件 QY_TLDEMO 扩充两条分支(和解→随机夜晚/拔剑→战斗胜败)，去掉对焦NP1
This commit is contained in:
邓雨鹏
2026-06-13 18:54:32 +08:00
parent 9525dadfd6
commit e6ec743564
3 changed files with 394 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/static/style.css
View File

@ -238,18 +238,34 @@ header .who { margin-left:auto; font-size:12px; color:#9a8f7e; }
.perform-listhead { padding:10px 12px; font-size:12px; color:#9a8f7e; letter-spacing:1px;
border-bottom:1px solid #3a322a; background:#1f1a15; }
#perform-list { overflow:auto; flex:1; }
#perform-main { flex:1; min-width:0; overflow:auto; padding:16px 18px; }
#perform-main { flex:1; min-width:0; display:flex; flex-direction:column; padding:14px 16px; min-height:0; }
#perform-main .empty-center { position:static; inset:auto; min-height:240px; }
/* ---- 演出预览（timeline + 白模舞台）---- */
/* ---- 演出预览：上=舞台面板 / 下=时间轴面板（分开两块）---- */
.tl-stagepanel { flex:none; }
.tl-mapinfo { font-size:12px; color:#9a8f7e; margin-bottom:8px; }
.tl-stagewrap { background:#15130d; border:1px solid #3a322a; border-radius:6px; overflow:hidden;
line-height:0; max-width:820px; }
.tl-stagewrap { position:relative; background:#15130d; border:1px solid #3a322a; border-radius:6px;
overflow:hidden; line-height:0; max-width:640px; }
.tl-stage { width:100%; height:auto; display:block; }
.tl-controls { display:flex; align-items:center; gap:10px; margin:10px 0 6px; max-width:820px; }
.tl-controls { display:flex; align-items:center; gap:10px; margin:10px 0; flex-wrap:wrap; }
.tl-controls .tip { font-size:11.5px; color:#7a7264; }
.tl-time { font-size:13px; color:#e6c878; font-variant-numeric:tabular-nums; min-width:90px; }
.tl-tracks { position:relative; overflow-x:auto; overflow-y:auto; max-height:32vh;
.tl-startbtn { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-fitbtn.on { background:#5a4a26; border-color:#8a7038; color:#f3dca0; }
.tl-tracks .tl-clip.startable { cursor:pointer; }
.tl-tracks .tl-clip.sel { box-shadow:0 0 0 2px #ff5a4a, 0 1px 3px rgba(0,0,0,.5); z-index:3; }
/* 选项浮层：镜头下方(舞台底部居中)，模拟玩家看到的位置 */
.tl-choices { position:absolute; left:0; right:0; bottom:12px; display:flex; flex-direction:column;
align-items:center; gap:6px; padding:0 12px; line-height:normal; z-index:5; }
.tl-choices.hidden { display:none; }
.tl-choices-q { font-size:12px; color:#e6c878; background:rgba(20,18,12,.72); padding:2px 10px; border-radius:10px; }
.tl-choice-btn { min-width:240px; max-width:92%; background:rgba(36,31,24,.96); color:#f0e6c8;
border:1px solid #8a7038; border-radius:6px; padding:8px 14px; font-size:13px;
cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.55); }
.tl-choice-btn:hover { background:#5a4a26; border-color:#e6c878; }
/* 时间轴面板：独立、占满剩余高度、自己横向滚动 */
.tl-timelinepanel { flex:1; min-height:120px; margin-top:8px; display:flex; }
.tl-tracks { position:relative; flex:1; overflow-x:auto; overflow-y:auto;
background:#19150f; border:1px solid #3a322a; border-radius:6px; padding-top:20px; }
.tl-ruler { position:relative; height:16px; border-bottom:1px solid #2a2419; }
.tl-tick { position:absolute; top:0; height:16px; border-left:1px solid #2a2419; }
@ -260,7 +276,8 @@ header .who { margin-left:auto; font-size:12px; color:#9a8f7e; }
border-right:1px solid #2a2419; height:100%; box-sizing:border-box; line-height:26px; }
.tl-clip { position:absolute; top:3px; height:22px; line-height:22px; padding:0 5px;
font-size:11px; color:#1a1710; border-radius:3px; overflow:hidden; white-space:nowrap;
text-overflow:ellipsis; cursor:pointer; box-sizing:border-box; box-shadow:0 1px 2px rgba(0,0,0,.4); }
text-overflow:ellipsis; cursor:pointer; box-sizing:border-box; box-shadow:0 1px 2px rgba(0,0,0,.4);
user-select:none; -webkit-user-select:none; }
.tl-tracks .tl-clip.active { outline:2px solid #fff; outline-offset:-1px; z-index:2; }
.tl-clip.k-dialogue { background:#7ec8e3; }
.tl-clip.k-move { background:#e6c878; }