beyond-simulator-web 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,125 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN" data-theme="dark">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="theme-color" content="#20242e">
7
+ <title>千星模拟器 · Live Preview</title>
8
+ <link rel="stylesheet" href="/styles.css">
9
+ </head>
10
+ <body>
11
+ <header class="topbar">
12
+ <div class="brand">
13
+ <span class="brand-mark" aria-hidden="true">UI</span>
14
+ <div>
15
+ <strong>模拟器</strong>
16
+ <span>Web Preview · 实时预览</span>
17
+ </div>
18
+ </div>
19
+ <div class="project-picker">
20
+ <label for="archive-select">工作区存档</label>
21
+ <select id="archive-select" aria-label="工作区存档"></select>
22
+ <button id="reload-button" class="icon-button" title="重新读取存档" aria-label="重新读取存档">↻</button>
23
+ </div>
24
+ <div class="topbar-status">
25
+ <a href="/editor" style="color:inherit">编辑工作台 ↗</a>
26
+ <div id="connection" class="connection"><span></span>正在连接</div>
27
+ <button id="theme-button" class="icon-button theme-button" title="切换亮暗主题" aria-label="切换亮暗主题">◐</button>
28
+ </div>
29
+ </header>
30
+
31
+ <main class="app-shell">
32
+ <aside class="tree-panel panel">
33
+ <div class="panel-heading">
34
+ <div>
35
+ <span class="eyebrow">STRUCTURE</span>
36
+ <h2 id="tree-title">控件树</h2>
37
+ </div>
38
+ <span id="tree-count" class="count">0</span>
39
+ </div>
40
+ <div id="tree" class="tree" role="tree"></div>
41
+ </aside>
42
+
43
+ <section class="preview-panel">
44
+ <div class="preview-toolbar panel">
45
+ <div class="segmented" aria-label="预览模式">
46
+ <button id="mode-editor" class="active" data-mode="editor">编辑器</button>
47
+ <button id="mode-play" data-mode="play">试玩</button>
48
+ </div>
49
+ <label class="select-field">
50
+ <span>资产</span>
51
+ <select id="asset-select">
52
+ <option value="server-control-template">服务端 UI</option>
53
+ <option value="client-control-template">客户端模板</option>
54
+ </select>
55
+ </label>
56
+ <label class="select-field">
57
+ <span>设备</span>
58
+ <select id="device-select"></select>
59
+ </label>
60
+ <div class="play-controls" id="play-controls">
61
+ <button id="play-start" class="primary">▶ 启动</button>
62
+ <button id="play-pause">Ⅱ 暂停</button>
63
+ <button id="play-resume">▷ 继续</button>
64
+ <button id="play-step">+ 1 帧</button>
65
+ <button id="play-stop" class="danger">■ 停止</button>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="workspace panel">
70
+ <div class="stage-meta">
71
+ <div>
72
+ <span id="asset-label">等待存档</span>
73
+ <strong id="save-name">未命名存档</strong>
74
+ </div>
75
+ <div class="stage-readout">
76
+ <span id="canvas-label">—</span>
77
+ <span id="revision-label">Revision —</span>
78
+ </div>
79
+ </div>
80
+ <div id="stage-shell" class="stage-shell" tabindex="0" aria-label="模拟器预览画布">
81
+ <img id="stage-image" alt="千星模拟器预览">
82
+ <canvas id="stage-canvas" class="stage-canvas" hidden></canvas>
83
+ <div id="stage-empty" class="stage-empty">
84
+ <span>⌁</span>
85
+ <strong>等待工作区存档</strong>
86
+ <p>Codex 保存 qxqy-simulator-save JSON 后会自动出现在这里。</p>
87
+ </div>
88
+ <div id="stage-loading" class="stage-loading" hidden>正在更新画面…</div>
89
+ </div>
90
+ <div class="stage-footer">
91
+ <span id="active-path">尚未打开存档</span>
92
+ <span id="play-readout">编辑器静态预览</span>
93
+ </div>
94
+ </div>
95
+ </section>
96
+
97
+ <aside class="info-panel panel">
98
+ <div class="panel-heading">
99
+ <div>
100
+ <span class="eyebrow">INSPECT</span>
101
+ <h2>预览信息</h2>
102
+ </div>
103
+ </div>
104
+ <section class="info-card">
105
+ <span class="info-label">当前节点</span>
106
+ <strong id="node-name">未选择</strong>
107
+ <dl id="node-details"></dl>
108
+ </section>
109
+ <section class="info-card metrics">
110
+ <div><span>控件</span><strong id="metric-controls">0</strong></div>
111
+ <div><span>Lua</span><strong id="metric-scripts">0</strong></div>
112
+ <div><span>画布</span><strong id="metric-canvas">—</strong></div>
113
+ </section>
114
+ <section class="log-card">
115
+ <div class="log-heading"><span>Runtime Logs</span><button id="clear-logs">清空</button></div>
116
+ <pre id="runtime-logs">试玩启动后显示 Lua 日志。</pre>
117
+ </section>
118
+ <p class="watch-note"><span>●</span> 正在监听磁盘。MCP 保存当前 JSON 后,预览会自动重新加载。</p>
119
+ </aside>
120
+ </main>
121
+
122
+ <div id="toast" class="toast" role="status" aria-live="polite"></div>
123
+ <script type="module" src="/app.js"></script>
124
+ </body>
125
+ </html>