iAOP/web/studio/studio.js

/* iAOP 模板配置台（issue #132 / PRD 5.7「⑤.7 模板配置台」）。
 *
 * 纯静态单页应用（无构建链），Demo 级交付：
 *   ① 导入页     —— 点位字典 CSV 上传/校验进度/错误列表（行号+原因）/下载错误模板
 *   ② 超参配置页 —— 左树 4 类模型 + 右表单（默认值/单位/范围）+ 实时 JSON 预览
 *   ③ 编排页     —— 组件库 / 12 列画布 / 数据源绑定面板，产出 iAOP-cockpit-layout-v1 JSON
 *   ④ 版本页     —— 版本列表（状态/时间/作者）/ diff 视图 / 回滚 / 导出模板资产包
 *
 * 语义对齐后端内核 core/template-console（rbac/point_importer/config_store/release）：
 * 后端是纯标准库引擎、暂无 HTTP 服务，本页面在前端镜像其校验与版本语义，
 * 配置与版本持久化在 localStorage；耦合边界 = 配置台只导出「模板资产包」JSON，
 * 不直接改内核运行时（PRD 5.7）。
 */
"use strict";

/* ================= RBAC（对齐 core/template-console/rbac.py） ================= */
// 角色：readonly=Viewer（只读）/ engineer=Editor（配置）/ admin=Publisher（发布+回滚）
var RBAC = {
  readonly: { edit: false, publish: false, label: "Viewer：只读预览" },
  engineer: { edit: true,  publish: false, label: "Editor：可配置，不可发布" },
  admin:    { edit: true,  publish: true,  label: "Publisher：可配置/发布/回滚" }
};
var currentRole = "engineer";

function applyRbac() {
  var perm = RBAC[currentRole];
  document.getElementById("role-hint").textContent = perm.label;
  document.querySelectorAll(".need-edit").forEach(function (b) { b.disabled = !perm.edit; });
  document.querySelectorAll(".need-publish").forEach(function (b) { b.disabled = !perm.publish; });
}

/* ================= 工具 ================= */
function el(tag, cls, text) {
  var n = document.createElement(tag);
  if (cls) n.className = cls;
  if (text !== undefined) n.textContent = text;
  return n;
}
function download(filename, text, mime) {
  var a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([text], { type: mime || "application/octet-stream" }));
  a.download = filename;
  a.click();
  URL.revokeObjectURL(a.href);
}
function store(key, obj) { localStorage.setItem(key, JSON.stringify(obj)); }
function load(key, fallback) {
  try { var v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; }
  catch (e) { return fallback; }
}

/* ================= ① 导入页（对齐 point_importer.py 校验维度） ================= */
// 表头列序对齐 core/edge-gateway/point_dict/schema.py 的 CSV_HEADERS
var CSV_HEADERS = ["device_id", "point_id", "name", "unit", "dataType",
                   "sampleRate", "qualityCode", "opcNode", "protocol"];
var VALID_DATA_TYPES = ["float", "int", "bool", "string"];
var OPC_NODE_RE = /^ns=\d+;s=\S+$/; // OPC 节点格式（point_importer._validate_opc_node）
// 模板级量纲收窄（point_importer._unit_set，演示版内置常用子集）
var TEMPLATE_UNITS = {
  ti:    ["℃", "kPa", "Pa", "Nm³/h", "kg/h", "t/h", "%", "kWh", "mV", "ppm", "-"],
  resin: ["℃", "kPa", "r/min", "mmol/g", "%", "kWh/t", "m³/h", "t", "-"]
};

