f246b38fc1
作品审核： - 批量通过/批量拒绝 + 撤销审核机制 - 默认筛选待审核，表格加描述预览+审核时间列 - 详情Drawer加上一个/下一个导航，审核后自动跳下一个 - 操作日志时间线展示，筛选下拉自动查询 作品管理： - 修复筛选/排序失效，新增推荐中筛选 - 下架改为弹窗选择原因，取消推荐二次确认 - 详情Drawer补全描述/标签/操作按钮/操作日志 - 统计卡片可点击筛选，下架自动取消推荐 标签管理： - 按分类分组卡片式展示，分类改为下拉选择 - 新增标签颜色字段（预设色+自定义） - 上移/下移排序按钮，使用次数可点击跳转作品管理 - 新增/编辑时实时预览用户端标签效果 广场推荐： - 新增推荐作品列表接口 GET /public/gallery/recommended - 广场顶部新增「编辑推荐」横向滚动栏 文档更新：内容管理设计文档补充实施记录，UGC开发计划P1-1标记已完成 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
3.4 KiB
3.4 KiB
点赞 & 收藏功能设计
所属端：公众端 + 超管端联动 状态：已实现 创建日期：2026-03-31 最后更新：2026-03-31
概述
为 UGC 绘本创作社区的作品添加点赞和收藏交互能力，提升用户参与感和内容发现效率。
现状
- 数据库：
user_work_likes和user_work_favorites表已存在（含唯一约束） UserWork表已有likeCount、favoriteCount冗余计数字段- 前端：Gallery 和 Detail 页面已展示计数数字，但无交互按钮
- 后端：无任何点赞/收藏 API
API 设计
公众端 API
| 方法 | 路径 | 说明 | 鉴权 |
|---|---|---|---|
| POST | /api/public/works/:id/like |
点赞/取消点赞（toggle） | 需登录 |
| POST | /api/public/works/:id/favorite |
收藏/取消收藏（toggle） | 需登录 |
| GET | /api/public/works/:id/interaction |
查询当前用户对该作品的交互状态 | 需登录 |
| GET | /api/public/mine/favorites |
我的收藏列表 | 需登录 |
请求/响应
POST /works/:id/like
// Response
{ "liked": true, "likeCount": 42 }
POST /works/:id/favorite
// Response
{ "favorited": true, "favoriteCount": 18 }
GET /works/:id/interaction
// Response
{ "liked": true, "favorited": false }
GET /mine/favorites
// Response
{
"list": [
{
"id": 1,
"workId": 10,
"createTime": "2026-03-31T...",
"work": {
"id": 10, "title": "...", "coverUrl": "...",
"likeCount": 42, "viewCount": 100,
"creator": { "id": 1, "nickname": "...", "avatar": "..." }
}
}
],
"total": 5, "page": 1, "pageSize": 12
}
后端实现
新增文件
backend/src/public/interaction.service.ts— 交互服务
核心逻辑
点赞 toggle：
- 查询
UserWorkLike是否存在该记录 - 存在 → 删除记录 +
likeCount减 1 - 不存在 → 创建记录 +
likeCount加 1 - 使用事务保证一致性
收藏 toggle：同上逻辑，操作 UserWorkFavorite 和 favoriteCount
交互状态查询：
- 批量查询 like + favorite 记录是否存在
- 广场详情接口中嵌入调用（已登录时返回交互状态）
前端改动
作品详情页 (Detail.vue)
- stats-row 改为交互按钮栏：点赞按钮 + 收藏按钮
- 已点赞/收藏时图标实心 + 主题色高亮
- 点击触发 toggle API，乐观更新计数
广场页 (Gallery.vue)
- 卡片 stats 区域的心形图标改为可点击
- 点击点赞（阻止冒泡，不跳转详情）
- 乐观更新 + 简单动效
新增页面
/p/mine/favorites— 我的收藏页面- 个人中心 Index.vue 增加「我的收藏」菜单入口
API 定义
// api/public.ts
export const publicInteractionApi = {
like: (workId: number) => publicApi.post(`/public/works/${workId}/like`),
favorite: (workId: number) => publicApi.post(`/public/works/${workId}/favorite`),
getInteraction: (workId: number) => publicApi.get(`/public/works/${workId}/interaction`),
myFavorites: (params?: { page?: number; pageSize?: number }) =>
publicApi.get('/public/mine/favorites', { params }),
}
交互细节
- 未登录用户点击点赞/收藏 → 跳转登录页
- 乐观更新：点击后立即更新 UI，API 失败时回滚
- 点赞按钮动效：心形图标缩放弹跳
- 自己的作品也可以点赞/收藏（不做限制）