2eefaa8cc9
新增功能： - 用户管理列表页面（搜索、分页） - 用户详情页面（基本信息、收藏统计） - 管理员重置用户密码功能 - 管理员修改用户昵称功能 - 管理后台首页添加用户统计卡片 优化改进： - 统一后台菜单结构，创建可复用的 sidebar 组件 - 所有后台页面使用统一菜单，避免硬编码 - 优化权限配置文件，清理冗余规则 技术文档： - 添加任务分解规则文档 - 添加后台菜单统一规则文档 - 添加数据库字段修复脚本 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
384 lines
11 KiB
HTML
384 lines
11 KiB
HTML
{% extends 'admin/master.html' %}
|
|
|
|
{% block body %}
|
|
<div class="users-container">
|
|
<!-- 页面标题和搜索 -->
|
|
<div class="page-header">
|
|
<div>
|
|
<h4 class="mb-1">用户管理</h4>
|
|
<p class="text-muted mb-0">管理平台注册用户</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<form method="GET" action="{{ url_for('admin_users') }}" class="search-form">
|
|
<div class="input-group">
|
|
<input type="text" name="search" class="form-control" placeholder="搜索用户名或邮箱" value="{{ search }}">
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="material-symbols-outlined">search</span>
|
|
</button>
|
|
{% if search %}
|
|
<a href="{{ url_for('admin_users') }}" class="btn btn-secondary">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户列表 -->
|
|
<div class="card">
|
|
<div class="card-body p-0">
|
|
{% if users %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>用户名</th>
|
|
<th>邮箱</th>
|
|
<th>收藏统计</th>
|
|
<th>注册时间</th>
|
|
<th>最后登录</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for user in users %}
|
|
<tr>
|
|
<td>{{ user.id }}</td>
|
|
<td>
|
|
<div class="user-info">
|
|
<strong>{{ user.username }}</strong>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if user.email %}
|
|
<div class="email-info">
|
|
{{ user.email }}
|
|
{% if user.email_verified %}
|
|
<span class="badge badge-success-sm" title="邮箱已验证">
|
|
<span class="material-symbols-outlined" style="font-size: 14px;">verified</span>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<span class="text-muted">未设置</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="stats-info">
|
|
<span class="stat-item">
|
|
<span class="material-symbols-outlined">bookmark</span>
|
|
{{ user_stats[user.id].collections_count }}
|
|
</span>
|
|
<span class="stat-item">
|
|
<span class="material-symbols-outlined">folder</span>
|
|
{{ user_stats[user.id].folders_count }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td>{{ user.created_at.strftime('%Y-%m-%d %H:%M') if user.created_at else '-' }}</td>
|
|
<td>{{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else '从未登录' }}</td>
|
|
<td>
|
|
{% if user.is_active %}
|
|
<span class="badge badge-success">正常</span>
|
|
{% else %}
|
|
<span class="badge badge-secondary">已禁用</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a href="{{ url_for('admin_user_detail', user_id=user.id) }}" class="btn btn-sm btn-primary">
|
|
查看详情
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
{% if pagination.pages > 1 %}
|
|
<div class="pagination-container">
|
|
<nav>
|
|
<ul class="pagination mb-0">
|
|
{% if pagination.has_prev %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('admin_users', page=pagination.prev_num, search=search) }}">上一页</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">上一页</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
|
|
{% if page_num %}
|
|
{% if page_num == pagination.page %}
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ page_num }}</span>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('admin_users', page=page_num, search=search) }}">{{ page_num }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">...</span>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if pagination.has_next %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="{{ url_for('admin_users', page=pagination.next_num, search=search) }}">下一页</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled">
|
|
<span class="page-link">下一页</span>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
<div class="pagination-info">
|
|
共 {{ pagination.total }} 个用户，第 {{ pagination.page }} / {{ pagination.pages }} 页
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<span class="material-symbols-outlined">person_off</span>
|
|
<p>{% if search %}未找到匹配的用户{% else %}暂无注册用户{% endif %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.users-container {
|
|
max-width: 1400px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.page-header h4 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #000000;
|
|
margin: 0;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-form {
|
|
min-width: 350px;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.input-group .form-control {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid #DCDFE6;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.input-group .btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #0052D9;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #0041A8;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #F5F5F5;
|
|
color: #606266;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #E5E5E5;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #DCDFE6;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
}
|
|
|
|
.table thead th {
|
|
background: #F5F7FA;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #DCDFE6;
|
|
}
|
|
|
|
.table tbody td {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
font-size: 14px;
|
|
color: #303133;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: #F5F7FA;
|
|
}
|
|
|
|
.user-info strong {
|
|
color: #000000;
|
|
}
|
|
|
|
.email-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.stats-info {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #606266;
|
|
}
|
|
|
|
.stat-item .material-symbols-outlined {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.badge {
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge-success {
|
|
background: rgba(0, 168, 112, 0.1);
|
|
color: #00A870;
|
|
}
|
|
|
|
.badge-success-sm {
|
|
background: rgba(0, 168, 112, 0.1);
|
|
color: #00A870;
|
|
padding: 2px 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge-secondary {
|
|
background: #F5F5F5;
|
|
color: #606266;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-top: 1px solid #F0F0F0;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
gap: 4px;
|
|
}
|
|
|
|
.page-item .page-link {
|
|
padding: 6px 12px;
|
|
border: 1px solid #DCDFE6;
|
|
border-radius: 4px;
|
|
color: #606266;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.page-item.active .page-link {
|
|
background: #0052D9;
|
|
color: white;
|
|
border-color: #0052D9;
|
|
}
|
|
|
|
.page-item.disabled .page-link {
|
|
color: #C0C4CC;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.page-item:not(.disabled):not(.active) .page-link:hover {
|
|
background: #F5F7FA;
|
|
}
|
|
|
|
.pagination-info {
|
|
color: #606266;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #909399;
|
|
}
|
|
|
|
.empty-state .material-symbols-outlined {
|
|
font-size: 64px;
|
|
color: #DCDFE6;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.empty-state p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|