feat: 清除全部mock数据，Ansible/日志/告警中心/角色权限接真实API；移除SQL审计(不属于项目定位)

frontend/src/components/system/SystemLogsTab.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -11,7 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { operationLogs } from '@/mocks/data';
+import { auditApi } from '@/services/api';
 import type { OperationLog } from '@/types';
 
 interface SystemLogsTabProps {
@@ -19,8 +20,45 @@ interface SystemLogsTabProps {
   setSearchQuery: (v: string) => void;
 }
 
+// 将后端审计日志规范化为前端 OperationLog 类型 // Logan.Li
+function normalizeLog(raw: any): OperationLog {
+  return {
+    id: String(raw.id ?? ''),
+    userId: String(raw.user_id ?? raw.userId ?? ''),
+    username: raw.username ?? '',
+    module: raw.module ?? raw.resource ?? '',
+    action: raw.action ?? '',
+    resource: raw.resource ?? '',
+    ip: raw.ip ?? '',
+    userAgent: raw.user_agent ?? raw.userAgent ?? '',
+    result: raw.result === 'failure' ? 'failure' : 'success',
+    message: raw.message ?? raw.detail,
+    createdAt: raw.createdAt ?? raw.created_at ?? '',
+  };
+}
+
 export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProps) {
-  const filteredLogs = operationLogs.filter(
+  const [logs, setLogs] = useState<OperationLog[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchLogs = async () => {
+    setLoading(true);
+    try {
+      const resp = await auditApi.getLogs({ page: 1, page_size: 50 });
+      const list = resp?.list ?? [];
+      setLogs(list.map(normalizeLog));
+    } catch {
+      setLogs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  const filteredLogs = logs.filter(
     (log) =>
       log.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
       log.module.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -52,7 +90,11 @@ export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProp
             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">
+        <Button
+          variant="outline"
+          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          onClick={fetchLogs}
+        >
           <RefreshCw className="h-4 w-4 mr-2" />
           刷新
         </Button>
@@ -62,48 +104,59 @@ export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProp
       <Card className="bg-slate-900 border-slate-800">
         <CardContent className="p-0">
           <div className="border-t border-slate-800">
-            <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>
-                  <TableHead className="text-slate-400">IP地址</TableHead>
-                  <TableHead className="text-slate-400">结果</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredLogs.map((log) => (
-                  <TableRow key={log.id} className="border-slate-800 hover:bg-slate-800/50">
-                    <TableCell>
-                      <span className="text-sm text-slate-400">
-                        {new Date(log.createdAt).toLocaleString()}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-200">{log.username}</span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-300">{log.module}</span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-300">{log.action}</span>
-                    </TableCell>
-                    <TableCell>
-                      <code className="text-xs text-slate-400 bg-slate-800 px-2 py-0.5 rounded">
-                        {log.resource}
-                      </code>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-400">{log.ip}</span>
-                    </TableCell>
-                    <TableCell>{getLogResultBadge(log.result)}</TableCell>
+            {loading ? (
+              <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>
+            ) : filteredLogs.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>
+                    <TableHead className="text-slate-400">IP地址</TableHead>
+                    <TableHead className="text-slate-400">结果</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {filteredLogs.map((log) => (
+                    <TableRow key={log.id} className="border-slate-800 hover:bg-slate-800/50">
+                      <TableCell>
+                        <span className="text-sm text-slate-400">
+                          {log.createdAt ? new Date(log.createdAt).toLocaleString() : '--'}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-200">{log.username || '--'}</span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-300">{log.module || '--'}</span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-300">{log.action || '--'}</span>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-xs text-slate-400 bg-slate-800 px-2 py-0.5 rounded">
+                          {log.resource || '--'}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-400">{log.ip || '--'}</span>
+                      </TableCell>
+                      <TableCell>{getLogResultBadge(log.result)}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
           </div>
         </CardContent>
       </Card>