feat(rdp): 新增 RDP 远程桌面/SMB/账单同步能力 + 清理编译产物
主要变更： - RDP 远程桌面：新增 backend/pkg/rdp（RDP 引擎 + credssp/display/rle/trace）、 backend/controller/rdp*（连接/凭证/文件/会话/实时）、frontend RDP 组件与 API - Windows SMB 文件传输：backend/pkg/winsmb - 云账单同步：backend/pkg/billingsync + billing_sync/aliyun_billing，前端账单详情 - Agent CLI Kubernetes 工具：kubernetes_action/get、pod_execute/logs - 服务器导入助手：server_import_helpers、ImportCredentialSettings - 国际化与组件重构（cloud/deploy/monitor/server/system 等多模块） - 清理编译产物二进制：移除 backend/server、backend/agent/bin/aiops-agent-* - .gitignore：新增 backend/agent/ 与 .cache/（避免 334MB go-build 缓存误入库） Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
LoganandClaude committed
1 parent
777d9e4e71
commit
76ec9387f0
202 files changed
+16555
-2543
No files matched your search
@@ -0,0 +1,262 @@
|
||||
// RDP 审计查看器：在线实时查看 + 历史录屏回放共用 Canvas 播放器 // Logan.Li
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { getAuthToken, getWsBase } from '@/utils/request';
|
||||
import { rdpSessionApi } from '@/api';
|
||||
import { Loader2, Maximize2, Minimize2, Pause, Play, RotateCcw, X } from 'lucide-react';
|
||||
|
||||
interface RdpAuditViewerProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
sessionId: number | null;
|
||||
mode: 'live' | 'replay';
|
||||
}
|
||||
|
||||
interface RdpFrame {
|
||||
type: string;
|
||||
x?: number;
|
||||
y?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
image?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
interface RdpRecord {
|
||||
version?: number;
|
||||
frames?: RdpFrame[];
|
||||
}
|
||||
|
||||
interface RawFrame {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
rgba: Uint8ClampedArray;
|
||||
}
|
||||
|
||||
const BINARY_HEADER = 20;
|
||||
const FRAME_MS = 500;
|
||||
|
||||
async function parseRawFrame(data: Blob | ArrayBuffer): Promise<RawFrame | null> {
|
||||
const buffer = data instanceof Blob ? await data.arrayBuffer() : data;
|
||||
if (buffer.byteLength < BINARY_HEADER) return null;
|
||||
const view = new DataView(buffer);
|
||||
const magic = String.fromCharCode(view.getUint8(0), view.getUint8(1), view.getUint8(2), 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 < BINARY_HEADER + bytes) return null;
|
||||
return { x, y, width, height, rgba: new Uint8ClampedArray(buffer, BINARY_HEADER, bytes) };
|
||||
}
|
||||
|
||||
async function drawImageFrame(ctx: CanvasRenderingContext2D, frame: RdpFrame) {
|
||||
if (!frame.image) return;
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, frame.x || 0, frame.y || 0, frame.width || img.width, frame.height || img.height);
|
||||
resolve();
|
||||
};
|
||||
img.onerror = () => reject(new Error('RDP 录屏帧解码失败'));
|
||||
img.src = frame.image || '';
|
||||
});
|
||||
}
|
||||
|
||||
export function RdpAuditViewer({ open, onOpenChange, sessionId, mode }: RdpAuditViewerProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const timerRef = useRef<number | null>(null);
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [status, setStatus] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [canvasSize, setCanvasSize] = useState({ width: 1024, height: 800 });
|
||||
const [frames, setFrames] = useState<RdpFrame[]>([]);
|
||||
const [index, setIndex] = useState(0);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
|
||||
const playableFrames = useMemo(() => frames.filter((f) => f.type === 'bitmap' && f.image), [frames]);
|
||||
|
||||
const drawRaw = async (data: Blob | ArrayBuffer) => {
|
||||
const frame = await parseRawFrame(data);
|
||||
if (!frame) return;
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext('2d');
|
||||
if (!canvas || !ctx) return;
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
const pixels = new Uint8ClampedArray(frame.rgba.length);
|
||||
pixels.set(frame.rgba);
|
||||
ctx.putImageData(new ImageData(pixels, frame.width, frame.height), frame.x, frame.y);
|
||||
};
|
||||
|
||||
const drawReplay = async (nextIndex: number) => {
|
||||
const frame = playableFrames[nextIndex];
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext('2d');
|
||||
if (!frame || !canvas || !ctx) return;
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
await drawImageFrame(ctx, frame);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !sessionId) return;
|
||||
setStatus(mode === 'live' ? '正在连接 RDP 实时审计...' : '正在加载 RDP 录屏...');
|
||||
setLoading(true);
|
||||
setFrames([]);
|
||||
setIndex(0);
|
||||
setPlaying(false);
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext('2d');
|
||||
if (canvas && ctx) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
if (mode === 'live') {
|
||||
const token = getAuthToken();
|
||||
const ws = new WebSocket(`${getWsBase()}/ws/rdp-audit/${sessionId}?token=${encodeURIComponent(token)}`);
|
||||
ws.binaryType = 'arraybuffer';
|
||||
wsRef.current = ws;
|
||||
ws.onopen = () => { setLoading(false); setStatus(''); };
|
||||
ws.onmessage = (event) => {
|
||||
if (typeof event.data !== 'string') {
|
||||
void drawRaw(event.data as Blob | ArrayBuffer);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const frame = JSON.parse(event.data) as RdpFrame;
|
||||
if (frame.type === 'session' && frame.width && frame.height) {
|
||||
setCanvasSize({ width: frame.width, height: frame.height });
|
||||
} else if (frame.type === 'status' || frame.type === 'error') {
|
||||
setStatus(frame.message || '');
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
ws.onerror = () => { setLoading(false); setStatus('RDP 实时审计连接失败'); };
|
||||
ws.onclose = () => setStatus((prev) => prev || 'RDP 实时审计已断开');
|
||||
return () => {
|
||||
ws.close();
|
||||
wsRef.current = null;
|
||||
};
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
rdpSessionApi.getRecord(sessionId)
|
||||
.then((raw) => {
|
||||
if (cancelled) return;
|
||||
const text = typeof raw === 'string' ? raw : String(raw || '');
|
||||
const record = JSON.parse(text || '{}') as RdpRecord;
|
||||
const list = (record.frames || []).filter((f) => f.type === 'bitmap' && f.image);
|
||||
setFrames(list);
|
||||
setStatus(list.length ? '' : '该 RDP 会话没有可播放画面帧');
|
||||
setPlaying(list.length > 0);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setStatus('RDP 录屏加载失败');
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
rdpSessionApi.logReplayView(sessionId).catch(() => {});
|
||||
return () => { cancelled = true; };
|
||||
}, [open, sessionId, mode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!playing || mode !== 'replay') return;
|
||||
timerRef.current = window.setInterval(() => {
|
||||
setIndex((current) => {
|
||||
const next = current + 1;
|
||||
if (next >= playableFrames.length) {
|
||||
setPlaying(false);
|
||||
return current;
|
||||
}
|
||||
void drawReplay(next);
|
||||
return next;
|
||||
});
|
||||
}, FRAME_MS);
|
||||
return () => {
|
||||
if (timerRef.current !== null) window.clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
};
|
||||
}, [playing, mode, playableFrames.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === 'replay' && playableFrames.length > 0) void drawReplay(index);
|
||||
}, [index, playableFrames.length, mode]);
|
||||
|
||||
const displayHeight = fullscreen ? 'calc(100vh - 88px)' : '560px';
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className={cn(
|
||||
'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0 gap-0 overflow-hidden',
|
||||
fullscreen ? '!max-w-none !w-screen !h-screen !rounded-none !translate-x-0 !translate-y-0 !left-0 !top-0' : '',
|
||||
)}
|
||||
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '1120px', width: '94vw' }}
|
||||
>
|
||||
<DialogTitle className="sr-only">{mode === 'live' ? 'RDP 实时审计' : 'RDP 历史回放'}</DialogTitle>
|
||||
<DialogDescription className="sr-only">Windows RDP 图形会话审计查看</DialogDescription>
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
|
||||
<div className="text-sm font-medium text-[var(--dg-text-primary)]">
|
||||
{mode === 'live' ? 'RDP 实时审计' : `RDP 历史回放 #${sessionId || ''}`}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<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>
|
||||
<div className="relative bg-black flex items-center justify-center" style={{ height: displayHeight }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={canvasSize.width}
|
||||
height={canvasSize.height}
|
||||
className="max-w-full max-h-full outline-none"
|
||||
style={{ aspectRatio: `${canvasSize.width} / ${canvasSize.height}` }}
|
||||
/>
|
||||
{loading && <Loader2 className="absolute h-7 w-7 animate-spin text-white/80" />}
|
||||
{status && <div className="absolute left-4 bottom-4 max-w-[70%] rounded bg-black/70 px-3 py-2 text-xs text-white">{status}</div>}
|
||||
</div>
|
||||
{mode === 'replay' && (
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-t border-[var(--dg-border)]">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={playableFrames.length === 0} onClick={() => setPlaying((v) => !v)}>
|
||||
{playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={playableFrames.length === 0} onClick={() => { setIndex(0); setPlaying(false); }}>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Slider
|
||||
value={[index]}
|
||||
min={0}
|
||||
max={Math.max(playableFrames.length - 1, 0)}
|
||||
step={1}
|
||||
onValueChange={(v) => { setPlaying(false); setIndex(v[0] || 0); }}
|
||||
className="flex-1"
|
||||
/>
|
||||
<span className="text-xs dg-text-muted tabular-nums">{playableFrames.length ? index + 1 : 0} / {playableFrames.length}</span>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user