363 lines
16 KiB
HTML
Executable File
363 lines
16 KiB
HTML
Executable File
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
{% include 'admin_nav.html' %}
|
||
|
||
<div class="admin-container">
|
||
<div class="admin-content">
|
||
<div class="admin-card">
|
||
<div class="card-header">
|
||
<div class="header-left">
|
||
<i class="fas fa-user-plus"></i>
|
||
<h3>添加管理员</h3>
|
||
</div>
|
||
</div>
|
||
<form onsubmit="submitAddAdminForm(event, this)" class="admin-form">
|
||
<div class="form-group">
|
||
<label for="username">用户名</label>
|
||
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password">密码</label>
|
||
<div class="password-input-wrapper">
|
||
<input type="password" id="password" name="password" placeholder="请输入密码" required>
|
||
<button type="button" class="toggle-password" onclick="togglePassword('password')">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="confirm_password">确认密码</label>
|
||
<div class="password-input-wrapper">
|
||
<input type="password" id="confirm_password" name="confirm_password" placeholder="请再次输入密码" required>
|
||
<button type="button" class="toggle-password" onclick="togglePassword('confirm_password')">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">
|
||
<i class="fas fa-plus"></i> 添加管理员
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="admin-card full-width">
|
||
<div class="card-header">
|
||
<div class="header-left">
|
||
<i class="fas fa-users"></i>
|
||
<h3>管理员列表</h3>
|
||
</div>
|
||
<form class="search-form header-search" method="GET">
|
||
<div class="search-wrapper">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" name="search" placeholder="搜索管理员..." value="{{ request.args.get('search', '') }}">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>用户名</th>
|
||
<th>角色</th>
|
||
<th>创建时间</th>
|
||
<th>最后登录</th>
|
||
<th>登录次数</th>
|
||
<th>最后操作</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for admin in admins %}
|
||
<tr>
|
||
<td>{{ admin.username }}</td>
|
||
<td>{{ '超级管理员' if admin.is_superadmin else '管理员' }}</td>
|
||
<td>{{ admin.created_at }}</td>
|
||
<td>{{ (admin.last_login|default('从未登录', true))|datetime_format }}</td>
|
||
<td>{{ admin.login_count }}</td>
|
||
<td>{{ admin.last_action or '无' }}</td>
|
||
<td>
|
||
<div class="action-buttons">
|
||
{% if not admin.is_superadmin %}
|
||
<a href="#" class="btn-view" onclick="showLogs('{{ admin.id }}'); return false;">
|
||
<i class="fas fa-history"></i>
|
||
</a>
|
||
<a href="{{ url_for('reset_admin_password', admin_id=admin.id) }}"
|
||
class="btn-edit"
|
||
onclick="return confirm('确定要重置该管理员的密码吗？')">
|
||
<i class="fas fa-key"></i>
|
||
</a>
|
||
<a href="#" class="btn-delete" onclick="deleteAdmin('{{ admin.id }}'); return false;">
|
||
<i class="fas fa-trash"></i>
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<!-- 管理员日志详情 -->
|
||
<tr id="logs-{{ admin.id }}" style="display: none;">
|
||
<td colspan="8">
|
||
<div class="admin-logs">
|
||
<h4>最近操作记录</h4>
|
||
<table class="logs-table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>操作</th>
|
||
<th>IP地址</th>
|
||
<th>浏览器信息</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for log in admin_logs[admin.id] %}
|
||
<tr>
|
||
<td>{{ log.created_at|datetime_format }}</td>
|
||
<td>{{ log.action }}</td>
|
||
<td>{{ log.ip_address }}</td>
|
||
<td>
|
||
{% if 'Mobile' in log.user_agent %}
|
||
{% if 'Android' in log.user_agent %}
|
||
{% if 'MI' in log.user_agent or 'XiaoMi' in log.user_agent or 'Redmi' in log.user_agent %}
|
||
小米{{ log.user_agent.split('MI ')[1].split(' ')[0] if 'MI ' in log.user_agent else log.user_agent.split('Redmi ')[1].split(' ')[0] if 'Redmi ' in log.user_agent else '' }}
|
||
{% elif 'HUAWEI' in log.user_agent %}
|
||
华为{{ log.user_agent.split('HUAWEI ')[1].split(' ')[0] if 'HUAWEI ' in log.user_agent else '' }}
|
||
{% elif 'HONOR' in log.user_agent %}
|
||
荣耀{{ log.user_agent.split('HONOR ')[1].split(' ')[0] if 'HONOR ' in log.user_agent else '' }}
|
||
{% elif 'OPPO' in log.user_agent %}
|
||
OPPO{{ log.user_agent.split('OPPO ')[1].split(' ')[0] if 'OPPO ' in log.user_agent else '' }}
|
||
{% elif 'vivo' in log.user_agent %}
|
||
vivo{{ log.user_agent.split('vivo ')[1].split(' ')[0] if 'vivo ' in log.user_agent else '' }}
|
||
{% elif 'SAMSUNG' in log.user_agent %}
|
||
三星{{ log.user_agent.split('SAMSUNG ')[1].split(' ')[0] if 'SAMSUNG ' in log.user_agent else '' }}
|
||
{% elif 'Build/' in log.user_agent %}
|
||
{% set model = log.user_agent.split('Build/')[0].split(';')[-1].strip() %}
|
||
{{ model if model else 'HarmonyOS NEXT' }}
|
||
{% else %}
|
||
HarmonyOS NEXT
|
||
{% endif %}
|
||
{% elif 'iPhone' in log.user_agent %}
|
||
iPhone{{ log.user_agent.split('iPhone ')[1].split(' ')[0] if 'iPhone ' in log.user_agent else '' }}
|
||
{% elif 'iPad' in log.user_agent %}
|
||
iPad{{ log.user_agent.split('iPad ')[1].split(' ')[0] if 'iPad ' in log.user_agent else '' }}
|
||
{% else %}
|
||
HarmonyOS NEXT
|
||
{% endif %}
|
||
{% else %}
|
||
{% if 'Windows' in log.user_agent %}
|
||
Windows{% if 'Win64' in log.user_agent %} 64位{% endif %}
|
||
{% elif 'Macintosh' in log.user_agent %}
|
||
macOS
|
||
{% elif 'Linux' in log.user_agent %}
|
||
Linux{% if 'Ubuntu' in log.user_agent %} (Ubuntu){% elif 'Fedora' in log.user_agent %} (Fedora){% elif 'Debian' in log.user_agent %} (Debian){% endif %}
|
||
{% else %}
|
||
HarmonyOS NEXT
|
||
{% endif %}
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.password-input-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.password-input-wrapper input {
|
||
width: 100%;
|
||
padding: 8px 40px 8px 12px;
|
||
border: 1px solid #d2d2d7;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.toggle-password {
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: none;
|
||
border: none;
|
||
color: #666;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.toggle-password:hover {
|
||
color: #333;
|
||
}
|
||
|
||
.toggle-password:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.password-input-wrapper input:hover {
|
||
border-color: #b2b2b2;
|
||
}
|
||
|
||
.password-input-wrapper input:focus {
|
||
border-color: #0066cc;
|
||
outline: none;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 添加通知显示函数
|
||
function showNotification(message, type = 'success') {
|
||
const notification = document.createElement('div');
|
||
notification.className = `notification ${type}`;
|
||
notification.textContent = message;
|
||
|
||
notification.style.position = 'fixed';
|
||
notification.style.bottom = '20px';
|
||
notification.style.right = '20px';
|
||
notification.style.padding = '10px 20px';
|
||
notification.style.borderRadius = '4px';
|
||
notification.style.backgroundColor = type === 'success' ? '#4CAF50' : '#f44336';
|
||
notification.style.color = 'white';
|
||
notification.style.zIndex = '1000';
|
||
notification.style.animation = 'fadeInOut 3s forwards';
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
setTimeout(() => {
|
||
notification.remove();
|
||
}, 3000);
|
||
}
|
||
|
||
// 修改添加管理员函数
|
||
function submitAddAdminForm(event, form) {
|
||
event.preventDefault();
|
||
const formData = new FormData(form);
|
||
|
||
fetch('{{ url_for("add_admin") }}', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
showNotification(data.message, 'success');
|
||
form.reset();
|
||
// 刷新页面以显示新管理员
|
||
location.reload();
|
||
} else {
|
||
showNotification(data.error, 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showNotification('操作失败，请重试', 'error');
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
|
||
// 修改删除管理员函数
|
||
function deleteAdmin(adminId) {
|
||
if (!confirm('确定要删除这个管理员吗？')) return;
|
||
|
||
fetch(`/delete_admin/${adminId}`, {
|
||
method: 'POST'
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
showNotification(data.message, 'success');
|
||
// 使用更可靠的选择器
|
||
const adminRows = document.querySelectorAll('tr');
|
||
adminRows.forEach(row => {
|
||
// 检查行中是否包含带有特定 onclick 属性的删除按钮
|
||
const deleteButton = row.querySelector(`a[onclick*="deleteAdmin(${adminId})"]`);
|
||
if (deleteButton) {
|
||
row.remove();
|
||
// 同时删除对应的日志行
|
||
const logsRow = document.getElementById(`logs-${adminId}`);
|
||
if (logsRow) {
|
||
logsRow.remove();
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
showNotification(data.error, 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showNotification('删除失败，请重试', 'error');
|
||
console.error('Error:', error);
|
||
});
|
||
}
|
||
|
||
// 修改日志查看函数
|
||
function showLogs(adminId) {
|
||
const logsRow = document.getElementById(`logs-${adminId}`);
|
||
if (logsRow.style.display === 'none') {
|
||
logsRow.style.display = 'table-row';
|
||
|
||
// 平滑滚动到日志行
|
||
const rect = logsRow.getBoundingClientRect();
|
||
const absoluteTop = window.pageYOffset + rect.top - 100; // 减去100px的偏移量，让视图更好
|
||
window.scrollTo({
|
||
top: absoluteTop,
|
||
behavior: 'smooth'
|
||
});
|
||
} else {
|
||
logsRow.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 添加密码显示/隐藏功能
|
||
function togglePassword(inputId) {
|
||
const input = document.getElementById(inputId);
|
||
const button = input.nextElementSibling;
|
||
const icon = button.querySelector('i');
|
||
|
||
if (input.type === 'password') {
|
||
input.type = 'text';
|
||
icon.className = 'fas fa-eye-slash';
|
||
} else {
|
||
input.type = 'password';
|
||
icon.className = 'fas fa-eye';
|
||
}
|
||
}
|
||
|
||
// 添加日期格式化过滤器
|
||
function formatDateTime(dateStr) {
|
||
if (!dateStr || dateStr === '从未登录') return dateStr;
|
||
const date = new Date(dateStr);
|
||
return date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
|
||
}
|
||
|
||
// 添加动画样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes fadeInOut {
|
||
0% { opacity: 0; transform: translateY(20px); }
|
||
10% { opacity: 1; transform: translateY(0); }
|
||
90% { opacity: 1; transform: translateY(0); }
|
||
100% { opacity: 0; transform: translateY(-20px); }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
</script>
|
||
{% endblock %} |