function validateCsv(text, template) {
  var issues = [];
  var lines = text.replace(/\r\n?/g, "\n").split("\n")
    .filter(function (l) { return l.trim() !== ""; });
  if (!lines.length) {
    issues.push({ line: 0, severity: "error", field: "-", reason: "CSV 内容为空" });
    return { issues: issues, total: 0 };
  }
  // 1) 表头列序校验（point_importer._validate_header_order）
  var headers = lines[0].split(",").map(function (h) { return h.trim(); });
  if (headers.join(",") !== CSV_HEADERS.join(",")) {
    issues.push({ line: 1, severity: "error", field: "header",
      reason: "表头列序不符，期望: " + CSV_HEADERS.join(",") });
  }
  // 2) 行级校验
  var seen = {};
  var units = TEMPLATE_UNITS[template] || TEMPLATE_UNITS.ti;
  for (var i = 1; i < lines.length; i++) {
    var ln = i + 1;
    var cols = lines[i].split(",").map(function (c) { return c.trim(); });
    if (cols.length !== CSV_HEADERS.length) {
      issues.push({ line: ln, severity: "error", field: "-",
        reason: "列数 " + cols.length + " ≠ " + CSV_HEADERS.length });
      continue;
    }
    var row = {};
    CSV_HEADERS.forEach(function (h, k) { row[h] = cols[k]; });
    ["device_id", "point_id", "name"].forEach(function (f) {
      if (!row[f]) issues.push({ line: ln, severity: "error", field: f, reason: f + " 不能为空" });
    });
    if (row.point_id) {
      if (seen[row.point_id]) {
        issues.push({ line: ln, severity: "error", field: "point_id",
          reason: "点号重复（首次出现于第 " + seen[row.point_id] + " 行）" });
      } else seen[row.point_id] = ln;
    }
    if (VALID_DATA_TYPES.indexOf(row.dataType) < 0) {
      issues.push({ line: ln, severity: "error", field: "dataType",
        reason: "数据类型非法: " + row.dataType + "（允许 " + VALID_DATA_TYPES.join("/") + "）" });
    }
    if (!/^\d+$/.test(row.sampleRate) || parseInt(row.sampleRate, 10) <= 0) {
      issues.push({ line: ln, severity: "error", field: "sampleRate",
        reason: "采样率必须为正整数毫秒: " + row.sampleRate });
    }
    if (row.qualityCode !== "true" && row.qualityCode !== "false") {
      issues.push({ line: ln, severity: "warning", field: "qualityCode",
        reason: "qualityCode 建议 true/false: " + row.qualityCode });
    }
    if (row.opcNode && !OPC_NODE_RE.test(row.opcNode)) {
      issues.push({ line: ln, severity: "error", field: "opcNode",
        reason: "OPC 节点格式非法（期望 ns=<n>;s=<id>）: " + row.opcNode });
    }
    if (row.unit && units.indexOf(row.unit) < 0) {
      issues.push({ line: ln, severity: "warning", field: "unit",
        reason: "量纲超出 " + template + " 模板收窄范围: " + row.unit });
    }
  }
  return { issues: issues, total: lines.length - 1 };
}

