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,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>
+    </>
+  );
+}