<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>👥 账号管理 - 文档管理系统</title>
|
<link href="/static/css/all.min.css" rel="stylesheet">
|
<style>
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
body {
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
background: #f0f2f5;
|
color: #1a1a2e;
|
min-height: 100vh;
|
}
|
.header {
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
color: white;
|
padding: 24px 32px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
gap: 12px;
|
}
|
.header h1 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
|
.header .badge {
|
font-size: 13px;
|
background: rgba(255,255,255,0.15);
|
padding: 4px 12px;
|
border-radius: 20px;
|
color: #a8b2d1;
|
}
|
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
|
|
.toolbar {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
flex-wrap: wrap;
|
gap: 12px;
|
}
|
.toolbar h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
|
|
.btn {
|
padding: 10px 20px;
|
border-radius: 8px;
|
font-size: 14px;
|
border: none;
|
cursor: pointer;
|
text-decoration: none;
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
transition: all 0.2s;
|
white-space: nowrap;
|
}
|
.btn-primary { background: #2563eb; color: white; }
|
.btn-primary:hover { background: #1d4ed8; }
|
.btn-success { background: #059669; color: white; }
|
.btn-success:hover { background: #047857; }
|
.btn-outline {
|
background: transparent;
|
border: 1px solid #d0d5dd;
|
color: #374151;
|
}
|
.btn-outline:hover { background: #f3f4f6; }
|
.btn-danger { background: #dc2626; color: white; }
|
.btn-danger:hover { background: #b91c1c; }
|
.btn-warning { background: #f59e0b; color: white; }
|
.btn-warning:hover { background: #d97706; }
|
|
.user-table {
|
background: white;
|
border-radius: 16px;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
overflow: hidden;
|
}
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
th, td {
|
padding: 16px 20px;
|
text-align: left;
|
border-bottom: 1px solid #eef0f4;
|
}
|
th {
|
background: #f9fafb;
|
font-weight: 600;
|
font-size: 13px;
|
color: #6b7280;
|
text-transform: uppercase;
|
letter-spacing: 0.5px;
|
}
|
td { font-size: 14px; }
|
tr:last-child td { border-bottom: none; }
|
tr:hover { background: #f9fafb; }
|
|
.role-badge {
|
display: inline-block;
|
padding: 4px 12px;
|
border-radius: 12px;
|
font-size: 12px;
|
font-weight: 500;
|
}
|
.role-super-admin { background: #fee2e2; color: #dc2626; }
|
.role-admin { background: #dbeafe; color: #2563eb; }
|
.role-viewer { background: #d1fae5; color: #059669; }
|
|
.action-btns {
|
display: flex;
|
gap: 8px;
|
}
|
|
/* 弹窗 */
|
.modal-overlay {
|
display: none; position: fixed; inset: 0;
|
background: rgba(0,0,0,0.5);
|
z-index: 1000;
|
align-items: center; justify-content: center;
|
}
|
.modal-overlay.active { display: flex; }
|
.modal {
|
background: white; border-radius: 16px;
|
padding: 32px; max-width: 480px; width: 90%;
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
}
|
.modal h3 { font-size: 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
|
.form-group { margin-bottom: 16px; }
|
.form-group label {
|
display: block;
|
font-size: 13px;
|
color: #6b7280;
|
margin-bottom: 6px;
|
}
|
.form-group input, .form-group select {
|
width: 100%;
|
padding: 10px 12px;
|
border: 1px solid #d0d5dd;
|
border-radius: 8px;
|
font-size: 14px;
|
outline: none;
|
transition: border 0.2s;
|
}
|
.form-group input:focus, .form-group select:focus {
|
border-color: #2563eb;
|
}
|
.modal-actions {
|
display: flex; gap: 8px; justify-content: flex-end;
|
margin-top: 24px;
|
}
|
|
.toast {
|
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
|
background: #1a1a2e; color: white;
|
padding: 12px 24px; border-radius: 10px;
|
font-size: 14px;
|
z-index: 2000;
|
opacity: 0; transition: opacity 0.3s;
|
pointer-events: none;
|
}
|
.toast.show { opacity: 1; }
|
.toast.error { background: #dc2626; }
|
|
.back-link {
|
color: white;
|
text-decoration: none;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
}
|
.back-link:hover { text-decoration: underline; }
|
|
.empty-state {
|
text-align: center; padding: 48px 24px; color: #9ca3af;
|
}
|
|
@media (max-width: 768px) {
|
.container { padding: 16px; }
|
th, td { padding: 12px; }
|
.action-btns { flex-direction: column; }
|
}
|
</style>
|
</head>
|
<body>
|
|
<div class="header">
|
<h1><i class="fa-regular fa-users"></i> 账号管理</h1>
|
<div style="display:flex;align-items:center;gap:12px;">
|
<a href="/" class="back-link"><i class="fa-solid fa-arrow-left"></i> 返回主页</a>
|
<span class="badge"><i class="fa-regular fa-user"></i> <%= user.username %></span>
|
</div>
|
</div>
|
|
<div class="container">
|
<div class="toolbar">
|
<h2><i class="fa-regular fa-user"></i> 用户列表</h2>
|
<button class="btn btn-success" onclick="showCreateModal()">
|
<i class="fa-solid fa-plus"></i> 新增用户
|
</button>
|
</div>
|
|
<div class="user-table">
|
<table>
|
<thead>
|
<tr>
|
<th>用户名</th>
|
<th>角色</th>
|
<th>创建时间</th>
|
<th>更新时间</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="userTableBody">
|
<tr>
|
<td colspan="5" class="empty-state">加载中...</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
|
<!-- 新增/编辑用户弹窗 -->
|
<div class="modal-overlay" id="userModal">
|
<div class="modal">
|
<h3 id="modalTitle"><i class="fa-solid fa-user-plus"></i> 新增用户</h3>
|
<form id="userForm">
|
<input type="hidden" id="userId">
|
<div class="form-group">
|
<label>用户名</label>
|
<input type="text" id="username" required minlength="3" maxlength="30" pattern="[a-zA-Z0-9_]+" placeholder="字母、数字、下划线，3-30个字符">
|
</div>
|
<div class="form-group">
|
<label>密码 <span id="passwordHint">（必填）</span></label>
|
<input type="password" id="password" minlength="6" placeholder="至少6个字符">
|
</div>
|
<div class="form-group">
|
<label>角色</label>
|
<select id="role" required>
|
<option value="admin">管理员（可上传、删除、下载）</option>
|
<option value="viewer">只读用户（仅可下载）</option>
|
</select>
|
</div>
|
<div class="modal-actions">
|
<button type="button" class="btn btn-outline" onclick="closeModal()">取消</button>
|
<button type="submit" class="btn btn-primary" id="submitBtn">保存</button>
|
</div>
|
</form>
|
</div>
|
</div>
|
|
<div class="toast" id="toast"></div>
|
|
<script>
|
let users = [];
|
let isEditing = false;
|
|
// 加载用户列表
|
async function loadUsers() {
|
try {
|
const res = await fetch('/api/users');
|
const data = await res.json();
|
|
if (!res.ok) {
|
showToast(data.error || '加载失败', true);
|
if (res.status === 403) {
|
setTimeout(() => window.location.href = '/', 1500);
|
}
|
return;
|
}
|
|
users = data.users;
|
renderUsers();
|
} catch (err) {
|
showToast('网络错误', true);
|
}
|
}
|
|
function renderUsers() {
|
const tbody = document.getElementById('userTableBody');
|
if (users.length === 0) {
|
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">暂无用户</td></tr>';
|
return;
|
}
|
|
tbody.innerHTML = users.map(u => {
|
const isSuperAdmin = u.username === 'gwalrusadmin';
|
const roleClass = isSuperAdmin ? 'super-admin' : u.role;
|
const roleText = isSuperAdmin ? '超级管理员' : (u.role === 'admin' ? '管理员' : '只读用户');
|
|
return `
|
<tr>
|
<td><strong>${u.username}</strong>${isSuperAdmin ? ' <span style="color:#dc2626;font-size:12px;">(不可编辑)</span>' : ''}</td>
|
<td><span class="role-badge role-${roleClass}">${roleText}</span></td>
|
<td>${formatDate(u.created_at)}</td>
|
<td>${formatDate(u.updated_at)}</td>
|
<td class="action-btns">
|
${!isSuperAdmin ? `
|
<button class="btn btn-warning" onclick="showEditModal(${u.id})">
|
<i class="fa-solid fa-pen"></i> 编辑
|
</button>
|
<button class="btn btn-danger" onclick="deleteUser(${u.id}, '${u.username}')">
|
<i class="fa-solid fa-trash"></i> 删除
|
</button>
|
` : '<span style="color:#9ca3af;font-size:13px;">-</span>'}
|
</td>
|
</tr>
|
`;
|
}).join('');
|
}
|
|
function formatDate(ts) {
|
const d = new Date(ts);
|
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
|
}
|
|
function showCreateModal() {
|
isEditing = false;
|
document.getElementById('modalTitle').innerHTML = '<i class="fa-solid fa-user-plus"></i> 新增用户';
|
document.getElementById('userId').value = '';
|
document.getElementById('username').value = '';
|
document.getElementById('username').disabled = false;
|
document.getElementById('password').value = '';
|
document.getElementById('password').required = true;
|
document.getElementById('passwordHint').textContent = '（必填）';
|
document.getElementById('role').value = 'admin';
|
document.getElementById('userModal').classList.add('active');
|
}
|
|
function showEditModal(userId) {
|
isEditing = true;
|
const user = users.find(u => u.id === userId);
|
if (!user) return;
|
|
document.getElementById('modalTitle').innerHTML = '<i class="fa-solid fa-user-pen"></i> 编辑用户';
|
document.getElementById('userId').value = userId;
|
document.getElementById('username').value = user.username;
|
document.getElementById('username').disabled = true;
|
document.getElementById('password').value = '';
|
document.getElementById('password').required = false;
|
document.getElementById('passwordHint').textContent = '（选填，留空则不修改）';
|
document.getElementById('role').value = user.role;
|
document.getElementById('userModal').classList.add('active');
|
}
|
|
function closeModal() {
|
document.getElementById('userModal').classList.remove('active');
|
}
|
|
// 表单提交
|
document.getElementById('userForm').addEventListener('submit', async (e) => {
|
e.preventDefault();
|
|
const userId = document.getElementById('userId').value;
|
const username = document.getElementById('username').value;
|
const password = document.getElementById('password').value;
|
const role = document.getElementById('role').value;
|
const submitBtn = document.getElementById('submitBtn');
|
|
if (!isEditing && !password) {
|
showToast('密码不能为空', true);
|
return;
|
}
|
|
submitBtn.disabled = true;
|
submitBtn.textContent = '保存中...';
|
|
try {
|
let res;
|
if (isEditing) {
|
res = await fetch(`/api/users/${userId}`, {
|
method: 'PUT',
|
headers: { 'Content-Type': 'application/json' },
|
body: JSON.stringify({ password: password || undefined, role })
|
});
|
} else {
|
res = await fetch('/api/users', {
|
method: 'POST',
|
headers: { 'Content-Type': 'application/json' },
|
body: JSON.stringify({ username, password, role })
|
});
|
}
|
|
const data = await res.json();
|
if (!res.ok) {
|
throw new Error(data.error || '操作失败');
|
}
|
|
showToast(data.message || '操作成功');
|
closeModal();
|
loadUsers();
|
} catch (err) {
|
showToast(err.message, true);
|
} finally {
|
submitBtn.disabled = false;
|
submitBtn.textContent = '保存';
|
}
|
});
|
|
async function deleteUser(userId, username) {
|
if (!confirm(`确定要删除用户 "${username}" 吗？此操作不可撤销。`)) return;
|
|
try {
|
const res = await fetch(`/api/users/${userId}`, { method: 'DELETE' });
|
const data = await res.json();
|
|
if (!res.ok) {
|
throw new Error(data.error || '删除失败');
|
}
|
|
showToast(data.message || '删除成功');
|
loadUsers();
|
} catch (err) {
|
showToast(err.message, true);
|
}
|
}
|
|
function showToast(msg, isError = false) {
|
const t = document.getElementById('toast');
|
t.textContent = msg;
|
t.className = 'toast' + (isError ? ' error' : '');
|
t.classList.add('show');
|
setTimeout(() => t.classList.remove('show'), 2500);
|
}
|
|
// 点击外部关闭弹窗
|
document.getElementById('userModal').addEventListener('click', (e) => {
|
if (e.target === document.getElementById('userModal')) closeModal();
|
});
|
|
// 初始化加载
|
loadUsers();
|
</script>
|
|
</body>
|
</html>
|
