qmi/mywebbuilder.js
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
wtz
2026-03-29 11:50:51 +08:00
commit e4fe6aac1d
11 changed files with 2589 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
editor.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IoT 可视化编辑器</title>
<link rel="stylesheet" href="css/editor.css">
</head>
<body>
<div class="app-container">
<!-- 顶部工具栏 -->
<header class="toolbar">
<div class="toolbar-title">IoT 可视化编辑器</div>
<div class="toolbar-actions">
<button id="btn-save" class="btn btn-primary">保存 JSONB</button>
<button id="btn-load" class="btn">加载 JSONB</button>
<button id="btn-export" class="btn">导出 HTML</button>
<button id="btn-clear" class="btn btn-danger">清空</button>
</div>
<div class="toolbar-info">
<span>画布尺寸: 375 × 812 (手机比例)</span>
</div>
</header>
<!-- 编辑器容器 -->
<div id="editor" class="editor-container"></div>
</div>
<!-- 隐藏的文件输入 -->
<input type="file" id="file-input" accept=".json" style="display: none;">
<!-- 预览弹窗 -->
<div id="preview-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<span>HTML 预览</span>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<pre id="preview-code"></pre>
</div>
<div class="modal-footer">
<button id="btn-copy" class="btn btn-primary">复制代码</button>
<button id="btn-download" class="btn">下载文件</button>
</div>
</div>
</div>
<!-- 引入 webbuilder -->
<script src="js/lib/webbuilder/webbuilder.js"></script>
<!-- 编辑器初始化 -->
<script src="js/editor/editor.js"></script>
</body>
</html>