lilu
/
nomo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NOMO 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>🚀 NOMO 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('🎉 欢迎使用 NOMO JS Bridge 测试页面', 'success');
  </script>
</body>
</html>