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

frontend/src/components/cloud/RegionManager.tsx

@@ -3,15 +3,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { DataTable, type DataTableColumn } from '@/components/ui/data-table';
 import {
   Dialog,
   DialogContent,
@@ -29,7 +21,6 @@ import {
 } from '@/components/ui/select';
 import {
   Plus,
-  Search,
   Trash2,
   Pencil,
   MapPin,
@@ -62,9 +53,8 @@ export function RegionManager() {
   const confirm = useConfirm();
   const [regions, setRegions] = useState<JsonData[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
   const [selectedProvider, setSelectedProvider] = useState('all');
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingItem, setEditingItem] = useState<JsonData>(null);
   const [submitting, setSubmitting] = useState(false);
@@ -79,7 +69,7 @@ export function RegionManager() {
       const res = await regionApi.list();
       const items = (res as JsonData)?.list || [];
       setRegions(items);
-    } catch {
+    } catch (_e) {
       setRegions([]);
     } finally {
       setLoading(false);
@@ -89,25 +79,10 @@ export function RegionManager() {
   useEffect(() => { loadData(); }, [loadData]);
 
   const filtered = regions.filter(r => {
-    const matchSearch = r.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                       r.code?.toLowerCase().includes(searchQuery.toLowerCase());
     const matchProvider = selectedProvider === 'all' || r.provider === selectedProvider;
-    return matchSearch && matchProvider;
+    return matchProvider;
   });
 
-  // 全选 / 单选 // Logan.Li
-  const allSelected = filtered.length > 0 && filtered.every(r => selectedIds.includes(r.id));
-  const toggleSelectAll = () => {
-    if (allSelected) {
-      setSelectedIds([]);
-    } else {
-      setSelectedIds(filtered.map(r => r.id));
-    }
-  };
-  const toggleSelect = (id: number) => {
-    setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
-  };
-
   const openCreate = () => {
     setEditingItem(null);
     setFormData({ name: '', code: '', provider: 'aliyun', location: '', status: 'active', endpoint: '' });
@@ -134,7 +109,8 @@ export function RegionManager() {
       }
       setDialogOpen(false);
       loadData();
-    } catch {
+    } catch (_e) {
+      // handleSubmit error — silently ignored
     } finally {
       setSubmitting(false);
     }
@@ -172,7 +148,7 @@ export function RegionManager() {
     });
     if (!ok) return;
     try {
-      await regionApi.batchDelete(selectedIds);
+      await regionApi.batchDelete(selectedIds.map(Number));
       toast.success(`已删除 ${selectedIds.length} 个区域`);
       setSelectedIds([]);
       loadData();
@@ -182,46 +158,49 @@ export function RegionManager() {
     }
   };
 
+  // DataTable 列定义
+  const columns: DataTableColumn<JsonData>[] = [
+    { key: 'name', header: '区域名称', sortable: true, render: (r) => <span className="font-medium text-[var(--dg-text-primary)]">{r.name}</span> },
+    { key: 'code', header: '编码', sortable: true, render: (r) => <span className="font-mono text-sm text-[var(--dg-text-secondary)]">{r.code}</span> },
+    {
+      key: 'provider', header: '云商', sortable: true, hideable: false,
+      render: (r) => <span className={providerColors[r.provider] || 'text-[var(--dg-text-secondary)]'}>{providerNames[r.provider] || r.provider}</span>,
+    },
+    { key: 'location', header: '位置', render: (r) => r.location || '—' },
+    { key: 'endpoint', header: '接入端点', render: (r) => <span className="max-w-[200px] truncate block font-mono text-xs text-[var(--dg-text-secondary)]" title={r.endpoint}>{r.endpoint || '—'}</span> },
+    {
+      key: 'status', header: '状态', sortable: true,
+      render: (r) => r.status === 'active' ? (
+        <Badge className="bg-emerald-500/20 text-emerald-400 gap-1"><CheckCircle2 className="h-3 w-3" /> 启用</Badge>
+      ) : (
+        <Badge className="bg-slate-500/20 text-slate-400 gap-1"><XCircle className="h-3 w-3" /> 禁用</Badge>
+      ),
+    },
+    {
+      key: 'actions', header: '操作', align: 'right', hideable: false,
+      render: (r) => (
+        <div className="flex justify-end gap-1">
+          <button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
+            <Pencil className="h-3.5 w-3.5" />
+          </button>
+          <button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-red-400">
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      ),
+    },
+  ];
+
   return (
     <div className="p-6 space-y-4">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3 flex-1">
-          <div className="relative w-72">
-            <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"
-            />
-          </div>
-          <Select value={selectedProvider} onValueChange={setSelectedProvider}>
-            <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">全部云商</SelectItem>
-              {Object.entries(providerNames).map(([k, v]) => (
-                <SelectItem key={k} value={k}>{v}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <Button onClick={openCreate} className="gap-2">
-          <Plus className="h-4 w-4" />
-          添加区域
-        </Button>
-      </div>
-
-      {/* 批量操作栏 // Logan.Li */}
+      {/* 批量操作栏 */}
       {selectedIds.length > 0 && (
-        <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700">
-          <span className="text-sm text-slate-300">
-            已选择 <span className="font-semibold text-slate-100">{selectedIds.length}</span> 个区域
+        <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
+          <span className="text-sm text-[var(--dg-text-secondary)]">
+            已选择 <span className="font-semibold text-[var(--dg-text-primary)]">{selectedIds.length}</span> 个区域
           </span>
           <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-slate-400 hover:text-slate-200">
+            <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
               取消选择
             </Button>
             <Button
@@ -237,83 +216,49 @@ export function RegionManager() {
         </div>
       )}
 
-      {/* Table */}
-      {loading ? (
-        <div className="flex justify-center py-20">
-          <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
-        </div>
-      ) : filtered.length === 0 ? (
-        <div className="text-center py-20 text-slate-500">
-          <MapPin className="h-12 w-12 mx-auto mb-3 opacity-40" />
-          <p>暂无区域数据</p>
-        </div>
-      ) : (
-        <div className="rounded-lg overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow className="border-slate-800 hover:bg-transparent">
-                <TableHead className="w-10">
-                  <Checkbox
-                    checked={allSelected}
-                    onCheckedChange={toggleSelectAll}
-                    className="border-slate-600"
-                  />
-                </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">接入端点</TableHead>
-                <TableHead className="text-slate-400">状态</TableHead>
-                <TableHead className="text-slate-400 text-right">操作</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filtered.map((r) => (
-                <TableRow key={r.id} className="border-slate-800/50 group">
-                  <TableCell>
-                    <Checkbox
-                      checked={selectedIds.includes(r.id)}
-                      onCheckedChange={() => toggleSelect(r.id)}
-                      className="border-slate-600"
-                    />
-                  </TableCell>
-                  <TableCell className="font-medium text-slate-200">{r.name}</TableCell>
-                  <TableCell className="font-mono text-sm text-slate-400">{r.code}</TableCell>
-                  <TableCell>
-                    <span className={providerColors[r.provider] || 'text-slate-400'}>
-                      {providerNames[r.provider] || r.provider}
-                    </span>
-                  </TableCell>
-                  <TableCell className="text-slate-400">{r.location || '-'}</TableCell>
-                  <TableCell className="max-w-[200px] truncate font-mono text-xs text-slate-400" title={r.endpoint}>{r.endpoint || '-'}</TableCell>
-                  <TableCell>
-                    {r.status === 'active' ? (
-                      <Badge className="bg-emerald-500/20 text-emerald-400 gap-1">
-                        <CheckCircle2 className="h-3 w-3" /> 启用
-                      </Badge>
-                    ) : (
-                      <Badge className="bg-slate-500/20 text-slate-400 gap-1">
-                        <XCircle className="h-3 w-3" /> 禁用
-                      </Badge>
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
-                        <Pencil className="h-3.5 w-3.5" />
-                      </button>
-                      <button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-red-400">
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      )}
+      {/* DataTable */}
+      <DataTable
+        columns={columns}
+        data={filtered}
+        rowKey={(r) => r.id}
+        loading={loading}
+        searchable
+        searchPlaceholder="搜索区域名称或编码..."
+        searchKeys={['name', 'code']}
+        sortable
+        selectable
+        selectedIds={selectedIds}
+        onSelectionChange={setSelectedIds}
+        columnToggle
+        exportable
+        exportFilename="regions.csv"
+        emptyText="暂无区域数据"
+        emptyRender={() => (
+          <div className="flex flex-col items-center gap-3 py-8">
+            <MapPin className="h-12 w-12 text-[var(--dg-text-muted)] opacity-40" />
+            <p className="text-[var(--dg-text-muted)]">暂无区域数据</p>
+          </div>
+        )}
+        toolbarExtra={
+          <>
+            <Select value={selectedProvider} onValueChange={setSelectedProvider}>
+              <SelectTrigger className="w-32 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">全部云商</SelectItem>
+                {Object.entries(providerNames).map(([k, v]) => (
+                  <SelectItem key={k} value={k}>{v}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button onClick={openCreate} size="sm" className="h-8 gap-1.5">
+              <Plus className="h-4 w-4" />
+              添加区域
+            </Button>
+          </>
+        }
+      />
 
       {/* Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>