UNPKG

oimp

Version:

A CLI tool for generating OI problem and packages

341 lines (311 loc) 17.1 kB
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>OI Tools Web IDE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="/static/favicon.svg" type="image/svg+xml"> <link rel="stylesheet" href="/static/xterm/xterm.css"> <link rel="stylesheet" href="/static/jstree/themes/default-dark/style.min.css"> <link rel="stylesheet" href="/static/ide.css"> <link rel="stylesheet" href="/static/ide-md-editor.css"> <link rel="stylesheet" href="/static/preview-themes/github-dark.min.css"> <!-- <link rel="stylesheet" href="/static/smart-textarea/smart-textarea.min.css"> --> </head> <body> <div id="topbar"> <span class="title"> <img src="/static/favicon.svg" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 8px;" alt="OI Tools Icon"> OIMP </span> <!-- <button id="btn-save" title="保存 (Ctrl+S)" style="width:28px;height:28px;padding:0;margin-right:6px;border-radius:7px;border:1.5px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.08s,box-shadow 0.08s,border-color 0.08s;"> <svg width="14" height="14" viewBox="0 0 18 18" class="tree-arrow-svg"> <rect x="3" y="3" width="12" height="12" rx="2" fill="none" stroke="#2563eb" stroke-width="2" /> <polyline points="6,7 9,10 12,7" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <button id="btn-reload" title="重载" style="width:28px;height:28px;padding:0;margin-right:6px;border-radius:7px;border:1.5px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.08s,box-shadow 0.08s,border-color 0.08s;"> <svg width="14" height="14" viewBox="0 0 18 18" class="tree-arrow-svg"> <path d="M4 10a5 5 0 1 0 2-6" fill="none" stroke="#2563eb" stroke-width="2" /> <polyline points="4,4 4,10 10,10" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> --> <span id="current-file" style="margin-left:16px;font-size:12px;"></span> <span id="unsaved-indicator" style="margin-left:8px;color:#e11d48;font-size:13px;display:none;vertical-align:middle;">● 有未保存更改</span> <span id="status-panel-wrap" style="margin-left:auto; display:inline-block; vertical-align:middle; float:right;"> <span id="status-panel"></span> <!-- 删去刷新状态按钮 --> </span> <!-- 已移除命令按钮区域 --> </div> <div id="ide-preview-main" style="flex:1; display:flex; min-height:0; position:relative;overflow:clip;"> <div id="ide-main" style="width:60%; min-width:200px; display:flex; min-width:0; min-height:0; position:relative; height:100%;"> <div id="file-tree-wrap" style="display:flex;flex-direction:column;height:100%;"> <div id="file-tree-toolbar" style="display:flex;align-items:center;padding:4px 8px 2px 8px;background:#f3f4f6;border-bottom:1px solid #e5e7eb;"> <button id="btn-new-file" title="新建文件" style="margin-right:6px;width:28px;height:28px;padding:0;border-radius:7px;border:1.5px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.08s,box-shadow 0.08s,border-color 0.08s;"><svg width="14" height="14" viewBox="0 0 18 18" class="tree-arrow-svg"> <rect x="3" y="3" width="12" height="12" rx="2" fill="none" stroke="#2563eb" stroke-width="2" /> <line x1="9" y1="6" x2="9" y2="12" stroke="#2563eb" stroke-width="2" /> <line x1="6" y1="9" x2="12" y2="9" stroke="#2563eb" stroke-width="2" /> </svg></button> <button id="btn-new-folder" title="新建文件夹" style="margin-right:6px;width:28px;height:28px;padding:0;border-radius:7px;border:1.5px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.08s,box-shadow 0.08s,border-color 0.08s;"><svg width="14" height="14" viewBox="0 0 18 18" class="tree-arrow-svg"> <rect x="2" y="7" width="14" height="7" rx="2" fill="none" stroke="#2563eb" stroke-width="2" /> <path d="M2 7 L6 4 H16 V14" fill="none" stroke="#2563eb" stroke-width="2" /> </svg></button> </div> <!-- file tree --> <div id="file-tree" style="flex:1 1 0;overflow-y:auto;"></div> </div> <div id="tree-dragbar" style="width:9px; cursor:col-resize; background:#eee; z-index:11; position:relative; display:flex; align-items:center; justify-content:center;"> <button id="toggle-tree-btn" title="显示/隐藏文件树" style="position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:28px;padding:0;border:none;background:transparent;cursor:pointer;font-size:13px;line-height:1;z-index:12;display:flex;align-items:center;justify-content:center;"></button> </div> <div id="editor" style="position:relative; flex:1; min-width:0;"></div> <!-- textarea 只在编辑器区域内 --> <textarea id="md-textarea"></textarea> <!-- search panel --> <div class="md-editor-search-panel" id="md-editor-searchPanel"> <!-- 面板头部,包含右上角关闭按钮 --> <div class="md-editor-panel-header"> <button class="md-editor-btn md-editor-btn-secondary md-editor-close-btn" id="md-editor-closeBtn">×</button> </div> <div class="md-editor-search-row"> <input type="text" class="md-editor-search-input" id="md-editor-findInput" placeholder="查找内容"> </div> <div class="md-editor-search-row"> <input type="text" class="md-editor-search-input" id="md-editor-replaceInput" placeholder="替换为"> </div> <div class="md-editor-search-row"> <button class="md-editor-btn" id="md-editor-findPrevBtn">前一个</button> <button class="md-editor-btn" id="md-editor-findNextBtn">下一个</button> <button class="md-editor-btn" id="md-editor-replaceBtn">替换</button> <button class="md-editor-btn" id="md-editor-replaceAllBtn">全部替换</button> </div> <div class="md-editor-options"> <div class="md-editor-option"> <input type="checkbox" id="md-editor-caseSensitive"> <label for="md-editor-caseSensitive">区分大小写</label> </div> </div> <div class="md-editor-status" id="md-editor-status"></div> </div> <!-- 注意:textarea 如果没有的话 由 JS 动态插入到 #editor 内部 --> </div> <div id="dragbar" style="width:6px; cursor:col-resize; background:#eee; z-index:10;"></div> <div id="preview" style="width:40%; min-width:320px; overflow:auto; "> <div id="preview-html" style="width:100%; height:100%; min-height:100px; padding:12px 18px 32px 18px; overflow: auto; box-sizing:border-box; font-family:inherit;"> </div> </div> </div> <!-- 终端 --> <div id="terminal-dragbar" style="height:5px; cursor:row-resize; background:#eee; z-index:12;"></div> <div id="terminal" style="height:180px;"></div> <!-- 步骤化按钮栏 --> <div id="workflow-bar"> <!-- 题目工作流标题 --> <div id="workflow-title">构建题目工作流</div> <div id="workflow-buttons"> <!-- 左侧独立操作区域 --> <div id="workflow-independent-ops" class="workflow-independent-ops"> <!-- 题目状态 --> <button id="workflow-status" class="workflow-btn workflow-independent-btn" data-step="status" title="查看题目的完成状态和进度"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">📈</div> <div class="workflow-btn-text">题目状态</div> </div> </button> <!-- 编辑题目元数据 --> <button id="workflow-edit" class="workflow-btn workflow-independent-btn" data-step="edit" title="编辑题目的基本信息、标签、限制等元数据"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">✏️</div> <div class="workflow-btn-text">编辑题目元数据</div> </div> </button> <!-- 修复 --> <button id="workflow-fix" class="workflow-btn workflow-independent-btn" data-step="fix" title="自动修复题目中的常见问题和错误"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">🔧</div> <div class="workflow-btn-text">修复</div> </div> </button> <!-- 快照 --> <button id="workflow-snapshot" class="workflow-btn workflow-independent-btn" data-step="snapshot" title="创建或管理题目的版本快照"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">📸</div> <div class="workflow-btn-text">快照</div> </div> </button> </div> <!-- 主工作流区域 --> <div id="workflow-main-flow" class="workflow-main-flow"> <!-- 编辑题面 --> <button id="workflow-edit-problem" class="workflow-btn" data-step="edit-problem" title="编辑题目的描述、输入输出格式等题面内容"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">📝</div> <div class="workflow-btn-text">编辑题面</div> </div> </button> <!-- 箭头连接线 --> <div class="workflow-arrow"> <svg width="20" height="12" viewBox="0 0 20 12"> <path d="M0 6 L15 6 M15 6 L10 2 M15 6 L10 10" stroke="#94a3b8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <!-- 左大括号 --> <div class="workflow-brace">{</div> <!-- 四个并列按钮容器 --> <div class="workflow-parallel-container"> <!-- 生成样例 --> <button id="workflow-gen-sample" class="workflow-btn workflow-parallel-btn" data-step="gen-sample" title="编辑题面,在题面中定义样例输入输出"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">📋</div> <div class="workflow-btn-text">生成题目样例</div> </div> </button> <!-- 编辑标程 --> <button id="workflow-edit-std" class="workflow-btn workflow-parallel-btn" data-step="edit-std" title="编辑题目的标准解答程序"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">💻</div> <div class="workflow-btn-text">编辑标准程序</div> </div> </button> <!-- 编辑数据生成器 --> <button id="workflow-edit-generator" class="workflow-btn workflow-parallel-btn" data-step="edit-generator" title="编辑用于生成测试数据的程序"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">🔧</div> <div class="workflow-btn-text">编辑数据生成器</div> </div> </button> <!-- 编辑输入验证器 --> <button id="workflow-edit-validator" class="workflow-btn workflow-parallel-btn" data-step="edit-validator" title="编辑用于验证输入数据格式的程序"> <div class="workflow-btn-content"> <div class="workflow-btn-icon"></div> <div class="workflow-btn-text">编辑输入验证器</div> </div> </button> <!-- 编辑评测器 --> <button id="workflow-edit-checker" class="workflow-btn workflow-parallel-btn" data-step="edit-checker" title="编辑用于评测程序输出的程序"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">⚖️</div> <div class="workflow-btn-text">编辑程序评测器</div> </div> </button> </div> <div class="workflow-brace">}</div> <!-- 箭头连接线 --> <div class="workflow-arrow"> <svg width="20" height="12" viewBox="0 0 20 12"> <path d="M0 6 L15 6 M15 6 L10 2 M15 6 L10 10" stroke="#94a3b8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <!-- 测试样例 --> <button id="workflow-testsample" class="workflow-btn" data-step="testsample" title="使用样例数据测试标程和验证器"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">🧪</div> <div class="workflow-btn-text">测试样例</div> </div> </button> <!-- 箭头连接线 --> <div class="workflow-arrow"> <svg width="20" height="12" viewBox="0 0 20 12"> <path d="M0 6 L15 6 M15 6 L10 2 M15 6 L10 10" stroke="#94a3b8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <div class="workflow-brace">{</div> <!-- 检查和数据生成容器 --> <div class="workflow-check-data-container"> <!-- 检查 --> <button id="workflow-check" class="workflow-btn workflow-check-data-btn" data-step="check" title="检查题目的完整性和正确性"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">🔍</div> <div class="workflow-btn-text">检查</div> </div> </button> <!-- 生成数据 --> <button id="workflow-gendata" class="workflow-btn workflow-check-data-btn" data-step="gendata" title="使用数据生成器创建测试数据"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">📊</div> <div class="workflow-btn-text">生成数据</div> </div> </button> </div> <div class="workflow-brace">}</div> <!-- 箭头连接线 --> <div class="workflow-arrow"> <svg width="20" height="12" viewBox="0 0 20 12"> <path d="M0 6 L15 6 M15 6 L10 2 M15 6 L10 10" stroke="#94a3b8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <!-- 打包 --> <button id="workflow-package" class="workflow-btn" data-step="package" title="将题目打包为可发布的格式"> <div class="workflow-btn-content"> <div class="workflow-btn-icon">📦</div> <div class="workflow-btn-text">打包</div> </div> </button> </div> </div> </div> <div id="run-log-modal"> <div id="run-log-title">命令执行</div> <button id="run-log-close">×</button> <div id="run-log-status"></div> <div id="run-log-content"></div> <div id="run-log-input-wrap" style="display:none; padding:8px 18px 12px 18px; background:#23272e; border-top:1px solid #27272a;"> <input id="run-log-input" type="text" style="width:80%;font-size:13px;padding:3px 8px;border-radius:4px;border:1px solid #444;background:#18181b;color:#e5e7eb;outline:none;" placeholder="请输入交互内容后回车..." /> <button id="run-log-send" style="font-size:13px;margin-left:8px;padding:2px 10px;border-radius:4px;border:none;background:#4ade80;color:#222;cursor:pointer;">发送 </button> </div> </div> </div> <script src="/static/xterm/xterm.js"></script> <script src="/static/xterm/xterm-addon-fit.js"></script> <link rel="stylesheet" href="/static/katex.min.css"> <script src="/static/katex.min.js"></script> <script src="/static/auto-render.min.js"></script> <script src="/static/jquery.min.js"></script> <script src="/static/jstree/jstree.js"></script> <script src="/static/marked/marked.min.js"></script> <script src="/static/monaco/min/vs/loader.js"></script> <link rel="stylesheet" href="/static/hljs-github.min.css"> <script type="module" src="/static/ide-main.js"> </script> <script src="/static/highlight.min.js"></script> <!-- <script src="/static/ide-utility.js"></script> <script src="/static/ide.js"></script> <script src="/static/ide-jstree.js"></script> <script src="/static/ide-terminal.js"></script> <script src="/static/ide-workflow.js"></script> <script src="/static/ide-status.js"></script> <script src="/static/ide-md-editor.js"></script> --> </body> </html>