github/crossdesk-web-client
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI修改

Browse Source
This commit is contained in:
yexuejc
2026-03-04 20:56:12 +08:00
parent 8a8ef9d3fd
commit db3ed566e1
3 changed files with 162 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -53,6 +53,17 @@
</div>
</div>
<form>
<!-- Server configuration inputs (hidden by default) -->
<div id="server-config-container" style="display: none">
<div class="option">
<label for="signaling-server">服务器:</label>
<input id="signaling-server" type="text" value="" autocomplete="off" placeholder="例：192.168.0.107:33333" />
</div>
<div class="option">
<label for="stun-turn-server">STUN/TURN:</label>
<input id="stun-turn-server" type="text" value="" autocomplete="off" placeholder="例：192.168.0.107:33334" />
</div>
</div>
<div class="option">
<label for="transmission-id">远程设备 ID:</label>
<input id="transmission-id" type="text" value="" autocomplete="off" />
@@ -62,8 +73,11 @@
<input id="transmission-pwd" type="password" value="" autocomplete="current-password" />
</div>
<div class="actions">
<button id="connect" type="button" disabled>连接</button>
<button id="disconnect" type="button" style="display: none">断开连接</button>
<div class="actions-left">
<button id="connect" type="button" disabled>连接</button>
<button id="disconnect" type="button" style="display: none">断开连接</button>
</div>
<button id="server-config-btn" type="button" class="server-config-btn">服务器配置</button>
</div>
</form>
</div>
@@ -175,8 +189,8 @@
<button id="virtual-right-btn" class="virtual-mouse-btn">
右键
</button>
</div>
</div>
</div>
</div>
<!-- Virtual keyboard -->
<div id="virtual-keyboard" class="virtual-keyboard" style="display: none">
@@ -259,7 +273,8 @@
<button class="keyboard-key" data-keycode="38">↑</button>
<button class="keyboard-key" data-keycode="40">↓</button>
<button class="keyboard-key" data-keycode="39">→</button>
</div>
</div>
</div>
</div>
</div>
</div>

28
styles.css
View File

@@ -113,7 +113,7 @@ body {
border-radius: 24px; /* Same radius as status bar panel */
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
width: clamp(280px, 85%, 320px);
width: clamp(400px, 85%, 320px);
position: relative;
z-index: 2;
/* Disable text selection and copying */
@@ -348,6 +348,15 @@ body {
flex-wrap: wrap;
/* Re-enable interaction for buttons */
pointer-events: auto;
align-items: center;
width: 100%;
justify-content: space-between;
}
.actions-left {
display: flex;
gap: 10px;
align-items: center;
}
button {
@@ -1366,3 +1375,20 @@ select:focus {
flex: 1;
}
}
/* Server configuration button */
.server-config-btn {
background-color: rgba(0, 0, 0, 0.1);
color: #333;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 16px;
min-width: auto;
margin-left: auto;
margin-right: 20px;
}
.server-config-btn:hover:not(:disabled) {
background-color: rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.3);
}

118
web_client.js
View File

