lilu
/
nomo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlashLink JS Bridge 测试</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #333;
        /* 使用原生属性设置安全边距 */
        padding-top: calc(var(--status-bar-height, 0px) + 10px);
        padding-bottom: calc(var(--bottom-bar-height, 0px) + 10px);
        min-height: 100vh;
      }

      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 15px;
      }

      .header {
        background: white;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        font-size: 24px;
        margin-bottom: 15px;
        color: #667eea;
      }

      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        font-size: 13px;
      }

      .info-item {
        background: #f8f9fa;
        padding: 10px;
        border-radius: 8px;
      }

      .info-label {
        color: #666;
        font-size: 11px;
        margin-bottom: 5px;
      }

      .info-value {
        color: #333;
        font-weight: 600;
        word-break: break-all;
      }

      .card {
        background: white;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .card h2 {
        font-size: 18px;
        margin-bottom: 15px;
        color: #667eea;
      }

      .vpn-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 10px;
        margin-bottom: 15px;
      }

      .status-indicator {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ccc;
        animation: pulse 2s infinite;
      }

      .status-dot.connected {
        background-color: #10b981;
      }

      .status-dot.connecting {
        background-color: #f59e0b;
      }

      .status-dot.disconnected {
        background-color: #ef4444;
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      .btn-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .btn {
        padding: 12px 20px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
      }

      .btn:active {
        transform: scale(0.95);
      }

      .btn-full {
        grid-column: 1 / -1;
      }

      .btn-danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      }

      .btn-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      }

      .log {
        background: #1e293b;
        color: #94a3b8;
        border-radius: 10px;
        padding: 15px;
        max-height: 300px;
        overflow-y: auto;
        font-size: 12px;
        font-family: "Courier New", monospace;
      }

      .log-item {
        margin-bottom: 8px;
        line-height: 1.5;
      }

      .log-time {
        color: #64748b;
      }

      .log-success {
        color: #10b981;
      }

      .log-error {
        color: #ef4444;
      }

      .log-info {
        color: #3b82f6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 设备信息 -->
      <div class="header">
        <h1>🚀 FlashLink JS Bridge</h1>
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">状态栏高度</div>
            <div class="info-value" id="statusBarHeight">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">底部安全区</div>
            <div class="info-value" id="bottomBarHeight">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">平台</div>
            <div class="info-value" id="platform">-</div>
          </div>
          <div class="info-item">
            <div class="info-label">版本</div>
            <div class="info-value" id="version">-</div>
          </div>
        </div>
      </div>

      <!-- VPN 控制 -->
      <div class="card">
        <h2>🔐 VPN 控制</h2>
        <div class="vpn-status">
          <div class="status-indicator">
            <div class="status-dot" id="statusDot"></div>
            <div>
              <div style="font-weight: 600" id="vpnStatus">未知</div>
              <div style="font-size: 12px; color: #666" id="vpnTimer">
                00:00:00
              </div>
            </div>
          </div>
        </div>
        <div class="btn-grid">
          <button class="btn btn-success" onclick="handleConnectVPN()">
            ⚡ 连接
          </button>
          <button class="btn btn-danger" onclick="handleDisconnectVPN()">
            ⏸️ 断开
          </button>
          <button class="btn btn-full" onclick="handleGetVPNStatus()">
            🔍 查询状态
          </button>
        </div>
      </div>

      <!-- 其他功能 -->
      <div class="card">
        <h2>🛠️ 其他功能</h2>
        <div class="btn-grid">
          <button class="btn" onclick="handleSetStatusBarColor()">
            🎨 切换状态栏
          </button>
          <button class="btn" onclick="handleOpenApp()">📱 打开微信</button>
          <button class="btn btn-danger btn-full" onclick="handleExit()">
            ❌ 退出 WebView
          </button>
        </div>
      </div>

      <!-- 日志 -->
      <div class="card">
        <h2>📋 日志</h2>
        <div class="log" id="logContainer"></div>
      </div>
    </div>

    <script>
      let logCount = 0;
      const maxLogs = 50;

      // 日志函数
      function addLog(message, type = "info") {
        const logContainer = document.getElementById("logContainer");
        const time = new Date().toLocaleTimeString("zh-CN", { hour12: false });
        const logClass = `log-${type}`;

        const logItem = document.createElement("div");
        logItem.className = "log-item";
        logItem.innerHTML = `<span class="log-time">[${time}]</span> <span class="${logClass}">${message}</span>`;

        logContainer.insertBefore(logItem, logContainer.firstChild);

        logCount++;
        if (logCount > maxLogs) {
          logContainer.removeChild(logContainer.lastChild);
          logCount--;
        }
      }

      // 更新 VPN 状态显示
      function updateVPNStatusUI(status) {
        const statusDot = document.getElementById("statusDot");
        const statusText = document.getElementById("vpnStatus");

        statusDot.className = "status-dot " + status;

        const statusMap = {
          connected: "已连接",
          connecting: "连接中",
          disconnected: "未连接",
          unknown: "未知",
        };

        statusText.textContent = statusMap[status] || status;
      }

      // 页面加载完成后初始化
      window.onload = function () {
        addLog("页面加载完成，等待原生注入...", "info");
        setTimeout(initNativeAttrs, 200);
      };

      // 初始化原生属性
      function initNativeAttrs() {
        if (window.nativeAttrs) {
          document.getElementById("statusBarHeight").textContent =
            window.nativeAttrs.statusBarHeight + "px";
          document.getElementById("bottomBarHeight").textContent =
            window.nativeAttrs.bottomBarHeight + "px";
          document.getElementById("platform").textContent =
            window.nativeAttrs.platform;
          document.getElementById("version").textContent =
            window.nativeAttrs.version;

          // 设置 CSS 变量
          document.documentElement.style.setProperty(
            "--status-bar-height",
            window.nativeAttrs.statusBarHeight + "px",
          );
          document.documentElement.style.setProperty(
            "--bottom-bar-height",
            window.nativeAttrs.bottomBarHeight + "px",
          );

          addLog("✅ 原生属性注入成功", "success");
          addLog(
            `📱 平台: ${window.nativeAttrs.platform}, 版本: ${window.nativeAttrs.version}`,
            "info",
          );

          // 初始化 VPN 状态
          handleGetVPNStatus();
        } else {
          addLog("❌ 原生属性注入失败", "error");
        }
      }

      // 设置 VPN 状态回调
      window.nativeCallbacks = {
        onVPNStatusChanged: function (status) {
          addLog(`📡 VPN 状态变化: ${status}`, "info");
          updateVPNStatusUI(status);
        },

        onVPNConnected: function () {
          addLog("✅ VPN 连接成功！", "success");
          updateVPNStatusUI("connected");
        },

        onVPNConnecting: function () {
          addLog("⏳ VPN 连接中...", "info");
          updateVPNStatusUI("connecting");
        },

        onVPNDisconnected: function () {
          addLog("⏸️ VPN 已断开", "info");
          updateVPNStatusUI("disconnected");
        },
      };

      // 功能函数
      async function handleConnectVPN() {
        try {
          addLog("🚀 正在连接 VPN...", "info");
          const result = await window.native.connectVPN(26, "ca");
          if (result.success) {
            addLog("✅ VPN 连接请求已发送", "success");
          } else {
            addLog(`❌ 连接失败: ${result.error}`, "error");
          }
        } catch (error) {
          addLog(`❌ 发生错误: ${error}`, "error");
        }
      }

      async function handleDisconnectVPN() {
        try {
          addLog("⏸️ 正在断开 VPN...", "info");
          const result = await window.native.disconnectVPN();
          if (result.success) {
            addLog("✅ VPN 断开请求已发送", "success");
          } else {
            addLog(`❌ 断开失败: ${result.error}`, "error");
          }
        } catch (error) {
          addLog(`❌ 发生错误: ${error}`, "error");
        }
      }

      async function handleGetVPNStatus() {
        try {
          const result = await window.native.getVPNStatus();
          if (result.success) {
            const status = result.data.status;
            const timer = result.data.timer;

            document.getElementById("vpnTimer").textContent = timer;
            updateVPNStatusUI(status);

            addLog(`📊 VPN 状态: ${status}, 时长: ${timer}`, "info");
          } else {
            addLog(`❌ 查询失败: ${result.error}`, "error");
          }
        } catch (error) {
          addLog(`❌ 发生错误: ${error}`, "error");
        }
      }

      async function handleSetStatusBarColor() {
        // 只支持 dark 和 light 两种模式
        const currentMode = document.body.dataset.statusBarMode || "light";
        const newMode = currentMode === "dark" ? "light" : "dark";

        try {
          addLog(`🎨 切换状态栏模式: ${currentMode} -> ${newMode}`, "info");
          const result = await window.native.setStatusBarColor(newMode);
          if (result.success) {
            document.body.dataset.statusBarMode = newMode;
            addLog(
              `✅ 状态栏模式切换成功: ${newMode} (${newMode === "dark" ? "白色图标" : "黑色图标"})`,
              "success",
            );
          } else {
            addLog(`❌ 设置失败: ${result.error}`, "error");
          }
        } catch (error) {
          addLog(`❌ 发生错误: ${error}`, "error");
        }
      }

      async function handleOpenApp() {
        try {
          addLog("📱 正在打开微信...", "info");
          const result = await window.native.openApp(
            "com.tencent.mm",
            "weixin://",
          );
          if (result.success) {
            addLog("✅ 应用已打开", "success");
          } else {
            addLog(`❌ 打开失败: ${result.error}`, "error");
          }
        } catch (error) {
          addLog(`❌ 发生错误: ${error}`, "error");
        }
      }

      async function handleExit() {
        try {
          addLog("👋 正在退出 WebView...", "info");
          await window.native.exit();
        } catch (error) {
          addLog(`❌ 退出失败: ${error}`, "error");
        }
      }

      // 监听 VPN 状态变化事件
      window.addEventListener("vpnStatusChanged", function (event) {
        console.log("收到 VPN 状态变化事件:", event.detail.status);
      });

      // 初始日志
      addLog("🎉 欢迎使用 FlashLink JS Bridge 测试页面", "success");
    </script>
  </body>
</html>