356 lines
9.3 KiB
HTML
356 lines
9.3 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}用户管理{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div class="header-section">
|
||
<h1>用户管理</h1>
|
||
<a href="{{ url_for('register') }}" class="btn btn-primary">
|
||
<i class="fas fa-user-plus"></i> 注册新用户
|
||
</a>
|
||
</div>
|
||
|
||
<div class="users-table">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>用户ID</th>
|
||
<th>用户名</th>
|
||
<th>权限级别</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for user in users %}
|
||
<tr>
|
||
<td>{{ user.user_id }}</td>
|
||
<td>{{ user.username }}</td>
|
||
<td>
|
||
<span class="permission-badge {% if user.premission == 0 %}admin{% else %}user{% endif %}">
|
||
{% if user.premission == 0 %}管理员{% else %}普通用户{% endif %}
|
||
</span>
|
||
</td>
|
||
<td class="actions">
|
||
{% if user.username != 'admin' %}
|
||
<!-- 修改密码按钮 -->
|
||
<button class="btn btn-sm btn-warning" onclick="showPasswordModal('{{ user.username }}')">
|
||
<i class="fas fa-key"></i> 修改密码
|
||
</button>
|
||
|
||
<!-- 修改权限按钮 -->
|
||
<button class="btn btn-sm btn-info" onclick="showPermissionModal('{{ user.username }}', {{ user.premission }})">
|
||
<i class="fas fa-user-cog"></i> 修改权限
|
||
</button>
|
||
|
||
<!-- 删除用户按钮 -->
|
||
<button class="btn btn-sm btn-danger" onclick="confirmDelete('{{ user.username }}')">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
{% else %}
|
||
<span class="text-muted">系统管理员</span>
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改密码模态框 -->
|
||
<div id="passwordModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('passwordModal')">×</span>
|
||
<h2>修改用户密码</h2>
|
||
<form id="passwordForm" method="POST">
|
||
<div class="form-group">
|
||
<label for="new_password">新密码:</label>
|
||
<input type="password" id="new_password" name="new_password" required minlength="6">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="confirm_password">确认密码:</label>
|
||
<input type="password" id="confirm_password" name="confirm_password" required minlength="6">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">确认修改</button>
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal('passwordModal')">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改权限模态框 -->
|
||
<div id="permissionModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('permissionModal')">×</span>
|
||
<h2>修改用户权限</h2>
|
||
<form id="permissionForm" method="POST">
|
||
<div class="form-group">
|
||
<label for="permission">权限级别:</label>
|
||
<select id="permission" name="permission" required>
|
||
<option value="0">管理员</option>
|
||
<option value="1">普通用户</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">确认修改</button>
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal('permissionModal')">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 删除确认模态框 -->
|
||
<div id="deleteModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('deleteModal')">×</span>
|
||
<h2>确认删除</h2>
|
||
<p>确定要删除用户 <strong id="deleteUsername"></strong> 吗？此操作不可撤销。</p>
|
||
<div class="form-actions">
|
||
<form id="deleteForm" method="POST">
|
||
<button type="submit" class="btn btn-danger">确认删除</button>
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal('deleteModal')">取消</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.header-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 2px solid #e0e0e0;
|
||
}
|
||
|
||
.header-section h1 {
|
||
color: #333;
|
||
margin: 0;
|
||
}
|
||
|
||
.users-table {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.table th {
|
||
background-color: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.permission-badge {
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.permission-badge.admin {
|
||
background-color: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.permission-badge.user {
|
||
background-color: #28a745;
|
||
color: white;
|
||
}
|
||
|
||
.actions {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.btn-warning {
|
||
background-color: #ffc107;
|
||
color: #212529;
|
||
}
|
||
|
||
.btn-info {
|
||
background-color: #17a2b8;
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger {
|
||
background-color: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background-color: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.btn:hover {
|
||
opacity: 0.8;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 模态框样式 */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0,0,0,0.5);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: white;
|
||
margin: 10% auto;
|
||
padding: 30px;
|
||
border-radius: 8px;
|
||
width: 90%;
|
||
max-width: 500px;
|
||
position: relative;
|
||
}
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 15px;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
color: #aaa;
|
||
}
|
||
|
||
.close:hover {
|
||
color: #000;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: flex-end;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.text-muted {
|
||
color: #6c757d;
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
function showPasswordModal(username) {
|
||
document.getElementById('passwordForm').action = `/change_password/${username}`;
|
||
document.getElementById('passwordModal').style.display = 'block';
|
||
}
|
||
|
||
function showPermissionModal(username, currentPermission) {
|
||
document.getElementById('permissionForm').action = `/change_permission/${username}`;
|
||
document.getElementById('permission').value = currentPermission;
|
||
document.getElementById('permissionModal').style.display = 'block';
|
||
}
|
||
|
||
function confirmDelete(username) {
|
||
document.getElementById('deleteUsername').textContent = username;
|
||
document.getElementById('deleteForm').action = `/delete_user/${username}`;
|
||
document.getElementById('deleteModal').style.display = 'block';
|
||
}
|
||
|
||
function closeModal(modalId) {
|
||
document.getElementById(modalId).style.display = 'none';
|
||
// 清空表单
|
||
const forms = document.querySelectorAll(`#${modalId} form`);
|
||
forms.forEach(form => form.reset());
|
||
}
|
||
|
||
// 点击模态框外部关闭
|
||
window.onclick = function(event) {
|
||
const modals = document.querySelectorAll('.modal');
|
||
modals.forEach(modal => {
|
||
if (event.target === modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 密码确认验证
|
||
document.getElementById('passwordForm').addEventListener('submit', function(e) {
|
||
const password = document.getElementById('new_password').value;
|
||
const confirmPassword = document.getElementById('confirm_password').value;
|
||
|
||
if (password !== confirmPassword) {
|
||
e.preventDefault();
|
||
alert('两次输入的密码不一致！');
|
||
return false;
|
||
}
|
||
|
||
if (password.length < 6) {
|
||
e.preventDefault();
|
||
alert('密码长度至少6位！');
|
||
return false;
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %} |