{% extends "base.html" %} {#
============================================================ 作业管理页 路由:
GET /jobs ============================================================ #} {%
block title %}作业管理{% endblock %} {% block breadcrumb_title %}作业管理{%
endblock %} {% block head_extra %}
<style>
    .job-monitor-modal { width:min(1180px,calc(100vw - 32px)); max-width:none; max-height:92vh; }
    .job-monitor-root { min-height:520px; }
    .job-monitor-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; color:#64748b; font-size:12px; }
    .job-monitor-toolbar-actions { display:flex; align-items:center; gap:8px; }
    .job-monitor-toolbar select,.job-monitor-tool-button { border:1px solid #dbe2ea; border-radius:6px; background:#fff; padding:5px 9px; color:#475569; font-size:12px; }
    .job-monitor-tool-button { cursor:pointer; }
    .job-monitor-tool-button:hover { background:#f1f5f9; }
    .btn-monitor { background:#ff9830; color:#111217; }
    .btn-monitor:hover { background:#e88b2d; }
    .job-monitor-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0; }
    .job-monitor-card { min-width:0; padding:14px; border:1px solid #e2e8f0; border-radius:9px; background:linear-gradient(145deg,#fff,#f8fafc); box-shadow:0 1px 2px rgba(15,23,42,.04); }
    .job-monitor-label { color:#64748b; font-size:12px; margin-bottom:5px; }
    .job-monitor-value { overflow:hidden; color:#0f172a; font-size:21px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
    .job-monitor-meta { overflow:hidden; color:#64748b; font-size:12px; margin-top:3px; text-overflow:ellipsis; white-space:nowrap; }
    .job-monitor-bar { height:6px; margin-top:8px; overflow:hidden; border-radius:99px; background:#e2e8f0; }
    .job-monitor-bar > span { display:block; height:100%; border-radius:99px; background:#2563eb; transition:width .25s ease; }
    .job-monitor-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
    .job-monitor-chart-card { min-width:0; padding:14px 14px 8px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; }
    .job-monitor-chart-card.is-wide { grid-column:1/-1; }
    .job-monitor-chart-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:2px; }
    .job-monitor-chart-title { color:#0f172a; font-size:14px; font-weight:600; }
    .job-monitor-chart-subtitle { color:#94a3b8; font-size:11px; }
    .job-monitor-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; color:#64748b; font-size:11px; }
    .job-monitor-legend i { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; }
    .job-monitor-chart { width:100%; height:210px; }
    .job-monitor-chart-empty { display:flex; height:210px; align-items:center; justify-content:center; color:#94a3b8; font-size:12px; }
    .job-monitor-details { margin-top:12px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; }
    .job-monitor-details summary { padding:11px 14px; cursor:pointer; color:#334155; font-size:13px; font-weight:600; }
    .job-monitor-details > div { overflow-x:auto; border-top:1px solid #e2e8f0; }
    .job-monitor-table { width:100%; font-size:12px; border-collapse:collapse; }
    .job-monitor-table th,.job-monitor-table td { padding:8px; border-bottom:1px solid #e5e7eb; text-align:left; white-space:nowrap; }
    @media (max-width:800px) {
        .job-monitor-grid,.job-monitor-charts { grid-template-columns:1fr; }
        .job-monitor-chart-card.is-wide { grid-column:auto; }
    }
</style>
{% endblock %} {# ══════════════════════════════════════════════════════════
主体内容 ══════════════════════════════════════════════════════════ #} {% block
content %}

<!-- 页面标题行 -->
<div class="flex justify-between items-center" style="margin-bottom: 24px">
    <h2 style="font-size: 28px; font-weight: 700">Slurm 作业管理</h2>
    <button
        class="btn btn-secondary"
        id="refreshBtn"
        onclick="refreshData('refreshBtn')"
    >
        刷新队列
    </button>
</div>

<!-- 统计卡片组 -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">运行中</div>
        <div class="stat-value" style="color: #10b981">0</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">排队中</div>
        <div class="stat-value" style="color: #f59e0b">0</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">今日完成</div>
        <div class="stat-value" style="color: #6b7280">0</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">今日失败</div>
        <div class="stat-value" style="color: #dc3023">0</div>
    </div>
</div>

<!-- 活动作业卡片 -->
<div class="card">
    <div class="flex justify-between items-center" style="margin-bottom: 16px">
        <h3 class="card-title" style="margin-bottom: 0">活动作业队列</h3>
        <div class="flex gap-2">
            <select
                id="partitionFilter"
                onchange="applyFilters()"
                style="
                    padding: 6px 12px;
                    border: 1px solid #e5e7eb;
                    border-radius: 6px;
                    font-size: 14px;
                "
            >
                <option value="">所有分区</option>
            </select>
            <select
                id="stateFilter"
                onchange="applyFilters()"
                style="
                    padding: 6px 12px;
                    border: 1px solid #e5e7eb;
                    border-radius: 6px;
                    font-size: 14px;
                "
            >
                <option value="">所有状态</option>
                <option value="RUNNING">运行中</option>
                <option value="PENDING">排队中</option>
            </select>
            <select
                id="ownerFilter"
                onchange="applyFilters()"
                style="
                    padding: 6px 12px;
                    border: 1px solid #e5e7eb;
                    border-radius: 6px;
                    font-size: 14px;
                "
            >
                <option value="">所有作业</option>
                <option value="mine">仅我的作业</option>
            </select>
        </div>
    </div>
    <div class="data-table-scroll" role="region" aria-label="活动作业队列" tabindex="0">
        <table class="table data-table data-table--wide has-actions" id="jobsTable">
            <thead>
                <tr>
                    <th class="col-number">作业ID</th>
                    <th>作业名称</th>
                    <th>用户</th>
                    <th>分区</th>
                    <th class="col-status">状态</th>
                    <th>节点</th>
                    <th class="col-number">节点数</th>
                    <th class="col-number">核心数</th>
                    <th>运行时间</th>
                    <th>提交时间</th>
                    <th class="col-actions">操作</th>
                </tr>
            </thead>
            <tbody id="activeJobsTableBody">
                <tr>
                    <td colspan="11" style="text-align: center; color: #6b7280">
                        加载中…
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 最近完成的作业卡片 -->
<div class="card">
    <h3 class="card-title">最近完成的作业</h3>
    <div class="data-table-scroll" role="region" aria-label="最近完成的作业" tabindex="0">
        <table class="table data-table data-table--medium">
            <thead>
                <tr>
                    <th class="col-number">作业ID</th>
                    <th>作业名称</th>
                    <th>用户</th>
                    <th class="col-status">状态</th>
                    <th class="col-number">核心数</th>
                    <th>运行时间</th>
                    <th>完成时间</th>
                    <th class="col-status">退出码</th>
                </tr>
            </thead>
            <tbody id="completedJobsTableBody">
                <tr>
                    <td colspan="8" style="text-align: center; color: #6b7280">
                        加载中…
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 操作说明卡片 -->
<div class="card" style="margin-top: 20px; background-color: #eff6ff; border-left: 4px solid #3b82f6">
    <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1e40af">
        <span aria-hidden="true" style="margin-right: 8px">ⓘ</span>作业管理说明
    </h3>
    <ul style="list-style: disc; margin-left: 24px; color: #1e40af; font-size: 14px; line-height: 1.8">
        <li>使用分区、状态和作业归属筛选器快速定位目标作业，点击“刷新队列”获取最新状态</li>
        <li>运行中或排队中的作业可在操作列取消，取消后通常无法恢复</li>
        <li>点击“监控”可查看资源趋势图，指标每 5 秒更新并在当前浏览器中保留最近 2 小时</li>
        <li>作业状态由 Slurm 调度器维护，完成记录会保留在“最近完成的作业”中</li>
    </ul>
</div>

{% endblock %} {# ══════════════════════════════════════════════════════════
页面脚本（logout 已在 base.html 全局定义，此处无需重复）
══════════════════════════════════════════════════════════ #} {% block
page_scripts %}
<script>
    /* ── 过滤器状态 ────────────────────────────────────────── */
    let currentPartitionFilter = "";
    let currentStateFilter = "";
    let currentOwnerFilter = "";
    let jobMonitorTimer = null;
    let currentJobMonitorModalId = null;
    let currentJobMonitorId = null;
    let currentJobMonitorData = null;
    let jobMonitorHistory = [];
    const JOB_MONITOR_CACHE_PREFIX = "openhpc_job_monitor_v1:";
    const JOB_MONITOR_CACHE_INDEX = "openhpc_job_monitor_index_v1";
    const JOB_MONITOR_RETENTION_MS = 2 * 60 * 60 * 1000;
    const JOB_MONITOR_MAX_SAMPLES = 1440;
    const JOB_MONITOR_MAX_JOBS = 8;

    /* ── 状态映射表 ────────────────────────────────────────── */
    const stateMap = {
        RUNNING: { text: "运行中", cls: "badge-success" },
        PENDING: { text: "排队中", cls: "badge-warning" },
        COMPLETED: { text: "已完成", cls: "badge-info" },
        FAILED: { text: "失败", cls: "badge-error" },
        CANCELLED: { text: "已取消", cls: "badge-error" },
        TIMEOUT: { text: "超时", cls: "badge-error" },
        OUT_OF_MEMORY: { text: "内存溢出", cls: "badge-error" },
    };

    /* ── 加载作业统计 ──────────────────────────────────────── */
    async function loadJobStats() {
        try {
            const stats = await (await fetch("/api/slurm/jobs/stats")).json();
            const cards = document.querySelectorAll(".stat-card .stat-value");
            if (cards.length >= 4) {
                cards[0].textContent = stats.running ?? 0;
                cards[1].textContent = stats.pending ?? 0;
                cards[2].textContent = stats.completed ?? 0;
                cards[3].textContent = stats.failed ?? 0;
            }
        } catch (e) {
            console.error("[jobs] 作业统计加载失败:", e);
        }
    }

    /* ── 填充分区下拉框 ────────────────────────────────────── */
    async function loadPartitions() {
        try {
            const data = await (await fetch("/api/slurm/partitions")).json();
            const select = document.getElementById("partitionFilter");
            select.innerHTML = '<option value="">所有分区</option>';
            (data.partitions || []).forEach((p) => {
                const opt = document.createElement("option");
                opt.value = p.name;
                opt.textContent = p.name;
                select.appendChild(opt);
            });
        } catch (e) {
            console.error("[jobs] 分区列表加载失败:", e);
        }
    }

    /* ── 加载活动作业 ──────────────────────────────────────── */
    async function loadActiveJobs() {
        const tbody = document.getElementById("activeJobsTableBody");
        try {
            let url = "/api/slurm/jobs";
            const params = new URLSearchParams();
            if (currentStateFilter) params.append("state", currentStateFilter);
            if (currentPartitionFilter)
                params.append("partition", currentPartitionFilter);
            if (params.toString()) url += "?" + params.toString();

            const data = await (await fetch(url)).json();
            tbody.innerHTML = "";

            const jobs = (data.jobs || []).filter(
                (job) => !currentOwnerFilter || job.user === __USER__.username,
            );
            if (jobs.length === 0) {
                tbody.innerHTML =
                    '<tr><td colspan="11" style="text-align:center;color:#6b7280;">暂无活动作业</td></tr>';
                return;
            }

            jobs.forEach((job) => {
                const st = stateMap[job.state] || {
                    text: job.state,
                    cls: "badge-info",
                };
                // 取消按钮：管理员可取消任意作业，普通用户只能取消自己的作业
                const canCancel =
                    __USER__.isAdmin || job.user === __USER__.username;
                const row = document.createElement("tr");
                const jobIdCell = appendTextCell(row, job.job_id, true);
                jobIdCell.classList.add("col-number");
                appendTextCell(row, job.name);
                const userCell = appendTextCell(row, job.user);
                if (job.user === __USER__.username) {
                    const mine = document.createElement("span");
                    mine.textContent = "(我)";
                    mine.style.cssText = "font-size:10px;color:#6b7280;margin-left:4px;";
                    userCell.appendChild(mine);
                }
                appendTextCell(row, job.partition);
                const stateCell = document.createElement("td");
                const stateBadge = document.createElement("span");
                stateBadge.className = `badge ${st.cls}`;
                stateBadge.textContent = st.text;
                stateCell.className = "col-status";
                stateCell.appendChild(stateBadge);
                row.appendChild(stateCell);
                appendTextCell(row, job.nodelist || "—");
                const nodeCountCell = appendTextCell(row, job.nodes);
                nodeCountCell.classList.add("col-number");
                const cpuCountCell = appendTextCell(row, job.cpus ?? job.alloc_cpus ?? "—");
                cpuCountCell.classList.add("col-number");
                appendTextCell(row, job.time || "—");
                appendTextCell(
                    row,
                    job.start_time !== "Unknown" ? job.start_time : "—",
                );

                const actions = document.createElement("td");
                actions.className = "col-actions";
                const actionGroup = document.createElement("div");
                actionGroup.className = "data-table-actions";
                actionGroup.appendChild(
                    createActionButton("详情", () => showJobDetail(job.job_id)),
                );
                actionGroup.appendChild(
                    createActionButton(
                        "监控",
                        () => showJobMonitor(job.job_id),
                        "monitor",
                    ),
                );
                const cancelButton = createActionButton(
                    "取消",
                    () => cancelJob(job.job_id),
                    canCancel ? "danger" : "disabled",
                );
                if (!canCancel) cancelButton.title = "只能取消自己的作业";
                actionGroup.appendChild(cancelButton);
                actions.appendChild(actionGroup);
                row.appendChild(actions);
                tbody.appendChild(row);
            });
        } catch (e) {
            console.error("[jobs] 活动作业加载失败:", e);
            tbody.innerHTML =
                '<tr><td colspan="11" style="text-align:center;color:#dc3023;">加载失败，请检查 Slurm 服务</td></tr>';
        }
    }

    /* ── 加载已完成作业 ────────────────────────────────────── */
    async function loadCompletedJobs() {
        const tbody = document.getElementById("completedJobsTableBody");
        try {
            const data = await (
                await fetch("/api/slurm/jobs/completed/recent?limit=10")
            ).json();
            tbody.innerHTML = "";

            const jobs = (data.jobs || []).filter(
                (job) => !currentOwnerFilter || job.user === __USER__.username,
            );
            if (jobs.length === 0) {
                tbody.innerHTML =
                    '<tr><td colspan="8" style="text-align:center;color:#6b7280;">暂无已完成作业</td></tr>';
                return;
            }

            jobs.forEach((job) => {
                const st = stateMap[job.state] || {
                    text: job.state,
                    cls: "badge-info",
                };
                const exitCode = (job.exit_code || "0:0").split(":")[0];
                const exitCls =
                    exitCode === "0" ? "badge-success" : "badge-error";
                const row = document.createElement("tr");
                const jobIdCell = appendTextCell(row, job.job_id, true);
                jobIdCell.classList.add("col-number");
                appendTextCell(row, job.name);
                appendTextCell(row, job.user);
                const stateCell = appendBadgeCell(row, st.text, st.cls);
                stateCell.classList.add("col-status");
                const cpuCountCell = appendTextCell(row, job.cpus ?? job.alloc_cpus ?? "—");
                cpuCountCell.classList.add("col-number");
                appendTextCell(row, job.elapsed || "—");
                appendTextCell(row, job.end_time || "—");
                const exitCodeCell = appendBadgeCell(row, exitCode, exitCls);
                exitCodeCell.classList.add("col-status");
                tbody.appendChild(row);
            });
        } catch (e) {
            console.error("[jobs] 已完成作业加载失败:", e);
            tbody.innerHTML =
                '<tr><td colspan="8" style="text-align:center;color:#dc3023;">加载失败，请检查 Slurm 服务</td></tr>';
        }
    }

    /* ── 取消作业 ──────────────────────────────────────────── */
    async function cancelJob(jobId) {
        if (!confirm(`确定要取消作业 ${jobId} 吗？`)) return;
        try {
            const res = await fetch(`/api/slurm/jobs/${jobId}`, {
                method: "DELETE",
            });
            if (res.ok) {
                showToast("作业已取消", "success");
                loadJobStats();
                loadActiveJobs();
            } else {
                const err = await res.json();
                showToast(err.detail || "取消作业失败", "error");
            }
        } catch (e) {
            console.error("[jobs] 取消作业失败:", e);
            showToast("取消作业失败", "error");
        }
    }

    /* ── 作业详情弹窗 ──────────────────────────────────────── */
    async function showJobDetail(jobId) {
        try {
            const res = await fetch(`/api/slurm/jobs/${jobId}`);
            if (!res.ok) throw new Error("获取作业详情失败");
            const job = await res.json();
            const safe = (value, fallback = "N/A") =>
                escapeHtml(value || fallback);
            const safeJobId = safe(job.JobId || jobId);

            const detailHTML = `
                <div style="font-family:monospace;font-size:13px;line-height:1.6;">
                    <div style="margin-bottom:12px;"><strong>作业ID:</strong>   ${safeJobId}</div>
                    <div style="margin-bottom:12px;"><strong>作业名称:</strong> ${safe(job.JobName)}</div>
                    <div style="margin-bottom:12px;"><strong>用户:</strong>     ${safe(job.UserId)}</div>
                    <div style="margin-bottom:12px;"><strong>分区:</strong>     ${safe(job.Partition)}</div>
                    <div style="margin-bottom:12px;"><strong>状态:</strong>     ${safe(job.JobState)}</div>
                    <div style="margin-bottom:12px;"><strong>节点:</strong>     ${safe(job.NodeList)}</div>
                    <div style="margin-bottom:12px;"><strong>节点数:</strong>   ${safe(job.NumNodes)}</div>
                    <div style="margin-bottom:12px;"><strong>CPU数:</strong>    ${safe(job.NumCPUs)}</div>
                    <div style="margin-bottom:12px;"><strong>运行时间:</strong> ${safe(job.RunTime)}</div>
                    <div style="margin-bottom:12px;"><strong>时间限制:</strong> ${safe(job.TimeLimit)}</div>
                    <div style="margin-bottom:12px;"><strong>提交时间:</strong> ${safe(job.SubmitTime)}</div>
                    <div style="margin-bottom:12px;"><strong>开始时间:</strong> ${safe(job.StartTime)}</div>
                    <div style="margin-bottom:12px;"><strong>工作目录:</strong> ${safe(job.WorkDir)}</div>
                    <div style="margin-bottom:12px;">
                        <strong>标准输出:</strong> ${safe(job.StdOut)}
                        ${
                            job.StdOut && job.StdOut !== "N/A"
                                ? `<button class="btn btn-secondary"
                                       style="padding:2px 8px;font-size:12px;margin-left:8px;"
                                       data-output-type="stdout">查看内容</button>`
                                : ""
                        }
                    </div>
                    <div style="margin-bottom:12px;">
                        <strong>标准错误:</strong> ${safe(job.StdErr)}
                        ${
                            job.StdErr && job.StdErr !== "N/A"
                                ? `<button class="btn btn-secondary"
                                       style="padding:2px 8px;font-size:12px;margin-left:8px;"
                                       data-output-type="stderr">查看内容</button>`
                                : ""
                        }
                    </div>
                    ${
                        job.Command
                            ? `<div style="margin-bottom:12px;">
                               <strong>命令:</strong><br/>
                               <pre style="background:#f3f4f6;padding:8px;border-radius:4px;overflow-x:auto;margin-top:4px;">${safe(job.Command)}</pre>
                           </div>`
                            : ""
                    }
                </div>`;

            const detailModalId = showModal("作业详细信息", detailHTML);
            document
                .querySelectorAll(`#${detailModalId} [data-output-type]`)
                .forEach((button) => {
                    button.addEventListener("click", () =>
                        viewJobOutput(
                            String(job.JobId || jobId),
                            button.dataset.outputType,
                        ),
                    );
                });
        } catch (e) {
            console.error("[jobs] 获取作业详情失败:", e);
            showToast("获取作业详情失败", "error");
        }
    }

    /* ── 实时资源监控 ──────────────────────────────────────── */
    function formatResourceBytes(bytes) {
        if (!Number.isFinite(Number(bytes)) || Number(bytes) <= 0) return "—";
        const units = ["B", "KiB", "MiB", "GiB", "TiB"];
        const power = Math.min(Math.floor(Math.log(Number(bytes)) / Math.log(1024)), units.length - 1);
        return `${(Number(bytes) / Math.pow(1024, power)).toFixed(power ? 1 : 0)} ${units[power]}`;
    }

    function formatChartBytes(bytes) {
        return Number(bytes) === 0 ? "0 B" : formatResourceBytes(bytes);
    }

    function monitorNumber(value) {
        if (value === null || value === undefined || value === "") return null;
        const number = Number(value);
        return Number.isFinite(number) ? number : null;
    }

    function monitorPercent(value) {
        const number = monitorNumber(value);
        return number === null ? null : Math.max(0, Math.min(100, number));
    }

    function jobMonitorCacheKey(jobId) {
        return JOB_MONITOR_CACHE_PREFIX + String(jobId);
    }

    function readJobMonitorCacheIndex() {
        try {
            const index = JSON.parse(localStorage.getItem(JOB_MONITOR_CACHE_INDEX) || "[]");
            return Array.isArray(index) ? index : [];
        } catch (error) {
            return [];
        }
    }

    function loadJobMonitorHistory(jobId) {
        try {
            const cached = JSON.parse(localStorage.getItem(jobMonitorCacheKey(jobId)) || "[]");
            if (!Array.isArray(cached)) return [];
            const cutoff = Date.now() - JOB_MONITOR_RETENTION_MS;
            return cached
                .filter((sample) => Number.isFinite(sample?.t) && sample.t >= cutoff)
                .sort((left, right) => left.t - right.t)
                .slice(-JOB_MONITOR_MAX_SAMPLES);
        } catch (error) {
            console.warn("[jobs] 读取作业监控缓存失败:", error);
            return [];
        }
    }

    function saveJobMonitorHistory(jobId, history) {
        const cutoff = Date.now() - JOB_MONITOR_RETENTION_MS;
        const retained = history
            .filter((sample) => sample.t >= cutoff)
            .slice(-JOB_MONITOR_MAX_SAMPLES);
        try {
            localStorage.setItem(jobMonitorCacheKey(jobId), JSON.stringify(retained));
            const index = readJobMonitorCacheIndex()
                .filter((entry) => entry?.jobId !== String(jobId));
            index.push({ jobId: String(jobId), updatedAt: Date.now() });
            while (index.length > JOB_MONITOR_MAX_JOBS) {
                const expired = index.shift();
                if (expired?.jobId) localStorage.removeItem(jobMonitorCacheKey(expired.jobId));
            }
            localStorage.setItem(JOB_MONITOR_CACHE_INDEX, JSON.stringify(index));
        } catch (error) {
            console.warn("[jobs] 保存作业监控缓存失败:", error);
        }
        return retained;
    }

    function appendJobMonitorSample(jobId, data) {
        if (!data.available) return;
        const summary = data.summary || {};
        const timestamp = Date.parse(data.collected_at) || Date.now();
        const sample = {
            t: timestamp,
            cpu: monitorPercent(summary.cpu_percent),
            mem: monitorNumber(summary.memory_bytes),
            diskRead: monitorNumber(summary.disk_read_bytes),
            diskWrite: monitorNumber(summary.disk_write_bytes),
            gpu: monitorPercent(summary.gpu_percent),
            gpuMem: monitorNumber(summary.gpu_memory_bytes),
        };
        const previous = jobMonitorHistory[jobMonitorHistory.length - 1];
        if (previous?.t === timestamp) jobMonitorHistory[jobMonitorHistory.length - 1] = sample;
        else jobMonitorHistory.push(sample);
        jobMonitorHistory = saveJobMonitorHistory(jobId, jobMonitorHistory);
    }

    function clearJobMonitorHistory() {
        if (!currentJobMonitorId) return;
        jobMonitorHistory = [];
        try {
            localStorage.removeItem(jobMonitorCacheKey(currentJobMonitorId));
            const index = readJobMonitorCacheIndex().filter(
                (entry) => entry?.jobId !== String(currentJobMonitorId),
            );
            localStorage.setItem(JOB_MONITOR_CACHE_INDEX, JSON.stringify(index));
        } catch (error) {
            console.warn("[jobs] 清除作业监控缓存失败:", error);
        }
        if (currentJobMonitorData) renderJobMonitor(currentJobMonitorData);
        showToast("已清空该作业的浏览器监控历史", "success");
    }

    function monitorTimeLabel(timestamp) {
        return new Date(timestamp).toLocaleTimeString("zh-CN", {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        });
    }

    function downsampleMonitorHistory(history, limit = 240) {
        if (history.length <= limit) return history;
        const step = (history.length - 1) / (limit - 1);
        return Array.from({ length: limit }, (_, index) =>
            history[Math.round(index * step)],
        );
    }

    function monitorChart(title, subtitle, history, series, options = {}) {
        const availableSeries = series.filter((item) =>
            history.some((sample) => monitorNumber(sample[item.key]) !== null),
        );
        if (!history.length || !availableSeries.length) {
            return `<section class="job-monitor-chart-card${options.wide ? " is-wide" : ""}">
                <div class="job-monitor-chart-title">${escapeHtml(title)}</div>
                <div class="job-monitor-chart-empty">等待采样数据生成趋势图</div>
            </section>`;
        }

        const samples = downsampleMonitorHistory(history);
        const width = options.wide ? 1200 : 600;
        const height = 220;
        const plot = { left: 54, top: 22, right: 14, bottom: 30 };
        const plotWidth = width - plot.left - plot.right;
        const plotHeight = height - plot.top - plot.bottom;
        const firstTime = samples[0].t;
        const lastTime = samples[samples.length - 1].t;
        const timeSpan = Math.max(lastTime - firstTime, 1);
        const allValues = availableSeries.flatMap((item) =>
            samples.map((sample) => monitorNumber(sample[item.key])).filter((value) => value !== null),
        );
        const observedMax = Math.max(...allValues, 0);
        const yMax = Math.max(options.minimumMax || 0, observedMax * 1.12, 1);
        const formatValue = options.formatValue || ((value) => String(Math.round(value)));
        const x = (timestamp) => plot.left + (timestamp - firstTime) / timeSpan * plotWidth;
        const y = (value) => plot.top + plotHeight - value / yMax * plotHeight;
        const grid = [0, 0.5, 1].map((ratio) => {
            const yPosition = plot.top + plotHeight * (1 - ratio);
            return `<line x1="${plot.left}" y1="${yPosition}" x2="${width - plot.right}" y2="${yPosition}" stroke="#e2e8f0" stroke-dasharray="3 4"/>
                <text x="${plot.left - 8}" y="${yPosition + 4}" text-anchor="end" fill="#94a3b8" font-size="10">${escapeHtml(formatValue(yMax * ratio))}</text>`;
        }).join("");
        const xTicks = [firstTime, firstTime + timeSpan / 2, lastTime].map((timestamp, index) =>
            `<text x="${x(timestamp)}" y="${height - 8}" text-anchor="${index === 0 ? "start" : index === 2 ? "end" : "middle"}" fill="#94a3b8" font-size="10">${escapeHtml(monitorTimeLabel(timestamp))}</text>`,
        ).join("");
        const paths = availableSeries.map((item, seriesIndex) => {
            const points = samples
                .map((sample) => ({ sample, value: monitorNumber(sample[item.key]) }))
                .filter((point) => point.value !== null);
            const path = points.map((point, index) =>
                `${index ? "L" : "M"}${x(point.sample.t).toFixed(1)},${y(point.value).toFixed(1)}`,
            ).join(" ");
            const area = points.length > 1 && seriesIndex === 0
                ? `<path d="${path} L${x(points[points.length - 1].sample.t).toFixed(1)},${plot.top + plotHeight} L${x(points[0].sample.t).toFixed(1)},${plot.top + plotHeight} Z" fill="${item.color}" opacity=".08"/>`
                : "";
            const latest = points[points.length - 1];
            const latestPoint = latest
                ? `<circle cx="${x(latest.sample.t).toFixed(1)}" cy="${y(latest.value).toFixed(1)}" r="3.5" fill="#fff" stroke="${item.color}" stroke-width="2"><title>${escapeHtml(`${item.label} ${formatValue(latest.value)} · ${monitorTimeLabel(latest.sample.t)}`)}</title></circle>`
                : "";
            return `${area}<path d="${path}" fill="none" stroke="${item.color}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"><title>${escapeHtml(item.label)}</title></path>${latestPoint}`;
        }).join("");
        const legend = availableSeries.map((item) => {
            const latest = [...history].reverse().find((sample) => monitorNumber(sample[item.key]) !== null);
            const value = latest ? formatValue(Number(latest[item.key])) : "—";
            return `<span><i style="background:${item.color}"></i>${escapeHtml(item.label)} ${escapeHtml(value)}</span>`;
        }).join("");

        return `<section class="job-monitor-chart-card${options.wide ? " is-wide" : ""}">
            <div class="job-monitor-chart-header">
                <div><div class="job-monitor-chart-title">${escapeHtml(title)}</div><div class="job-monitor-chart-subtitle">${escapeHtml(subtitle)}</div></div>
                <div class="job-monitor-legend">${legend}</div>
            </div>
            <svg class="job-monitor-chart" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${escapeHtml(title)}趋势图">
                ${grid}${xTicks}${paths}
            </svg>
        </section>`;
    }

    function monitorMetric(label, value, meta = "", percent = null) {
        const safePercent = percent === null ? null : Math.max(0, Math.min(100, Number(percent) || 0));
        return `<div class="job-monitor-card">
            <div class="job-monitor-label">${escapeHtml(label)}</div>
            <div class="job-monitor-value">${escapeHtml(value)}</div>
            <div class="job-monitor-meta">${escapeHtml(meta || "\u00a0")}</div>
            ${safePercent === null ? "" : `<div class="job-monitor-bar"><span style="width:${safePercent}%"></span></div>`}
        </div>`;
    }

    function renderJobMonitor(data) {
        const root = document.getElementById("jobMonitorContent");
        if (!root) return;
        const selectedMinutes = Number(document.getElementById("jobMonitorWindow")?.value || 60);
        const chartCutoff = Date.now() - selectedMinutes * 60 * 1000;
        const visibleHistory = jobMonitorHistory.filter((sample) => sample.t >= chartCutoff);
        const allocation = data.allocation || {};
        const summary = data.summary || {};
        const cpuPercent = monitorPercent(summary.cpu_percent);
        const gpuPercent = monitorPercent(summary.gpu_percent);
        const cpuText = cpuPercent == null ? "—" : `${cpuPercent}%`;
        const gpuText = gpuPercent == null ? "—" : `${gpuPercent}%`;
        const memoryPercent = allocation.memory_bytes
            ? summary.memory_bytes / allocation.memory_bytes * 100
            : null;
        const gpuMeta = [
            `已分配 ${allocation.gpus || 0} 卡`,
            summary.gpu_memory_bytes ? `显存 ${formatResourceBytes(summary.gpu_memory_bytes)}` : "",
            gpuPercent == null ? "未启用利用率采集" : "",
        ].filter(Boolean).join(" · ");
        const rows = (data.steps || []).map((step) => `<tr>
            <td>${escapeHtml(step.step_id || "—")}</td>
            <td>${step.cpu_percent == null ? "—" : escapeHtml(`${step.cpu_percent}%`)}</td>
            <td>${escapeHtml(formatResourceBytes(step.average_rss_bytes))}</td>
            <td>${escapeHtml(formatResourceBytes(step.peak_rss_bytes))}</td>
            <td>${escapeHtml(formatResourceBytes(step.disk_read_bytes))}</td>
            <td>${escapeHtml(formatResourceBytes(step.disk_write_bytes))}</td>
            <td>${step.gpu_percent == null ? "—" : escapeHtml(`${step.gpu_percent}%`)}</td>
            <td>${escapeHtml(formatResourceBytes(step.gpu_memory_bytes))}</td>
        </tr>`).join("");
        const historyStart = jobMonitorHistory[0]?.t;
        const cacheText = historyStart
            ? `已缓存 ${jobMonitorHistory.length} 个采样 · ${monitorTimeLabel(historyStart)} 至今 · 最长保留 2 小时`
            : "采样将临时保存在此浏览器中，最长保留 2 小时";
        const chartSubtitle = `最近 ${selectedMinutes} 分钟 · 5 秒采样`;
        root.className = "job-monitor-root";
        root.removeAttribute("style");
        root.innerHTML = `
            <div class="job-monitor-toolbar">
                <span>状态：${escapeHtml(data.state || "UNKNOWN")} · ${escapeHtml(cacheText)} · 更新于 ${escapeHtml(monitorTimeLabel(Date.parse(data.collected_at) || Date.now()))}</span>
                <div class="job-monitor-toolbar-actions">
                    <label for="jobMonitorWindow">图表范围</label>
                    <select id="jobMonitorWindow" onchange="renderJobMonitor(currentJobMonitorData)">
                        ${[15, 30, 60, 120].map((minutes) => `<option value="${minutes}"${minutes === selectedMinutes ? " selected" : ""}>${minutes < 60 ? `${minutes} 分钟` : `${minutes / 60} 小时`}</option>`).join("")}
                    </select>
                    <button type="button" class="job-monitor-tool-button" onclick="refreshJobMonitor(currentJobMonitorId, true)">立即刷新</button>
                    <button type="button" class="job-monitor-tool-button" onclick="clearJobMonitorHistory()">清空历史</button>
                </div>
            </div>
            <div class="job-monitor-grid">
                ${monitorMetric("CPU 利用率", cpuText, `已分配 ${allocation.cpus || 0} 核`, cpuPercent)}
                ${monitorMetric("当前内存", formatResourceBytes(summary.memory_bytes), `峰值 ${formatResourceBytes(summary.peak_rss_bytes)}${allocation.memory_bytes ? ` · 已分配 ${formatResourceBytes(allocation.memory_bytes)}` : " · 未报告配额"}`, memoryPercent)}
                ${monitorMetric("磁盘读 / 写", `${formatResourceBytes(summary.disk_read_bytes)} / ${formatResourceBytes(summary.disk_write_bytes)}`, "sstat 作业步骤汇总")}
                ${monitorMetric("GPU 利用率", gpuText, gpuMeta, gpuPercent)}
            </div>
            ${data.available ? "" : `<div style="padding:12px;text-align:center;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;">${escapeHtml(data.message || "暂无最新监控数据，已保留历史采样")}</div>`}
            <div class="job-monitor-charts">
                ${monitorChart("处理器利用率", chartSubtitle, visibleHistory, [
                    { key: "cpu", label: "CPU", color: "#2563eb" },
                    { key: "gpu", label: "GPU", color: "#10b981" },
                ], { minimumMax: 100, formatValue: (value) => `${value.toFixed(0)}%` })}
                ${monitorChart("内存占用", chartSubtitle, visibleHistory, [
                    { key: "mem", label: "主存", color: "#8b5cf6" },
                    { key: "gpuMem", label: "GPU 显存", color: "#ec4899" },
                ], { formatValue: formatChartBytes })}
                ${monitorChart("累计磁盘 I/O", chartSubtitle, visibleHistory, [
                    { key: "diskRead", label: "读取", color: "#0891b2" },
                    { key: "diskWrite", label: "写入", color: "#f59e0b" },
                ], { wide: true, formatValue: formatChartBytes })}
            </div>
            ${data.available ? `<details class="job-monitor-details">
                <summary>查看作业步骤明细（${data.steps?.length || 0}）</summary><div><table class="job-monitor-table">
                <thead><tr><th>作业步骤</th><th>CPU</th><th>平均内存</th><th>峰值内存</th><th>磁盘读</th><th>磁盘写</th><th>GPU</th><th>GPU 显存</th></tr></thead>
                <tbody>${rows}</tbody></table></div></details>` : ""}
        `;
    }

    async function refreshJobMonitor(jobId, notifyFailure = false) {
        try {
            const response = await fetch(`/api/slurm/jobs/${encodeURIComponent(jobId)}/monitor`);
            const data = await response.json();
            if (!response.ok) throw new Error(data.detail || "获取监控数据失败");
            if (String(jobId) !== String(currentJobMonitorId)) return;
            currentJobMonitorData = data;
            appendJobMonitorSample(jobId, data);
            renderJobMonitor(data);
        } catch (error) {
            console.error("[jobs] 作业资源监控加载失败:", error);
            if (notifyFailure) showToast(error.message || "获取监控数据失败", "error");
        }
    }

    function closeJobMonitor() {
        if (jobMonitorTimer) clearInterval(jobMonitorTimer);
        jobMonitorTimer = null;
        if (currentJobMonitorModalId) closeModal(currentJobMonitorModalId);
        currentJobMonitorModalId = null;
        currentJobMonitorId = null;
        currentJobMonitorData = null;
        jobMonitorHistory = [];
    }

    function showJobMonitor(jobId) {
        closeJobMonitor();
        currentJobMonitorId = String(jobId);
        jobMonitorHistory = loadJobMonitorHistory(jobId);
        currentJobMonitorData = {
            state: "正在加载",
            collected_at: new Date().toISOString(),
            available: false,
            message: "正在读取最新资源占用…",
            allocation: {},
            summary: {},
            steps: [],
        };
        currentJobMonitorModalId = showModal(
            `作业 ${escapeHtml(jobId)} · 实时资源监控`,
            '<div id="jobMonitorContent" class="job-monitor-root"></div>',
            { maxWidth: "max-w-6xl" },
        );
        const modal = document.getElementById(currentJobMonitorModalId);
        modal.firstElementChild?.classList.add("job-monitor-modal");
        modal.querySelectorAll('button[onclick*="closeModal"]').forEach((button) => {
            button.onclick = closeJobMonitor;
        });
        modal.onclick = (event) => {
            if (event.target === modal) closeJobMonitor();
        };
        renderJobMonitor(currentJobMonitorData);
        refreshJobMonitor(jobId, true);
        jobMonitorTimer = setInterval(() => refreshJobMonitor(jobId), 5000);
    }

    /* ── 应用过滤器 ────────────────────────────────────────── */
    function applyFilters() {
        currentPartitionFilter =
            document.getElementById("partitionFilter").value;
        currentStateFilter = document.getElementById("stateFilter").value;
        currentOwnerFilter = document.getElementById("ownerFilter").value;
        loadActiveJobs();
        loadCompletedJobs();
    }

    /* ── 刷新全部数据 ──────────────────────────────────────── */
    async function refreshData(btnId) {
        const btn = document.getElementById(btnId);
        if (btn) {
            btn.disabled = true;
            btn.textContent = "刷新中…";
        }
        try {
            await Promise.all([
                loadJobStats(),
                loadActiveJobs(),
                loadCompletedJobs(),
            ]);
            showToast("刷新成功", "success");
        } catch (e) {
            showToast("刷新失败", "error");
        } finally {
            if (btn) {
                btn.disabled = false;
                btn.textContent = "刷新队列";
            }
        }
    }

    /* ══════════════════════════════════════════════════════
       作业输出文件查看器
       ══════════════════════════════════════════════════════ */
    let jobOutputRefreshTimer = null; // 自动刷新定时器句柄
    let currentRefreshJobId = null; // 当前刷新的作业ID
    let currentRefreshFileType = null; // 当前刷新的文件类型
    let currentOutputModalId = null; // 当前输出弹窗ID

    async function viewJobOutput(jobId, fileType, isRefresh = false) {
        try {
            let loadingModalId = null;
            if (!isRefresh) {
                loadingModalId = showModal(
                    `正在加载${fileType === "stdout" ? "标准输出" : "标准错误"}…`,
                    '<div style="text-align:center;padding:40px;color:#6b7280;">加载中…</div>',
                );
            }

            const res = await fetch(
                `/api/slurm/jobs/${jobId}/output?file_type=${fileType}`,
            );
            if (!res.ok) {
                const err = await res.json();
                if (loadingModalId) closeModal(loadingModalId);
                throw new Error(err.detail || "获取文件内容失败");
            }

            const data = await res.json();
            if (loadingModalId) closeModal(loadingModalId);

            const fileTypeText =
                fileType === "stdout" ? "标准输出" : "标准错误";
            const truncatedWarning = data.truncated
                ? `<div style="background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;
                               padding:8px;margin-bottom:12px;font-size:12px;color:#92400e;">
                       ⚠️ 文件较大，仅显示最后 ${data.lines_read} 行
                   </div>`
                : "";

            const currentInterval =
                document.getElementById("refreshInterval")?.value || 5;
            const isAutoRefreshActive = jobOutputRefreshTimer !== null;

            const contentHTML = `
                <div style="font-family:monospace;font-size:13px;">
                    <!-- 刷新控制栏 -->
                    <div style="background:#f3f4f6;border-radius:6px;padding:12px;margin-bottom:16px;
                                display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                        <button id="autoRefreshBtn"
                                class="btn ${isAutoRefreshActive ? "btn-primary" : "btn-secondary"}"
                                style="padding:6px 16px;font-size:13px;"
                                onclick="toggleAutoRefresh('${jobId}','${fileType}')">
                            ${isAutoRefreshActive ? "⏸️ 停止刷新" : "▶️ 自动刷新"}
                        </button>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <label for="refreshInterval" style="font-size:13px;color:#374151;">刷新间隔:</label>
                            <input type="number" id="refreshInterval"
                                   value="${currentInterval}" min="1" max="60"
                                   style="width:60px;padding:4px 8px;border:1px solid #d1d5db;
                                          border-radius:4px;font-size:13px;"
                                   onchange="updateRefreshInterval('${jobId}','${fileType}')"/>
                            <span style="font-size:13px;color:#6b7280;">秒</span>
                        </div>
                        <button class="btn btn-secondary"
                                style="padding:6px 16px;font-size:13px;"
                                onclick="manualRefresh('${jobId}','${fileType}')">
                            🔄 立即刷新
                        </button>
                        <div id="lastUpdateTime" style="margin-left:auto;font-size:12px;color:#6b7280;">
                            最后更新: ${new Date().toLocaleTimeString("zh-CN")}
                        </div>
                    </div>
                    <!-- 文件元信息 -->
                    <div style="margin-bottom:12px;font-size:12px;color:#6b7280;">
                        <div><strong>文件路径:</strong> ${data.file_path}</div>
                        <div><strong>文件大小:</strong> ${formatFileSize(data.file_size)}</div>
                        <div><strong>显示行数:</strong> ${data.lines_read} / ${data.max_lines}</div>
                    </div>
                    ${truncatedWarning}
                    <!-- 内容区域 -->
                    <div id="outputContent"
                         style="background:#1f2937;color:#f3f4f6;padding:16px;border-radius:6px;
                                overflow-x:auto;max-height:500px;overflow-y:auto;
                                white-space:pre-wrap;word-wrap:break-word;
                                font-size:12px;line-height:1.5;">${escapeHtml(data.content)}</div>
                </div>`;

            if (isRefresh) {
                const outputEl = document.getElementById("outputContent");
                const lastUpdateEl = document.getElementById("lastUpdateTime");
                if (outputEl) outputEl.textContent = data.content;
                if (lastUpdateEl)
                    lastUpdateEl.textContent =
                        "最后更新: " + new Date().toLocaleTimeString("zh-CN");
            } else {
                currentOutputModalId = showModal(
                    `${fileTypeText} — 作业 ${jobId}`,
                    contentHTML,
                );
                currentRefreshJobId = jobId;
                currentRefreshFileType = fileType;

                // 接管弹窗关闭按钮，关闭时同时停止自动刷新
                setTimeout(() => {
                    const modalEl =
                        document.getElementById(currentOutputModalId);
                    if (!modalEl) return;
                    modalEl
                        .querySelectorAll('button[onclick*="closeModal"]')
                        .forEach((btn) => {
                            btn.onclick = (e) => {
                                e.preventDefault();
                                closeOutputModal();
                            };
                        });
                    modalEl.onclick = (e) => {
                        if (e.target === modalEl) closeOutputModal();
                    };
                }, 100);
            }
        } catch (e) {
            console.error("[jobs] 查看输出文件失败:", e);
            if (!isRefresh) {
                showToast(e.message || "查看输出文件失败", "error");
            } else {
                stopAutoRefresh();
                showToast(
                    "自动刷新失败: " + (e.message || "未知错误"),
                    "error",
                );
            }
        }
    }

    /** 关闭输出弹窗（同时停止自动刷新） */
    function closeOutputModal() {
        stopAutoRefresh();
        if (currentOutputModalId) {
            closeModal(currentOutputModalId);
            currentOutputModalId = null;
        }
        currentRefreshJobId = null;
        currentRefreshFileType = null;
    }

    /** 切换自动刷新 */
    function toggleAutoRefresh(jobId, fileType) {
        jobOutputRefreshTimer
            ? stopAutoRefresh()
            : startAutoRefresh(jobId, fileType);
    }

    /** 启动自动刷新 */
    function startAutoRefresh(jobId, fileType) {
        const ms =
            parseInt(document.getElementById("refreshInterval")?.value || 5) *
            1000;
        jobOutputRefreshTimer = setInterval(
            () => viewJobOutput(jobId, fileType, true),
            ms,
        );

        const btn = document.getElementById("autoRefreshBtn");
        if (btn) {
            btn.textContent = "⏸️ 停止刷新";
            btn.classList.replace("btn-secondary", "btn-primary");
        }
        showToast("已启动自动刷新", "success");
    }

    /** 停止自动刷新 */
    function stopAutoRefresh() {
        if (jobOutputRefreshTimer) {
            clearInterval(jobOutputRefreshTimer);
            jobOutputRefreshTimer = null;
        }
        const btn = document.getElementById("autoRefreshBtn");
        if (btn) {
            btn.textContent = "▶️ 自动刷新";
            btn.classList.replace("btn-primary", "btn-secondary");
        }
    }

    /** 更新刷新间隔（如正在刷新则重启定时器） */
    function updateRefreshInterval(jobId, fileType) {
        const interval = parseInt(
            document.getElementById("refreshInterval")?.value || 5,
        );
        if (jobOutputRefreshTimer) {
            stopAutoRefresh();
            startAutoRefresh(jobId, fileType);
        }
        showToast(`刷新间隔已更新为 ${interval} 秒`, "success");
    }

    /** 立即刷新一次 */
    function manualRefresh(jobId, fileType) {
        viewJobOutput(jobId, fileType, true);
        showToast("已刷新内容", "success");
    }

    /** 格式化文件大小 */
    function formatFileSize(bytes) {
        if (!bytes) return "0 B";
        const k = 1024;
        const sizes = ["B", "KB", "MB", "GB"];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
    }

    /** HTML 转义（防止 XSS） */
    function escapeHtml(text) {
        const map = {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;",
            '"': "&quot;",
            "'": "&#039;",
        };
        return String(text).replace(/[&<>"']/g, (m) => map[m]);
    }

    function appendTextCell(row, value, strong = false) {
        const cell = document.createElement("td");
        const target = strong ? document.createElement("strong") : cell;
        target.textContent = value ?? "";
        if (strong) cell.appendChild(target);
        row.appendChild(cell);
        return cell;
    }

    function appendBadgeCell(row, value, className) {
        const cell = document.createElement("td");
        const badge = document.createElement("span");
        badge.className = `badge ${className}`;
        badge.textContent = value ?? "";
        cell.appendChild(badge);
        row.appendChild(cell);
        return cell;
    }

    function createActionButton(label, handler, mode = "secondary") {
        const button = document.createElement("button");
        button.type = "button";
        button.className = mode === "danger"
            ? "btn"
            : mode === "monitor"
                ? "btn btn-monitor"
                : "btn btn-secondary";
        button.textContent = label;
        button.style.cssText =
            "padding:4px 12px;font-size:12px;margin-right:4px;";
        if (mode === "danger") {
            button.style.backgroundColor = "#dc3023";
            button.style.color = "white";
        } else if (mode === "disabled") {
            button.disabled = true;
            button.style.opacity = "0.35";
            button.style.cursor = "not-allowed";
        } else {
            button.addEventListener("click", handler);
        }
        if (mode === "danger") button.addEventListener("click", handler);
        return button;
    }

    /* ── 页面初始化 ─────────────────────────────────────────── */
    document.addEventListener("DOMContentLoaded", () => {
        loadJobStats();
        loadActiveJobs();
        loadCompletedJobs();
        loadPartitions();
        enableTableSorting("jobsTable");
    });
</script>
{% endblock %}