206 lines
9.1 KiB
HTML
206 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>用户管理 - 订单管理后台</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
|
|
body {
|
|
background: linear-gradient(-45deg, #1e3c72, #2a5298, #1e3c72, #2a5298);
|
|
background-size: 400% 400%;
|
|
animation: gradientBG 15s ease infinite;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
color: #fff;
|
|
}
|
|
@keyframes gradientBG {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.card {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.card:hover { transform: translateY(-5px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2 class="text-2xl font-bold mb-6 text-white">用户管理</h2>
|
|
<button class="py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors mb-4" onclick="window.location.href='/orders/panel'">返回订单管理</button>
|
|
<button class="py-2 px-4 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors mb-4 ml-2" onclick="window.location.href='/users/panel'">刷新用户列表</button>
|
|
<div id="msg" class="my-2 text-red-300 text-center min-h-[1.2em]"></div>
|
|
<div class="card mb-6">
|
|
<h3 class="text-lg font-semibold mb-4 text-white">新增用户</h3>
|
|
<form id="createUserForm" class="flex flex-col md:flex-row gap-4 items-center">
|
|
<input type="text" name="username" required placeholder="用户名" class="px-4 py-2 rounded-lg bg-white/20 text-blue-900 placeholder:text-blue-900/70 focus:outline-none focus:ring-2 focus:ring-blue-400/50">
|
|
<input type="password" name="password" required placeholder="密码" class="px-4 py-2 rounded-lg bg-white/20 text-blue-900 placeholder:text-blue-900/70 focus:outline-none focus:ring-2 focus:ring-blue-400/50">
|
|
<select name="role" class="px-4 py-2 rounded-lg bg-white/20 text-blue-900">
|
|
<option value="user">普通用户</option>
|
|
<option value="admin">管理员</option>
|
|
</select>
|
|
<button type="submit" class="py-2 px-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">新增</button>
|
|
</form>
|
|
</div>
|
|
<div class="card">
|
|
<div class="overflow-x-auto">
|
|
<table id="usersTable" class="w-full text-sm text-left text-white/80">
|
|
<thead class="text-xs uppercase bg-white/10">
|
|
<tr><th class="px-6 py-3">ID</th><th class="px-6 py-3">用户名</th><th class="px-6 py-3">角色</th><th class="px-6 py-3 text-center">操作</th></tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const jwt = localStorage.getItem('jwt');
|
|
if (!jwt) location.href = '/login_page';
|
|
const msgBox = document.getElementById('msg');
|
|
async function fetchUsers() {
|
|
msgBox.innerText = '加载中...';
|
|
const res = await fetch('/users/', {
|
|
headers: {Authorization: 'Bearer ' + jwt}
|
|
});
|
|
if (res.status === 401 || res.status === 403) {
|
|
msgBox.innerText = '无权限访问';
|
|
setTimeout(()=>{window.location.href='/orders/panel';}, 1200);
|
|
return;
|
|
}
|
|
const users = await res.json();
|
|
const tbody = document.querySelector('#usersTable tbody');
|
|
tbody.innerHTML = '';
|
|
users.forEach(user => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td class="px-6 py-2">${user.id}</td>
|
|
<td class="px-6 py-2">${user.username}</td>
|
|
<td class="px-6 py-2">${user.role}</td>
|
|
<td class="px-6 py-2 text-center">
|
|
<button class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition-colors mr-2" onclick="editUser(${user.id})">编辑</button>
|
|
<button class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors" onclick="deleteUser(${user.id})">删除</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
msgBox.innerText = '';
|
|
}
|
|
fetchUsers();
|
|
|
|
function editUser(userId) {
|
|
// 获取当前用户信息
|
|
const user = Array.from(document.querySelectorAll('#usersTable tbody tr'))
|
|
.map(tr => ({
|
|
id: parseInt(tr.children[0].textContent),
|
|
username: tr.children[1].textContent,
|
|
role: tr.children[2].textContent
|
|
}))
|
|
.find(u => u.id === userId);
|
|
const editModal = document.createElement('div');
|
|
editModal.style.position = 'fixed';
|
|
editModal.style.top = '0';
|
|
editModal.style.left = '0';
|
|
editModal.style.width = '100%';
|
|
editModal.style.height = '100%';
|
|
editModal.style.backgroundColor = 'rgba(0,0,0,0.5)';
|
|
editModal.style.display = 'flex';
|
|
editModal.style.justifyContent = 'center';
|
|
editModal.style.alignItems = 'center';
|
|
editModal.style.zIndex = '1000';
|
|
editModal.innerHTML = `
|
|
<div class="bg-white/90 p-8 rounded-xl shadow-lg w-[320px]">
|
|
<h3 class="text-lg font-bold mb-4 text-blue-900">编辑用户</h3>
|
|
<div class="mb-4">
|
|
<label class="block text-blue-900 mb-1">用户名:
|
|
<input type="text" id="editUsername" value="${user ? user.username : ''}" class="w-full px-3 py-2 rounded bg-gray-100 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
|
|
</label>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-blue-900 mb-1">角色:
|
|
<select id="editRole" class="w-full px-3 py-2 rounded bg-gray-100 border border-gray-300">
|
|
<option value="admin" ${user && user.role === 'admin' ? 'selected' : ''}>管理员</option>
|
|
<option value="user" ${user && user.role === 'user' ? 'selected' : ''}>普通用户</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600" onclick="updateUser(${userId})">保存</button>
|
|
<button class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500" onclick="this.parentNode.parentNode.parentNode.remove()">取消</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(editModal);
|
|
}
|
|
|
|
async function updateUser(userId) {
|
|
const username = document.getElementById('editUsername').value;
|
|
const role = document.getElementById('editRole').value;
|
|
const jwt = localStorage.getItem('jwt');
|
|
const res = await fetch(`/users/${userId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + jwt
|
|
},
|
|
body: JSON.stringify({username, role})
|
|
});
|
|
if (res.ok) {
|
|
alert('用户信息更新成功');
|
|
document.querySelector('div[style*="position: fixed"]').remove();
|
|
fetchUsers();
|
|
} else {
|
|
alert('更新失败: ' + (await res.text()));
|
|
}
|
|
}
|
|
|
|
document.getElementById('createUserForm').onsubmit = async function(e) {
|
|
e.preventDefault();
|
|
const username = this.username.value;
|
|
const password = this.password.value;
|
|
const role = this.role.value;
|
|
const jwt = localStorage.getItem('jwt');
|
|
const res = await fetch('/users/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + jwt
|
|
},
|
|
body: JSON.stringify({ username, password, role })
|
|
});
|
|
if (res.ok) {
|
|
this.reset();
|
|
fetchUsers();
|
|
} else {
|
|
alert('新增失败: ' + (await res.text()));
|
|
}
|
|
}
|
|
|
|
async function deleteUser(userId) {
|
|
if (!confirm('确定要删除该用户吗？')) return;
|
|
const jwt = localStorage.getItem('jwt');
|
|
const res = await fetch(`/users/${userId}`, {
|
|
method: 'DELETE',
|
|
headers: { 'Authorization': 'Bearer ' + jwt }
|
|
});
|
|
if (res.ok) {
|
|
fetchUsers();
|
|
} else {
|
|
alert('删除失败: ' + (await res.text()));
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|