fix: 修复RDP最大化画面模糊

- 最大化时按浏览器可用尺寸重建RDP会话
- 隔离分辨率切换过程中的旧连接事件

frontend/src/components/server/RdpDialog.tsx

@@ -243,8 +243,8 @@ export function RdpDialog({
 
     const token =
       useUserStore.getState().token || localStorage.getItem("token") || "";
-    const { width, height } = calcRdpViewport(false);
+    const { width, height } = calcRdpViewport(fullscreen);
-    // 会话分辨率跟随弹窗可用空间，减少大屏下固定 1024x800 造成的左右黑边。 // Logan.Li
+    // 最大化时按浏览器可用空间重建 RDP 会话，避免把低分辨率画布拉伸后变糊。 // Logan.Li
     setDisplaySize({ width, height });
     setCanvasSize({ width, height });
     setStatus(t("server.rdpDialog.creating"));
@@ -266,8 +266,11 @@ export function RdpDialog({
     ws.binaryType = "arraybuffer";
     wsRef.current = ws;
 
-    ws.onopen = () => setConnected(true);
+    ws.onopen = () => {
+      if (wsRef.current === ws) setConnected(true);
+    };
     ws.onmessage = (event) => {
+      if (wsRef.current !== ws) return;
       if (typeof event.data !== "string") {
         paintQueueRef.current = paintQueueRef.current
           .catch(() => undefined)
@@ -283,8 +286,13 @@ export function RdpDialog({
         setStatus(String(event.data || t("server.rdpDialog.unparseableFrame")));
       }
     };
-    ws.onerror = () => setStatus(t("server.rdpDialog.connectionError"));
+    ws.onerror = () => {
+      if (wsRef.current === ws)
+        setStatus(t("server.rdpDialog.connectionError"));
+    };
     ws.onclose = () => {
+      // 忽略切换分辨率时旧连接延迟到达的关闭事件。 // Logan.Li
+      if (wsRef.current !== ws) return;
       setConnected(false);
       setStatus((prev) => prev || t("server.rdpDialog.connectionClosed"));
     };
@@ -292,13 +300,13 @@ export function RdpDialog({
     return () => {
       flushMouseMove();
       ws.close();
-      wsRef.current = null;
+      if (wsRef.current === ws) wsRef.current = null;
       paintQueueRef.current = Promise.resolve();
       setConnected(false);
       setToolsOpen(false);
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, serverId]);
+  }, [open, serverId, fullscreen]);
 
   const canvasPoint = (event: React.MouseEvent<HTMLCanvasElement>) => {
     const rect = event.currentTarget.getBoundingClientRect();
@@ -344,7 +352,7 @@ export function RdpDialog({
           fullscreen={fullscreen}
           toolsOpen={toolsOpen}
           onToolsOpenChange={setToolsOpen}
-          onToggleFullscreen={() => setFullscreen(!fullscreen)}
+          onToggleFullscreen={() => setFullscreen((current) => !current)}
           onClose={() => onOpenChange(false)}
           remoteClipboard={remoteClipboard}
           onSyncToRemote={(text) => {
@@ -378,7 +386,7 @@ export function RdpDialog({
             tabIndex={0}
             className="max-w-full max-h-full outline-none"
             style={{
-              // 最大化只缩放当前画面，不重连 RDP，避免登录过程闪黑。 // Logan.Li
+              // 会话分辨率与展示区域保持一致，避免浏览器二次放大画面。 // Logan.Li
               width: fullscreen ? "100%" : displaySize.width,
               height: fullscreen ? "100%" : displaySize.height,
             }}