a9c8f0b541
修改路由更新逻辑，当页码小于等于1时移除p参数，避免URL中出现冗余参数。同时移除初始加载时的路由更新调用，防止重复操作。 docs: 更新文档说明 更新后台和评论端的更新说明，明确官方托管的使用方式
719 lines
16 KiB
Vue
719 lines
16 KiB
Vue
<template>
|
|
<div class="page">
|
|
<h2 class="page-title">评论管理</h2>
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<select v-model="statusFilter" class="toolbar-select">
|
|
<option value="">全部状态</option>
|
|
<option value="approved">已通过</option>
|
|
<option value="pending">待审核</option>
|
|
<option value="rejected">已拒绝</option>
|
|
</select>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<button class="toolbar-button" @click="loadComments">刷新</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="loading" class="page-hint">加载中...</div>
|
|
<div v-else-if="error" class="page-error">{{ error }}</div>
|
|
<div v-else>
|
|
<div class="comment-table">
|
|
<div class="table-header">
|
|
<div class="table-cell table-cell-author">用户</div>
|
|
<div class="table-cell table-cell-content">评论信息</div>
|
|
<div class="table-cell table-cell-path">评论地址</div>
|
|
<div class="table-cell table-cell-status">状态</div>
|
|
<div class="table-cell table-cell-actions">操作</div>
|
|
</div>
|
|
<div v-for="item in filteredComments" :key="item.id" class="table-row">
|
|
<div class="table-cell table-cell-author">
|
|
<div class="cell-author-wrapper">
|
|
<img
|
|
v-if="item.avatar"
|
|
:src="item.avatar"
|
|
class="cell-avatar"
|
|
:alt="item.name"
|
|
/>
|
|
<div class="cell-author-main">
|
|
<div class="cell-author-name">{{ item.name }}</div>
|
|
<div class="cell-author-email">
|
|
<span
|
|
class="cell-email-text"
|
|
@click="handleBlockEmail(item)"
|
|
title="屏蔽该邮箱"
|
|
>
|
|
{{ item.email }}
|
|
</span>
|
|
</div>
|
|
<span class="cell-time">{{ formatDate(item.created) }}</span>
|
|
<div v-if="item.ipAddress" class="cell-author-ip">
|
|
<span
|
|
class="cell-ip-text"
|
|
@click="handleBlockIp(item)"
|
|
title="屏蔽该 IP"
|
|
>{{ item.ipAddress }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-cell table-cell-content">
|
|
<div class="cell-content-text">{{ item.contentText }}</div>
|
|
</div>
|
|
<div class="table-cell table-cell-path">
|
|
<a
|
|
:href="item.postSlug"
|
|
target="_blank"
|
|
class="cell-path"
|
|
:title="item.postSlug"
|
|
>{{ item.postSlug }}</a
|
|
>
|
|
</div>
|
|
<div class="table-cell table-cell-status">
|
|
<span class="cell-status" :class="`cell-status-${item.status}`">
|
|
{{ formatStatus(item.status) }}
|
|
</span>
|
|
</div>
|
|
<div class="table-cell table-cell-actions">
|
|
<div class="table-actions">
|
|
<button
|
|
class="table-action"
|
|
@click="changeStatus(item, 'approved')"
|
|
:disabled="item.status === 'approved'"
|
|
>
|
|
通过
|
|
</button>
|
|
<button
|
|
class="table-action"
|
|
@click="changeStatus(item, 'pending')"
|
|
:disabled="item.status === 'pending'"
|
|
>
|
|
待审
|
|
</button>
|
|
<button
|
|
class="table-action"
|
|
@click="changeStatus(item, 'rejected')"
|
|
:disabled="item.status === 'rejected'"
|
|
>
|
|
拒绝
|
|
</button>
|
|
<button
|
|
class="table-action table-action-danger"
|
|
@click="removeComment(item)"
|
|
>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="filteredComments.length === 0" class="table-empty">暂无数据</div>
|
|
</div>
|
|
<div v-if="pagination.total > 1" class="pagination">
|
|
<button
|
|
class="pagination-button"
|
|
:disabled="pagination.page <= 1"
|
|
@click="goPage(pagination.page - 1)"
|
|
>
|
|
上一页
|
|
</button>
|
|
<button
|
|
class="pagination-button"
|
|
:class="{ 'pagination-button-active': pagination.page === 1 }"
|
|
:disabled="pagination.page === 1"
|
|
@click="goPage(1)"
|
|
>
|
|
1
|
|
</button>
|
|
<span
|
|
v-if="visiblePages.length && visiblePages[0] > 2"
|
|
class="pagination-ellipsis"
|
|
>
|
|
...
|
|
</span>
|
|
<template v-for="page in visiblePages" :key="page">
|
|
<button
|
|
v-if="page !== 1 && page !== pagination.total"
|
|
class="pagination-button"
|
|
:class="{ 'pagination-button-active': page === pagination.page }"
|
|
:disabled="page === pagination.page"
|
|
@click="goPage(page)"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
</template>
|
|
<span
|
|
v-if="
|
|
visiblePages.length &&
|
|
visiblePages[visiblePages.length - 1] < pagination.total - 1
|
|
"
|
|
class="pagination-ellipsis"
|
|
>
|
|
...
|
|
</span>
|
|
<button
|
|
v-if="pagination.total > 1"
|
|
class="pagination-button"
|
|
:class="{ 'pagination-button-active': pagination.page === pagination.total }"
|
|
:disabled="pagination.page === pagination.total"
|
|
@click="goPage(pagination.total)"
|
|
>
|
|
{{ pagination.total }}
|
|
</button>
|
|
<button
|
|
class="pagination-button"
|
|
:disabled="pagination.page >= pagination.total"
|
|
@click="goPage(pagination.page + 1)"
|
|
>
|
|
下一页
|
|
</button>
|
|
<div class="pagination-jump">
|
|
<span>跳转到</span>
|
|
<input
|
|
v-model="jumpPageInput"
|
|
class="pagination-input"
|
|
type="number"
|
|
min="1"
|
|
:max="pagination.total"
|
|
@keyup.enter="handleJumpPage"
|
|
/>
|
|
<span>页</span>
|
|
<button class="pagination-button" @click="handleJumpPage">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, computed } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import {
|
|
CommentItem,
|
|
CommentListResponse,
|
|
fetchComments,
|
|
deleteComment,
|
|
updateCommentStatus,
|
|
blockIp,
|
|
blockEmail,
|
|
} from "../api/admin";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const comments = ref<CommentItem[]>([]);
|
|
const pagination = ref<{ page: number; total: number }>({ page: 1, total: 1 });
|
|
const loading = ref(false);
|
|
const error = ref("");
|
|
const statusFilter = ref("");
|
|
const jumpPageInput = ref("");
|
|
|
|
const filteredComments = computed(() => {
|
|
if (!statusFilter.value) {
|
|
return comments.value;
|
|
}
|
|
return comments.value.filter((item) => item.status === statusFilter.value);
|
|
});
|
|
|
|
const visiblePages = computed(() => {
|
|
const total = pagination.value.total;
|
|
const current = pagination.value.page;
|
|
const maxVisible = 5;
|
|
if (total <= maxVisible) {
|
|
return Array.from({ length: total }, (_, index) => index + 1);
|
|
}
|
|
let start = current - Math.floor(maxVisible / 2);
|
|
let end = current + Math.floor(maxVisible / 2);
|
|
if (start < 1) {
|
|
start = 1;
|
|
end = maxVisible;
|
|
} else if (end > total) {
|
|
end = total;
|
|
start = total - maxVisible + 1;
|
|
}
|
|
const pages: number[] = [];
|
|
for (let i = start; i <= end; i += 1) {
|
|
pages.push(i);
|
|
}
|
|
return pages;
|
|
});
|
|
|
|
function formatDate(value: number) {
|
|
const d = new Date(value);
|
|
if (Number.isNaN(d.getTime())) {
|
|
return String(value);
|
|
}
|
|
return d.toLocaleString();
|
|
}
|
|
|
|
function formatStatus(status: string) {
|
|
if (status === "approved") {
|
|
return "已通过";
|
|
}
|
|
if (status === "pending") {
|
|
return "待审核";
|
|
}
|
|
if (status === "rejected") {
|
|
return "已拒绝";
|
|
}
|
|
return status;
|
|
}
|
|
|
|
async function loadComments(page?: number) {
|
|
const targetPage = typeof page === "number" ? page : 1;
|
|
loading.value = true;
|
|
error.value = "";
|
|
try {
|
|
const res = await fetchComments(targetPage);
|
|
comments.value = res.data;
|
|
pagination.value = { page: res.pagination.page, total: res.pagination.total };
|
|
} catch (e: any) {
|
|
error.value = e.message || "加载失败";
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function updateRoutePage(page: number) {
|
|
const query: Record<string, any> = { ...route.query };
|
|
if (page <= 1) {
|
|
delete query.p;
|
|
} else {
|
|
query.p = String(page);
|
|
}
|
|
router.push({ query });
|
|
}
|
|
|
|
async function goPage(page: number) {
|
|
if (page < 1 || page > pagination.value.total) {
|
|
return;
|
|
}
|
|
updateRoutePage(page);
|
|
await loadComments(page);
|
|
}
|
|
|
|
function handleJumpPage() {
|
|
const value = Number(jumpPageInput.value);
|
|
if (!Number.isFinite(value)) {
|
|
return;
|
|
}
|
|
const page = Math.floor(value);
|
|
if (page < 1 || page > pagination.value.total) {
|
|
return;
|
|
}
|
|
jumpPageInput.value = "";
|
|
updateRoutePage(page);
|
|
loadComments(page);
|
|
}
|
|
|
|
async function changeStatus(item: CommentItem, status: string) {
|
|
try {
|
|
await updateCommentStatus(item.id, status);
|
|
item.status = status;
|
|
} catch (e: any) {
|
|
error.value = e.message || "更新状态失败";
|
|
}
|
|
}
|
|
|
|
async function removeComment(item: CommentItem) {
|
|
if (!window.confirm(`确认删除评论 ${item.id} 吗`)) {
|
|
return;
|
|
}
|
|
try {
|
|
await deleteComment(item.id);
|
|
comments.value = comments.value.filter((c) => c.id !== item.id);
|
|
} catch (e: any) {
|
|
error.value = e.message || "删除失败";
|
|
}
|
|
}
|
|
|
|
async function handleBlockIp(item: CommentItem) {
|
|
if (!item.ipAddress) {
|
|
return;
|
|
}
|
|
if (!window.confirm(`确认将 IP ${item.ipAddress} 加入黑名单吗？`)) {
|
|
return;
|
|
}
|
|
try {
|
|
const res = await blockIp(item.ipAddress);
|
|
window.alert(res.message || "已加入 IP 黑名单");
|
|
} catch (e: any) {
|
|
error.value = e.message || "屏蔽 IP 失败";
|
|
}
|
|
}
|
|
|
|
async function handleBlockEmail(item: CommentItem) {
|
|
if (!item.email) {
|
|
return;
|
|
}
|
|
if (!window.confirm(`确认将邮箱 ${item.email} 加入黑名单吗？`)) {
|
|
return;
|
|
}
|
|
try {
|
|
const res = await blockEmail(item.email);
|
|
window.alert(res.message || "已加入邮箱黑名单");
|
|
} catch (e: any) {
|
|
error.value = e.message || "屏蔽邮箱失败";
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
const p = route.query.p;
|
|
let initialPage = 1;
|
|
if (typeof p === "string") {
|
|
const value = Number(p);
|
|
if (Number.isFinite(value) && value >= 1) {
|
|
initialPage = Math.floor(value);
|
|
}
|
|
} else if (Array.isArray(p) && typeof p[0] === "string") {
|
|
const value = Number(p[0]);
|
|
if (Number.isFinite(value) && value >= 1) {
|
|
initialPage = Math.floor(value);
|
|
}
|
|
}
|
|
loadComments(initialPage);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #24292f;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar-right {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar-select {
|
|
padding: 4px 8px;
|
|
font-size: 13px;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 4px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.toolbar-button {
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid #d0d7de;
|
|
background-color: #f6f8fa;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.page-hint {
|
|
font-size: 14px;
|
|
color: #57606a;
|
|
}
|
|
|
|
.page-error {
|
|
font-size: 14px;
|
|
color: #d1242f;
|
|
}
|
|
|
|
.comment-table {
|
|
background-color: #ffffff;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
background-color: #f6f8fa;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
/* border-bottom: 1px solid #eaeae0; */
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-row:hover .table-cell {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.table-cell {
|
|
padding: 10px 12px;
|
|
font-size: 13px;
|
|
color: #24292f;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid #eaeae0;
|
|
}
|
|
|
|
.table-cell-id {
|
|
width: 120px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-cell-author {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.table-cell-content {
|
|
flex-direction: column;
|
|
flex: 1;
|
|
align-items: flex-start !important;
|
|
justify-content: center;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.table-cell-path {
|
|
width: 240px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.table-cell-time {
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.table-cell-status {
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-cell-actions {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 250px;
|
|
}
|
|
|
|
.table-header .table-cell {
|
|
font-weight: 500;
|
|
color: #57606a;
|
|
align-items: center;
|
|
background-color: #f6f8fa;
|
|
border-bottom: 1px solid #d0d7de;
|
|
}
|
|
|
|
.cell-id {
|
|
font-size: 12px;
|
|
color: #57606a;
|
|
}
|
|
|
|
.cell-author-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.cell-author-email {
|
|
font-size: 12px;
|
|
color: #57606a;
|
|
word-break: break-all;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.cell-email-text {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cell-email-text:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cell-content-text {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.cell-path {
|
|
font-size: 12px;
|
|
color: #2774cb;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.cell-path:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cell-time {
|
|
font-size: 12px;
|
|
color: #57606a;
|
|
}
|
|
|
|
.cell-author-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cell-author-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cell-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 5px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cell-status {
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cell-status-approved {
|
|
color: #1a7f37;
|
|
background-color: #e7f5eb;
|
|
}
|
|
|
|
.cell-status-pending {
|
|
color: #9a6700;
|
|
background-color: #fff8c5;
|
|
}
|
|
|
|
.cell-status-rejected {
|
|
color: #d1242f;
|
|
background-color: #ffebe9;
|
|
}
|
|
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.table-action {
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #d0d7de;
|
|
background-color: #ffffff;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table-action:hover {
|
|
background-color: #f6f8fa;
|
|
}
|
|
|
|
.table-action:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.table-action-danger {
|
|
border-color: #d1242f;
|
|
color: #d1242f;
|
|
}
|
|
|
|
.table-action-danger:hover {
|
|
background-color: #ffebe9;
|
|
}
|
|
|
|
.table-empty {
|
|
padding: 32px;
|
|
text-align: center;
|
|
color: #57606a;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pagination-button {
|
|
height: 28px;
|
|
min-width: 28px;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #d0d7de;
|
|
background-color: #f6f8fa;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pagination-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.pagination-button-active {
|
|
background-color: #0969da;
|
|
color: #ffffff;
|
|
border-color: #0969da;
|
|
}
|
|
|
|
.pagination-ellipsis {
|
|
padding: 0 2px;
|
|
font-size: 12px;
|
|
color: #57606a;
|
|
}
|
|
|
|
.pagination-jump {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
color: #57606a;
|
|
}
|
|
|
|
.pagination-input {
|
|
width: 60px;
|
|
height: 28px;
|
|
box-sizing: border-box;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
border: 1px solid #d0d7de;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cell-ip-text {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cell-ip-text:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|