pbf/tools/style-visual-object/reviewer/web/index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>CM95 → NavSea Layer 人工确认台</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header class="topbar">
    <div>
      <h1>CM95 → NavSea Layer 人工确认台</h1>
      <p>左侧显示 CM95/S-52 对象与语义；中间给出 NavSea Standard Layer 建议；右侧由人工确认最终 Layer。Standard Visual Object 只作为可选视觉参考。</p>
    </div>
    <div class="progress-wrap">
      <div id="progressText">加载中…</div>
      <div class="progress"><div id="progressBar"></div></div>
    </div>
  </header>

  <section class="toolbar">
    <div class="filter-group">
      <label>筛选</label>
      <button data-filter="UNREVIEWED" class="filter active">未确认</button>
      <button data-filter="ALL" class="filter">全部</button>
      <button data-filter="MATCH" class="filter">MATCH</button>
      <button data-filter="PARTIAL" class="filter">PARTIAL</button>
      <button data-filter="AMBIGUOUS" class="filter">AMBIGUOUS</button>
      <button data-filter="COMPONENT" class="filter">COMPONENT</button>
      <button data-filter="UNKNOWN" class="filter">UNKNOWN</button>
    </div>
    <div class="toolbar-right">
      <button id="prevBtn">← 上一个</button>
      <button id="nextBtn">下一个 →</button>
      <button id="abandonAllBtn" class="danger-ghost">全部放弃未确认项</button>
      <button id="finalizeBtn" class="primary">生成当前人工确认结果</button>
    </div>
  </section>

  <main class="layout">
    <aside class="queue-panel">
      <div class="queue-head">
        <span id="queueTitle">队列</span>
        <span id="queueCount"></span>
      </div>
      <div id="queue" class="queue"></div>
    </aside>

    <section class="review-panel">
      <div id="emptyState" class="empty">没有符合当前筛选条件的对象。</div>

      <div id="reviewContent" class="hidden">
        <div class="comparison">
          <section class="cm-card">
            <div class="card-title">
              <div>
                <div class="eyebrow">CM95 匿名 Visual Object</div>
                <h2 id="cmNameZh"></h2><div id="anonId" class="muted"></div><div id="cmOfficialDesc" class="official-desc"></div>
              </div>
              <div id="decisionBadge" class="badge neutral">未确认</div>
            </div>

            <div class="cm-main">
              <div class="image-stage large">
                <img id="cmImage" alt="CM95 Visual Object">
              </div>
              <div id="semanticBox" class="semantic-box">
                <div class="semantic-label">S-52 对象大类</div>
                <div id="semanticCategory" class="semantic-category">—</div>
                <div id="semanticReason" class="semantic-reason">—</div>
                <div id="semanticComponentHint" class="semantic-component-hint hidden"></div>
                <div id="decisionConflict" class="semantic-conflict hidden">当前人工结果与新的语义分类建议不一致，建议复核。</div>
              </div>
              <div class="meta-grid">
                <div><span>组件</span><b id="componentRoles">—</b></div>
                <div><span>几何</span><b id="geometryRoles">—</b></div>
                <div><span>出现次数</span><b id="occurrenceCount">—</b></div>
              </div>
              <div id="suggestionBox" class="suggestion hidden"></div>
            </div>
          </section>

          <section class="std-card">
            <div class="card-title">
              <div>
                <div class="eyebrow">Provider Layer Classifier</div>
                <h2>NavSea Layer 建议</h2>
              </div>
              <button id="openLibraryBtn">打开标准库</button>
            </div>
            <div id="layerSuggestionList" class="layer-suggestion-list"></div>
            <details id="visualReferenceDetails" class="visual-reference-details">
              <summary>Standard Visual Object 图标参考</summary>
              <div id="candidateGrid" class="candidate-grid"></div>
            </details>
          </section>
        </div>

        <section class="decision-panel">
          <div class="decision-head">
            <h3>人工判断</h3>
            <div class="shortcut-hint">快捷键：M / P / A / C / U，Enter 保存并下一个</div>
          </div>

          <div class="status-buttons">
            <button data-status="MATCH" class="status-btn match">MATCH</button>
            <button data-status="PARTIAL" class="status-btn partial">PARTIAL</button>
            <button data-status="AMBIGUOUS" class="status-btn ambiguous">AMBIGUOUS</button>
            <button data-status="COMPONENT" class="status-btn component">COMPONENT</button>
            <button data-status="UNKNOWN" class="status-btn unknown">UNKNOWN</button>
          </div>

          <div class="decision-form">
            <div id="componentKindField" class="field hidden">
              <label>组件类型（可选）</label>
              <div id="componentKindSelection" class="component-kind-selection"></div>
              <div class="help">COMPONENT 表示它只是完整 Visual Object 的组成部分，不单独分配 Layer。</div>
            </div>

            <div id="standardLayerField" class="field">
              <label>标准 Layer</label>
              <div id="layerSelection" class="layer-selection"></div>
              <div class="help">MATCH / PARTIAL 必须选 1 个；AMBIGUOUS 至少选 2 个；UNKNOWN 不选。</div>
            </div>

            <div id="standardObjectField" class="field">
              <label>Standard Visual Object（可选）</label>
              <div id="selectedStd" class="selected-std muted">未选择</div>
              <button id="layerOnlyBtn" class="layer-only-btn">没有对应标准图标，只确认所属 Layer</button>
              <div class="help">S-52 内容多于 NavSea 时，可以不选标准图标，直接确认所属 Layer。</div>
            </div>

            <div class="field">
              <label for="note">备注</label>
              <textarea id="note" rows="3" placeholder="可选：记录为什么确认或为什么保留 UNKNOWN"></textarea>
            </div>

            <div class="decision-actions">
              <button id="saveBtn" class="primary">保存并下一个</button>
              <button id="saveStayBtn">仅保存</button>
              <button id="clearBtn" class="danger-ghost">撤销本项人工确认</button>
            </div>
            <div id="message" class="message"></div>
          </div>
        </section>

        <details id="auditDetails" class="audit">
          <summary>审计信息（建议先完成判断，再展开）</summary>
          <button id="loadAuditBtn">读取原始 provenance</button>
          <pre id="auditText">尚未读取。</pre>
        </details>
      </div>
    </section>
  </main>

  <dialog id="libraryDialog">
    <div class="dialog-head">
      <div>
        <div class="eyebrow">NavSea Frozen Standard Catalog</div>
        <h2>标准 Visual Object 库</h2>
      </div>
      <button id="closeLibraryBtn">关闭</button>
    </div>
    <div class="library-tools">
      <select id="layerFilter"></select>
      <input id="librarySearch" type="search" placeholder="搜索标准资源名">
    </div>
    <div id="libraryGrid" class="library-grid"></div>
  </dialog>

  <script src="/app.js"></script>
</body>
</html>