109 lines
4.4 KiB
HTML
109 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Scene Step 编辑器</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="editor-window">
|
||
<div class="header">
|
||
<h1>步骤编辑器</h1>
|
||
</div>
|
||
|
||
<div class="file-section">
|
||
<h3>流程文件管理</h3>
|
||
<div class="directory-section">
|
||
<div class="directory-info">
|
||
<small class="directory-help" id="directoryHelp">💡 选择本地项目文件夹，自动加载其中的JSON流程文件（非上传，仅本地读取）</small>
|
||
</div>
|
||
<div class="directory-controls">
|
||
<input type="file" id="directoryInput" webkitdirectory directory multiple style="display: none;">
|
||
<button id="selectDirBtn" class="btn btn-secondary" title="选择本地文件夹，读取其中的JSON文件">📂 选择本地项目文件夹</button>
|
||
<span id="currentDirDisplay" class="current-dir">当前目录: 默认目录</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-controls">
|
||
<select id="fileSelect" class="file-dropdown">
|
||
<option value="">选择文件...</option>
|
||
</select>
|
||
<button id="newProcessBtn" class="btn btn-primary">新增流程</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="separator-line orange"></div>
|
||
|
||
<div class="main-layout">
|
||
<!-- 左侧树状导航 -->
|
||
<div class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<h4>步骤导航</h4>
|
||
<button id="sidebarToggle" class="btn-sidebar-toggle" title="收起/展开侧边栏">
|
||
<span class="toggle-icon">◀</span>
|
||
</button>
|
||
</div>
|
||
<div class="tree-container" id="treeContainer">
|
||
<!-- 树状列表将在这里动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="content-area">
|
||
<div class="scroll-container" id="scrollContainer">
|
||
<div class="steps-container" id="stepsContainer">
|
||
<!-- 步骤将在这里动态生成 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-controls">
|
||
<button id="saveBtn" class="btn btn-save">保存到 新流程.json</button>
|
||
<button id="generateCodeBtn" class="btn btn-generate">生成 ProcessEvents 代码</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增流程对话框 -->
|
||
<div id="newProcessModal" class="modal">
|
||
<div class="modal-content">
|
||
<h3>创建新流程</h3>
|
||
<input type="text" id="newProcessName" placeholder="输入流程名称" value="新流程">
|
||
<div class="modal-buttons">
|
||
<button id="confirmNewProcess" class="btn btn-primary">确定</button>
|
||
<button id="cancelNewProcess" class="btn btn-secondary">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 确认对话框 -->
|
||
<div id="confirmModal" class="modal">
|
||
<div class="modal-content">
|
||
<h3 id="confirmTitle">确认</h3>
|
||
<p id="confirmMessage">确认执行此操作？</p>
|
||
<div class="modal-buttons">
|
||
<button id="confirmOk" class="btn btn-primary">确定</button>
|
||
<button id="confirmCancel" class="btn btn-secondary">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 代码生成结果对话框 -->
|
||
<div id="codeModal" class="modal">
|
||
<div class="modal-content code-modal">
|
||
<h3>生成的 ProcessEvents 代码</h3>
|
||
<textarea id="generatedCode" readonly></textarea>
|
||
<div class="modal-buttons">
|
||
<button id="copyCodeBtn" class="btn btn-primary">复制代码</button>
|
||
<button id="closeCodeModal" class="btn btn-secondary">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="data-models.js"></script>
|
||
<script src="file-manager.js"></script>
|
||
<script src="code-generator.js"></script>
|
||
<script src="script-fixed.js"></script>
|
||
</body>
|
||
</html>
|