City-Lifeline-Cockpit/public/__qiankun-host-acceptance/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>qiankun 宿主（终稿验收临时宿主）</title>
  <style>
    html, body { margin: 0; padding: 0; height: 100%; background: #01060d; color: #e6f5ff;
      font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }
    #host-bar { height: 28px; line-height: 28px; padding: 0 10px; font-size: 12px;
      background: #0a2740; border-bottom: 1px solid #1b93cf; display: flex; gap: 16px; }
    #host-bar b { color: #4fd8ff; }
    #micro-container { position: absolute; top: 28px; left: 0; right: 0; bottom: 0; overflow: hidden; }
    #probe { position: absolute; right: 8px; top: 34px; z-index: 99999; font-size: 11px;
      background: rgba(2,10,20,.9); border: 1px solid #1b93cf; padding: 6px 8px; max-width: 420px;
      white-space: pre-wrap; line-height: 1.5; }
  </style>
</head>
<body>
  <div id="host-bar">
    <span>qiankun 宿主验收（临时）</span>
    <span>入口：<b>http://127.0.0.1:8000/</b></span>
    <span>appName：<b>TvT.js</b></span>
  </div>
  <div id="micro-container"></div>
  <div id="probe">probe: waiting…</div>

  <script src="./qiankun.umd.min.js"></script>
  <script>
    (function () {
      var log = [];
      function rec(k, v) { log.push(k + '=' + v); document.getElementById('probe').textContent = log.join('\n'); }
      window.__HOST_EVENTS__ = log;
      window.__HOST_REQUESTS__ = [];
      window.__HOST_ERRORS__ = [];

      // 记录被嵌应用发出的资源请求（含字体/图标），用于「宿主内资源解析」验收
      var origFetch = window.fetch;
      window.fetch = function (input, init) {
        var url = (typeof input === 'string') ? input : (input && input.url);
        window.__HOST_REQUESTS__.push(url);
        return origFetch.apply(this, arguments);
      };
      window.addEventListener('error', function (e) {
        window.__HOST_ERRORS__.push(String(e.message || e));
      }, true);
      window.addEventListener('unhandledrejection', function (e) {
        window.__HOST_ERRORS__.push('unhandledrejection: ' + String(e.reason));
      });

      rec('host', 'qiankun ' + (window.qiankun ? 'loaded' : 'MISSING'));
      rec('powered', String(!!window.__POWERED_BY_QIANKUN__));

      var ENTRY = 'http://127.0.0.1:8000/';
      var APP = 'TvT.js';

      try {
        qiankun.registerMicroApps([{
          name: APP,
          entry: ENTRY,
          container: '#micro-container',
          activeRule: function () { return true; },
          props: {
            // 被嵌侧 lifecycle.js 只在收到 url 时切 memory history 并 push 该路由；
            // 不传则停在宿主默认页，/cockpit 不会渲染。
            url: '/cockpit',
            onRouterInit: function (router) {
              rec('routerInit', String(!!router));
            }
          }
        }], {
          beforeLoad: [function (app) { rec('beforeLoad', app.name); }],
          beforeMount: [function (app) { rec('beforeMount', app.name); }],
          afterMount: [function (app) {
            rec('afterMount', app.name);
            rec('poweredAfterMount', String(!!window.__POWERED_BY_QIANKUN__));
            rec('injectedBase', String(window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || '(none)'));
          }],
          afterUnmount: [function (app) { rec('afterUnmount', app.name); }]
        });

        qiankun.start({ singular: true, sandbox: { experimentalStyleIsolation: false } })
          .then(function () { rec('start', 'ok'); })
          .catch(function (err) { rec('startError', String(err && err.message || err)); });
      } catch (err) {
        rec('registerError', String(err && err.message || err));
      }

      // 给外部读数的稳定窗口（含字体与图标请求统计）
      window.__HOST_REPORT__ = function () {
        var reqs = window.__HOST_REQUESTS__;
        var fonts = reqs.filter(function (u) { return /\.woff2(\?|$)/.test(u); });
        var icons = reqs.filter(function (u) { return /\/cockpit\/assets\/icons\//.test(u); });
        return {
          events: window.__HOST_EVENTS__.slice(),
          powered: !!window.__POWERED_BY_QIANKUN__,
          injectedBase: window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || null,
          fontRequests: fonts,
          iconRequests: icons,
          totalRequests: reqs.length,
          errors: window.__HOST_ERRORS__.slice(),
          microRootHtmlLen: (function () {
            var el = document.querySelector('#micro-container');
            return el ? el.innerHTML.length : -1;
          })(),
          cockpitPresent: !!document.querySelector('#micro-container .cockpit-shell'),
          panelCount: document.querySelectorAll('#micro-container [data-panel-id]').length,
          markerCount: document.querySelectorAll('#micro-container [data-marker-overlay-key]').length
        };
      };
    })();
  </script>
</body>
</html>