generated from dellevin/template
726 lines
34 KiB
HTML
726 lines
34 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>
|
||
<style>
|
||
:root {
|
||
--el-color-primary: #409eff;
|
||
--el-color-success: #67c23a;
|
||
--el-color-danger: #f56c6c;
|
||
--el-color-info: #909399;
|
||
--el-text-primary: #303133;
|
||
--el-text-regular: #606266;
|
||
--el-text-secondary: #909399;
|
||
--el-border-color: #dcdfe6;
|
||
--el-border-light: #e4e7ed;
|
||
--el-fill-color: #f5f7fa;
|
||
--el-header-height: 60px;
|
||
--el-aside-width: 200px;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background-color: #f0f2f5; color: var(--el-text-regular); }
|
||
|
||
/* ========== 顶部 Header ========== */
|
||
.header {
|
||
position: fixed; top: 0; left: 0; right: 0; height: var(--el-header-height);
|
||
background: #fff; border-bottom: 1px solid var(--el-border-light);
|
||
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
|
||
z-index: 1000; box-shadow: 0 1px 4px rgba(0,0,0,.08);
|
||
}
|
||
.header-brand { font-size: 18px; font-weight: 600; color: var(--el-text-primary); letter-spacing: 1px; }
|
||
.header-right { display: flex; align-items: center; gap: 20px; font-size: 14px; }
|
||
.header-right a { color: var(--el-text-secondary); text-decoration: none; transition: color .3s; }
|
||
.header-right a:hover { color: var(--el-color-primary); }
|
||
|
||
/* ========== 左侧 Aside ========== */
|
||
.aside {
|
||
position: fixed; top: var(--el-header-height); left: 0; bottom: 0;
|
||
width: var(--el-aside-width); background: #304156;
|
||
z-index: 1000; overflow-y: auto;
|
||
}
|
||
.menu-item {
|
||
display: block; padding: 0 20px; height: 56px; line-height: 56px;
|
||
color: #bfcbd9; font-size: 14px; cursor: pointer; transition: all .3s;
|
||
text-decoration: none; border-left: 3px solid transparent;
|
||
}
|
||
.menu-item:hover, .menu-item.active {
|
||
background: #263445; color: var(--el-color-primary); border-left-color: var(--el-color-primary);
|
||
}
|
||
.menu-icon { display: inline-block; width: 20px; margin-right: 10px; text-align: center; }
|
||
|
||
/* 左侧状态筛选 */
|
||
.aside-status-group {
|
||
padding: 10px 0;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
margin-top: 10px;
|
||
}
|
||
.aside-menu-item {
|
||
display: block; padding: 0 20px; height: 48px; line-height: 48px;
|
||
color: #bfcbd9; font-size: 14px; cursor: pointer; transition: all .3s;
|
||
text-decoration: none; border-left: 3px solid transparent;
|
||
}
|
||
.aside-menu-item:hover, .aside-menu-item.active {
|
||
background: #263445; color: var(--el-color-primary); border-left-color: var(--el-color-primary);
|
||
}
|
||
|
||
/* ========== 右侧 Main ========== */
|
||
.main {
|
||
margin-left: var(--el-aside-width); margin-top: var(--el-header-height);
|
||
padding: 20px; min-height: calc(100vh - var(--el-header-height));
|
||
}
|
||
.main-card {
|
||
background: #fff; border-radius: 4px; padding: 20px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,.08);
|
||
}
|
||
.page-title { font-size: 20px; font-weight: 500; color: var(--el-text-primary); margin-bottom: 20px; }
|
||
|
||
/* 筛选区 */
|
||
.filters { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; padding: 15px; background: var(--el-fill-color); border-radius: 4px; }
|
||
input[type="text"] {
|
||
appearance: none; background-color: #fff; border-radius: 4px; border: 1px solid var(--el-border-color);
|
||
color: var(--el-text-regular); height: 36px; line-height: 36px; outline: none; padding: 0 15px;
|
||
transition: border-color .2s; width: 220px;
|
||
}
|
||
input[type="text"]:focus { border-color: var(--el-color-primary); }
|
||
|
||
/* 状态单选按钮组 */
|
||
.status-group { display: inline-flex; border: 1px solid var(--el-border-color); border-radius: 4px; overflow: hidden; background: #fff; }
|
||
.radio-label {
|
||
cursor: pointer; padding: 0 16px; height: 34px; line-height: 34px; font-size: 14px;
|
||
transition: all .3s; user-select: none; background: #fff; color: var(--el-text-regular); border-right: 1px solid var(--el-border-color);
|
||
}
|
||
.radio-label:last-child { border-right: none; }
|
||
.radio-label:hover { color: var(--el-color-primary); }
|
||
.radio-label.active { background-color: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
|
||
input[type="radio"] { display: none; }
|
||
|
||
button.el-button {
|
||
display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff;
|
||
border: 1px solid var(--el-border-color); color: var(--el-text-regular); text-align: center;
|
||
outline: none; transition: .1s; font-weight: 500; padding: 9px 20px; font-size: 14px; border-radius: 4px;
|
||
}
|
||
button.el-button:hover { color: var(--el-color-primary); border-color: #c6e2ff; background-color: #ecf5ff; }
|
||
button.el-button--primary { color: #fff; background-color: var(--el-color-primary); border-color: var(--el-color-primary); }
|
||
button.el-button--primary:hover { background: #66b1ff; border-color: #66b1ff; }
|
||
|
||
/* 表格 */
|
||
table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||
th { background-color: var(--el-fill-color); color: var(--el-text-secondary); font-weight: 500; text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--el-border-light); }
|
||
td { padding: 12px 10px; border-bottom: 1px solid var(--el-border-light); color: var(--el-text-regular); }
|
||
tr:hover td { background-color: var(--el-fill-color); }
|
||
|
||
.status-badge { padding: 0 10px; height: 22px; line-height: 22px; border-radius: 4px; font-size: 12px; display: inline-block; }
|
||
.status-approved { background-color: #f0f9eb; color: var(--el-color-success); border: 1px solid #e1f3d8; }
|
||
.status-spam { background-color: #fef0f0; color: var(--el-color-danger); border: 1px solid #fde2e2; }
|
||
.status-deleted { background-color: #f4f4f5; color: var(--el-color-info); border: 1px solid #e9e9eb; }
|
||
|
||
.actions button {
|
||
margin-right: 8px; padding: 0; background: none; border: none; cursor: pointer;
|
||
color: var(--el-color-primary); font-size: 14px; transition: .3s;
|
||
}
|
||
.actions button:hover { color: #66b1ff; }
|
||
.actions button.text-danger { color: var(--el-color-danger); }
|
||
.actions button.text-danger:hover { color: #f78989; }
|
||
|
||
/* 弹窗 */
|
||
.modal-overlay {
|
||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center;
|
||
z-index: 2000; backdrop-filter: blur(2px);
|
||
}
|
||
.modal-box {
|
||
background: white; border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
width: 420px; animation: dialog-fade-in .3s;
|
||
}
|
||
@keyframes dialog-fade-in {
|
||
from { transform: translateY(-20px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
.modal-header {
|
||
padding: 20px; font-size: 16px; color: var(--el-text-primary);
|
||
font-weight: 500; border-bottom: 1px solid var(--el-border-light);
|
||
}
|
||
.modal-body { padding: 20px; color: var(--el-text-regular); font-size: 14px; line-height: 1.6; }
|
||
.modal-footer {
|
||
padding: 15px 20px; text-align: right;
|
||
border-top: 1px solid var(--el-border-light);
|
||
}
|
||
.modal-btn {
|
||
border-radius: 4px; border: 1px solid var(--el-border-color); background: #fff;
|
||
color: var(--el-text-regular); min-width: 80px; height: 36px; line-height: 34px;
|
||
padding: 0 20px; cursor: pointer; font-size: 14px; transition: all .3s;
|
||
}
|
||
.modal-btn:hover { color: var(--el-color-primary); border-color: #c6e2ff; background-color: #ecf5ff; }
|
||
.modal-btn.primary { color: #fff; background-color: var(--el-color-primary); border-color: var(--el-color-primary); }
|
||
.modal-btn.primary:hover { background: #66b1ff; border-color: #66b1ff; }
|
||
|
||
/* 详情弹窗样式优化 */
|
||
.detail-modal-content { width: 700px; max-width: 90%; }
|
||
.detail-grid {
|
||
display: grid; grid-template-columns: 100px 1fr;
|
||
gap: 12px 20px; align-items: start;
|
||
}
|
||
.detail-label {
|
||
color: var(--el-text-secondary); font-size: 14px;
|
||
text-align: right; padding-top: 2px;
|
||
}
|
||
.detail-value {
|
||
word-break: break-all; line-height: 1.8;
|
||
color: var(--el-text-primary); font-size: 14px;
|
||
}
|
||
.comment-html {
|
||
background: linear-gradient(to bottom, #fafafa, #f5f7fa);
|
||
padding: 20px; border-radius: 6px;
|
||
border: 1px solid var(--el-border-light);
|
||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
|
||
}
|
||
.detail-divider {
|
||
grid-column: 1 / -1; height: 1px;
|
||
background: var(--el-border-light); margin: 8px 0;
|
||
}
|
||
|
||
/* 分页 - Element Pagination 风格 */
|
||
.pagination {
|
||
display: flex; justify-content: flex-end; align-items: center; gap: 8px;
|
||
margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--el-border-light);
|
||
flex-wrap: wrap;
|
||
}
|
||
.page-info { color: var(--el-text-secondary); font-size: 14px; margin-right: 10px; }
|
||
.page-btn {
|
||
min-width: 32px; height: 32px; line-height: 30px; padding: 0 6px;
|
||
border: 1px solid var(--el-border-color); background: #fff; border-radius: 4px;
|
||
cursor: pointer; font-size: 14px; color: var(--el-text-regular); transition: all .3s;
|
||
}
|
||
.page-btn:hover:not(.disabled):not(.active) { color: var(--el-color-primary); border-color: var(--el-color-primary); }
|
||
.page-btn.active { background-color: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
|
||
.page-btn.disabled { cursor: not-allowed; color: var(--el-text-secondary); background: #f5f7fa; }
|
||
|
||
/* 暂无数据样式 */
|
||
.empty-state {
|
||
text-align: center !important;
|
||
padding: 40px 0 !important;
|
||
color: var(--el-text-secondary) !important;
|
||
font-size: 14px !important;
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
/* ========== 移动端适配 ========== */
|
||
@media screen and (max-width: 768px) {
|
||
:root {
|
||
--el-aside-width: 0px;
|
||
}
|
||
|
||
/* 顶部 Header */
|
||
.header { padding: 0 15px; }
|
||
.header-brand { font-size: 16px; }
|
||
.header-right span { display: none; }
|
||
|
||
/* 左侧侧边栏 - 隐藏 */
|
||
.aside { display: none; }
|
||
|
||
/* 右侧 Main */
|
||
.main { margin-left: 0; padding: 10px; }
|
||
.main-card { padding: 15px; }
|
||
.page-title { font-size: 18px; margin-bottom: 15px; }
|
||
|
||
/* 移动端底部状态筛选 */
|
||
.mobile-status-bar {
|
||
display: flex !important;
|
||
gap: 8px; margin-bottom: 15px; overflow-x: auto;
|
||
padding-bottom: 5px;
|
||
}
|
||
.mobile-status-item {
|
||
flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
|
||
border: 1px solid var(--el-border-color); background: #fff;
|
||
color: var(--el-text-regular); font-size: 13px; cursor: pointer;
|
||
transition: all .3s;
|
||
}
|
||
.mobile-status-item.active {
|
||
background: var(--el-color-primary); color: #fff; border-color: var(--el-color-primary);
|
||
}
|
||
|
||
/* 筛选区 */
|
||
.filters {
|
||
flex-direction: column; align-items: stretch; gap: 10px;
|
||
padding: 12px;
|
||
}
|
||
input[type="text"] { width: 100%; }
|
||
button.el-button { width: 100%; }
|
||
|
||
/* 表格横向滚动 */
|
||
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||
table { min-width: 600px; }
|
||
th, td { padding: 10px 8px; font-size: 13px; }
|
||
th:first-child, td:first-child { padding-left: 8px; }
|
||
th:last-child, td:last-child { padding-right: 8px; }
|
||
|
||
/* 操作按钮调整 */
|
||
.actions button { font-size: 13px; margin-right: 6px; }
|
||
|
||
/* 分页 */
|
||
.pagination { justify-content: center; }
|
||
.page-info { width: 100%; text-align: center; margin-bottom: 8px; }
|
||
|
||
/* 弹窗 */
|
||
.modal-box { width: 90% !important; max-width: 400px; }
|
||
.detail-modal-content { width: 92% !important; }
|
||
.detail-grid { grid-template-columns: 70px 1fr; gap: 8px 12px; }
|
||
.detail-label { font-size: 13px; }
|
||
.detail-value { font-size: 13px; }
|
||
}
|
||
|
||
/* 小于 480px 的屏幕 */
|
||
@media screen and (max-width: 480px) {
|
||
.main { padding: 8px; }
|
||
.main-card { padding: 12px; border-radius: 8px; }
|
||
.page-title { font-size: 16px; }
|
||
|
||
th, td { padding: 8px 6px; font-size: 12px; }
|
||
.status-badge { padding: 0 6px; height: 20px; line-height: 20px; font-size: 11px; }
|
||
.actions button { font-size: 12px; }
|
||
|
||
.modal-header { padding: 15px; font-size: 15px; }
|
||
.modal-body { padding: 15px; }
|
||
.modal-footer { padding: 12px 15px; }
|
||
.modal-btn { min-width: 70px; height: 34px; line-height: 32px; padding: 0 15px; font-size: 13px; }
|
||
|
||
.detail-grid { grid-template-columns: 60px 1fr; gap: 6px 10px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部 Header -->
|
||
<header class="header">
|
||
<div class="header-brand">评论后台管理系统</div>
|
||
<div class="header-right">
|
||
<span>欢迎，admin</span>
|
||
<a href="/logout">退出登录</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 左侧 Aside -->
|
||
<aside class="aside">
|
||
|
||
<div class="aside-status-group">
|
||
<div class="aside-menu-item active" onclick="selectStatus(this, '')">全部</div>
|
||
<div class="aside-menu-item" onclick="selectStatus(this, 'approved')">通过</div>
|
||
<div class="aside-menu-item" onclick="selectStatus(this, 'spam')">垃圾</div>
|
||
<div class="aside-menu-item" onclick="selectStatus(this, 'deleted')">删除</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧 Main -->
|
||
<main class="main">
|
||
<div class="main-card">
|
||
<div class="page-title">评论列表</div>
|
||
|
||
<!-- 确认弹窗 -->
|
||
<div id="confirmModal" class="modal-overlay">
|
||
<div class="modal-box">
|
||
<div class="modal-header">提示</div>
|
||
<div class="modal-body" id="modalTitle"></div>
|
||
<div class="modal-footer">
|
||
<button class="modal-btn" onclick="closeModal(false)">取消</button>
|
||
<button class="modal-btn primary" onclick="closeModal(true)">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<div id="detailModal" class="modal-overlay" onclick="if(event.target === this) closeDetailModal()">
|
||
<div class="modal-box detail-modal-content">
|
||
<div class="modal-header">评论详情</div>
|
||
<div class="modal-body" id="detailContent"></div>
|
||
<div class="modal-footer">
|
||
<button class="modal-btn primary" onclick="closeDetailModal()">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增留言弹窗 -->
|
||
<div id="addCommentModal" class="modal-overlay" onclick="if(event.target === this) closeAddCommentModal()">
|
||
<div class="modal-box" style="width: 500px;">
|
||
<div class="modal-header">新增留言</div>
|
||
<div class="modal-body">
|
||
<div style="margin-bottom: 15px;">
|
||
<label style="display: block; margin-bottom: 5px; color: var(--el-text-secondary); font-size: 14px;">昵称：</label>
|
||
<input type="text" id="addNick" placeholder="请输入昵称" style="width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--el-border-color); border-radius: 4px; outline: none; box-sizing: border-box;">
|
||
</div>
|
||
<div style="margin-bottom: 15px;">
|
||
<label style="display: block; margin-bottom: 5px; color: var(--el-text-secondary); font-size: 14px;">邮箱：</label>
|
||
<input type="email" id="addMail" placeholder="请输入邮箱（选填）" style="width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--el-border-color); border-radius: 4px; outline: none; box-sizing: border-box;">
|
||
</div>
|
||
<div style="margin-bottom: 15px;">
|
||
<label style="display: block; margin-bottom: 5px; color: var(--el-text-secondary); font-size: 14px;">网站：</label>
|
||
<input type="url" id="addLink" placeholder="请输入网站链接（选填）" style="width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--el-border-color); border-radius: 4px; outline: none; box-sizing: border-box;">
|
||
</div>
|
||
<div style="margin-bottom: 15px;">
|
||
<label style="display: block; margin-bottom: 5px; color: var(--el-text-secondary); font-size: 14px;">评论内容：</label>
|
||
<textarea id="addComment" placeholder="请输入评论内容" rows="5" style="width: 100%; padding: 10px 12px; border: 1px solid var(--el-border-color); border-radius: 4px; outline: none; resize: vertical; font-family: inherit; font-size: 14px; box-sizing: border-box;"></textarea>
|
||
</div>
|
||
<div style="margin-bottom: 15px;">
|
||
<label style="display: block; margin-bottom: 5px; color: var(--el-text-secondary); font-size: 14px;">状态：</label>
|
||
<select id="addStatus" style="width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--el-border-color); border-radius: 4px; outline: none; background: #fff; box-sizing: border-box;">
|
||
<option value="approved">通过</option>
|
||
<option value="spam">垃圾</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="modal-btn" onclick="closeAddCommentModal()">取消</button>
|
||
<button class="modal-btn primary" onclick="submitNewComment()">提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<!-- 移动端状态筛选（仅在手机显示） -->
|
||
<div class="mobile-status-bar" style="display: none;">
|
||
<div class="mobile-status-item active" onclick="selectStatusMobile(this, '')">全部</div>
|
||
<div class="mobile-status-item" onclick="selectStatusMobile(this, 'approved')">通过</div>
|
||
<div class="mobile-status-item" onclick="selectStatusMobile(this, 'spam')">垃圾</div>
|
||
<div class="mobile-status-item" onclick="selectStatusMobile(this, 'deleted')">删除</div>
|
||
</div>
|
||
<input type="text" id="searchKeyword" placeholder="搜索昵称或评论内容...">
|
||
<button class="el-button el-button--primary" onclick="loadComments()">搜索</button>
|
||
<button class="el-button" id="addCommentBtn" onclick="showAddCommentModal()" style="margin-left: auto;">+ 新增留言</button>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>昵称</th>
|
||
<th>评论内容</th>
|
||
<th>浏览器/系统</th>
|
||
<th>时间</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="commentTableBody">
|
||
<tr><td colspan="6" class="empty-state">加载中...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination" id="pagination">
|
||
<span class="page-info">共 <strong id="totalCount">0</strong> 条</span>
|
||
<button class="page-btn" id="prevPage" onclick="changePage(-1)"><</button>
|
||
<div id="pageNumbers" style="display: inline-flex; gap: 4px;"></div>
|
||
<button class="page-btn" id="nextPage" onclick="changePage(1)">></button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
let modalResolve = null;
|
||
let currentStatusFilter = '';
|
||
let currentPage = 1;
|
||
let totalPages = 0;
|
||
let totalCount = 0;
|
||
|
||
function selectStatus(element, status) {
|
||
// 更新左侧菜单高亮
|
||
document.querySelectorAll('.aside-menu-item').forEach(el => el.classList.remove('active'));
|
||
if (element.classList.contains('aside-menu-item')) {
|
||
element.classList.add('active');
|
||
}
|
||
currentStatusFilter = status;
|
||
|
||
// 在“删除”状态下隐藏新增按钮
|
||
const addBtn = document.getElementById('addCommentBtn');
|
||
if (addBtn) {
|
||
addBtn.style.display = status === 'deleted' ? 'none' : 'inline-block';
|
||
}
|
||
|
||
loadComments(); // 点击状态后自动搜索
|
||
}
|
||
|
||
function selectStatusMobile(element, status) {
|
||
document.querySelectorAll('.mobile-status-item').forEach(el => el.classList.remove('active'));
|
||
element.classList.add('active');
|
||
currentStatusFilter = status;
|
||
loadComments();
|
||
}
|
||
|
||
function showConfirm(message) {
|
||
return new Promise((resolve) => {
|
||
document.getElementById('modalTitle').textContent = message;
|
||
document.getElementById('confirmModal').style.display = 'flex';
|
||
modalResolve = resolve;
|
||
});
|
||
}
|
||
|
||
function closeModal(result) {
|
||
document.getElementById('confirmModal').style.display = 'none';
|
||
if (modalResolve) modalResolve(result);
|
||
}
|
||
|
||
function showDetail(comment) {
|
||
const date = new Date(comment.time).toLocaleString('zh-CN', {
|
||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||
hour: '2-digit', minute: '2-digit', second: '2-digit'
|
||
});
|
||
const content = `
|
||
<div class="detail-grid">
|
||
<div class="detail-label">ID：</div>
|
||
<div class="detail-value">${comment.id}</div>
|
||
|
||
<div class="detail-label">昵称：</div>
|
||
<div class="detail-value">${comment.nick || '匿名'}</div>
|
||
|
||
<div class="detail-label">邮箱：</div>
|
||
<div class="detail-value">${comment.mail || '-'}</div>
|
||
|
||
<div class="detail-label">网站：</div>
|
||
<div class="detail-value">${comment.link ? `<a href="${comment.link}" target="_blank" style="color: var(--el-color-primary); text-decoration: none;">${comment.link}</a>` : '-'}</div>
|
||
|
||
<div class="detail-label">浏览器：</div>
|
||
<div class="detail-value">${comment.browser || '-'} / ${comment.os || '-'}</div>
|
||
|
||
<div class="detail-divider"></div>
|
||
|
||
<div class="detail-label">评论内容：</div>
|
||
<div class="detail-value comment-html">${comment.comment}</div>
|
||
|
||
<div class="detail-divider"></div>
|
||
|
||
<div class="detail-label">发布时间：</div>
|
||
<div class="detail-value">${date}</div>
|
||
|
||
<div class="detail-label">User Agent：</div>
|
||
<div class="detail-value" style="font-size: 12px; color: var(--el-text-secondary); font-family: monospace;">${comment.ua || '-'}</div>
|
||
</div>
|
||
`;
|
||
document.getElementById('detailContent').innerHTML = content;
|
||
document.getElementById('detailModal').style.display = 'flex';
|
||
}
|
||
|
||
function closeDetailModal() {
|
||
document.getElementById('detailModal').style.display = 'none';
|
||
}
|
||
|
||
function showAddCommentModal() {
|
||
// 清空表单
|
||
document.getElementById('addNick').value = '';
|
||
document.getElementById('addMail').value = '';
|
||
document.getElementById('addLink').value = '';
|
||
document.getElementById('addComment').value = '';
|
||
document.getElementById('addStatus').value = 'approved';
|
||
document.getElementById('addCommentModal').style.display = 'flex';
|
||
}
|
||
|
||
function closeAddCommentModal() {
|
||
document.getElementById('addCommentModal').style.display = 'none';
|
||
}
|
||
|
||
function submitNewComment() {
|
||
const nick = document.getElementById('addNick').value.trim();
|
||
const mail = document.getElementById('addMail').value.trim();
|
||
const link = document.getElementById('addLink').value.trim();
|
||
const comment = document.getElementById('addComment').value.trim();
|
||
const status = document.getElementById('addStatus').value;
|
||
|
||
if (!comment) {
|
||
showConfirm('请输入评论内容').then(() => {});
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
nick: nick || '匿名',
|
||
mail: mail,
|
||
link: link,
|
||
comment: comment,
|
||
ua: navigator.userAgent,
|
||
status: status
|
||
};
|
||
|
||
fetch('/api/comment', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(res => res.json())
|
||
.then(result => {
|
||
if (result.errno === 0) {
|
||
closeAddCommentModal();
|
||
loadComments();
|
||
} else {
|
||
showConfirm('添加失败: ' + result.errmsg).then(() => {});
|
||
}
|
||
})
|
||
.catch(err => {
|
||
showConfirm('网络错误，请重试').then(() => {});
|
||
});
|
||
}
|
||
|
||
function selectStatusMobile(element, status) {
|
||
document.querySelectorAll('.mobile-status-item').forEach(el => el.classList.remove('active'));
|
||
element.classList.add('active');
|
||
currentStatusFilter = status;
|
||
loadComments();
|
||
}
|
||
|
||
function changePage(delta) {
|
||
const newPage = currentPage + delta;
|
||
if (newPage >= 1 && newPage <= totalPages) {
|
||
loadComments(newPage);
|
||
}
|
||
}
|
||
|
||
function goToPage(page) {
|
||
if (page >= 1 && page <= totalPages && page !== currentPage) {
|
||
loadComments(page);
|
||
}
|
||
}
|
||
|
||
function renderPagination(total, page, pages) {
|
||
totalCount = total;
|
||
totalPages = pages;
|
||
document.getElementById('totalCount').textContent = total;
|
||
|
||
const paginationDiv = document.getElementById('pagination');
|
||
const prevBtn = document.getElementById('prevPage');
|
||
const nextBtn = document.getElementById('nextPage');
|
||
const pageNumbers = document.getElementById('pageNumbers');
|
||
|
||
// 更新上一页/下一页按钮状态
|
||
prevBtn.classList.toggle('disabled', page <= 1);
|
||
nextBtn.classList.toggle('disabled', page >= pages);
|
||
|
||
// 生成页码按钮
|
||
pageNumbers.innerHTML = '';
|
||
|
||
if (pages <= 1 && total === 0) {
|
||
// 如果没有数据，完全隐藏分页器
|
||
paginationDiv.style.display = 'none';
|
||
} else if (pages <= 1) {
|
||
// 如果只有一页但有数据，只显示总数，隐藏翻页按钮
|
||
prevBtn.style.display = 'none';
|
||
nextBtn.style.display = 'none';
|
||
pageNumbers.style.display = 'none';
|
||
paginationDiv.style.display = 'flex';
|
||
} else {
|
||
// 多页时显示完整分页器
|
||
prevBtn.style.display = 'inline-block';
|
||
nextBtn.style.display = 'inline-block';
|
||
pageNumbers.style.display = 'inline-flex';
|
||
paginationDiv.style.display = 'flex';
|
||
|
||
// 显示最多 5 个页码
|
||
let start = Math.max(1, page - 2);
|
||
let end = Math.min(pages, start + 4);
|
||
if (end - start < 4) {
|
||
start = Math.max(1, end - 4);
|
||
}
|
||
|
||
for (let i = start; i <= end; i++) {
|
||
const btn = document.createElement('button');
|
||
btn.className = `page-btn ${i === page ? 'active' : ''}`;
|
||
btn.textContent = i;
|
||
btn.onclick = () => goToPage(i);
|
||
pageNumbers.appendChild(btn);
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadComments(page = 1) {
|
||
const keyword = document.getElementById('searchKeyword').value;
|
||
currentPage = page;
|
||
|
||
fetch(`/api/admin/comments?keyword=${encodeURIComponent(keyword)}&status=${currentStatusFilter}&page=${page}&pageSize=10`)
|
||
.then(res => res.json())
|
||
.then(result => {
|
||
if (result.errno === 0) {
|
||
renderTable(result.data.list);
|
||
renderPagination(result.data.total, result.data.page, result.data.totalPages);
|
||
} else {
|
||
showConfirm('加载失败: ' + result.errmsg).then(() => {});
|
||
}
|
||
})
|
||
.catch(err => console.error('Error:', err));
|
||
}
|
||
|
||
function renderTable(comments) {
|
||
const tbody = document.getElementById('commentTableBody');
|
||
|
||
if (!comments || comments.length === 0) {
|
||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">暂无数据</td></tr>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
comments.forEach(c => {
|
||
const date = new Date(c.time).toLocaleString();
|
||
|
||
let statusClass = 'status-approved';
|
||
let statusText = '通过';
|
||
if (c.status === 'spam') { statusClass = 'status-spam'; statusText = '垃圾'; }
|
||
if (c.status === 'deleted') { statusClass = 'status-deleted'; statusText = '删除'; }
|
||
|
||
let actionButtons = '';
|
||
if (currentStatusFilter === 'deleted') {
|
||
actionButtons = `
|
||
<button onclick="updateStatus(${c.id}, 'approved')">通过</button>
|
||
<button onclick="showDetail(${JSON.stringify(c).replace(/"/g, '"')})">详情</button>
|
||
`;
|
||
} else if (currentStatusFilter === 'spam') {
|
||
actionButtons = `
|
||
<button onclick="updateStatus(${c.id}, 'approved')">通过</button>
|
||
<button class="text-danger" onclick="updateStatus(${c.id}, 'deleted')">删除</button>
|
||
<button onclick="showDetail(${JSON.stringify(c).replace(/"/g, '"')})">详情</button>
|
||
`;
|
||
} else {
|
||
actionButtons = `
|
||
<button onclick="updateStatus(${c.id}, 'approved')">通过</button>
|
||
<button class="text-danger" onclick="updateStatus(${c.id}, 'spam')">垃圾</button>
|
||
<button class="text-danger" onclick="updateStatus(${c.id}, 'deleted')">删除</button>
|
||
<button onclick="showDetail(${JSON.stringify(c).replace(/"/g, '"')})">详情</button>
|
||
`;
|
||
}
|
||
|
||
html += `<tr>
|
||
<td>${c.nick || '匿名'}</td>
|
||
<td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${c.comment.replace(/<[^>]*>/g, '')}</td>
|
||
<td>${c.browser} / ${c.os}</td>
|
||
<td>${date}</td>
|
||
<td><span class="status-badge ${statusClass}">${statusText}</span></td>
|
||
<td class="actions">
|
||
${actionButtons}
|
||
</td>
|
||
</tr>`;
|
||
});
|
||
tbody.innerHTML = html;
|
||
}
|
||
|
||
async function updateStatus(id, status) {
|
||
const confirmed = await showConfirm(`确定要将此评论标记为 "${status}" 吗？`);
|
||
if (!confirmed) return;
|
||
|
||
fetch(`/api/admin/comment/${id}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ status: status })
|
||
})
|
||
.then(res => res.json())
|
||
.then(result => {
|
||
if (result.errno === 0) {
|
||
loadComments(); // 重新加载列表
|
||
} else {
|
||
showConfirm('更新失败: ' + result.errmsg).then(() => {});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始加载
|
||
loadComments();
|
||
</script>
|
||
</body>
|
||
</html>
|