update
This commit is contained in:
Baobhan Sith
Binary file not shown.
@@ -12,7 +12,7 @@
|
||||
"@types/multer": "^1.4.12",
|
||||
"@types/session-file-store": "^1.2.5",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"axios": "^1.8.4",
|
||||
"axios": "^1.9.0",
|
||||
"bcrypt": "^5.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"date-fns-tz": "^3.2.0",
|
||||
@@ -31,7 +31,6 @@
|
||||
"sqlite3": "^5.1.7",
|
||||
"ssh2": "^1.16.0",
|
||||
"uuid": "^11.1.0",
|
||||
"ws": "^8.18.1",
|
||||
"xterm": "^5.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -257,3 +257,102 @@ export const importConnections = async (req: Request, res: Response): Promise<vo
|
||||
}
|
||||
}
|
||||
};
|
||||
import axios from 'axios'; // +++ Import axios +++
|
||||
|
||||
// TODO: Make RDP backend URL configurable
|
||||
const RDP_BACKEND_API_BASE = process.env.RDP_BACKEND_API_BASE || 'http://localhost:9090';
|
||||
|
||||
/**
|
||||
* 获取 RDP 会话的 Guacamole 令牌 (通过调用 RDP 后端)
|
||||
* GET /api/v1/connections/:id/rdp-session
|
||||
*/
|
||||
export const getRdpSessionToken = async (req: Request, res: Response): Promise<void> => {
|
||||
try {
|
||||
const connectionId = parseInt(req.params.id, 10);
|
||||
if (isNaN(connectionId)) {
|
||||
res.status(400).json({ message: '无效的连接 ID。' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 1. 获取连接信息和解密后的凭证
|
||||
const connectionData = await ConnectionService.getConnectionWithDecryptedCredentials(connectionId);
|
||||
|
||||
if (!connectionData) {
|
||||
res.status(404).json({ message: '连接未找到。' });
|
||||
return;
|
||||
}
|
||||
|
||||
const { connection, decryptedPassword } = connectionData;
|
||||
|
||||
// 2. 验证连接类型是否为 RDP
|
||||
if (connection.type !== 'RDP') {
|
||||
res.status(400).json({ message: '此连接类型不是 RDP。' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. 验证 RDP 连接是否使用密码认证
|
||||
if (connection.auth_method !== 'password' || !decryptedPassword) {
|
||||
console.warn(`[Controller:getRdpSessionToken] RDP connection ${connectionId} does not use password auth or password decryption failed.`);
|
||||
res.status(400).json({ message: 'RDP 连接需要使用密码认证，或密码解密失败。' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 准备调用 RDP 后端的参数
|
||||
const rdpApiParams = new URLSearchParams({
|
||||
hostname: connection.host,
|
||||
port: connection.port.toString(),
|
||||
username: connection.username,
|
||||
password: decryptedPassword, // 使用解密后的密码
|
||||
// Add other RDP parameters from connection object if needed by rdp backend
|
||||
security: (connection as any).rdp_security || 'any',
|
||||
ignoreCert: String((connection as any).rdp_ignore_cert ?? true),
|
||||
});
|
||||
const rdpTokenUrl = `${RDP_BACKEND_API_BASE}/api/get-token?${rdpApiParams.toString()}`;
|
||||
|
||||
console.log(`[Controller:getRdpSessionToken] Calling RDP backend API: ${RDP_BACKEND_API_BASE}/api/get-token?...`);
|
||||
|
||||
// 5. 调用 RDP 后端 API 获取 Guacamole 令牌
|
||||
const rdpResponse = await axios.get<{ token: string }>(rdpTokenUrl, {
|
||||
timeout: 10000 // 设置 10 秒超时
|
||||
});
|
||||
|
||||
if (rdpResponse.status !== 200 || !rdpResponse.data?.token) {
|
||||
console.error(`[Controller:getRdpSessionToken] RDP backend API call failed or returned invalid data. Status: ${rdpResponse.status}`, rdpResponse.data);
|
||||
throw new Error('从 RDP 后端获取令牌失败。');
|
||||
}
|
||||
|
||||
const guacamoleToken = rdpResponse.data.token;
|
||||
console.log(`[Controller:getRdpSessionToken] Received Guacamole token from RDP backend for connection ${connectionId}`);
|
||||
|
||||
// 6. 将 Guacamole 令牌返回给前端
|
||||
res.status(200).json({ token: guacamoleToken });
|
||||
|
||||
} catch (error: any) {
|
||||
console.error(`Controller: 获取 RDP 会话令牌时发生错误 (ID: ${req.params.id}):`, error);
|
||||
|
||||
let statusCode = 500;
|
||||
let message = '获取 RDP 会话令牌时发生内部服务器错误。';
|
||||
|
||||
if (axios.isAxiosError(error)) {
|
||||
message = '调用 RDP 后端服务时出错。';
|
||||
if (error.response) {
|
||||
// RDP 后端返回了错误响应
|
||||
console.error('[Controller:getRdpSessionToken] RDP backend error response:', error.response.data);
|
||||
message += ` (状态: ${error.response.status})`;
|
||||
statusCode = error.response.status >= 500 ? 502 : 400; // Bad Gateway or Bad Request
|
||||
} else if (error.request) {
|
||||
// 请求已发出但没有收到响应 (网络问题、超时)
|
||||
console.error('[Controller:getRdpSessionToken] No response from RDP backend.');
|
||||
message += ' (无法连接或超时)';
|
||||
statusCode = 504; // Gateway Timeout
|
||||
} else {
|
||||
// 设置请求时发生错误
|
||||
console.error('[Controller:getRdpSessionToken] Axios request setup error:', error.message);
|
||||
}
|
||||
} else if (error.message.includes('解密失败')) {
|
||||
message = '获取 RDP 会话令牌时发生内部错误（凭证处理失败）。';
|
||||
}
|
||||
|
||||
res.status(statusCode).json({ message });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -10,7 +10,8 @@ import {
|
||||
testConnection,
|
||||
testUnsavedConnection,
|
||||
exportConnections,
|
||||
importConnections
|
||||
importConnections, // <-- Add comma here
|
||||
getRdpSessionToken // +++ Import getRdpSessionToken +++
|
||||
} from './connections.controller';
|
||||
|
||||
const router = Router();
|
||||
@@ -76,4 +77,6 @@ router.post('/:id/test', testConnection);
|
||||
// POST /api/v1/connections/test-unsaved - 测试未保存的连接信息
|
||||
router.post('/test-unsaved', testUnsavedConnection);
|
||||
|
||||
// Removed GET /:id/rdp-token route
|
||||
|
||||
export default router;
|
||||
|
||||
@@ -56,7 +56,24 @@ const initializeEnvironment = async () => {
|
||||
keysGenerated = true;
|
||||
}
|
||||
|
||||
// 4. 如果生成了新密钥，则追加到 .env 文件
|
||||
// 4. 检查 GUACD_HOST 和 GUACD_PORT
|
||||
if (!process.env.GUACD_HOST) {
|
||||
console.warn('[ENV Init] GUACD_HOST 未设置，将使用默认值 "localhost"');
|
||||
process.env.GUACD_HOST = 'localhost';
|
||||
// Optionally add to keysToAppend if you want to save the default
|
||||
// keysToAppend += `\nGUACD_HOST=localhost`;
|
||||
// keysGenerated = true; // Mark if you want to save
|
||||
}
|
||||
if (!process.env.GUACD_PORT) {
|
||||
console.warn('[ENV Init] GUACD_PORT 未设置，将使用默认值 "4822"');
|
||||
process.env.GUACD_PORT = '4822';
|
||||
// Optionally add to keysToAppend
|
||||
// keysToAppend += `\nGUACD_PORT=4822`;
|
||||
// keysGenerated = true; // Mark if you want to save
|
||||
}
|
||||
|
||||
|
||||
// 5. 如果生成了新密钥或添加了默认值，则追加到 .env 文件
|
||||
if (keysGenerated) {
|
||||
try {
|
||||
// 确保追加前有换行符 (如果文件非空)
|
||||
@@ -88,6 +105,20 @@ const initializeEnvironment = async () => {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 6. 最终检查 (包括 Guacamole 相关)
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
if (!process.env.ENCRYPTION_KEY) {
|
||||
console.error('错误：生产环境中 ENCRYPTION_KEY 最终未能设置！');
|
||||
process.exit(1);
|
||||
}
|
||||
if (!process.env.SESSION_SECRET) {
|
||||
console.error('错误：生产环境中 SESSION_SECRET 最终未能设置！');
|
||||
process.exit(1);
|
||||
}
|
||||
// Guacd host/port are less critical to halt on, defaults might work
|
||||
}
|
||||
|
||||
};
|
||||
// --- 结束环境变量和密钥初始化 ---
|
||||
|
||||
@@ -193,7 +224,8 @@ const startServer = () => {
|
||||
|
||||
server.listen(port, () => {
|
||||
console.log(`后端服务器正在监听 http://localhost:${port}`);
|
||||
initializeWebSocket(server, sessionMiddleware as RequestHandler);
|
||||
initializeWebSocket(server, sessionMiddleware as RequestHandler); // Initialize existing WebSocket
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -271,5 +271,76 @@ export const deleteConnection = async (id: number): Promise<boolean> => {
|
||||
return deleted;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取连接信息（包含标签）以及解密后的凭证（如果适用）
|
||||
* @param id 连接 ID
|
||||
* @returns 包含 ConnectionWithTags 和解密后密码/密钥的对象，或 null
|
||||
*/
|
||||
export const getConnectionWithDecryptedCredentials = async (
|
||||
id: number
|
||||
): Promise<{ connection: ConnectionWithTags; decryptedPassword?: string; decryptedPrivateKey?: string; decryptedPassphrase?: string } | null> => {
|
||||
// 1. 获取完整的连接数据（包含加密字段）
|
||||
// Assuming findFullConnectionById exists and returns FullConnectionDbRow or null
|
||||
const fullConnectionDbRow = await ConnectionRepository.findFullConnectionById(id);
|
||||
if (!fullConnectionDbRow) {
|
||||
console.log(`[Service:getConnWithDecrypt] Connection not found for ID: ${id}`);
|
||||
return null;
|
||||
}
|
||||
// Convert DbRow to the stricter FullConnectionData type expected by the service/types file
|
||||
// Handle potential undefined by defaulting to null
|
||||
const fullConnection: FullConnectionData = {
|
||||
...fullConnectionDbRow,
|
||||
encrypted_password: fullConnectionDbRow.encrypted_password ?? null,
|
||||
encrypted_private_key: fullConnectionDbRow.encrypted_private_key ?? null,
|
||||
encrypted_passphrase: fullConnectionDbRow.encrypted_passphrase ?? null,
|
||||
// Ensure other fields match FullConnectionData if necessary
|
||||
// (Assuming FullConnectionDbRow includes all fields of FullConnectionData)
|
||||
};
|
||||
|
||||
// 2. 获取带标签的连接数据（用于返回给调用者）
|
||||
const connectionWithTags: ConnectionWithTags | null = await ConnectionRepository.findConnectionByIdWithTags(id);
|
||||
if (!connectionWithTags) {
|
||||
// This shouldn't happen if findFullConnectionById succeeded, but good practice to check
|
||||
console.error(`[Service:getConnWithDecrypt] Mismatch: Full connection found but tagged connection not found for ID: ${id}`);
|
||||
// Consider throwing an error or returning a specific error state
|
||||
return null;
|
||||
}
|
||||
|
||||
// 3. 解密凭证
|
||||
let decryptedPassword: string | undefined = undefined;
|
||||
let decryptedPrivateKey: string | undefined = undefined;
|
||||
let decryptedPassphrase: string | undefined = undefined;
|
||||
|
||||
try {
|
||||
// Decrypt password if method is 'password' and encrypted password exists
|
||||
if (fullConnection.auth_method === 'password' && fullConnection.encrypted_password) {
|
||||
decryptedPassword = decrypt(fullConnection.encrypted_password);
|
||||
}
|
||||
// Decrypt key and passphrase if method is 'key'
|
||||
else if (fullConnection.auth_method === 'key') {
|
||||
if (fullConnection.encrypted_private_key) {
|
||||
decryptedPrivateKey = decrypt(fullConnection.encrypted_private_key);
|
||||
}
|
||||
// Only decrypt passphrase if it exists
|
||||
if (fullConnection.encrypted_passphrase) {
|
||||
decryptedPassphrase = decrypt(fullConnection.encrypted_passphrase);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[Service:getConnWithDecrypt] Failed to decrypt credentials for connection ID ${id}:`, error);
|
||||
// Decide how to handle decryption errors. Throw? Return null password?
|
||||
// For now, we'll log and continue, returning undefined credentials.
|
||||
// Consider throwing an error if credentials are required but decryption fails.
|
||||
// Or return a specific error structure: return { error: 'Decryption failed' };
|
||||
}
|
||||
|
||||
console.log(`[Service:getConnWithDecrypt] Returning data for ID: ${id}, Auth Method: ${fullConnection.auth_method}`);
|
||||
return {
|
||||
connection: connectionWithTags,
|
||||
decryptedPassword,
|
||||
decryptedPrivateKey,
|
||||
decryptedPassphrase,
|
||||
};
|
||||
};
|
||||
// 注意：testConnection、importConnections、exportConnections 逻辑
|
||||
// 将分别移至 SshService 和 ImportExportService。
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
// This file is intentionally left blank as Guacamole logic is handled by the separate rdp package.
|
||||
@@ -15,6 +15,7 @@
|
||||
"@xterm/addon-search": "^0.15.0",
|
||||
"axios": "^1.8.4",
|
||||
"date-fns": "^4.1.0",
|
||||
"guacamole-common-js": "^1.5.0",
|
||||
"monaco-editor": "^0.52.2",
|
||||
"pinia": "^3.0.2",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
|
||||
@@ -1,61 +1,377 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
// @ts-ignore - guacamole-common-js lacks official types
|
||||
import Guacamole from 'guacamole-common-js';
|
||||
import apiClient from '../utils/apiClient'; // 假设 API 客户端路径
|
||||
import { ConnectionInfo } from '../stores/connections.store'; // 假设 ConnectionInfo 类型路径
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// Props (可以稍后添加，例如接收连接信息)
|
||||
// const props = defineProps<{
|
||||
// connection?: ConnectionInfo; // 假设有 ConnectionInfo 类型
|
||||
// }>();
|
||||
// --- Props ---
|
||||
const props = defineProps<{
|
||||
connection: ConnectionInfo | null; // 接收连接信息
|
||||
}>();
|
||||
|
||||
// Emits (用于通知父组件关闭模态框)
|
||||
// --- Emits ---
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
// --- State Refs ---
|
||||
const rdpDisplayRef = ref<HTMLDivElement | null>(null); // Guacamole 显示容器
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const guacClient = ref<any | null>(null); // Guacamole 客户端实例 (使用 any 因为类型缺失)
|
||||
const connectionStatus = ref<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected');
|
||||
const statusMessage = ref('');
|
||||
const keyboard = ref<any | null>(null); // Guacamole Keyboard instance
|
||||
const mouse = ref<any | null>(null); // Guacamole Mouse instance
|
||||
|
||||
// --- Configuration ---
|
||||
// Configuration for the separate RDP backend service
|
||||
// TODO: Make these configurable
|
||||
const RDP_BACKEND_API_BASE = 'http://localhost:9090'; // Default port for test-rdp/packages/rdp API
|
||||
const RDP_BACKEND_WEBSOCKET_URL = 'ws://localhost:8081'; // Default port for test-rdp/packages/rdp WebSocket
|
||||
|
||||
// --- Connection Logic ---
|
||||
const connectRdp = async () => {
|
||||
if (!props.connection || !rdpDisplayRef.value) {
|
||||
statusMessage.value = t('remoteDesktopModal.errors.missingInfo');
|
||||
connectionStatus.value = 'error';
|
||||
console.error('[RDP Modal] Connection info or display element missing.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 清理之前的显示内容
|
||||
while (rdpDisplayRef.value.firstChild) {
|
||||
rdpDisplayRef.value.removeChild(rdpDisplayRef.value.firstChild);
|
||||
}
|
||||
disconnectRdp(); // Ensure any previous connection is cleaned up
|
||||
|
||||
connectionStatus.value = 'connecting';
|
||||
statusMessage.value = t('remoteDesktopModal.status.fetchingToken');
|
||||
|
||||
try {
|
||||
// 1. 从独立的 RDP 后端获取 Token
|
||||
// WARNING: Sending credentials directly like this is insecure if the API is not properly secured (e.g., HTTPS, network isolation).
|
||||
// WARNING: props.connection likely does NOT contain the password. Using a placeholder.
|
||||
// You MUST implement a secure way to get the password here.
|
||||
const connectionParams = new URLSearchParams({
|
||||
hostname: props.connection.host,
|
||||
port: props.connection.port.toString(),
|
||||
username: props.connection.username,
|
||||
// !!! SECURITY RISK: Password should not be handled like this !!!
|
||||
// Replace this with a secure method (e.g., prompt user, fetch securely)
|
||||
password: (props.connection as any).password || 'PASSWORD_PLACEHOLDER', // Assuming password might exist, otherwise use placeholder
|
||||
security: (props.connection as any).rdp_security || 'any', // Use RDP specific fields if available
|
||||
ignoreCert: String((props.connection as any).rdp_ignore_cert ?? true),
|
||||
// Add other necessary params supported by the rdp backend API
|
||||
});
|
||||
const apiUrl = `${RDP_BACKEND_API_BASE}/api/get-token?${connectionParams.toString()}`;
|
||||
console.log(`[RDP Modal] Fetching token from RDP backend: ${RDP_BACKEND_API_BASE}/api/get-token?...`);
|
||||
|
||||
// Use fetch directly as apiClient might be configured for the main backend
|
||||
const response = await fetch(apiUrl);
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: 'Failed to parse error response' }));
|
||||
throw new Error(`RDP API Error (${response.status}): ${errorData.error || response.statusText}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
const token = data.token;
|
||||
if (!token) {
|
||||
throw new Error('Token not found in RDP API response');
|
||||
}
|
||||
console.log('[RDP Modal] Received token.');
|
||||
statusMessage.value = t('remoteDesktopModal.status.connectingWs');
|
||||
|
||||
// 2. 连接 WebSocket (to RDP backend's WebSocket server)
|
||||
const tunnelUrl = `${RDP_BACKEND_WEBSOCKET_URL}/?token=${encodeURIComponent(token)}`;
|
||||
console.log(`[RDP Modal] Connecting WebSocket to: ${RDP_BACKEND_WEBSOCKET_URL}/?token=...`);
|
||||
// @ts-ignore
|
||||
const tunnel = new Guacamole.WebSocketTunnel(tunnelUrl);
|
||||
|
||||
tunnel.onerror = (status: any) => {
|
||||
console.error("[RDP Modal Tunnel] Tunnel Error Status:", status);
|
||||
const errorMessage = status.message || 'Unknown tunnel error';
|
||||
const errorCode = status.code || 'N/A';
|
||||
statusMessage.value = `${t('remoteDesktopModal.errors.tunnelError')} (${errorCode}): ${errorMessage}`;
|
||||
connectionStatus.value = 'error';
|
||||
disconnectRdp(); // Clean up on tunnel error
|
||||
};
|
||||
|
||||
// 3. 创建 Guacamole 客户端
|
||||
// @ts-ignore
|
||||
guacClient.value = new Guacamole.Client(tunnel);
|
||||
|
||||
// 4. 添加显示元素到 DOM
|
||||
rdpDisplayRef.value.appendChild(guacClient.value.getDisplay().getElement());
|
||||
|
||||
// 5. 处理客户端状态变化
|
||||
guacClient.value.onstatechange = (state: number) => {
|
||||
console.log("[RDP Modal] Guacamole client state changed:", state);
|
||||
switch (state) {
|
||||
case 0: // IDLE
|
||||
statusMessage.value = t('remoteDesktopModal.status.idle');
|
||||
connectionStatus.value = 'disconnected';
|
||||
break;
|
||||
case 1: // CONNECTING
|
||||
statusMessage.value = t('remoteDesktopModal.status.connectingRdp');
|
||||
connectionStatus.value = 'connecting';
|
||||
break;
|
||||
case 2: // WAITING
|
||||
statusMessage.value = t('remoteDesktopModal.status.waiting');
|
||||
connectionStatus.value = 'connecting';
|
||||
break;
|
||||
case 3: // CONNECTED
|
||||
statusMessage.value = t('remoteDesktopModal.status.connected');
|
||||
connectionStatus.value = 'connected';
|
||||
setupInputListeners(); // 连接成功后设置输入监听
|
||||
break;
|
||||
case 4: // DISCONNECTING
|
||||
statusMessage.value = t('remoteDesktopModal.status.disconnecting');
|
||||
connectionStatus.value = 'disconnected';
|
||||
break;
|
||||
case 5: // DISCONNECTED
|
||||
statusMessage.value = t('remoteDesktopModal.status.disconnected');
|
||||
connectionStatus.value = 'disconnected';
|
||||
// disconnectRdp(); // State change might already trigger cleanup, avoid double disconnect
|
||||
break;
|
||||
default:
|
||||
statusMessage.value = `${t('remoteDesktopModal.status.unknownState')}: ${state}`;
|
||||
}
|
||||
};
|
||||
|
||||
// 6. 处理客户端错误
|
||||
guacClient.value.onerror = (status: any) => {
|
||||
console.error("[RDP Modal Client] Client Error Status:", status);
|
||||
const errorMessage = status.message || 'Unknown client error';
|
||||
statusMessage.value = `${t('remoteDesktopModal.errors.clientError')}: ${errorMessage}`;
|
||||
connectionStatus.value = 'error';
|
||||
disconnectRdp(); // Clean up on client error
|
||||
};
|
||||
|
||||
// 7. (可选) 处理指令日志
|
||||
// guacClient.value.oninstruction = (opcode: string, args: any[]) => {
|
||||
// if (['sync', 'size', 'name', 'error', 'disconnect'].includes(opcode)) {
|
||||
// console.log(`[RDP Modal Client] Received instruction: ${opcode}`, args);
|
||||
// }
|
||||
// };
|
||||
|
||||
// 8. 开始连接
|
||||
console.log("[RDP Modal] Initiating Guacamole client connection...");
|
||||
guacClient.value.connect();
|
||||
|
||||
} catch (error: any) {
|
||||
console.error("[RDP Modal] Connection failed:", error);
|
||||
statusMessage.value = `${t('remoteDesktopModal.errors.connectionFailed')}: ${error.response?.data?.message || error.message || String(error)}`;
|
||||
connectionStatus.value = 'error';
|
||||
disconnectRdp(); // Clean up on failure
|
||||
}
|
||||
};
|
||||
|
||||
// --- Input Handling ---
|
||||
const setupInputListeners = () => {
|
||||
if (!guacClient.value || !rdpDisplayRef.value) return;
|
||||
console.log("[RDP Modal Input] Setting up input listeners...");
|
||||
try {
|
||||
const displayEl = guacClient.value.getDisplay().getElement() as HTMLElement;
|
||||
|
||||
// --- Mouse ---
|
||||
// @ts-ignore
|
||||
mouse.value = new Guacamole.Mouse(displayEl);
|
||||
// @ts-ignore
|
||||
mouse.value.onmousedown = mouse.value.onmouseup = mouse.value.onmousemove = (mouseState: any) => {
|
||||
if (guacClient.value) {
|
||||
guacClient.value.sendMouseState(mouseState);
|
||||
}
|
||||
};
|
||||
console.log("[RDP Modal Input] Mouse listeners attached.");
|
||||
|
||||
// --- Keyboard ---
|
||||
// @ts-ignore
|
||||
keyboard.value = new Guacamole.Keyboard(document); // Listen on document for global key events
|
||||
|
||||
// Prevent default browser actions for keys handled by Guacamole
|
||||
// keyboard.value.listenTo(document); // This might interfere with other inputs, attach carefully
|
||||
|
||||
keyboard.value.onkeydown = (keysym: number) => {
|
||||
if (guacClient.value) {
|
||||
// console.log("[RDP Input] KeyDown:", keysym);
|
||||
guacClient.value.sendKeyEvent(1, keysym);
|
||||
}
|
||||
};
|
||||
keyboard.value.onkeyup = (keysym: number) => {
|
||||
if (guacClient.value) {
|
||||
// console.log("[RDP Input] KeyUp:", keysym);
|
||||
guacClient.value.sendKeyEvent(0, keysym);
|
||||
}
|
||||
};
|
||||
console.log("[RDP Modal Input] Keyboard listeners attached.");
|
||||
|
||||
} catch (inputError) {
|
||||
console.error("[RDP Modal Input] Error setting up input listeners:", inputError);
|
||||
statusMessage.value = t('remoteDesktopModal.errors.inputError');
|
||||
}
|
||||
};
|
||||
|
||||
const removeInputListeners = () => {
|
||||
console.log("[RDP Modal Input] Removing input listeners...");
|
||||
if (keyboard.value) {
|
||||
// If listenTo(document) was used, need a way to remove it,
|
||||
// otherwise just nullifying the handlers might be enough.
|
||||
// Guacamole.Keyboard doesn't have an obvious 'stopListening'
|
||||
keyboard.value.onkeydown = null;
|
||||
keyboard.value.onkeyup = null;
|
||||
keyboard.value = null; // Release reference
|
||||
console.log("[RDP Modal Input] Keyboard listeners removed.");
|
||||
}
|
||||
if (mouse.value) {
|
||||
// Mouse listeners are attached to the display element,
|
||||
// removing the element itself or nullifying handlers should work.
|
||||
mouse.value.onmousedown = null;
|
||||
mouse.value.onmouseup = null;
|
||||
mouse.value.onmousemove = null;
|
||||
mouse.value = null; // Release reference
|
||||
console.log("[RDP Modal Input] Mouse listeners removed.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// --- Disconnect Logic ---
|
||||
const disconnectRdp = () => {
|
||||
removeInputListeners(); // Remove listeners first
|
||||
if (guacClient.value) {
|
||||
console.log("[RDP Modal] Disconnecting Guacamole client.");
|
||||
guacClient.value.disconnect();
|
||||
guacClient.value = null;
|
||||
}
|
||||
// Clean up display manually if needed
|
||||
if (rdpDisplayRef.value) {
|
||||
while (rdpDisplayRef.value.firstChild) {
|
||||
rdpDisplayRef.value.removeChild(rdpDisplayRef.value.firstChild);
|
||||
}
|
||||
}
|
||||
if (connectionStatus.value !== 'error') { // Don't overwrite error messages
|
||||
connectionStatus.value = 'disconnected';
|
||||
statusMessage.value = t('remoteDesktopModal.status.disconnected');
|
||||
}
|
||||
};
|
||||
|
||||
// --- Modal Close Handler ---
|
||||
const closeModal = () => {
|
||||
disconnectRdp(); // Ensure disconnection when modal is closed
|
||||
emit('close');
|
||||
};
|
||||
|
||||
// --- Lifecycle Hooks ---
|
||||
onMounted(() => {
|
||||
// Automatically connect when component mounts if connection is provided
|
||||
if (props.connection) {
|
||||
// Use nextTick to ensure the display ref is available
|
||||
nextTick(() => {
|
||||
connectRdp();
|
||||
});
|
||||
} else {
|
||||
statusMessage.value = t('remoteDesktopModal.errors.noConnection');
|
||||
connectionStatus.value = 'error';
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// Ensure disconnection on component unmount
|
||||
disconnectRdp();
|
||||
});
|
||||
|
||||
// Watch for connection prop changes (e.g., if the modal is reused)
|
||||
watch(() => props.connection, (newConnection, oldConnection) => {
|
||||
if (newConnection && newConnection.id !== oldConnection?.id) {
|
||||
console.log('[RDP Modal] Connection prop changed, reconnecting...');
|
||||
// Use nextTick to ensure the display ref is available after potential v-if changes
|
||||
nextTick(() => {
|
||||
connectRdp(); // Connect with the new connection info
|
||||
});
|
||||
} else if (!newConnection) {
|
||||
disconnectRdp(); // Disconnect if connection becomes null
|
||||
statusMessage.value = t('remoteDesktopModal.errors.noConnection');
|
||||
connectionStatus.value = 'error';
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center bg-overlay p-4"> <!-- Changed background class -->
|
||||
<div class="bg-background text-foreground rounded-lg shadow-xl w-11/12 max-w-4xl h-5/6 flex flex-col overflow-hidden border border-border">
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center bg-overlay p-4 backdrop-blur-sm">
|
||||
<div class="bg-background text-foreground rounded-lg shadow-xl w-11/12 max-w-6xl h-[90%] flex flex-col overflow-hidden border border-border"> <!-- Increased max-width and height -->
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-4 border-b border-border flex-shrink-0">
|
||||
<h3 class="text-lg font-semibold">
|
||||
<!-- 可以根据 props.connection?.name 动态显示标题 -->
|
||||
{{ t('remoteDesktopModal.titlePlaceholder') }}
|
||||
<div class="flex items-center justify-between p-3 border-b border-border flex-shrink-0"> <!-- Reduced padding -->
|
||||
<h3 class="text-base font-semibold truncate"> <!-- Reduced text size, added truncate -->
|
||||
<i class="fas fa-desktop mr-2 text-text-secondary"></i>
|
||||
{{ t('remoteDesktopModal.title') }} - {{ props.connection?.name || props.connection?.host || t('remoteDesktopModal.titlePlaceholder') }}
|
||||
</h3>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-text-secondary hover:text-foreground transition-colors duration-150"
|
||||
:title="t('common.close')"
|
||||
>
|
||||
<i class="fas fa-times fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body (Placeholder) -->
|
||||
<div class="flex-grow p-4 overflow-y-auto">
|
||||
<div class="flex items-center justify-center h-full text-text-secondary text-center">
|
||||
<div>
|
||||
<i class="fas fa-desktop fa-3x mb-4"></i>
|
||||
<p>{{ t('remoteDesktopModal.contentPlaceholder') }}</p>
|
||||
<!-- 这里将来会是 Guacamole 或其他 RDP 客户端的容器 -->
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Status Indicator -->
|
||||
<span class="text-xs px-2 py-0.5 rounded"
|
||||
:class="{
|
||||
'bg-yellow-200 text-yellow-800': connectionStatus === 'connecting',
|
||||
'bg-green-200 text-green-800': connectionStatus === 'connected',
|
||||
'bg-red-200 text-red-800': connectionStatus === 'error',
|
||||
'bg-gray-200 text-gray-800': connectionStatus === 'disconnected'
|
||||
}">
|
||||
{{ connectionStatus }}
|
||||
</span>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="text-text-secondary hover:text-foreground transition-colors duration-150 p-1 rounded hover:bg-hover"
|
||||
:title="t('common.close')"
|
||||
>
|
||||
<i class="fas fa-times fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer (Optional) -->
|
||||
<!-- <div class="p-4 border-t border-border flex-shrink-0 text-right">
|
||||
<button @click="closeModal" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark">
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div> -->
|
||||
<!-- Modal Body (Guacamole Display Area) -->
|
||||
<div class="flex-grow relative bg-black"> <!-- Added relative and bg-black -->
|
||||
<div ref="rdpDisplayRef" class="rdp-display-container w-full h-full">
|
||||
<!-- Guacamole display will be rendered here -->
|
||||
</div>
|
||||
<!-- Loading/Error Overlay -->
|
||||
<div v-if="connectionStatus === 'connecting' || connectionStatus === 'error'"
|
||||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white p-4 z-10">
|
||||
<div class="text-center">
|
||||
<i v-if="connectionStatus === 'connecting'" class="fas fa-spinner fa-spin fa-2x mb-3"></i>
|
||||
<i v-else class="fas fa-exclamation-triangle fa-2x mb-3 text-red-400"></i>
|
||||
<p class="text-sm">{{ statusMessage }}</p>
|
||||
<button v-if="connectionStatus === 'error'"
|
||||
@click="connectRdp"
|
||||
class="mt-4 px-3 py-1 bg-primary text-white rounded text-xs hover:bg-primary-dark">
|
||||
{{ t('common.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer (Status Bar) -->
|
||||
<div class="p-2 border-t border-border flex-shrink-0 text-xs text-text-secondary bg-header"> <!-- Reduced padding -->
|
||||
{{ statusMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 如果需要，可以在这里添加特定的样式 */
|
||||
.rdp-display-container {
|
||||
/* Ensure the container itself doesn't introduce scrollbars unnecessarily */
|
||||
overflow: hidden;
|
||||
position: relative; /* Needed for Guacamole's absolute positioning */
|
||||
}
|
||||
|
||||
/* Guacamole injects its own elements, target them carefully if needed */
|
||||
.rdp-display-container :deep(div) {
|
||||
/* Guacamole layers might need relative positioning */
|
||||
/* position: relative !important; */ /* Avoid !important if possible */
|
||||
}
|
||||
|
||||
.rdp-display-container :deep(canvas) {
|
||||
/* Ensure canvas scales correctly if needed, Guacamole usually handles this */
|
||||
/* width: 100%; */
|
||||
/* height: 100%; */
|
||||
}
|
||||
</style>
|
||||
@@ -751,6 +751,30 @@
|
||||
"searchPlaceholder": "搜索名称或主机...",
|
||||
"noResults": "未找到匹配 \"{searchTerm}\" 的连接。"
|
||||
},
|
||||
"remoteDesktopModal": {
|
||||
"title": "远程桌面",
|
||||
"titlePlaceholder": "远程桌面连接",
|
||||
"status": {
|
||||
"fetchingToken": "正在获取连接令牌...",
|
||||
"connectingWs": "正在连接 WebSocket...",
|
||||
"idle": "空闲",
|
||||
"connectingRdp": "正在连接远程桌面...",
|
||||
"waiting": "等待服务器响应...",
|
||||
"connected": "已连接",
|
||||
"disconnecting": "正在断开连接...",
|
||||
"disconnected": "已断开连接",
|
||||
"unknownState": "未知状态"
|
||||
},
|
||||
"errors": {
|
||||
"missingInfo": "连接信息或显示元素丢失。",
|
||||
"tunnelError": "通道错误",
|
||||
"clientError": "客户端错误",
|
||||
"connectionFailed": "连接失败",
|
||||
"inputError": "设置输入监听器时出错。",
|
||||
"noConnection": "未提供连接信息。",
|
||||
"tokenError": "获取令牌失败"
|
||||
}
|
||||
},
|
||||
"commandInputBar": {
|
||||
"placeholder": "在此输入命令后按 Enter 发送到终端...",
|
||||
"searchPlaceholder": "在终端中搜索...",
|
||||
|
||||
Reference in New Issue
Block a user