feat(ux): U2 统一 DataTable 组件 — 封装排序/搜索/分页/导出/选择/列可见性通用表格 + 迁移 RegionManager/LoginLogsTab/LogDatasourcePage 3 个页面

frontend/src/pages/LoginLogsTab.tsx

@@ -1,18 +1,10 @@
-// 登录日志 Tab — 用户登录记录列表（参考 opsx-web-lite） // Logan.Li
+// 登录日志 Tab — 用户登录记录列表（参考 opsx-web-lite）
 import { useState, useEffect, useCallback } from 'react';
 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 {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Search, RefreshCw, LogIn, Monitor, Globe } from 'lucide-react';
+import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
+import { RefreshCw, LogIn, Monitor, Globe } from 'lucide-react';
 import { loginLogApi } from '@/api';
 import type { JsonData } from '@/types/common';
 
@@ -48,16 +40,25 @@ function normalizeLoginLog(raw: JsonData): LoginLog {
   };
 }
 
+function getLoginTypeLabel(type: string) {
+  switch (type) {
+    case 'password': return '密码登录';
+    case 'ldap': return 'LDAP';
+    case 'token': return 'Token';
+    case 'oauth': return 'OAuth';
+    default: return type || '密码登录';
+  }
+}
+
 export function LoginLogsTab() {
   const [logs, setLogs] = useState<LoginLog[]>([]);
   const [loading, setLoading] = useState(true);
-  const [keyword, setKeyword] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
 
   const fetchLogs = useCallback(async () => {
     setLoading(true);
     try {
-      const params: JsonData = { page: 1, page_size: 100 };
+      const params: JsonData = { page: 1, page_size: 500 };
       if (statusFilter) params.status = statusFilter === 'fail' ? 'failed' : statusFilter;
       const resp = (await loginLogApi.list(params)) as JsonData;
       const list = resp?.list ?? [];
@@ -73,57 +74,66 @@ export function LoginLogsTab() {
     fetchLogs();
   }, [fetchLogs]);
 
-  const filteredLogs = logs.filter((log) => {
-    const kw = keyword.toLowerCase();
-    return (
-      !kw ||
-      (log.username || '').toLowerCase().includes(kw) ||
-      (log.ip || '').toLowerCase().includes(kw) ||
-      (log.location || '').toLowerCase().includes(kw) ||
-      (log.user_agent || '').toLowerCase().includes(kw)
-    );
-  });
-
-  const getStatusBadge = (status: LoginLog['status'], reason?: string) => {
-    return status === '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"
-        title={reason || undefined}
-      >
-        {reason || '失败'}
-      </Badge>
-    );
-  };
-
-  const getLoginTypeLabel = (type: string) => {
-    switch (type) {
-      case 'password': return '密码登录';
-      case 'ldap': return 'LDAP';
-      case 'token': return 'Token';
-      case 'oauth': return 'OAuth';
-      default: return type || '密码登录';
-    }
-  };
+  const columns: DataTableColumn<LoginLog>[] = [
+    {
+      key: 'login_at', header: '登录时间', sortable: true, width: 180,
+      accessor: (r) => r.login_at,
+      render: (r) => <span className="text-sm text-[var(--dg-text-secondary)]">{r.login_at ? new Date(r.login_at).toLocaleString() : '—'}</span>,
+    },
+    {
+      key: 'username', header: '用户', sortable: true, width: 120,
+      render: (r) => <span className="text-sm text-[var(--dg-text-primary)] font-medium">{r.username || '—'}</span>,
+    },
+    {
+      key: 'login_type', header: '登录方式', width: 100,
+      render: (r) => (
+        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 text-xs">
+          {getLoginTypeLabel(r.login_type)}
+        </Badge>
+      ),
+    },
+    {
+      key: 'ip', header: 'IP', width: 140,
+      render: (r) => <code className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">{r.ip || '—'}</code>,
+    },
+    {
+      key: 'location', header: '归属地', width: 140,
+      render: (r) => (
+        <span className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1">
+          <Globe className="h-3 w-3" />
+          {r.location || '—'}
+        </span>
+      ),
+    },
+    {
+      key: 'browser', header: '浏览器/OS',
+      render: (r) => (
+        <span className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1" title={r.user_agent}>
+          <Monitor className="h-3 w-3 flex-shrink-0" />
+          {r.browser || r.os
+            ? [r.browser, r.os].filter(Boolean).join(' / ')
+            : r.user_agent
+              ? r.user_agent.length > 40 ? r.user_agent.slice(0, 40) + '...' : r.user_agent
+              : '—'}
+        </span>
+      ),
+    },
+    {
+      key: 'status', header: '状态', sortable: true, width: 80, align: 'center',
+      render: (r) => r.status === '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" title={r.fail_reason || undefined}>
+          {r.fail_reason || '失败'}
+        </Badge>
+      ),
+    },
+  ];
 
   return (
     <div className="space-y-4">
-      {/* Filters */}
-      <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="搜索用户/IP/归属地..."
-            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>
-
+      {/* Status Filter + Refresh */}
+      <div className="flex items-center justify-between gap-3 flex-wrap">
         <div className="flex items-center gap-1">
           {[
             { value: '', label: '全部' },
@@ -137,7 +147,7 @@ export function LoginLogsTab() {
               className={
                 statusFilter === value
                   ? 'h-8 bg-blue-600 hover:bg-blue-700 text-white'
-                  : 'h-8 border-slate-700 text-slate-400 hover:text-slate-100 hover:bg-slate-800'
+                  : 'h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
               }
               onClick={() => setStatusFilter(value)}
             >
@@ -145,10 +155,10 @@ export function LoginLogsTab() {
             </Button>
           ))}
         </div>
-
         <Button
           variant="outline"
-          className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+          size="sm"
+          className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
           onClick={fetchLogs}
         >
           <RefreshCw className="h-4 w-4 mr-2" />
@@ -156,78 +166,31 @@ export function LoginLogsTab() {
         </Button>
       </div>
 
-      {/* Logs Table */}
-      <Card className="bg-slate-900 border-slate-800">
-        <CardContent className="p-0">
-          <div className="border-t border-slate-800">
-            {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" />
+      {/* DataTable */}
+      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <CardContent className="p-4">
+          <DataTable
+            columns={columns}
+            data={logs}
+            rowKey={(r) => r.id}
+            loading={loading}
+            searchable
+            searchPlaceholder="搜索用户/IP/归属地..."
+            searchKeys={['username', 'ip', 'location', 'user_agent']}
+            sortable
+            pagination
+            pageSize={20}
+            exportable
+            exportFilename="login-logs.csv"
+            columnToggle
+            emptyText="暂无登录日志"
+            emptyRender={() => (
+              <div className="flex flex-col items-center justify-center py-12">
+                <LogIn className="h-8 w-8 mb-3 text-[var(--dg-text-muted)] opacity-40" />
+                <p className="text-sm text-[var(--dg-text-muted)]">暂无登录日志</p>
               </div>
-            ) : filteredLogs.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-16 text-slate-500">
-                <LogIn 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">IP</TableHead>
-                    <TableHead className="text-slate-400">归属地</TableHead>
-                    <TableHead className="text-slate-400">浏览器/OS</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">
-                          {log.login_at ? new Date(log.login_at).toLocaleString() : '--'}
-                        </span>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-sm text-slate-200 font-medium">{log.username || '--'}</span>
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10 text-xs">
-                          {getLoginTypeLabel(log.login_type)}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>
-                        <code className="text-xs text-slate-400 bg-slate-800 px-2 py-0.5 rounded">
-                          {log.ip || '--'}
-                        </code>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-xs text-slate-500 flex items-center gap-1">
-                          <Globe className="h-3 w-3" />
-                          {log.location || '--'}
-                        </span>
-                      </TableCell>
-                      <TableCell>
-                        <span className="text-xs text-slate-500 flex items-center gap-1" title={log.user_agent}>
-                          <Monitor className="h-3 w-3 flex-shrink-0" />
-                          {log.browser || log.os
-                            ? [log.browser, log.os].filter(Boolean).join(' / ')
-                            : log.user_agent
-                              ? log.user_agent.length > 40
-                                ? log.user_agent.slice(0, 40) + '...'
-                                : log.user_agent
-                              : '--'}
-                        </span>
-                      </TableCell>
-                      <TableCell>{getStatusBadge(log.status, log.fail_reason)}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
             )}
-          </div>
+          />
         </CardContent>
       </Card>
     </div>