diff --git a/.env b/.env index 9b757ea..b32c4ff 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ # local/docker -DEPLOYMENT_MODE=docker +DEPLOYMENT_MODE=local RDP_SERVICE_URL_DOCKER=ws://rdp:8081 diff --git a/packages/frontend/src/components/RemoteDesktopModal.vue b/packages/frontend/src/components/RemoteDesktopModal.vue index 025cea7..17b541a 100644 --- a/packages/frontend/src/components/RemoteDesktopModal.vue +++ b/packages/frontend/src/components/RemoteDesktopModal.vue @@ -203,20 +203,50 @@ const setupInputListeners = () => { }; displayEl.addEventListener('click', handleRdpDisplayClick); + + // 鼠标进入 RDP 区域时隐藏本地光标 + const handleMouseEnter = () => { + if (displayEl) displayEl.style.cursor = 'none'; + }; + // 鼠标离开 RDP 区域时恢复本地光标 + const handleMouseLeave = () => { + if (displayEl) displayEl.style.cursor = 'default'; + }; + displayEl.addEventListener('mouseenter', handleMouseEnter); + displayEl.addEventListener('mouseleave', handleMouseLeave); + + + // @ts-ignore mouse.value = new Guacamole.Mouse(displayEl); + + const display = guacClient.value.getDisplay(); + // 启用 Guacamole 的内置光标渲染 + display.showCursor(true); + + + // 提高 Guacamole 光标图层的 z-index + const cursorLayer = display.getCursorLayer(); // 获取光标图层 + if (cursorLayer) { + const cursorElement = cursorLayer.getElement(); // 获取光标图层的 DOM 元素 + if (cursorElement) { + cursorElement.style.zIndex = '1000'; // 设置 DOM 元素的 z-index + console.log('[RDP Modal] Set cursor layer element z-index to 1000.'); + } else { + console.warn('[RDP Modal] Could not get cursor layer element to set z-index.'); + } + } else { + console.warn('[RDP Modal] Could not get cursor layer to set z-index.'); + } + + + // @ts-ignore mouse.value.onmousedown = mouse.value.onmouseup = mouse.value.onmousemove = (mouseState: any) => { if (guacClient.value) { guacClient.value.sendMouseState(mouseState); } }; - // @ts-ignore - mouse.value.onmouseup = mouse.value.onmousemove = (mouseState: any) => { - if (guacClient.value) { - guacClient.value.sendMouseState(mouseState); - } - }; // @ts-ignore keyboard.value = new Guacamole.Keyboard(displayEl); // 将监听器附加到 RDP 显示元素 @@ -235,19 +265,32 @@ const setupInputListeners = () => { }; } catch (inputError) { + console.error("Error setting up input listeners:", inputError); // 添加错误日志 statusMessage.value = t('remoteDesktopModal.errors.inputError'); } }; const removeInputListeners = () => { + // 恢复光标并尝试移除监听器 + if (guacClient.value) { + try { + const displayEl = guacClient.value.getDisplay()?.getElement(); + if (displayEl) { + // 恢复默认光标样式 + displayEl.style.cursor = 'default'; + } + } catch (e) { + console.warn("Could not reset cursor or remove listeners on display element during listener removal:", e); + } + } + + // 清理 Guacamole 的键盘和鼠标对象 if (keyboard.value) { keyboard.value.onkeydown = null; keyboard.value.onkeyup = null; - keyboard.value = null; // Guacamole 内部可能会处理移除监听器,但显式置 null 更好 + keyboard.value = null; } if (mouse.value) { - // Guacamole Mouse 对象没有明确的 'destroy' 或 'removeListeners' 方法 - // 我们需要确保事件处理器被移除 mouse.value.onmousedown = null; mouse.value.onmouseup = null; mouse.value.onmousemove = null;