function runImportValidation() {
  var text = document.getElementById("csv-text").value;
  var template = document.getElementById("import-template").value;
  var wrap = document.getElementById("import-progress-wrap");
  var bar = document.getElementById("import-progress-bar");
  var ptext = document.getElementById("import-progress-text");
  var summary = document.getElementById("import-summary");
  var table = document.getElementById("issue-table");
  wrap.hidden = false;
  summary.textContent = "";
  table.hidden = true;

  // 校验进度条（按行推进，演示校验过程；行数小时立即完成）
  var totalLines = Math.max(text.split("\n").length, 1);
  var done = 0;
  var timer = setInterval(function () {
    done += Math.ceil(totalLines / 20);
    if (done >= totalLines) {
      done = totalLines;
      clearInterval(timer);
      var report = validateCsv(text, template);
      var errors = report.issues.filter(function (x) { return x.severity === "error"; });
      summary.textContent = "校验完成：共 " + report.total + " 行，" +
        errors.length + " 个错误 / " + (report.issues.length - errors.length) + " 个警告" +
        (errors.length ? "，请修正后重新导入" : "，可进入下一步配置");
      summary.className = errors.length ? "sev-error" : "";
      if (report.issues.length) {
        var tbody = table.querySelector("tbody");
        tbody.innerHTML = "";
        report.issues.forEach(function (x) {
          var tr = el("tr");
          tr.appendChild(el("td", null, String(x.line)));
          tr.appendChild(el("td", x.severity === "error" ? "sev-error" : "sev-warning",
            x.severity === "error" ? "错误" : "警告"));
          tr.appendChild(el("td", null, x.field));
          tr.appendChild(el("td", null, x.reason));
          tbody.appendChild(tr);
        });
        table.hidden = false;
      }
      // 最近一次校验报告纳入资产包（版本页发布时随快照固化）
      studioState.importReport = {
        template: template, total: report.total,
        errors: errors.length, warnings: report.issues.length - errors.length,
        issues: report.issues.slice(0, 200)
      };
    }
    bar.style.width = Math.round(done / totalLines * 100) + "%";
    ptext.textContent = "校验中… " + done + "/" + totalLines + " 行";
  }, 60);
}

/* ================= ② 超参配置页（4 类模型，对齐 core/model-framework） ================= */
// 字段：key / 标签 / 默认值 / 单位 / 范围（对齐 quality_predict_ti.example.json 等内核示例）
var MODEL_SPECS = {
  quality_forecast: {
    name: "① 质量预测（quality_forecast）",
    fields: [
      { key: "max_depth", label: "树最大深度", def: 6, unit: "层", min: 1, max: 16, type: "int" },
      { key: "eta", label: "学习率", def: 0.1, unit: "-", min: 0.001, max: 1, type: "float" },
      { key: "n_estimators", label: "迭代树数", def: 300, unit: "棵", min: 10, max: 2000, type: "int" },
      { key: "train_window", label: "训练窗口", def: "180d", unit: "天/班次", type: "str" },
      { key: "alarm_zscore_k", label: "告警 zscore k", def: 3.0, unit: "σ", min: 1, max: 6, type: "float" },
      { key: "drift_psi_limit", label: "漂移 PSI 上限", def: 0.2, unit: "-", min: 0.05, max: 1, type: "float" }
    ]
  },
  anomaly_detection: {
    name: "② 异常检测（anomaly_detection）",
    fields: [
      { key: "contamination", label: "异常比例先验", def: 0.05, unit: "比例", min: 0.001, max: 0.3, type: "float" },
      { key: "window", label: "检测窗口", def: "10m", unit: "分钟", type: "str" },
      { key: "zscore_k", label: "zscore 阈值 k", def: 3.0, unit: "σ", min: 1, max: 6, type: "float" },
      { key: "min_train_samples", label: "最小训练样本数", def: 1000, unit: "条", min: 100, max: 100000, type: "int" }
    ]
  },
  process_optimizer: {
    name: "③ 工艺优化（process_optimizer）",
    fields: [
      { key: "learning_rate", label: "优化学习率", def: 0.05, unit: "-", min: 0.001, max: 1, type: "float" },
      { key: "horizon", label: "优化时域", def: "1shift", unit: "班/小时", type: "str" },
      { key: "explore_ratio", label: "探索比例", def: 0.1, unit: "比例", min: 0, max: 0.5, type: "float" },
      { key: "constraint_penalty", label: "约束惩罚系数", def: 100, unit: "-", min: 1, max: 10000, type: "float" }
    ]
  },
  cross_process_optimizer: {
    name: "④ 跨工序关联（cross_process_optimizer）",
    fields: [
      { key: "coupling_strength", label: "工序耦合强度", def: 0.5, unit: "-", min: 0, max: 1, type: "float" },
      { key: "sync_window", label: "同步窗口", def: "1h", unit: "小时", type: "str" },
      { key: "max_iter", label: "最大迭代数", def: 500, unit: "次", min: 10, max: 5000, type: "int" },
      { key: "tolerance", label: "收敛容差", def: 0.0001, unit: "-", min: 0.000001, max: 0.1, type: "float" }
    ]
  }
};
var currentModel = "quality_forecast";

