refactor(frontend): P1-P2 架构统一 — utils/hooks/api 模块化

P1: - utils/storage.ts、theme.ts、validate.ts + index 统一出口 - request/store/useTheme 接入 storage；清零 confirm/alert - PipelineManager、TerminalAuditTab 拆分子模块（<700行红线） P2: - api/monitor、api/deploy 子目录化 - hooks/api 扩展：servers/pipelines/alerts/audit/sessionCommands - PipelineManager、AuditOperationsTab 接入 TanStack Query
2026-06-26 00:18:14 +08:00
1 parent d19a03d427
commit f45e203e21
@@ -0,0 +1,247 @@
+// 终端审计 — 在线会话子面板 // Logan.Li
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Search, RefreshCw, XOctagon, Eye, Activity, Timer, TimerOff } from 'lucide-react';
+import { useConfirm } from '@/components/ui/confirm-dialog';
+import { LiveMonitorDialog } from '@/components/system/LiveMonitorDialog';
+import { useTerminalSessions, useTerminalSessionMutations } from '@/hooks/api';
+import type { TerminalSession } from './types';
+import { formatDuration, getStatusBadge } from './helpers';
+
+const REFRESH_SEC = 10;
+
+interface ActiveSessionsPanelProps {
+  userToggledOff: boolean;
+  onUserToggledOff: () => void;
+}
+
+function useElapsedTimer(startTime: string | undefined): number {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (!startTime) return;
+    const start = new Date(startTime).getTime();
+    const tick = () => setElapsed(Math.floor((Date.now() - start) / 1000));
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [startTime]);
+  return elapsed;
+}
+
+function ActiveSessionRow({
+  session,
+  onKill,
+  onMonitor,
+}: {
+  session: TerminalSession;
+  onKill: (id: number, username: string) => void;
+  onMonitor: (id: number) => void;
+}) {
+  const elapsed = useElapsedTimer(session.start_time);
+
+  return (
+    <TableRow className="border-slate-800 hover:bg-slate-800/50">
+      <TableCell>
+        <span className="text-sm text-slate-400">{session.id}</span>
+      </TableCell>
+      <TableCell>
+        <span className="text-sm text-slate-200">{session.username || '--'}</span>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-col">
+          <span className="text-sm text-slate-200">{session.server_name || '--'}</span>
+          <span className="text-xs text-slate-500">{session.server_ip}</span>
+        </div>
+      </TableCell>
+      <TableCell>
+        <span className="text-sm text-slate-400">{session.server_port}</span>
+      </TableCell>
+      <TableCell>
+        <span className="text-sm text-slate-400">
+          {session.start_time ? new Date(session.start_time).toLocaleString() : '--'}
+        </span>
+      </TableCell>
+      <TableCell>
+        <span className="text-sm text-emerald-400 font-mono">{formatDuration(elapsed)}</span>
+      </TableCell>
+      <TableCell>{getStatusBadge(session.status)}</TableCell>
+      <TableCell>
+        <div className="flex items-center justify-end gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800"
+            onClick={() => onKill(session.id, session.username)}
+            title="阻断会话"
+          >
+            <XOctagon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-slate-400 hover:text-blue-400 hover:bg-slate-800"
+            onClick={() => onMonitor(session.id)}
+            title="实时查看"
+          >
+            <Eye className="h-4 w-4" />
+          </Button>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function ActiveSessionsPanel({ userToggledOff, onUserToggledOff }: ActiveSessionsPanelProps) {
+  const confirm = useConfirm();
+  const { killMutation } = useTerminalSessionMutations();
+  const { data: sessions = [], isLoading, refetch } = useTerminalSessions({
+    page: 1,
+    page_size: 100,
+    status: 'active',
+  });
+
+  const [keyword, setKeyword] = useState('');
+  const [autoRefresh, setAutoRefresh] = useState(() => !userToggledOff);
+  const [monitorOpen, setMonitorOpen] = useState(false);
+  const [monitorSessionId, setMonitorSessionId] = useState<number | null>(null);
+
+  // 用户未手动关闭时，回到在线会话自动开启刷新
+  useEffect(() => {
+    if (!userToggledOff) setAutoRefresh(true);
+  }, [userToggledOff]);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const id = setInterval(() => refetch(), REFRESH_SEC * 1000);
+    return () => clearInterval(id);
+  }, [autoRefresh, refetch]);
+
+  const filtered = sessions.filter((s) => {
+    const kw = keyword.toLowerCase();
+    return (
+      !kw ||
+      (s.username || '').toLowerCase().includes(kw) ||
+      (s.server_name || '').toLowerCase().includes(kw) ||
+      (s.server_ip || '').toLowerCase().includes(kw)
+    );
+  });
+
+  const handleKill = async (id: number, username: string) => {
+    const ok = await confirm({
+      title: '阻断会话',
+      description: `确认强制断开用户「${username}」的当前会话吗？`,
+      confirmText: '阻断',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+    try {
+      await killMutation.mutateAsync(id);
+    } catch {
+      /* noop */
+    }
+  };
+
+  const openMonitor = (sessionId: number) => {
+    setMonitorSessionId(sessionId);
+    setMonitorOpen(true);
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative w-64">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Input
+            placeholder="搜索用户/服务器..."
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+          />
+        </div>
+        <Button
+          variant="outline"
+          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          onClick={() => refetch()}
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          刷新
+        </Button>
+        <Button
+          variant={autoRefresh ? 'default' : 'outline'}
+          className={
+            autoRefresh
+              ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
+              : 'border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800'
+          }
+          onClick={() => {
+            if (autoRefresh) onUserToggledOff();
+            setAutoRefresh(!autoRefresh);
+          }}
+          title={autoRefresh ? `每 ${REFRESH_SEC}s 自动刷新 · 点击关闭` : '点击开启自动刷新'}
+        >
+          {autoRefresh ? (
+            <>
+              <Timer className="h-4 w-4 mr-1.5 animate-pulse" />
+              {REFRESH_SEC}s
+            </>
+          ) : (
+            <>
+              <TimerOff className="h-4 w-4 mr-2" />
+              自动刷新
+            </>
+          )}
+        </Button>
+      </div>
+
+      <Card className="bg-slate-900 border-slate-800">
+        <CardContent className="p-0">
+          <div className="border-t border-slate-800">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-16">
+                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+                <Activity className="h-8 w-8 mb-3 opacity-40" />
+                <p className="text-sm">暂无在线会话</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow className="border-slate-800 hover:bg-transparent">
+                    <TableHead className="text-slate-400">ID</TableHead>
+                    <TableHead className="text-slate-400">用户</TableHead>
+                    <TableHead className="text-slate-400">目标服务器</TableHead>
+                    <TableHead className="text-slate-400">端口</TableHead>
+                    <TableHead className="text-slate-400">开始时间</TableHead>
+                    <TableHead className="text-slate-400">时长</TableHead>
+                    <TableHead className="text-slate-400">状态</TableHead>
+                    <TableHead className="text-slate-400 text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filtered.map((s) => (
+                    <ActiveSessionRow key={s.id} session={s} onKill={handleKill} onMonitor={openMonitor} />
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <LiveMonitorDialog open={monitorOpen} onOpenChange={setMonitorOpen} sessionId={monitorSessionId} />
+    </>
+  );
+}
@@ -0,0 +1,170 @@
+// 终端审计 — 历史会话子面板 // Logan.Li
+
+import { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Search, RefreshCw, Play, Download, Monitor } from 'lucide-react';
+import { terminalSessionApi } from '@/api';
+import { ReplayDialog } from '@/components/system/ReplayDialog';
+import { useTerminalSessions } from '@/hooks/api';
+import { formatDuration, getStatusBadge } from './helpers';
+
+export function HistorySessionsPanel() {
+  const { data: sessions = [], isLoading, refetch } = useTerminalSessions({
+    page: 1,
+    page_size: 100,
+    status: 'closed',
+  });
+
+  const [keyword, setKeyword] = useState('');
+  const [replayId, setReplayId] = useState<number | null>(null);
+  const [replayOpen, setReplayOpen] = useState(false);
+
+  const filtered = sessions.filter((s) => {
+    const kw = keyword.toLowerCase();
+    return (
+      !kw ||
+      (s.username || '').toLowerCase().includes(kw) ||
+      (s.server_name || '').toLowerCase().includes(kw) ||
+      (s.server_ip || '').toLowerCase().includes(kw)
+    );
+  });
+
+  const openReplay = (id: number) => {
+    setReplayId(id);
+    setReplayOpen(true);
+  };
+
+  const handleDownload = async (id: number) => {
+    try {
+      await terminalSessionApi.download(id);
+    } catch {
+      // download error is handled in http.download
+    }
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative w-64">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Input
+            placeholder="搜索用户/服务器/IP..."
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+          />
+        </div>
+        <Button
+          variant="outline"
+          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          onClick={() => refetch()}
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          刷新
+        </Button>
+      </div>
+
+      <Card className="bg-slate-900 border-slate-800">
+        <CardContent className="p-0">
+          <div className="border-t border-slate-800">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-16">
+                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+                <Monitor className="h-8 w-8 mb-3 opacity-40" />
+                <p className="text-sm">暂无历史会话</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow className="border-slate-800 hover:bg-transparent">
+                    <TableHead className="text-slate-400">ID</TableHead>
+                    <TableHead className="text-slate-400">用户</TableHead>
+                    <TableHead className="text-slate-400">目标服务器</TableHead>
+                    <TableHead className="text-slate-400">端口</TableHead>
+                    <TableHead className="text-slate-400">开始时间</TableHead>
+                    <TableHead className="text-slate-400">结束时间</TableHead>
+                    <TableHead className="text-slate-400">时长</TableHead>
+                    <TableHead className="text-slate-400">状态</TableHead>
+                    <TableHead className="text-slate-400 text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filtered.map((s) => (
+                    <TableRow key={s.id} className="border-slate-800 hover:bg-slate-800/50">
+                      <TableCell>
+                        <span className="text-sm text-slate-400">{s.id}</span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-200">{s.username || '--'}</span>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <span className="text-sm text-slate-200">{s.server_name || '--'}</span>
+                          <span className="text-xs text-slate-500">{s.server_ip}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-400">{s.server_port}</span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-400">
+                          {s.start_time ? new Date(s.start_time).toLocaleString() : '--'}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-400">
+                          {s.end_time ? new Date(s.end_time).toLocaleString() : '--'}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-300">{formatDuration(s.duration)}</span>
+                      </TableCell>
+                      <TableCell>{getStatusBadge(s.status)}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-slate-400 hover:text-blue-400 hover:bg-slate-800"
+                            onClick={() => openReplay(s.id)}
+                            title="回放"
+                          >
+                            <Play className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-slate-400 hover:text-green-400 hover:bg-slate-800"
+                            onClick={() => handleDownload(s.id)}
+                            title="下载录制"
+                          >
+                            <Download className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <ReplayDialog open={replayOpen} onOpenChange={setReplayOpen} sessionId={replayId} />
+    </>
+  );
+}
@@ -0,0 +1,126 @@
+// 终端审计 — 会话命令子面板 // Logan.Li
+
+import { useMemo, useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Search, RefreshCw } from 'lucide-react';
+import { useSessionCommands } from '@/hooks/api';
+import { formatSize } from './helpers';
+
+export function SessionCommandsPanel() {
+  const [keyword, setKeyword] = useState('');
+  const [sessionIdInput, setSessionIdInput] = useState('');
+
+  const queryParams = useMemo(
+    () => ({
+      page: 1,
+      page_size: 200,
+      ...(sessionIdInput ? { session_id: Number(sessionIdInput) } : {}),
+    }),
+    [sessionIdInput],
+  );
+
+  const { data: commands = [], isLoading, refetch } = useSessionCommands(queryParams);
+
+  const filtered = commands.filter((c) => {
+    const kw = keyword.toLowerCase();
+    return (
+      !kw ||
+      (c.username || '').toLowerCase().includes(kw) ||
+      (c.command || '').toLowerCase().includes(kw)
+    );
+  });
+
+  return (
+    <>
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative w-64">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <Input
+            placeholder="搜索用户/命令..."
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+          />
+        </div>
+        <Input
+          placeholder="会话 ID（可选）"
+          value={sessionIdInput}
+          onChange={(e) => setSessionIdInput(e.target.value)}
+          className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+        />
+        <Button
+          variant="outline"
+          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          onClick={() => refetch()}
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          刷新
+        </Button>
+      </div>
+
+      <Card className="bg-slate-900 border-slate-800">
+        <CardContent className="p-0">
+          <div className="border-t border-slate-800">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-16">
+                <div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
+                <Search className="h-8 w-8 mb-3 opacity-40" />
+                <p className="text-sm">暂无会话命令记录</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow className="border-slate-800 hover:bg-transparent">
+                    <TableHead className="text-slate-400">时间</TableHead>
+                    <TableHead className="text-slate-400">用户</TableHead>
+                    <TableHead className="text-slate-400">命令</TableHead>
+                    <TableHead className="text-slate-400">输出大小</TableHead>
+                    <TableHead className="text-slate-400">关联会话</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filtered.map((c) => (
+                    <TableRow key={c.id} className="border-slate-800 hover:bg-slate-800/50">
+                      <TableCell>
+                        <span className="text-sm text-slate-400">
+                          {c.created_at ? new Date(c.created_at).toLocaleString() : '--'}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-200">{c.username || '--'}</span>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded max-w-[400px] truncate block">
+                          {c.command || '--'}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-400">{formatSize(c.output_size)}</span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-xs text-slate-500">#{c.session_id}</span>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+}
@@ -0,0 +1,44 @@
+// 终端审计 — 展示辅助 // Logan.Li
+
+import { Badge } from '@/components/ui/badge';
+
+export function formatDuration(sec: number): string {
+  if (!sec || sec < 0) return '--';
+  if (sec < 60) return `${sec}秒`;
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  if (m < 60) return `${m}分${s > 0 ? `${s}秒` : ''}`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return `${h}时${rm > 0 ? `${rm}分` : ''}`;
+}
+
+export function formatSize(bytes: number): string {
+  if (!bytes) return '0 B';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+}
+
+export function getStatusBadge(status: string) {
+  if (status === 'active') {
+    return (
+      <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 inline-block animate-pulse" />
+        活动中
+      </Badge>
+    );
+  }
+  if (status === 'failed') {
+    return (
+      <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+        失败
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+      已关闭
+    </Badge>
+  );
+}
@@ -0,0 +1,29 @@
+// 终端审计 — 类型定义 // Logan.Li
+
+export interface TerminalSession {
+  id: number;
+  user_id?: number;
+  username: string;
+  server_id: number;
+  server_name: string;
+  server_ip: string;
+  server_port: number;
+  client_ip: string;
+  status: string;
+  duration: number;
+  record_size: number;
+  start_time: string;
+  end_time?: string | null;
+}
+
+export interface SessionCommand {
+  id: number;
+  session_id: number;
+  username: string;
+  command: string;
+  exit_code: number;
+  output_size: number;
+  created_at: string;
+}
+
+export type SubTabId = 'active' | 'history' | 'commands';