65 lines
3.6 KiB
HTML
65 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>元景 · 游戏工作台</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #F3F4F6; color: #1F2937; height: 100vh; display: flex; flex-direction: column; }
|
||
header { background: #111827; color: #F9FAFB; padding: 10px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||
header h1 { font-size: 16px; margin-right: 8px; }
|
||
header input[type=text] { padding: 6px 10px; border-radius: 4px; border: 1px solid #374151; background: #1F2937; color: #F9FAFB; width: 220px; }
|
||
header label { font-size: 13px; display: flex; gap: 6px; align-items: center; }
|
||
header button { padding: 6px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
|
||
.btn-primary { background: #2563EB; color: #fff; }
|
||
.btn-green { background: #16A34A; color: #fff; }
|
||
.btn-gray { background: #4B5563; color: #fff; }
|
||
main { flex: 1; display: flex; gap: 0; overflow: hidden; }
|
||
#tree { width: 280px; background: #fff; border-right: 1px solid #E5E7EB; overflow-y: auto; padding: 10px; }
|
||
#tree h3 { font-size: 13px; color: #6B7280; margin: 8px 0 4px; }
|
||
.node { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
|
||
.node:hover { background: #EFF6FF; }
|
||
.node.sel { background: #DBEAFE; font-weight: 600; }
|
||
.node .add { color: #2563EB; font-weight: 700; padding: 0 6px; }
|
||
#editor { flex: 1; display: flex; flex-direction: column; padding: 12px; gap: 10px; overflow: hidden; }
|
||
#editor .bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||
#editor select, #editor button { padding: 6px 10px; border-radius: 4px; border: 1px solid #D1D5DB; background: #fff; font-size: 13px; cursor: pointer; }
|
||
#editor textarea { flex: 1; border: 1px solid #D1D5DB; border-radius: 6px; padding: 12px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; resize: none; background: #1A1D26; color: #D1D5DB; }
|
||
#msg { font-size: 13px; min-height: 20px; }
|
||
.ok { color: #16A34A; } .err { color: #DC2626; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>🎮 游戏工作台</h1>
|
||
<input type="text" id="game_name" placeholder="游戏名称">
|
||
<label><input type="checkbox" id="game_shared"> 世界共享</label>
|
||
<button class="btn-primary" onclick="wb.saveGame()">保存游戏</button>
|
||
<button class="btn-green" onclick="wb.test()">▶ 测试（新窗口运行 demo）</button>
|
||
<button class="btn-gray" onclick="wb.reload()">刷新</button>
|
||
</header>
|
||
<main>
|
||
<div id="tree">
|
||
<h3>对象树（世界 1 · 场景 N · 实体 N）</h3>
|
||
<div id="tree_body">加载中…</div>
|
||
</div>
|
||
<div id="editor">
|
||
<div class="bar">
|
||
<span id="cur_obj" style="font-weight:600;">未选择对象</span>
|
||
<select id="event_sel">
|
||
<option value="event_start">事件:开始</option>
|
||
<option value="event_click">事件:点击</option>
|
||
<option value="event_timer">事件:定时</option>
|
||
<option value="event_collision">事件:碰撞</option>
|
||
</select>
|
||
<button class="btn-primary" onclick="wb.saveScript()">💾 保存脚本</button>
|
||
<button onclick="wb.validate()">校验</button>
|
||
</div>
|
||
<textarea id="code" placeholder="为当前对象的所选事件编写逻辑脚本（Python）… 可用上下文：entity / scene / world / game / api（事件冒泡：实体→场景→世界→游戏）"></textarea>
|
||
<div id="msg"></div>
|
||
</div>
|
||
</main>
|
||
<script src="workbench.js"></script>
|
||
</body>
|
||
</html>
|