function renderModelTree() {
  var ul = document.getElementById("model-tree");
  ul.innerHTML = "";
  Object.keys(MODEL_SPECS).forEach(function (k) {
    var li = el("li", k === currentModel ? "active" : null, MODEL_SPECS[k].name);
    li.onclick = function () { currentModel = k; renderModelTree(); renderHyperForm(); };
    ul.appendChild(li);
  });
}

function hyperValues(model) {
  // 已保存值优先，否则用默认值
  var saved = (studioState.config.model_param || {})[model] || {};
  var values = {};
  MODEL_SPECS[model].fields.forEach(function (f) {
    values[f.key] = saved[f.key] !== undefined ? saved[f.key] : f.def;
  });
  return values;
}

function renderHyperForm() {
  var spec = MODEL_SPECS[currentModel];
  document.getElementById("hyper-title").textContent = spec.name;
  var form = document.getElementById("hyper-form");
  form.innerHTML = "";
  var values = hyperValues(currentModel);
  spec.fields.forEach(function (f) {
    var item = el("div", "form-item");
    item.appendChild(el("label", null, f.label + "（" + f.key + "）"));
    var input = document.createElement("input");
    input.value = values[f.key];
    input.dataset.key = f.key;
    input.dataset.type = f.type;
    input.disabled = !RBAC[currentRole].edit;
    input.oninput = renderHyperJson;
    item.appendChild(input);
    var meta = "默认 " + f.def + " · 单位 " + (f.unit || "-");
    if (f.min !== undefined) meta += " · 范围 [" + f.min + ", " + f.max + "]";
    item.appendChild(el("div", "meta", meta));
    form.appendChild(item);
  });
  renderHyperJson();
}

function readHyperForm() {
  var out = {};
  document.querySelectorAll("#hyper-form input").forEach(function (input) {
    var v = input.value;
    if (input.dataset.type === "int") v = parseInt(v, 10);
    else if (input.dataset.type === "float") v = parseFloat(v);
    out[input.dataset.key] = v;
  });
  return out;
}

function renderHyperJson() {
  var json = { model_id: currentModel, hyperparams: readHyperForm() };
  document.getElementById("hyper-json").textContent = JSON.stringify(json, null, 2);
}

function saveHyper() {
  studioState.config.model_param = studioState.config.model_param || {};
  studioState.config.model_param[currentModel] = readHyperForm();
  persistConfig();
  document.getElementById("hyper-save-hint").textContent = "已保存（待发布固化）";
}

