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

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

---

## 一、概述

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

---

## 二、后端变更

### 2.1 审核权限校验

**文件**：`ArticleCommentService.auditComment()`

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

改造后逻辑：
1. 根据 commentId 查询评论 → 获取 articleId
2. 根据 articleId 查询文章 → 获取 `createdBy`（文章作者）
3. 判断当前 `auditorId` == `article.createdBy`（文章作者本人）或用户角色为 `admin` → 允许审核
4. 否则返回 `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 管理端按状态/文章/分页查询所有评论。

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

响应：
```json
{
  "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 端：驳回时弹出原因输入框
- [ ] 小程序端：文章作者看到待审核评论区
- [ ] 小程序端：作者可审核通过/驳回评论
- [ ] 小程序端：审核后列表正确刷新