添加自动推荐标签功能
This commit is contained in:
nojava
@@ -0,0 +1,197 @@
|
||||
# 文章标签自动推荐功能技术实施文档
|
||||
|
||||
## 前提条件
|
||||
|
||||
**数据安全规则**：
|
||||
- 联调和测试过程中如需创建测试数据，测试完成后必须删除
|
||||
- **数据库中存在一篇名为 "hello" 的文章，此文章不允许任何修改或删除操作**
|
||||
|
||||
---
|
||||
|
||||
## 1. 功能概述
|
||||
|
||||
基于 AI 模型根据文章内容自动推荐 3-5 个合适标签，博主可一键确认添加。
|
||||
|
||||
## 2. 核心实现思路
|
||||
|
||||
### 2.1 复用现有 AI 能力
|
||||
|
||||
项目已有 `AiSummaryService` 调用阿里云 DashScope 模型的能力，标签推荐功能将**完全复用**该服务：
|
||||
|
||||
- 复用 `DashScopeProperties` 配置（API Key、超时、限流等）
|
||||
- 复用模型调用逻辑（HTTP 请求、响应解析、错误处理）
|
||||
- 复用 Rate Limit 限流机制
|
||||
|
||||
### 2.2 差异化实现
|
||||
|
||||
与摘要生成的主要差异：
|
||||
|
||||
| 特性 | 摘要生成 | 标签推荐 |
|
||||
|------|----------|----------|
|
||||
| System Prompt | 生成摘要的专业提示词 | 提取标签的专业提示词 |
|
||||
| User Prompt | 标题 + 正文 | 标题 + 正文（需要提取标签） |
|
||||
| 响应解析 | 截取摘要文本 | 解析逗号分隔的标签列表 |
|
||||
| 返回格式 | SummaryResultVO | 推荐标签列表 |
|
||||
|
||||
### 2.3 实现方案
|
||||
|
||||
**后端**：新建 `TagRecommendService` 服务类，复用 `AiSummaryServiceImpl` 的模型调用能力
|
||||
|
||||
**前端**：在文章编辑页标签区域添加推荐按钮，展示推荐标签并支持一键添加
|
||||
|
||||
---
|
||||
|
||||
## 3. 改动项清单
|
||||
|
||||
### 3.1 后端改动
|
||||
|
||||
#### 3.1.1 新增 DTO
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `dto/RecommendTagsDTO.java` | 请求 DTO，包含 title、content 字段 |
|
||||
|
||||
#### 3.1.2 新增 VO
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `dto/TagRecommendResultVO.java` | 返回 VO，包含 tags 列表、model、costMillis 等 |
|
||||
|
||||
#### 3.1.3 新增服务接口
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `service/TagRecommendService.java` | 标签推荐服务接口 |
|
||||
|
||||
#### 3.1.4 新增服务实现
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `service/impl/TagRecommendServiceImpl.java` | 复用 AiSummaryServiceImpl 的 callModel 方法，实现标签推荐逻辑 |
|
||||
|
||||
#### 3.1.5 新增 Controller 接口
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `controller/ArticleController.java` | 新增 `/recommend-tags` POST 接口 |
|
||||
|
||||
#### 3.1.6 错误码（如需要）
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `common/exception/ErrorCode.java` | 可能需要新增错误码（如 AI_CONTENT_TOO_SHORT 已存在可复用） |
|
||||
|
||||
---
|
||||
|
||||
### 3.2 前端改动
|
||||
|
||||
#### 3.2.1 新增 API 方法
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `src/api/article.js` | 新增 `recommendTags(data)` 方法 |
|
||||
|
||||
#### 3.2.2 修改文章编辑器
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `src/views/app/ArticleEditor.vue` | 在标签区域添加"智能推荐"按钮及交互逻辑 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 核心逻辑说明
|
||||
|
||||
### 4.1 后端核心逻辑
|
||||
|
||||
```java
|
||||
// TagRecommendServiceImpl.java
|
||||
|
||||
// 专用提示词
|
||||
private static final String SYSTEM_PROMPT =
|
||||
"你是一名专业的博客编辑，请根据用户提供的标题与正文，" +
|
||||
"提取 3-5 个最合适的标签。只返回标签词，用逗号分隔，不要有其他内容。";
|
||||
|
||||
private static final int TAG_RECOMMEND_MIN_LENGTH = 10;
|
||||
|
||||
// 1. 构建请求（复用 AiSummaryServiceImpl.callModel）
|
||||
Map<String, Object> requestBody = Map.of(
|
||||
"model", properties.getModel(),
|
||||
"messages", List.of(
|
||||
Map.of("role", "system", "content", SYSTEM_PROMPT),
|
||||
Map.of("role", "user", "content", buildUserPrompt(dto.getTitle(), plainContent))
|
||||
),
|
||||
"temperature", 0.5 // 标签推荐可以稍高一些，增加多样性
|
||||
);
|
||||
|
||||
// 2. 调用模型（复用 AiSummaryServiceImpl.callModel）
|
||||
Map<String, Object> response = callModel(requestBody);
|
||||
|
||||
// 3. 解析响应（解析逗号分隔的标签）
|
||||
List<String> tags = parseTagsFromResponse(response);
|
||||
```
|
||||
|
||||
### 4.2 前端核心逻辑
|
||||
|
||||
```vue
|
||||
<!-- ArticleEditor.vue 标签区域 -->
|
||||
<el-form-item label="标签">
|
||||
<el-select v-model="form.tagIds" multiple ...>
|
||||
<el-option v-for="tag in tags" ... />
|
||||
</el-select>
|
||||
<!-- 新增推荐按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="recommending"
|
||||
@click="handleRecommendTags"
|
||||
>
|
||||
智能推荐
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 推荐结果展示 -->
|
||||
<div v-if="recommendedTags.length" class="tag-recommend-result">
|
||||
<el-checkbox-group v-model="selectedRecommendedTags">
|
||||
<el-checkbox
|
||||
v-for="tag in recommendedTags"
|
||||
:key="tag"
|
||||
:label="tag"
|
||||
/>
|
||||
</el-checkbox-group>
|
||||
<el-button @click="confirmAddTags">确认添加</el-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 待办事项
|
||||
|
||||
| 序号 | 待办项 | 状态 |
|
||||
|------|--------|------|
|
||||
| 1 | 后端：创建 RecommendTagsDTO.java | ✅ 已完成 |
|
||||
| 2 | 后端：创建 TagRecommendResultVO.java | ✅ 已完成 |
|
||||
| 3 | 后端：创建 TagRecommendService 接口 | ✅ 已完成 |
|
||||
| 4 | 后端：创建 TagRecommendServiceImpl 实现类 | ✅ 已完成 |
|
||||
| 5 | 后端：在 ArticleController 添加 /recommend-tags 接口 | ✅ 已完成 |
|
||||
| 6 | 前端：在 article.js 添加 recommendTags API 方法 | ✅ 已完成 |
|
||||
| 7 | 前端：在 ArticleEditor.vue 添加智能推荐按钮和交互 | ✅ 已完成 |
|
||||
| 8 | 后端：单元测试（18 个用例，P0+P1） | ✅ 已完成 |
|
||||
| 9 | 前后端联调测试（LiveIT 真实 AI 调用验证） | ✅ 已完成 |
|
||||
| 10 | 功能验收测试（API + 前端静态资源验证） | ✅ 已完成 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 实施顺序建议
|
||||
|
||||
1. **先做后端**：DTO → VO → Service → Controller
|
||||
2. **再做前端**：API 方法 → 页面交互
|
||||
3. **最后联调**：前后端对接、bug 修复、验收
|
||||
|
||||
---
|
||||
|
||||
## 7. 风险与注意事项
|
||||
|
||||
1. **模型响应格式**：需处理模型返回格式不稳定的情况（如多余空格、换行）
|
||||
2. **标签去重**：推荐标签可能与已有标签重复，需前端过滤
|
||||
3. **内容过短**：正文少于 10 字符时不调用 AI，直接提示用户
|
||||
4. **限流复用**：复用现有 Rate Limit 机制，避免额外开发
|
||||
Reference in New Issue
Block a user