/* ================= ③ 驾驶舱编排页（iAOP-cockpit-layout-v1） ================= */
var WIDGET_TYPES = [
  { type: "process_view", name: "工艺流程视图", w: 12, h: 4 },
  { type: "trend", name: "实时趋势", w: 6, h: 2 },
  { type: "kpi_card", name: "KPI 卡片", w: 3, h: 2 },
  { type: "alarm_panel", name: "告警面板", w: 9, h: 3 },
  { type: "nl_query", name: "NL 查询入口", w: 3, h: 3 }
];
// ti-cl4 基线（对齐 templates/ti-cl4/dashboard/cockpit.ti.yaml）
var TI_BASELINE = [
  { type: "process_view", src: "ti_four_state.svg", x: 0, y: 0, w: 12, h: 4,
    description: "四状态工艺流程（氯化 → 精制 → 还原 → 蒸馏）" },
  { type: "trend", bind: "CLF-01.TEMP", x: 0, y: 4, w: 6, h: 2, description: "氯化炉温度实时趋势" },
  { type: "trend", bind: "CLF-01.CL2", x: 6, y: 4, w: 6, h: 2, description: "氯气流量实时趋势" },
  { type: "kpi_card", metric: "ticl4_purity", bind: "RF-01.PURITY", label: "TiCl₄纯度",
    x: 0, y: 6, w: 3, h: 2, description: "还原 TiCl₄ 纯度（%）" },
  { type: "kpi_card", metric: "ticl4_impurity", bind: "RF-01.IMP", label: "杂质含量",
    x: 3, y: 6, w: 3, h: 2, description: "还原杂质含量（%）" },
  { type: "kpi_card", metric: "energy_per_ton", bind: "E-01.KWH", label: "累计电耗",
    x: 6, y: 6, w: 3, h: 2, description: "车间累计电耗（kWh）" },
  { type: "kpi_card", metric: "steam_flow", bind: "ST-01.STEAM", label: "蒸汽流量",
    x: 9, y: 6, w: 3, h: 2, description: "蒸汽流量（t/h）" },
  { type: "alarm_panel", x: 0, y: 8, w: 9, h: 3, description: "告警面板" },
  { type: "nl_query", x: 9, y: 8, w: 3, h: 3, description: "自然语言查询入口" }
];
var selectedWidget = -1;

function nextFreeY(widgets, h) {
  // 简单自动落位：追加到当前最大行底（编排页 Demo 级，手动微调由 bind 面板改 x/y/w/h）
  var maxY = 0;
  widgets.forEach(function (w) { maxY = Math.max(maxY, w.y + w.h); });
  return maxY;
}

function renderWidgetLib() {
  var ul = document.getElementById("widget-lib-list");
  ul.innerHTML = "";
  WIDGET_TYPES.forEach(function (t) {
    var li = el("li", null, t.name + "（" + t.type + "）");
    li.onclick = function () {
      if (!RBAC[currentRole].edit) return;
      studioState.config.layout.widgets.push({
        type: t.type, x: 0, y: nextFreeY(studioState.config.layout.widgets, t.h),
        w: t.w, h: t.h, description: t.name
      });
      persistConfig(); renderCanvas();
    };
    ul.appendChild(li);
  });
}

function renderCanvas() {
  var canvas = document.getElementById("canvas");
  canvas.innerHTML = "";
  studioState.config.layout.widgets.forEach(function (w, i) {
    var card = el("div", "canvas-widget" + (i === selectedWidget ? " selected" : ""));
    card.style.gridColumn = (w.x + 1) + " / span " + w.w;
    card.style.gridRow = (w.y + 1) + " / span " + w.h;
    card.textContent = w.type + (w.label ? " · " + w.label : w.bind ? " · " + w.bind : "");
    var ops = el("span", "ops");
    var del = el("button", null, "✕");
    del.title = "删除";
    del.onclick = function (e) {
      e.stopPropagation();
      if (!RBAC[currentRole].edit) return;
      studioState.config.layout.widgets.splice(i, 1);
      selectedWidget = -1;
      persistConfig(); renderCanvas();
    };
    ops.appendChild(del);
    card.appendChild(ops);
    card.onclick = function () { selectedWidget = i; renderCanvas(); renderBindPanel(); };
    canvas.appendChild(card);
  });
  renderLayoutJson();
}

function renderBindPanel() {
  var wrap = document.getElementById("bind-form-wrap");
  wrap.innerHTML = "";
  var w = studioState.config.layout.widgets[selectedWidget];
  if (!w) { wrap.appendChild(el("p", "hint", "选中画布中的组件后进行绑定")); return; }
  // 按组件类型给出绑定字段（对齐 #50 schema 条件必填）
  var fields = ["x", "y", "w", "h", "description"];
  if (w.type === "process_view") fields.push("src");
  if (w.type === "trend") fields.push("bind");
  if (w.type === "kpi_card") fields.push("metric", "bind", "label");
  fields.forEach(function (f) {
    var item = el("div", "form-item");
    item.appendChild(el("label", null, f));
    var input = document.createElement("input");
    input.value = w[f] !== undefined ? w[f] : "";
    input.disabled = !RBAC[currentRole].edit;
    input.oninput = function () {
      var v = input.value;
      if (["x", "y", "w", "h"].indexOf(f) >= 0) v = Math.max(f === "w" || f === "h" ? 1 : 0, parseInt(v, 10) || 0);
      if (v === "") delete w[f]; else w[f] = v;
      persistConfig(); renderCanvas();
    };
    item.appendChild(input);
    wrap.appendChild(item);
  });
}

