init: 剧情事件协作 Web 编辑器独立仓(从 SGame/tools/event_authoring 拆出)

This commit is contained in:
bia
2026-06-08 16:50:27 +08:00
commit f5669dc01d
32 changed files with 3497 additions and 0 deletions

115
web/static/index.html Normal file
View File

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Story 协作编辑器 · M5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 登录遮罩 -->
<div id="login" class="overlay">
<div class="login-box">
<h2>剧情事件协作编辑器</h2>
<p class="hint">输入共享口令进入</p>
<input id="login-pass" type="password" placeholder="共享口令" autocomplete="off">
<input id="login-name" type="text" placeholder="你的昵称(用于记录改动者)">
<button id="login-btn">进入</button>
<div id="login-err" class="err"></div>
</div>
</div>
<header>
<h1>剧情事件协作编辑器 <span class="ver">M5</span></h1>
<div class="toolbar">
<button id="btn-save" class="primary" disabled>保存</button>
<button id="btn-validate" disabled>校验</button>
<button id="btn-playtest" disabled>试走</button>
<span class="sep"></span>
<button id="btn-confirm" disabled>确认</button>
<button id="btn-discard" disabled>丢弃</button>
<span class="sep"></span>
<button id="btn-import">导入 IR</button>
<button id="btn-export">导出 confirmed</button>
<span class="who" id="who"></span>
</div>
</header>
<div id="wrap">
<!-- 左:事件列表 -->
<aside id="list-pane">
<div class="filters">
<select id="filter-status">
<option value="all">全部</option>
<option value="pending">待审</option>
<option value="confirmed">已确认</option>
<option value="discarded">已丢弃</option>
</select>
<input id="search" type="text" placeholder="搜索标题/group">
</div>
<div id="event-list"></div>
</aside>
<!-- 中:分支树 -->
<main id="graph-pane">
<div id="graph"><svg id="svg"></svg><div id="layers"></div></div>
<div id="graph-empty" class="empty-center">从左侧选择一个事件</div>
</main>
<!-- 右:表单编辑 -->
<section id="edit-pane">
<div id="meta-edit"></div>
<div class="sec-title">节点编辑 <button id="btn-addnode" class="mini" disabled>+节点</button></div>
<div id="node-edit"><div class="empty">点击中间任意节点进行编辑</div></div>
</section>
</div>
<!-- 校验结果遮罩 -->
<div id="validate-modal" class="overlay hidden">
<div class="modal">
<h3>校验结果</h3>
<div id="validate-body"></div>
<button class="modal-close">关闭</button>
</div>
</div>
<!-- 导入遮罩 -->
<div id="import-modal" class="overlay hidden">
<div class="modal">
<h3>导入 IR选择一个或多个 JSON 文件)</h3>
<div id="import-drop" class="drop">
<p>点击选择文件,或把 .json 文件拖到这里</p>
<p class="hint">每个文件可为单个事件对象,或事件数组;支持多选</p>
<input id="import-file" type="file" accept=".json,application/json" multiple hidden>
</div>
<div id="import-files" class="filelist"></div>
<details class="import-paste">
<summary>或粘贴 JSON 文本</summary>
<textarea id="import-text" placeholder='{"id":"QY_XXX", ...} 或 [ {...}, {...} ]'></textarea>
</details>
<div class="modal-actions">
<button id="import-do" class="primary">导入</button>
<button class="modal-close">取消</button>
</div>
<div id="import-result" class="err"></div>
</div>
</div>
<!-- 试走遮罩 -->
<div id="playtest-modal" class="overlay hidden">
<div class="modal wide">
<h3>剧本试走 <button class="modal-close" style="float:right">关闭</button></h3>
<div id="pt-layout">
<div id="pt-flow"></div>
<div id="pt-ledger"></div>
</div>
</div>
</div>
<script src="tree.js"></script>
<script src="form.js"></script>
<script src="playtest.js"></script>
<script src="app.js"></script>
</body>
</html>