NGS/data/www/assets/app.js

(() => {
  const $ = (sel, root = document) => root.querySelector(sel);
  const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];

  const METRICS_INTERVAL_MS = 2000;
  const MAX_EDIT_BYTES = 10 * 1024 * 1024;

  const state = {
    status: null,
    sites: [],
    databases: [],
    busy: false,
    filesPath: "/",
    files: [],
    filesSelected: new Set(), // absolute paths in current dir
    filesLastClicked: "", // for shift-range select
    metricsTimer: null,
    metricsRange: "10m",
    metricCharts: null,
    editor: null,
    editorTabs: [], // { path, model, readonly, dirty, savedValue }
    editorActive: "",
    editorTreePath: "/",
    editorTreeEntries: [],
    editorBound: false,
    monacoReady: null,
    tasks: [],
    taskActive: 0,
    selectedTaskId: "",
    taskLogOffset: 0,
    taskPanelOpen: false,
    taskTab: "active", // active | history
    taskStatusMap: {},
    bsModal: null,
    uploadModal: null,
    uploadQueue: [], // { id, relativePath, file, status, error }
    uploadBusy: false,
    siteSettingsModal: null,
    siteSettings: null, // current site object
    siteLogKind: "access",
    siteLogIp: "",
    siteLogQuery: "",
    siteLogSearchTimer: null,
    siteSslUploadTarget: "", // cert | key
    analyticsModal: null,
    analyticsSite: "",
    analyticsCharts: [],
    siteModules: [],
    siteModulesFilter: "all",
    siteModuleOps: {}, // `${site}::${name_en}` -> { act, taskId }
    siteProxies: [],
    processes: [],
    procQuery: "",
    procSort: "cpu_percent",
    procSortDir: "desc",
    procTimer: null,
    siteNginxEditor: null,
    siteNginxPath: "",
  };

  const titles = {
    console: { title: "控制台", eyebrow: "Console" },
    software: { title: "软件管理", eyebrow: "Software" },
    sites: { title: "网站管理", eyebrow: "Websites" },
    mysql: { title: "数据库", eyebrow: "MySQL" },
    files: { title: "文件管理", eyebrow: "Files" },
    processes: { title: "进程管理", eyebrow: "Processes" },
  };

  function toast(msg, type = "ok") {
    const el = document.createElement("div");
    el.className = `toast-item ${type === "err" ? "err" : "ok"}`;
    el.textContent = msg;
    $("#toast-host").appendChild(el);
    setTimeout(() => {
      el.style.opacity = "0";
      el.style.transition = "opacity 0.25s ease";
      setTimeout(() => el.remove(), 260);
    }, type === "ok" ? 1600 : 3200);
  }

  async function api(path, options = {}) {
    const opts = {
      method: options.method || "GET",
      credentials: "same-origin",
      headers: { Accept: "application/json" },
      ...options,
    };
    if (opts.body && typeof opts.body === "object") {
      opts.headers = { ...(opts.headers || {}), "Content-Type": "application/json", Accept: "application/json" };
      opts.body = JSON.stringify(opts.body);
    }
    const res = await fetch(path, opts);
    let json = null;
    try {
      json = await res.json();
    } catch (_) {
      throw new Error(`无效响应 (${res.status})`);
    }
    if (json && Number(json.code) === 401) {
      location.replace("/login.html");
      throw new Error(json.msg || "未登录");
    }
    if (!json || json.code !== 200) {
      throw new Error((json && json.msg) || `请求失败 (${res.status})`);
    }
    return json.data;
  }

  async function withBusy(fn, btn) {
    if (state.busy) return;
    state.busy = true;
    if (btn) btn.disabled = true;
    try {
      await fn();
    } catch (err) {
      toast(err.message || String(err), "err");
    } finally {
      state.busy = false;
      if (btn) btn.disabled = false;
    }
  }

  function setView(name) {
    if (name === "overview" || name === "monitor") name = "console";
    $$(".nav-item[data-view]").forEach((b) => b.classList.toggle("is-active", b.dataset.view === name));
    $$(".view").forEach((v) => v.classList.toggle("is-active", v.dataset.viewPanel === name));
    const t = titles[name] || titles.console;
    $("#page-title").textContent = t.title;
    $("#page-eyebrow").textContent = t.eyebrow;
    history.replaceState(null, "", `#${name}`);
    if (name === "console") startMetrics();
    else stopMetrics();
    if (name === "files") loadFiles(state.filesPath);
    if (name === "processes") {
      loadProcesses().catch((err) => toast(err.message || String(err), "err"));
      startProcAutoRefresh();
    } else {
      stopProcAutoRefresh();
    }
  }

  function escapeHtml(s) {
    return String(s ?? "")
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  function formatBytes(n) {
    const v = Number(n) || 0;
    if (v < 1024) return `${v} B`;
    const units = ["KB", "MB", "GB", "TB"];
    let x = v / 1024;
    let i = 0;
    while (x >= 1024 && i < units.length - 1) {
      x /= 1024;
      i += 1;
    }
    return `${x.toFixed(x >= 10 ? 0 : 1)} ${units[i]}`;
  }

  function formatTime(sec) {
    if (!sec) return "—";
    const d = new Date(Number(sec) * 1000);
    if (Number.isNaN(d.getTime())) return "—";
    return d.toLocaleString();
  }

  function joinPath(base, name) {
    if (base === "/") return `/${name}`;
    return `${base.replace(/\/+$/, "")}/${name}`;
  }

  function parentPath(p) {
    if (!p || p === "/") return "/";
    const parts = p.replace(/\/+$/, "").split("/");
    parts.pop();
    return parts.length <= 1 ? "/" : parts.join("/");
  }

  function fileIcon(name, isDir) {
    if (isDir) return `<i class="bi bi-folder-fill file-icon dir"></i>`;
    const ext = (String(name).includes(".") ? String(name).split(".").pop() : "").toLowerCase();
    const map = {
      js: ["bi-filetype-js", "code"],
      mjs: ["bi-filetype-js", "code"],
      ts: ["bi-filetype-tsx", "code"],
      tsx: ["bi-filetype-tsx", "code"],
      jsx: ["bi-filetype-jsx", "code"],
      py: ["bi-filetype-py", "code"],
      go: ["bi-filetype-jsx", "code"],
      rs: ["bi-filetype-jsx", "code"],
      java: ["bi-filetype-java", "code"],
      c: ["bi-filetype-c", "code"],
      h: ["bi-filetype-h", "code"],
      cpp: ["bi-filetype-cpp", "code"],
      hpp: ["bi-filetype-hpp", "code"],
      php: ["bi-filetype-php", "code"],
      rb: ["bi-filetype-rb", "code"],
      sh: ["bi-terminal", "code"],
      bash: ["bi-terminal", "code"],
      html: ["bi-filetype-html", "web"],
      htm: ["bi-filetype-html", "web"],
      css: ["bi-filetype-css", "web"],
      scss: ["bi-filetype-scss", "web"],
      json: ["bi-filetype-json", "code"],
      xml: ["bi-filetype-xml", "code"],
      yaml: ["bi-filetype-yml", "cfg"],
      yml: ["bi-filetype-yml", "cfg"],
      md: ["bi-markdown", "doc"],
      txt: ["bi-filetype-txt", "doc"],
      log: ["bi-journal-text", "doc"],
      conf: ["bi-gear", "cfg"],
      cfg: ["bi-gear", "cfg"],
      ini: ["bi-gear", "cfg"],
      sql: ["bi-filetype-sql", "code"],
      png: ["bi-filetype-png", "img"],
      jpg: ["bi-filetype-jpg", "img"],
      jpeg: ["bi-filetype-jpg", "img"],
      gif: ["bi-filetype-gif", "img"],
      svg: ["bi-filetype-svg", "img"],
      webp: ["bi-file-earmark-image", "img"],
      zip: ["bi-file-earmark-zip", "doc"],
      gz: ["bi-file-earmark-zip", "doc"],
      tar: ["bi-file-earmark-zip", "doc"],
      pdf: ["bi-filetype-pdf", "doc"],
    };
    const [icon, cls] = map[ext] || ["bi-file-earmark", "doc"];
    return `<i class="bi ${icon} file-icon ${cls}"></i>`;
  }

  function langFromPath(path) {
    const name = String(path || "").split("/").pop() || "";
    const ext = (name.includes(".") ? name.split(".").pop() : "").toLowerCase();
    const map = {
      js: "javascript", mjs: "javascript", cjs: "javascript",
      ts: "typescript", tsx: "typescript", jsx: "javascript",
      json: "json", html: "html", htm: "html", css: "css", scss: "scss",
      md: "markdown", py: "python", go: "go", rs: "rust", java: "java",
      c: "c", h: "c", cpp: "cpp", cc: "cpp", hpp: "cpp", php: "php",
      sh: "shell", bash: "shell", sql: "sql", xml: "xml",
      yaml: "yaml", yml: "yaml", toml: "ini", ini: "ini", conf: "ini",
      cfg: "ini", txt: "plaintext", log: "plaintext",
    };
    return map[ext] || "plaintext";
  }

  async function ensureMonaco() {
    if (window.monaco) return Promise.resolve(window.monaco);
    if (state.monacoReady) return state.monacoReady;
    state.monacoReady = new Promise((resolve, reject) => {
      if (typeof require === "undefined") {
        reject(new Error("Monaco loader 未加载"));
        return;
      }
      // Workers resolve modules via fetch(); relative "/assets/..." paths are
      // invalid inside WorkerGlobalScope — force absolute URLs via baseUrl proxy.
      const monacoBase = `${window.location.origin}/assets/monaco`;
      window.MonacoEnvironment = {
        getWorkerUrl() {
          const code =
            `self.MonacoEnvironment={baseUrl:${JSON.stringify(monacoBase + "/")}};` +
            `importScripts(${JSON.stringify(monacoBase + "/vs/base/worker/workerMain.js")});`;
          return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
        },
      };
      window.require.config({ paths: { vs: "/assets/monaco/vs" } });
      window.require(["vs/editor/editor.main"], () => {
        if (window.monaco) resolve(window.monaco);
        else reject(new Error("Monaco 初始化失败"));
      }, reject);
    });
    return state.monacoReady;
  }

  function fileBaseName(path) {
    const parts = String(path || "").split("/").filter(Boolean);
    return parts.length ? parts[parts.length - 1] : path || "/";
  }

  function findTab(path) {
    return state.editorTabs.find((t) => t.path === path);
  }

  function activeTab() {
    return findTab(state.editorActive);
  }

  function syncEditorChrome() {
    const tab = activeTab();
    $("#code-editor-path").textContent = tab ? tab.path : "";
    $("#code-editor-mode").textContent = tab
      ? tab.readonly
        ? "预览"
        : tab.dirty
          ? "编辑 *"
          : "编辑"
      : "编辑器";
  }

  function renderEditorTabs() {
    const host = $("#editor-tabs");
    if (!state.editorTabs.length) {
      host.innerHTML = `<div class="small text-secondary px-2 py-1">未打开文件</div>`;
      return;
    }
    host.innerHTML = state.editorTabs
      .map((t) => {
        const active = t.path === state.editorActive ? " is-active" : "";
        const dirty = t.dirty ? " is-dirty" : "";
        return `<div class="editor-tab${active}${dirty}" data-tab-path="${escapeHtml(t.path)}" title="${escapeHtml(t.path)}">
          <span class="editor-tab-name">${escapeHtml(fileBaseName(t.path))}</span>
          <button type="button" class="editor-tab-close" data-close-tab="${escapeHtml(t.path)}" title="关闭">×</button>
        </div>`;
      })
      .join("");
  }

  function renderEditorTree() {
    $("#editor-tree-path").textContent = state.editorTreePath || "/";
    const host = $("#editor-tree");
    const entries = state.editorTreeEntries || [];
    if (!entries.length) {
      host.innerHTML = `<div class="text-secondary px-2 py-2 small">空目录</div>`;
      return;
    }
    host.innerHTML = entries
      .map((e) => {
        const full = joinPath(state.editorTreePath, e.name);
        const open = full === state.editorActive ? " is-open" : "";
        return `<button type="button" class="editor-tree-item${open}" data-tree-path="${escapeHtml(full)}" data-tree-dir="${e.is_dir ? "1" : "0"}" data-tree-size="${Number(e.size) || 0}">
          ${fileIcon(e.name, !!e.is_dir)}<span>${escapeHtml(e.name)}</span>
        </button>`;
      })
      .join("");
  }

  async function loadEditorTree(path) {
    const data = await api(`/api/files/list?path=${encodeURIComponent(path || "/")}`);
    state.editorTreePath = (data && data.path) || path || "/";
    state.editorTreeEntries = (data && data.entries) || [];
    renderEditorTree();
  }

  async function ensureEditorInstance() {
    const monaco = await ensureMonaco();
    if (state.editor) return monaco;
    const host = $("#monaco-host");
    host.innerHTML = "";
    state.editor = monaco.editor.create(host, {
      theme: "vs-dark",
      automaticLayout: true,
      minimap: { enabled: true },
      fontSize: 14,
      wordWrap: "on",
      scrollBeyondLastLine: false,
      tabSize: 2,
    });
    state.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
      withBusy(async () => {
        await saveActiveTab();
      });
    });
    return monaco;
  }

  async function switchEditorTab(path) {
    const tab = findTab(path);
    if (!tab || !state.editor) return;
    const prev = activeTab();
    if (prev && prev.model && state.editor) {
      prev.viewState = state.editor.saveViewState();
    }
    state.editorActive = path;
    state.editor.setModel(tab.model);
    state.editor.updateOptions({ readOnly: !!tab.readonly });
    if (tab.viewState) state.editor.restoreViewState(tab.viewState);
    state.editor.focus();
    syncEditorChrome();
    renderEditorTabs();
    renderEditorTree();
  }

  async function closeEditorTab(path) {
    const idx = state.editorTabs.findIndex((t) => t.path === path);
    if (idx < 0) return;
    const tab = state.editorTabs[idx];
    if (
      tab.dirty &&
      !(await confirmDialog({
        title: "未保存",
        message: `「${fileBaseName(path)}」未保存，确认关闭？`,
        danger: true,
      }))
    ) {
      return;
    }
    if (tab.model) tab.model.dispose();
    state.editorTabs.splice(idx, 1);
    if (state.editorActive === path) {
      const next = state.editorTabs[idx] || state.editorTabs[idx - 1] || null;
      if (next) await switchEditorTab(next.path);
      else {
        state.editorActive = "";
        if (state.editor) state.editor.setModel(null);
        syncEditorChrome();
        renderEditorTabs();
        renderEditorTree();
      }
    } else {
      renderEditorTabs();
      renderEditorTree();
    }
  }

  async function openCodeEditor({ path, content, readonly }) {
    $("#code-editor").hidden = false;
    applyDialogSize(document.querySelector(".code-editor-window"), "ngs.dialogSize.codeEditor", {
      minW: 560,
      minH: 360,
    });
    const monaco = await ensureEditorInstance();
    let tab = findTab(path);
    if (!tab) {
      const model = monaco.editor.createModel(content || "", langFromPath(path));
      tab = {
        path,
        model,
        readonly: !!readonly,
        dirty: false,
        savedValue: content || "",
        viewState: null,
      };
      model.onDidChangeContent(() => {
        tab.dirty = model.getValue() !== tab.savedValue;
        syncEditorChrome();
        renderEditorTabs();
      });
      state.editorTabs.push(tab);
    } else if (!readonly && content != null && !tab.dirty) {
      tab.model.setValue(content);
      tab.savedValue = content;
      tab.dirty = false;
    }
    if (!state.editorTreePath || state.editorTreePath === "/") {
      await loadEditorTree(parentPath(path) || "/").catch(() => loadEditorTree("/"));
    } else {
      renderEditorTree();
    }
    await switchEditorTab(path);
  }

  async function closeCodeEditor() {
    const dirty = state.editorTabs.some((t) => t.dirty);
    if (
      dirty &&
      !(await confirmDialog({
        title: "未保存",
        message: "有未保存的文件，确认关闭编辑器？",
        danger: true,
      }))
    ) {
      return;
    }
    state.editorTabs.forEach((t) => {
      if (t.model) t.model.dispose();
    });
    state.editorTabs = [];
    state.editorActive = "";
    if (state.editor) {
      state.editor.dispose();
      state.editor = null;
    }
    $("#monaco-host").innerHTML = "";
    $("#editor-tabs").innerHTML = "";
    $("#editor-tree").innerHTML = "";
    $("#code-editor").hidden = true;
  }

  async function saveActiveTab() {
    const tab = activeTab();
    if (!tab || tab.readonly || !tab.model) return;
    const content = tab.model.getValue();
    if (new TextEncoder().encode(content).length > MAX_EDIT_BYTES) {
      throw new Error("内容超过 10MB，无法保存");
    }
    await api("/api/files/write", {
      method: "POST",
      body: { path: tab.path, content },
    });
    tab.savedValue = content;
    tab.dirty = false;
    syncEditorChrome();
    renderEditorTabs();
    toast("保存成功");
    if ((location.hash || "").slice(1) === "files") {
      await loadFiles(state.filesPath).catch(() => {});
    }
  }

  async function openFileInEditor(path, size, readonly) {
    if (Number(size) > MAX_EDIT_BYTES) {
      throw new Error("文件超过 10MB，不支持在线编辑/预览");
    }
    const existing = findTab(path);
    if (existing) {
      $("#code-editor").hidden = false;
      await ensureEditorInstance();
      await switchEditorTab(path);
      await loadEditorTree(parentPath(path) || state.editorTreePath || "/").catch(() => {});
      return;
    }
    const data = await api(`/api/files/read?path=${encodeURIComponent(path)}`);
    await openCodeEditor({
      path,
      content: (data && data.content) || "",
      readonly: !!readonly,
    });
    await loadEditorTree(parentPath(path) || "/").catch(() => loadEditorTree("/"));
  }

  async function openConfigFile(path) {
    if (!path) throw new Error("配置文件路径未知");
    await openFileInEditor(path, 0, false);
  }

  function formatRate(bps) {
    const v = Math.max(0, Number(bps) || 0);
    if (v < 1024) return `${Math.round(v)} B/s`;
    let x = v / 1024;
    const units = ["KB/s", "MB/s", "GB/s", "TB/s"];
    let i = 0;
    while (x >= 1024 && i < units.length - 1) {
      x /= 1024;
      i += 1;
    }
    const digits = x >= 100 ? 0 : x >= 10 ? 1 : 2;
    return `${x.toFixed(digits)} ${units[i]}`;
  }

  function formatMetricLabel(timeMs, range) {
    const d = new Date(Number(timeMs) || 0);
    const hh = String(d.getHours()).padStart(2, "0");
    const mm = String(d.getMinutes()).padStart(2, "0");
    const ss = String(d.getSeconds()).padStart(2, "0");
    if (range === "1m" || range === "10m" || range === "30m") {
      return `${hh}:${mm}:${ss}`;
    }
    if (range === "1h" || range === "6h") {
      return `${hh}:${mm}`;
    }
    const mo = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${mo}-${day} ${hh}:${mm}`;
  }

  function chartDefaults() {
    return {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 280 },
      interaction: { mode: "index", intersect: false },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: "rgba(15,23,42,0.92)",
          titleFont: { size: 11 },
          bodyFont: { size: 12 },
          padding: 10,
          cornerRadius: 8,
        },
      },
      scales: {
        x: {
          grid: { display: false },
          ticks: {
            maxRotation: 0,
            autoSkip: true,
            maxTicksLimit: 6,
            color: "#94a3b8",
            font: { size: 10 },
          },
          border: { display: false },
        },
        y: {
          beginAtZero: true,
          grid: { color: "rgba(148,163,184,0.18)" },
          ticks: { color: "#94a3b8", font: { size: 10 } },
          border: { display: false },
        },
      },
      elements: {
        line: { tension: 0.35, borderWidth: 2 },
        point: { radius: 0, hoverRadius: 3 },
      },
    };
  }

  function makePercentChart(canvas, label, color) {
    const fill = color.replace(")", ", 0.14)").replace("rgb", "rgba");
    return new Chart(canvas, {
      type: "line",
      data: {
        labels: [],
        datasets: [{
          label,
          data: [],
          borderColor: color,
          backgroundColor: fill,
          fill: true,
        }],
      },
      options: {
        ...chartDefaults(),
        scales: {
          ...chartDefaults().scales,
          y: {
            ...chartDefaults().scales.y,
            suggestedMax: 100,
            ticks: {
              ...chartDefaults().scales.y.ticks,
              callback: (v) => `${Number(v).toFixed(0)}%`,
            },
          },
        },
        plugins: {
          ...chartDefaults().plugins,
          tooltip: {
            ...chartDefaults().plugins.tooltip,
            callbacks: {
              label: (ctx) => `${ctx.dataset.label}: ${Number(ctx.parsed.y).toFixed(1)}%`,
            },
          },
        },
      },
    });
  }

  function makeNetChart(canvas) {
    return new Chart(canvas, {
      type: "line",
      data: {
        labels: [],
        datasets: [
          {
            label: "下行",
            data: [],
            borderColor: "#0d9488",
            backgroundColor: "rgba(13, 148, 136, 0.14)",
            fill: true,
          },
          {
            label: "上行",
            data: [],
            borderColor: "#ea580c",
            backgroundColor: "rgba(234, 88, 12, 0.12)",
            fill: true,
          },
        ],
      },
      options: {
        ...chartDefaults(),
        plugins: {
          ...chartDefaults().plugins,
          legend: {
            display: true,
            position: "top",
            align: "end",
            labels: { boxWidth: 10, boxHeight: 10, font: { size: 11 }, color: "#64748b" },
          },
          tooltip: {
            ...chartDefaults().plugins.tooltip,
            callbacks: {
              label: (ctx) => `${ctx.dataset.label}: ${formatRate(ctx.parsed.y)}`,
            },
          },
        },
        scales: {
          ...chartDefaults().scales,
          y: {
            ...chartDefaults().scales.y,
            ticks: {
              ...chartDefaults().scales.y.ticks,
              callback: (v) => formatRate(v),
            },
          },
        },
      },
    });
  }

  function ensureMetricCharts() {
    if (state.metricCharts || typeof Chart === "undefined") return state.metricCharts;
    state.metricCharts = {
      cpu: makePercentChart($("#chart-cpu"), "CPU", "rgb(15, 118, 110)"),
      mem: makePercentChart($("#chart-mem"), "内存", "rgb(3, 105, 161)"),
      disk: makePercentChart($("#chart-disk"), "磁盘", "rgb(180, 83, 9)"),
      net: makeNetChart($("#chart-net")),
    };
    return state.metricCharts;
  }

  function applyHistoryToCharts(items, range) {
    const charts = ensureMetricCharts();
    if (!charts) return;
    const labels = items.map((p) => formatMetricLabel(p.time_ms, range));
    const cpu = items.map((p) => Number(p.cpu_percent) || 0);
    const mem = items.map((p) => Number(p.mem_percent) || 0);
    const disk = items.map((p) => Number(p.disk_percent) || 0);
    const rx = items.map((p) => Number(p.net_rx_bps) || 0);
    const tx = items.map((p) => Number(p.net_tx_bps) || 0);
    const applyOne = (chart, data) => {
      chart.data.labels = labels;
      chart.data.datasets[0].data = data;
      chart.update("none");
    };
    applyOne(charts.cpu, cpu);
    applyOne(charts.mem, mem);
    applyOne(charts.disk, disk);
    charts.net.data.labels = labels;
    charts.net.data.datasets[0].data = rx;
    charts.net.data.datasets[1].data = tx;
    charts.net.update("none");

    const last = items.length ? items[items.length - 1] : null;
    if (!last) {
      $("#cpu-badge").textContent = "—";
      $("#mem-badge").textContent = "—";
      $("#disk-badge").textContent = "—";
      $("#net-badge").textContent = "—";
      return;
    }
    $("#cpu-badge").textContent =
      `${(Number(last.cpu_percent) || 0).toFixed(1)}% · ${last.cpu_cores ?? "—"} 核`;
    $("#mem-badge").textContent =
      `${formatBytes(last.mem_used)} / ${formatBytes(last.mem_total)} · ${(Number(last.mem_percent) || 0).toFixed(1)}%`;
    $("#disk-badge").textContent =
      `${formatBytes(last.disk_used)} / ${formatBytes(last.disk_total)} · ${(Number(last.disk_percent) || 0).toFixed(1)}%`;
    $("#net-badge").innerHTML =
      `<span style="color:#0d9488">↓ ${formatRate(last.net_rx_bps)}</span>` +
      ` · ` +
      `<span style="color:#ea580c">↑ ${formatRate(last.net_tx_bps)}</span>`;
  }

  async function pollMetrics() {
    try {
      const range = state.metricsRange || "10m";
      const data = await api(`/api/system/metrics/history?range=${encodeURIComponent(range)}`);
      applyHistoryToCharts((data && data.items) || [], range);
    } catch (_) {}
  }

  function startMetrics() {
    if (state.metricsTimer) return;
    const sel = $("#metrics-range");
    if (sel) {
      state.metricsRange = sel.value || "10m";
      sel.onchange = () => {
        state.metricsRange = sel.value || "10m";
        pollMetrics();
      };
    }
    ensureMetricCharts();
    pollMetrics();
    state.metricsTimer = setInterval(pollMetrics, METRICS_INTERVAL_MS);
  }

  function stopMetrics() {
    if (state.metricsTimer) {
      clearInterval(state.metricsTimer);
      state.metricsTimer = null;
    }
  }

  function statusPill(installed, running) {
    if (!installed) return `<span class="badge text-bg-secondary">未安装</span>`;
    if (running === true) return `<span class="badge text-bg-success">运行中</span>`;
    if (running === false) return `<span class="badge text-bg-warning">已停止</span>`;
    return `<span class="badge text-bg-primary">已安装</span>`;
  }

  function softCard(name, info, withActions) {
    const key = name.toLowerCase();
    const installed = !!info.installed;
    const running = info.running;
    const bits = [`版本 ${escapeHtml(info.version || "—")}`];
    if (info.port) bits.push(`端口 ${escapeHtml(info.port)}`);
    let actions = "";
    if (withActions) {
      const btns = [];
      if (!installed) {
        btns.push(`<button type="button" class="btn btn-sm btn-primary" data-act="${key}-install">安装</button>`);
      } else {
        if (key === "nginx" || key === "mysql" || key === "redis") {
          if (running) {
            btns.push(`<button type="button" class="btn btn-sm btn-outline-secondary" data-act="${key}-stop">停止</button>`);
            if (key === "nginx") btns.push(`<button type="button" class="btn btn-sm btn-outline-secondary" data-act="${key}-reload">重载</button>`);
          } else {
            btns.push(`<button type="button" class="btn btn-sm btn-primary" data-act="${key}-start">启动</button>`);
          }
          if (info.conf) {
            btns.push(`<button type="button" class="btn btn-sm btn-outline-primary" data-act="${key}-config" data-conf="${escapeHtml(info.conf)}">配置</button>`);
          }
        }
        btns.push(`<button type="button" class="btn btn-sm btn-outline-danger" data-act="${key}-uninstall">卸载</button>`);
      }
      actions = `<div class="d-flex flex-wrap gap-1 mt-2">${btns.join("")}</div>`;
    }
    return `<div class="col-md-6 col-xl-3">
      <div class="card soft-card h-100" data-soft="${key}">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start gap-2">
            <div>
              <div class="fw-semibold">${name}</div>
              <div class="small text-secondary">${installed ? (running === true ? "服务可用" : running === false ? "已安装未运行" : "已就绪") : "尚未安装"}</div>
            </div>
            ${statusPill(installed, running)}
          </div>
          <div class="small text-secondary mt-2">${bits.map((b) => escapeHtml(b)).join(" · ")}</div>
          ${actions}
        </div>
      </div>
    </div>`;
  }

  function renderConsole() {
    const s = state.status || {};
    $("#overview-sites").textContent = `网站 ${s.sites ?? 0} · API 15665`;
    $("#top-meta").textContent = `站点 ${s.sites ?? 0}`;
  }

  function renderSoftware() {
    const s = state.status || {};
    $("#software-grid").innerHTML = [
      softCard("Nginx", s.nginx || {}, true),
      softCard("Fastweb", s.fastweb || {}, true),
      softCard("MySQL", s.mysql || {}, true),
      softCard("Redis", s.redis || {}, true),
    ].join("");
  }

  function siteSslExpireCell(site) {
    if (!site || !site.ssl_enable) {
      return `<span class="text-secondary">—</span>`;
    }
    const days = Number(site.ssl_days_left);
    if (!Number.isFinite(days) || site.ssl_days_left === -1) {
      return `<span class="text-secondary">—</span>`;
    }
    if (days < 0) {
      return `<span class="text-danger" title="${escapeHtml(site.ssl_not_after || "")}">已过期</span>`;
    }
    const cls = days <= 30 ? "text-danger" : "text-success";
    return `<span class="${cls}" title="${escapeHtml(site.ssl_not_after || "")}">${days}天</span>`;
  }

  function renderSites() {
    const tbody = $("#sites-table tbody");
    if (!state.sites.length) {
      tbody.innerHTML = `<tr><td colspan="7" class="text-secondary text-center py-4">暂无网站</td></tr>`;
      return;
    }
    tbody.innerHTML = state.sites
      .map((s) => {
        const running = !!s.running;
        const st = running
          ? `<span class="badge text-bg-success">运行中</span>`
          : `<span class="badge text-bg-warning">已停止</span>`;
        const startDis = running ? " disabled" : "";
        const stopDis = running ? "" : " disabled";
        const domains = Array.isArray(s.domains) && s.domains.length
          ? s.domains
          : String(s.domain || "").split(/[\s,;]+/).filter(Boolean);
        const primaryTok = domains[0] || "";
        const primary = parseDomainToken(primaryTok);
        const domainText = primaryTok
          ? primaryTok + (domains.length > 1 ? ` +${domains.length - 1}` : "")
          : "—";
        const openUrl = s.ssl_enable && Number(s.ssl_port)
          ? `https://${primary.host}:${s.ssl_port}`
          : `http://${primary.host}:${primary.port || 80}`;
        const root = s.root || "";
        return `<tr>
          <td><strong>${escapeHtml(s.name)}</strong></td>
          <td>${escapeHtml(s.type)}</td>
          <td><a class="sites-link" href="${escapeHtml(openUrl)}" target="_blank" rel="noopener" title="${escapeHtml(domains.join(", "))}">${escapeHtml(domainText)}</a></td>
          <td><button type="button" class="btn btn-link btn-sm sites-link sites-path p-0" data-site-path="${escapeHtml(root)}" title="${escapeHtml(root)}">${escapeHtml(root || "—")}</button></td>
          <td>${siteSslExpireCell(s)}</td>
          <td>${st}</td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-primary" data-site="${escapeHtml(s.name)}" data-act="site-start"${startDis}>启动</button>
              <button type="button" class="btn btn-outline-primary" data-site="${escapeHtml(s.name)}" data-act="site-stop"${stopDis}>停止</button>
              <button type="button" class="btn btn-outline-primary" data-site="${escapeHtml(s.name)}" data-act="site-restart"${stopDis}>重启</button>
              <button type="button" class="btn btn-outline-primary" data-site="${escapeHtml(s.name)}" data-act="site-config">配置</button>
              <button type="button" class="btn btn-outline-primary" data-site="${escapeHtml(s.name)}" data-act="site-analyze">分析</button>
              <button type="button" class="btn btn-outline-danger" data-site="${escapeHtml(s.name)}" data-act="site-delete">删除</button>
            </div>
          </td>
        </tr>`;
      })
      .join("");
  }

  function renderDatabases() {
    const tbody = $("#db-table tbody");
    if (!state.databases.length) {
      tbody.innerHTML = `<tr><td colspan="6" class="text-secondary text-center py-4">暂无数据库记录</td></tr>`;
      return;
    }
    tbody.innerHTML = state.databases
      .map((d) => `<tr>
        <td><strong>${escapeHtml(d.name)}</strong></td>
        <td>${escapeHtml(d.user)}</td>
        <td><code>${escapeHtml(d.password)}</code></td>
        <td>${escapeHtml(d.access)}</td>
        <td>${escapeHtml(d.host || "—")}</td>
        <td class="text-end">
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-outline-secondary" data-db="${escapeHtml(d.name)}" data-act="db-access">权限</button>
            <button type="button" class="btn btn-outline-danger" data-db="${escapeHtml(d.name)}" data-act="db-drop">删除</button>
          </div>
        </td>
      </tr>`)
      .join("");
  }

  function stopProcAutoRefresh() {
    if (state.procTimer) {
      clearInterval(state.procTimer);
      state.procTimer = null;
    }
  }

  function startProcAutoRefresh() {
    stopProcAutoRefresh();
    const on = $("#proc-auto")?.checked;
    if (!on) return;
    state.procTimer = setInterval(() => {
      const panel = $("#view-processes");
      if (!panel || !panel.classList.contains("is-active")) return;
      loadProcesses({ silent: true }).catch(() => {});
    }, 3000);
  }

  function sortedProcesses(rows) {
    const key = state.procSort || "cpu_percent";
    const dir = state.procSortDir === "asc" ? 1 : -1;
    const list = rows.slice();
    list.sort((a, b) => {
      const va = a[key];
      const vb = b[key];
      if (typeof va === "string" || typeof vb === "string") {
        return String(va || "").localeCompare(String(vb || ""), "zh") * dir;
      }
      return ((Number(va) || 0) - (Number(vb) || 0)) * dir;
    });
    return list;
  }

  function renderProcesses() {
    const tbody = $("#proc-table tbody");
    if (!tbody) return;
    $$("#proc-table th.proc-sort").forEach((th) => {
      const active = th.dataset.procSort === state.procSort;
      th.classList.toggle("is-active", active);
      if (active) th.dataset.sortDir = state.procSortDir || "desc";
      else th.removeAttribute("data-sort-dir");
    });
    const rows = sortedProcesses(state.processes || []);
    $("#proc-count").textContent = `${rows.length} 个进程`;
    if (!rows.length) {
      tbody.innerHTML = `<tr><td colspan="9" class="text-secondary text-center py-4">暂无进程</td></tr>`;
      return;
    }
    tbody.innerHTML = rows
      .map((p) => {
        const cpu = Number(p.cpu_percent) || 0;
        const mem = Number(p.mem_percent) || 0;
        const protect = Number(p.pid) <= 1;
        return `<tr>
          <td><code>${escapeHtml(p.pid)}</code></td>
          <td>${escapeHtml(p.user || "—")}</td>
          <td>${cpu.toFixed(1)}</td>
          <td>${mem.toFixed(1)}</td>
          <td>${escapeHtml(formatBytes(p.rss || 0))}</td>
          <td><span class="badge text-bg-light">${escapeHtml(p.state || "—")}</span></td>
          <td class="proc-name" title="${escapeHtml(p.name || "")}">${escapeHtml(p.name || "—")}</td>
          <td class="proc-cmd" title="${escapeHtml(p.cmdline || "")}">${escapeHtml(p.cmdline || "—")}</td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-secondary" data-proc-act="term" data-pid="${escapeHtml(p.pid)}"${protect ? " disabled" : ""}>结束</button>
              <button type="button" class="btn btn-outline-danger" data-proc-act="kill" data-pid="${escapeHtml(p.pid)}"${protect ? " disabled" : ""}>强杀</button>
            </div>
          </td>
        </tr>`;
      })
      .join("");
  }

  async function loadProcesses(opts = {}) {
    const q = String(state.procQuery || "").trim();
    const qs = q ? `?q=${encodeURIComponent(q)}` : "";
    const tbody = $("#proc-table tbody");
    if (!opts.silent && tbody) {
      tbody.innerHTML = `<tr><td colspan="9" class="text-secondary text-center py-4">加载中…</td></tr>`;
    }
    const data = await api(`/api/system/processes${qs}`);
    state.processes = (data && data.items) || [];
    renderProcesses();
  }

  async function killProcess(pid, signalName) {
    const label = signalName === "KILL" ? "强制结束 (SIGKILL)" : "结束 (SIGTERM)";
    const ok = await confirmDialog({
      title: label,
      message: `确认向进程 PID ${pid} 发送 ${signalName}？`,
      okText: signalName === "KILL" ? "强杀" : "结束",
      danger: true,
    });
    if (!ok) return;
    await api("/api/system/processes/kill", {
      method: "POST",
      body: { pid: Number(pid), signal_name: signalName },
    });
    toast(`已发送 ${signalName} → PID ${pid}`);
    await loadProcesses({ silent: true });
  }

  function renderCrumbs(path) {
    const parts = path === "/" ? [] : path.replace(/^\/+/, "").split("/").filter(Boolean);
    let cur = "";
    const bits = [`<button type="button" data-path="/">/</button>`];
    parts.forEach((p, i) => {
      cur += `/${p}`;
      // Root button already shows "/", so only add "/" separators between later segments.
      if (i > 0) bits.push(`<span>/</span>`);
      bits.push(`<button type="button" data-path="${escapeHtml(cur)}">${escapeHtml(p)}</button>`);
    });
    $("#files-crumbs").innerHTML = bits.join("");
  }

  function clearFilesSelection() {
    state.filesSelected = new Set();
    state.filesLastClicked = "";
  }

  function visibleFilePaths() {
    return (state.files || []).map((f) => joinPath(state.filesPath, f.name));
  }

  function updateFilesSelectionUi() {
    const n = state.filesSelected.size;
    const bulk = $("#files-bulk-actions");
    const countEl = $("#files-selected-count");
    if (bulk) bulk.hidden = n === 0;
    if (countEl) countEl.textContent = `已选 ${n}`;
    const paths = visibleFilePaths();
    const all = $("#files-select-all");
    if (all) {
      const selectedVisible = paths.filter((p) => state.filesSelected.has(p)).length;
      all.checked = paths.length > 0 && selectedVisible === paths.length;
      all.indeterminate = selectedVisible > 0 && selectedVisible < paths.length;
      all.disabled = paths.length === 0;
    }
  }

  function setFileSelected(path, selected) {
    if (!path) return;
    if (selected) state.filesSelected.add(path);
    else state.filesSelected.delete(path);
  }

  function toggleFileRange(fromPath, toPath, selected) {
    const paths = visibleFilePaths();
    const a = paths.indexOf(fromPath);
    const b = paths.indexOf(toPath);
    if (a < 0 || b < 0) {
      setFileSelected(toPath, selected);
      return;
    }
    const lo = Math.min(a, b);
    const hi = Math.max(a, b);
    for (let i = lo; i <= hi; i++) setFileSelected(paths[i], selected);
  }

  function renderFiles() {
    renderCrumbs(state.filesPath);
    const tbody = $("#files-table tbody");
    const valid = new Set(visibleFilePaths());
    state.filesSelected = new Set([...state.filesSelected].filter((p) => valid.has(p)));
    if (!state.files.length) {
      tbody.innerHTML = `<tr><td colspan="6" class="text-secondary text-center py-4">空目录</td></tr>`;
      updateFilesSelectionUi();
      return;
    }
    tbody.innerHTML = state.files
      .map((f) => {
        const isDir = !!f.is_dir;
        const fullPath = joinPath(state.filesPath, f.name);
        const full = escapeHtml(fullPath);
        const size = Number(f.size) || 0;
        const tooBig = !isDir && size > MAX_EDIT_BYTES;
        const checked = state.filesSelected.has(fullPath);
        const editBtn = isDir
          ? ""
          : tooBig
            ? `<button type="button" class="btn btn-outline-secondary btn-sm" disabled title="超过 10MB">编辑</button>`
            : `<button type="button" class="btn btn-outline-secondary btn-sm" data-act="file-edit" data-path="${full}" data-size="${size}">编辑</button>`;
        return `<tr class="${checked ? "is-selected" : ""}" data-path="${full}" data-dir="${isDir ? "1" : "0"}">
          <td class="files-check-col">
            <input class="form-check-input files-row-check" type="checkbox" data-path="${full}" ${checked ? "checked" : ""} aria-label="选择 ${escapeHtml(f.name)}" />
          </td>
          <td>
            <span class="files-name" data-open="${full}" data-dir="${isDir ? "1" : "0"}" data-size="${size}" ${tooBig ? 'data-too-big="1"' : ""}>
              ${fileIcon(f.name, isDir)}${escapeHtml(f.name)}
            </span>
          </td>
          <td>${isDir ? "目录" : "文件"}</td>
          <td>${isDir ? "—" : formatBytes(size)}</td>
          <td>${formatTime(f.mtime)}</td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              ${editBtn}
              ${isDir ? "" : `<a class="btn btn-outline-secondary btn-sm" href="/api/files/download?path=${encodeURIComponent(fullPath)}">下载</a>`}
              <button type="button" class="btn btn-outline-secondary btn-sm" data-act="file-rename" data-path="${full}" data-name="${escapeHtml(f.name)}">重命名</button>
              <button type="button" class="btn btn-outline-danger btn-sm" data-act="file-delete" data-path="${full}" data-dir="${isDir ? "1" : "0"}">删除</button>
            </div>
          </td>
        </tr>`;
      })
      .join("");
    updateFilesSelectionUi();
  }

  async function loadFiles(path) {
    try {
      const data = await api(`/api/files/list?path=${encodeURIComponent(path || "/")}`);
      const nextPath = (data && data.path) || path || "/";
      if (nextPath !== state.filesPath) clearFilesSelection();
      state.filesPath = nextPath;
      state.files = (data && data.entries) || [];
      renderFiles();
    } catch (err) {
      toast(err.message || String(err), "err");
    }
  }

  async function deleteSelectedFiles() {
    const items = [...state.filesSelected];
    if (!items.length) return;
    const meta = new Map(
      (state.files || []).map((f) => [joinPath(state.filesPath, f.name), !!f.is_dir])
    );
    const hasDir = items.some((p) => meta.get(p));
    const ok = await confirmDialog({
      title: "删除选中项",
      message: hasDir
        ? `确认删除选中的 ${items.length} 项？目录将递归删除，且不可恢复。`
        : `确认删除选中的 ${items.length} 个文件？此操作不可恢复。`,
      okText: "删除",
      danger: true,
    });
    if (!ok) return;
    await withBusy(async () => {
      let failed = 0;
      for (const path of items) {
        const isDir = !!meta.get(path);
        try {
          await api("/api/files/delete", {
            method: "POST",
            body: { path, recursive: isDir },
          });
        } catch (_) {
          failed += 1;
        }
      }
      clearFilesSelection();
      await loadFiles(state.filesPath);
      if (failed) toast(`删除完成，${failed} 项失败`, "err");
      else toast("已删除选中项");
    });
  }

  function showStackedModal(modalInstance, modalEl) {
    if (!modalInstance || !modalEl) return;
    const nested = $$(".modal.show").some((el) => el !== modalEl);
    const raiseBackdrop = () => {
      if (!nested) return;
      modalEl.style.zIndex = "2010";
      const backs = [...document.querySelectorAll(".modal-backdrop")];
      if (backs.length) {
        const last = backs[backs.length - 1];
        last.style.zIndex = "2000";
        last.classList.add("modal-backdrop-nested");
      }
    };
    modalEl.addEventListener("shown.bs.modal", raiseBackdrop, { once: true });
    modalEl.addEventListener(
      "hidden.bs.modal",
      () => {
        modalEl.style.zIndex = "";
      },
      { once: true }
    );
    modalInstance.show();
    // Backdrop is inserted synchronously on show(); raise it ASAP.
    if (nested) {
      raiseBackdrop();
      requestAnimationFrame(raiseBackdrop);
    }
  }

  function openModal({ title, bodyHtml, onSubmit }) {
    $("#modal-title").textContent = title;
    $("#modal-body").innerHTML = bodyHtml;
    const okBtn = $("#modal-ok");
    const cancelBtn = $("#modal-cancel");
    okBtn.textContent = "确定";
    okBtn.className = "btn btn-sm btn-primary";
    cancelBtn.hidden = false;
    cancelBtn.textContent = "取消";
    const form = $("#modal-form");
    const cleanup = () => {
      form.onsubmit = null;
      state.bsModal.hide();
    };
    $("#modal-close").onclick = cleanup;
    cancelBtn.onclick = cleanup;
    form.onsubmit = async (e) => {
      e.preventDefault();
      await withBusy(async () => {
        await onSubmit(new FormData(form));
        cleanup();
        // Avoid full refresh when editing inside site settings.
        if (!(state.siteSettingsModal && $("#site-settings-modal")?.classList.contains("show"))) {
          await refresh();
        }
      }, okBtn);
    };
    showStackedModal(state.bsModal, $("#modal"));
  }

  function confirmDialog({
    title = "确认",
    message = "",
    okText = "确定",
    cancelText = "取消",
    danger = false,
  } = {}) {
    return new Promise((resolve) => {
      const form = $("#modal-form");
      const okBtn = $("#modal-ok");
      const cancelBtn = $("#modal-cancel");
      const modalEl = $("#modal");
      $("#modal-title").textContent = title;
      $("#modal-body").innerHTML = `<p class="mb-0">${escapeHtml(message)}</p>`;
      okBtn.textContent = okText;
      okBtn.className = danger ? "btn btn-sm btn-danger" : "btn btn-sm btn-primary";
      cancelBtn.hidden = false;
      cancelBtn.textContent = cancelText;

      let settled = false;
      const finish = (ok) => {
        if (settled) return;
        settled = true;
        form.onsubmit = null;
        modalEl.removeEventListener("hidden.bs.modal", onHidden);
        okBtn.textContent = "确定";
        okBtn.className = "btn btn-sm btn-primary";
        cancelBtn.hidden = false;
        cancelBtn.textContent = "取消";
        state.bsModal.hide();
        resolve(!!ok);
      };
      const onHidden = () => finish(false);

      $("#modal-close").onclick = () => finish(false);
      cancelBtn.onclick = () => finish(false);
      form.onsubmit = (e) => {
        e.preventDefault();
        finish(true);
      };
      modalEl.addEventListener("hidden.bs.modal", onHidden);
      showStackedModal(state.bsModal, modalEl);
    });
  }

  function alertDialog({
    title = "提示",
    message = "",
    okText = "知道了",
  } = {}) {
    return new Promise((resolve) => {
      const form = $("#modal-form");
      const okBtn = $("#modal-ok");
      const cancelBtn = $("#modal-cancel");
      const modalEl = $("#modal");
      $("#modal-title").textContent = title;
      $("#modal-body").innerHTML =
        `<pre class="alert-dialog-msg mb-0">${escapeHtml(message || "未知错误")}</pre>`;
      okBtn.textContent = okText;
      okBtn.className = "btn btn-sm btn-primary";
      cancelBtn.hidden = true;

      let settled = false;
      const finish = () => {
        if (settled) return;
        settled = true;
        form.onsubmit = null;
        modalEl.removeEventListener("hidden.bs.modal", onHidden);
        okBtn.textContent = "确定";
        okBtn.className = "btn btn-sm btn-primary";
        cancelBtn.hidden = false;
        cancelBtn.textContent = "取消";
        state.bsModal.hide();
        resolve();
      };
      const onHidden = () => finish();

      $("#modal-close").onclick = () => finish();
      cancelBtn.onclick = () => finish();
      form.onsubmit = (e) => {
        e.preventDefault();
        finish();
      };
      modalEl.addEventListener("hidden.bs.modal", onHidden);
      showStackedModal(state.bsModal, modalEl);
    });
  }

  function syncSiteFormFields(root) {
    const type = root.querySelector('[name="type"]')?.value || "static";
    const tip = root.querySelector(".field-upstream-tip");
    if (tip) {
      tip.textContent =
        type === "fastweb"
          ? "Fastweb 站点会自动探测并分配后端端口，反代可在站点设置「反向代理」中查看"
          : "静态站仅需名称/域名；如需反代请创建后在「反向代理」中添加";
    }
  }

  async function refresh() {
    try {
      const [status, sites] = await Promise.all([api("/api/status"), api("/api/websites")]);
      state.status = status;
      state.sites = Array.isArray(sites) ? sites : [];
      try {
        state.databases = (await api("/api/mysql/databases")) || [];
      } catch (_) {
        state.databases = [];
      }
      $("#live-dot").className = "live is-ok small d-flex align-items-center gap-2";
      $("#live-label").textContent = "在线";
      renderConsole();
      renderSoftware();
      renderSites();
      renderDatabases();
      const hash = (location.hash || "#console").slice(1);
      if (hash === "files") await loadFiles(state.filesPath);
    } catch (err) {
      $("#live-dot").className = "live is-bad small d-flex align-items-center gap-2";
      $("#live-label").textContent = "离线";
      toast(err.message || String(err), "err");
    }
  }

  async function softAction(act, btn) {
    if (act.endsWith("-config")) {
      const conf = btn.dataset.conf;
      await withBusy(async () => openConfigFile(conf), btn);
      return;
    }
    const map = {
      "nginx-install": ["/api/nginx/install", {}],
      "nginx-uninstall": ["/api/nginx/uninstall", {}],
      "nginx-start": ["/api/nginx/start", {}],
      "nginx-stop": ["/api/nginx/stop", {}],
      "nginx-reload": ["/api/nginx/reload", {}],
      "fastweb-install": ["/api/fastweb/install", { debug: false }],
      "fastweb-uninstall": ["/api/fastweb/uninstall", {}],
      "mysql-install": ["/api/mysql/install", {}],
      "mysql-uninstall": ["/api/mysql/uninstall", {}],
      "mysql-start": ["/api/mysql/start", {}],
      "mysql-stop": ["/api/mysql/stop", {}],
      "redis-install": ["/api/redis/install", {}],
      "redis-uninstall": ["/api/redis/uninstall", {}],
      "redis-start": ["/api/redis/start", {}],
      "redis-stop": ["/api/redis/stop", {}],
    };
    const item = map[act];
    if (!item) return;
    if (act.endsWith("-uninstall")) {
      const ok = await confirmDialog({
        title: "确认卸载",
        message: "确认卸载该软件？此操作不可恢复。",
        okText: "卸载",
        danger: true,
      });
      if (!ok) return;
    }
    const queued = act.endsWith("-install") || act.endsWith("-uninstall");
    await withBusy(async () => {
      if (!queued) toast("执行中…");
      const data = await api(item[0], { method: "POST", body: item[1] });
      if (queued && data && data.task_id) {
        toast("已加入任务队列");
        await refreshTasks();
      } else {
        toast("完成");
        await refresh();
      }
    }, btn);
  }

  function updateTaskBadge() {
    const n = state.taskActive || 0;
    $("#task-badge-count").textContent = String(n);
    $("#task-badge").classList.toggle("has-active", n > 0);
  }

  function isActiveTask(t) {
    return t && (t.status === "running" || t.status === "pending");
  }

  function visibleTasks() {
    if (state.taskTab === "history") {
      return state.tasks.filter((t) => !isActiveTask(t));
    }
    return state.tasks.filter(isActiveTask);
  }

  function pickDefaultTaskId(preferId) {
    const list = visibleTasks();
    if (preferId && list.some((t) => t.id === preferId)) return preferId;
    const running = list.find((t) => t.status === "running");
    if (running) return running.id;
    if (list.length) return list[0].id;
    return "";
  }

  function syncTaskTabs() {
    const activeBtn = $("#task-tab-active");
    const histBtn = $("#task-tab-history");
    const clearBtn = $("#task-clear-finished");
    const onActive = state.taskTab === "active";
    activeBtn.className = onActive ? "btn btn-warning" : "btn btn-outline-light";
    histBtn.className = !onActive ? "btn btn-light" : "btn btn-outline-light";
    clearBtn.classList.toggle("d-none", onActive);
    const nActive = state.tasks.filter(isActiveTask).length;
    const nHist = state.tasks.length - nActive;
    activeBtn.textContent = nActive ? `进行中 (${nActive})` : "进行中";
    histBtn.textContent = nHist ? `历史任务 (${nHist})` : "历史任务";
  }

  function renderTaskList() {
    const host = $("#task-list");
    syncTaskTabs();
    const list = visibleTasks();
    if (!list.length) {
      host.innerHTML = `<div class="p-3 text-secondary small">${
        state.taskTab === "history" ? "暂无历史任务" : "当前没有进行中的任务"
      }</div>`;
      return;
    }
    host.innerHTML = list
      .map((t) => {
        const selected = t.id === state.selectedTaskId ? " is-active" : "";
        const running = t.status === "running" ? " is-running" : "";
        const st =
          t.status === "running" ? "运行中" :
          t.status === "pending" ? "排队" :
          t.status === "success" ? "成功" :
          t.status === "failed" ? "失败" : (t.status || "—");
        const dot = t.status === "running" ? `<span class="task-running-dot"></span>` : "";
        return `<button type="button" class="task-item${selected}${running}" data-task-id="${escapeHtml(t.id)}">
          <strong>${dot}${escapeHtml(t.title || t.type)}</strong>
          <span class="small opacity-75">${escapeHtml(st)} · ${escapeHtml(t.type || "")}</span>
        </button>`;
      })
      .join("");
  }

  function selectTask(id, resetLog) {
    if (!id) {
      state.selectedTaskId = "";
      $("#task-log").textContent = "";
      $("#task-log-title").textContent = "日志";
      $("#task-log-status").textContent = "—";
      $("#task-log-status").className = "badge text-bg-secondary";
      return;
    }
    if (resetLog || id !== state.selectedTaskId) {
      state.selectedTaskId = id;
      state.taskLogOffset = 0;
      $("#task-log").textContent = "";
    } else {
      state.selectedTaskId = id;
    }
  }

  async function refreshTasks() {
    try {
      const data = await api("/api/tasks");
      const tasks = (data && data.tasks) || [];
      let softChanged = false;
      for (const t of tasks) {
        const prev = state.taskStatusMap[t.id];
        const now = t.status || "";
        if (
          prev &&
          (prev === "running" || prev === "pending") &&
          (now === "success" || now === "failed") &&
          /\.(install|uninstall)$/.test(t.type || "") &&
          !(t.type || "").startsWith("fastweb.module.")
        ) {
          softChanged = true;
        }
        if (
          prev &&
          (prev === "running" || prev === "pending") &&
          now === "success" &&
          (t.type || "") === "ssl.letsencrypt"
        ) {
          softChanged = true;
          if (state.siteSettings && state.siteSettingsModal) {
            const name = state.siteSettings.name;
            refresh().then(() => {
              const latest = state.sites.find((s) => s.name === name);
              if (latest) {
                Object.assign(state.siteSettings, latest);
                fillSiteSettingsForm(state.siteSettings);
                $("#site-set-ssl-enable").checked = true;
                setSiteCertSubTab("pem");
                loadSiteSslPem().catch(() => {});
                toast("证书已申请并写入 /ngs/conf/ssl/<域名>/");
              }
            }).catch(() => {});
          }
        }
        state.taskStatusMap[t.id] = now;
      }
      state.tasks = tasks;
      state.taskActive = Number((data && data.active) || 0);
      updateTaskBadge();
      syncModuleOpsFromTasks(tasks);
      if (state.taskPanelOpen) {
        const nextId = pickDefaultTaskId(state.selectedTaskId);
        if (nextId !== state.selectedTaskId) selectTask(nextId, true);
        else if (!nextId) selectTask("", true);
        renderTaskList();
        if (state.selectedTaskId) await pollTaskLog(false);
      }
      if (softChanged) await refresh();
    } catch (_) {}
  }

  async function pollTaskLog(forceBottom) {
    if (!state.selectedTaskId) return;
    const id = state.selectedTaskId;
    try {
      const data = await api(`/api/tasks/log?id=${encodeURIComponent(id)}&offset=${state.taskLogOffset}`);
      const pre = $("#task-log");
      if (!pre) return;
      const lines = (data && data.lines) || [];
      if (data && data.truncated) {
        pre.textContent = "";
        state.taskLogOffset = Number(data.log_base) || 0;
      }
      if (lines.length) {
        const atBottom = pre.scrollHeight - pre.scrollTop - pre.clientHeight < 48;
        pre.textContent += (pre.textContent ? "\n" : "") + lines.join("\n");
        if (forceBottom || atBottom) pre.scrollTop = pre.scrollHeight;
      }
      if (data && data.next_offset != null && data.next_offset !== "") {
        state.taskLogOffset = Number(data.next_offset);
      }
      const meta = state.tasks.find((t) => t.id === id) || {};
      $("#task-log-title").textContent = meta.title || id;
      const st = $("#task-log-status");
      const status = (data && data.status) || meta.status || "—";
      st.className = "badge " + (
        status === "running" || status === "success" ? "text-bg-success" :
        status === "pending" ? "text-bg-warning" :
        status === "failed" ? "text-bg-danger" : "text-bg-secondary"
      );
      st.textContent =
        status === "running" ? "运行中" :
        status === "pending" ? "排队" :
        status === "success" ? "成功" :
        status === "failed" ? "失败" : status;
    } catch (_) {}
  }

  function setTaskTab(tab) {
    state.taskTab = tab === "history" ? "history" : "active";
    const nextId = pickDefaultTaskId("");
    selectTask(nextId, true);
    renderTaskList();
    if (state.selectedTaskId) pollTaskLog(true);
  }

  function openTaskPanel(taskId) {
    state.taskPanelOpen = true;
    $("#task-panel").hidden = false;
    applyDialogSize(document.querySelector(".task-panel-dialog"), "ngs.dialogSize.task", {
      minW: 480,
      minH: 320,
    });
    if (taskId) {
      const t = state.tasks.find((x) => x.id === taskId);
      state.taskTab = t && !isActiveTask(t) ? "history" : "active";
      selectTask(taskId, true);
    } else {
      state.taskTab = "active";
    }
    refreshTasks();
  }

  function closeTaskPanel() {
    state.taskPanelOpen = false;
    $("#task-panel").hidden = true;
  }

  function clampDialogSize(w, h, minW, minH) {
    const maxW = Math.max(minW, window.innerWidth - 40);
    const maxH = Math.max(minH, window.innerHeight - 40);
    return {
      w: Math.min(Math.max(minW, Math.round(w)), maxW),
      h: Math.min(Math.max(minH, Math.round(h)), maxH),
    };
  }

  function readDialogSize(storageKey) {
    if (!storageKey) return null;
    try {
      const v = JSON.parse(localStorage.getItem(storageKey) || "null");
      if (v && v.w && v.h) return v;
    } catch (_) {}
    // migrate old task panel key
    if (storageKey === "ngs.dialogSize.task") {
      try {
        const legacy = JSON.parse(localStorage.getItem("ngs.taskPanelSize") || "null");
        if (legacy && legacy.w && legacy.h) return legacy;
      } catch (_) {}
    }
    return null;
  }

  function saveDialogSize(storageKey, w, h, minW, minH) {
    const c = clampDialogSize(w, h, minW, minH);
    if (storageKey) {
      try {
        localStorage.setItem(storageKey, JSON.stringify(c));
      } catch (_) {}
    }
    return c;
  }

  function applyDialogSize(el, storageKey, opts = {}) {
    if (!el) return;
    const minW = opts.minW || 360;
    const minH = opts.minH || 240;
    const size = opts.size || readDialogSize(storageKey);
    if (!size) return;
    const c = clampDialogSize(size.w, size.h, minW, minH);
    el.style.width = c.w + "px";
    el.style.height = c.h + "px";
    el.classList.add("has-custom-size");
  }

  function enableDialogResize(target, opts = {}) {
    if (!target || target.dataset.resizeBound === "1") return;
    const minW = opts.minW || 360;
    const minH = opts.minH || 240;
    const storageKey = opts.storageKey || "";
    const handleHost = opts.handleHost || target;
    const showEventEl = opts.showEventEl || null;

    target.dataset.resizeBound = "1";
    target.classList.add("is-resizable-dialog");

    let handle = handleHost.querySelector("[data-dialog-resize]");
    if (!handle) {
      handle = document.createElement("div");
      handle.className = "dialog-resize";
      handle.dataset.dialogResize = "";
      handle.title = "拖动调整大小";
      handle.setAttribute("aria-hidden", "true");
      handleHost.appendChild(handle);
    }
    if (getComputedStyle(handleHost).position === "static") {
      handleHost.style.position = "relative";
    }

    applyDialogSize(target, storageKey, { minW, minH });

    let startX = 0;
    let startY = 0;
    let startW = 0;
    let startH = 0;

    const onMove = (e) => {
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      const c = clampDialogSize(startW + dx, startH + dy, minW, minH);
      target.style.width = c.w + "px";
      target.style.height = c.h + "px";
      target.classList.add("has-custom-size");
      if (typeof opts.onResize === "function") opts.onResize(c);
    };

    const onUp = () => {
      target.classList.remove("is-resizing");
      document.body.style.cursor = "";
      document.removeEventListener("pointermove", onMove);
      document.removeEventListener("pointerup", onUp);
      const saved = saveDialogSize(storageKey, target.offsetWidth, target.offsetHeight, minW, minH);
      if (typeof opts.onResize === "function") opts.onResize(saved);
    };

    handle.addEventListener("pointerdown", (e) => {
      e.preventDefault();
      e.stopPropagation();
      startX = e.clientX;
      startY = e.clientY;
      startW = target.offsetWidth;
      startH = target.offsetHeight;
      target.classList.add("is-resizing");
      document.body.style.cursor = "nwse-resize";
      document.addEventListener("pointermove", onMove);
      document.addEventListener("pointerup", onUp);
    });

    if (showEventEl) {
      showEventEl.addEventListener("shown.bs.modal", () => {
        applyDialogSize(target, storageKey, { minW, minH });
      });
    }

    window.addEventListener("resize", () => {
      if (!target.classList.contains("has-custom-size")) return;
      applyDialogSize(target, storageKey, {
        minW,
        minH,
        size: { w: target.offsetWidth, h: target.offsetHeight },
      });
    });
  }

  function bindAllDialogResize() {
    enableDialogResize(document.querySelector(".task-panel-dialog"), {
      storageKey: "ngs.dialogSize.task",
      minW: 480,
      minH: 320,
    });
    enableDialogResize(document.querySelector(".code-editor-window"), {
      storageKey: "ngs.dialogSize.codeEditor",
      minW: 560,
      minH: 360,
      onResize: () => {
        if (state.editor && typeof state.editor.layout === "function") {
          state.editor.layout();
        }
      },
    });

    const modalSpecs = [
      { id: "modal", key: "generic", minW: 360, minH: 280 },
      {
        id: "site-settings-modal",
        key: "siteSettings",
        minW: 640,
        minH: 420,
        onResize: () => layoutSiteNginxEditor(),
      },
      { id: "upload-modal", key: "upload", minW: 520, minH: 360 },
      { id: "site-analytics-modal", key: "analytics", minW: 720, minH: 420 },
    ];
    modalSpecs.forEach((spec) => {
      const root = document.getElementById(spec.id);
      if (!root) return;
      const dialog = root.querySelector(".modal-dialog");
      const content = root.querySelector(".modal-content");
      if (!dialog || !content) return;
      enableDialogResize(dialog, {
        storageKey: "ngs.dialogSize." + spec.key,
        minW: spec.minW,
        minH: spec.minH,
        handleHost: content,
        showEventEl: root,
        onResize: spec.onResize,
      });
    });
    $("#site-settings-modal")?.addEventListener("shown.bs.modal", () => {
      requestAnimationFrame(() => layoutSiteNginxEditor());
    });
    $("#site-settings-modal")?.addEventListener("hidden.bs.modal", () => {
      // keep editor instance; just clear dirty content path tracking
    });
  }

  function fileToBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const s = String(reader.result || "");
        const i = s.indexOf(",");
        resolve(i >= 0 ? s.slice(i + 1) : s);
      };
      reader.onerror = () => reject(new Error("读取文件失败"));
      reader.readAsDataURL(file);
    });
  }

  const MAX_UPLOAD_BYTES = 48 * 1024 * 1024;

  function normalizeRelPath(p) {
    return String(p || "")
      .replace(/\\/g, "/")
      .replace(/^\/+/, "")
      .replace(/\/{2,}/g, "/");
  }

  function renderUploadQueue() {
    const host = $("#upload-queue");
    const summary = $("#upload-queue-summary");
    const clearBtn = $("#upload-clear-queue");
    const startBtn = $("#upload-start");
    const q = state.uploadQueue;
    if (!q.length) {
      host.innerHTML = "";
      summary.textContent = "未选择文件";
      clearBtn.hidden = true;
      startBtn.disabled = true;
      return;
    }
    const total = q.reduce((n, it) => n + (it.file ? it.file.size : 0), 0);
    summary.textContent = `${q.length} 项 · ${formatBytes(total)}`;
    clearBtn.hidden = state.uploadBusy;
    startBtn.disabled = state.uploadBusy || !q.some((it) => it.status === "pending");
    host.innerHTML = q
      .map((it) => {
        const st =
          it.status === "ok"
            ? "完成"
            : it.status === "err"
              ? "失败"
              : it.status === "uploading"
                ? "上传中"
                : it.status === "skip"
                  ? "跳过"
                  : "待传";
        const cls =
          it.status === "ok"
            ? "is-ok"
            : it.status === "err"
              ? "is-err"
              : it.status === "uploading"
                ? "is-run"
                : "";
        return `<div class="upload-queue-item ${cls}" title="${escapeHtml(it.error || it.relativePath)}">
          <span class="path">${escapeHtml(it.relativePath)}</span>
          <span class="size">${it.file ? formatBytes(it.file.size) : "—"}</span>
          <span class="st">${st}</span>
        </div>`;
      })
      .join("");
  }

  function addUploadItems(items) {
    const seen = new Set(state.uploadQueue.map((it) => it.relativePath));
    let added = 0;
    for (const it of items) {
      const relativePath = normalizeRelPath(it.relativePath);
      if (!relativePath || seen.has(relativePath)) continue;
      if (relativePath.split("/").includes("..")) continue;
      if (it.file && it.file.size > MAX_UPLOAD_BYTES) {
        state.uploadQueue.push({
          id: `${Date.now()}-${added}-${relativePath}`,
          relativePath,
          file: it.file,
          status: "err",
          error: "单文件超过 48MB",
        });
      } else {
        state.uploadQueue.push({
          id: `${Date.now()}-${added}-${relativePath}`,
          relativePath,
          file: it.file || null,
          isDir: !!it.isDir,
          status: "pending",
          error: "",
        });
      }
      seen.add(relativePath);
      added += 1;
    }
    renderUploadQueue();
  }

  function itemsFromFileList(fileList, fromDirPicker) {
    const out = [];
    for (const file of fileList || []) {
      let rel = fromDirPicker
        ? file.webkitRelativePath || file.name
        : file.webkitRelativePath || file.name;
      rel = normalizeRelPath(rel);
      if (!rel) continue;
      out.push({ relativePath: rel, file });
    }
    return out;
  }

  function readAllDirectoryEntries(reader) {
    return new Promise((resolve, reject) => {
      const all = [];
      const readBatch = () => {
        reader.readEntries((entries) => {
          if (!entries.length) {
            resolve(all);
            return;
          }
          all.push(...entries);
          readBatch();
        }, reject);
      };
      readBatch();
    });
  }

  async function traverseFileSystemEntry(entry, prefix = "") {
    const name = entry.name;
    const base = prefix ? `${prefix}${name}` : name;
    if (entry.isFile) {
      const file = await new Promise((resolve, reject) => entry.file(resolve, reject));
      return [{ relativePath: base, file }];
    }
    if (entry.isDirectory) {
      const reader = entry.createReader();
      const children = await readAllDirectoryEntries(reader);
      if (!children.length) {
        return [{ relativePath: base, file: null, isDir: true }];
      }
      const out = [];
      for (const child of children) {
        out.push(...(await traverseFileSystemEntry(child, `${base}/`)));
      }
      return out;
    }
    return [];
  }

  async function itemsFromDataTransfer(dt) {
    const items = dt && dt.items ? [...dt.items] : [];
    if (items.some((it) => typeof it.webkitGetAsEntry === "function" && it.webkitGetAsEntry())) {
      const out = [];
      for (const it of items) {
        if (it.kind !== "file") continue;
        const entry = it.webkitGetAsEntry && it.webkitGetAsEntry();
        if (!entry) continue;
        out.push(...(await traverseFileSystemEntry(entry)));
      }
      return out;
    }
    return itemsFromFileList(dt.files, false);
  }

  function setUploadProgress(doneBytes, totalBytes, label) {
    const wrap = $("#upload-progress");
    wrap.hidden = false;
    const pct = totalBytes > 0 ? Math.min(100, Math.round((doneBytes / totalBytes) * 100)) : 0;
    $("#upload-progress-bar").style.width = `${pct}%`;
    $("#upload-progress-pct").textContent = `${pct}%`;
    $("#upload-progress-label").textContent = label || "";
  }

  function uploadFileWithProgress(path, file, onProgress) {
    return fileToBase64(file).then(
      (content_base64) =>
        new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("POST", "/api/files/upload");
          xhr.setRequestHeader("Content-Type", "application/json");
          xhr.setRequestHeader("Accept", "application/json");
          xhr.upload.onprogress = (e) => {
            if (e.lengthComputable && onProgress) onProgress(e.loaded, e.total);
          };
          xhr.onload = () => {
            let json = null;
            try {
              json = JSON.parse(xhr.responseText || "{}");
            } catch (_) {
              reject(new Error(`无效响应 (${xhr.status})`));
              return;
            }
            if (json && Number(json.code) === 401) {
              location.replace("/login.html");
              reject(new Error(json.msg || "未登录"));
              return;
            }
            if (!json || json.code !== 200) {
              reject(new Error((json && json.msg) || `上传失败 (${xhr.status})`));
              return;
            }
            resolve(json.data);
          };
          xhr.onerror = () => reject(new Error("网络错误"));
          xhr.send(JSON.stringify({ path, content_base64 }));
        })
    );
  }

  function openUploadModal() {
    state.uploadQueue = [];
    state.uploadBusy = false;
    $("#upload-target-path").textContent = state.filesPath || "/";
    $("#upload-progress").hidden = true;
    $("#upload-progress-bar").style.width = "0%";
    $("#upload-progress-pct").textContent = "0%";
    $("#upload-progress-label").textContent = "";
    renderUploadQueue();
    state.uploadModal.show();
  }

  function closeUploadModal() {
    if (state.uploadBusy) return;
    state.uploadModal.hide();
  }

  async function startUploadQueue() {
    if (state.uploadBusy) return;
    const pending = state.uploadQueue.filter((it) => it.status === "pending");
    if (!pending.length) return;
    state.uploadBusy = true;
    renderUploadQueue();
    $("#upload-start").disabled = true;
    $("#upload-modal-cancel").disabled = true;
    $("#upload-modal-close").disabled = true;
    $("#upload-clear-queue").hidden = true;
    $("#upload-pick-files").disabled = true;
    $("#upload-pick-dir").disabled = true;

    const totalBytes = pending.reduce((n, it) => n + (it.file ? it.file.size : 0), 0) || 1;
    let completedBytes = 0;
    let ok = 0;
    let fail = 0;

    try {
      for (const it of pending) {
        it.status = "uploading";
        renderUploadQueue();
        const dest = joinPath(state.filesPath || "/", it.relativePath);
        setUploadProgress(
          completedBytes,
          totalBytes,
          `正在上传 ${it.relativePath}`
        );
        try {
          if (it.isDir && !it.file) {
            await api("/api/files/mkdir", { method: "POST", body: { path: dest } }).catch((err) => {
              const msg = err.message || String(err);
              if (!/已存在|exists/i.test(msg)) throw err;
            });
          } else {
            setUploadProgress(completedBytes, totalBytes, `读取 ${it.relativePath}`);
            await uploadFileWithProgress(dest, it.file, (loaded, total) => {
              const filePct = total > 0 ? loaded / total : 1;
              setUploadProgress(
                completedBytes + (it.file.size * filePct),
                totalBytes,
                `正在上传 ${it.relativePath}`
              );
            });
            completedBytes += it.file.size;
          }
          it.status = "ok";
          ok += 1;
        } catch (err) {
          it.status = "err";
          it.error = err.message || String(err);
          fail += 1;
          if (it.file) completedBytes += it.file.size;
        }
        renderUploadQueue();
      }
      setUploadProgress(totalBytes, totalBytes, fail ? `完成：成功 ${ok}，失败 ${fail}` : `全部上传成功（${ok}）`);
      if (ok) toast(fail ? `上传完成（成功 ${ok}，失败 ${fail}）` : "上传完成");
      else if (fail) toast(`上传失败（${fail}）`, "err");
      await loadFiles(state.filesPath);
    } finally {
      state.uploadBusy = false;
      $("#upload-modal-cancel").disabled = false;
      $("#upload-modal-close").disabled = false;
      $("#upload-pick-files").disabled = false;
      $("#upload-pick-dir").disabled = false;
      renderUploadQueue();
    }
  }

  function bindUploadModal() {
    state.uploadModal = new bootstrap.Modal($("#upload-modal"), { backdrop: "static" });
    const zone = $("#upload-dropzone");

    $("#btn-files-upload").addEventListener("click", () => openUploadModal());
    $("#upload-modal-close").addEventListener("click", () => closeUploadModal());
    $("#upload-modal-cancel").addEventListener("click", () => closeUploadModal());
    $("#upload-clear-queue").addEventListener("click", () => {
      if (state.uploadBusy) return;
      state.uploadQueue = [];
      renderUploadQueue();
    });
    $("#upload-start").addEventListener("click", () => startUploadQueue());
    $("#upload-pick-files").addEventListener("click", () => $("#upload-input-files").click());
    $("#upload-pick-dir").addEventListener("click", () => $("#upload-input-dir").click());
    $("#upload-input-files").addEventListener("change", (e) => {
      addUploadItems(itemsFromFileList(e.target.files, false));
      e.target.value = "";
    });
    $("#upload-input-dir").addEventListener("change", (e) => {
      addUploadItems(itemsFromFileList(e.target.files, true));
      e.target.value = "";
    });

    ["dragenter", "dragover"].forEach((ev) => {
      zone.addEventListener(ev, (e) => {
        e.preventDefault();
        e.stopPropagation();
        zone.classList.add("is-dragover");
      });
    });
    ["dragleave", "drop"].forEach((ev) => {
      zone.addEventListener(ev, (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (ev === "dragleave") zone.classList.remove("is-dragover");
      });
    });
    zone.addEventListener("drop", async (e) => {
      zone.classList.remove("is-dragover");
      if (state.uploadBusy) return;
      try {
        const items = await itemsFromDataTransfer(e.dataTransfer);
        addUploadItems(items);
      } catch (err) {
        toast(err.message || String(err), "err");
      }
    });
  }

  function setSiteSettingsTab(tab) {
    $$(".site-settings-tab").forEach((b) => b.classList.toggle("is-active", b.dataset.siteTab === tab));
    $$(".site-settings-panel").forEach((p) => p.classList.toggle("is-active", p.dataset.sitePanel === tab));
    if (tab === "cert") {
      setSiteCertSubTab(state.siteCertTab || "pem");
      loadSiteSslPem().catch(() => {});
      renderSslDomainChecklist(selectedSslHosts());
    }
    if (tab === "nginx") {
      loadSiteNginxConf().catch((err) => toast(err.message || String(err), "err"));
      requestAnimationFrame(() => layoutSiteNginxEditor());
    }
    if (tab === "logs") loadSiteLog().catch((err) => toast(err.message || String(err), "err"));
    if (tab === "modules") loadSiteModules().catch((err) => toast(err.message || String(err), "err"));
    if (tab === "proxy") loadSiteProxies().catch((err) => toast(err.message || String(err), "err"));
  }

  function syncSiteModulesTab(site) {
    const tab = $("#site-tab-modules");
    if (!tab) return;
    const show = !!(site && site.type === "fastweb");
    tab.classList.toggle("d-none", !show);
    if (!show && tab.classList.contains("is-active")) {
      setSiteSettingsTab("domain");
    }
  }

  function syncSiteProxyTab(site) {
    const tab = $("#site-tab-proxy");
    if (!tab) return;
    const show = !!site;
    tab.classList.toggle("d-none", !show);
    if (!show && tab.classList.contains("is-active")) {
      setSiteSettingsTab("domain");
    }
  }

  function renderSiteProxies() {
    const tbody = $("#site-proxy-tbody");
    if (!tbody) return;
    const rows = state.siteProxies || [];
    if (!rows.length) {
      tbody.innerHTML = `<tr><td colspan="5" class="text-secondary text-center py-3">暂无 URL 代理，点击右上角添加</td></tr>`;
      return;
    }
    tbody.innerHTML = rows
      .map((r) => {
        const targetLabel =
          (r.target_type === "unix" ? "unix:" : "") + (r.target || "");
        return `<tr>
          <td><code>${escapeHtml(r.path || "")}</code></td>
          <td class="small text-break">${escapeHtml(targetLabel)}</td>
          <td><code class="small">${escapeHtml(r.host || "$http_host")}</code></td>
          <td class="small text-secondary">${escapeHtml(r.remark || "—")}</td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-outline-secondary" data-proxy-act="edit" data-proxy-id="${escapeHtml(r.id)}">编辑</button>
              <button type="button" class="btn btn-outline-danger" data-proxy-act="del" data-proxy-id="${escapeHtml(r.id)}">删除</button>
            </div>
          </td>
        </tr>`;
      })
      .join("");
  }

  async function loadSiteProxies() {
    const site = state.siteSettings;
    const tbody = $("#site-proxy-tbody");
    if (!site) {
      state.siteProxies = [];
      if (tbody) tbody.innerHTML = "";
      return;
    }
    if (tbody) tbody.innerHTML = `<tr><td colspan="5" class="text-secondary text-center py-3">加载中…</td></tr>`;
    const data = await api(`/api/websites/proxies?name=${encodeURIComponent(site.name)}`);
    state.siteProxies = (data && data.proxies) || [];
    renderSiteProxies();
  }

  function openUrlProxyDialog(existing) {
    const isEdit = !!(existing && existing.id);
    const targetType = (existing && existing.target_type) || "url";
    let targetVal = (existing && existing.target) || "";
    if (targetType === "url" && targetVal.startsWith("http://")) {
      targetVal = targetVal.slice(7);
    } else if (targetType === "url" && targetVal.startsWith("https://")) {
      // keep full https URL in input
    }
    openModal({
      title: isEdit ? "编辑 URL 代理" : "添加 URL 代理",
      bodyHtml: `
        <div class="mb-3">
          <label class="form-label"><span class="text-danger">*</span> 代理目录</label>
          <input class="form-control form-control-sm" name="path" required
            value="${escapeHtml((existing && existing.path) || "")}"
            placeholder="请输入代理目录，例如：/web" />
        </div>
        <div class="mb-3">
          <label class="form-label"><span class="text-danger">*</span> 目标</label>
          <div class="input-group input-group-sm">
            <select class="form-select" name="target_type" style="max-width:7.5rem">
              <option value="url"${targetType !== "unix" ? " selected" : ""}>URL地址</option>
              <option value="unix"${targetType === "unix" ? " selected" : ""}>UNIX</option>
            </select>
            <input class="form-control" name="target" required
              value="${escapeHtml(targetVal)}"
              placeholder="http:// 或 /tmp/panel.sock" />
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label"><span class="text-danger">*</span> 发送域名(host)</label>
          <input class="form-control form-control-sm" name="host" required
            value="${escapeHtml((existing && existing.host) || "$http_host")}" />
        </div>
        <div class="mb-3">
          <label class="form-label">备注</label>
          <input class="form-control form-control-sm" name="remark"
            value="${escapeHtml((existing && existing.remark) || "")}"
            placeholder="请输入备注,可为空" />
        </div>
        <ul class="small text-secondary mb-0 ps-3">
          <li>目标可填写 URL（如 <code>http://127.0.0.1:15700</code> 或 <code>https://bucket.cos...myqcloud.com</code>）或 UNIX Socket（如 <code>/tmp/panel.sock</code>）。</li>
          <li>发送域名会写入请求头 Host，默认 <code>$http_host</code>；代理外站（如 COS）时请改为目标域名。</li>
          <li>代理目录填 <code>/</code> 将接管整站；子目录如 <code>/web</code> 仅匹配该前缀。静态站无 <code>/</code> 规则时仍提供本地静态文件。</li>
        </ul>`,
      onSubmit: async (fd) => {
        const site = state.siteSettings;
        if (!site) throw new Error("未找到网站");
        let target = String(fd.get("target") || "").trim();
        const target_type = String(fd.get("target_type") || "url");
        if (target_type === "url" && target && !/^https?:\/\//i.test(target)) {
          target = "http://" + target;
        }
        const body = {
          name: site.name,
          path: String(fd.get("path") || "").trim(),
          target_type,
          target,
          host: String(fd.get("host") || "").trim() || "$http_host",
          remark: String(fd.get("remark") || "").trim(),
        };
        if (isEdit) {
          body.id = existing.id;
          await api("/api/websites/proxies/update", { method: "POST", body });
          toast("已更新");
        } else {
          await api("/api/websites/proxies", { method: "POST", body });
          toast("已添加");
        }
        await loadSiteProxies();
      },
    });
  }

  function moduleOpKey(site, nameEn) {
    return `${site || ""}::${nameEn || ""}`;
  }

  function getModuleOp(nameEn) {
    const site = state.siteSettings && state.siteSettings.name;
    if (!site || !nameEn) return null;
    return state.siteModuleOps[moduleOpKey(site, nameEn)] || null;
  }

  function setModuleOp(site, nameEn, op) {
    const key = moduleOpKey(site, nameEn);
    if (!op) delete state.siteModuleOps[key];
    else state.siteModuleOps[key] = op;
  }

  function renderSiteModules() {
    const host = $("#site-modules-list");
    if (!host) return;
    const filter = state.siteModulesFilter || "all";
    const rows = (state.siteModules || []).filter(
      (m) => filter === "all" || m.type === filter
    );
    if (!rows.length) {
      host.innerHTML = `<div class="text-secondary small py-3">暂无模块</div>`;
      return;
    }
    host.innerHTML = rows
      .map((m) => {
        const installed = !!m.installed;
        const op = getModuleOp(m.name_en);
        let statusBadge;
        let btn;
        if (op && (op.act === "install" || op.act === "uninstall")) {
          const busyText = op.act === "uninstall" ? "卸载中" : "安装中";
          statusBadge = `<span class="badge text-bg-warning ms-1">${busyText}</span>`;
          btn = `<button type="button" class="btn btn-sm btn-outline-secondary" disabled>
            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>${busyText}
          </button>`;
        } else if (installed) {
          statusBadge = `<span class="badge text-bg-success ms-1">已安装</span>`;
          btn = `<button type="button" class="btn btn-sm btn-outline-danger" data-mod-act="uninstall" data-mod-name="${escapeHtml(m.name_en)}">卸载</button>`;
        } else {
          statusBadge = `<span class="badge text-bg-secondary ms-1">未安装</span>`;
          btn = `<button type="button" class="btn btn-sm btn-primary" data-mod-act="install" data-mod-name="${escapeHtml(m.name_en)}">安装</button>`;
        }
        const doc = m.doc
          ? `<a class="small" href="${escapeHtml(m.doc)}" target="_blank" rel="noopener">文档</a>`
          : "";
        return `<div class="site-module-card">
          <div class="meta">
            <div class="name">${escapeHtml(m.name || m.name_en)}
              ${statusBadge}
              <span class="badge text-bg-light border ms-1">${escapeHtml(m.type || "")}</span>
            </div>
            <div class="name-en">${escapeHtml(m.name_en || "")}</div>
            <div class="desc">${escapeHtml(m.desc || "")}</div>
            ${doc}
          </div>
          <div class="actions">${btn}</div>
        </div>`;
      })
      .join("");
  }

  async function loadSiteModules(opts = {}) {
    const silent = !!opts.silent;
    const site = state.siteSettings;
    const host = $("#site-modules-list");
    if (!site || site.type !== "fastweb") {
      if (host) host.innerHTML = `<div class="text-secondary small">仅 Fastweb 站点支持模块管理</div>`;
      return;
    }
    if (!silent && host) host.innerHTML = `<div class="text-secondary small">加载中…</div>`;
    const data = await api(`/api/fastweb/modules?site=${encodeURIComponent(site.name)}`);
    state.siteModules = (data && data.modules) || [];
    renderSiteModules();
  }

  async function siteModuleAction(act, nameEn) {
    const site = state.siteSettings;
    if (!site || !nameEn) return;
    if (getModuleOp(nameEn)) {
      toast("该模块正在处理中", "err");
      return;
    }
    if (act === "uninstall") {
      const ok = await confirmDialog({
        title: "卸载模块",
        message: `确认卸载模块「${nameEn}」？`,
        okText: "卸载",
        danger: true,
      });
      if (!ok) return;
    }
    const path =
      act === "uninstall"
        ? "/api/fastweb/modules/uninstall"
        : "/api/fastweb/modules/install";
    try {
      const data = await api(path, {
        method: "POST",
        body: { site: site.name, name_en: nameEn },
      });
      if (data && data.task_id) {
        setModuleOp(site.name, nameEn, { act, taskId: data.task_id });
        renderSiteModules();
        toast(act === "uninstall" ? "已加入卸载任务" : "已加入安装任务");
        refreshTasks();
      } else {
        toast("完成");
        await loadSiteModules({ silent: true });
      }
    } catch (err) {
      toast(err.message || String(err), "err");
    }
  }

  function syncModuleOpsFromTasks(tasks) {
    let changed = false;
    const finished = [];
    for (const [key, op] of Object.entries(state.siteModuleOps || {})) {
      if (!op || !op.taskId) continue;
      const t = (tasks || []).find((x) => x.id === op.taskId);
      if (!t) continue;
      const st = t.status || "";
      if (st === "success" || st === "failed") {
        finished.push({ key, op, status: st });
      }
    }
    for (const item of finished) {
      delete state.siteModuleOps[item.key];
      changed = true;
      if (item.status === "success") {
        toast(item.op.act === "uninstall" ? "模块已卸载" : "模块已安装");
      } else {
        toast(item.op.act === "uninstall" ? "模块卸载失败" : "模块安装失败", "err");
      }
    }
    if (changed) {
      renderSiteModules();
      const site = state.siteSettings;
      const modulesTab = document.querySelector('.site-settings-tab[data-site-tab="modules"]');
      if (
        site &&
        site.type === "fastweb" &&
        modulesTab &&
        modulesTab.classList.contains("is-active")
      ) {
        loadSiteModules({ silent: true }).catch(() => {});
      }
    }
    return changed;
  }

  function setSiteCertSubTab(tab) {
    const which = tab === "apply" ? "apply" : "pem";
    state.siteCertTab = which;
    $("#site-cert-tab-pem")?.classList.toggle("active", which === "pem");
    $("#site-cert-tab-apply")?.classList.toggle("active", which === "apply");
    const pem = $("#site-cert-pane-pem");
    const apply = $("#site-cert-pane-apply");
    if (pem) pem.hidden = which !== "pem";
    if (apply) apply.hidden = which !== "apply";
    if (which === "apply") renderSslDomainChecklist(selectedSslHosts());
  }

  function siteSslPrimaryDomain(site) {
    const domains = domainsFromText(
      ($("#site-set-domain") && $("#site-set-domain").value) || site.domain || site.name || ""
    );
    if (!domains.length) return site.name || "";
    return parseDomainToken(domains[0]).host;
  }

  function siteSslPaths(site) {
    const domain = siteSslPrimaryDomain(site);
    const sslDir = joinPath("/ngs/conf/ssl", domain);
    return {
      dir: sslDir,
      cert: joinPath(sslDir, "fullchain.pem"),
      key: joinPath(sslDir, "privkey.pem"),
      readCert: site.ssl_cert || joinPath(sslDir, "fullchain.pem"),
      readKey: site.ssl_key || joinPath(sslDir, "privkey.pem"),
    };
  }

  async function readFileText(path) {
    if (!path) return "";
    try {
      const data = await api(`/api/files/read?path=${encodeURIComponent(path)}`);
      return (data && data.content) || "";
    } catch (_) {
      return "";
    }
  }

  async function loadSiteSslPem() {
    const site = state.siteSettings;
    if (!site) return;
    const paths = siteSslPaths(site);
    const [pem, key] = await Promise.all([
      readFileText(paths.readCert),
      readFileText(paths.readKey),
    ]);
    const pemEl = $("#site-set-ssl-pem");
    const keyEl = $("#site-set-ssl-key-pem");
    if (pemEl) pemEl.value = pem;
    if (keyEl) keyEl.value = key;
  }

  function domainsFromText(text) {
    return String(text || "")
      .split(/[\s,;]+/)
      .map((s) => s.trim())
      .filter(Boolean);
  }

  function parseDomainToken(tok) {
    const s = String(tok || "").trim();
    const m = s.match(/^(.*):(\d{1,5})$/);
    if (m) {
      const port = Number(m[2]);
      if (port >= 1 && port <= 65535) return { host: m[1], port };
    }
    return { host: s, port: 80 };
  }

  function formatDomainToken(host, port) {
    const p = Number(port) || 80;
    return p === 80 ? host : `${host}:${p}`;
  }

  function renderSslDomainChecklist(selectedHosts) {
    const host = $("#site-ssl-domain-list");
    if (!host) return;
    const tokens = domainsFromText($("#site-set-domain")?.value || "")
      .concat(Array.isArray(state.siteSettings?.domains) ? state.siteSettings.domains : []);
    const uniq = [];
    const seen = new Set();
    for (const tok of tokens) {
      const { host: h, port } = parseDomainToken(tok);
      if (!h || seen.has(h)) continue;
      seen.add(h);
      uniq.push({ host: h, port });
    }
    // Prefer domain textarea order if present
    const fromText = domainsFromText($("#site-set-domain")?.value || "");
    const ordered = [];
    const orderedSeen = new Set();
    for (const tok of fromText) {
      const { host: h, port } = parseDomainToken(tok);
      if (!h || orderedSeen.has(h)) continue;
      orderedSeen.add(h);
      ordered.push({ host: h, port });
    }
    if (!ordered.length) ordered.push(...uniq);

    const selected = new Set(
      (selectedHosts || ordered.map((x) => x.host)).map((h) => parseDomainToken(h).host)
    );
    if (!ordered.length) {
      host.innerHTML = `<div class="small text-secondary px-1 py-1">请先在「域名」中配置域名</div>`;
      return;
    }
    host.innerHTML = ordered
      .map((item, i) => {
        const id = `ssl-dom-${i}`;
        const checked = selected.has(item.host) ? " checked" : "";
        const hint = item.port && item.port !== 80 ? `<span class="port-hint">:${item.port}</span>` : "";
        return `<div class="form-check">
          <input class="form-check-input" type="checkbox" value="${escapeHtml(item.host)}" id="${id}"${checked} />
          <label class="form-check-label" for="${id}"><span class="host">${escapeHtml(item.host)}</span>${hint}</label>
        </div>`;
      })
      .join("");
  }

  function selectedSslHosts() {
    return $$("#site-ssl-domain-list input[type=checkbox]:checked").map((el) => el.value).filter(Boolean);
  }

  function formatSslExpire(site) {
    if (!site || !site.ssl_not_after) return "证书有效期：—";
    const days = site.ssl_days_left;
    let extra = "";
    if (days !== null && days !== undefined && days !== "") {
      const n = Number(days);
      if (!Number.isNaN(n)) {
        if (n < 0) extra = `（已过期 ${Math.abs(n)} 天）`;
        else if (n === 0) extra = "（今天到期）";
        else extra = `（剩余 ${n} 天）`;
      }
    }
    return `证书有效期：${site.ssl_not_before || "?"} ~ ${site.ssl_not_after}${extra}`;
  }

  function fillSiteSettingsForm(site) {
    state.siteSettings = site;
    $("#site-settings-name").textContent = site.name || "";
    $("#site-settings-sub").textContent = `${site.type || ""} · ${site.root || ""}`;
    const domains = Array.isArray(site.domains) && site.domains.length
      ? site.domains
      : domainsFromText(site.domain);
    $("#site-set-domain").value = domains.join("\n");
    $("#site-set-ssl-enable").checked = !!site.ssl_enable;
    $("#site-set-ssl-port").value = site.ssl_port || 443;
    const expireEl = $("#site-set-ssl-expire");
    if (expireEl) {
      expireEl.textContent = formatSslExpire(site);
      expireEl.classList.toggle("text-danger", Number(site.ssl_days_left) < 14);
      expireEl.classList.toggle("text-secondary", !(Number(site.ssl_days_left) < 14));
    }
    $("#site-set-conf-path").textContent = site.conf || "";
    state.siteNginxPath = site.conf || "";
    if (state.siteNginxEditor) {
      state.siteNginxEditor.setValue("");
    }
    state.siteProxies = [];
    state.siteLogKind = "access";
    state.siteLogIp = "";
    state.siteLogQuery = "";
    if (state.siteLogSearchTimer) {
      clearTimeout(state.siteLogSearchTimer);
      state.siteLogSearchTimer = null;
    }
    const searchEl = $("#site-log-search");
    if (searchEl) searchEl.value = "";
    syncSiteLogIpFilter();
    $("#site-log-tab-access").classList.add("active");
    $("#site-log-tab-error").classList.remove("active");
    $("#site-log-view").textContent = "加载中…";
    state.siteModules = [];
    state.siteModulesFilter = "all";
    $$("#site-modules-filter [data-mod-filter]").forEach((b) =>
      b.classList.toggle("active", b.dataset.modFilter === "all")
    );
    syncSiteModulesTab(site);
    syncSiteProxyTab(site);
    renderSslDomainChecklist();
  }

  async function openSiteSettings(name) {
    const site = state.sites.find((s) => s.name === name);
    if (!site) throw new Error("未找到网站");
    fillSiteSettingsForm(site);
    state.siteCertTab = "pem";
    setSiteSettingsTab("domain");
    state.siteSettingsModal.show();
  }

  function layoutSiteNginxEditor() {
    if (state.siteNginxEditor && typeof state.siteNginxEditor.layout === "function") {
      state.siteNginxEditor.layout();
    }
  }

  async function ensureSiteNginxEditor() {
    const monaco = await ensureMonaco();
    const host = $("#site-nginx-monaco");
    if (!host) throw new Error("编辑器容器不存在");
    if (state.siteNginxEditor) {
      layoutSiteNginxEditor();
      return state.siteNginxEditor;
    }
    host.innerHTML = "";
    state.siteNginxEditor = monaco.editor.create(host, {
      value: "",
      language: "ini",
      theme: "vs-dark",
      automaticLayout: true,
      minimap: { enabled: false },
      fontSize: 13,
      lineNumbers: "on",
      scrollBeyondLastLine: false,
      wordWrap: "off",
      tabSize: 4,
      renderWhitespace: "selection",
    });
    state.siteNginxEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
      withBusy(async () => saveSiteNginxConf());
    });
    layoutSiteNginxEditor();
    return state.siteNginxEditor;
  }

  async function loadSiteNginxConf() {
    const site = state.siteSettings;
    if (!site || !site.conf) throw new Error("配置路径未知");
    const data = await api(`/api/files/read?path=${encodeURIComponent(site.conf)}`);
    const content = (data && data.content) || "";
    const editor = await ensureSiteNginxEditor();
    const monaco = await ensureMonaco();
    const model = editor.getModel();
    const lang = langFromPath(site.conf) || "ini";
    if (model && monaco.editor.setModelLanguage) {
      monaco.editor.setModelLanguage(model, lang);
    }
    editor.setValue(content);
    state.siteNginxPath = site.conf;
    requestAnimationFrame(() => layoutSiteNginxEditor());
  }

  async function saveSiteNginxConf() {
    const site = state.siteSettings;
    if (!site || !site.conf) throw new Error("配置路径未知");
    const editor = await ensureSiteNginxEditor();
    const content = editor.getValue();
    await api("/api/files/write", {
      method: "POST",
      body: { path: site.conf, content },
    });
    await api("/api/nginx/reload", { method: "POST", body: {} });
    toast("Nginx 配置已保存并重载");
  }

  function syncSiteLogIpFilter() {
    const wrap = $("#site-log-ip-filter");
    const val = $("#site-log-ip-value");
    if (!wrap) return;
    const ip = String(state.siteLogIp || "").trim();
    wrap.hidden = !ip;
    if (val) val.textContent = ip;
  }

  function accessStatusClass(code) {
    const n = Number(code);
    if (n >= 500) return "status-server";
    if (n >= 400) return "status-client";
    if (n >= 300) return "status-redir";
    return "status-ok";
  }

  function renderAccessLogTable(items, emptyText) {
    const esc = escapeHtml;
    if (!items.length) {
      return `<div class="site-log-empty">${esc(emptyText || "暂无访问日志")}</div>`;
    }
    const rows = items
      .map((r) => {
        const uri = esc(r.uri || "") + (r.args ? "?" + esc(r.args) : "");
        const rt = r.request_time != null ? Number(r.request_time).toFixed(3) : "";
        return `<tr>
          <td title="time_ms=${esc(r.time_ms)}">${esc(r.time)}</td>
          <td>${esc(r.ip)}</td>
          <td>${esc(r.method)}</td>
          <td class="${accessStatusClass(r.status)}">${esc(r.status)}</td>
          <td class="uri">${uri}</td>
          <td>${esc(rt)}</td>
          <td>${esc(formatBytes(Number(r.bytes_recv) || 0))}</td>
          <td>${esc(formatBytes(Number(r.bytes_sent) || 0))}</td>
        </tr>`;
      })
      .join("");
    return `<table>
      <thead><tr>
        <th>时间</th><th>IP</th><th>方法</th><th>状态</th><th>URI</th>
        <th>耗时(s)</th><th>接收</th><th>发送</th>
      </tr></thead>
      <tbody>${rows}</tbody>
    </table>`;
  }

  async function loadSiteLog() {
    const site = state.siteSettings;
    if (!site) return;
    const view = $("#site-log-view");
    if (!view) return;
    syncSiteLogIpFilter();
    const q = String(state.siteLogQuery || "").trim();

    if (state.siteLogKind === "error") {
      view.classList.add("table-mode");
      try {
        const qs = new URLSearchParams({ name: site.name, kind: "error", limit: "200" });
        if (q) qs.set("q", q);
        const data = await api(`/api/websites/logs?${qs.toString()}`);
        const items = (data && data.items) || [];
        if (!items.length) {
          view.innerHTML = `<div class="site-log-empty">${
            q ? "没有匹配的错误日志" : "暂无错误日志"
          }</div>`;
          return;
        }
        const esc = escapeHtml;
        const rows = items
          .map((r) => `<tr>
            <td>${esc(r.time)}</td>
            <td>${esc(r.level)}</td>
            <td class="uri">${esc(r.message || r.raw)}</td>
          </tr>`)
          .join("");
        view.innerHTML = `<table>
          <thead><tr><th>时间</th><th>级别</th><th>内容</th></tr></thead>
          <tbody>${rows}</tbody>
        </table>`;
        view.scrollTop = 0;
      } catch (err) {
        view.classList.remove("table-mode");
        view.textContent = err.message || String(err);
      }
      return;
    }

    view.classList.add("table-mode");
    const ip = String(state.siteLogIp || "").trim();
    const qs = new URLSearchParams({ name: site.name, kind: "access", limit: "200" });
    if (ip) qs.set("ip", ip);
    if (q) qs.set("q", q);
    try {
      const data = await api(`/api/websites/logs?${qs.toString()}`);
      const items = (data && data.items) || [];
      let empty = "暂无访问日志（写入 access.log 后会自动入库）";
      if (ip && q) empty = `暂无匹配记录（IP ${ip} · 关键词 ${q}）`;
      else if (ip) empty = `暂无该 IP 的访问记录：${ip}`;
      else if (q) empty = `没有匹配的访问日志：${q}`;
      view.innerHTML = renderAccessLogTable(items, empty);
      view.scrollTop = 0;
    } catch (err) {
      view.classList.remove("table-mode");
      view.textContent = err.message || String(err);
    }
  }

  async function saveSiteDomain() {
    const site = state.siteSettings;
    if (!site) return;
    const domains = domainsFromText($("#site-set-domain").value);
    if (!domains.length) throw new Error("至少填写一个域名");
    const updated = await api("/api/websites/update", {
      method: "POST",
      body: { name: site.name, domains },
    });
    Object.assign(site, updated || {});
    fillSiteSettingsForm(site);
    toast("域名已保存");
    await refresh();
  }

  async function saveSiteCert() {
    const site = state.siteSettings;
    if (!site) return;
    const domains = domainsFromText($("#site-set-domain").value);
    const ssl_enable = $("#site-set-ssl-enable").checked;
    const ssl_port = Number($("#site-set-ssl-port").value || 443);
    let pem = ($("#site-set-ssl-pem")?.value || "").trim();
    let key = ($("#site-set-ssl-key-pem")?.value || "").trim();
    if (ssl_enable && (!pem || !key)) {
      throw new Error("启用 HTTPS 时请填写证书 PEM 与私钥 KEY");
    }
    const looksCert = (t) => /BEGIN CERTIFICATE/.test(t);
    const looksKey = (t) => /BEGIN (RSA )?PRIVATE KEY|BEGIN EC PRIVATE KEY/.test(t);
    if (pem && key && looksKey(pem) && looksCert(key)) {
      // Common paste swap: auto-correct instead of writing broken nginx ssl.
      const tmp = pem;
      pem = key;
      key = tmp;
      const pemEl = $("#site-set-ssl-pem");
      const keyEl = $("#site-set-ssl-key-pem");
      if (pemEl) pemEl.value = pem;
      if (keyEl) keyEl.value = key;
      toast("检测到证书与私钥粘贴反了，已自动对调", "ok");
    }
    if (pem && !looksCert(pem)) {
      throw new Error("证书 PEM 内容无效：应以 -----BEGIN CERTIFICATE----- 开头");
    }
    if (key && !looksKey(key)) {
      throw new Error("私钥 KEY 内容无效：应以 -----BEGIN PRIVATE KEY----- 开头");
    }
    const paths = siteSslPaths(site);
    await api("/api/files/mkdir", { method: "POST", body: { path: paths.dir } }).catch(() => {});
    if (pem) {
      await api("/api/files/write", {
        method: "POST",
        body: { path: paths.cert, content: pem.endsWith("\n") ? pem : pem + "\n" },
      });
    }
    if (key) {
      await api("/api/files/write", {
        method: "POST",
        body: { path: paths.key, content: key.endsWith("\n") ? key : key + "\n" },
      });
    }
    const updated = await api("/api/websites/update", {
      method: "POST",
      body: {
        name: site.name,
        domains: domains.length ? domains : domainsFromText(site.domain),
        ssl_enable,
        ssl_port,
        ssl_cert: paths.cert,
        ssl_key: paths.key,
      },
    });
    Object.assign(site, updated || {});
    fillSiteSettingsForm(site);
    await loadSiteSslPem();
    toast("证书已保存并重载");
    await refresh();
  }

  async function applyLetsEncrypt() {
    const site = state.siteSettings;
    if (!site) return;
    await saveSiteDomain();
    renderSslDomainChecklist(selectedSslHosts());
    const hosts = selectedSslHosts();
    if (!hosts.length) throw new Error("请至少勾选一个要申请证书的域名");
    const data = await api("/api/websites/ssl/apply", {
      method: "POST",
      body: { name: site.name, domains: hosts },
    });
    toast(`已加入任务队列（${hosts.length} 个域名，一张证书）`);
    if (data && data.task_id) {
      await refreshTasks();
    }
  }

  function destroyAnalyticsCharts() {
    (state.analyticsCharts || []).forEach((c) => {
      try { c.destroy(); } catch (_) {}
    });
    state.analyticsCharts = [];
  }

  function analyticsLabel(ms) {
    const d = new Date(Number(ms) || 0);
    const mo = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    const hh = String(d.getHours()).padStart(2, "0");
    const mm = String(d.getMinutes()).padStart(2, "0");
    return `${mo}-${day} ${hh}:${mm}`;
  }

  function analyticsHourLabel(offsetMs) {
    const totalMin = Math.floor(Math.max(0, Number(offsetMs) || 0) / 60000);
    const hh = String(Math.floor(totalMin / 60) % 24).padStart(2, "0");
    const mm = String(totalMin % 60).padStart(2, "0");
    return `${hh}:${mm}`;
  }

  /** Align today/yesterday bucket rows onto a shared clock axis. */
  function alignTrafficCompare(compare) {
    const bucketMs = Number(compare?.bucket_ms) || 3600000;
    const slots = Math.max(1, Math.round(86400000 / bucketMs));
    const nowOff = Number(compare?.now_offset_ms);
    const truncateAt = Number.isFinite(nowOff) ? nowOff : null;
    const toMap = (rows) => {
      const m = new Map();
      (rows || []).forEach((r) => {
        const off = Number(r.offset_ms);
        if (!Number.isFinite(off) || off < 0) return;
        m.set(Math.round(off / bucketMs) * bucketMs, r);
      });
      return m;
    };
    const todayMap = toMap(compare?.today);
    const yestMap = toMap(compare?.yesterday);
    const labels = [];
    const today = { requests: [], bytes_recv: [], bytes_sent: [] };
    const yesterday = { requests: [], bytes_recv: [], bytes_sent: [] };
    for (let i = 0; i < slots; i++) {
      const off = i * bucketMs;
      labels.push(analyticsHourLabel(off));
      const y = yestMap.get(off);
      yesterday.requests.push(y ? Number(y.requests) || 0 : 0);
      yesterday.bytes_recv.push(y ? Number(y.bytes_recv) || 0 : 0);
      yesterday.bytes_sent.push(y ? Number(y.bytes_sent) || 0 : 0);
      if (truncateAt != null && off > truncateAt) {
        today.requests.push(null);
        today.bytes_recv.push(null);
        today.bytes_sent.push(null);
      } else {
        const t = todayMap.get(off);
        today.requests.push(t ? Number(t.requests) || 0 : 0);
        today.bytes_recv.push(t ? Number(t.bytes_recv) || 0 : 0);
        today.bytes_sent.push(t ? Number(t.bytes_sent) || 0 : 0);
      }
    }
    return { labels, today, yesterday, bucketMs };
  }

  function renderAnalytics(data) {
    const body = $("#analytics-body");
    if (!body) return;
    destroyAnalyticsCharts();
    const s = data.summary || {};
    const cc = data.cc || {};
    const esc = escapeHtml;

    const cards = [
      ["请求数", s.requests ?? 0],
      ["独立 IP", s.unique_ips ?? 0],
      ["接收", formatBytes(s.bytes_recv)],
      ["发送", formatBytes(s.bytes_sent)],
      ["平均耗时", `${Number(s.avg_request_time || 0).toFixed(3)} s`],
      ["错误率", `${Number(s.error_rate || 0).toFixed(2)}%`],
      ["4xx", s.status_4xx ?? 0],
      ["5xx", s.status_5xx ?? 0],
    ]
      .map(
        ([k, v]) => `<div class="col-6 col-md-3">
        <div class="analytics-stat">
          <div class="label">${esc(k)}</div>
          <div class="value">${esc(v)}</div>
        </div>
      </div>`
      )
      .join("");

    const suspects = Array.isArray(cc.suspects) ? cc.suspects : [];
    const ipLink = (ip) => {
      const v = String(ip || "").trim();
      if (!v) return "—";
      return `<a href="#" class="analytics-ip-link" data-analytics-ip="${esc(v)}" title="查看该 IP 访问明细">${esc(v)}</a>`;
    };
    const suspectHtml = suspects.length
      ? `<div class="table-responsive"><table class="table table-sm align-middle mb-0">
          <thead><tr><th>IP</th><th>请求</th><th>错误</th><th>占比</th><th>原因</th></tr></thead>
          <tbody>${suspects
            .map(
              (r) => `<tr>
            <td><code>${ipLink(r.ip)}</code></td>
            <td>${esc(r.count)}</td>
            <td>${esc(r.errors)}</td>
            <td>${Number(r.share || 0).toFixed(1)}%</td>
            <td class="text-warning">${esc(r.reason || "")}</td>
          </tr>`
            )
            .join("")}</tbody></table></div>`
      : `<div class="small text-secondary">未发现明显异常 IP</div>`;

    const topIpRows = (data.top_ips || [])
      .map(
        (r) => `<tr>
        <td><code>${ipLink(r.ip)}</code></td>
        <td>${esc(r.count)}</td>
        <td>${esc(r.errors)}</td>
        <td>${esc(formatBytes(r.bytes_recv))}</td>
        <td>${esc(formatBytes(r.bytes_sent))}</td>
        <td>${Number(r.share || 0).toFixed(1)}%</td>
      </tr>`
      )
      .join("");

    const topUriRows = (data.top_uris || [])
      .map(
        (r) => `<tr>
        <td class="text-break">${esc(r.uri)}</td>
        <td>${esc(r.count)}</td>
        <td>${esc(formatBytes(r.bytes_sent))}</td>
        <td>${Number(r.avg_request_time || 0).toFixed(3)}s</td>
      </tr>`
      )
      .join("");

    const slowRows = (data.slow_uris || [])
      .map(
        (r) => `<tr>
        <td class="text-break">${esc(r.uri)}</td>
        <td>${esc(r.count)}</td>
        <td>${Number(r.avg_request_time || 0).toFixed(3)}s</td>
        <td>${Number(r.max_request_time || 0).toFixed(3)}s</td>
      </tr>`
      )
      .join("");

    body.innerHTML = `
      <div class="row g-2 mb-3">${cards}</div>
      <div class="row g-3 mb-3">
        <div class="col-lg-8">
          <div class="analytics-panel">
            <div class="analytics-panel-title">请求趋势
              <span class="small text-secondary ms-2">今日 vs 昨日</span>
            </div>
            <div class="analytics-chart"><canvas id="an-chart-traffic"></canvas></div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="analytics-panel">
            <div class="analytics-panel-title">状态码分布</div>
            <div class="analytics-chart analytics-chart-sm"><canvas id="an-chart-status"></canvas></div>
          </div>
        </div>
      </div>
      <div class="analytics-panel mb-3">
        <div class="analytics-panel-title">流量趋势
          <span class="small text-secondary ms-2">今日 vs 昨日</span>
        </div>
        <div class="analytics-chart"><canvas id="an-chart-bytes"></canvas></div>
      </div>
      <div class="analytics-panel mb-3">
        <div class="analytics-panel-title">CC / 异常 IP 分析
          <span class="small text-secondary ms-2">嫌疑 ${esc(cc.suspect_count ?? 0)} · 峰值桶请求 ${esc(cc.peak_bucket_requests ?? 0)}</span>
        </div>
        ${suspectHtml}
      </div>
      <div class="row g-3 mb-3">
        <div class="col-lg-6">
          <div class="analytics-panel">
            <div class="analytics-panel-title">Top IP</div>
            <div class="table-responsive"><table class="table table-sm align-middle mb-0">
              <thead><tr><th>IP</th><th>请求</th><th>错误</th><th>接收</th><th>发送</th><th>占比</th></tr></thead>
              <tbody>${topIpRows || `<tr><td colspan="6" class="text-secondary">暂无数据</td></tr>`}</tbody>
            </table></div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="analytics-panel">
            <div class="analytics-panel-title">热门 URI</div>
            <div class="table-responsive"><table class="table table-sm align-middle mb-0">
              <thead><tr><th>URI</th><th>次数</th><th>发送</th><th>均耗时</th></tr></thead>
              <tbody>${topUriRows || `<tr><td colspan="4" class="text-secondary">暂无数据</td></tr>`}</tbody>
            </table></div>
          </div>
        </div>
      </div>
      <div class="analytics-panel mb-3">
        <div class="analytics-panel-title">最慢 URI</div>
        <div class="table-responsive"><table class="table table-sm align-middle mb-0">
          <thead><tr><th>URI</th><th>次数</th><th>平均</th><th>最大</th></tr></thead>
          <tbody>${slowRows || `<tr><td colspan="4" class="text-secondary">暂无数据</td></tr>`}</tbody>
        </table></div>
      </div>
      <div class="small text-secondary">数据源：${esc(data.log_db || "")}</div>
    `;

    if (typeof Chart === "undefined") return;
    const cmp = alignTrafficCompare(data.traffic_compare || {});
    const labels = cmp.labels;

    const mkLine = (el, datasets, yFmt) => {
      if (!el) return null;
      const chart = new Chart(el, {
        type: "line",
        data: { labels, datasets },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          animation: false,
          spanGaps: false,
          interaction: { mode: "index", intersect: false },
          plugins: { legend: { display: datasets.length > 1, position: "top", align: "end", labels: { boxWidth: 10, font: { size: 11 } } } },
          scales: {
            x: { ticks: { maxTicksLimit: 12, color: "#94a3b8", font: { size: 10 } }, grid: { display: false } },
            y: { beginAtZero: true, ticks: { color: "#94a3b8", font: { size: 10 }, callback: yFmt }, grid: { color: "rgba(148,163,184,.15)" } },
          },
          elements: { line: { tension: 0.3, borderWidth: 2 }, point: { radius: 0 } },
        },
      });
      state.analyticsCharts.push(chart);
      return chart;
    };

    mkLine(
      $("#an-chart-traffic"),
      [
        {
          label: "今日",
          data: cmp.today.requests,
          borderColor: "#0d9488",
          backgroundColor: "rgba(13,148,136,.12)",
          fill: true,
        },
        {
          label: "昨日",
          data: cmp.yesterday.requests,
          borderColor: "#94a3b8",
          backgroundColor: "transparent",
          borderDash: [6, 4],
          fill: false,
        },
      ],
      (v) => v
    );
    mkLine(
      $("#an-chart-bytes"),
      [
        {
          label: "今日接收",
          data: cmp.today.bytes_recv,
          borderColor: "#0d9488",
          backgroundColor: "rgba(13,148,136,.08)",
          fill: false,
        },
        {
          label: "今日发送",
          data: cmp.today.bytes_sent,
          borderColor: "#ea580c",
          backgroundColor: "rgba(234,88,12,.08)",
          fill: false,
        },
        {
          label: "昨日接收",
          data: cmp.yesterday.bytes_recv,
          borderColor: "#5eead4",
          backgroundColor: "transparent",
          borderDash: [6, 4],
          fill: false,
        },
        {
          label: "昨日发送",
          data: cmp.yesterday.bytes_sent,
          borderColor: "#fdba74",
          backgroundColor: "transparent",
          borderDash: [6, 4],
          fill: false,
        },
      ],
      (v) => formatBytes(v)
    );

    const status = data.status || [];
    const stEl = $("#an-chart-status");
    if (stEl && status.length) {
      const chart = new Chart(stEl, {
        type: "doughnut",
        data: {
          labels: status.map((x) => String(x.status)),
          datasets: [{
            data: status.map((x) => Number(x.count) || 0),
            backgroundColor: ["#0d9488", "#0369a1", "#ca8a04", "#ea580c", "#dc2626", "#7c3aed", "#64748b"],
          }],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { position: "bottom", labels: { boxWidth: 10, font: { size: 11 } } } },
        },
      });
      state.analyticsCharts.push(chart);
    }
  }

  async function loadSiteAnalytics() {
    const name = state.analyticsSite;
    if (!name) return;
    const range = $("#analytics-range")?.value || "24h";
    $("#analytics-body").innerHTML = `<div class="text-secondary small py-4 text-center">分析中…</div>`;
    const data = await api(
      `/api/websites/analytics?name=${encodeURIComponent(name)}&range=${encodeURIComponent(range)}`
    );
    renderAnalytics(data || {});
  }

  async function openSiteAnalytics(name) {
    state.analyticsSite = name;
    $("#analytics-site-name").textContent = name;
    if (!state.analyticsModal) {
      state.analyticsModal = new bootstrap.Modal($("#site-analytics-modal"));
    }
    state.analyticsModal.show();
    await loadSiteAnalytics();
  }

  async function openIpAccessDetail(siteName, ip) {
    const name = String(siteName || "").trim();
    const addr = String(ip || "").trim();
    if (!name || !addr) return;
    const site = state.sites.find((s) => s.name === name);
    if (!site) throw new Error("未找到网站");
    fillSiteSettingsForm(site);
    state.siteLogKind = "access";
    state.siteLogIp = addr;
    $("#site-log-tab-access")?.classList.add("active");
    $("#site-log-tab-error")?.classList.remove("active");
    syncSiteLogIpFilter();
    if (!state.siteSettingsModal) {
      state.siteSettingsModal = new bootstrap.Modal($("#site-settings-modal"));
    }
    showStackedModal(state.siteSettingsModal, $("#site-settings-modal"));
    setSiteSettingsTab("logs");
  }

  function bindSiteSettingsModal() {
    state.siteSettingsModal = new bootstrap.Modal($("#site-settings-modal"));
    $("#site-settings-close").addEventListener("click", () => state.siteSettingsModal.hide());
    $$(".site-settings-tab").forEach((btn) => {
      btn.addEventListener("click", () => setSiteSettingsTab(btn.dataset.siteTab));
    });
    $("#site-set-domain-save").addEventListener("click", (e) => {
      withBusy(async () => saveSiteDomain(), e.currentTarget);
    });
    $("#site-proxy-add")?.addEventListener("click", () => openUrlProxyDialog(null));
    $("#site-proxy-tbody")?.addEventListener("click", (e) => {
      const btn = e.target.closest("button[data-proxy-act]");
      if (!btn) return;
      const id = btn.dataset.proxyId;
      const row = (state.siteProxies || []).find((x) => x.id === id);
      if (btn.dataset.proxyAct === "edit") {
        if (!row) return toast("规则不存在", "err");
        openUrlProxyDialog(row);
        return;
      }
      if (btn.dataset.proxyAct === "del") {
        withBusy(async () => {
          const ok = await confirmDialog({
            title: "删除 URL 代理",
            message: `确认删除代理「${row?.path || id}」？`,
            okText: "删除",
            danger: true,
          });
          if (!ok) return;
          const site = state.siteSettings;
          await api("/api/websites/proxies/delete", {
            method: "POST",
            body: { name: site.name, id },
          });
          toast("已删除");
          await loadSiteProxies();
        }, btn);
      }
    });
    $("#site-set-cert-save").addEventListener("click", (e) => {
      withBusy(async () => saveSiteCert(), e.currentTarget);
    });
    $("#site-cert-tab-pem").addEventListener("click", () => {
      setSiteCertSubTab("pem");
      loadSiteSslPem().catch(() => {});
    });
    $("#site-cert-tab-apply").addEventListener("click", () => setSiteCertSubTab("apply"));
    $("#site-set-ssl-apply").addEventListener("click", (e) => {
      withBusy(async () => applyLetsEncrypt(), e.currentTarget);
    });
    $("#site-ssl-domains-all").addEventListener("click", () => {
      $$("#site-ssl-domain-list input[type=checkbox]").forEach((el) => { el.checked = true; });
    });
    $("#site-ssl-domains-none").addEventListener("click", () => {
      $$("#site-ssl-domain-list input[type=checkbox]").forEach((el) => { el.checked = false; });
    });
    $("#site-set-domain").addEventListener("change", () => renderSslDomainChecklist(selectedSslHosts()));
    $("#site-set-nginx-save").addEventListener("click", (e) => {
      withBusy(async () => saveSiteNginxConf(), e.currentTarget);
    });
    $("#site-set-nginx-reload").addEventListener("click", (e) => {
      withBusy(async () => {
        await loadSiteNginxConf();
        toast("已重新加载");
      }, e.currentTarget);
    });
    $("#site-log-tab-access").addEventListener("click", () => {
      state.siteLogKind = "access";
      $("#site-log-tab-access").classList.add("active");
      $("#site-log-tab-error").classList.remove("active");
      loadSiteLog();
    });
    $("#site-log-tab-error").addEventListener("click", () => {
      state.siteLogKind = "error";
      $("#site-log-tab-error").classList.add("active");
      $("#site-log-tab-access").classList.remove("active");
      loadSiteLog();
    });
    $("#site-log-refresh").addEventListener("click", () => loadSiteLog());
    $("#site-log-ip-clear")?.addEventListener("click", () => {
      state.siteLogIp = "";
      syncSiteLogIpFilter();
      loadSiteLog();
    });
    const scheduleSiteLogSearch = () => {
      if (state.siteLogSearchTimer) clearTimeout(state.siteLogSearchTimer);
      state.siteLogSearchTimer = setTimeout(() => {
        state.siteLogSearchTimer = null;
        const input = $("#site-log-search");
        state.siteLogQuery = (input?.value || "").trim();
        loadSiteLog().catch((err) => toast(err.message || String(err), "err"));
      }, 280);
    };
    $("#site-log-search")?.addEventListener("input", scheduleSiteLogSearch);
    $("#site-log-search")?.addEventListener("keydown", (e) => {
      if (e.key !== "Enter") return;
      e.preventDefault();
      if (state.siteLogSearchTimer) {
        clearTimeout(state.siteLogSearchTimer);
        state.siteLogSearchTimer = null;
      }
      state.siteLogQuery = (e.currentTarget.value || "").trim();
      loadSiteLog().catch((err) => toast(err.message || String(err), "err"));
    });
    $("#site-modules-refresh")?.addEventListener("click", () => {
      withBusy(async () => loadSiteModules());
    });
    $("#site-modules-filter")?.addEventListener("click", (e) => {
      const btn = e.target.closest("[data-mod-filter]");
      if (!btn) return;
      state.siteModulesFilter = btn.dataset.modFilter || "all";
      $$("#site-modules-filter [data-mod-filter]").forEach((b) =>
        b.classList.toggle("active", b === btn)
      );
      renderSiteModules();
    });
    $("#site-modules-list")?.addEventListener("click", (e) => {
      const btn = e.target.closest("[data-mod-act]");
      if (!btn) return;
      siteModuleAction(btn.dataset.modAct, btn.dataset.modName);
    });
  }

  function bindEvents() {
    state.bsModal = new bootstrap.Modal($("#modal"));
    bindUploadModal();
    bindSiteSettingsModal();

    $("#analytics-close")?.addEventListener("click", () => state.analyticsModal?.hide());
    $("#analytics-range")?.addEventListener("change", () => {
      withBusy(async () => loadSiteAnalytics());
    });
    $("#site-analytics-modal")?.addEventListener("hidden.bs.modal", () => destroyAnalyticsCharts());
    $("#analytics-body")?.addEventListener("click", (e) => {
      const link = e.target.closest("[data-analytics-ip]");
      if (!link) return;
      e.preventDefault();
      const ip = link.getAttribute("data-analytics-ip") || "";
      withBusy(async () => openIpAccessDetail(state.analyticsSite, ip));
    });

    $("#btn-logout")?.addEventListener("click", async () => {
      const ok = await confirmDialog({
        title: "退出登录",
        message: "确认退出当前账号？",
        okText: "退出",
        danger: true,
      });
      if (!ok) return;
      withBusy(async () => {
        await api("/api/auth/logout", { method: "POST", body: {} });
        location.replace("/login.html");
      });
    });

    $$(".nav-item[data-view]").forEach((btn) => {
      btn.addEventListener("click", () => setView(btn.dataset.view));
    });

    $("#btn-proc-refresh")?.addEventListener("click", () => {
      withBusy(async () => {
        await loadProcesses();
        toast("已刷新");
      });
    });
    let procSearchTimer = null;
    $("#proc-search")?.addEventListener("input", (e) => {
      state.procQuery = e.target.value || "";
      clearTimeout(procSearchTimer);
      procSearchTimer = setTimeout(() => {
        loadProcesses({ silent: true }).catch((err) => toast(err.message || String(err), "err"));
      }, 250);
    });
    $("#proc-auto")?.addEventListener("change", () => {
      if ($("#view-processes")?.classList.contains("is-active")) startProcAutoRefresh();
    });
    $("#proc-table")?.addEventListener("click", (e) => {
      const sortTh = e.target.closest("th.proc-sort");
      if (sortTh) {
        const key = sortTh.dataset.procSort;
        if (state.procSort === key) {
          state.procSortDir = state.procSortDir === "desc" ? "asc" : "desc";
        } else {
          state.procSort = key;
          state.procSortDir = key === "user" || key === "name" ? "asc" : "desc";
        }
        renderProcesses();
        return;
      }
      const btn = e.target.closest("button[data-proc-act]");
      if (!btn) return;
      const pid = btn.dataset.pid;
      const act = btn.dataset.procAct;
      withBusy(async () => {
        await killProcess(pid, act === "kill" ? "KILL" : "TERM");
      }, btn);
    });

    $("#task-badge").addEventListener("click", () => openTaskPanel());
    $("#task-panel-close").addEventListener("click", closeTaskPanel);
    $("#task-panel-backdrop").addEventListener("click", closeTaskPanel);
    bindAllDialogResize();
    $("#task-tab-active").addEventListener("click", () => setTaskTab("active"));
    $("#task-tab-history").addEventListener("click", () => setTaskTab("history"));
    $("#task-clear-finished").addEventListener("click", () => {
      withBusy(async () => {
        await api("/api/tasks/clear", { method: "POST", body: {} });
        selectTask("", true);
        await refreshTasks();
        toast("已清理历史任务");
      });
    });
    $("#task-list").addEventListener("click", (e) => {
      const btn = e.target.closest("[data-task-id]");
      if (!btn) return;
      selectTask(btn.dataset.taskId, true);
      renderTaskList();
      pollTaskLog(true);
    });

    $("#software-grid").addEventListener("click", (e) => {
      const btn = e.target.closest("button[data-act]");
      if (!btn) return;
      softAction(btn.dataset.act, btn);
    });

    $("#sites-table").addEventListener("click", (e) => {
      const pathBtn = e.target.closest("[data-site-path]");
      if (pathBtn) {
        const path = pathBtn.dataset.sitePath;
        if (!path) return;
        state.filesPath = path;
        setView("files");
        return;
      }
      const btn = e.target.closest("button[data-act]");
      if (!btn) return;
      const name = btn.dataset.site;
      const act = btn.dataset.act;
      if (act === "site-config") {
        withBusy(async () => openSiteSettings(name), btn);
        return;
      }
      if (act === "site-analyze") {
        withBusy(async () => openSiteAnalytics(name), btn);
        return;
      }
      if (act === "site-delete") {
        openModal({
          title: `删除网站 · ${name}`,
          bodyHtml: `
            <p class="small text-secondary">将删除配置记录与 Nginx 虚拟主机。</p>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="delete_files" value="1" id="delFiles">
              <label class="form-check-label" for="delFiles">同时删除网站目录（不可恢复）</label>
            </div>`,
          onSubmit: async (fd) => {
            await api("/api/websites/delete", {
              method: "POST",
              body: { name, delete_files: fd.get("delete_files") === "1" },
            });
            toast("已删除");
          },
        });
        return;
      }
      withBusy(async () => {
        try {
          if (act === "site-start") await api("/api/websites/start", { method: "POST", body: { name } });
          else if (act === "site-stop") await api("/api/websites/stop", { method: "POST", body: { name } });
          else if (act === "site-restart") await api("/api/websites/restart", { method: "POST", body: { name } });
          toast("已完成");
        } catch (err) {
          if (act === "site-start" || act === "site-restart") {
            await alertDialog({
              title: act === "site-restart" ? "重启失败" : "启动失败",
              message: err.message || String(err),
            });
          } else {
            throw err;
          }
        }
        await refresh();
      }, btn);
    });

    $("#db-table").addEventListener("click", (e) => {
      const btn = e.target.closest("button[data-act]");
      if (!btn) return;
      const name = btn.dataset.db;
      if (btn.dataset.act === "db-drop") {
        withBusy(async () => {
          const ok = await confirmDialog({
            title: "删除数据库",
            message: `确认删除数据库「${name}」？此操作不可恢复。`,
            okText: "删除",
            danger: true,
          });
          if (!ok) return;
          await api("/api/mysql/databases/drop", { method: "POST", body: { name } });
          toast("已删除");
          await refresh();
        }, btn);
        return;
      }
      if (btn.dataset.act === "db-access") {
        openModal({
          title: `权限 · ${name}`,
          bodyHtml: `
            <div class="mb-2">
              <label class="form-label">模式</label>
              <select class="form-select form-select-sm" name="mode">
                <option value="local">仅本地</option>
                <option value="fixed_ip">固定 IP</option>
                <option value="any">外网 (%)</option>
              </select>
            </div>
            <div class="mb-2">
              <label class="form-label">Host（fixed_ip 时必填）</label>
              <input class="form-control form-control-sm" name="host" placeholder="1.2.3.4" />
            </div>`,
          onSubmit: async (fd) => {
            await api("/api/mysql/databases/access", {
              method: "POST",
              body: { name, mode: fd.get("mode"), host: fd.get("host") || "" },
            });
            toast("权限已更新");
          },
        });
      }
    });

    $("#btn-site-create").addEventListener("click", () => {
      openModal({
        title: "新建网站",
        bodyHtml: `
          <div class="mb-2">
            <label class="form-label">名称</label>
            <input class="form-control form-control-sm" name="name" required placeholder="我的站点" />
            <div class="form-text">可用中文</div>
          </div>
          <div class="mb-2">
            <label class="form-label">类型</label>
            <select class="form-select form-select-sm" name="type" id="site-type">
              <option value="static">静态</option>
              <option value="fastweb">Fastweb</option>
            </select>
            <div class="form-text field-upstream-tip">静态站仅需名称/域名；反代请创建后在「反向代理」添加</div>
          </div>
          <div class="mb-2">
            <label class="form-label">域名</label>
            <input class="form-control form-control-sm" name="domain" required placeholder="www.example.com 或 www.example.com:8080" />
            <div class="form-text">仅支持 1 个域名；不写端口默认 80</div>
          </div>
          <div class="mb-2">
            <label class="form-label">目录</label>
            <input class="form-control form-control-sm" name="root" required placeholder="/ngs/wwwroot/www.example.com" />
            <div class="form-text">根据域名自动生成，可手动修改</div>
          </div>`,
        onSubmit: async (fd) => {
          const type = fd.get("type");
          const domain = String(fd.get("domain") || "").trim();
          if (!domain) throw new Error("请填写域名");
          if (/[\s,;]/.test(domain)) throw new Error("仅支持填写一个域名");
          const root = String(fd.get("root") || "").trim();
          if (!root) throw new Error("请填写目录");
          const body = {
            name: String(fd.get("name") || "").trim(),
            type,
            domain,
            domains: [domain],
            root,
          };
          await api("/api/websites", { method: "POST", body });
          toast("网站已创建");
        },
      });
      const body = $("#modal-body");
      syncSiteFormFields(body);
      const domainEl = body.querySelector('[name="domain"]');
      const rootEl = body.querySelector('[name="root"]');
      let rootTouched = false;
      rootEl.addEventListener("input", () => { rootTouched = true; });
      const syncRootFromDomain = () => {
        if (rootTouched) return;
        const host = parseDomainToken(domainEl.value.trim()).host || "";
        rootEl.value = host ? `/ngs/wwwroot/${host}` : "";
      };
      domainEl.addEventListener("input", syncRootFromDomain);
      domainEl.addEventListener("change", syncRootFromDomain);
      body.querySelector('[name="type"]').addEventListener("change", () => syncSiteFormFields(body));
    });

    $("#btn-db-create").addEventListener("click", () => {
      openModal({
        title: "新建数据库",
        bodyHtml: `
          <div class="mb-2"><label class="form-label">库名</label><input class="form-control form-control-sm" name="name" required /></div>
          <div class="mb-2"><label class="form-label">用户</label><input class="form-control form-control-sm" name="user" required /></div>
          <div class="mb-2"><label class="form-label">密码</label><input class="form-control form-control-sm" name="password" required /></div>`,
        onSubmit: async (fd) => {
          await api("/api/mysql/databases", {
            method: "POST",
            body: {
              name: String(fd.get("name") || "").trim(),
              user: String(fd.get("user") || "").trim(),
              password: String(fd.get("password") || ""),
            },
          });
          toast("数据库已创建");
        },
      });
    });

    $("#btn-mysql-password").addEventListener("click", () => {
      openModal({
        title: "修改 root 密码",
        bodyHtml: `<div class="mb-2"><label class="form-label">新密码</label><input class="form-control form-control-sm" name="password" type="password" required /></div>`,
        onSubmit: async (fd) => {
          await api("/api/mysql/root/password", {
            method: "POST",
            body: { password: String(fd.get("password") || "") },
          });
          toast("root 密码已更新");
        },
      });
    });

    $("#files-crumbs").addEventListener("click", (e) => {
      const btn = e.target.closest("button[data-path]");
      if (!btn) return;
      loadFiles(btn.dataset.path);
    });
    $("#btn-files-up").addEventListener("click", () => loadFiles(parentPath(state.filesPath)));
    $("#btn-files-delete-selected")?.addEventListener("click", () => {
      deleteSelectedFiles().catch((err) => toast(err.message || String(err), "err"));
    });
    $("#btn-files-clear-selection")?.addEventListener("click", () => {
      clearFilesSelection();
      renderFiles();
    });
    $("#files-select-all")?.addEventListener("change", (e) => {
      const on = !!e.target.checked;
      for (const p of visibleFilePaths()) setFileSelected(p, on);
      state.filesLastClicked = "";
      renderFiles();
    });
    $("#btn-files-mkdir").addEventListener("click", () => {
      openModal({
        title: "新建目录",
        bodyHtml: `<div class="mb-2"><label class="form-label">目录名</label><input class="form-control form-control-sm" name="name" required /></div>`,
        onSubmit: async (fd) => {
          const name = String(fd.get("name") || "").trim();
          if (!name) throw new Error("目录名不能为空");
          await api("/api/files/mkdir", { method: "POST", body: { path: joinPath(state.filesPath, name) } });
          toast("目录已创建");
          await loadFiles(state.filesPath);
        },
      });
    });
    $("#btn-files-newfile").addEventListener("click", () => {
      openModal({
        title: "新建文件",
        bodyHtml: `<div class="mb-2"><label class="form-label">文件名</label><input class="form-control form-control-sm" name="name" required placeholder="demo.txt" /></div>`,
        onSubmit: async (fd) => {
          const name = String(fd.get("name") || "").trim();
          if (!name) throw new Error("文件名不能为空");
          await openCodeEditor({ path: joinPath(state.filesPath, name), content: "", readonly: false });
        },
      });
    });

    $("#files-table").addEventListener("click", (e) => {
      const check = e.target.closest(".files-row-check");
      if (check) {
        e.stopPropagation();
        const path = check.dataset.path;
        const on = !!check.checked;
        if (e.shiftKey && state.filesLastClicked) {
          toggleFileRange(state.filesLastClicked, path, on);
        } else {
          setFileSelected(path, on);
        }
        state.filesLastClicked = path;
        renderFiles();
        return;
      }
      const open = e.target.closest("[data-open]");
      if (open) {
        if (open.dataset.dir === "1") loadFiles(open.dataset.open);
        return;
      }
      const btn = e.target.closest("button[data-act]");
      if (!btn) return;
      const path = btn.dataset.path;
      const act = btn.dataset.act;
      if (act === "file-rename") {
        openModal({
          title: "重命名",
          bodyHtml: `<div class="mb-2"><label class="form-label">新名称</label><input class="form-control form-control-sm" name="name" value="${escapeHtml(btn.dataset.name || "")}" required /></div>`,
          onSubmit: async (fd) => {
            const name = String(fd.get("name") || "").trim();
            if (!name) throw new Error("名称不能为空");
            await api("/api/files/rename", { method: "POST", body: { from: path, to: joinPath(parentPath(path), name) } });
            toast("已重命名");
            await loadFiles(state.filesPath);
          },
        });
        return;
      }
      if (act === "file-delete") {
        const isDir = btn.dataset.dir === "1";
        openModal({
          title: "删除确认",
          bodyHtml: `
            <p class="small text-secondary mb-2">将删除：${escapeHtml(path)}</p>
            ${isDir ? `<div class="form-check"><input class="form-check-input" type="checkbox" name="recursive" value="1" id="rec"><label class="form-check-label" for="rec">递归删除目录内容</label></div>` : ""}`,
          onSubmit: async (fd) => {
            await api("/api/files/delete", {
              method: "POST",
              body: { path, recursive: fd.get("recursive") === "1" },
            });
            toast("已删除");
            await loadFiles(state.filesPath);
          },
        });
        return;
      }
      if (act === "file-edit") {
        withBusy(async () => {
          await openFileInEditor(path, Number(btn.dataset.size) || 0, false);
        }, btn);
      }
    });

    $("#files-table").addEventListener("dblclick", (e) => {
      const open = e.target.closest("[data-open]");
      if (!open || open.dataset.dir === "1") return;
      e.preventDefault();
      withBusy(async () => {
        if (open.dataset.tooBig === "1") throw new Error("文件超过 10MB，不支持在线编辑/预览");
        await openFileInEditor(open.dataset.open, Number(open.dataset.size) || 0, false);
      });
    });

    $("#code-editor-cancel").addEventListener("click", () => {
      closeCodeEditor();
    });
    $("#code-editor-backdrop").addEventListener("click", () => {
      closeCodeEditor();
    });
    $("#editor-tree-up").addEventListener("click", () => {
      withBusy(async () => {
        await loadEditorTree(parentPath(state.editorTreePath));
      });
    });
    $("#editor-tree-refresh").addEventListener("click", () => {
      withBusy(async () => {
        await loadEditorTree(state.editorTreePath || "/");
      });
    });
    $("#editor-tree").addEventListener("click", (e) => {
      const item = e.target.closest("[data-tree-path]");
      if (!item) return;
      const path = item.dataset.treePath;
      if (item.dataset.treeDir === "1") {
        withBusy(async () => loadEditorTree(path));
        return;
      }
      withBusy(async () => {
        await openFileInEditor(path, Number(item.dataset.treeSize) || 0, false);
      });
    });
    $("#editor-tabs").addEventListener("click", (e) => {
      const closeBtn = e.target.closest("[data-close-tab]");
      if (closeBtn) {
        e.stopPropagation();
        withBusy(async () => closeEditorTab(closeBtn.dataset.closeTab));
        return;
      }
      const tab = e.target.closest("[data-tab-path]");
      if (!tab) return;
      withBusy(async () => switchEditorTab(tab.dataset.tabPath));
    });

    document.addEventListener("keydown", (e) => {
      if ($("#code-editor").hidden) return;
      if (e.key === "Escape") {
        // don't close whole IDE on Esc; only if no tabs? skip for safety
        return;
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
        e.preventDefault();
        e.stopPropagation();
        withBusy(async () => {
          await saveActiveTab();
        });
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "w") {
        const tab = activeTab();
        if (!tab) return;
        e.preventDefault();
        withBusy(async () => closeEditorTab(tab.path));
      }
    }, true);
  }

  async function boot() {
    try {
      await api("/api/auth/me");
    } catch (_) {
      location.replace("/login.html");
      return;
    }
    bindEvents();
    let hash = (location.hash || "#console").slice(1);
    if (hash === "overview" || hash === "monitor") hash = "console";
    setView(titles[hash] ? hash : "console");
    refresh();
    refreshTasks();
    setInterval(refresh, 15000);
    setInterval(refreshTasks, 2000);
  }

  boot();
})();