function renderLayoutJson() {
  var layout = {
    "$schema": "iAOP-cockpit-layout-v1",
    title: studioState.config.layout.title,
    theme: "dark",
    widgets: studioState.config.layout.widgets
  };
  document.getElementById("layout-json").textContent = JSON.stringify(layout, null, 2);
}

/* ================= ④ 版本页（对齐 release.py：快照固化/semver 递增/回滚可追溯） ================= */
var SEMVER_RE = /^\d+\.\d+\.\d+$/;

function semverKey(v) { return v.split(".").map(function (n) { return parseInt(n, 10) * 1e6; })
  .reduce(function (a, b) { return a + b; }, 0); }

function currentSnapshot() {
  return {
    model_param: studioState.config.model_param || {},
    layout: studioState.config.layout,
    import_report: studioState.importReport || null
  };
}

function renderVersions() {
  var tbody = document.getElementById("version-table").querySelector("tbody");
  tbody.innerHTML = "";
  var selL = document.getElementById("diff-left");
  var selR = document.getElementById("diff-right");
  selL.innerHTML = ""; selR.innerHTML = "";
  studioState.releases.forEach(function (r, i) {
    var tr = el("tr");
    tr.appendChild(el("td", null, r.version));
    tr.appendChild(el("td", r.status === "published" ? "status-published" : "status-rolledback",
      r.status === "published" ? "已发布" : "回滚事件"));
    tr.appendChild(el("td", null, r.time));
    tr.appendChild(el("td", null, r.author));
    var ops = el("td");
    var rb = el("button", "danger", "回滚到此版本");
    rb.disabled = !RBAC[currentRole].publish;
    rb.onclick = function () { rollbackTo(i); };
    ops.appendChild(rb);
    tr.appendChild(ops);
    tbody.appendChild(tr);
    [selL, selR].forEach(function (sel) {
      var opt = document.createElement("option");
      opt.value = i; opt.textContent = r.version;
      sel.appendChild(opt);
    });
  });
  if (studioState.releases.length >= 2) {
    selL.value = String(studioState.releases.length - 2);
    selR.value = String(studioState.releases.length - 1);
  }
}

function publish() {
  var version = document.getElementById("release-version").value.trim();
  var author = document.getElementById("release-author").value.trim() || "unknown";
  if (!SEMVER_RE.test(version)) { alert("版本号必须是 semver（如 1.0.0）"); return; }
  var last = studioState.releases[studioState.releases.length - 1];
  if (last && semverKey(version) <= semverKey(last.version)) {
    alert("版本号必须单调递增（当前最新 " + last.version + "）"); return;
  }
  studioState.releases.push({
    version: version, status: "published",
    time: new Date().toLocaleString("zh-CN"), author: author,
    changelog: "发布模板资产包", snapshot: currentSnapshot()
  });
  store("studio.releases.v1", studioState.releases);
  if (typeof UserStore !== "undefined") UserStore.audit("publish", "release", version); // #134 写操作审计
  renderVersions();
}

