修复了一些已知问题

frontend/src/pages/Security.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
-import { RefreshCw } from 'lucide-react'
-import { getSecurityAlerts, SecurityAlert } from '../services/api'
+import { FileText, Power, RefreshCw, X } from 'lucide-react'
+import { getSecurityAlerts, getSecurityLogs, getSecuritySettings, SecurityAlert, SecurityLog, updateSecuritySettings } from '../services/api'
 
 const typeLabels: Record<string, string> = {
   port_scan: '端口扫描',
@@ -23,12 +23,18 @@ const severityLabels: Record<string, string> = {
 
 export default function Security() {
   const [alerts, setAlerts] = useState<SecurityAlert[]>([])
+  const [autoShutdown, setAutoShutdown] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [savingSettings, setSavingSettings] = useState(false)
+  const [logAlert, setLogAlert] = useState<SecurityAlert | null>(null)
+  const [logs, setLogs] = useState<SecurityLog[]>([])
+  const [logsLoading, setLogsLoading] = useState(false)
 
   const fetchData = useCallback(async () => {
     try {
-      const alertRes = await getSecurityAlerts()
+      const [alertRes, settingsRes] = await Promise.all([getSecurityAlerts(), getSecuritySettings()])
       if (alertRes.data.data) setAlerts(alertRes.data.data)
+      if (settingsRes.data.data) setAutoShutdown(settingsRes.data.data.auto_shutdown)
     } catch (err) {
       console.error(err)
     } finally {
@@ -42,6 +48,36 @@ export default function Security() {
     return () => clearInterval(interval)
   }, [fetchData])
 
+  const handleAutoShutdownChange = async () => {
+    const next = !autoShutdown
+    setAutoShutdown(next)
+    setSavingSettings(true)
+    try {
+      const res = await updateSecuritySettings({ auto_shutdown: next })
+      if (res.data.data) setAutoShutdown(res.data.data.auto_shutdown)
+    } catch (err) {
+      console.error(err)
+      setAutoShutdown(!next)
+    } finally {
+      setSavingSettings(false)
+    }
+  }
+
+  const openLogs = async (alert: SecurityAlert) => {
+    setLogAlert(alert)
+    setLogs([])
+    setLogsLoading(true)
+    try {
+      const res = await getSecurityLogs(alert.container_name)
+      setLogs(filterRelatedLogs(res.data.data || [], alert))
+    } catch (err) {
+      console.error(err)
+      setLogs([])
+    } finally {
+      setLogsLoading(false)
+    }
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -52,15 +88,33 @@ export default function Security() {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-xl font-semibold text-black">安全告警</h1>
-        <button
-          onClick={fetchData}
-          className="inline-flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 text-sm"
-        >
-          <RefreshCw className="w-4 h-4" />
-          刷新
-        </button>
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            role="switch"
+            aria-checked={autoShutdown}
+            onClick={handleAutoShutdownChange}
+            disabled={savingSettings}
+            title="告警自动关机"
+            className={`inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm transition-colors disabled:opacity-60 ${
+              autoShutdown
+                ? 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100'
+                : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
+            }`}
+          >
+            <Power className="w-4 h-4" />
+            <span>{autoShutdown ? '自动关机已开' : '自动关机已关'}</span>
+          </button>
+          <button
+            onClick={fetchData}
+            className="inline-flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 text-sm"
+          >
+            <RefreshCw className="w-4 h-4" />
+            刷新
+          </button>
+        </div>
       </div>
 
       <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
@@ -93,12 +147,24 @@ export default function Security() {
                     </td>
                     <td className="px-4 py-2.5 text-gray-800 whitespace-nowrap">{typeLabels[alert.type] || alert.type}</td>
                     <td className="px-4 py-2.5 font-mono text-xs text-gray-700 whitespace-nowrap">{alert.container_name}</td>
-                    <td className="px-4 py-2.5 font-mono text-xs text-gray-600 whitespace-nowrap">{alert.source_ip}</td>
+                    <td className="px-4 py-2.5 font-mono text-xs text-gray-600 whitespace-nowrap">{alert.source_ip || '-'}</td>
                     <td className="px-4 py-2.5 font-mono text-xs text-gray-600 whitespace-nowrap">
                       {formatTarget(alert)}
                     </td>
                     <td className="px-4 py-2.5 text-gray-600 whitespace-nowrap">{alert.count}</td>
-                    <td className="px-4 py-2.5 text-gray-600 min-w-[260px]">{alert.detail}</td>
+                    <td className="px-4 py-2.5 text-gray-600 min-w-[300px]">
+                      <div className="flex items-center gap-2">
+                        <span className="min-w-0 flex-1">{alert.detail}</span>
+                        <button
+                          onClick={() => openLogs(alert)}
+                          className="inline-flex shrink-0 items-center gap-1 rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-700 hover:bg-gray-50"
+                          title="查看相关记录"
+                        >
+                          <FileText className="h-3.5 w-3.5" />
+                          查看
+                        </button>
+                      </div>
+                    </td>
                   </tr>
                 ))}
               </tbody>
@@ -106,6 +172,69 @@ export default function Security() {
           </div>
         )}
       </div>
+
+      {logAlert && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+          <div className="w-full max-w-4xl overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl">
+            <div className="flex items-start justify-between gap-3 border-b border-gray-200 px-4 py-3">
+              <div>
+                <h3 className="text-sm font-semibold text-black">相关连接记录</h3>
+                <p className="mt-1 text-xs text-gray-500">
+                  {logAlert.container_name} · {typeLabels[logAlert.type] || logAlert.type} · {formatTarget(logAlert)}
+                </p>
+              </div>
+              <button
+                onClick={() => setLogAlert(null)}
+                className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-black"
+                title="关闭"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="max-h-[70vh] overflow-auto">
+              {logAlert.log_line && (
+                <div className="border-b border-gray-100 bg-gray-50 px-4 py-3">
+                  <div className="mb-1 text-xs font-medium text-gray-600">告警原始记录</div>
+                  <pre className="whitespace-pre-wrap break-all rounded border border-gray-200 bg-white p-3 text-xs text-gray-700">{logAlert.log_line}</pre>
+                </div>
+              )}
+              {logsLoading ? (
+                <div className="p-8 text-center text-sm text-gray-500">正在加载连接记录...</div>
+              ) : logs.length === 0 ? (
+                <div className="p-8 text-center text-sm text-gray-500">
+                  暂无可用连接记录。历史告警对应的 conntrack 记录可能已经过期。
+                </div>
+              ) : (
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-gray-100 bg-gray-50 text-left text-xs font-medium text-gray-500">
+                      <th className="px-4 py-2.5">协议</th>
+                      <th className="px-4 py-2.5">状态</th>
+                      <th className="px-4 py-2.5">源地址</th>
+                      <th className="px-4 py-2.5">目标地址</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100">
+                    {logs.map((log, index) => (
+                      <tr key={`${log.src_ip}-${log.src_port}-${log.dst_ip}-${log.dst_port}-${index}`}>
+                        <td className="px-4 py-2.5 font-mono text-xs text-gray-700">{log.protocol || '-'}</td>
+                        <td className="px-4 py-2.5 font-mono text-xs text-gray-700">{log.state || '-'}</td>
+                        <td className="px-4 py-2.5 font-mono text-xs text-gray-600">
+                          {formatEndpoint(log.src_ip, log.src_port)}
+                        </td>
+                        <td className="px-4 py-2.5 font-mono text-xs text-gray-600">
+                          {formatEndpoint(log.dst_ip, log.dst_port)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -129,3 +258,17 @@ function formatTarget(alert: SecurityAlert): string {
   if (!alert.target_ip) return '-'
   return alert.target_port > 0 ? `${alert.target_ip}:${alert.target_port}` : alert.target_ip
 }
+
+function filterRelatedLogs(logs: SecurityLog[], alert: SecurityAlert): SecurityLog[] {
+  return logs.filter((log) => {
+    if (alert.source_ip && log.src_ip !== alert.source_ip) return false
+    if (alert.target_ip && alert.target_ip !== '*' && log.dst_ip !== alert.target_ip) return false
+    if (alert.target_port > 0 && log.dst_port !== alert.target_port) return false
+    return true
+  })
+}
+
+function formatEndpoint(ip: string, port: number): string {
+  if (!ip) return '-'
+  return port > 0 ? `${ip}:${port}` : ip
+}