+
+ `;
+ }
+
+ private handleClose = () => {
+ this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+ };
+
+ private setActiveTool(tool: string) {
+ this.dispatchEvent(
+ new CustomEvent("tool-change", { detail: { tool }, bubbles: true, composed: true }),
+ );
+ }
+
+ private handleDragStart = (e: MouseEvent) => {
+ if (this.isResizing) {
+ return;
+ }
+ e.preventDefault();
+ e.stopPropagation();
+
+ // 先清理旧的监听器，防止重复添加
+ this.cleanupDragListeners();
+
+ this.isDragging = true;
+ this.dragStart = { x: e.clientX, y: e.clientY };
+ this.tempIsFloating = this.isFloating; // 初始化临时状态
+
+ const screen = this.shadowRoot?.querySelector(".screen") as HTMLDivElement | null;
+ const dragHandle = this.shadowRoot?.querySelector(".drag-handle") as HTMLDivElement | null;
+ if (screen && dragHandle) {
+ // 拖拽过程中，暂时禁用 screen 内部所有元素的 pointer-events
+ // 这样即使鼠标移动到 VNC 窗口内部，也不会被 canvas 捕获
+ screen.classList.add("dragging");
+
+ // 记录鼠标相对于拖拽句柄的位置（点 A）
+ const dragHandleRect = dragHandle.getBoundingClientRect();
+ this.dragAnchor = {
+ x: e.clientX - dragHandleRect.left,
+ y: e.clientY - dragHandleRect.top,
+ };
+
+ const rect = screen.getBoundingClientRect();
+ // 获取 claw-computer-panel 本身的尺寸
+ const hostRect = this.getBoundingClientRect();
+
+ // 使用 offsetWidth/offsetHeight 获取实际尺寸
+ const screenWidth = screen.offsetWidth;
+ const screenHeight = screen.offsetHeight;
+ const hostHeight = this.offsetHeight;
+
+ this.initialRect = {
+ x: this.isFloating ? this.floatingRect.x : rect.left,
+ y: this.isFloating ? this.floatingRect.y : rect.top,
+ width: screenWidth,
+ height: screenHeight,
+ offsetY: this.dockedOffsetY,
+ offsetX: this.dockedOffsetX,
+ containerHeight: hostHeight,
+ containerTop: hostRect.top,
+ containerLeft: hostRect.left,
+ containerWidth: this.offsetWidth,
+ };
+
+ if (!this.isFloating) {
+ this.floatingRect = {
+ x: rect.left,
+ y: rect.top,
+ width: screenWidth,
+ height: screenHeight,
+ };
+
+ // 打印尺寸信息，用于调试
+ const canvas = this.shadowRoot?.querySelector(".screen canvas") as HTMLCanvasElement | null;
+ if (canvas) {
+ console.log("=== 切换到悬浮模式时的尺寸信息 ===");
+ console.log("screen 宽度:", screenWidth);
+ console.log("screen 高度:", screenHeight);
+ console.log("screen 比例:", screenWidth / screenHeight);
+ console.log("canvas 宽度:", canvas.clientWidth);
+ console.log("canvas 高度:", canvas.clientHeight);
+ console.log("canvas 比例:", canvas.clientWidth / canvas.clientHeight);
+ }
+ }
+ }
+
+ window.addEventListener("mousemove", this.handleDragMove, { capture: true, passive: false });
+ window.addEventListener("mouseup", this.handleDragEnd, { capture: true });
+ };
+
+ private handleDragMove = (e: MouseEvent) => {
+ if (!this.isDragging) {
+ return;
+ }
+
+ // 安全检查：如果鼠标按钮不再按下，就停止拖拽
+ if (e.buttons !== 1) {
+ this.cleanupDragListeners();
+ return;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ const dx = e.clientX - this.dragStart.x;
+ const dy = e.clientY - this.dragStart.y;
+
+ // 获取我们自己的左边界
+ const hostRect = this.getBoundingClientRect();
+
+ // 根据鼠标位置更新临时悬浮状态
+ if (e.clientX < hostRect.left) {
+ // 鼠标在左侧，临时切换到悬浮模式
+ if (!this.tempIsFloating) {
+ this.tempIsFloating = true;
+ // 计算新的悬浮窗口位置，保持鼠标相对于拖拽句柄的位置（点 A）
+ const newX = e.clientX - this.dragAnchor.x;
+ const newY = e.clientY - this.dragAnchor.y;
+
+ // 更新 floatingRect
+ this.floatingRect = {
+ x: newX,
+ y: newY,
+ width: this.initialRect.width,
+ height: this.initialRect.height,
+ };
+
+ // 更新 initialRect，使其基于新的悬浮位置
+ this.initialRect = {
+ ...this.initialRect,
+ x: newX,
+ y: newY,
+ };
+
+ // 更新 dragStart，使其从当前位置继续拖拽
+ this.dragStart = { x: e.clientX, y: e.clientY };
+ }
+ } else {
+ // 鼠标在右侧，临时切换回停靠模式
+ if (this.tempIsFloating) {
+ this.tempIsFloating = false;
+ // 重置停靠模式的偏移量
+ this.dockedOffsetY = this.initialRect.offsetY;
+ this.dockedOffsetX = 0;
+ // 更新 dragStart，使其从当前位置继续拖拽
+ this.dragStart = { x: e.clientX, y: e.clientY };
+ }
+ }
+
+ if (this.tempIsFloating) {
+ let newX = this.initialRect.x + dx;
+ let newY = this.initialRect.y + dy;
+
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+
+ // 限制悬浮窗口不超出屏幕边界
+ newX = Math.max(0, Math.min(newX, windowWidth - this.initialRect.width));
+ newY = Math.max(0, Math.min(newY, windowHeight - this.initialRect.height));
+
+ this.floatingRect = {
+ x: newX,
+ y: newY,
+ width: this.initialRect.width,
+ height: this.initialRect.height,
+ };
+ } else {
+ // 如果没有超过分割线，继续停靠模式的拖拽
+ // 每次都直接获取当前尺寸
+ const hostHeight = this.offsetHeight;
+ const screen = this.shadowRoot?.querySelector(".screen") as HTMLDivElement | null;
+ const screenHeight = screen?.offsetHeight || 0;
+
+ // 计算最高和最低不能超过多少
+ // 获取容器的实际可用高度（减去 padding）
+ const container = this.shadowRoot?.querySelector(".screen-container");
+ const style = container ? getComputedStyle(container) : null;
+ const paddingTop = style ? parseFloat(style.paddingTop) || 0 : 50;
+ const contentHeight = hostHeight - paddingTop;
+
+ // 当 screen 居中时，初始顶部位置是 (contentHeight - screenHeight) / 2
+ const centerTop = (contentHeight - screenHeight) / 2;
+
+ // 允许的最上偏移量 (offset = -centerTop)
+ // 目标位置是 PADDING_TOP
+ const maxUpOffset = -centerTop;
+
+ // 允许的最下偏移量 (offset = centerTop)
+ // 保持原来的逻辑，底部贴合容器底部
+ const maxDownOffset = centerTop;
+
+ let newOffsetY = this.initialRect.offsetY + dy;
+
+ // 使用计算出来的边界限制
+ newOffsetY = Math.max(maxUpOffset, Math.min(newOffsetY, maxDownOffset));
+
+ this.dockedOffsetY = newOffsetY;
+
+ // 禁止左右移动
+ this.dockedOffsetX = 0;
+ }
+ };
+
+ private cleanupDragListeners = () => {
+ this.isDragging = false;
+
+ // 移除拖拽过程中添加的类，恢复 pointer-events
+ const screen = this.shadowRoot?.querySelector(".screen") as HTMLDivElement | null;
+ if (screen) {
+ screen.classList.remove("dragging");
+ }
+
+ try {
+ window.removeEventListener("mousemove", this.handleDragMove, { capture: true });
+ window.removeEventListener("mouseup", this.handleDragEnd, { capture: true });
+ } catch (e) {
+ console.error("Error removing drag event listeners:", e);
+ }
+ };
+
+ private handleDragEnd = (e: MouseEvent) => {
+ // 根据松手位置决定是否永久切换到悬浮模式
+ const hostRect = this.getBoundingClientRect();
+ const isDroppingInDockArea = e.clientX >= hostRect.left;
+
+ if (!isDroppingInDockArea) {
+ // 在左侧（悬浮区域）松手
+ if (!this.isFloating) {
+ // 原本是停靠，现在变悬浮 -> 触发 float
+ this.isFloating = true;
+ this.dispatchEvent(new CustomEvent("float", { bubbles: true, composed: true }));
+ }
+ } else {
+ // 在右侧（停靠区域）松手
+ if (this.isFloating) {
+ // 原本是悬浮，现在变停靠 -> 触发 dock
+ this.isFloating = false;
+ this.dockedOffsetX = 0;
+ this.dispatchEvent(new CustomEvent("dock", { bubbles: true, composed: true }));
+ } else {
+ // 原本是停靠，现在还是停靠 -> 只是调整了垂直位置，或者是点击
+ // 不需要触发 dock 事件，以免重置宽度
+ this.isFloating = false;
+ this.dockedOffsetX = 0;
+ }
+ }
+
+ this.cleanupDragListeners();
+ };
+
+ private cleanupResizeListeners = () => {
+ this.isResizing = false;
+ try {
+ window.removeEventListener("mousemove", this.handleResizeMove);
+ window.removeEventListener("mouseup", this.handleResizeEnd);
+ } catch (e) {
+ console.error("Error removing resize event listeners:", e);
+ }
+ };
+
+ private handleResizeStart = (e: MouseEvent, edge: string) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // 先清理旧的监听器，防止重复添加
+ this.cleanupResizeListeners();
+
+ this.isResizing = true;
+ this.resizeEdge = edge;
+ this.dragStart = { x: e.clientX, y: e.clientY };
+
+ // 每次开始缩放时，获取最新的 canvas 比例
+ const canvas = this.shadowRoot?.querySelector(".screen canvas") as HTMLCanvasElement | null;
+ if (canvas && canvas.clientWidth > 0 && canvas.clientHeight > 0) {
+ this.canvasRatio = canvas.clientWidth / canvas.clientHeight;
+ }
+
+ this.initialRect = {
+ x: this.floatingRect.x,
+ y: this.floatingRect.y,
+ width: this.floatingRect.width,
+ height: this.floatingRect.height,
+ offsetY: 0,
+ offsetX: 0,
+ containerHeight: 0,
+ containerTop: 0,
+ containerLeft: 0,
+ containerWidth: 0,
+ };
+ this.aspectRatio = this.floatingRect.width / this.floatingRect.height;
+
+ window.addEventListener("mousemove", this.handleResizeMove);
+ window.addEventListener("mouseup", this.handleResizeEnd);
+ };
+
+ private handleResizeMove = (e: MouseEvent) => {
+ if (!this.isResizing) {
+ return;
+ }
+
+ // 安全检查：如果鼠标按钮不再按下，就停止调整大小
+ if (e.buttons !== 1) {
+ this.cleanupResizeListeners();
+ return;
+ }
+
+ e.preventDefault();
+
+ const dx = e.clientX - this.dragStart.x;
+ const dy = e.clientY - this.dragStart.y;
+
+ // 考虑到窗口有边框和标题栏，实际的 canvas 内容区域要减去这些 padding
+ // 左右 padding: 5.4px * 2 = 10.8px
+ // 上下 padding: 32.4px (标题栏) + 5.4px (底边) = 37.8px
+ const PADDING_X = 10.8;
+ const PADDING_Y = 37.8;
+
+ let { x, y, width, height } = this.initialRect;
+
+ // 1. 先计算出用户拖拽后的预期宽高
+ if (this.resizeEdge.includes("right")) {
+ width += dx;
+ }
+ if (this.resizeEdge.includes("left")) {
+ x += dx;
+ width -= dx;
+ }
+ if (this.resizeEdge.includes("bottom")) {
+ height += dy;
+ }
+ if (this.resizeEdge.includes("top")) {
+ y += dy;
+ height -= dy;
+ }
+
+ // 2. 根据 canvas 的比例强制修正窗口尺寸，确保窗口能仅仅贴合 VNC
+ let canvasW = width - PADDING_X;
+ let canvasH = height - PADDING_Y;
+
+ if (this.resizeEdge === "top" || this.resizeEdge === "bottom") {
+ // 如果只拖拽上下边，以高度为基准计算宽度
+ canvasW = canvasH * this.canvasRatio;
+ width = canvasW + PADDING_X;
+ if (this.resizeEdge.includes("left")) {
+ x = this.initialRect.x + (this.initialRect.width - width);
+ }
+ } else {
+ // 左右边或者对角线，统一以宽度为基准计算高度
+ canvasH = canvasW / this.canvasRatio;
+ height = canvasH + PADDING_Y;
+ if (this.resizeEdge.includes("top")) {
+ y = this.initialRect.y + (this.initialRect.height - height);
+ }
+ }
+
+ // 3. 最小尺寸限制
+ if (width < 200) {
+ width = 200;
+ canvasW = width - PADDING_X;
+ canvasH = canvasW / this.canvasRatio;
+ height = canvasH + PADDING_Y;
+ if (this.resizeEdge.includes("left")) {
+ x = this.initialRect.x + (this.initialRect.width - width);
+ }
+ if (this.resizeEdge.includes("top")) {
+ y = this.initialRect.y + (this.initialRect.height - height);
+ }
+ }
+ // 注意：这里不再单独限制 height，因为 height 已经和 width 绑定了
+
+ this.floatingRect = { x, y, width, height };
+ };
+
+ private handleResizeEnd = () => {
+ this.cleanupResizeListeners();
+ };
+
+ private handleResize = () => {
+ // No-op for image
+ };
+
+ private toggleFullscreen = () => {
+ const container = this.shadowRoot?.querySelector(".screen-container");
+ if (container) {
+ void (container as HTMLElement).requestFullscreen?.();
+ }
+ };
+
+ private handleWindowBlur = () => {
+ this.cleanupDragListeners();
+ this.cleanupResizeListeners();
+ };
+
+ firstUpdated() {
+ window.addEventListener("resize", this.handleResize);
+ window.addEventListener("blur", this.handleWindowBlur);
+ this.setupResizeObserver();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener("resize", this.handleResize);
+ window.removeEventListener("blur", this.handleWindowBlur);
+ this.cleanupDragListeners();
+ this.cleanupResizeListeners();
+ this.cleanupResizeObserver();
+ }
+}
diff --git a/ui/src/ui/storage.node.test.ts b/ui/src/ui/storage.node.test.ts
index 2155758fe97..11c5f1ff3fd 100644
--- a/ui/src/ui/storage.node.test.ts
+++ b/ui/src/ui/storage.node.test.ts
@@ -134,6 +134,8 @@ describe("loadSettings default gateway URL derivation", () => {
navWidth: 220,
navGroupsCollapsed: {},
borderRadius: 50,
+ vncTarget: "localhost:5900",
+ vncWsUrl: "wss://gateway.example:8443/api/debug-vnc",
sessionsByGateway: {
"wss://gateway.example:8443/openclaw": {
sessionKey: "agent",
@@ -250,6 +252,8 @@ describe("loadSettings default gateway URL derivation", () => {
navWidth: 220,
navGroupsCollapsed: {},
borderRadius: 50,
+ vncTarget: "localhost:5900",
+ vncWsUrl: "wss://gateway.example:8443/api/debug-vnc",
});
expect(loadSettings()).toMatchObject({
gatewayUrl: gwUrl,
@@ -269,6 +273,8 @@ describe("loadSettings default gateway URL derivation", () => {
navWidth: 220,
navGroupsCollapsed: {},
borderRadius: 50,
+ vncTarget: "localhost:5900",
+ vncWsUrl: "wss://gateway.example:8443/api/debug-vnc",
sessionsByGateway: {
[gwUrl]: {
sessionKey: "main",
diff --git a/ui/src/ui/storage.ts b/ui/src/ui/storage.ts
index 8ec63060682..77f268aa355 100644
--- a/ui/src/ui/storage.ts
+++ b/ui/src/ui/storage.ts
@@ -194,10 +194,7 @@ export function loadSettings(): UiSettings {
navCollapsed: false,
navWidth: 220,
navGroupsCollapsed: {},
- vncWsUrl:
- typeof location !== "undefined"
- ? `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/vnc`
- : "ws://localhost:18789/vnc",
+ vncWsUrl: `${defaultUrl.replace(/\/$/, "")}/api/debug-vnc`,
vncTarget: "localhost:5900",
borderRadius: 50,
};
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 7804f369740..e5a525f9ab7 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -1,7 +1,6 @@
import path from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
-import { vncProxyPlugin } from "./vnc-proxy-plugin.ts";
const here = path.dirname(fileURLToPath(import.meta.url));
@@ -41,7 +40,6 @@ export default defineConfig(() => {
strictPort: true,
},
plugins: [
- vncProxyPlugin(),
{
name: "control-ui-dev-stubs",
configureServer(server) {
+
+ ${
+ !displayFloating
+ ? html`
+
+ `
+ : null
+ }
+
+
+
+ 
+
+ ${
+ displayFloating
+ ? html`
+
+ this.handleResizeStart(e, "top")}>
+ this.handleResizeStart(e, "bottom")}>
+ this.handleResizeStart(e, "left")}>
+ this.handleResizeStart(e, "right")}>
+ this.handleResizeStart(e, "top-left")}>
+ this.handleResizeStart(e, "top-right")}>
+ this.handleResizeStart(e, "bottom-left")}>
+ this.handleResizeStart(e, "bottom-right")}>
+ `
+ : null
+ }
+
+
+
+
+
+