function rollbackTo(index) {
  var target = studioState.releases[index];
  if (!target) return;
  if (!confirm("回滚到 " + target.version + "？历史版本不删除，回滚事件将记录为新条目。")) return;
  // 恢复快照到当前配置（不删历史，回滚事件可追溯——对齐 release.py）
  studioState.config.model_param = JSON.parse(JSON.stringify(target.snapshot.model_param || {}));
  studioState.config.layout = JSON.parse(JSON.stringify(target.snapshot.layout));
  studioState.importReport = target.snapshot.import_report || null;
  persistConfig();
  var last = studioState.releases[studioState.releases.length - 1];
  var parts = last.version.split(".").map(Number);
  parts[2] += 1;
  studioState.releases.push({
    version: parts.join("."), status: "rolledback",
    time: new Date().toLocaleString("zh-CN"),
    author: document.getElementById("release-author").value.trim() || "unknown",
    changelog: "回滚自 " + target.version, snapshot: currentSnapshot()
  });
  store("studio.releases.v1", studioState.releases);
  if (typeof UserStore !== "undefined") UserStore.audit("rollback", "release", "回滚自 " + target.version);
  renderVersions(); renderCanvas(); renderHyperForm();
}

/* 行级 diff（LCS，行数受控，版本页演示足够） */
function diffLines(aText, bText) {
  var a = aText.split("\n"), b = bText.split("\n");
  var n = a.length, m = b.length;
  var dp = [];
  var i, j;
  for (i = 0; i <= n; i++) { dp.push(new Array(m + 1).fill(0)); }
  for (i = n - 1; i >= 0; i--) {
    for (j = m - 1; j >= 0; j--) {
      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
    }
  }
  var out = [];
  i = 0; j = 0;
  while (i < n && j < m) {
    if (a[i] === b[j]) { out.push({ cls: "diff-ctx", text: "  " + a[i] }); i++; j++; }
    else if (dp[i + 1][j] >= dp[i][j + 1]) { out.push({ cls: "diff-del", text: "- " + a[i] }); i++; }
    else { out.push({ cls: "diff-add", text: "+ " + b[j] }); j++; }
  }
  while (i < n) { out.push({ cls: "diff-del", text: "- " + a[i++] }); }
  while (j < m) { out.push({ cls: "diff-add", text: "+ " + b[j++] }); }
  return out;
}

function renderDiff() {
  var view = document.getElementById("diff-view");
  view.innerHTML = "";
  var l = studioState.releases[parseInt(document.getElementById("diff-left").value, 10)];
  var r = studioState.releases[parseInt(document.getElementById("diff-right").value, 10)];
  if (!l || !r) { view.textContent = "（需要至少 2 个版本）"; return; }
  diffLines(JSON.stringify(l.snapshot, null, 2), JSON.stringify(r.snapshot, null, 2))
    .forEach(function (d) { view.appendChild(el("div", d.cls, d.text)); });
}

function exportPack() {
  var idx = parseInt(document.getElementById("diff-right").value, 10);
  var r = studioState.releases[idx] || studioState.releases[studioState.releases.length - 1];
  if (!r) { alert("请先发布一个版本"); return; }
  // 模板资产包：配置台唯一产出物，供内核灰度推送（耦合边界）
  var pack = {
    pack_schema: "iAOP-template-pack-v1",
    version: r.version, author: r.author, time: r.time,
    snapshot: r.snapshot
  };
  download("template-pack-" + r.version + ".json", JSON.stringify(pack, null, 2),
    "application/json");
}

/* ================= 状态与启动 ================= */
var studioState = {
  config: load("studio.config.v1", {
    model_param: {},
    layout: { title: "新建行业驾驶舱", widgets: [] }
  }),
  releases: load("studio.releases.v1", []),
  importReport: null
};
function persistConfig() { store("studio.config.v1", studioState.config); }