@@ -18,14 +18,19 @@ const elements = {
connectionStatusIndicator: document.getElementById("connection-status-indicator"),
connectedStatusLed: document.getElementById("connected-status-led"),
disconnectConnected: document.getElementById("disconnect-connected"),
// Server configuration elements
serverConfigBtn: document.getElementById("server-config-btn"),
serverConfigContainer: document.getElementById("server-config-container"),
signalingServerInput: document.getElementById("signaling-server"),
stunTurnServerInput: document.getElementById("stun-turn-server"),
};
// Config section (can be overridden by setting window.CROSSDESK_CONFIG before this script runs)
const DEFAULT_CONFIG = {
signalingUrl: "wss://api.crossdesk.cn:9099",
signalingUrl: "wss://192.168.0.107:33333",
iceServers: [
{ urls: ["stun:api.crossdesk.cn:3478"] },
{ urls: ["turn:api.crossdesk.cn:3478"], username: "crossdesk", credential: "crossdeskpw" },
{ urls: ["stun:192.168.0.107:33334"] },
{ urls: ["turn:192.168.0.107:33334"], username: "crossdesk", credential: "crossdeskpw" },
],
heartbeatIntervalMs: 3000,
heartbeatTimeoutMs: 10000,
@@ -34,6 +39,107 @@ const DEFAULT_CONFIG = {
};
const CONFIG = Object.assign({}, DEFAULT_CONFIG, window.CROSSDESK_CONFIG || {});
// Function to extract host:port from signaling URL
function extractSignalingHostPort() {
try {
const url = new URL(CONFIG.signalingUrl);
return url.host; // Returns "host:port"
} catch (e) {
return "192.168.0.107:33333"; // Default fallback
}
}
// Function to extract STUN/TURN server host:port
function extractStunTurnHostPort() {
if (CONFIG.iceServers && CONFIG.iceServers.length > 0) {
const firstServer = CONFIG.iceServers[0];
if (firstServer.urls) {
const urls = Array.isArray(firstServer.urls) ? firstServer.urls : [firstServer.urls];
if (urls.length > 0) {
// Extract host:port from URL like "stun:192.168.0.107:33334"
const urlStr = urls[0];
const match = urlStr.match(/stun:(.+):([0-9]+)/) || urlStr.match(/turn:(.+):([0-9]+)/);
if (match) {
return `${match[1]}:${match[2]}`;
}
}
}
}
return "192.168.0.107:33334"; // Default fallback
}
// Initialize server config inputs with current values
function initServerConfigInputs() {
if (elements.signalingServerInput) {
elements.signalingServerInput.value = extractSignalingHostPort();
}
if (elements.stunTurnServerInput) {
elements.stunTurnServerInput.value = extractStunTurnHostPort();
}
}
// Toggle server configuration visibility
function toggleServerConfig() {
if (!elements.serverConfigContainer) return;
const isHidden = elements.serverConfigContainer.style.display === "none";
if (isHidden) {
// Show server config
initServerConfigInputs();
elements.serverConfigContainer.style.display = "block";
} else {
// Hide server config
elements.serverConfigContainer.style.display = "none";
}
}
// Function to update server configuration
function updateServerConfig(signalingHostPort, stunTurnHostPort) {
if (!signalingHostPort || !stunTurnHostPort) {
return false;
}
// Update signaling URL
CONFIG.signalingUrl = `wss://${signalingHostPort}`;
// Update ICE servers
CONFIG.iceServers = [
{ urls: [`stun:${stunTurnHostPort}`] },
{ urls: [`turn:${stunTurnHostPort}`], username: "crossdesk", credential: "crossdeskpw" },
];
// Update global config
window.CROSSDESK_CONFIG = CONFIG;
return true;
}
// Save server configuration
function saveServerConfig() {
if (!elements.signalingServerInput || !elements.stunTurnServerInput) return;
const signalingHostPort = elements.signalingServerInput.value.trim();
const stunTurnHostPort = elements.stunTurnServerInput.value.trim();
if (!signalingHostPort || !stunTurnHostPort) {
alert("请填写完整的服务器地址");
return;
}
const success = updateServerConfig(signalingHostPort, stunTurnHostPort);
if (success) {
// Hide server config container
if (elements.serverConfigContainer) {
elements.serverConfigContainer.style.display = "none";
}
// Reload the page to apply new configuration
setTimeout(() => {
window.location.reload();
}, 500);
}
}
const control = window.CrossDeskControl;
let pc = null;
let clientId = "000000";
@@ -377,6 +483,7 @@ function sendLeaveRequest() {
function connect() {
if (!elements.connectBtn || !elements.disconnectBtn || !elements.media) return;
saveServerConfig()
elements.connectBtn.style.display = "none";
elements.disconnectBtn.style.display = "inline-block";
elements.media.style.display = "flex";
@@ -599,6 +706,11 @@ if (elements.displaySelect) {
elements.displaySelect.addEventListener("change", setDisplayId);
}
// Server configuration event listeners
if (elements.serverConfigBtn) {
elements.serverConfigBtn.addEventListener("click", toggleServerConfig);
}
// Panel minimize/maximize and drag functionality
let panelHideTimer = null;
const PANEL_HIDE_DELAY = 3000; // 3 seconds