From 735886ba13b5731ecd2859606c6044dba48ed232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E4=B8=80=E5=AF=B0?= Date: Fri, 13 Mar 2026 18:38:05 +0800 Subject: [PATCH] config on overview --- ui/src/ui/app-render.ts | 4 +- ui/src/ui/components/claw-computer-panel.ts | 20 +++++-- ui/src/ui/storage.ts | 11 ++++ ui/src/ui/views/overview.ts | 60 +++++++++++++++------ 4 files changed, 74 insertions(+), 21 deletions(-) diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts index bfe010d9c68..dab71302dea 100644 --- a/ui/src/ui/app-render.ts +++ b/ui/src/ui/app-render.ts @@ -1472,8 +1472,8 @@ export function renderApp(state: AppViewState) { ` diff --git a/ui/src/ui/components/claw-computer-panel.ts b/ui/src/ui/components/claw-computer-panel.ts index 6a64707366a..c9ab8b83212 100644 --- a/ui/src/ui/components/claw-computer-panel.ts +++ b/ui/src/ui/components/claw-computer-panel.ts @@ -2,8 +2,9 @@ import RFB from "@novnc/novnc"; // ui/src/ui/components/claw-computer-panel.ts import { LitElement, html, css } from "lit"; -import { customElement, state } from "lit/decorators.js"; +import { customElement, state, property } from "lit/decorators.js"; import { createRef, ref, Ref } from "lit/directives/ref.js"; +// @ts-ignore - noVNC types are not available // Compatible with both .default and non-.default versions // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -21,13 +22,16 @@ interface RFBInstance { @customElement("claw-computer-panel") export class ClawComputerPanel extends LitElement { + @property() vncUrl = "ws://localhost:8081"; + @property() password = ""; + @state() status = "等待連接..."; @state() isConnected = false; @state() isFitted = true; - @state() password = ""; private rfb: RFBInstance | null = null; private screenRef: Ref = createRef(); + private autoConnectAttempted = false; static styles = css` :host { @@ -120,7 +124,7 @@ export class ClawComputerPanel extends LitElement {

noVNC - 自動調整版（穩定無錯誤）

- ws://localhost:8081（已轉發到你的 10.75.171.0:25900） + ${this.vncUrl}（已轉發到你的 10.75.171.0:25900）

@@ -152,7 +156,7 @@ export class ClawComputerPanel extends LitElement { } private connect = async () => { - const url = "ws://localhost:8081"; + const url = this.vncUrl || "ws://localhost:8081"; if (this.rfb) { this.rfb.disconnect(); } @@ -243,6 +247,14 @@ export class ClawComputerPanel extends LitElement { firstUpdated() { window.addEventListener("resize", this.handleResize); + + // Auto-connect if URL is configured + if (this.vncUrl) { + // Use setTimeout to ensure DOM is fully ready and to allow UI to render first + setTimeout(() => { + void this.connect(); + }, 100); + } } disconnectedCallback() { diff --git a/ui/src/ui/storage.ts b/ui/src/ui/storage.ts index 4a46b8d0703..8da8fe27c60 100644 --- a/ui/src/ui/storage.ts +++ b/ui/src/ui/storage.ts @@ -22,6 +22,9 @@ export type UiSettings = { navWidth: number; // Sidebar width when expanded (240–400px) navGroupsCollapsed: Record; // Which nav groups are collapsed locale?: string; + vncWsUrl?: string; + vncPassword?: string; + vncTarget?: string; }; function isViteDevPage(): boolean { @@ -135,6 +138,8 @@ export function loadSettings(): UiSettings { navCollapsed: false, navWidth: 220, navGroupsCollapsed: {}, + vncWsUrl: "ws://localhost:8081", + vncTarget: "10.75.171.25900", }; try { @@ -190,6 +195,9 @@ export function loadSettings(): UiSettings { ? parsed.navGroupsCollapsed : defaults.navGroupsCollapsed, locale: isSupportedLocale(parsed.locale) ? parsed.locale : undefined, + vncWsUrl: typeof parsed.vncWsUrl === "string" ? parsed.vncWsUrl : defaults.vncWsUrl, + vncPassword: typeof parsed.vncPassword === "string" ? parsed.vncPassword : undefined, + vncTarget: typeof parsed.vncTarget === "string" ? parsed.vncTarget : defaults.vncTarget, }; if ("token" in parsed) { persistSettings(settings); @@ -219,6 +227,9 @@ function persistSettings(next: UiSettings) { navWidth: next.navWidth, navGroupsCollapsed: next.navGroupsCollapsed, ...(next.locale ? { locale: next.locale } : {}), + vncWsUrl: next.vncWsUrl, + vncPassword: next.vncPassword, + vncTarget: next.vncTarget, }; localStorage.setItem(KEY, JSON.stringify(persisted)); } diff --git a/ui/src/ui/views/overview.ts b/ui/src/ui/views/overview.ts index ed8ef6fb740..8bbca92f099 100644 --- a/ui/src/ui/views/overview.ts +++ b/ui/src/ui/views/overview.ts @@ -299,24 +299,13 @@ export function renderOverview(props: OverviewProps) {
-
- - - ${ - isTrustedProxy ? t("overview.access.trustedProxy") : t("overview.access.connectHint") - } -
${ !props.connected ? html` -