(function init() {
  // 认证门控（issue #134，会话 API 来自 #150 的 IAOP_AUTH）：未登录跳登录页
  // （后端 core/auth /auth/me 校验）；登录后角色以会话为准（角色下拉锁定）。
  // auth.js 缺失（独立起服务于 web/studio 的纯静态演示）时降级为手动角色切换。
  if (typeof IAOP_AUTH !== "undefined") {
    IAOP_AUTH.requireLoginElseRedirect("../auth/login.html").then(function (user) {
      if (!user) return; // 正在跳转登录页
      currentRole = user.role;
      var roleSelect = document.getElementById("role-select");
      roleSelect.value = user.role;
      roleSelect.disabled = true;
      document.getElementById("role-hint").textContent =
        user.username + " · " + RBAC[currentRole].label +
        (user.role === "admin" ? " · 用户管理 →" : "");
      applyRbac(); renderHyperForm(); renderCanvas(); renderBindPanel(); renderVersions();
      if (user.role === "admin") {
        document.getElementById("role-hint").style.cursor = "pointer";
        document.getElementById("role-hint").onclick = function () {
          location.href = "../auth/users.html";
        };
      }
    });
  }
  // 页签切换
  document.querySelectorAll(".tab").forEach(function (tab) {
    tab.onclick = function () {
      document.querySelectorAll(".tab").forEach(function (t) { t.classList.remove("active"); });
      document.querySelectorAll(".page").forEach(function (p) { p.classList.remove("active"); });
      tab.classList.add("active");
      document.getElementById("page-" + tab.dataset.page).classList.add("active");
    };
  });
  // RBAC
  document.getElementById("role-select").onchange = function (e) {
    currentRole = e.target.value;
    applyRbac(); renderHyperForm(); renderCanvas(); renderBindPanel(); renderVersions();
  };
  // ① 导入页
  var drop = document.getElementById("drop-zone");
  var fileInput = document.getElementById("csv-file");
  function readFile(file) {
    var reader = new FileReader();
    reader.onload = function () { document.getElementById("csv-text").value = reader.result; };
    reader.readAsText(file, "utf-8");
  }
  fileInput.onchange = function () { if (fileInput.files[0]) readFile(fileInput.files[0]); };
  drop.ondragover = function (e) { e.preventDefault(); drop.classList.add("dragover"); };
  drop.ondragleave = function () { drop.classList.remove("dragover"); };
  drop.ondrop = function (e) {
    e.preventDefault(); drop.classList.remove("dragover");
    if (e.dataTransfer.files[0]) readFile(e.dataTransfer.files[0]);
  };
  document.getElementById("btn-download-template").onclick = function () {
    download("point_dict.template.csv",
      CSV_HEADERS.join(",") + "\n" +
      "CLF-01,CLF-01.TEMP,炉温,℃,float,1000,true,ns=2;s=CLF.Temp,simulator\n" +
      "CLF-01,CLF-01.CL2,氯气流量,Nm³/h,float,1000,true,ns=2;s=CLF.Cl2,simulator\n",
      "text/csv");
  };
  document.getElementById("btn-validate").onclick = runImportValidation;
  // ② 超参页
  document.getElementById("btn-hyper-save").onclick = saveHyper;
  // ③ 编排页
  document.getElementById("btn-layout-clear").onclick = function () {
    studioState.config.layout.widgets = []; selectedWidget = -1;
    persistConfig(); renderCanvas(); renderBindPanel();
  };
  document.getElementById("btn-layout-load-ti").onclick = function () {
    studioState.config.layout = { title: "海绵钛车间驾驶舱", widgets: JSON.parse(JSON.stringify(TI_BASELINE)) };
    selectedWidget = -1;
    persistConfig(); renderCanvas(); renderBindPanel();
  };
  // ④ 版本页
  document.getElementById("btn-publish").onclick = publish;
  document.getElementById("btn-diff").onclick = renderDiff;
  document.getElementById("btn-export-pack").onclick = exportPack;

  applyRbac();
  renderModelTree(); renderHyperForm();
  renderWidgetLib(); renderCanvas(); renderBindPanel();
  renderVersions();
})();