1585346868
/
NGS


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>NGS · 控制台</title>
  <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/assets/bootstrap-icons/bootstrap-icons.css" />
  <link rel="stylesheet" href="/assets/app.css" />
  <script src="/assets/chartjs/chart.umd.min.js"></script>
</head>
<body>
  <div class="app d-flex">
    <aside class="rail flex-shrink-0">
      <div class="brand d-flex align-items-center gap-2 px-3 py-2">
        <div class="brand-mark">N</div>
        <div class="brand-text flex-grow-1">
          <div class="fw-bold text-white lh-1">NGS</div>
          <div class="small text-white-50">管理面板</div>
        </div>
        <button type="button" class="btn btn-sm btn-outline-light position-relative" id="task-badge" title="任务队列">
          <i class="bi bi-list-task"></i>
          <span class="badge text-bg-warning position-absolute top-0 start-100 translate-middle rounded-pill" id="task-badge-count">0</span>
        </button>
        <button type="button" class="btn btn-sm btn-outline-light" id="btn-logout" title="退出登录">
          <i class="bi bi-box-arrow-right"></i>
        </button>
      </div>
      <nav class="nav flex-column px-2 gap-1">
        <button type="button" class="nav-link text-start nav-item is-active" data-view="console"><i class="bi bi-speedometer2 me-2"></i>控制台</button>
        <button type="button" class="nav-link text-start nav-item" data-view="sites"><i class="bi bi-globe2 me-2"></i>网站</button>
        <button type="button" class="nav-link text-start nav-item" data-view="files"><i class="bi bi-folder2-open me-2"></i>文件</button>
        <button type="button" class="nav-link text-start nav-item" data-view="mysql"><i class="bi bi-database me-2"></i>数据库</button>
        <button type="button" class="nav-link text-start nav-item" data-view="software"><i class="bi bi-box-seam me-2"></i>软件</button>
      </nav>
      <div class="rail-foot mt-auto px-3 py-2">
        <div class="live small d-flex align-items-center gap-2" id="live-dot">
          <span class="pulse"></span>
          <span id="live-label">检测中</span>
        </div>
      </div>
    </aside>

    <main class="main flex-grow-1">
      <header class="top d-flex justify-content-between align-items-center mb-3">
        <div>
          <div class="text-secondary small" id="page-eyebrow">Console</div>
          <h1 class="h4 mb-0" id="page-title">控制台</h1>
        </div>
        <div class="text-secondary small" id="top-meta"></div>
      </header>

      <section class="view is-active" id="view-console" data-view-panel="console">
        <div class="card mb-3">
          <div class="card-header py-2 d-flex justify-content-between align-items-center gap-2">
            <strong>实时资源</strong>
            <div class="d-flex align-items-center gap-2">
              <span class="small text-secondary" id="overview-sites">—</span>
              <select class="form-select form-select-sm metrics-range" id="metrics-range" title="时间范围">
                <option value="1m">1分</option>
                <option value="10m" selected>10分</option>
                <option value="30m">30分</option>
                <option value="1h">1小时</option>
                <option value="6h">6小时</option>
                <option value="1d">1天</option>
                <option value="7d">7天</option>
                <option value="30d">30天</option>
              </select>
            </div>
          </div>
          <div class="card-body py-3 d-flex flex-column min-h-0">
            <div class="row g-3 monitor-grid flex-grow-1">
              <div class="col-md-6">
                <div class="monitor-card">
                  <div class="d-flex justify-content-between align-items-center small mb-2">
                    <span class="fw-semibold">CPU</span>
                    <span class="text-secondary" id="cpu-badge">—</span>
                  </div>
                  <div class="monitor-chart"><canvas id="chart-cpu"></canvas></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="monitor-card">
                  <div class="d-flex justify-content-between align-items-center small mb-2">
                    <span class="fw-semibold">内存</span>
                    <span class="text-secondary" id="mem-badge">—</span>
                  </div>
                  <div class="monitor-chart"><canvas id="chart-mem"></canvas></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="monitor-card">
                  <div class="d-flex justify-content-between align-items-center small mb-2">
                    <span class="fw-semibold">网络</span>
                    <span class="text-secondary" id="net-badge">—</span>
                  </div>
                  <div class="monitor-chart"><canvas id="chart-net"></canvas></div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="monitor-card">
                  <div class="d-flex justify-content-between align-items-center small mb-2">
                    <span class="fw-semibold">磁盘 /</span>
                    <span class="text-secondary" id="disk-badge">—</span>
                  </div>
                  <div class="monitor-chart"><canvas id="chart-disk"></canvas></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="view" id="view-sites" data-view-panel="sites">
        <div class="card">
          <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <div>
              <strong>网站</strong>
              <span class="small text-secondary ms-2">创建 / 启停 / 配置 / 删除</span>
            </div>
            <button type="button" class="btn btn-sm btn-primary" id="btn-site-create">新建网站</button>
          </div>
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" id="sites-table">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>类型</th>
                  <th>域名</th>
                  <th>目录</th>
                  <th>上游</th>
                  <th>状态</th>
                  <th class="text-end">操作</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </section>

      <section class="view" id="view-files" data-view-panel="files">
        <div class="card">
          <div class="card-header py-2">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
              <div>
                <strong>文件</strong>
                <code class="small ms-2" id="files-path-label">/</code>
              </div>
              <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-secondary" id="btn-files-up">上级</button>
                <button type="button" class="btn btn-outline-secondary" id="btn-files-mkdir">新建目录</button>
                <button type="button" class="btn btn-outline-secondary" id="btn-files-newfile">新建文件</button>
                <button type="button" class="btn btn-primary" id="btn-files-upload">上传</button>
              </div>
            </div>
            <div class="crumbs small mt-2" id="files-crumbs"></div>
          </div>
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" id="files-table">
              <thead>
                <tr>
                  <th>名称</th>
                  <th>类型</th>
                  <th>大小</th>
                  <th>修改时间</th>
                  <th class="text-end">操作</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </section>

      <section class="view" id="view-mysql" data-view-panel="mysql">
        <div class="card">
          <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <div>
              <strong>数据库</strong>
              <span class="small text-secondary ms-2">库 / 账号 / 权限</span>
            </div>
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-secondary" id="btn-mysql-password">改 root 密码</button>
              <button type="button" class="btn btn-primary" id="btn-db-create">新建数据库</button>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" id="db-table">
              <thead>
                <tr>
                  <th>库名</th>
                  <th>用户</th>
                  <th>密码</th>
                  <th>权限</th>
                  <th>Host</th>
                  <th class="text-end">操作</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </section>

      <section class="view" id="view-software" data-view-panel="software">
        <div class="row g-2" id="software-grid"></div>
      </section>
    </main>
  </div>

  <div class="toast-host position-fixed bottom-0 end-0 p-3" id="toast-host" aria-live="polite"></div>

  <div class="task-panel" id="task-panel" hidden>
    <div class="task-panel-backdrop" id="task-panel-backdrop"></div>
    <aside class="task-panel-sheet">
      <header class="task-panel-head d-flex justify-content-between align-items-start gap-2">
        <div>
          <h2 class="h5 mb-1">任务队列</h2>
          <p class="small text-secondary mb-0">默认显示进行中任务，可切换查看历史。</p>
        </div>
        <button type="button" class="btn btn-sm btn-outline-light" id="task-panel-close" aria-label="关闭">×</button>
      </header>
      <div class="task-panel-body">
        <div class="task-side">
          <div class="task-side-tabs btn-group btn-group-sm w-100 px-2 pt-2">
            <button type="button" class="btn btn-warning" id="task-tab-active" data-task-tab="active">进行中</button>
            <button type="button" class="btn btn-outline-light" id="task-tab-history" data-task-tab="history">历史任务</button>
          </div>
          <div class="task-list" id="task-list"></div>
          <div class="task-side-foot px-2 pb-2">
            <button type="button" class="btn btn-sm btn-outline-light w-100 d-none" id="task-clear-finished">清理历史</button>
          </div>
        </div>
        <div class="task-log-wrap">
          <div class="task-log-head d-flex justify-content-between align-items-center">
            <strong id="task-log-title">日志</strong>
            <span class="badge text-bg-secondary" id="task-log-status">—</span>
          </div>
          <pre class="task-log" id="task-log"></pre>
        </div>
      </div>
    </aside>
  </div>

  <div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <form class="modal-content" id="modal-form">
        <div class="modal-header py-2">
          <h5 class="modal-title" id="modal-title">操作</h5>
          <button type="button" class="btn-close" id="modal-close" aria-label="关闭"></button>
        </div>
        <div class="modal-body" id="modal-body"></div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" id="modal-cancel">取消</button>
          <button type="submit" class="btn btn-sm btn-primary" id="modal-ok">确定</button>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="site-settings-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header py-2">
          <div>
            <h5 class="modal-title mb-0">网站配置 · <span id="site-settings-name"></span></h5>
            <div class="small text-secondary" id="site-settings-sub"></div>
          </div>
          <button type="button" class="btn-close" id="site-settings-close" aria-label="关闭"></button>
        </div>
        <div class="modal-body site-settings-body p-0">
          <div class="site-settings-layout">
            <aside class="site-settings-nav">
              <button type="button" class="site-settings-tab is-active" data-site-tab="domain">域名</button>
              <button type="button" class="site-settings-tab" data-site-tab="cert">证书</button>
              <button type="button" class="site-settings-tab" data-site-tab="nginx">配置 (NGINX)</button>
              <button type="button" class="site-settings-tab" data-site-tab="logs">日志 (NGINX)</button>
            </aside>
            <div class="site-settings-panels">
              <div class="site-settings-panel is-active" data-site-panel="domain">
                <h6 class="mb-3">域名</h6>
                <div class="mb-3">
                  <label class="form-label">域名（支持多个，每行一个）</label>
                  <textarea class="form-control form-control-sm" id="site-set-domain" rows="4" placeholder="example.com&#10;www.example.com:8080"></textarea>
                  <div class="form-text">可写 <code>域名</code> 或 <code>域名:端口</code>；不写端口默认 <code>80</code>。第一行作为主域名。</div>
                </div>
                <button type="button" class="btn btn-sm btn-primary" id="site-set-domain-save">保存并重载</button>
              </div>
              <div class="site-settings-panel" data-site-panel="cert">
                <h6 class="mb-3">SSL 证书</h6>
                <div class="border rounded p-3 mb-3 bg-light">
                  <div class="fw-semibold mb-2">Let's Encrypt 免费证书</div>
                  <p class="small text-secondary mb-2">勾选要申请的域名，将合并签发到<strong>一张</strong>证书。域名需已解析到本机，且公网可访问 80 端口。</p>
                  <div class="mb-2">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                      <label class="form-label mb-0">申请域名</label>
                      <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="site-ssl-domains-all">全选</button>
                        <button type="button" class="btn btn-outline-secondary" id="site-ssl-domains-none">清空</button>
                      </div>
                    </div>
                    <div class="site-ssl-domain-list border rounded bg-white p-2" id="site-ssl-domain-list"></div>
                  </div>
                  <button type="button" class="btn btn-sm btn-success" id="site-set-ssl-apply">申请 / 续签证书</button>
                </div>
                <div class="form-check form-switch mb-3">
                  <input class="form-check-input" type="checkbox" id="site-set-ssl-enable" />
                  <label class="form-check-label" for="site-set-ssl-enable">启用 HTTPS</label>
                </div>
                <div class="mb-3">
                  <label class="form-label">HTTPS 端口</label>
                  <input class="form-control form-control-sm" id="site-set-ssl-port" type="number" min="1" max="65535" value="443" />
                </div>
                <div class="mb-3">
                  <label class="form-label">证书文件 (.crt / .pem)</label>
                  <div class="input-group input-group-sm">
                    <input class="form-control" id="site-set-ssl-cert" placeholder="/path/to/fullchain.pem" />
                    <button type="button" class="btn btn-outline-secondary" id="site-set-ssl-cert-upload">上传</button>
                  </div>
                </div>
                <div class="mb-3">
                  <label class="form-label">私钥文件 (.key)</label>
                  <div class="input-group input-group-sm">
                    <input class="form-control" id="site-set-ssl-key" placeholder="/path/to/privkey.pem" />
                    <button type="button" class="btn btn-outline-secondary" id="site-set-ssl-key-upload">上传</button>
                  </div>
                </div>
                <input type="file" id="site-ssl-file-input" hidden accept=".pem,.crt,.cer,.key" />
                <p class="small text-secondary mb-3">也可手动上传证书到网站目录 <code>ssl/</code> 后保存启用。</p>
                <button type="button" class="btn btn-sm btn-primary" id="site-set-cert-save">保存并重载</button>
              </div>
              <div class="site-settings-panel" data-site-panel="nginx">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <h6 class="mb-0">Nginx 站点配置</h6>
                  <code class="small text-secondary" id="site-set-conf-path"></code>
                </div>
                <textarea class="form-control font-monospace site-conf-editor" id="site-set-nginx-conf" rows="16" spellcheck="false"></textarea>
                <div class="mt-2 d-flex gap-2">
                  <button type="button" class="btn btn-sm btn-primary" id="site-set-nginx-save">保存并重载</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary" id="site-set-nginx-reload">重新加载文件</button>
                </div>
              </div>
              <div class="site-settings-panel" data-site-panel="logs">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                  <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-primary active" id="site-log-tab-access" data-log-kind="access">访问日志</button>
                    <button type="button" class="btn btn-outline-primary" id="site-log-tab-error" data-log-kind="error">error.log</button>
                  </div>
                  <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary" id="site-log-refresh">刷新</button>
                    <button type="button" class="btn btn-outline-secondary" id="site-log-open-dir">打开日志目录</button>
                  </div>
                </div>
                <div class="site-log-view" id="site-log-view">加载中…</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="upload-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header py-2">
          <div>
            <h5 class="modal-title mb-0">上传到当前目录</h5>
            <code class="small text-secondary" id="upload-target-path">/</code>
          </div>
          <button type="button" class="btn-close" id="upload-modal-close" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <div class="upload-dropzone" id="upload-dropzone" tabindex="0">
            <div class="upload-dropzone-inner">
              <i class="bi bi-cloud-arrow-up upload-drop-icon"></i>
              <p class="mb-1">拖拽文件或文件夹到此处</p>
              <p class="small text-secondary mb-3">也可使用下方按钮选择，选完后统一上传</p>
              <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-primary" id="upload-pick-files">选择文件</button>
                <button type="button" class="btn btn-outline-primary" id="upload-pick-dir">选择目录</button>
              </div>
            </div>
            <input type="file" id="upload-input-files" hidden multiple />
            <input type="file" id="upload-input-dir" hidden webkitdirectory multiple />
          </div>
          <div class="d-flex justify-content-between align-items-center mt-3 mb-2">
            <span class="small text-secondary" id="upload-queue-summary">未选择文件</span>
            <button type="button" class="btn btn-sm btn-link text-decoration-none p-0" id="upload-clear-queue" hidden>清空列表</button>
          </div>
          <div class="upload-queue" id="upload-queue"></div>
          <div class="upload-progress mt-3" id="upload-progress" hidden>
            <div class="d-flex justify-content-between small mb-1">
              <span id="upload-progress-label">准备上传…</span>
              <span id="upload-progress-pct">0%</span>
            </div>
            <div class="progress" style="height: 8px;">
              <div class="progress-bar bg-teal" id="upload-progress-bar" role="progressbar" style="width: 0%"></div>
            </div>
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" id="upload-modal-cancel">取消</button>
          <button type="button" class="btn btn-sm btn-primary" id="upload-start" disabled>开始上传</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="site-analytics-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header py-2">
          <div class="d-flex align-items-center gap-2 flex-wrap">
            <h5 class="modal-title mb-0">日志分析 · <span id="analytics-site-name">—</span></h5>
            <select class="form-select form-select-sm" id="analytics-range" style="width:auto">
              <option value="1h">近 1 小时</option>
              <option value="6h">近 6 小时</option>
              <option value="24h" selected>近 24 小时</option>
              <option value="7d">近 7 天</option>
              <option value="30d">近 30 天</option>
              <option value="all">全部</option>
            </select>
          </div>
          <button type="button" class="btn-close" id="analytics-close" aria-label="关闭"></button>
        </div>
        <div class="modal-body" id="analytics-body">
          <div class="text-secondary small">加载中…</div>
        </div>
      </div>
    </div>
  </div>

  <div class="code-editor" id="code-editor" hidden>
    <div class="code-editor-backdrop" id="code-editor-backdrop"></div>
    <div class="code-editor-window">
      <header class="code-editor-bar">
        <div class="code-editor-meta">
          <strong id="code-editor-mode">编辑器</strong>
          <span id="code-editor-path"></span>
        </div>
        <button type="button" class="code-editor-x" id="code-editor-cancel" title="关闭" aria-label="关闭">×</button>
      </header>
      <div class="code-editor-main">
        <aside class="code-editor-tree">
          <div class="code-editor-tree-head">
            <button type="button" class="btn btn-sm btn-outline-light" id="editor-tree-up" title="上级">↑</button>
            <span class="code-editor-tree-path" id="editor-tree-path">/</span>
            <button type="button" class="btn btn-sm btn-outline-light" id="editor-tree-refresh" title="刷新">↻</button>
          </div>
          <div class="code-editor-tree-body" id="editor-tree"></div>
        </aside>
        <div class="code-editor-workspace">
          <div class="code-editor-tabs" id="editor-tabs"></div>
          <div id="monaco-host" class="monaco-host"></div>
        </div>
      </div>
    </div>
  </div>

  <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="/assets/monaco/vs/loader.js"></script>
  <script src="/assets/app.js"></script>
</body>
</html>