|
|
@@ -1,455 +1,482 @@
|
|
|
-<!DOCTYPE html>
|
|
|
+<!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>
|
|
|
+ <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>
|
|
|
- </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>
|
|
|
+
|
|
|
+ <!-- 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="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 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>
|
|
|
-
|
|
|
- <!-- 其他功能 -->
|
|
|
- <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 class="card">
|
|
|
+ <h2>📋 日志</h2>
|
|
|
+ <div class="log" id="logContainer"></div>
|
|
|
</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');
|
|
|
+
|
|
|
+ <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--;
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- addLog(`❌ 发生错误: ${error}`, 'error');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- async function handleDisconnectVPN() {
|
|
|
- try {
|
|
|
- addLog('⏸️ 正在断开 VPN...', 'info');
|
|
|
- const result = await window.native.disconnectVPN();
|
|
|
- if (result.success) {
|
|
|
- addLog('✅ VPN 断开请求已发送', 'success');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新 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(`❌ 断开失败: ${result.error}`, 'error');
|
|
|
+ addLog("❌ 原生属性注入失败", "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;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置 VPN 状态回调
|
|
|
+ window.nativeCallbacks = {
|
|
|
+ onVPNStatusChanged: function (status) {
|
|
|
+ addLog(`📡 VPN 状态变化: ${status}`, "info");
|
|
|
updateVPNStatusUI(status);
|
|
|
-
|
|
|
- addLog(`📊 VPN 状态: ${status}, 时长: ${timer}`, 'info');
|
|
|
- } else {
|
|
|
- addLog(`❌ 查询失败: ${result.error}`, 'error');
|
|
|
+ },
|
|
|
+
|
|
|
+ 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");
|
|
|
}
|
|
|
- } 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');
|
|
|
+ }
|
|
|
+
|
|
|
+ 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");
|
|
|
}
|
|
|
- } 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');
|
|
|
+ }
|
|
|
+
|
|
|
+ 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");
|
|
|
}
|
|
|
- } 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>
|
|
|
+ }
|
|
|
+
|
|
|
+ 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>
|