diff --git a/ui/src/ui/components/claw-computer-panel.ts b/ui/src/ui/components/claw-computer-panel.ts index c9ab8b83212..5e009a0bf5d 100644 --- a/ui/src/ui/components/claw-computer-panel.ts +++ b/ui/src/ui/components/claw-computer-panel.ts @@ -45,111 +45,44 @@ export class ClawComputerPanel extends LitElement { height: 100%; display: flex; flex-direction: column; - padding: 16px; - } - h2 { - text-align: center; - margin: 0 0 16px 0; - color: #ddd; - } - .controls { - background: #1a1a1a; - padding: 16px; - border-radius: 8px; - margin-bottom: 16px; - border: 1px solid #333; - } - label { - display: block; - margin-bottom: 6px; - font-weight: 500; - } - input { - width: 100%; - padding: 10px; - background: #222; - border: 1px solid #444; - color: #eee; - border-radius: 6px; - margin-bottom: 12px; - } - .btn-group { - display: flex; - gap: 8px; - margin: 12px 0; - flex-wrap: wrap; - } - button { - padding: 10px 16px; - background: #0066cc; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: bold; - } - button:hover:not(:disabled) { - background: #007fff; - } - button:disabled { - opacity: 0.5; - cursor: not-allowed; - } - .active { - background: #0088ff !important; + position: relative; } .screen-container { flex: 1; - min-height: 400px; + width: 100%; + height: 100%; background: #000; - border: 2px solid #444; - border-radius: 8px; overflow: hidden; position: relative; + display: flex; + align-items: center; + justify-content: center; } .screen { width: 100%; height: 100%; } - .status { - margin-top: 8px; - text-align: center; - font-weight: bold; - min-height: 24px; + .status-overlay { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.7); + padding: 16px 24px; + border-radius: 8px; + color: #fff; + font-weight: 500; + pointer-events: none; + z-index: 10; } `; render() { return html`
-

noVNC - 自動調整版(穩定無錯誤)

-

- ${this.vncUrl}(已轉發到你的 10.75.171.0:25900) -

-
- - { - this.password = (e.target as HTMLInputElement).value; - }} - @keydown=${this.handlePasswordKeydown} /> -
- - - -
-
- 視窗縮放模式: - - -
-
- ${this.status} -
-
+ ${!this.isConnected ? html`
${this.status}
` : null}
-
+
`; diff --git a/ui/src/ui/components/resizable-divider.ts b/ui/src/ui/components/resizable-divider.ts index 74e421596ac..9868d437313 100644 --- a/ui/src/ui/components/resizable-divider.ts +++ b/ui/src/ui/components/resizable-divider.ts @@ -70,6 +70,18 @@ export class ResizableDivider extends LitElement { this.startWidth = this.initialWidth; this.classList.add("dragging"); + // Add a global overlay to prevent iframe/other elements from capturing mouse events + const overlay = document.createElement("div"); + overlay.id = "resize-overlay"; + overlay.style.position = "fixed"; + overlay.style.top = "0"; + overlay.style.left = "0"; + overlay.style.width = "100%"; + overlay.style.height = "100%"; + overlay.style.zIndex = "9999"; + overlay.style.cursor = "col-resize"; + document.body.appendChild(overlay); + document.addEventListener("mousemove", this.handleMouseMove); document.addEventListener("mouseup", this.handleMouseUp); @@ -127,6 +139,11 @@ export class ResizableDivider extends LitElement { this.isDragging = false; this.classList.remove("dragging"); + const overlay = document.getElementById("resize-overlay"); + if (overlay) { + document.body.removeChild(overlay); + } + document.removeEventListener("mousemove", this.handleMouseMove); document.removeEventListener("mouseup", this.handleMouseUp); };