// 从JSP后端获取初始数据
<%
// 模拟从数据库获取的用户数据
List
Map
user1.put("id" 1);
user1.put("username" "" user1.put("email" "angsan@example.com" user1.put("e"admin" user1.put("Active" true);
user1.put(""https://picsum.photos/100/100?random=1" userList.add(user1);
Map
user2.put("id" 2);
user2.put("username" "四" user2.put(""lisi@example.com" user2.put("e"user" user2.put("Active" true);
user2.put(""https://picsum.photos/100/100?random=2" userList.add(user2);
%>
// 将JSP数据转换为JavaScript对象
const initialUsers = [
<%
for(int i = 0; i < userList.size(); i++) {
Map
if(i > 0) out.print(" %>
{
id: <%= user.get("id",
username: " user.get("e"" email: " user.get(""" role: " user.get("e"" isActive: <%= user.get("Active" %>,
avatar: "<%= user.get("avatar" %>" lastLogin: new Date().toISOString()
}
<%
}
%>
];
// 用户管理应用主逻辑
class UserManager {
constructor() {
this.users = this.loadUsersFromStorage() || initialUsers;
this.filteredUsers = [...this.users];
this.currentTheme = 'light';
this.init();
}
init() {
this.bindEvents();
this.renderUserList();
this.updateStats();
this.applyTheme(this.currentTheme);
}
bindEvents() {
// 添加用户按钮事件
document.getElementById('addUserBtn').addEventListener('click', () => {
this.showAddUserModal();
});
// 保存用户按钮事件
document.getElementById('saveUserBtn').addEventListener('click', () => {
this.saveUser();
});
// 取消按钮事件
document.getElementById('cancelBtn').addEventListener('click', () => {
this.hideAddUserModal();
});
// 刷新按钮事件
document.getElementById('refreshBtn').addEventListener('click', () => {
this.refreshData();
});
// 搜索功能
document.getElementById('searchInput').addEventListener('input', (e) => {
this.filterUsers(e.target.value);
});
// 主题切换
document.getElementById('themeToggle').addEventListener('click', () => {
this.toggleTheme();
});
// 设置面板
document.getElementById('settingsBtn').addEventListener('click', () => {
this.toggleSettings();
});
// 暗黑模式切换
document.getElementById('darkModeToggle').addEventListener('change', (e) => {
this.toggleDarkMode(e.target.checked);
});
// 模态框外部点击关闭
document.getElementById('addUserModal').addEventListener('click', (e) => {
if (e.target.id === 'addUserModal') {
this.hideAddUserModal();
}
});
// 键盘快捷键
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'n') {
e.preventDefault();
this.showAddUserModal();
}
if (e.key === 'Escape') {
this.hideAddUserModal();
this.hideSettings();
}
});
}
renderUserList() {
const userListContainer = document.getElementById('userList');
userListContainer.innerHTML = '';
this.filteredUsers.forEach(user => {
const userElement = this.createUserElement(user);
userListContainer.appendChild(userElement);
});
}
createUserElement(user) {
const userDiv = document.createElement('div');
userDiv.className = 'flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors fade-in';
userDiv.innerHTML = `
user.role ="="=" 'moderator' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800' }"${user.role}
${user.isActive ? '活跃' : '非活跃'}
`;
return userDiv;
}
showAddUserModal() {
document.getElementById('addUserModal').classList.remove('hidden');
setTimeout(() => {
document.getElementById('addUserModal').classList.add('flex');
}, 10);
}
hideAddUserModal() {
document.getElementById('addUserModal').classList.add('hidden');
document.getElementById('addUserModal').classList.remove('flex');
document.getElementById('userForm').reset();
}
saveUser() {
const form = document.getElementById('userForm');
const formData = new FormData(form);
// 表单验证
if (!formData.get('username') || !formData.get('email')) {
this.showNotification('请填写所有必填字段', 'error');
return;
}
const newUser = {
id: Date.now(), // 简单ID生成
username: formData.get('username'),
email: formData.get('email'),
role: formData.get('role'),
isActive: formData.get('isActive') === 'on',
avatar: `https://picsum.photos/100/100?random=${Date.now()}`,
lastLogin: new Date().toISOString()
};
this.users.push(newUser);
this.saveUsersToStorage();
this.filterUsers(document.getElementById('searchInput').value);
this.updateStats();
this.hideAddUserModal();
this.showNotification('用户添加成功', 'success');
}
editUser(userId) {
const user = this.users.find(u => u.id === userId);
if (user) {
// 填充表单数据
document.querySelector('input[name="username"]').value = user.username;
document.querySelector('input[name=""value = user.email;
document.querySelector('select[name="role"]').value = user.role;
document.querySelector('input[name="isActive"checked = user.isActive;
this.showAddUserModal();
}
}
deleteUser(userId) {
if (confirm('确定要删除这个用户吗?')) {
this.users = this.users.filter(u => u.id !== userId);
this.saveUsersToStorage();
this.filterUsers(document.getElementById('searchInput').value);
this.updateStats();
this.showNotification('用户删除成功', 'success');
}
}
filterUsers(searchTerm) {
if (!searchTerm) {
this.filteredUsers = [...this.users];
} else {
this.filteredUsers = this.users.filter(user =>
user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
user.role.toLowerCase().includes(searchTerm.toLowerCase())
);
}
this.renderUserList();
}
refreshData() {
// 模拟数据刷新
this.showNotification('数据刷新成功', 'info');
this.updateStats();
}
updateStats() {
document.getElementById('totalUsers').textContent = this.users.length;
document.getElementById('activeUsers').textContent = this.users.filter(u => u.isActive).length;
document.getElementById('onlineUsers').textContent = Math.floor(this.users.length*0.7);
}
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
this.applyTheme(this.currentTheme);
const icon = document.querySelector('#themeToggle i');
if (this.currentTheme === 'dark') {
icon.className = 'fas fa-sun text-yellow-500';
} else {
icon.className = 'fas fa-moon text-gray-600';
}
}
applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
toggleSettings() {
const panel = document.getElementById('settingsPanel');
if (panel.classList.contains('translate-x-full')) {
panel.classList.remove('translate-x-full');
} else {
panel.classList.add('translate-x-full');
}
}
hideSettings() {
document.getElementById('settingsPanel').classList.add('translate-x-full');
}
toggleDarkMode(enabled) {
if (enabled) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
showNotification(message, type = 'info') {
// 创建通知元素
const notification = document.createElement('div');
const bgColor = type === 'success' ? 'bg-green-500' :
type === 'error' ? 'bg-red-500' :
type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500';
notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg fade-in z-50`;
notification.textContent = message;
document.body.appendChild(notification);
// 3秒后自动移除
setTimeout(() => {
notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
loadUsersFromStorage() {
try {
const stored = localStorage.getItem('userManagementData');
return stored ? JSON.parse(stored) : null;
} catch (e) {
console.error('加载存储数据失败:', e);
return null;
}
}
saveUsersToStorage() {
try {
localStorage.setItem('userManagementData', JSON.stringify(this.users));
} catch (e) {
console.error('保存数据到存储失败:', e);
}
}
}
// 初始化应用
const userManager = new UserManager();
// 全局函数供HTML调用
window.userManager = userManager;