From 156837877d14aff3325c45dd0608c0cd708bf7d9 Mon Sep 17 00:00:00 2001
From: mm644706215 <ze.ga@qq.com>
Date: Thu, 26 Mar 2026 14:08:52 +0800
Subject: [PATCH] fix: open console in a new window

---
 luasrc/view/openclaw/console.htm    | 78 +++++++++++++++++++++--------
 tests/test_luci_console_contract.sh | 30 +++++++++++
 2 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 tests/test_luci_console_contract.sh

diff --git a/luasrc/view/openclaw/console.htm b/luasrc/view/openclaw/console.htm
index 4c40554..38af8c9 100644
--- a/luasrc/view/openclaw/console.htm
+++ b/luasrc/view/openclaw/console.htm
@@ -51,17 +51,53 @@ local port = uci:get("openclaw", "main", "port") or "18789"
 	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
 }
 
-#oc-console-iframe { width: 100%; height: 700px; border: none; display: block; }
-
 .oc-console-loading {
 	display: flex; flex-direction: column; align-items: center; justify-content: center;
-	height: 300px; color: #666; font-size: 14px; background: #fafafa;
+	min-height: 320px; color: #666; font-size: 14px; background: #fafafa;
+	padding: 32px 24px;
+	text-align: center;
 }
 .oc-console-loading .spinner {
 	width: 32px; height: 32px; border: 3px solid #e0e0e0; border-top: 3px solid #4a90d9;
 	border-radius: 50%; animation: oc-spin .8s linear infinite; margin-bottom: 12px;
 }
 @keyframes oc-spin { to { transform: rotate(360deg); } }
+
+.oc-console-note {
+	max-width: 640px;
+	line-height: 1.8;
+}
+
+.oc-console-note strong {
+	color: #333;
+}
+
+.oc-console-note code {
+	padding: 2px 6px;
+	background: #f0f3f6;
+	border-radius: 4px;
+	font-family: monospace;
+}
+
+.oc-console-actions {
+	display: flex;
+	justify-content: center;
+	gap: 10px;
+	flex-wrap: wrap;
+	margin-top: 16px;
+}
+
+.oc-console-link {
+	font-size: 12px;
+	color: #666;
+	word-break: break-all;
+	margin-top: 14px;
+}
+
+.oc-console-link a {
+	color: #4a90d9;
+	text-decoration: none;
+}
 </style>
 
 <div class="oc-page-header">
@@ -107,13 +143,28 @@ local port = uci:get("openclaw", "main", "port") or "18789"
 	var openBtn = document.getElementById('oc-console-open-btn');
 
 	function getConsoleUrl() {
-		var proto = window.location.protocol;
 		var host = window.location.hostname;
-		var url = proto + '//' + host + ':' + gwPort + '/';
+		var url = 'http://' + host + ':' + gwPort + '/';
 		if (gwToken) url += '#token=' + encodeURIComponent(gwToken);
 		return url;
 	}
 
+	function showOpenMessage(url) {
+		loading.innerHTML =
+			'<div class="oc-console-note">' +
+				'<div style="font-size:42px;margin-bottom:12px;">🪟</div>' +
+				'<div style="font-size:16px;margin-bottom:8px;"><strong>请在新窗口中打开 OpenClaw 控制台</strong></div>' +
+				'<div style="font-size:13px;color:#666;">' +
+					'OpenClaw 控制台会返回浏览器安全头，拒绝被 LuCI 页面内嵌。' +
+					'请点击上方「新窗口打开」访问控制台。' +
+				'</div>' +
+				'<div class="oc-console-actions">' +
+					'<a class="btn cbi-button cbi-button-action" href="' + url + '" target="_blank" rel="noopener">↗ 新窗口打开</a>' +
+				'</div>' +
+				'<div class="oc-console-link">直接地址：<a href="' + url + '" target="_blank" rel="noopener">' + url + '</a></div>' +
+			'</div>';
+	}
+
 	function checkAndLoad() {
 		addrEl.textContent = window.location.hostname + ':' + gwPort;
 
@@ -135,7 +186,7 @@ local port = uci:get("openclaw", "main", "port") or "18789"
 						statusTextEl.innerHTML = '<span style="color:#1a7f37;">● 网关运行中</span>';
 						openBtn.href = url;
 						openBtn.style.display = '';
-						showIframe(url);
+						showOpenMessage(url);
 					} else if (d.gateway_starting) {
 						statusTextEl.innerHTML = '<span style="color:#9a6700;">⏳ 网关正在启动</span>';
 						openBtn.style.display = 'none';
@@ -160,21 +211,6 @@ local port = uci:get("openclaw", "main", "port") or "18789"
 		});
 	}
 
-	function showIframe(url) {
-		loading.style.display = 'none';
-		var existing = document.getElementById('oc-console-iframe');
-		if (existing) return;
-
-		var iframe = document.createElement('iframe');
-		iframe.id = 'oc-console-iframe';
-		iframe.src = url;
-		iframe.style.width = '100%';
-		iframe.style.height = '700px';
-		iframe.style.border = 'none';
-		iframe.setAttribute('allowfullscreen', 'true');
-		container.appendChild(iframe);
-	}
-
 	checkAndLoad();
 })();
 //]]>
diff --git a/tests/test_luci_console_contract.sh b/tests/test_luci_console_contract.sh
new file mode 100644
index 0000000..e9eb71e
--- /dev/null
+++ b/tests/test_luci_console_contract.sh
@@ -0,0 +1,30 @@
+#!/bin/sh
+set -eu
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname "$0")" && pwd)
+REPO_ROOT=$(CDPATH= cd -- "$SCRIPT_DIR/.." && pwd)
+
+CONSOLE_VIEW="$REPO_ROOT/luasrc/view/openclaw/console.htm"
+
+fail() {
+	echo "FAIL: $1" >&2
+	exit 1
+}
+
+grep -Fq "http://' + host + ':' + gwPort + '/'" "$CONSOLE_VIEW" || fail "console view should force http for the gateway URL"
+grep -Fq '请点击上方「新窗口打开」访问控制台。' "$CONSOLE_VIEW" || fail "console view should explain that the console must open in a new window"
+
+if grep -Fq "document.createElement('iframe')" "$CONSOLE_VIEW"; then
+	fail "console view should not embed the OpenClaw UI in an iframe"
+fi
+
+if grep -Fq 'window.location.protocol' "$CONSOLE_VIEW"; then
+	fail "console view should not reuse the LuCI page protocol for the gateway URL"
+fi
+
+cr=$(printf '\r')
+if LC_ALL=C grep -q "$cr" "$CONSOLE_VIEW"; then
+	fail "console view should use LF line endings"
+fi
+
+echo "ok"