641 lines
22 KiB
JavaScript
641 lines
22 KiB
JavaScript
|
import React, { useState, useEffect, useCallback } from 'react';
|
|||
|
|
import axios from '../../services/axios';
|
|||
|
|
import { adminAPI } from '../../services/api';
|
|||
|
|
import { toast } from 'react-toastify';
|
|||
|
|
import Pagination from '../../components/Pagination';
|
|||
|
|
import '../../styles/Pagination.css';
|
|||
|
|
import { debounce } from '../../utils/debounce';
|
|||
|
|
|
|||
|
|
const UserManagement = () => {
|
|||
|
|
const [users, setUsers] = useState([]);
|
|||
|
|
const [page, setPage] = useState(1);
|
|||
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|||
|
|
const [totalPages, setTotalPages] = useState(1);
|
|||
|
|
const [totalItems, setTotalItems] = useState(0);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|||
|
|
const [sortBy, setSortBy] = useState('created_at');
|
|||
|
|
const [sortOrder, setSortOrder] = useState('desc');
|
|||
|
|
const [showAddModal, setShowAddModal] = useState(false);
|
|||
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|||
|
|
const [currentUser, setCurrentUser] = useState(null);
|
|||
|
|
const [currentLoginUser, setCurrentLoginUser] = useState(null);
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
username: '',
|
|||
|
|
email: '',
|
|||
|
|
password: '',
|
|||
|
|
is_active: true,
|
|||
|
|
daily_limit: 100
|
|||
|
|
});
|
|||
|
|
const [selectedUsers, setSelectedUsers] = useState([]);
|
|||
|
|
const [showBatchModal, setShowBatchModal] = useState(false);
|
|||
|
|
const [batchAction, setBatchAction] = useState('');
|
|||
|
|
|
|||
|
|
// 获取用户列表
|
|||
|
|
const fetchUsers = async (reset = false) => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const currentPage = reset ? 1 : page;
|
|||
|
|
if (reset) setPage(1);
|
|||
|
|
|
|||
|
|
const response = await axios.get('/api/admin/users', {
|
|||
|
|
params: {
|
|||
|
|
page: currentPage,
|
|||
|
|
per_page: itemsPerPage,
|
|||
|
|
search: searchQuery,
|
|||
|
|
sort_by: sortBy,
|
|||
|
|
sort_order: sortOrder
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { users: newUsers, total_pages, total_users } = response.data;
|
|||
|
|
|
|||
|
|
setUsers(newUsers);
|
|||
|
|
setTotalPages(total_pages);
|
|||
|
|
setTotalItems(total_users);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取用户列表失败:', error);
|
|||
|
|
toast.error('获取用户列表失败');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePageChange = (newPage) => {
|
|||
|
|
setPage(newPage);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleItemsPerPageChange = (newItemsPerPage) => {
|
|||
|
|
setItemsPerPage(newItemsPerPage);
|
|||
|
|
setPage(1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 防抖搜索函数
|
|||
|
|
const debouncedSearch = useCallback(
|
|||
|
|
debounce(() => {
|
|||
|
|
fetchUsers(true);
|
|||
|
|
}, 500),
|
|||
|
|
[]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchCurrentUser();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
debouncedSearch();
|
|||
|
|
}, [searchQuery, debouncedSearch]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchUsers();
|
|||
|
|
}, [sortBy, sortOrder, itemsPerPage, page]);
|
|||
|
|
|
|||
|
|
// 获取当前登录用户信息
|
|||
|
|
const fetchCurrentUser = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await axios.get('/api/auth/me');
|
|||
|
|
setCurrentLoginUser(res.data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('获取当前用户信息失败', err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理表单变化
|
|||
|
|
const handleChange = (e) => {
|
|||
|
|
const { name, value, type, checked } = e.target;
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
[name]: type === 'checkbox' ? checked : value
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 打开添加用户模态框
|
|||
|
|
const handleAddUser = () => {
|
|||
|
|
setFormData({
|
|||
|
|
username: '',
|
|||
|
|
email: '',
|
|||
|
|
password: '',
|
|||
|
|
is_active: false,
|
|||
|
|
daily_quota: 5
|
|||
|
|
});
|
|||
|
|
setShowAddModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 打开编辑用户模态框
|
|||
|
|
const handleEditUser = (user) => {
|
|||
|
|
setCurrentUser(user);
|
|||
|
|
setFormData({
|
|||
|
|
username: user.username,
|
|||
|
|
email: user.email,
|
|||
|
|
password: '', // 不显示现有密码
|
|||
|
|
is_active: user.is_active,
|
|||
|
|
daily_quota: user.daily_quota
|
|||
|
|
});
|
|||
|
|
setShowEditModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 提交添加用户
|
|||
|
|
const submitAddUser = async () => {
|
|||
|
|
try {
|
|||
|
|
if (!formData.username || !formData.password) {
|
|||
|
|
toast.warning('用户名和密码为必填项');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await axios.post('/api/admin/users', formData);
|
|||
|
|
toast.success('用户添加成功');
|
|||
|
|
setShowAddModal(false);
|
|||
|
|
fetchUsers();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('添加用户失败，可能用户名已存在');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 提交编辑用户
|
|||
|
|
const submitEditUser = async () => {
|
|||
|
|
try {
|
|||
|
|
if (!currentUser) return;
|
|||
|
|
|
|||
|
|
// 准备要发送的数据，不包含空密码
|
|||
|
|
const updateData = { ...formData };
|
|||
|
|
if (!updateData.password) {
|
|||
|
|
delete updateData.password;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await axios.put(`/api/admin/users/${currentUser.id}`, updateData);
|
|||
|
|
toast.success('用户更新成功');
|
|||
|
|
setShowEditModal(false);
|
|||
|
|
fetchUsers();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('更新用户失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除用户
|
|||
|
|
const handleDeleteUser = async (userId) => {
|
|||
|
|
if (window.confirm('确定要删除这个用户吗？此操作不可恢复。')) {
|
|||
|
|
try {
|
|||
|
|
await adminAPI.deleteUser(userId);
|
|||
|
|
toast.success('用户已删除');
|
|||
|
|
fetchUsers();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('删除用户失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 处理用户选择
|
|||
|
|
const handleSelectUser = (userId) => {
|
|||
|
|
setSelectedUsers(prev =>
|
|||
|
|
prev.includes(userId)
|
|||
|
|
? prev.filter(id => id !== userId)
|
|||
|
|
: [...prev, userId]
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 全选/取消全选
|
|||
|
|
const handleSelectAll = () => {
|
|||
|
|
if (selectedUsers.length === users.length) {
|
|||
|
|
setSelectedUsers([]);
|
|||
|
|
} else {
|
|||
|
|
setSelectedUsers(users.map(user => user.id));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 批量操作
|
|||
|
|
const handleBatchAction = (action) => {
|
|||
|
|
if (selectedUsers.length === 0) {
|
|||
|
|
toast.warning('请先选择用户');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setBatchAction(action);
|
|||
|
|
setShowBatchModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 执行批量操作
|
|||
|
|
const executeBatchAction = async () => {
|
|||
|
|
try {
|
|||
|
|
let successCount = 0;
|
|||
|
|
|
|||
|
|
if (batchAction === 'delete') {
|
|||
|
|
if (!window.confirm(`确定要删除选中的 ${selectedUsers.length} 个用户吗？此操作不可恢复。`)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (const userId of selectedUsers) {
|
|||
|
|
try {
|
|||
|
|
await adminAPI.deleteUser(userId);
|
|||
|
|
successCount++;
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(`删除用户 ${userId} 失败:`, err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
toast.success(`成功删除 ${successCount}/${selectedUsers.length} 个用户`);
|
|||
|
|
} else if (batchAction === 'activate') {
|
|||
|
|
for (const userId of selectedUsers) {
|
|||
|
|
try {
|
|||
|
|
await adminAPI.updateUser(userId, { is_active: true });
|
|||
|
|
successCount++;
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(`激活用户 ${userId} 失败:`, err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
toast.success(`成功激活 ${successCount}/${selectedUsers.length} 个用户`);
|
|||
|
|
} else if (batchAction === 'deactivate') {
|
|||
|
|
for (const userId of selectedUsers) {
|
|||
|
|
try {
|
|||
|
|
await adminAPI.updateUser(userId, { is_active: false });
|
|||
|
|
successCount++;
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(`禁用用户 ${userId} 失败:`, err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
toast.success(`成功禁用 ${successCount}/${selectedUsers.length} 个用户`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setShowBatchModal(false);
|
|||
|
|
setSelectedUsers([]);
|
|||
|
|
fetchUsers();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('批量操作失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 切换用户激活状态
|
|||
|
|
const toggleUserStatus = async (userId, currentStatus) => {
|
|||
|
|
try {
|
|||
|
|
await axios.put(`/api/admin/users/${userId}`, {
|
|||
|
|
is_active: !currentStatus
|
|||
|
|
});
|
|||
|
|
toast.success(`用户已${!currentStatus ? '激活' : '禁用'}`);
|
|||
|
|
fetchUsers();
|
|||
|
|
} catch (err) {
|
|||
|
|
toast.error('更新用户状态失败');
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading && page === 1) {
|
|||
|
|
return (
|
|||
|
|
<div className="d-flex justify-content-center align-items-center vh-100">
|
|||
|
|
<div className="spinner-border text-primary" role="status">
|
|||
|
|
<span className="visually-hidden">Loading...</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="d-flex justify-content-between align-items-center mb-4">
|
|||
|
|
<h1>用户管理</h1>
|
|||
|
|
<div className="flex items-center space-x-4">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="搜索用户名或邮箱..."
|
|||
|
|
className="p-2 border border-gray-300 rounded-md w-64 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|||
|
|
value={searchQuery}
|
|||
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
<select
|
|||
|
|
className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|||
|
|
|
|||
|
|
value={sortBy}
|
|||
|
|
onChange={(e) => setSortBy(e.target.value)}
|
|||
|
|
>
|
|||
|
|
<option value="created_at">按创建时间排序</option>
|
|||
|
|
<option value="username">按用户名排序</option>
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|||
|
|
value={sortOrder}
|
|||
|
|
onChange={(e) => setSortOrder(e.target.value)}
|
|||
|
|
>
|
|||
|
|
<option value="desc">降序</option>
|
|||
|
|
<option value="asc">升序</option>
|
|||
|
|
</select>
|
|||
|
|
{selectedUsers.length > 0 && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
className="btn-admin-outline-success btn-sm me-2"
|
|||
|
|
onClick={() => handleBatchAction('activate')}
|
|||
|
|
>
|
|||
|
|
批量激活
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-admin-outline-warning btn-sm me-2"
|
|||
|
|
onClick={() => handleBatchAction('deactivate')}
|
|||
|
|
>
|
|||
|
|
批量禁用
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-admin-outline-danger btn-sm me-2"
|
|||
|
|
onClick={() => handleBatchAction('delete')}
|
|||
|
|
>
|
|||
|
|
批量删除
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<button className="btn-admin-primary" onClick={handleAddUser}>
|
|||
|
|
<i className="bi bi-plus-circle me-2"></i>添加用户
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{selectedUsers.length > 0 && (
|
|||
|
|
<div className="alert alert-info d-flex justify-content-between align-items-center mb-3">
|
|||
|
|
<span>已选择 {selectedUsers.length} 个用户</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="card">
|
|||
|
|
<div className="card-body">
|
|||
|
|
<div className="table-responsive">
|
|||
|
|
<table className="table table-striped table-hover">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={selectedUsers.length === users.length && users.length > 0}
|
|||
|
|
ref={(el) => {
|
|||
|
|
if (el) {
|
|||
|
|
el.indeterminate = selectedUsers.length > 0 && selectedUsers.length < users.length;
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
onChange={handleSelectAll}
|
|||
|
|
/>
|
|||
|
|
</th>
|
|||
|
|
<th>ID</th>
|
|||
|
|
<th>用户名</th>
|
|||
|
|
<th>邮箱</th>
|
|||
|
|
<th>状态</th>
|
|||
|
|
<th>每日限额</th>
|
|||
|
|
<th>注册时间</th>
|
|||
|
|
<th>操作</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{users.length === 0 ? (
|
|||
|
|
<tr>
|
|||
|
|
<td colSpan="8" className="text-center">暂无用户数据</td>
|
|||
|
|
</tr>
|
|||
|
|
) : (
|
|||
|
|
users.map(user => (
|
|||
|
|
<tr key={user.id}>
|
|||
|
|
<td>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={selectedUsers.includes(user.id)}
|
|||
|
|
onChange={() => handleSelectUser(user.id)}
|
|||
|
|
/>
|
|||
|
|
</td>
|
|||
|
|
<td>{user.id}</td>
|
|||
|
|
<td>{user.username}</td>
|
|||
|
|
<td>{user.email}</td>
|
|||
|
|
<td>
|
|||
|
|
<span className={`badge ${user.is_active ? 'bg-success' : 'bg-danger'}`}>
|
|||
|
|
{user.is_active ? '已激活' : '未激活'}
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
<td>{user.daily_quota}</td>
|
|||
|
|
<td>{new Date(user.created_at).toLocaleString()}</td>
|
|||
|
|
<td>
|
|||
|
|
<div className="admin-btn-group">
|
|||
|
|
<button
|
|||
|
|
className="btn-admin-outline-primary btn-sm"
|
|||
|
|
onClick={() => handleEditUser(user)}
|
|||
|
|
>
|
|||
|
|
<i className="bi bi-pencil me-1"></i>编辑
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className={user.is_active ? "btn-admin-outline-danger btn-sm" : "btn-admin-outline-success btn-sm"}
|
|||
|
|
onClick={() => toggleUserStatus(user.id, user.is_active)}
|
|||
|
|
>
|
|||
|
|
<i className={`bi bi-${user.is_active ? 'x-circle' : 'check-circle'} me-1`}></i>
|
|||
|
|
{user.is_active ? '禁用' : '激活'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-admin-outline-danger btn-sm"
|
|||
|
|
onClick={() => handleDeleteUser(user.id)}
|
|||
|
|
disabled={currentLoginUser && user.id === currentLoginUser.id} // 不能删除自己
|
|||
|
|
>
|
|||
|
|
<i className="bi bi-trash me-1"></i>删除
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<Pagination
|
|||
|
|
currentPage={page}
|
|||
|
|
totalPages={totalPages}
|
|||
|
|
itemsPerPage={itemsPerPage}
|
|||
|
|
onItemsPerPageChange={handleItemsPerPageChange}
|
|||
|
|
onPageChange={handlePageChange}
|
|||
|
|
totalItems={totalItems}
|
|||
|
|
loading={loading}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 添加用户模态框 */}
|
|||
|
|
{showAddModal && (
|
|||
|
|
<div className="modal-overlay" onClick={() => setShowAddModal(false)}>
|
|||
|
|
<div className="admin-modal" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="modal-header">
|
|||
|
|
<h5 className="modal-title">添加新用户</h5>
|
|||
|
|
<button className="modal-close" onClick={() => setShowAddModal(false)}>×</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-body">
|
|||
|
|
<form>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">用户名</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-control"
|
|||
|
|
name="username"
|
|||
|
|
value={formData.username}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">邮箱</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
className="form-control"
|
|||
|
|
name="email"
|
|||
|
|
value={formData.email}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">密码</label>
|
|||
|
|
<input
|
|||
|
|
type="password"
|
|||
|
|
className="form-control"
|
|||
|
|
name="password"
|
|||
|
|
value={formData.password}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">每日领取限额</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
className="form-control"
|
|||
|
|
name="daily_quota"
|
|||
|
|
value={formData.daily_quota}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
min="1"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3 form-check">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
className="form-check-input"
|
|||
|
|
name="is_active"
|
|||
|
|
checked={formData.is_active}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
<label className="form-check-label">是否激活</label>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-footer">
|
|||
|
|
<button className="btn-admin-outline-secondary" onClick={() => setShowAddModal(false)}>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button className="btn-admin-outline-primary" onClick={submitAddUser}>
|
|||
|
|
添加
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 编辑用户模态框 */}
|
|||
|
|
{showEditModal && (
|
|||
|
|
<div className="modal-overlay" onClick={() => setShowEditModal(false)}>
|
|||
|
|
<div className="admin-modal" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="modal-header">
|
|||
|
|
<h5 className="modal-title">编辑用户</h5>
|
|||
|
|
<button className="modal-close" onClick={() => setShowEditModal(false)}>×</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-body">
|
|||
|
|
<form>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">用户名</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-control"
|
|||
|
|
name="username"
|
|||
|
|
value={formData.username}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
required
|
|||
|
|
disabled={currentUser?.is_admin} // 管理员用户名不可修改
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">邮箱</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
className="form-control"
|
|||
|
|
name="email"
|
|||
|
|
value={formData.email}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">密码（不修改请留空）</label>
|
|||
|
|
<input
|
|||
|
|
type="password"
|
|||
|
|
className="form-control"
|
|||
|
|
name="password"
|
|||
|
|
value={formData.password}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
placeholder="不修改请留空"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3">
|
|||
|
|
<label className="form-label">每日领取限额</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
className="form-control"
|
|||
|
|
name="daily_quota"
|
|||
|
|
value={formData.daily_quota}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
min="1"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="mb-3 form-check">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
className="form-check-input"
|
|||
|
|
name="is_active"
|
|||
|
|
checked={formData.is_active}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
<label className="form-check-label">是否激活</label>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-footer">
|
|||
|
|
<button className="btn-admin-outline-secondary" onClick={() => setShowEditModal(false)}>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button className="btn-admin-outline-primary" onClick={submitEditUser}>
|
|||
|
|
保存
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 批量操作确认模态框 */}
|
|||
|
|
{showBatchModal && (
|
|||
|
|
<div className="modal-overlay" onClick={() => setShowBatchModal(false)}>
|
|||
|
|
<div className="admin-modal" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="modal-header">
|
|||
|
|
<h5 className="modal-title">确认批量操作</h5>
|
|||
|
|
<button className="modal-close" onClick={() => setShowBatchModal(false)}>×</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-body">
|
|||
|
|
{batchAction === 'delete' && (
|
|||
|
|
<p>确定要删除选中的 {selectedUsers.length} 个用户吗？此操作不可恢复。</p>
|
|||
|
|
)}
|
|||
|
|
{batchAction === 'activate' && (
|
|||
|
|
<p>确定要激活选中的 {selectedUsers.length} 个用户吗？</p>
|
|||
|
|
)}
|
|||
|
|
{batchAction === 'deactivate' && (
|
|||
|
|
<p>确定要禁用选中的 {selectedUsers.length} 个用户吗？</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="modal-footer">
|
|||
|
|
<button className="btn-admin-outline-secondary" onClick={() => setShowBatchModal(false)}>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button className="btn-admin-outline-primary" onClick={executeBatchAction}>
|
|||
|
|
确认
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default UserManagement;
|