Viajero/Achievement_Inputing
2
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

用户系统

Browse Source
This commit is contained in:
spdis
2025-10-04 11:51:08 +08:00
parent 657365f9de
commit 5575370621
11 changed files with 4043 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

356
templates/user_management.html Normal file
View File

@@ -0,0 +1,356 @@
{% 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')">&times;</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')">&times;</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')">&times;</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 %}