文章评论审核系统设计文档

日期：2026-07-30 状态：设计稿

一、概述

为文章评论系统补充审核能力，覆盖三个层面：后端权限加固、Web管理端审核页面完善、小程序端文章作者审核。

二、后端变更

2.1 审核权限校验

文件：ArticleCommentService.auditComment()

当前问题：任何登录用户都能审核任何评论。

改造后逻辑：

根据 commentId 查询评论 → 获取 articleId
根据 articleId 查询文章 → 获取 createdBy（文章作者）
判断当前 auditorId == article.createdBy（文章作者本人）或用户角色为 admin → 允许审核
否则返回 Result.error(403, "无权限审核该评论")

同时修改 ArticleCommentController.auditComment()：

添加 @RequestAttribute("role") 参数
将 role 传给 Service 层用于权限判断

2.2 待审核列表增强

文件：ArticleCommentController.getPendingComments()

当前：返回原始 ArticleComment 实体列表，缺少用户昵称和文章标题。

改造：

在 ArticleCommentService.getPendingComments() 中增加关联查询
返回数据增加字段：userName、articleTitle
保留 articleId 可选过滤（已有逻辑）

2.3 管理端评论查询 API（新增）

新增接口：POST /api/admin/articles/comments/list

用于 Web 管理端按状态/文章/分页查询所有评论。

请求体：

{
  "status": "pending|approved|rejected",  // 可选，默认全部
  "articleId": 123,                        // 可选
  "keyword": "搜索关键词",                  // 可选，匹配评论内容
  "page": 1,
  "size": 20
}

响应：

{
  "code": 200,
  "data": {
    "records": [
      {
        "id": 1,
        "articleId": 123,
        "articleTitle": "文章标题",
        "content": "评论内容",
        "userName": "用户昵称",
        "userId": 456,
        "status": "pending",
        "parentId": null,
        "replyToId": null,
        "auditReason": null,
        "createdAt": "2026-07-30T10:00:00"
      }
    ],
    "total": 50,
    "page": 1,
    "size": 20
  }
}

新增 Controller：在 AdminArticleController 中添加该接口。

新增 Service 方法：ArticleCommentService.getAdminList()

三、Web 管理端增强

文件：cfc-web/src/views/admin/CommentReview.vue

3.1 表格列增强

列	说明
ID	评论ID
文章标题	显示文章标题，可点击跳转到文章编辑页
评论用户	显示用户昵称
评论内容	评论正文（回复前加灰色「[回复]」前缀）
父评论	若为回复，显示被回复的评论内容摘要
状态	pending→待审核(黄)、approved→已通过(绿)、rejected→已驳回(红)
审核原因	驳回时填写的理由
时间	评论创建时间
操作	通过/驳回按钮（仅待审核状态可操作）

3.2 筛选区

状态筛选：下拉框（全部 / 待审核 / 已通过 / 已驳回）
文章搜索：输入框，按文章标题模糊搜索
搜索按钮

3.3 分页

使用 Element UI el-pagination 组件
默认每页 20 条

3.4 驳回弹窗

点击「驳回」弹出 el-dialog，包含 el-input 填写驳回原因
取消/确定按钮

3.5 权限

路由已注册，perm: 'articles:manage'
仅 admin 角色可访问

四、小程序端文章作者审核

文件：cfc-frontend/pages/article-center/article-detail.vue

4.1 判断文章作者

在 loadDetail() 完成后，判断：

const userId = uni.getStorageSync('userId')
this.isAuthor = this.article.createdBy == userId

4.2 待审核评论区域

在评论区顶部，若 isAuthor 为 true，增加「待审核评论」折叠面板：

加载 POST /api/articles/comments/pending?articleId=xxx
展示待审核评论列表
每条评论显示：用户头像、昵称、内容、时间
操作按钮：通过（绿色）、驳回（红色）

4.3 审核交互

点击「通过」→ 调 POST /api/articles/comments/audit → 成功 toast → 刷新待审核列表 + 刷新已审核评论列表
点击「驳回」→ 弹出 uni.showModal 输入驳回原因 → 确认后调接口 → 同上刷新

4.4 权限

仅文章作者（createdBy == userId）显示待审核区域
审核调用统一走 comments/audit，后端做权限校验

4.5 新增 API 封装

在 utils/api.js 中新增：

getPendingComments(data) → POST /api/articles/comments/pending

（createArticleComment 和 getArticleComments 已存在）

五、涉及文件清单

模块	文件	变更类型
后端	`ArticleCommentService.java`	修改（审核权限 + 列表增强）
后端	`ArticleCommentController.java`	修改（权限参数）
后端	`AdminArticleController.java`	新增（评论管理列表接口）
Web管理端	`CommentReview.vue`	重写（完整审核页面）
Web管理端	`src/api/article.js`	新增（评论管理 API 封装）
小程序	`article-detail.vue`	修改（作者审核功能）
小程序	`utils/api.js`	新增（pending 接口封装）

六、验收标准

后端：非文章作者且非 admin 审核评论返回 403
后端：/api/admin/articles/comments/list 支持分页/状态/文章过滤
后端：待审核列表返回文章标题和用户名
Web 端：评论审核页正确显示文章标题、用户名、状态
Web 端：支持按状态筛选、文章搜索、分页
Web 端：驳回时弹出原因输入框
小程序端：文章作者看到待审核评论区
小程序端：作者可审核通过/驳回评论
小程序端：审核后列表正确刷新

2026-07-30-comment-review-system.md 5.8 KB 永久連結 文件歷史 原始文件

文章评论审核系统 设计文档