web/studio/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iAOP 模板配置台</title>
<link rel="stylesheet" href="studio.css">
</head>
<body>
<!-- iAOP 模板配置台（issue #132 / PRD 5.7「⑤.7 模板配置台」）
     纯静态单页应用（无构建链）：导入页 / 超参配置页 / 驾驶舱编排页 / 版本页。
     三级 RBAC 对齐 core/template-console/rbac.py 的 readonly/engineer/admin；
     配置台只产出「模板资产包」（导出 JSON），不直接改内核运行时（耦合边界）。 -->
<header id="topbar">
  <h1>iAOP 模板配置台 <span class="sub">Template Console · PRD 5.7</span></h1>
  <div id="topbar-right">
    <label for="role-select">当前角色</label>
    <select id="role-select">
      <option value="readonly">Viewer（只读）</option>
      <option value="engineer" selected>Editor（配置）</option>
      <option value="admin">Publisher（发布+回滚）</option>
    </select>
    <span id="role-hint" class="hint"></span>
  </div>
</header>

<nav id="tabs">
  <button class="tab active" data-page="import">① 点位导入</button>
  <button class="tab" data-page="hyper">② 模型超参</button>
  <button class="tab" data-page="layout">③ 驾驶舱编排</button>
  <button class="tab" data-page="version">④ 版本发布</button>
</nav>

<!-- ======================= ① 导入页 ======================= -->
<section class="page active" id="page-import">
  <div class="panel">
    <h2>点位字典 CSV 导入</h2>
    <p class="hint">字段规范对齐 PRD 5.1 / core/edge-gateway/point_dict：
      device_id, point_id, name, unit, dataType, sampleRate, qualityCode, opcNode, protocol</p>
    <div id="drop-zone" class="drop-zone">
      拖拽 CSV 文件到这里，或
      <input type="file" id="csv-file" accept=".csv,text/csv">
      <button id="btn-download-template">下载错误模板（示例 CSV）</button>
    </div>
    <textarea id="csv-text" rows="6" placeholder="或直接粘贴 CSV 内容…"></textarea>
    <div class="row">
      <label>行业模板
        <select id="import-template">
          <option value="ti">氯化（ti-cl4）</option>
          <option value="resin">树脂（resin）</option>
        </select>
      </label>
      <button id="btn-validate" class="primary need-edit">开始校验</button>
    </div>
    <div id="import-progress-wrap" hidden>
      <div id="import-progress"><div id="import-progress-bar"></div></div>
      <div id="import-progress-text" class="hint"></div>
    </div>
    <div id="import-summary"></div>
    <table id="issue-table" hidden>
      <thead><tr><th>行号</th><th>级别</th><th>字段</th><th>原因</th></tr></thead>
      <tbody></tbody>
    </table>
  </div>
</section>

<!-- ======================= ② 超参配置页 ======================= -->
<section class="page" id="page-hyper">
  <div class="split">
    <aside class="tree panel">
      <h2>模型类型（4 类）</h2>
      <ul id="model-tree"></ul>
    </aside>
    <div class="panel" id="hyper-form-panel">
      <h2 id="hyper-title">超参配置</h2>
      <form id="hyper-form"></form>
    </div>
    <div class="panel">
      <h2>实时 JSON 预览</h2>
      <pre id="hyper-json" class="json-view"></pre>
      <div class="row">
        <button id="btn-hyper-save" class="primary need-edit">保存到配置项</button>
        <span id="hyper-save-hint" class="hint"></span>
      </div>
    </div>
  </div>
</section>

<!-- ======================= ③ 驾驶舱编排页 ======================= -->
<section class="page" id="page-layout">
  <div class="split">
    <aside class="panel" id="widget-lib">
      <h2>组件库</h2>
      <p class="hint">点击添加到画布（组件类型对齐 iAOP-cockpit-layout-v1）</p>
      <ul id="widget-lib-list"></ul>
    </aside>
    <div class="panel">
      <h2>画布（12 列栅格）</h2>
      <div id="canvas"></div>
      <div class="row">
        <button id="btn-layout-clear" class="need-edit">清空画布</button>
        <button id="btn-layout-load-ti" class="need-edit">载入 ti-cl4 基线</button>
      </div>
    </div>
    <aside class="panel" id="bind-panel">
      <h2>数据源绑定</h2>
      <div id="bind-form-wrap"><p class="hint">选中画布中的组件后进行绑定</p></div>
      <h2>布局 JSON</h2>
      <pre id="layout-json" class="json-view"></pre>
    </aside>
  </div>
</section>

<!-- ======================= ④ 版本页 ======================= -->
<section class="page" id="page-version">
  <div class="split-2">
    <div class="panel">
      <h2>版本列表</h2>
      <div class="row">
        <input id="release-version" placeholder="版本号（semver，如 1.0.0）" value="1.0.0">
        <input id="release-author" placeholder="作者" value="engineer">
        <button id="btn-publish" class="primary need-publish">发布当前配置</button>
      </div>
      <p class="hint">发布 = 固化当前超参 + 布局 + 校验结果为快照（对齐 core/template-console/release.py）；
        配置台只产出模板资产包，不直接改内核运行时。</p>
      <table id="version-table">
        <thead><tr><th>版本</th><th>状态</th><th>时间</th><th>作者</th><th>操作</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="panel">
      <h2>diff 视图</h2>
      <div class="row">
        <select id="diff-left"></select>
        <span class="hint">vs</span>
        <select id="diff-right"></select>
        <button id="btn-diff">对比</button>
      </div>
      <pre id="diff-view" class="json-view"></pre>
      <div class="row">
        <button id="btn-export-pack" class="primary">导出模板资产包</button>
        <span class="hint">资产包 = 选中版本快照（超参/布局/点位校验报告），供内核灰度推送</span>
      </div>
    </div>
  </div>
</section>

<script src="../auth/auth.js"></script>
<script src="studio.js"></script>
</body>
</html>