refactor(frontend): API 子模块化、大组件拆分与 TanStack Query hooks

P1: kubernetes/system API 拆为子目录模块，导出工具下沉到 lib/export-utils，
    http 统一 buildApiUrl/getWsBase；HostMonitor、DeploymentEdit* 拆至子组件。

P2: 新增 hooks/api（queryKeys、useTerminalSessions、useHostMonitor），
    TerminalSessionsTab 与 HostMonitor 接入 TanStack Query。

P3: 保留 services/api 路径，未迁移至 api/ 目录。

frontend/src/components/system/TerminalSessionsTab.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -12,26 +12,10 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Search, RefreshCw, Trash2, Play } from 'lucide-react';
-import { terminalSessionApi } from '@/services/api';
+import { useTerminalSessions, useTerminalSessionMutations, type TerminalSession } from '@/hooks/api/useTerminalSessions';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { ReplayDialog } from './ReplayDialog';
 
-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;
-}
-
 function formatDuration(sec: number): string {
   if (!sec || sec < 0) return '--';
   if (sec < 60) return `${sec}秒`;
@@ -55,30 +39,14 @@ function formatSize(bytes: number): string {
  */
 export function TerminalSessionsTab() {
   const confirm = useConfirm();
-  const [sessions, setSessions] = useState<TerminalSession[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: sessions = [], isLoading: loading, refetch } = useTerminalSessions({ page: 1, page_size: 100 });
+  const { deleteMutation, batchDeleteMutation } = useTerminalSessionMutations();
   const [keyword, setKeyword] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
   const [selected, setSelected] = useState<Set<number>>(new Set());
   const [replayId, setReplayId] = useState<number | null>(null);
   const [replayOpen, setReplayOpen] = useState(false);
 
-  const fetchSessions = async () => {
-    setLoading(true);
-    try {
-      const resp = await terminalSessionApi.list({ page: 1, page_size: 100 }) as any;
-      setSessions(resp?.list ?? []);
-    } catch {
-      setSessions([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchSessions();
-  }, []);
-
   const filtered = sessions.filter((s) => {
     const kw = keyword.toLowerCase();
     const kwMatch =
@@ -142,13 +110,12 @@ export function TerminalSessionsTab() {
     });
     if (!ok) return;
     try {
-      await terminalSessionApi.delete(id);
+      await deleteMutation.mutateAsync(id);
       setSelected((prev) => {
         const next = new Set(prev);
         next.delete(id);
         return next;
       });
-      await fetchSessions();
     } catch {
       /* noop */
     }
@@ -164,9 +131,8 @@ export function TerminalSessionsTab() {
     });
     if (!ok) return;
     try {
-      await terminalSessionApi.batchDelete(Array.from(selected));
+      await batchDeleteMutation.mutateAsync(Array.from(selected));
       setSelected(new Set());
-      await fetchSessions();
     } catch {
       /* noop */
     }
@@ -207,7 +173,7 @@ export function TerminalSessionsTab() {
         <Button
           variant="outline"
           className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
-          onClick={fetchSessions}
+          onClick={() => refetch()}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
           刷新