@heybox/hb-sdk 0.2.0-alpha.0 → 0.2.0-alpha.2

package/dist/devtools/mock-host/index.html

@@ -35,7 +35,7 @@
         gap: 16px;
         padding: 18px;
         border-right: 1px solid #d7dee8;
-        background: #ffffff;
+        background: #fff;
       }
 
       .panel h1 {
@@ -72,20 +72,12 @@
         font-size: 12px;
       }
 
-      .status strong {
-        display: block;
-        margin-top: 6px;
-        overflow-wrap: anywhere;
-        font-size: 16px;
-      }
-
+      .status strong,
       .block strong {
         display: block;
         margin-top: 6px;
         overflow-wrap: anywhere;
         word-break: break-word;
-        font-size: 13px;
-        line-height: 1.45;
       }
 
       .actions {
@@ -143,7 +135,8 @@
         font-size: 13px;
       }
 
-      .log pre {
+      .log pre,
+      .block pre {
         margin: 8px 0 0;
         overflow: auto;
         color: #475569;
@@ -217,6 +210,14 @@
           <strong id="mini-url"></strong>
         </section>
 
+        <section class="block">
+          <span>Mac App</span>
+          <div class="actions" style="margin-top: 10px">
+            <button class="primary" id="mac-app-button" type="button">在 Mac 版 APP 中启动</button>
+          </div>
+          <pre id="mac-app-status"></pre>
+        </section>
+
         <section class="block">
           <label class="field">
             <span>Nickname</span>
@@ -246,381 +247,6 @@
       </main>
     </div>
 
-    <script>
-      const NAMESPACE = 'heybox:miniprogram';
-      const VERSION = 1;
-      const NONCE_PARAM = 'hb_mini_bridge_nonce';
-      const NETWORK_PROXY_PATH = '/__hb_sdk_mock_network__';
-      const params = new URL(location.href).searchParams;
-      const miniUrl = params.get('mini_url');
-      const nonce = createNonce();
-      const storage = new Map();
-      const logs = [];
-      let handshaken = false;
-      let currentUser = {
-        heybox_id: 'debug_user',
-        nickname: 'PC Debug User',
-        avatar: '',
-      };
-
-      const elements = {
-        bridgeStatus: document.querySelector('#bridge-status'),
-        device: document.querySelector('#device'),
-        logs: document.querySelector('#logs'),
-        miniUrl: document.querySelector('#mini-url'),
-        nicknameInput: document.querySelector('#nickname-input'),
-        storageSnapshot: document.querySelector('#storage-snapshot'),
-        userStatus: document.querySelector('#user-status'),
-      };
-
-      if (!miniUrl) {
-        elements.device.innerHTML = '<div class="error">Missing mini_url query.</div>';
-        throw new Error('Missing mini_url query.');
-      }
-
-      const iframe = document.createElement('iframe');
-      iframe.src = appendNonce(miniUrl, nonce);
-      iframe.allow = 'clipboard-read; clipboard-write';
-      elements.device.appendChild(iframe);
-      elements.miniUrl.textContent = miniUrl;
-      updateUserStatus();
-      updateStorageSnapshot();
-
-      window.addEventListener('message', handleMessage);
-      window.addEventListener('beforeunload', () => {
-        postEvent('unload', { timestamp: Date.now() });
-      });
-      document.querySelector('#login-button').addEventListener('click', () => {
-        currentUser = {
-          heybox_id: 'debug_user',
-          nickname: elements.nicknameInput.value.trim() || 'PC Debug User',
-          avatar: '',
-        };
-        updateUserStatus();
-        postEvent('authChange', getUserInfoResult());
-      });
-      document.querySelector('#logout-button').addEventListener('click', () => {
-        currentUser = null;
-        updateUserStatus();
-        postEvent('authChange', getUserInfoResult());
-      });
-      document.querySelector('#show-button').addEventListener('click', () => {
-        postEvent('show', { timestamp: Date.now(), source: 'mock-host' });
-      });
-      document.querySelector('#hide-button').addEventListener('click', () => {
-        postEvent('hide', { timestamp: Date.now(), source: 'mock-host' });
-      });
-
-      function handleMessage(event) {
-        if (event.source !== iframe.contentWindow || !isBridgeMessage(event.data)) {
-          return;
-        }
-
-        const message = event.data;
-        if (message.type === 'handshake') {
-          handleHandshake();
-          return;
-        }
-
-        if (message.type === 'request') {
-          void handleRequest(message);
-        }
-      }
-
-      function handleHandshake() {
-        const firstHandshake = !handshaken;
-        handshaken = true;
-        elements.bridgeStatus.textContent = 'ready';
-
-        if (firstHandshake) {
-          postEvent('launch', {
-            timestamp: Date.now(),
-            url: iframe.src,
-          });
-        }
-
-        postEvent('ready', {
-          timestamp: Date.now(),
-        });
-        pushLog('sdk.handshake', { firstHandshake });
-      }
-
-      async function handleRequest(message) {
-        if (!message.id || !message.method) {
-          return;
-        }
-
-        try {
-          const payload = await runMethod(message.method, message.payload);
-          postResponse(message, payload);
-          pushLog(message.method, { payload: message.payload, result: payload });
-        } catch (error) {
-          const bridgeError = toBridgeError(error);
-          postResponse(message, undefined, bridgeError);
-          postEvent('error', bridgeError);
-          pushLog(message.method, { payload: message.payload, error: bridgeError });
-        }
-      }
-
-      async function runMethod(method, payload) {
-        if (method === 'auth.login') {
-          currentUser = {
-            heybox_id: 'debug_user',
-            nickname: elements.nicknameInput.value.trim() || 'PC Debug User',
-            avatar: '',
-          };
-          updateUserStatus();
-          const result = getUserInfoResult();
-          postEvent('authChange', result);
-          return result;
-        }
-
-        if (method === 'user.getInfo') {
-          return getUserInfoResult();
-        }
-
-        if (method === 'share.showShareMenu') {
-          return {
-            ok: true,
-            platform: 'hb-sdk-mock-host',
-            type: 'showShareMenu',
-            params: payload,
-          };
-        }
-
-        if (method === 'share.screenshot') {
-          return {
-            ok: true,
-            platform: 'hb-sdk-mock-host',
-            type: 'screenshot',
-            params: payload,
-          };
-        }
-
-        if (method === 'viewport.getWindowInfo') {
-          return getWindowInfo();
-        }
-
-        if (method === 'storage.getStorage') {
-          return {
-            data: storage.get(payload && payload.key),
-          };
-        }
-
-        if (method === 'storage.setStorage') {
-          storage.set(payload && payload.key, payload && payload.data);
-          updateStorageSnapshot();
-          return undefined;
-        }
-
-        if (method === 'network.request') {
-          return requestNetwork(payload || {});
-        }
-
-        throw {
-          code: 'METHOD_NOT_FOUND',
-          message: `未开放小程序能力: ${method}`,
-        };
-      }
-
-      async function requestNetwork(config) {
-        const proxyPayload = createNetworkProxyPayload(config);
-
-        const response = await fetch(NETWORK_PROXY_PATH, {
-          method: 'POST',
-          headers: {
-            'content-type': 'application/json',
-          },
-          body: JSON.stringify(proxyPayload),
-        });
-        const payload = await readNetworkProxyResponse(response);
-
-        if (!response.ok) {
-          throw payload;
-        }
-
-        return payload;
-      }
-
-      async function readNetworkProxyResponse(response) {
-        const text = await response.text();
-
-        if (!text.trim()) {
-          return undefined;
-        }
-
-        try {
-          return JSON.parse(text);
-        } catch {
-          return {
-            code: response.status === 404 ? 'MOCK_NETWORK_PROXY_NOT_FOUND' : 'MOCK_NETWORK_PROXY_ERROR',
-            message:
-              response.status === 404
-                ? 'mock network proxy 不可用，请重启 hb-sdk dev --mock'
-                : text,
-          };
-        }
-      }
-
-      function createNetworkProxyPayload(config) {
-        const url = new URL(config.url, iframe.src);
-
-        if (config.params && typeof config.params === 'object') {
-          Object.entries(config.params).forEach(([key, value]) => {
-            if (value !== undefined && value !== null) {
-              url.searchParams.set(key, String(value));
-            }
-          });
-        }
-
-        return {
-          url: url.toString(),
-          method: config.method,
-          data: config.data,
-          headers: config.headers,
-          timeout: config.timeout,
-          withCredentials: config.withCredentials,
-        };
-      }
-
-      function postEvent(method, payload) {
-        postMessageToMiniProgram({
-          namespace: NAMESPACE,
-          version: VERSION,
-          nonce,
-          type: 'event',
-          method,
-          payload,
-        });
-      }
-
-      function postResponse(request, payload, error) {
-        postMessageToMiniProgram({
-          namespace: NAMESPACE,
-          version: VERSION,
-          nonce,
-          type: 'response',
-          id: request.id,
-          method: request.method,
-          payload,
-          error,
-        });
-      }
-
-      function postMessageToMiniProgram(message) {
-        iframe.contentWindow && iframe.contentWindow.postMessage(message, readTargetOrigin());
-      }
-
-      function isBridgeMessage(message) {
-        return Boolean(
-          message &&
-            typeof message === 'object' &&
-            message.namespace === NAMESPACE &&
-            message.version === VERSION &&
-            message.nonce === nonce,
-        );
-      }
-
-      function getUserInfoResult() {
-        return {
-          isLogin: Boolean(currentUser),
-          userInfo: currentUser ? { ...currentUser } : null,
-        };
-      }
-
-      function getWindowInfo() {
-        const rect = iframe.getBoundingClientRect();
-        const width = Math.max(1, Math.round(rect.width));
-        const height = Math.max(1, Math.round(rect.height));
-
-        return {
-          pixelRatio: window.devicePixelRatio || 1,
-          screenWidth: window.screen.width || width,
-          screenHeight: window.screen.height || height,
-          windowWidth: width,
-          windowHeight: height,
-          statusBarHeight: 0,
-          safeArea: {
-            left: 0,
-            top: 0,
-            right: width,
-            bottom: height,
-            width,
-            height,
-          },
-          screenTop: 0,
-        };
-      }
-
-      function updateUserStatus() {
-        elements.userStatus.textContent = currentUser ? currentUser.nickname : '未登录';
-      }
-
-      function updateStorageSnapshot() {
-        elements.storageSnapshot.textContent = JSON.stringify(
-          Object.fromEntries(storage.entries()),
-          null,
-          2,
-        );
-      }
-
-      function pushLog(method, detail) {
-        logs.unshift({
-          method,
-          detail,
-          timestamp: new Date().toLocaleTimeString(),
-        });
-        logs.splice(30);
-        elements.logs.innerHTML = logs
-          .map(
-            log => `<article class="log"><strong>${escapeHtml(log.method)} · ${escapeHtml(
-              log.timestamp,
-            )}</strong><pre>${escapeHtml(JSON.stringify(log.detail, null, 2))}</pre></article>`,
-          )
-          .join('');
-      }
-
-      function appendNonce(input, value) {
-        const url = new URL(input, location.href);
-        url.searchParams.set(NONCE_PARAM, value);
-        return url.toString();
-      }
-
-      function readTargetOrigin() {
-        try {
-          return new URL(iframe.src).origin;
-        } catch {
-          return '*';
-        }
-      }
-
-      function createNonce() {
-        if (crypto && crypto.randomUUID) {
-          return crypto.randomUUID();
-        }
-
-        return `mock_${Date.now()}_${Math.random().toString(16).slice(2)}`;
-      }
-
-      function toBridgeError(error) {
-        if (error && typeof error === 'object' && error.code && error.message) {
-          return error;
-        }
-
-        return {
-          code: 'MOCK_RUNTIME_ERROR',
-          message: error && error.message ? error.message : String(error),
-        };
-      }
-
-      function escapeHtml(value) {
-        return String(value)
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#039;');
-      }
-    </script>
+    <script type="module" src="./main.js"></script>
   </body>
 </html>