refactor: 拆分SystemUserTab.tsx(588→311行)提取UserDetailDialog+CsvImportDialog+LdapImportDialog子组件

frontend/src/components/system/UserDetailDialog.tsx

@@ -0,0 +1,104 @@
+// 用户详情弹窗（只读信息 + 角色徽章 + 编辑入口） // Logan.Li
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Key, Edit, User as UserIcon } from 'lucide-react';
+
+interface UserDetailDialogProps {
+  selectedUser: any | null;
+  setSelectedUser: (u: any | null) => void;
+  getUserStatusBadge: (status: 'active' | 'inactive') => React.ReactNode;
+  openEdit: (user: any) => void;
+}
+
+// UserDetailDialog 仅展示选中用户的基本信息和角色列表 // Logan.Li
+export function UserDetailDialog({
+  selectedUser,
+  setSelectedUser,
+  getUserStatusBadge,
+  openEdit,
+}: UserDetailDialogProps) {
+  return (
+    <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
+      <DialogContent className="bg-slate-900 border-slate-800">
+        <DialogHeader>
+          <DialogTitle className="text-slate-100 flex items-center gap-2">
+            <UserIcon className="h-5 w-5 text-blue-400" />
+            {selectedUser?.nickname}
+          </DialogTitle>
+          <DialogDescription className="text-slate-500">
+            @{selectedUser?.username} · {selectedUser?.email}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-slate-800/50">
+            <div>
+              <p className="text-xs text-slate-500 mb-1">用户名</p>
+              <p className="text-sm text-slate-200">{selectedUser?.username}</p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 mb-1">昵称</p>
+              <p className="text-sm text-slate-200">{selectedUser?.nickname}</p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 mb-1">邮箱</p>
+              <p className="text-sm text-slate-200">{selectedUser?.email}</p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 mb-1">手机号</p>
+              <p className="text-sm text-slate-200">{selectedUser?.phone || '--'}</p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 mb-1">状态</p>
+              <p className="text-sm text-slate-200">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
+            </div>
+            <div>
+              <p className="text-xs text-slate-500 mb-1">创建时间</p>
+              <p className="text-sm text-slate-200">
+                {selectedUser && selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString() : '--'}
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-sm font-medium text-slate-300 mb-2">角色</h4>
+            <div className="flex flex-wrap gap-2">
+              {selectedUser?.roles.map((role: string) => (
+                <Badge key={role} variant="outline" className="border-slate-700 text-slate-400">
+                  {role}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" className="border-slate-700 text-slate-300">
+            <Key className="h-4 w-4 mr-2" />
+            重置密码
+          </Button>
+          <Button
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+            onClick={() => {
+              if (selectedUser) {
+                setSelectedUser(null);
+                openEdit(selectedUser);
+              }
+            }}
+          >
+            <Edit className="h-4 w-4 mr-2" />
+            编辑
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}