index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Ai-DOP 第三方对接模拟器</title>
  7. <link rel="stylesheet" href="/static/app.css" />
  8. </head>
  9. <body>
  10. <header>
  11. <h1>Ai-DOP 第三方对接模拟器 <span class="tag">第一阶段 · 本地控制台</span></h1>
  12. <div id="env-banner" class="banner">环境状态加载中…</div>
  13. </header>
  14. <nav>
  15. <button data-tab="tab-run" class="active">对象测试</button>
  16. <button data-tab="tab-scenario">业务场景</button>
  17. <button data-tab="tab-mockapi">Mock API(API_PULL)</button>
  18. <button data-tab="tab-db">模拟 MySQL(DB_SYNC)</button>
  19. <button data-tab="tab-inbound">API_INBOUND</button>
  20. <button data-tab="tab-report">全链路报告</button>
  21. <button data-tab="tab-runs">运行记录</button>
  22. <button data-tab="tab-security">环境安全</button>
  23. </nav>
  24. <!-- 对象测试 -->
  25. <section id="tab-run" class="tab active">
  26. <div class="grid2">
  27. <div class="card">
  28. <h2>1. 选择对象与通道</h2>
  29. <label>业务对象
  30. <select id="run-object"></select>
  31. </label>
  32. <div id="run-object-info" class="muted"></div>
  33. <label>对接方式
  34. <select id="run-channel">
  35. <option value="DB_SYNC">DB_SYNC(数据库同步)</option>
  36. <option value="API_PULL">API_PULL(接口拉取)</option>
  37. <option value="API_INBOUND">API_INBOUND(接口推送)</option>
  38. </select>
  39. </label>
  40. <div id="run-channel-state" class="state"></div>
  41. <label>运行编号
  42. <input id="run-id" type="text" placeholder="留空自动生成 SIM-yyyyMMddHHmmss-xxxxxx" />
  43. </label>
  44. <h2>2. 样例编辑(canonical → 通道适配)</h2>
  45. <textarea id="run-rows" rows="12" spellcheck="false" placeholder="点击「加载适配样例」后可编辑 JSON 数组"></textarea>
  46. <div class="row">
  47. <button id="btn-load-sample">加载适配样例</button>
  48. <span id="run-missing" class="warn"></span>
  49. </div>
  50. </div>
  51. <div class="card">
  52. <h2>3. 执行与结果</h2>
  53. <div class="row" id="run-actions">
  54. <button id="btn-precheck">预检</button>
  55. <button id="btn-exec" class="primary">执行</button>
  56. </div>
  57. <div id="run-layers" class="layers"></div>
  58. <h3>请求 / 响应预览(已脱敏)</h3>
  59. <pre id="run-output" class="output">尚未执行</pre>
  60. <h3>后续人工核验 SQL</h3>
  61. <pre id="run-sql" class="output small">—</pre>
  62. </div>
  63. </div>
  64. </section>
  65. <!-- 业务场景 -->
  66. <section id="tab-scenario" class="tab">
  67. <div class="card">
  68. <h2>跨对象基础场景(三通道同业务语义)</h2>
  69. <label>场景
  70. <select id="scenario-select"></select>
  71. </label>
  72. <div id="scenario-desc" class="muted"></div>
  73. <div id="scenario-graph" class="graph"></div>
  74. <div class="row">
  75. <button id="btn-scenario-run" class="primary">执行场景</button>
  76. <span class="muted">不支持的节点会明确标记「该通道不支持」,不跳过后宣称链路完整</span>
  77. </div>
  78. <pre id="scenario-output" class="output">尚未执行</pre>
  79. </div>
  80. </section>
  81. <!-- Mock API -->
  82. <section id="tab-mockapi" class="tab">
  83. <div class="grid2">
  84. <div class="card">
  85. <h2>Mock API 控制(API_PULL 对端)</h2>
  86. <div class="row">
  87. <button id="btn-mock-start" class="primary">启动</button>
  88. <button id="btn-mock-stop">停止</button>
  89. <span id="mock-state" class="state"></span>
  90. </div>
  91. <label>鉴权模式
  92. <select id="mock-auth">
  93. <option value="NONE">NONE</option>
  94. <option value="TOKEN" selected>TOKEN(Bearer)</option>
  95. <option value="BASIC">BASIC</option>
  96. <option value="APIKEY">APIKEY</option>
  97. </select>
  98. </label>
  99. <label>延迟(秒)<input id="mock-delay" type="number" step="0.5" min="0" value="0" /></label>
  100. <label>强制 HTTP 错误
  101. <select id="mock-force">
  102. <option value="">不强制</option>
  103. <option value="401">401</option>
  104. <option value="403">403</option>
  105. <option value="429">429</option>
  106. <option value="500">500</option>
  107. </select>
  108. </label>
  109. <label>响应路径 <input id="mock-resp-path" type="text" value="data.list" /></label>
  110. <div class="row">
  111. <button id="btn-mock-apply">应用设置</button>
  112. <button id="btn-mock-clear-overrides">清空样例挂载</button>
  113. </div>
  114. </div>
  115. <div class="card">
  116. <h2>调用审计(脱敏)</h2>
  117. <div class="row"><button id="btn-mock-audit">刷新审计</button></div>
  118. <pre id="mock-audit" class="output">—</pre>
  119. </div>
  120. </div>
  121. </section>
  122. <!-- 模拟 MySQL -->
  123. <section id="tab-db" class="tab">
  124. <div class="grid2">
  125. <div class="card">
  126. <h2>模拟 MySQL 源库(DB_SYNC 对端)</h2>
  127. <p class="muted">库名固定 <code>aidop_integration_sim</code>;凭据从环境变量读取,页面不保存密码。</p>
  128. <label>对象 <select id="db-object"></select></label>
  129. <div class="row">
  130. <button id="btn-db-ensure" class="primary">建库建表</button>
  131. <button id="btn-db-load">装载样例</button>
  132. <button id="btn-db-reset">重置单表</button>
  133. <button id="btn-db-stats">行数/最大增量</button>
  134. <button id="btn-db-config">生成 Ai-DOP 配置清单</button>
  135. </div>
  136. <pre id="db-output" class="output">—</pre>
  137. </div>
  138. <div class="card">
  139. <h2>Ai-DOP 侧登记建议(人工执行,不自动写配置)</h2>
  140. <pre id="db-config-output" class="output small">选择对象后点击「生成 Ai-DOP 配置清单」</pre>
  141. </div>
  142. </div>
  143. </section>
  144. <!-- API_INBOUND -->
  145. <section id="tab-inbound" class="tab">
  146. <div class="grid2">
  147. <div class="card">
  148. <h2>26 契约 schema 预检</h2>
  149. <div class="row">
  150. <button id="btn-precheck-all" class="primary">全部预检</button>
  151. <span class="muted">真实签名 GET schema;区分 READY / CONFIG_NOT_REGISTERED / CONFIG_NOT_ENABLED / GRANT_MISSING</span>
  152. </div>
  153. <pre id="inbound-precheck" class="output">—</pre>
  154. </div>
  155. <div class="card">
  156. <h2>七类操作与必测用例</h2>
  157. <label>实体 <select id="inbound-entity"></select></label>
  158. <label>操作
  159. <select id="inbound-op">
  160. <option value="schema">1. schema</option>
  161. <option value="push" selected>2. 普通 POST</option>
  162. <option value="receipt">3. receipt</option>
  163. <option value="bulk">4. bulk(NDJSON)</option>
  164. <option value="snapshot_open">5. snapshot open</option>
  165. <option value="snapshot_commit">6. snapshot commit</option>
  166. <option value="digest">7. digest</option>
  167. </select>
  168. </label>
  169. <label>用例(普通 POST)
  170. <select id="inbound-case">
  171. <option value="happy">正常推数</option>
  172. <option value="missing-idem">缺幂等键</option>
  173. <option value="tamper-body">body 摘要不一致</option>
  174. <option value="expired-ts">过期 timestamp</option>
  175. <option value="nonce-replay">nonce 重放</option>
  176. <option value="same-key-replay">同幂等键同 body</option>
  177. <option value="same-key-diff-body">同幂等键不同 body</option>
  178. <option value="bad-signature">错误签名</option>
  179. </select>
  180. </label>
  181. <label>receipt 批次号 <input id="inbound-batch" type="text" placeholder="syncBatchId" /></label>
  182. <label>snapshotId <input id="inbound-snapshot" type="text" /></label>
  183. <label>digest 业务日期 <input id="inbound-date" type="text" placeholder="yyyy-MM-dd" /></label>
  184. <div class="row"><button id="btn-inbound-exec" class="primary">执行</button></div>
  185. <pre id="inbound-output" class="output">—</pre>
  186. </div>
  187. </div>
  188. </section>
  189. <!-- 全链路报告 -->
  190. <section id="tab-report" class="tab">
  191. <div class="grid2">
  192. <div class="card">
  193. <h2>全链路测试报告(人工填写摘要)</h2>
  194. <p class="muted">保存前自动脱敏:密码、Secret、JWT、完整 Authorization、连接串不入报告;AccessKey 仅保留后四位。</p>
  195. <label>集成方式
  196. <select id="report-channel">
  197. <option value="DB_SYNC">方式甲 DB_SYNC(数据库同步)</option>
  198. <option value="API_PULL">方式乙 API_PULL(接口拉取)</option>
  199. <option value="API_INBOUND">方式丙 API_INBOUND(接口推送)</option>
  200. </select>
  201. </label>
  202. <label>运行编号 runId <input id="report-runid" type="text" placeholder="SIM-yyyyMMddHHmmss" /></label>
  203. <label>环境与测试租户 <input id="report-env" type="text" placeholder="如:开发库 / 租户 T1" /></label>
  204. <label>对象 <input id="report-object" type="text" placeholder="如:ITEM / PURCHASE_ORDER / S5_INVENTORY_TXN" /></label>
  205. <label>模拟端准备结果
  206. <textarea id="report-simprep" rows="2" placeholder="建表装载行数 / Mock 挂载样例 / 推数受理结果"></textarea>
  207. </label>
  208. <label>人工执行步骤
  209. <textarea id="report-steps" rows="3" placeholder="1. 在 Ai-DOP 登记 SIM_MODE3_* 来源;2. 测连;3. 触发同步/拉取/推送…"></textarea>
  210. </label>
  211. <label>模拟端证据
  212. <textarea id="report-simevidence" rows="5" placeholder="源表行数、Mock 审计、入站响应摘要;可点「从运行记录导入」"></textarea>
  213. </label>
  214. <div class="row">
  215. <button id="btn-report-evidence">从运行记录导入证据</button>
  216. <span class="muted">导入内容已脱敏</span>
  217. </div>
  218. <label>Ai-DOP 测连结果 <textarea id="report-conn" rows="2" placeholder="测连成功/失败与提示"></textarea></label>
  219. <label>同步/入站流水编号 <input id="report-flowids" type="text" placeholder="mdp_sync_log / mdp_inbound_request 编号" /></label>
  220. </div>
  221. <div class="card">
  222. <h2>Ai-DOP 侧人工核验与结论</h2>
  223. <label>贴源核验结果
  224. <textarea id="report-staging" rows="2" placeholder="贴源表行数、与源端比对结果"></textarea>
  225. </label>
  226. <label>目标业务结果
  227. <textarea id="report-target" rows="3" placeholder="标准层/目标表查询结果(只读核验)"></textarea>
  228. </label>
  229. <label>结论 <input id="report-conclusion" type="text" placeholder="如:全链路打通 / 部分通过 / 未通过" /></label>
  230. <label>未完成项
  231. <textarea id="report-gaps" rows="2" placeholder="未验证项与原因"></textarea>
  232. </label>
  233. <label>清理提示
  234. <textarea id="report-cleanup" rows="2" placeholder="如:删除 SIM_MODE3_DB 来源、停止 Mock、清理测试数据"></textarea>
  235. </label>
  236. <div class="row">
  237. <button id="btn-report-save" class="primary">保存报告(自动脱敏)</button>
  238. <button id="btn-report-export">导出 Markdown</button>
  239. <button id="btn-report-refresh">刷新列表</button>
  240. </div>
  241. <h3>已保存报告(内存态,重启即清空)</h3>
  242. <pre id="report-list-output" class="output small">—</pre>
  243. </div>
  244. </div>
  245. </section>
  246. <!-- 运行记录 -->
  247. <section id="tab-runs" class="tab">
  248. <div class="card">
  249. <h2>最近运行记录(自动脱敏)</h2>
  250. <div class="row"><button id="btn-runs-refresh">刷新</button></div>
  251. <pre id="runs-output" class="output">—</pre>
  252. </div>
  253. </section>
  254. <!-- 环境安全 -->
  255. <section id="tab-security" class="tab">
  256. <div class="card">
  257. <h2>环境与安全状态</h2>
  258. <pre id="security-output" class="output">加载中…</pre>
  259. <ul class="muted">
  260. <li>Secret / 数据库密码 / Admin Token 只从环境变量读取,本页面不可读取、不保存(无 localStorage)。</li>
  261. <li>Ai-DOP 目标 host 必须在 <code>config.json → allowedTargetHosts</code> 白名单内,默认仅 127.0.0.1 / localhost。</li>
  262. <li>报告中 AccessKey 只保留后四位;认证头、连接串自动脱敏。</li>
  263. <li>模拟器不写 Ai-DOP 贴源/标准/KPI 表;三种通道使用独立测试 source_code(SIM_MODE3_*)。</li>
  264. </ul>
  265. </div>
  266. </section>
  267. <script src="/static/app.js"></script>
  268. </body>
  269. </html>