cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统 - 企业管理和用户管理 列表重构

Browse Source
This commit is contained in:
peng
2025-11-06 17:47:14 +08:00
parent 191d218ec4
commit 008fc12db9
8 changed files with 1154 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,25 +2,27 @@
* filekorolheader: 用户管理页面 - 用户查询和管理页面
* 功能：用户列表查询、搜索筛选、详情查看、用户管理
* 路径：/central-config/tenant/user-management
* 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，API集成，shadcn语义化样式
* 规范：遵循crop-x/docs/开发项目规范.md，使用SearchFormPagination公共组件，shadcn语义化样式
*/
'use client';
import { useReducer, useEffect } from 'react';
import { useReducer, useEffect, useState, useCallback, useMemo } from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Eye, Edit, Lock, UserX, UserCheck } from 'lucide-react';
import { UserDetailDialog } from './components/UserDetailDialog';
import { SearchFormPagination, SearchFieldConfig, TableColumnConfig } from '@/components/common/searchFormPagination';
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 { UserDetailDialog } from './components/UserDetailDialog';
import { Enterprise, UserFilters } from './types';
import { UserFilters } from './types';
// 移除了Enterprise的引用，因为新实现中不再需要
// 用户管理状态管理
interface UserManagementState {
users: User[];
enterprises: Enterprise[];
loading: boolean;
error: string | null;
pagination: PaginationState;
@@ -38,7 +40,6 @@ type UserManagementAction =
| { 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' };
@@ -63,8 +64,6 @@ const userManagementReducer = (state: UserManagementState, action: UserManagemen
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':
@@ -78,7 +77,6 @@ const userManagementReducer = (state: UserManagementState, action: UserManagemen
const initialState: UserManagementState = {
users: [],
enterprises: [],
loading: false,
error: null,
pagination: {
@@ -102,11 +100,178 @@ const initialState: UserManagementState = {
export default function TenantUserManagementPage() {
const [state, dispatch] = useReducer(userManagementReducer, initialState);
const [searchFilters, setSearchFilters] = useState<Record<string, string>>({});
// 搜索字段配置
const searchFields: SearchFieldConfig[] = useMemo(() => [
{
key: 'search',
label: '搜索',
type: 'text',
placeholder: '搜索用户名、姓名、邮箱...',
},
{
key: 'status',
label: '用户状态',
type: 'select',
defaultValue: 'all',
options: [
{ value: 'all', label: '全部状态' },
{ value: 'active', label: '活跃' },
{ value: 'inactive', label: '未激活' },
],
},
{
key: 'type',
label: '用户类型',
type: 'select',
defaultValue: 'all',
options: [
{ value: 'all', label: '全部类型' },
{ value: 'admin', label: '管理员' },
{ value: 'user', label: '普通用户' },
{ value: 'staff', label: '员工' },
],
},
], []);
// 表格列配置
const columns: TableColumnConfig[] = useMemo(() => [
{
key: 'username',
label: '用户名',
sortable: true,
render: (value: string, user: User) => (
<div className="font-medium">{value}</div>
),
},
{
key: 'fullName',
label: '姓名',
sortable: true,
render: (value: string) => value || '-',
},
{
key: 'email',
label: '邮箱',
sortable: true,
render: (value: string) => value || '-',
},
{
key: 'isActive',
label: '状态',
sortable: true,
render: (value: boolean) => (
<div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
value
? 'bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400'
: 'bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400'
}`}>
<div className={`w-2 h-2 rounded-full ${value ? 'bg-green-500' : 'bg-red-500'}`} />
{value ? '活跃' : '未激活'}
</div>
),
},
{
key: 'isSuperuser',
label: '角色',
sortable: true,
render: (value: boolean, user: User) => {
if (value) {
return (
<div className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-purple-50 dark:bg-purple-950 text-purple-600 dark:text-purple-400">
<div className="w-2 h-2 rounded-full bg-purple-500" />
超级管理员
</div>
);
}
return (
<div className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
<div className="w-2 h-2 rounded-full bg-blue-500" />
普通用户
</div>
);
},
},
{
key: 'isVerified',
label: '验证',
sortable: true,
render: (value: boolean) => (
<div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
value
? 'bg-orange-50 dark:bg-orange-950 text-orange-600 dark:text-orange-400'
: 'bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400'
}`}>
{value ? '已验证' : '未验证'}
</div>
),
},
{
key: 'lastLoginAt',
label: '最后登录',
sortable: true,
render: (value: string) => {
if (!value) return '-';
try {
const date = new Date(value);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
} catch {
return value;
}
},
},
{
key: 'actions',
label: '操作',
render: (_, user: User) => (
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => handleViewDetail(user)}
>
<Eye className="w-4 h-4" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleEdit(user)}
>
<Edit className="w-4 h-4" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleToggleStatus(user)}
>
{user.isActive ? (
<UserX className="w-4 h-4 text-orange-600" />
) : (
<UserCheck className="w-4 h-4 text-green-600" />
)}
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleResetPassword(user)}
>
<Lock className="w-4 h-4" />
</Button>
</div>
),
},
], []);
// 加载用户数据
const loadUsers = async (resetPage = false) => {
const loadUsers = useCallback(async (resetPage = false) => {
try {
dispatch({ type: 'SET_LOADING', payload: true });
const params: UsersQueryParams = {
@@ -114,6 +279,26 @@ export default function TenantUserManagementPage() {
size: state.pagination.size,
is_active: true,
};
// 添加搜索条件
if (searchFilters.search) {
params.search = searchFilters.search;
}
if (searchFilters.status && searchFilters.status !== 'all') {
params.is_active = searchFilters.status === 'active';
}
if (searchFilters.type && searchFilters.type !== 'all') {
// For user type filtering, we'll need to handle this differently based on the API
// For now, we'll filter on the client side if needed
}
if (state.sortBy) {
params.order_by = state.sortBy;
params.sort_order = state.sortOrder;
}
const response: UsersApiResponse = await fetchUsers(params);
const transformedUsers = response.data.map(transformUserData);
@@ -138,50 +323,33 @@ export default function TenantUserManagementPage() {
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 });
// };
}, [state.pagination.page, state.pagination.size, state.sortBy, state.sortOrder, searchFilters]);
// 搜索处理
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 handleSearch = useCallback((filters: Record<string, string>) => {
setSearchFilters(filters);
dispatch({ type: 'SET_PAGINATION', payload: { page: 1 } });
}, []);
// 排序处理
const handleSort = (sortBy: string) => {
const newSortOrder = state.sortBy === sortBy && state.sortOrder === 'desc' ? 'asc' : 'desc';
dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder: newSortOrder } });
};
const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder } });
}, []);
// 分页处理
const handlePageChange = (page: number) => {
// 边界检查，确保页码在有效范围内
const handlePageChange = useCallback((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 } });
};
}, [state.pagination.totalPages]);
// 每页条数变化处理
const handleSizeChange = useCallback((size: number) => {
dispatch({ type: 'SET_PAGINATION', payload: { size, page: 1 } });
}, []);
// 查看详情
const handleViewDetail = (user: User) => {
@@ -191,108 +359,86 @@ export default function TenantUserManagementPage() {
// 编辑用户
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 stats = [
const stats = useMemo(() => [
{
label: '总用户数',
value: state.pagination.total,
color: 'text-blue-600',
bg: 'bg-blue-100',
color: 'text-blue-600 dark:text-blue-400',
bg: 'bg-blue-50 dark:bg-blue-950',
},
{
label: '活跃用户',
value: state.users.filter(u => u.isActive).length,
color: 'text-green-600',
bg: 'bg-green-100',
color: 'text-green-600 dark:text-green-400',
bg: 'bg-green-50 dark:bg-green-950',
},
{
label: '管理员',
value: state.users.filter(u => u.isSuperuser).length,
color: 'text-purple-600',
bg: 'bg-purple-100',
color: 'text-purple-600 dark:text-purple-400',
bg: 'bg-purple-50 dark:bg-purple-950',
},
{
label: '已验证',
value: state.users.filter(u => u.isVerified).length,
color: 'text-orange-600',
bg: 'bg-orange-100',
color: 'text-orange-600 dark:text-orange-400',
bg: 'bg-orange-50 dark:bg-orange-950',
},
];
], [state.users, state.pagination.total]);
// 加载数据
useEffect(() => {
loadUsers();
}, [state.filters.searchKeyword, state.filters.statusFilter, state.filters.typeFilter, state.sortBy, state.sortOrder]);
useEffect(() => {
if (state.pagination.page > 1) {
loadUsers();
}
}, [state.pagination.page]);
loadUsers();
}, [loadUsers]);
return (
<div className="space-y-6">
{/* 页面标题和统计 */}
{/* 页面标题 */}
<UserManagementHeader stats={stats} />
{/* 统计卡片 */}
<UserManagementStatsCards stats={stats} />
{/* 搜索和筛选 */}
<UserManagementFilters
filters={state.filters}
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={state.users}
{/* 搜索表单、数据表格和分页 */}
<SearchFormPagination
formTitle="用户列表"
formRightContent={
<Button onClick={() => toast.info('新建用户功能开发中...')}>
新建用户
</Button>
}
searchFields={searchFields}
columns={columns}
data={state.users}
loading={state.loading}
error={state.error}
pagination={state.pagination}
sortBy={state.sortBy}
sortOrder={state.sortOrder}
onPageChange={handlePageChange}
onViewDetail={handleViewDetail}
onEdit={handleEdit}
onDelete={handleDelete}
onToggleStatus={handleToggleStatus}
onResetPassword={handleResetPassword}
onSizeChange={handleSizeChange}
onSearch={handleSearch}
onSort={handleSort}
emptyText="暂无用户数据"
sizeOptions={[10, 20, 50, 100]}
/>
{/* 用户详情对话框 */}