309 lines
12 KiB
HTML
309 lines
12 KiB
HTML
<!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="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
/* 全局样式 */
|
|
body {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* 导航栏样式 */
|
|
.navbar {
|
|
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
|
background: linear-gradient(to right, #1a237e, #283593);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* 内容区域样式 */
|
|
.container.mt-4 {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 15px rgba(0,0,0,.05);
|
|
padding: 25px;
|
|
}
|
|
|
|
/* 表格样式 */
|
|
.table {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.table thead th {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.btn-primary {
|
|
background: linear-gradient(to right, #1976d2, #2196f3);
|
|
border: none;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,.2);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(to right, #1565c0, #1976d2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 模态框样式 */
|
|
.modal-content {
|
|
border-radius: 12px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,.2);
|
|
}
|
|
|
|
.modal-header {
|
|
background: linear-gradient(to right, #f5f5f5, #fafafa);
|
|
border-radius: 12px 12px 0 0;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form-control, .form-select {
|
|
border-radius: 6px;
|
|
border: 1px solid #e0e0e0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
box-shadow: 0 0 0 3px rgba(33,150,243,.2);
|
|
border-color: #2196f3;
|
|
}
|
|
|
|
/* 操作按钮样式 */
|
|
.btn-sm {
|
|
margin: 0 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 状态标签样式 */
|
|
.badge {
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* 响应式优化 */
|
|
@media (max-width: 768px) {
|
|
.container.mt-4 {
|
|
padding: 15px;
|
|
}
|
|
|
|
.table-responsive {
|
|
margin: 0 -15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">诗词管理系统</a>
|
|
<div class="collapse navbar-collapse">
|
|
<!-- 在导航栏中添加管理员管理链接 -->
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#" data-page="users">用户管理</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-page="poems">诗词管理</a>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link" href="#" data-page="admins">管理员管理</a>
|
|
</li> -->
|
|
</ul>
|
|
|
|
<!-- 在 container 中添加管理员管理页面 -->
|
|
<div id="adminsPage" style="display: none;">
|
|
<h2>管理员管理
|
|
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#adminModal">
|
|
添加管理员
|
|
</button>
|
|
</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>用户名</th>
|
|
<th>状态</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="adminsList"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加管理员模态框 -->
|
|
<div class="modal fade" id="adminModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">管理员信息</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="adminForm">
|
|
<input type="hidden" id="adminId">
|
|
<div class="mb-3">
|
|
<label class="form-label">用户名</label>
|
|
<input type="text" class="form-control" id="adminUsername" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">密码</label>
|
|
<input type="password" class="form-control" id="adminPassword">
|
|
<small class="text-muted">编辑时留空表示不修改密码</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">状态</label>
|
|
<select class="form-select" id="adminStatus">
|
|
<option value="active">启用</option>
|
|
<option value="inactive">禁用</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="saveAdmin">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="navbar-text" id="adminInfo"></span>
|
|
<button class="btn btn-outline-light ms-2" id="logoutBtn">退出</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
<!-- 用户管理页面 -->
|
|
<div id="usersPage">
|
|
<h2>用户管理
|
|
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#userModal">
|
|
添加用户
|
|
</button>
|
|
</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>用户名</th>
|
|
<th>邮箱</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersList"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 诗词管理页面 -->
|
|
<div id="poemsPage" style="display: none;">
|
|
<h2>诗词管理
|
|
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#poemModal">
|
|
添加诗词
|
|
</button>
|
|
</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>标题</th>
|
|
<th>作者</th>
|
|
<th>点赞数</th>
|
|
<th>收藏数</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="poemsList"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户表单模态框 -->
|
|
<div class="modal fade" id="userModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">用户信息</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="userForm">
|
|
<input type="hidden" id="userId">
|
|
<div class="mb-3">
|
|
<label class="form-label">用户名</label>
|
|
<input type="text" class="form-control" id="username" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">邮箱</label>
|
|
<input type="email" class="form-control" id="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">密码</label>
|
|
<input type="password" class="form-control" id="password" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="saveUser">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 诗词表单模态框 -->
|
|
<div class="modal fade" id="poemModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">诗词信息</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="poemForm">
|
|
<input type="hidden" id="poemId">
|
|
<div class="mb-3">
|
|
<label class="form-label">标题</label>
|
|
<input type="text" class="form-control" id="title" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">作者</label>
|
|
<input type="text" class="form-control" id="author" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">内容</label>
|
|
<textarea class="form-control" id="content" rows="6" required></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">注释</label>
|
|
<textarea class="form-control" id="explain" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
|
<button type="button" class="btn btn-primary" id="savePoem">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/admin.js"></script>
|
|
</body>
|
|
</html> |