aiops/frontend/src/components/system/SystemLogsTab.tsx

import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Search, RefreshCw } from 'lucide-react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { operationLogs } from '@/mocks/data';
import type { OperationLog } from '@/types';

interface SystemLogsTabProps {
  searchQuery: string;
  setSearchQuery: (v: string) => void;
}

export function SystemLogsTab({ searchQuery, setSearchQuery }: SystemLogsTabProps) {
  const filteredLogs = operationLogs.filter(
    (log) =>
      log.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.module.toLowerCase().includes(searchQuery.toLowerCase()) ||
      log.action.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const getLogResultBadge = (result: OperationLog['result']) => {
    return result === 'success' ? (
      <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
        成功
      </Badge>
    ) : (
      <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
        失败
      </Badge>
    );
  };

  return (
    <>
      {/* Filters */}
      <div className="flex items-center gap-3">
        <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={searchQuery}
            onChange={(e) => setSearchQuery(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">
          <RefreshCw className="h-4 w-4 mr-2" />
          刷新
        </Button>
      </div>

      {/* Logs Table */}
      <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>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </>
  );
}