生产管理系统 - 用户管理接口集成

crop-x/src/app/(app)/central-config/tenant/user-management/components/UserDetailDialog.tsx

@@ -1,112 +1,282 @@
-'use client';
+/**
+ * filekorolheader: 用户详情对话框组件 - 用户详细信息展示界面
+ * 功能：用户详细信息展示、多标签页布局、状态和权限信息
+ * 路径：/central-config/tenant/user-management/components/UserDetailDialog
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
+ */
 
-import React from 'react';
+import { User } from '../types';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { User, UserStatus, UserType } from '../types';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Card } from '@/components/ui/card';
+import { User, Mail, Phone, Calendar, Building, Shield, CheckCircle, XCircle, Clock } from 'lucide-react';
 
 interface UserDetailDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  selectedUser: User | null;
+  user: User | null;
 }
 
 export function UserDetailDialog({
   open,
   onOpenChange,
-  selectedUser
+  user
 }: UserDetailDialogProps) {
-  const getStatusBadge = (status: UserStatus) => {
+  const getStatusBadge = (isActive: boolean) => {
-    switch (status) {
+    return isActive ? (
-      case 'active':
+      <Badge className="bg-green-100 text-green-700">正常</Badge>
-        return <Badge className="bg-green-100 text-green-700">正常</Badge>;
+    ) : (
-      case 'frozen':
+      <Badge className="bg-red-100 text-red-700">停用</Badge>
-        return <Badge className="bg-gray-100 text-gray-700">已冻结</Badge>;
+    );
-      case 'inactive':
+  };
-        return <Badge className="bg-red-100 text-red-700">停用</Badge>;
+
-      default:
+  const getRoleBadge = (isSuperuser: boolean) => {
-        return <Badge>{status}</Badge>;
+    return isSuperuser ? (
+      <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>
+    ) : (
+      <Badge className="bg-blue-100 text-blue-700">普通用户</Badge>
+    );
+  };
+
+  const getVerifiedBadge = (isVerified: boolean) => {
+    return isVerified ? (
+      <Badge className="bg-green-100 text-green-700">已验证</Badge>
+    ) : (
+      <Badge variant="outline">未验证</Badge>
+    );
+  };
+
+  const formatDate = (dateString: string) => {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+      }).replace(/\//g, '-');
+    } catch (error) {
+      return dateString;
     }
   };
 
-  const getUserTypeBadge = (type: UserType) => {
+  if (!user) return null;
-    switch (type) {
-      case 'super_admin':
-        return <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>;
-      case 'enterprise_admin':
-        return <Badge className="bg-blue-100 text-blue-700">企业管理员</Badge>;
-      case 'employee':
-        return <Badge className="bg-green-100 text-green-700">员工</Badge>;
-      default:
-        return <Badge>{type}</Badge>;
-    }
-  };
-
-  if (!selectedUser) return null;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="w-[80vw] max-w-4xl max-h-[90vh]">
         <DialogHeader>
+          <div className="flex items-center justify-between pr-8">
             <DialogTitle>用户详情</DialogTitle>
+            <div className="flex gap-2">
+              {getRoleBadge(user.isSuperuser)}
+              {getVerifiedBadge(user.isVerified)}
+              {getStatusBadge(user.isActive)}
+            </div>
+          </div>
           <DialogDescription className="sr-only">
-            查看用户的详细信息
+            查看用户的详细信息和权限
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
+
-          <div className="grid grid-cols-2 gap-4">
+        <ScrollArea className="max-h-[calc(90vh-200px)]">
-            <div>
+          <Tabs defaultValue="basic" className="space-y-4">
-              <Label>用户名</Label>
+            <TabsList className="grid grid-cols-3 w-full">
-              <div className="mt-1">{selectedUser.username}</div>
+              <TabsTrigger value="basic">
-            </div>
+                <User className="w-4 h-4 mr-2" />
-            <div>
+                基本信息
-              <Label>姓名</Label>
+              </TabsTrigger>
-              <div className="mt-1">{selectedUser.name}</div>
+              <TabsTrigger value="permissions">
-            </div>
+                <Shield className="w-4 h-4 mr-2" />
-            <div>
+                权限信息
-              <Label>电话</Label>
+              </TabsTrigger>
-              <div className="mt-1">{selectedUser.phone}</div>
+              <TabsTrigger value="activity">
-            </div>
+                <Clock className="w-4 h-4 mr-2" />
-            <div>
+                活动信息
-              <Label>邮箱</Label>
+              </TabsTrigger>
-              <div className="mt-1">{selectedUser.email || '-'}</div>
+            </TabsList>
-            </div>
+
-            <div>
+            {/* 基本信息 */}
-              <Label>用户类型</Label>
+            <TabsContent value="basic" className="space-y-4">
-              <div className="mt-1">{getUserTypeBadge(selectedUser.userType)}</div>
+              <div className="flex items-center gap-4 mb-6">
-            </div>
+                {user.avatarUrl ? (
-            <div>
+                  <img
-              <Label>所属企业</Label>
+                    src={user.avatarUrl}
-              <div className="mt-1">{selectedUser.enterpriseName || '-'}</div>
+                    alt={user.username}
-            </div>
+                    className="w-16 h-16 rounded-full"
-            <div>
+                  />
-              <Label>状态</Label>
+                ) : (
-              <div className="mt-1">{getStatusBadge(selectedUser.status)}</div>
+                  <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
-            </div>
+                    <User className="w-8 h-8 text-gray-500" />
-            {selectedUser.lastLoginTime && (
-              <div>
-                <Label>最后登录</Label>
-                <div className="mt-1">
-                  {new Date(selectedUser.lastLoginTime).toLocaleString('zh-CN')}
-                </div>
                   </div>
                 )}
                 <div>
-              <Label>创建时间</Label>
+                  <h3 className="text-lg font-semibold">{user.displayName || user.fullName || user.username}</h3>
-              <div className="mt-1">
+                  <p className="text-sm text-muted-foreground">@{user.username}</p>
-                {new Date(selectedUser.createdAt).toLocaleString('zh-CN')}
+                  <div className="flex gap-2 mt-2">
+                    {getRoleBadge(user.isSuperuser)}
+                    {getVerifiedBadge(user.isVerified)}
+                    {getStatusBadge(user.isActive)}
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-6">
+                <div>
+                  <Label>用户名</Label>
+                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{user.username}</div>
+                </div>
+                <div>
+                  <Label>显示名称</Label>
+                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
+                    {user.displayName || user.fullName || '-'}
                   </div>
                 </div>
                 <div>
-              <Label>更新时间</Label>
+                  <Label>邮箱</Label>
-              <div className="mt-1">
+                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md flex items-center gap-2">
-                {new Date(selectedUser.updatedAt).toLocaleString('zh-CN')}
+                    <Mail className="w-4 h-4 text-muted-foreground" />
-              </div>
+                    {user.email}
+                  </div>
+                </div>
+                <div>
+                  <Label>电话</Label>
+                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md flex items-center gap-2">
+                    <Phone className="w-4 h-4 text-muted-foreground" />
+                    {user.phone || '-'}
+                  </div>
+                </div>
+                <div>
+                  <Label>所属企业</Label>
+                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md flex items-center gap-2">
+                    <Building className="w-4 h-4 text-muted-foreground" />
+                    {user.companyName || '-'}
+                  </div>
+                </div>
+                <div>
+                  <Label>权限范围</Label>
+                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
+                    {user.scope === 'tenant' ? '租户级' : user.scope || '-'}
+                  </div>
+                </div>
+                {user.departmentName && (
+                  <div>
+                    <Label>部门</Label>
+                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{user.departmentName}</div>
+                  </div>
+                )}
+                {user.bio && (
+                  <div className="col-span-2">
+                    <Label>个人简介</Label>
+                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md min-h-[80px] whitespace-pre-wrap">
+                      {user.bio}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* 权限信息 */}
+            <TabsContent value="permissions" className="space-y-4">
+              <div className="space-y-6">
+                <div>
+                  <h4 className="font-semibold mb-4">系统权限</h4>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Card className="p-4">
+                      <div className="flex items-center justify-between">
+                        <span>超级管理员权限</span>
+                        {user.isSuperuser ? (
+                          <CheckCircle className="w-5 h-5 text-green-600" />
+                        ) : (
+                          <XCircle className="w-5 h-5 text-red-600" />
+                        )}
+                      </div>
+                    </Card>
+                    <Card className="p-4">
+                      <div className="flex items-center justify-between">
+                        <span>邮箱已验证</span>
+                        {user.isVerified ? (
+                          <CheckCircle className="w-5 h-5 text-green-600" />
+                        ) : (
+                          <XCircle className="w-5 h-5 text-orange-600" />
+                        )}
+                      </div>
+                    </Card>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="font-semibold mb-4">访问状态</h4>
+                  <Card className="p-4">
+                    <div className="flex items-center justify-between">
+                      <span>账户状态</span>
+                      {getStatusBadge(user.isActive)}
+                    </div>
+                  </Card>
+                </div>
+
+                {user.tenantId && (
+                  <div>
+                    <h4 className="font-semibold mb-4">关联信息</h4>
+                    <div className="space-y-4">
+                      <Card className="p-4">
+                        <Label>租户ID</Label>
+                        <div className="mt-1.5 text-sm font-mono bg-gray-100 p-2 rounded">
+                          {user.tenantId}
+                        </div>
+                      </Card>
+                      {user.departmentId && (
+                        <Card className="p-4">
+                          <Label>部门ID</Label>
+                          <div className="mt-1.5 text-sm font-mono bg-gray-100 p-2 rounded">
+                            {user.departmentId}
+                          </div>
+                        </Card>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            {/* 活动信息 */}
+            <TabsContent value="activity" className="space-y-4">
+              <div className="space-y-4">
+                <div>
+                  <h4 className="font-semibold mb-4">时间信息</h4>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Card className="p-4">
+                      <Label className="text-xs">创建时间</Label>
+                      <div className="mt-1.5 text-sm">{formatDate(user.createdAt)}</div>
+                    </Card>
+                    <Card className="p-4">
+                      <Label className="text-xs">更新时间</Label>
+                      <div className="mt-1.5 text-sm">{formatDate(user.updatedAt)}</div>
+                    </Card>
+                    <Card className="p-4">
+                      <Label className="text-xs">最后登录时间</Label>
+                      <div className="mt-1.5 text-sm">
+                        {user.lastLoginAt ? formatDate(user.lastLoginAt) : '从未登录'}
+                      </div>
+                    </Card>
+                    <Card className="p-4">
+                      <Label className="text-xs">账户状态</Label>
+                      <div className="mt-1.5">
+                        {getStatusBadge(user.isActive)}
+                      </div>
+                    </Card>
                   </div>
                 </div>
               </div>
+            </TabsContent>
+          </Tabs>
+        </ScrollArea>
+
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             关闭

crop-x/src/app/(app)/central-config/tenant/user-management/components/UserList.tsx

@@ -1,57 +1,96 @@
-'use client';
+/**
+ * filekorolheader: 用户列表组件 - 用户数据表格展示界面
+ * 功能：用户数据表格展示、状态徽章、操作按钮、分页功能
+ * 路径：/central-config/tenant/user-management/components/UserList
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
+ */
 
-import React from 'react';
+import { User, PaginationState } from '../types';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Eye, Edit, Lock, Trash2, UserX, UserCheck } from 'lucide-react';
+import { Eye, Edit, Trash2, Lock, UserX, UserCheck } from 'lucide-react';
-import { User, UserStatus, UserType } from '../types';
 
 interface UserListProps {
   users: User[];
+  loading: boolean;
+  pagination: PaginationState;
+  onPageChange: (page: number) => void;
   onViewDetail: (user: User) => void;
-  onEdit: (user: User) => void;
+  onEdit?: (user: User) => void;
-  onResetPassword: (user: User) => void;
+  onDelete?: (user: User) => void;
-  onToggleStatus: (user: User) => void;
+  onToggleStatus?: (user: User) => void;
-  onDelete: (id: string) => void;
+  onResetPassword?: (user: User) => void;
 }
 
 export function UserList({
   users,
+  loading,
+  pagination,
+  onPageChange,
   onViewDetail,
   onEdit,
-  onResetPassword,
+  onDelete,
   onToggleStatus,
-  onDelete
+  onResetPassword
 }: UserListProps) {
-  const getStatusBadge = (status: UserStatus) => {
+  const getStatusBadge = (user: User) => {
-    switch (status) {
+    // 根据isSuperuser和isActive判断状态
-      case 'active':
+    if (user.isSuperuser) {
+      return user.isActive ? (
+        <Badge className="bg-green-100 text-green-700">正常</Badge>
+      ) : (
+        <Badge className="bg-gray-100 text-gray-700">已冻结</Badge>
+      );
+    }
+
+    if (user.isActive) {
       return <Badge className="bg-green-100 text-green-700">正常</Badge>;
-      case 'frozen':
+    } else {
-        return <Badge className="bg-gray-100 text-gray-700">已冻结</Badge>;
-      case 'inactive':
       return <Badge className="bg-red-100 text-red-700">停用</Badge>;
-      default:
-        return <Badge>{status}</Badge>;
     }
   };
 
-  const getUserTypeBadge = (type: UserType) => {
+  const getUserTypeBadge = (user: User) => {
-    switch (type) {
+    if (user.isSuperuser) {
-      case 'super_admin':
       return <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>;
-      case 'enterprise_admin':
-        return <Badge className="bg-blue-100 text-blue-700">企业管理员</Badge>;
-      case 'employee':
-        return <Badge className="bg-green-100 text-green-700">员工</Badge>;
-      default:
-        return <Badge>{type}</Badge>;
     }
+    // 根据scope或其他字段判断用户类型
+    if (user.scope === 'enterprise' || user.companyName) {
+      return <Badge className="bg-blue-100 text-blue-700">企业管理员</Badge>;
+    }
+    return <Badge className="bg-green-100 text-green-700">员工</Badge>;
   };
 
+  const getRoleBadge = (user: User) => {
+    if (user.isSuperuser) {
+      return <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>;
+    }
+    return <Badge className="bg-blue-100 text-blue-700">普通用户</Badge>;
+  };
+
+  const getVerifiedBadge = (isVerified: boolean) => {
+    return isVerified ? (
+      <Badge className="bg-green-100 text-green-700">已验证</Badge>
+    ) : (
+      <Badge variant="outline">未验证</Badge>
+    );
+  };
+
+  
+  if (loading) {
+    return (
+      <Card>
+        <div className="flex items-center justify-center h-96">
+          <div className="text-muted-foreground">加载中...</div>
+        </div>
+      </Card>
+    );
+  }
+
   return (
+    <div className="space-y-4">
       <Card>
         <Table>
           <TableHeader>
@@ -70,21 +109,32 @@ export function UserList({
             {users.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
-                暂无数据
+                  暂无用户数据
                 </TableCell>
               </TableRow>
             ) : (
               users.map((user) => (
                 <TableRow key={user.id}>
-                <TableCell className="text-muted-foreground">{user.username}</TableCell>
+                  <TableCell className="font-medium">
-                <TableCell>{user.name}</TableCell>
+                    <div className="flex items-center gap-2">
-                <TableCell>{user.phone}</TableCell>
+                      {user.avatarUrl && (
-                <TableCell className="text-muted-foreground">{user.enterpriseName || '-'}</TableCell>
+                        <img
-                <TableCell>{getUserTypeBadge(user.userType)}</TableCell>
+                          src={user.avatarUrl}
-                <TableCell>
+                          alt={user.username}
-                  {user.roles && user.roles.length > 0 ? user.roles.join(', ') : '-'}
+                          className="w-8 h-8 rounded-full"
+                        />
+                      )}
+                      <span>{user.username}</span>
+                    </div>
                   </TableCell>
-                <TableCell>{getStatusBadge(user.status)}</TableCell>
+                  <TableCell>
+                    {user.fullName || user.displayName || '-'}
+                  </TableCell>
+                  <TableCell>{user.phone || '-'}</TableCell>
+                  <TableCell className="text-muted-foreground">{user.companyName || '-'}</TableCell>
+                  <TableCell>{getUserTypeBadge(user)}</TableCell>
+                  <TableCell>{getRoleBadge(user)}</TableCell>
+                  <TableCell>{getStatusBadge(user)}</TableCell>
                   <TableCell>
                     <div className="flex gap-1">
                       <Button
@@ -94,6 +144,7 @@ export function UserList({
                       >
                         <Eye className="w-4 h-4" />
                       </Button>
+                      {onEdit && (
                         <Button
                           variant="ghost"
                           size="sm"
@@ -101,6 +152,8 @@ export function UserList({
                         >
                           <Edit className="w-4 h-4" />
                         </Button>
+                      )}
+                      {onResetPassword && (
                         <Button
                           variant="ghost"
                           size="sm"
@@ -108,22 +161,25 @@ export function UserList({
                         >
                           <Lock className="w-4 h-4" />
                         </Button>
+                      )}
+                      {onToggleStatus && (
                         <Button
                           variant="ghost"
                           size="sm"
                           onClick={() => onToggleStatus(user)}
                         >
-                      {user.status === 'active' ? (
+                          {user.isActive ? (
                             <UserX className="w-4 h-4 text-orange-600" />
                           ) : (
                             <UserCheck className="w-4 h-4 text-green-600" />
                           )}
                         </Button>
-                    {user.userType !== 'super_admin' && (
+                      )}
+                      {onDelete && !user.isSuperuser && (
                         <Button
                           variant="ghost"
                           size="sm"
-                        onClick={() => onDelete(user.id)}
+                          onClick={() => onDelete(user)}
                         >
                           <Trash2 className="w-4 h-4 text-destructive" />
                         </Button>
@@ -136,5 +192,54 @@ export function UserList({
           </TableBody>
         </Table>
       </Card>
+
+      {/* 分页 */}
+      {pagination.total > 0 && (
+        <div className="flex items-center justify-between">
+          <div className="text-sm text-muted-foreground">
+            显示第 {(pagination.page - 1) * pagination.size + 1} - {Math.min(pagination.page * pagination.size, pagination.total)} 条，共 {pagination.total} 条记录
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(pagination.page - 1)}
+              disabled={!pagination.hasPrev}
+            >
+              上一页
+            </Button>
+
+            <div className="flex items-center gap-1">
+              <span className="text-sm text-muted-foreground">第</span>
+              <div className="flex items-center">
+                <input
+                  type="number"
+                  min={1}
+                  max={pagination.totalPages}
+                  value={pagination.page}
+                  onChange={(e) => {
+                    const newPage = parseInt(e.target.value);
+                    if (!isNaN(newPage)) {
+                      onPageChange(newPage);
+                    }
+                  }}
+                  className="w-16 h-8 text-center border rounded-md"
+                />
+              </div>
+              <span className="text-sm text-muted-foreground">/ {pagination.totalPages} 页</span>
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(pagination.page + 1)}
+              disabled={!pagination.hasNext}
+            >
+              下一页
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }

crop-x/src/app/(app)/central-config/tenant/user-management/components/UserManagementFilters.tsx

@@ -9,16 +9,17 @@ import { UserFilters } from '../types';
 
 interface UserManagementFiltersProps {
   filters: UserFilters;
-  onFiltersChange: (filters: UserFilters) => void;
+  onSearchChange: (value: string) => void;
+  onStatusFilterChange: (value: string) => void;
+  onTypeFilterChange: (value: string) => void;
 }
 
-export function UserManagementFilters({ filters, onFiltersChange }: UserManagementFiltersProps) {
+export function UserManagementFilters({
-  const updateFilter = (key: keyof UserFilters, value: string) => {
+  filters,
-    onFiltersChange({
+  onSearchChange,
-      ...filters,
+  onStatusFilterChange,
-      [key]: value
+  onTypeFilterChange
-    });
+}: UserManagementFiltersProps) {
-  };
 
   return (
     <Card className="p-4">
@@ -29,12 +30,12 @@ export function UserManagementFilters({ filters, onFiltersChange }: UserManageme
             <Input
               placeholder="搜索用户名、姓名、电话、企业..."
               value={filters.searchKeyword}
-              onChange={(e) => updateFilter('searchKeyword', e.target.value)}
+              onChange={(e) => onSearchChange(e.target.value)}
               className="pl-10"
             />
           </div>
         </div>
-        <Select value={filters.typeFilter} onValueChange={(value) => updateFilter('typeFilter', value)}>
+        <Select value={filters.typeFilter} onValueChange={onTypeFilterChange}>
           <SelectTrigger className="w-40">
             <SelectValue />
           </SelectTrigger>
@@ -45,7 +46,7 @@ export function UserManagementFilters({ filters, onFiltersChange }: UserManageme
             <SelectItem value="employee">员工</SelectItem>
           </SelectContent>
         </Select>
-        <Select value={filters.statusFilter} onValueChange={(value) => updateFilter('statusFilter', value)}>
+        <Select value={filters.statusFilter} onValueChange={onStatusFilterChange}>
           <SelectTrigger className="w-40">
             <SelectValue />
           </SelectTrigger>

crop-x/src/app/(app)/central-config/tenant/user-management/components/UserManagementHeader.tsx

@@ -1,31 +1,58 @@
+/**
+ * filekorolheader: 用户管理页面头部组件 - 页面标题和操作按钮
+ * 功能：页面标题显示、刷新功能、统计数据展示
+ * 路径：/central-config/tenant/user-management/components/UserManagementHeader
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
+ */
+
 'use client';
 
-import React from 'react';
+import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Plus, Download } from 'lucide-react';
+import { Users, RefreshCw } from 'lucide-react';
 
 interface UserManagementHeaderProps {
-  onAddUser: () => void;
+  stats: Array<{
-  onExport: () => void;
+    label: string;
+    value: number;
+    color: string;
+    bg: string;
+  }>;
+  onRefresh: () => void;
+  loading: boolean;
 }
 
-export function UserManagementHeader({ onAddUser, onExport }: UserManagementHeaderProps) {
+export function UserManagementHeader({ stats, onRefresh, loading }: UserManagementHeaderProps) {
   return (
-    <div className="flex items-center justify-between">
+    <Card className="p-6 bg-gradient-to-r from-blue-50 dark:from-blue-950 to-indigo-50 dark:to-indigo-950 border-blue-200 dark:border-blue-800">
-      <div>
+      <div className="flex items-start justify-between">
-        <h2 className="text-green-800">用户管理</h2>
+        <div className="flex items-start gap-3">
-        <p className="text-muted-foreground">平台所有用户账户的集中管理</p>
+          <Users className="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-1" />
+          <div className="flex-1">
+            <h2 className="mb-2">用户管理</h2>
+            <p className="text-sm text-muted-foreground mb-3">
+              平台所有用户账户的集中管理，支持搜索、筛选和详情查看
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <span className="inline-flex items-center text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full">
+                搜索功能
+              </span>
+              <span className="inline-flex items-center text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full">
+                状态筛选
+              </span>
+              <span className="inline-flex items-center text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full">
+                详情查看
+              </span>
             </div>
-      <div className="flex gap-2">
+          </div>
-        <Button variant="outline" onClick={onExport}>
+        </div>
-          <Download className="w-4 h-4 mr-2" />
+        <div className="flex items-center gap-2">
-          导出
+          <Button variant="outline" size="sm" onClick={onRefresh} disabled={loading}>
-        </Button>
+            <RefreshCw className={`w-4 h-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
-        <Button onClick={onAddUser}>
+            刷新
-          <Plus className="w-4 h-4 mr-2" />
-          添加用户
           </Button>
         </div>
       </div>
+    </Card>
   );
 }

crop-x/src/app/(app)/central-config/tenant/user-management/components/UserManagementStatsCards.tsx

@@ -1,47 +1,49 @@
+/**
+ * filekorolheader: 用户管理统计卡片组件 - 用户统计数据展示界面
+ * 功能：总用户数、活跃用户、管理员、已验证用户统计展示
+ * 路径：/central-config/tenant/user-management/components/UserManagementStatsCards
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
+ */
+
 'use client';
 
-import React from 'react';
 import { Card } from '@/components/ui/card';
-import { UserManagementStats, User } from '../types';
 
 interface UserManagementStatsCardsProps {
-  users: User[];
+  stats: Array<{
+    label: string;
+    value: number;
+    color: string;
+    bg: string;
+  }>;
+  loading?: boolean;
 }
 
-export function UserManagementStatsCards({ users }: UserManagementStatsCardsProps) {
+export function UserManagementStatsCards({
-  const stats: UserManagementStats[] = [
+  stats,
-    {
+  loading = false
-      label: '总用户数',
+}: UserManagementStatsCardsProps) {
-      value: users.length,
+  if (loading) {
-      color: 'text-blue-600',
+    return (
-      bg: 'bg-blue-100',
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-    },
+        {stats.map((_, index) => (
-    {
+          <Card key={index} className="p-4">
-      label: '超级管理员',
+            <div className="animate-pulse">
-      value: users.filter(u => u.userType === 'super_admin').length,
+              <div className="h-4 bg-gray-200 rounded mb-2"></div>
-      color: 'text-purple-600',
+              <div className="h-8 bg-gray-200 rounded"></div>
-      bg: 'bg-purple-100',
+            </div>
-    },
+          </Card>
-    {
+        ))}
-      label: '企业管理员',
+      </div>
-      value: users.filter(u => u.userType === 'enterprise_admin').length,
+    );
-      color: 'text-blue-600',
+  }
-      bg: 'bg-blue-100',
-    },
-    {
-      label: '正常用户',
-      value: users.filter(u => u.status === 'active').length,
-      color: 'text-green-600',
-      bg: 'bg-green-100',
-    },
-  ];
 
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
       {stats.map((stat, index) => (
         <Card key={index} className="p-4">
           <div className="text-sm text-muted-foreground">{stat.label}</div>
-          <div className={`mt-2 ${stat.color} text-2xl font-semibold`}>{stat.value}</div>
+          <div className={`mt-2 text-2xl font-bold ${stat.color}`}>{stat.value}</div>
         </Card>
       ))}
     </div>

crop-x/src/app/(app)/central-config/tenant/user-management/components/userManagementApi.ts

@@ -0,0 +1,193 @@
+/**
+ * filekorolheader: 用户管理API接口 - 用户数据查询接口服务
+ * 功能：API请求封装、数据转换、错误处理、分页查询
+ * 路径：/central-config/tenant/user-management/components/userManagementApi
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用SDK API调用，TypeScript类型安全
+ */
+
+import { getAuthToken } from "@/utils/token";
+import {
+  getUsersApiV1UsersGet,
+} from "@/lib/api/sdk.gen";
+
+// API返回的用户数据类型
+export interface UserData {
+  id: string;
+  tenant_id: string;
+  email: string;
+  username: string;
+  full_name: string | null;
+  phone: string | null;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+  created_at: string;
+  updated_at: string;
+  last_login_at: string | null;
+  avatar_url: string | null;
+  bio: string | null;
+  display_name: string | null;
+  department_id: string | null;
+  department_name: string | null;
+  scope: string;
+  company_name: string | null;
+}
+
+// API响应接口
+export interface UsersApiResponse {
+  data: UserData[];
+  total: number;
+  page: number;
+  size: number;
+  total_pages: number;
+  has_next: boolean;
+  has_prev: boolean;
+}
+
+// 查询参数接口
+export interface UsersQueryParams {
+  search?: string;
+  is_active?: boolean;
+  page?: number;
+  size?: number;
+  order_by?: string;
+  sort_order?: 'asc' | 'desc';
+}
+
+// 页面使用的用户数据类型（转换后的）
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+  fullName: string | null;
+  phone: string | null;
+  isActive: boolean;
+  isSuperuser: boolean;
+  isVerified: boolean;
+  createdAt: string;
+  updatedAt: string;
+  lastLoginAt: string | null;
+  avatarUrl: string | null;
+  bio: string | null;
+  displayName: string | null;
+  departmentId: string | null;
+  departmentName: string | null;
+  scope: string;
+  companyName: string | null;
+  tenantId: string;
+}
+
+/**
+ * 获取用户列表数据
+ */
+export async function fetchUsers(params: UsersQueryParams = {}): Promise<UsersApiResponse> {
+  try {
+    // 构建查询参数对象
+    const queryParams: any = {};
+
+    if (params.search) queryParams.search = params.search;
+    if (params.is_active !== undefined) queryParams.is_active = params.is_active;
+    if (params.page) queryParams.page = params.page;
+    if (params.size) queryParams.size = params.size;
+    if (params.order_by) queryParams.order_by = params.order_by;
+    if (params.sort_order) queryParams.sort_order = params.sort_order;
+
+    // 默认参数
+    if (!params.page) queryParams.page = 1;
+    if (!params.size) queryParams.size = 10;
+    if (!params.sort_order) queryParams.sort_order = 'desc';
+
+    // 使用SDK API调用用户查询接口，添加缓存破坏器和认证头部
+    const token = getAuthToken();
+    console.log('用户管理API调用参数:', queryParams);
+
+    const response = await getUsersApiV1UsersGet({
+      query: {
+        ...queryParams,
+        // 添加时间戳防止缓存
+        _t: Date.now(),
+      },
+      headers: token ? {
+        'Authorization': `Bearer ${token}`,
+      } : undefined,
+    });
+
+    if (response.error) {
+      throw new Error(`API error: ${response.error.message || 'Unknown error'}`);
+    }
+
+    const data = response.data as any;
+    console.log('用户管理API响应:', data);
+
+    // 转换响应数据格式以匹配现有的接口
+    // API返回的数据结构: { data: [...], total: 25, page: 1, size: 10, ... }
+    return {
+      data: data?.data || [], // 注意：实际数据在 data.data 中
+      total: data?.total || 0,
+      page: data?.page || 1,
+      size: data?.size || 10,
+      total_pages: data?.total_pages || 0,
+      has_next: data?.has_next || false,
+      has_prev: data?.has_prev || false,
+    };
+  } catch (error) {
+    console.error('Failed to fetch users:', error);
+    throw error;
+  }
+}
+
+/**
+ * 将API数据转换为页面所需的用户数据格式
+ * 优先显示display_name，其次full_name，最后username
+ */
+export function transformUserData(user: UserData): User {
+  return {
+    id: user.id,
+    username: user.username,
+    email: user.email,
+    fullName: user.full_name,
+    phone: user.phone,
+    isActive: user.is_active,
+    isSuperuser: user.is_superuser,
+    isVerified: user.is_verified,
+    createdAt: formatDate(user.created_at),
+    updatedAt: formatDate(user.updated_at),
+    lastLoginAt: user.last_login_at ? formatDate(user.last_login_at) : null,
+    avatarUrl: user.avatar_url,
+    bio: user.bio,
+    displayName: user.display_name || user.full_name || user.username,
+    departmentId: user.department_id,
+    departmentName: user.department_name,
+    scope: user.scope,
+    companyName: user.company_name,
+    tenantId: user.tenant_id,
+  };
+}
+
+/**
+ * 格式化日期
+ */
+function formatDate(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    }).replace(/\//g, '-');
+  } catch (error) {
+    return dateString;
+  }
+}
+
+// Pagination state interface for page components
+export interface PaginationState {
+  page: number;
+  size: number;
+  total: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+}

crop-x/src/app/(app)/central-config/tenant/user-management/page.tsx

@@ -1,271 +1,330 @@
+/**
+ * filekorolheader: 用户管理页面 - 用户查询和管理页面
+ * 功能：用户列表查询、搜索筛选、详情查看、用户管理
+ * 路径：/central-config/tenant/user-management
+ * 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，API集成，shadcn语义化样式
+ */
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useReducer, useEffect } from 'react';
 import { toast } from 'sonner';
 
+import { fetchUsers, transformUserData, UsersQueryParams, User, UsersApiResponse, PaginationState } from './components/userManagementApi';
 import { UserManagementHeader } from './components/UserManagementHeader';
 import { UserManagementStatsCards } from './components/UserManagementStatsCards';
 import { UserManagementFilters } from './components/UserManagementFilters';
 import { UserList } from './components/UserList';
-import { UserFormDialog } from './components/UserFormDialog';
 import { UserDetailDialog } from './components/UserDetailDialog';
-import { User, Enterprise, UserFilters, UserFormData } from './types';
+import { Enterprise, UserFilters } from './types';
 
-export default function TenantUserManagementPage() {
+// 用户管理状态管理
-  const [users, setUsers] = useState<User[]>([]);
+interface UserManagementState {
-  const [enterprises, setEnterprises] = useState<Enterprise[]>([]);
+  users: User[];
-  const [filters, setFilters] = useState<UserFilters>({
+  enterprises: Enterprise[];
+  loading: boolean;
+  error: string | null;
+  pagination: PaginationState;
+  filters: UserFilters;
+  sortBy?: string;
+  sortOrder: 'asc' | 'desc';
+  selectedUser: User | null;
+  showDetailDialog: boolean;
+}
+
+type UserManagementAction =
+  | { type: 'SET_USERS'; payload: { data: User[]; pagination: PaginationState } }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_ERROR'; payload: string | null }
+  | { type: 'SET_FILTERS'; payload: Partial<UserFilters> }
+  | { type: 'SET_SORT'; payload: { sortBy?: string; sortOrder: 'asc' | 'desc' } }
+  | { type: 'SET_PAGINATION'; payload: Partial<PaginationState> }
+  | { type: 'SET_ENTERPRISES'; payload: Enterprise[] }
+  | { type: 'SET_SELECTED_USER'; payload: User | null }
+  | { type: 'TOGGLE_DETAIL_DIALOG'; payload: boolean }
+  | { type: 'REFRESH_DATA' };
+
+const userManagementReducer = (state: UserManagementState, action: UserManagementAction): UserManagementState => {
+  switch (action.type) {
+    case 'SET_USERS':
+      return {
+        ...state,
+        users: action.payload.data,
+        pagination: action.payload.pagination,
+        loading: false,
+        error: null,
+      };
+    case 'SET_LOADING':
+      return { ...state, loading: action.payload };
+    case 'SET_ERROR':
+      return { ...state, error: action.payload, loading: false };
+    case 'SET_FILTERS':
+      return { ...state, filters: { ...state.filters, ...action.payload } };
+    case 'SET_SORT':
+      return { ...state, sortBy: action.payload.sortBy, sortOrder: action.payload.sortOrder };
+    case 'SET_PAGINATION':
+      return { ...state, pagination: { ...state.pagination, ...action.payload } };
+    case 'SET_ENTERPRISES':
+      return { ...state, enterprises: action.payload };
+    case 'SET_SELECTED_USER':
+      return { ...state, selectedUser: action.payload };
+    case 'TOGGLE_DETAIL_DIALOG':
+      return { ...state, showDetailDialog: !state.showDetailDialog };
+    case 'REFRESH_DATA':
+      return { ...state, error: null };
+    default:
+      return state;
+  }
+};
+
+const initialState: UserManagementState = {
+  users: [],
+  enterprises: [],
+  loading: false,
+  error: null,
+  pagination: {
+    page: 1,
+    size: 10,
+    total: 0,
+    totalPages: 0,
+    hasNext: false,
+    hasPrev: false,
+  },
+  filters: {
     searchKeyword: '',
     statusFilter: 'all',
     typeFilter: 'all'
-  });
+  },
-  const [showForm, setShowForm] = useState(false);
+  sortBy: 'created_at',
-  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  sortOrder: 'desc',
-  const [editingUser, setEditingUser] = useState<User | null>(null);
+  selectedUser: null,
-  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  showDetailDialog: false,
-  const [formData, setFormData] = useState<UserFormData>({
+};
-    userType: 'enterprise_admin',
-    status: 'active',
-    roleIds: [],
-  });
 
+export default function TenantUserManagementPage() {
+  const [state, dispatch] = useReducer(userManagementReducer, initialState);
+
+  // 加载用户数据
+  const loadUsers = async (resetPage = false) => {
+    try {
+      dispatch({ type: 'SET_LOADING', payload: true });
+
+      const params: UsersQueryParams = {
+        search: state.filters.searchKeyword || undefined,
+        page: resetPage ? 1 : state.pagination.page,
+        size: state.pagination.size,
+        order_by: state.sortBy,
+        sort_order: state.sortOrder,
+      };
+
+      // 根据状态筛选器设置 is_active 参数
+      if (state.filters.statusFilter === 'active') {
+        params.is_active = true;
+      } else if (state.filters.statusFilter === 'inactive') {
+        params.is_active = false;
+      }
+
+      const response: UsersApiResponse = await fetchUsers(params);
+      const transformedUsers = response.data.map(transformUserData);
+
+      dispatch({
+        type: 'SET_USERS',
+        payload: {
+          data: transformedUsers,
+          pagination: {
+            page: response.page,
+            size: response.size,
+            total: response.total,
+            totalPages: response.total_pages,
+            hasNext: response.has_next,
+            hasPrev: response.has_prev,
+          }
+        }
+      });
+    } catch (error) {
+      console.error('Failed to load users:', error);
+      dispatch({
+        type: 'SET_ERROR',
+        payload: error instanceof Error ? error.message : '加载用户数据失败'
+      });
+    }
+  };
+
+  // 加载企业数据（这里暂时使用mock数据，后续可以添加企业API）
+  const loadEnterprises = () => {
+    // 这里可以添加企业API调用，现在使用mock数据
+    const mockEnterprises: Enterprise[] = [
+      { id: 'ent-1', name: '丰收现代农业集团' },
+      { id: 'ent-2', name: '绿色种植科技有限公司' },
+      { id: 'ent-3', name: '智慧农业示范区' },
+    ];
+    dispatch({ type: 'SET_ENTERPRISES', payload: mockEnterprises });
+  };
+
+  // 搜索处理
+  const handleSearch = (value: string) => {
+    dispatch({ type: 'SET_FILTERS', payload: { searchKeyword: value } });
+  };
+
+  // 状态筛选
+  const handleStatusFilter = (value: string) => {
+    dispatch({ type: 'SET_FILTERS', payload: { statusFilter: value } });
+  };
+
+  // 类型筛选
+  const handleTypeFilter = (value: string) => {
+    dispatch({ type: 'SET_FILTERS', payload: { typeFilter: value } });
+  };
+
+  // 排序处理
+  const handleSort = (sortBy: string) => {
+    const newSortOrder = state.sortBy === sortBy && state.sortOrder === 'desc' ? 'asc' : 'desc';
+    dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder: newSortOrder } });
+  };
+
+  // 分页处理
+  const handlePageChange = (page: number) => {
+    // 边界检查，确保页码在有效范围内
+    if (page < 1) {
+      page = 1;
+    } else if (page > state.pagination.totalPages && state.pagination.totalPages > 0) {
+      page = state.pagination.totalPages;
+    }
+    dispatch({ type: 'SET_PAGINATION', payload: { page } });
+  };
+
+  // 查看详情
+  const handleViewDetail = (user: User) => {
+    dispatch({ type: 'SET_SELECTED_USER', payload: user });
+    dispatch({ type: 'TOGGLE_DETAIL_DIALOG', payload: true });
+  };
+
+  // 编辑用户
+  const handleEdit = (user: User) => {
+    // 这里可以添加编辑逻辑，比如打开编辑对话框
+    toast.info('编辑功能开发中...');
+  };
+
+  // 删除用户
+  const handleDelete = (user: User) => {
+    if (!confirm(`确定要删除用户 ${user.fullName || user.username} 吗？`)) return;
+    // 这里可以添加删除逻辑，调用API删除用户
+    toast.info('删除功能开发中...');
+  };
+
+  // 切换用户状态
+  const handleToggleStatus = (user: User) => {
+    const newStatus = !user.isActive;
+    const statusText = newStatus ? '激活' : '停用';
+    if (!confirm(`确定要${statusText}用户 ${user.fullName || user.username} 吗？`)) return;
+    // 这里可以添加状态切换逻辑，调用API更新用户状态
+    toast.info(`${statusText}功能开发中...`);
+  };
+
+  // 重置密码
+  const handleResetPassword = (user: User) => {
+    if (!confirm(`确定要重置用户 ${user.fullName || user.username} 的密码吗？`)) return;
+    // 这里可以添加重置密码逻辑，调用API重置密码
+    toast.info('重置密码功能开发中...');
+  };
+
+  // 刷新数据
+  const handleRefresh = () => {
+    dispatch({ type: 'REFRESH_DATA' });
+    loadUsers(true);
+    toast.success('数据已刷新');
+  };
+
+  // 统计数据计算
+  const stats = [
+    {
+      label: '总用户数',
+      value: state.pagination.total,
+      color: 'text-blue-600',
+      bg: 'bg-blue-100',
+    },
+    {
+      label: '活跃用户',
+      value: state.users.filter(u => u.isActive).length,
+      color: 'text-green-600',
+      bg: 'bg-green-100',
+    },
+    {
+      label: '管理员',
+      value: state.users.filter(u => u.isSuperuser).length,
+      color: 'text-purple-600',
+      bg: 'bg-purple-100',
+    },
+    {
+      label: '已验证',
+      value: state.users.filter(u => u.isVerified).length,
+      color: 'text-orange-600',
+      bg: 'bg-orange-100',
+    },
+  ];
+
+  // 初始化和监听器
   useEffect(() => {
     loadUsers();
     loadEnterprises();
   }, []);
 
-  const loadEnterprises = () => {
+  useEffect(() => {
-    const data = localStorage.getItem('smart_agriculture_enterprises');
+    const timer = setTimeout(() => {
-    if (data) {
+      loadUsers();
-      const allEnterprises = JSON.parse(data);
+    }, 300);
-      setEnterprises(allEnterprises.map((e: any) => ({ id: e.id, name: e.name })));
+
+    return () => clearTimeout(timer);
+  }, [state.filters.searchKeyword, state.filters.statusFilter, state.filters.typeFilter, state.sortBy, state.sortOrder]);
+
+  useEffect(() => {
+    if (state.pagination.page > 1) {
+      loadUsers();
     }
-  };
+  }, [state.pagination.page]);
-
-  const loadUsers = () => {
-    const data = localStorage.getItem('smart_agriculture_users');
-    if (data) {
-      setUsers(JSON.parse(data));
-    } else {
-      // 初始化示例数据
-      const mockUsers: User[] = [
-        {
-          id: 'user-1',
-          username: 'admin',
-          name: '系统管理员',
-          phone: '13900000000',
-          email: 'admin@system.com',
-          userType: 'super_admin',
-          roleIds: ['role-1'],
-          roles: ['超级管理员'],
-          status: 'active',
-          createdAt: '2024-01-01T00:00:00',
-          updatedAt: '2024-01-01T00:00:00',
-          lastLoginTime: '2024-10-14T10:00:00',
-        },
-        {
-          id: 'user-2',
-          username: 'ent_admin_1',
-          name: '李总',
-          phone: '13900139002',
-          email: 'litotal@fengshou.com',
-          enterpriseId: 'ent-2',
-          enterpriseName: '丰收现代农业集团',
-          userType: 'enterprise_admin',
-          roleIds: ['role-2'],
-          roles: ['企业管理员'],
-          status: 'active',
-          createdAt: '2024-10-05T10:00:00',
-          updatedAt: '2024-10-05T10:00:00',
-          lastLoginTime: '2024-10-14T09:00:00',
-        },
-        {
-          id: 'user-3',
-          username: 'zhangsan',
-          name: '张三',
-          phone: '13800138001',
-          email: 'zhangsan@fengshou.com',
-          enterpriseId: 'ent-2',
-          enterpriseName: '丰收现代农业集团',
-          userType: 'employee',
-          roleIds: ['role-3'],
-          roles: ['操作员'],
-          status: 'active',
-          createdAt: '2024-10-01T08:00:00',
-          updatedAt: '2024-10-01T08:00:00',
-          lastLoginTime: '2024-10-14T08:30:00',
-        },
-      ];
-      localStorage.setItem('smart_agriculture_users', JSON.stringify(mockUsers));
-      setUsers(mockUsers);
-    }
-  };
-
-  const filteredUsers = users.filter(user => {
-    const matchKeyword = !filters.searchKeyword ||
-      user.name.includes(filters.searchKeyword) ||
-      user.username.includes(filters.searchKeyword) ||
-      user.phone.includes(filters.searchKeyword) ||
-      (user.enterpriseName && user.enterpriseName.includes(filters.searchKeyword));
-
-    const matchStatus = filters.statusFilter === 'all' || user.status === filters.statusFilter;
-    const matchType = filters.typeFilter === 'all' || user.userType === filters.typeFilter;
-
-    return matchKeyword && matchStatus && matchType;
-  });
-
-  const handleAddUser = () => {
-    setEditingUser(null);
-    setFormData({
-      userType: 'enterprise_admin',
-      status: 'active',
-      roleIds: [],
-    });
-    setShowForm(true);
-  };
-
-  const handleEdit = (user: User) => {
-    setEditingUser(user);
-    setFormData(user);
-    setShowForm(true);
-  };
-
-  const handleSave = () => {
-    if (!formData.username || !formData.name || !formData.phone) {
-      toast.error('请填写必填项');
-      return;
-    }
-
-    // 如果是企业管理员，必须选择企业
-    if (formData.userType === 'enterprise_admin' && !formData.enterpriseId) {
-      toast.error('企业管理员必须选择所属企业');
-      return;
-    }
-
-    // 根据选择的企业ID设置企业名称
-    let enterpriseName = formData.enterpriseName;
-    if (formData.enterpriseId && !enterpriseName) {
-      const selectedEnterprise = enterprises.find(e => e.id === formData.enterpriseId);
-      if (selectedEnterprise) {
-        enterpriseName = selectedEnterprise.name;
-      }
-    }
-
-    if (editingUser) {
-      const updated = users.map(user =>
-        user.id === editingUser.id
-          ? {
-              ...user,
-              ...formData,
-              enterpriseName,
-              updatedAt: new Date().toISOString(),
-            }
-          : user
-      );
-      setUsers(updated);
-      localStorage.setItem('smart_agriculture_users', JSON.stringify(updated));
-      toast.success('用户信息更新成功');
-    } else {
-      const newUser: User = {
-        id: `user-${Date.now()}`,
-        ...formData as User,
-        enterpriseName,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-      };
-      const updated = [...users, newUser];
-      setUsers(updated);
-      localStorage.setItem('smart_agriculture_users', JSON.stringify(updated));
-      toast.success('用户添加成功');
-    }
-
-    setShowForm(false);
-  };
-
-  const handleDelete = (id: string) => {
-    if (!confirm('确定要删除该用户吗？')) return;
-
-    const updated = users.filter(user => user.id !== id);
-    setUsers(updated);
-    localStorage.setItem('smart_agriculture_users', JSON.stringify(updated));
-    toast.success('用户删除成功');
-  };
-
-  const handleToggleStatus = (user: User) => {
-    const newStatus = user.status === 'active' ? 'frozen' : 'active';
-    const updated = users.map(u =>
-      u.id === user.id
-        ? { ...u, status: newStatus, updatedAt: new Date().toISOString() }
-        : u
-    );
-    setUsers(updated);
-    localStorage.setItem('smart_agriculture_users', JSON.stringify(updated));
-    toast.success(newStatus === 'active' ? '账户已激活' : '账户已冻结');
-  };
-
-  const handleResetPassword = (user: User) => {
-    if (!confirm(`确定要重置 ${user.name} 的密码吗？`)) return;
-    toast.success('密码已重置为：123456');
-  };
-
-  const handleViewDetail = (user: User) => {
-    setSelectedUser(user);
-    setShowDetailDialog(true);
-  };
-
-  const handleExport = () => {
-    const dataStr = JSON.stringify(users, null, 2);
-    const dataBlob = new Blob([dataStr], { type: 'application/json' });
-    const url = URL.createObjectURL(dataBlob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `users_${new Date().getTime()}.json`;
-    link.click();
-    toast.success('用户数据导出成功');
-  };
 
   return (
     <div className="space-y-6">
-      <UserManagementHeader
+      {/* 页面标题和统计 */}
-        onAddUser={handleAddUser}
+      <UserManagementHeader stats={stats} onRefresh={handleRefresh} loading={state.loading} />
-        onExport={handleExport}
-      />
 
       {/* 统计卡片 */}
-      <UserManagementStatsCards users={users} />
+      <UserManagementStatsCards stats={stats} />
 
       {/* 搜索和筛选 */}
       <UserManagementFilters
-        filters={filters}
+        filters={state.filters}
-        onFiltersChange={setFilters}
+        onSearchChange={handleSearch}
+        onStatusFilterChange={handleStatusFilter}
+        onTypeFilterChange={handleTypeFilter}
       />
 
+      {/* 错误显示 */}
+      {state.error && (
+        <div className="p-4 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg">
+          <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
+            <span>{state.error}</span>
+          </div>
+        </div>
+      )}
+
       {/* 用户列表 */}
       <UserList
-        users={filteredUsers}
+        users={state.users}
+        loading={state.loading}
+        pagination={state.pagination}
+        onPageChange={handlePageChange}
         onViewDetail={handleViewDetail}
         onEdit={handleEdit}
-        onResetPassword={handleResetPassword}
-        onToggleStatus={handleToggleStatus}
         onDelete={handleDelete}
+        onToggleStatus={handleToggleStatus}
+        onResetPassword={handleResetPassword}
       />
 
-      {/* 添加/编辑表单 */}
+      {/* 用户详情对话框 */}
-      <UserFormDialog
-        open={showForm}
-        onOpenChange={setShowForm}
-        editingUser={editingUser}
-        formData={formData}
-        onFormDataChange={setFormData}
-        onSave={handleSave}
-        enterprises={enterprises}
-      />
-
-      {/* 详情对话框 */}
       <UserDetailDialog
-        open={showDetailDialog}
+        open={state.showDetailDialog}
-        onOpenChange={setShowDetailDialog}
+        onOpenChange={(open) => dispatch({ type: 'TOGGLE_DETAIL_DIALOG', payload: open })}
-        selectedUser={selectedUser}
+        user={state.selectedUser}
       />
     </div>
   );

crop-x/src/app/(app)/central-config/tenant/user-management/types.ts

@@ -3,18 +3,37 @@
 export interface User {
   id: string;
   username: string;
-  name: string;
+  email: string;
-  phone: string;
+  fullName: string | null;
-  email?: string;
+  phone: string | null;
-  enterpriseId?: string;
+  isActive: boolean;
-  enterpriseName?: string;
+  isSuperuser: boolean;
-  roleIds: string[];
+  isVerified: boolean;
-  roles?: string[];
-  userType: UserType;
-  status: UserStatus;
   createdAt: string;
   updatedAt: string;
+  lastLoginAt: string | null;
+  avatarUrl: string | null;
+  bio: string | null;
+  displayName: string | null;
+  departmentId: string | null;
+  departmentName: string | null;
+  scope: string;
+  companyName: string | null;
+  tenantId: string;
+}
+
+// 为了兼容现有代码，保留一些映射属性
+export interface UserWithLegacyFields extends User {
+  // 向后兼容的属性
+  name: string;
+  phone: string;
+  enterpriseId?: string;
+  enterpriseName?: string;
+  userType: UserType;
+  status: UserStatus;
   lastLoginTime?: string;
+  roleIds: string[];
+  roles?: string[];
 }
 
 export type UserType = 'super_admin' | 'enterprise_admin' | 'employee';
@@ -40,6 +59,37 @@ export interface UserFilters {
   typeFilter: string;
 }
 
+// API响应数据类型
+export interface UsersApiResponse {
+  data: User[];
+  total: number;
+  page: number;
+  size: number;
+  total_pages: number;
+  has_next: boolean;
+  has_prev: boolean;
+}
+
+// 分页状态
+export interface PaginationState {
+  page: number;
+  size: number;
+  total: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+}
+
+// API查询参数
+export interface UsersQueryParams {
+  search?: string;
+  is_active?: boolean;
+  page?: number;
+  size?: number;
+  order_by?: string;
+  sort_order?: 'asc' | 'desc';
+}
+
 // 表单数据
 export interface UserFormData {
   username?: string;