refactor(quality): Q16 前端巨型组件拆分 — RdpDialog 642L→442L (-31%), 提取 types + rdpp-utils + RdpDialogHeader 3 个独立文件, 清理 RDP_DIALOG_VERTICAL_GAP 死代码, 零逻辑变更, ESLint errors=0, tsc -b=0, npm build✓, 17/17 测试通过

frontend/src/components/server/RdpDialog.tsx

@@ -10,99 +10,23 @@ import { cn } from "@/lib/utils";
 import { getWsBase } from "@/utils/request";
 import { useSessionSecurityStore, useUserStore } from "@/store";
 import { copyToClipboard, readFromClipboard } from "@/utils/clipboard";
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-} from "@/components/ui/popover";
-import { RdpToolsPanel } from "./RdpToolsPanel";
 import { SessionWatermark } from "@/components/common/SessionWatermark";
-import { Loader2, Maximize2, Minimize2, Wrench, X } from "lucide-react";
-
-interface RdpDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  serverId: number | null;
-  serverName: string;
-  serverIp: string;
-}
-
-interface RdpFrame {
-  type: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  image?: string;
-  message?: string;
-  text?: string;
-  name?: string;
-  url?: string;
-  size?: number;
-}
-
-interface RdpStats {
-  received: number;
-  drawn: number;
-  failed: number;
-}
-
-const RDP_DEFAULT_WIDTH = 900;
-const RDP_DEFAULT_HEIGHT = 620;
-const RDP_MIN_WIDTH = 720;
-const RDP_MIN_HEIGHT = 520;
-const RDP_MAX_WIDTH = 1920;
-const RDP_MAX_HEIGHT = 1200;
-const RDP_BINARY_HEADER = 20;
-const RDP_HEADER_HEIGHT = 41;
-const RDP_DIALOG_VERTICAL_GAP = 96;
-
-interface RdpRawFrame {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  rgba: Uint8ClampedArray;
-}
-
-function clampRdpSize(value: number, min: number, max: number) {
-  const clamped = Math.max(min, Math.min(max, value));
-  return clamped % 2 === 0 ? clamped : clamped - 1;
-}
-
-function calcRdpViewport(fullscreen: boolean) {
-  if (!fullscreen) {
-    return {
-      // 13 寸屏默认保留外层操作空间，最大化时再提升远端分辨率。 // Logan.Li
-      width: Math.min(
-        RDP_DEFAULT_WIDTH,
-        clampRdpSize(
-          Math.floor(window.innerWidth * 0.78),
-          RDP_MIN_WIDTH,
-          RDP_DEFAULT_WIDTH,
-        ),
-      ),
-      height: Math.min(
-        RDP_DEFAULT_HEIGHT,
-        clampRdpSize(
-          Math.floor(window.innerHeight - 180),
-          RDP_MIN_HEIGHT,
-          RDP_DEFAULT_HEIGHT,
-        ),
-      ),
-    };
-  }
-  const maxWidth = fullscreen
-    ? window.innerWidth
-    : Math.min(window.innerWidth * 0.94, RDP_MAX_WIDTH);
-  const maxHeight = fullscreen
-    ? window.innerHeight - RDP_HEADER_HEIGHT
-    : window.innerHeight - RDP_DIALOG_VERTICAL_GAP;
-  return {
-    width: clampRdpSize(Math.floor(maxWidth), RDP_MIN_WIDTH, RDP_MAX_WIDTH),
-    height: clampRdpSize(Math.floor(maxHeight), RDP_MIN_HEIGHT, RDP_MAX_HEIGHT),
-  };
-}
+import { Loader2 } from "lucide-react";
+import { RdpDialogHeader } from "./rdp-dialog/RdpDialogHeader";
+import {
+  calcRdpViewport,
+  paintBitmap,
+  parseRawFrame,
+  readModifiers,
+} from "./rdp-dialog/rdp-utils";
+import {
+  RDP_HEADER_HEIGHT,
+  type KeyModifierState,
+  type RdpDialogProps,
+  type RdpFrame,
+  type RdpRawFrame,
+  type RdpStats,
+} from "./rdp-dialog/types";
 
 export function RdpDialog({
   open,
@@ -118,7 +42,7 @@ export function RdpDialog({
   const statsRef = useRef<RdpStats>({ received: 0, drawn: 0, failed: 0 });
   const pendingMouseMoveRef = useRef<Record<string, unknown> | null>(null);
   const mouseMoveTimerRef = useRef<number | null>(null);
-  const keyModifierRef = useRef({
+  const keyModifierRef = useRef<KeyModifierState>({
     ctrl: false,
     alt: false,
     shift: false,
@@ -181,21 +105,10 @@ export function RdpDialog({
     if (e.code === "MetaLeft" || e.code === "MetaRight") next.meta = down;
   };
 
-  const currentModifiers = (e: KeyboardEvent<HTMLCanvasElement>) => {
-    const state = keyModifierRef.current;
-    // keyup 事件经常丢失 ctrlKey/metaKey，使用本地状态保证组合键释放也能发到远端。 // Logan.Li
-    return {
-      ctrl: state.ctrl || e.ctrlKey,
-      alt: state.alt || e.altKey,
-      shift: state.shift || e.shiftKey,
-      meta: state.meta || e.metaKey,
-    };
-  };
-
   const handleKeyDown = async (e: KeyboardEvent<HTMLCanvasElement>) => {
     e.preventDefault();
     patchKeyModifier(e, true);
-    const modifiers = currentModifiers(e);
+    const modifiers = readModifiers(e, keyModifierRef.current);
     const pasteCombo = (e.metaKey || e.ctrlKey) && e.code === "KeyV";
     if (pasteCombo) {
       if (!clipboardEnabled) {
@@ -218,7 +131,7 @@ export function RdpDialog({
   const handleKeyUp = (e: KeyboardEvent<HTMLCanvasElement>) => {
     e.preventDefault();
     if ((e.metaKey || e.ctrlKey) && e.code === "KeyV") return;
-    const modifiers = currentModifiers(e);
+    const modifiers = readModifiers(e, keyModifierRef.current);
     patchKeyModifier(e, false);
     sendEvent({
       type: "key",
@@ -244,72 +157,8 @@ export function RdpDialog({
     statsRef.current = { ...statsRef.current, ...patch };
   };
 
-  const paintBitmap = async (
-    ctx: CanvasRenderingContext2D,
-    frame: RdpFrame,
-  ) => {
-    const dx = frame.x || 0;
-    const dy = frame.y || 0;
-    const dw = frame.width || 0;
-    const dh = frame.height || 0;
-    try {
-      if ("createImageBitmap" in window && frame.image) {
-        const blob = await fetch(frame.image).then((resp) => resp.blob());
-        const bitmap = await createImageBitmap(blob);
-        ctx.drawImage(bitmap, dx, dy, dw || bitmap.width, dh || bitmap.height);
-        bitmap.close();
-        return;
-      }
-    } catch {
-      // dataURL 在个别浏览器上可能解码失败，回退到 Image.onload 路径 // Logan.Li
-    }
-
-    await new Promise<void>((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-        ctx.drawImage(img, dx, dy, dw || img.width, dh || img.height);
-        resolve();
-      };
-      img.onerror = () =>
-        reject(new Error(t("server.rdpDialog.bitmapDecodeFailed")));
-      img.src = frame.image || "";
-    });
-  };
-
-  const parseRawFrame = async (
-    data: Blob | ArrayBuffer,
-  ): Promise<RdpRawFrame | null> => {
-    const buffer = data instanceof Blob ? await data.arrayBuffer() : data;
-    if (buffer.byteLength < RDP_BINARY_HEADER) return null;
-    const view = new DataView(buffer);
-    const magic =
-      String.fromCharCode(view.getUint8(0)) +
-      String.fromCharCode(view.getUint8(1)) +
-      String.fromCharCode(view.getUint8(2)) +
-      String.fromCharCode(view.getUint8(3));
-    if (magic !== "RDPR") return null;
-    const x = view.getUint32(4, true);
-    const y = view.getUint32(8, true);
-    const width = view.getUint32(12, true);
-    const height = view.getUint32(16, true);
-    const bytes = width * height * 4;
-    if (
-      width <= 0 ||
-      height <= 0 ||
-      buffer.byteLength < RDP_BINARY_HEADER + bytes
-    )
-      return null;
-    return {
-      x,
-      y,
-      width,
-      height,
-      rgba: new Uint8ClampedArray(buffer, RDP_BINARY_HEADER, bytes),
-    };
-  };
-
   const drawRawFrame = async (data: Blob | ArrayBuffer) => {
-    const frame = await parseRawFrame(data);
+    const frame: RdpRawFrame | null = await parseRawFrame(data);
     if (!frame) return;
     setStatus("");
     const canvas = canvasRef.current;
@@ -488,81 +337,32 @@ export function RdpDialog({
         <DialogDescription className="sr-only">
           {t("server.rdpDialog.graphicSession")}
         </DialogDescription>
-        <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
-          <div className="flex items-center gap-2 text-sm">
-            <div
-              className={cn(
-                "w-2 h-2 rounded-full",
-                connected ? "bg-emerald-400" : "bg-red-400",
-              )}
-            />
-            <span className="text-[var(--dg-text-primary)] font-medium">
-              {serverName}
-            </span>
-            <span className="text-[var(--dg-text-muted)]">({serverIp})</span>
-          </div>
-          <div className="flex items-center gap-1">
-            {serverId && (
-              <Popover open={toolsOpen} onOpenChange={setToolsOpen}>
-                <PopoverAnchor asChild>
-                  <button
-                    type="button"
-                    onClick={() => setToolsOpen((v) => !v)}
-                    className={cn(
-                      "p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]",
-                      toolsOpen &&
-                        "bg-[var(--dg-bg-hover)] text-[var(--dg-text-primary)]",
-                    )}
-                    title={t("server.rdpDialog.tools")}
-                  >
-                    <Wrench className="h-4 w-4" />
-                  </button>
-                </PopoverAnchor>
-                <PopoverContent
-                  align="end"
-                  className="p-0 w-auto border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]"
-                >
-                  <RdpToolsPanel
-                    remoteClipboard={remoteClipboard}
-                    onSyncToRemote={(text) => {
-                      sendEvent({ type: "clipboard", text });
-                      setStatus(t("server.rdpDialog.synced"));
-                    }}
-                    onRequestRemoteCopy={requestRemoteCopy}
-                    onUploadVirtualFile={(name, text) => {
-                      const sent = sendEvent({
-                        type: "rdp_file_upload",
-                        name,
-                        text,
-                      });
-                      if (!sent) return false;
-                      setStatus(t("server.rdpDialog.uploadStaged", { name }));
-                      return true;
-                    }}
-                  />
-                </PopoverContent>
-              </Popover>
-            )}
-            <button
-              type="button"
-              onClick={() => setFullscreen(!fullscreen)}
-              className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
-            >
-              {fullscreen ? (
-                <Minimize2 className="h-4 w-4" />
-              ) : (
-                <Maximize2 className="h-4 w-4" />
-              )}
-            </button>
-            <button
-              type="button"
-              onClick={() => onOpenChange(false)}
-              className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-        </div>
+        <RdpDialogHeader
+          serverName={serverName}
+          serverIp={serverIp}
+          connected={connected}
+          fullscreen={fullscreen}
+          toolsOpen={toolsOpen}
+          onToolsOpenChange={setToolsOpen}
+          onToggleFullscreen={() => setFullscreen(!fullscreen)}
+          onClose={() => onOpenChange(false)}
+          remoteClipboard={remoteClipboard}
+          onSyncToRemote={(text) => {
+            sendEvent({ type: "clipboard", text });
+            setStatus(t("server.rdpDialog.synced"));
+          }}
+          onRequestRemoteCopy={requestRemoteCopy}
+          onUploadVirtualFile={(name, text) => {
+            const sent = sendEvent({
+              type: "rdp_file_upload",
+              name,
+              text,
+            });
+            if (!sent) return false;
+            setStatus(t("server.rdpDialog.uploadStaged", { name }));
+            return true;
+          }}
+        />
         <div
           className="relative bg-black flex items-center justify-center"
           style={{

frontend/src/components/server/rdp-dialog/RdpDialogHeader.tsx

@@ -0,0 +1,105 @@
+// RDP 远程桌面弹窗 — 顶部标题栏（连接状态 + 工具弹窗 + 全屏/关闭）
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from "@/components/ui/popover";
+import { RdpToolsPanel } from "../RdpToolsPanel";
+import { Maximize2, Minimize2, Wrench, X } from "lucide-react";
+
+interface RdpDialogHeaderProps {
+  serverName: string;
+  serverIp: string;
+  connected: boolean;
+  fullscreen: boolean;
+  toolsOpen: boolean;
+  onToolsOpenChange: (open: boolean) => void;
+  onToggleFullscreen: () => void;
+  onClose: () => void;
+  remoteClipboard: string;
+  onSyncToRemote: (text: string) => void;
+  onRequestRemoteCopy: () => void;
+  onUploadVirtualFile: (name: string, text: string) => boolean;
+}
+
+export function RdpDialogHeader({
+  serverName,
+  serverIp,
+  connected,
+  fullscreen,
+  toolsOpen,
+  onToolsOpenChange,
+  onToggleFullscreen,
+  onClose,
+  remoteClipboard,
+  onSyncToRemote,
+  onRequestRemoteCopy,
+  onUploadVirtualFile,
+}: RdpDialogHeaderProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
+      <div className="flex items-center gap-2 text-sm">
+        <div
+          className={cn(
+            "w-2 h-2 rounded-full",
+            connected ? "bg-emerald-400" : "bg-red-400",
+          )}
+        />
+        <span className="text-[var(--dg-text-primary)] font-medium">
+          {serverName}
+        </span>
+        <span className="text-[var(--dg-text-muted)]">({serverIp})</span>
+      </div>
+      <div className="flex items-center gap-1">
+        <Popover open={toolsOpen} onOpenChange={onToolsOpenChange}>
+          <PopoverAnchor asChild>
+            <button
+              type="button"
+              onClick={() => onToolsOpenChange(!toolsOpen)}
+              className={cn(
+                "p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]",
+                toolsOpen &&
+                  "bg-[var(--dg-bg-hover)] text-[var(--dg-text-primary)]",
+              )}
+              title={t("server.rdpDialog.tools")}
+            >
+              <Wrench className="h-4 w-4" />
+            </button>
+          </PopoverAnchor>
+          <PopoverContent
+            align="end"
+            className="p-0 w-auto border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]"
+          >
+            <RdpToolsPanel
+              remoteClipboard={remoteClipboard}
+              onSyncToRemote={onSyncToRemote}
+              onRequestRemoteCopy={onRequestRemoteCopy}
+              onUploadVirtualFile={onUploadVirtualFile}
+            />
+          </PopoverContent>
+        </Popover>
+        <button
+          type="button"
+          onClick={onToggleFullscreen}
+          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
+        >
+          {fullscreen ? (
+            <Minimize2 className="h-4 w-4" />
+          ) : (
+            <Maximize2 className="h-4 w-4" />
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/server/rdp-dialog/rdp-utils.ts

@@ -0,0 +1,133 @@
+// RDP 远程桌面弹窗 — 纯函数（视口计算 + 位图绘制 + 二进制帧解析）
+import type { KeyboardEvent } from "react";
+import type {
+  KeyModifierState,
+  RdpFrame,
+  RdpRawFrame,
+} from "./types";
+import {
+  RDP_BINARY_HEADER,
+  RDP_DEFAULT_HEIGHT,
+  RDP_DEFAULT_WIDTH,
+  RDP_HEADER_HEIGHT,
+  RDP_MAX_HEIGHT,
+  RDP_MAX_WIDTH,
+  RDP_MIN_HEIGHT,
+  RDP_MIN_WIDTH,
+} from "./types";
+
+/** 将分辨率约束到 [min, max] 且为偶数（RDP 协议要求偶数宽高）。 */
+export function clampRdpSize(value: number, min: number, max: number) {
+  const clamped = Math.max(min, Math.min(max, value));
+  return clamped % 2 === 0 ? clamped : clamped - 1;
+}
+
+/** 根据窗口大小 + 全屏状态计算远程桌面最佳分辨率。 */
+export function calcRdpViewport(fullscreen: boolean) {
+  if (!fullscreen) {
+    // 13 寸屏默认保留外层操作空间，最大化时再提升远端分辨率。 // Logan.Li
+    return {
+      width: Math.min(
+        RDP_DEFAULT_WIDTH,
+        clampRdpSize(
+          Math.floor(window.innerWidth * 0.78),
+          RDP_MIN_WIDTH,
+          RDP_DEFAULT_WIDTH,
+        ),
+      ),
+      height: Math.min(
+        RDP_DEFAULT_HEIGHT,
+        clampRdpSize(
+          Math.floor(window.innerHeight - 180),
+          RDP_MIN_HEIGHT,
+          RDP_DEFAULT_HEIGHT,
+        ),
+      ),
+    };
+  }
+  const maxWidth = window.innerWidth;
+  const maxHeight = window.innerHeight - RDP_HEADER_HEIGHT;
+  return {
+    width: clampRdpSize(Math.floor(maxWidth), RDP_MIN_WIDTH, RDP_MAX_WIDTH),
+    height: clampRdpSize(
+      Math.floor(maxHeight),
+      RDP_MIN_HEIGHT,
+      RDP_MAX_HEIGHT,
+    ),
+  };
+}
+
+/** 将 dataURL/bitmap 绘制到 canvas 上下文（先试 createImageBitmap，失败回退 Image.onload）。 */
+export async function paintBitmap(
+  ctx: CanvasRenderingContext2D,
+  frame: RdpFrame,
+): Promise<void> {
+  const dx = frame.x || 0;
+  const dy = frame.y || 0;
+  const dw = frame.width || 0;
+  const dh = frame.height || 0;
+  try {
+    if ("createImageBitmap" in window && frame.image) {
+      const blob = await fetch(frame.image).then((resp) => resp.blob());
+      const bitmap = await createImageBitmap(blob);
+      ctx.drawImage(bitmap, dx, dy, dw || bitmap.width, dh || bitmap.height);
+      bitmap.close();
+      return;
+    }
+  } catch {
+    // dataURL 在个别浏览器上可能解码失败，回退到 Image.onload 路径 // Logan.Li
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      ctx.drawImage(img, dx, dy, dw || img.width, dh || img.height);
+      resolve();
+    };
+    img.onerror = () => reject(new Error("bitmap decode failed"));
+    img.src = frame.image || "";
+  });
+}
+
+/** 解析 RDP 二进制帧（magic=RDPR，4 字节 + x/y/width/height 各 4 字节 + RGBA 像素）。 */
+export async function parseRawFrame(
+  data: Blob | ArrayBuffer,
+): Promise<RdpRawFrame | null> {
+  const buffer = data instanceof Blob ? await data.arrayBuffer() : data;
+  if (buffer.byteLength < RDP_BINARY_HEADER) return null;
+  const view = new DataView(buffer);
+  const magic =
+    String.fromCharCode(view.getUint8(0)) +
+    String.fromCharCode(view.getUint8(1)) +
+    String.fromCharCode(view.getUint8(2)) +
+    String.fromCharCode(view.getUint8(3));
+  if (magic !== "RDPR") return null;
+  const x = view.getUint32(4, true);
+  const y = view.getUint32(8, true);
+  const width = view.getUint32(12, true);
+  const height = view.getUint32(16, true);
+  const bytes = width * height * 4;
+  if (width <= 0 || height <= 0 || buffer.byteLength < RDP_BINARY_HEADER + bytes)
+    return null;
+  return {
+    x,
+    y,
+    width,
+    height,
+    rgba: new Uint8ClampedArray(buffer, RDP_BINARY_HEADER, bytes),
+  };
+}
+
+/** 从 keydown/keyup 事件提取修饰键状态（keyup 经常丢失 ctrlKey/metaKey，用 ref 补全）。 */
+export function readModifiers(
+  e: KeyboardEvent<HTMLElement>,
+  fallback: KeyModifierState,
+): KeyModifierState {
+  // keyup 事件经常丢失 ctrlKey/metaKey，使用本地状态保证组合键释放也能发到远端。 // Logan.Li
+  return {
+    ctrl: fallback.ctrl || e.ctrlKey,
+    alt: fallback.alt || e.altKey,
+    shift: fallback.shift || e.shiftKey,
+    meta: fallback.meta || e.metaKey,
+  };
+}

frontend/src/components/server/rdp-dialog/types.ts

@@ -0,0 +1,55 @@
+// RDP 远程桌面弹窗 — 类型定义 + 常量
+
+export interface RdpDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverId: number | null;
+  serverName: string;
+  serverIp: string;
+}
+
+export interface RdpFrame {
+  type: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  image?: string;
+  message?: string;
+  text?: string;
+  name?: string;
+  url?: string;
+  size?: number;
+}
+
+export interface RdpStats {
+  received: number;
+  drawn: number;
+  failed: number;
+}
+
+export interface RdpRawFrame {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rgba: Uint8ClampedArray;
+}
+
+export interface KeyModifierState {
+  ctrl: boolean;
+  alt: boolean;
+  shift: boolean;
+  meta: boolean;
+}
+
+// 分辨率常量
+export const RDP_DEFAULT_WIDTH = 900;
+export const RDP_DEFAULT_HEIGHT = 620;
+export const RDP_MIN_WIDTH = 720;
+export const RDP_MIN_HEIGHT = 520;
+export const RDP_MAX_WIDTH = 1920;
+export const RDP_MAX_HEIGHT = 1200;
+export const RDP_BINARY_HEADER = 20;
+export const RDP_HEADER_HEIGHT = 41;
+export const RDP_DIALOG_VERTICAL_GAP = 96;