AiDOPWarehouse/tools/integration-simulator/static/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ai-DOP 第三方对接模拟器</title>
  <link rel="stylesheet" href="/static/app.css" />
</head>
<body>
  <header>
    <h1>Ai-DOP 第三方对接模拟器 <span class="tag">第一阶段 · 本地控制台</span></h1>
    <div id="env-banner" class="banner">环境状态加载中…</div>
  </header>

  <nav>
    <button data-tab="tab-run" class="active">对象测试</button>
    <button data-tab="tab-scenario">业务场景</button>
    <button data-tab="tab-mockapi">Mock API（API_PULL）</button>
    <button data-tab="tab-db">模拟 MySQL（DB_SYNC）</button>
    <button data-tab="tab-inbound">API_INBOUND</button>
    <button data-tab="tab-fault">异常测试</button>
    <button data-tab="tab-report">全链路报告</button>
    <button data-tab="tab-runs">运行记录</button>
    <button data-tab="tab-security">环境安全</button>
  </nav>

  <!-- 对象测试 -->
  <section id="tab-run" class="tab active">
    <div class="grid2">
      <div class="card">
        <h2>1. 选择对象与通道</h2>
        <label>业务对象
          <select id="run-object"></select>
        </label>
        <div id="run-object-info" class="muted"></div>
        <label>对接方式
          <select id="run-channel">
            <option value="DB_SYNC">DB_SYNC（数据库同步）</option>
            <option value="API_PULL">API_PULL（接口拉取）</option>
            <option value="API_INBOUND">API_INBOUND（接口推送）</option>
          </select>
        </label>
        <div id="run-channel-state" class="state"></div>
        <label>运行编号
          <input id="run-id" type="text" placeholder="留空自动生成 SIM-yyyyMMddHHmmss-xxxxxx" />
        </label>
        <h2>2. 样例编辑（canonical → 通道适配）</h2>
        <textarea id="run-rows" rows="12" spellcheck="false" placeholder="点击「加载适配样例」后可编辑 JSON 数组"></textarea>
        <div class="row">
          <button id="btn-load-sample">加载适配样例</button>
          <span id="run-missing" class="warn"></span>
        </div>
      </div>
      <div class="card">
        <h2>3. 执行与结果</h2>
        <div class="row" id="run-actions">
          <button id="btn-precheck">预检</button>
          <button id="btn-exec" class="primary">执行</button>
        </div>
        <div id="run-layers" class="layers"></div>
        <h3>请求 / 响应预览（已脱敏）</h3>
        <pre id="run-output" class="output">尚未执行</pre>
        <h3>后续人工核验 SQL</h3>
        <pre id="run-sql" class="output small">—</pre>
      </div>
    </div>
  </section>

  <!-- 业务场景 -->
  <section id="tab-scenario" class="tab">
    <div class="card">
      <h2>跨对象基础场景（三通道同业务语义）</h2>
      <label>场景
        <select id="scenario-select"></select>
      </label>
      <div id="scenario-desc" class="muted"></div>
      <div id="scenario-graph" class="graph"></div>
      <div class="row">
        <button id="btn-scenario-run" class="primary">执行场景</button>
        <span class="muted">不支持的节点会明确标记「该通道不支持」，不跳过后宣称链路完整</span>
      </div>
      <pre id="scenario-output" class="output">尚未执行</pre>
    </div>
  </section>

  <!-- Mock API -->
  <section id="tab-mockapi" class="tab">
    <div class="grid2">
      <div class="card">
        <h2>Mock API 控制（API_PULL 对端）</h2>
        <div class="row">
          <button id="btn-mock-start" class="primary">启动</button>
          <button id="btn-mock-stop">停止</button>
          <span id="mock-state" class="state"></span>
        </div>
        <label>鉴权模式
          <select id="mock-auth">
            <option value="NONE">NONE</option>
            <option value="TOKEN" selected>TOKEN（Bearer）</option>
            <option value="BASIC">BASIC</option>
            <option value="APIKEY">APIKEY</option>
          </select>
        </label>
        <label>延迟（秒）<input id="mock-delay" type="number" step="0.5" min="0" value="0" /></label>
        <label>强制 HTTP 错误
          <select id="mock-force">
            <option value="">不强制</option>
            <option value="401">401</option>
            <option value="403">403</option>
            <option value="404">404</option>
            <option value="429">429</option>
            <option value="500">500</option>
            <option value="503">503</option>
          </select>
        </label>
        <label>响应路径 <input id="mock-resp-path" type="text" value="data.list" /></label>
        <div class="row">
          <button id="btn-mock-apply">应用设置</button>
          <button id="btn-mock-clear-overrides">清空样例挂载</button>
        </div>
      </div>
      <div class="card">
        <h2>调用审计（脱敏）</h2>
        <div class="row"><button id="btn-mock-audit">刷新审计</button></div>
        <pre id="mock-audit" class="output">—</pre>
      </div>
    </div>
  </section>

  <!-- 模拟 MySQL -->
  <section id="tab-db" class="tab">
    <div class="grid2">
      <div class="card">
        <h2>模拟 MySQL 源库（DB_SYNC 对端）</h2>
        <p class="muted">库名固定 <code>aidop_integration_sim</code>；凭据从环境变量读取，页面不保存密码。</p>
        <label>对象 <select id="db-object"></select></label>
        <div class="row">
          <button id="btn-db-ensure" class="primary">建库建表</button>
          <button id="btn-db-load">装载样例</button>
          <button id="btn-db-reset">重置单表</button>
          <button id="btn-db-stats">行数/最大增量</button>
          <button id="btn-db-config">生成 Ai-DOP 配置清单</button>
        </div>
        <pre id="db-output" class="output">—</pre>
      </div>
      <div class="card">
        <h2>Ai-DOP 侧登记建议（人工执行，不自动写配置）</h2>
        <pre id="db-config-output" class="output small">选择对象后点击「生成 Ai-DOP 配置清单」</pre>
      </div>
    </div>
  </section>

  <!-- API_INBOUND -->
  <section id="tab-inbound" class="tab">
    <div class="grid2">
      <div class="card">
        <h2>26 契约 schema 预检</h2>
        <div class="row">
          <button id="btn-precheck-all" class="primary">全部预检</button>
          <span class="muted">真实签名 GET schema；区分 READY / CONFIG_NOT_REGISTERED / CONFIG_NOT_ENABLED / GRANT_MISSING</span>
        </div>
        <pre id="inbound-precheck" class="output">—</pre>
      </div>
      <div class="card">
        <h2>七类操作与必测用例</h2>
        <label>实体 <select id="inbound-entity"></select></label>
        <label>操作
          <select id="inbound-op">
            <option value="schema">1. schema</option>
            <option value="push" selected>2. 普通 POST</option>
            <option value="receipt">3. receipt</option>
            <option value="bulk">4. bulk（NDJSON）</option>
            <option value="snapshot_open">5. snapshot open</option>
            <option value="snapshot_commit">6. snapshot commit</option>
            <option value="digest">7. digest</option>
          </select>
        </label>
        <label>用例（普通 POST）
          <select id="inbound-case">
            <option value="happy">正常推数</option>
            <option value="missing-idem">缺幂等键</option>
            <option value="tamper-body">body 摘要不一致</option>
            <option value="expired-ts">过期 timestamp</option>
            <option value="nonce-replay">nonce 重放</option>
            <option value="same-key-replay">同幂等键同 body</option>
            <option value="same-key-diff-body">同幂等键不同 body</option>
            <option value="bad-signature">错误签名</option>
          </select>
        </label>
        <label>receipt 批次号 <input id="inbound-batch" type="text" placeholder="syncBatchId" /></label>
        <label>snapshotId <input id="inbound-snapshot" type="text" /></label>
        <label>digest 业务日期 <input id="inbound-date" type="text" placeholder="yyyy-MM-dd" /></label>
        <div class="row"><button id="btn-inbound-exec" class="primary">执行</button></div>
        <pre id="inbound-output" class="output">—</pre>
      </div>
    </div>
  </section>

  <!-- 异常测试（第二阶段 N1-N4） -->
  <section id="tab-fault" class="tab">
    <div class="card">
      <h2>异常测试场景（第二阶段 · N1 甲 10 / N2 乙 16 / N3 丙 17）</h2>
      <p class="muted">
        auto = 模拟器一键预置；guide = 按说明在 Ai-DOP 侧人工操作（模拟器不修改 Ai-DOP 配置）。
        被 Ai-DOP 正确拒绝 = 测试通过，不属于工具失败。
      </p>
      <div class="row">
        <button id="btn-fault-refresh">刷新目录</button>
        <button id="btn-fault-recover-all" class="primary">一键恢复全部默认</button>
        <span class="muted">异常均为内存态注入，重启控制台亦自动恢复</span>
      </div>
      <div id="fault-groups"></div>
    </div>
    <div class="grid2">
      <div class="card">
        <h2>异常测试报告（N4 · 八列）</h2>
        <p class="muted">保存前自动脱敏；选择场景后自动带入模拟端行为与预期结果。</p>
        <label>场景 <select id="fault-report-scenario"></select></label>
        <label>模拟端行为 <textarea id="fault-report-sim" rows="2"></textarea></label>
        <label>预期结果 <textarea id="fault-report-expect" rows="2"></textarea></label>
        <label>实际响应 <textarea id="fault-report-actual" rows="2" placeholder="Ai-DOP 实际响应/报错（人工填写）"></textarea></label>
        <label>Ai-DOP 流水状态 <input id="fault-report-flow" type="text" placeholder="mdp_sync_log / mdp_inbound_request 状态" /></label>
        <label>目标数据是否变化 <input id="fault-report-target" type="text" placeholder="如：贴源表无新增行" /></label>
        <label>是否符合预期
          <select id="fault-report-pass">
            <option value="是">是</option>
            <option value="否">否</option>
            <option value="部分">部分</option>
          </select>
        </label>
        <label>备注 <textarea id="fault-report-note" rows="2"></textarea></label>
        <div class="row">
          <button id="btn-fault-report-save" class="primary">保存报告（自动脱敏）</button>
          <button id="btn-fault-report-export">导出最新 Markdown</button>
          <button id="btn-fault-report-refresh">刷新列表</button>
        </div>
      </div>
      <div class="card">
        <h2>已保存异常报告（内存态，重启即清空）</h2>
        <pre id="fault-report-list" class="output small">—</pre>
      </div>
    </div>
  </section>

  <!-- 全链路报告 -->
  <section id="tab-report" class="tab">
    <div class="grid2">
      <div class="card">
        <h2>全链路测试报告（人工填写摘要）</h2>
        <p class="muted">保存前自动脱敏：密码、Secret、JWT、完整 Authorization、连接串不入报告；AccessKey 仅保留后四位。</p>
        <label>集成方式
          <select id="report-channel">
            <option value="DB_SYNC">方式甲 DB_SYNC（数据库同步）</option>
            <option value="API_PULL">方式乙 API_PULL（接口拉取）</option>
            <option value="API_INBOUND">方式丙 API_INBOUND（接口推送）</option>
          </select>
        </label>
        <label>运行编号 runId <input id="report-runid" type="text" placeholder="SIM-yyyyMMddHHmmss" /></label>
        <label>环境与测试租户 <input id="report-env" type="text" placeholder="如：开发库 / 租户 T1" /></label>
        <label>对象 <input id="report-object" type="text" placeholder="如：ITEM / PURCHASE_ORDER / S5_INVENTORY_TXN" /></label>
        <label>模拟端准备结果
          <textarea id="report-simprep" rows="2" placeholder="建表装载行数 / Mock 挂载样例 / 推数受理结果"></textarea>
        </label>
        <label>人工执行步骤
          <textarea id="report-steps" rows="3" placeholder="1. 在 Ai-DOP 登记 SIM_MODE3_* 来源；2. 测连；3. 触发同步/拉取/推送…"></textarea>
        </label>
        <label>模拟端证据
          <textarea id="report-simevidence" rows="5" placeholder="源表行数、Mock 审计、入站响应摘要；可点「从运行记录导入」"></textarea>
        </label>
        <div class="row">
          <button id="btn-report-evidence">从运行记录导入证据</button>
          <span class="muted">导入内容已脱敏</span>
        </div>
        <label>Ai-DOP 测连结果 <textarea id="report-conn" rows="2" placeholder="测连成功/失败与提示"></textarea></label>
        <label>同步/入站流水编号 <input id="report-flowids" type="text" placeholder="mdp_sync_log / mdp_inbound_request 编号" /></label>
      </div>
      <div class="card">
        <h2>Ai-DOP 侧人工核验与结论</h2>
        <label>贴源核验结果
          <textarea id="report-staging" rows="2" placeholder="贴源表行数、与源端比对结果"></textarea>
        </label>
        <label>目标业务结果
          <textarea id="report-target" rows="3" placeholder="标准层/目标表查询结果（只读核验）"></textarea>
        </label>
        <label>结论 <input id="report-conclusion" type="text" placeholder="如：全链路打通 / 部分通过 / 未通过" /></label>
        <label>未完成项
          <textarea id="report-gaps" rows="2" placeholder="未验证项与原因"></textarea>
        </label>
        <label>清理提示
          <textarea id="report-cleanup" rows="2" placeholder="如：删除 SIM_MODE3_DB 来源、停止 Mock、清理测试数据"></textarea>
        </label>
        <div class="row">
          <button id="btn-report-save" class="primary">保存报告（自动脱敏）</button>
          <button id="btn-report-export">导出 Markdown</button>
          <button id="btn-report-refresh">刷新列表</button>
        </div>
        <h3>已保存报告（内存态，重启即清空）</h3>
        <pre id="report-list-output" class="output small">—</pre>
      </div>
    </div>
  </section>

  <!-- 运行记录 -->
  <section id="tab-runs" class="tab">
    <div class="card">
      <h2>最近运行记录（自动脱敏）</h2>
      <div class="row"><button id="btn-runs-refresh">刷新</button></div>
      <pre id="runs-output" class="output">—</pre>
    </div>
  </section>

  <!-- 环境安全 -->
  <section id="tab-security" class="tab">
    <div class="card">
      <h2>环境与安全状态</h2>
      <pre id="security-output" class="output">加载中…</pre>
      <ul class="muted">
        <li>Secret / 数据库密码 / Admin Token 只从环境变量读取，本页面不可读取、不保存（无 localStorage）。</li>
        <li>Ai-DOP 目标 host 必须在 <code>config.json → allowedTargetHosts</code> 白名单内，默认仅 127.0.0.1 / localhost。</li>
        <li>报告中 AccessKey 只保留后四位；认证头、连接串自动脱敏。</li>
        <li>模拟器不写 Ai-DOP 贴源/标准/KPI 表；三种通道使用独立测试 source_code（SIM_MODE3_*）。</li>
      </ul>
    </div>
  </section>

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