OpenClaw—AI研究OpenClaw—AI研究
  • AI动态
  • OpenClaw教程
  • 技术解读
  • 用户故事

【开发日志】ShopSystem Day 17: 收藏夹分组(2026-08-30)

【开发日志】ShopSystem Day 17: 收藏夹分组(2026-08-30)

2026年8月30日 by WoodStone

ShopSystem 第三阶段第二项收藏夹分组功能 Day 17 上线了。这个功能让买家可以把收藏夹按主题拆分管理,比如手机数码、家居好物、想买的礼物等不同分组,每个分组单独计数。详情页点收藏按钮时也能选择具体分组,不再是统一的「未分组」。整个功能后端新建了一张收藏分组表、扩展了收藏表的分组外键,并新增了 4 个 API;前端新增了用户中心收藏 Tab 的客户端组件和详情页收藏按钮的分组下拉。

用户中心收藏 Tab 分组 chips 与商品网格

用户中心收藏 Tab 是分组功能的主入口。顶部一排 chips 标签从左到右展示「全部(N)」「未分组(N)」「手机数码(N)✎ ✕」「家居好物(N)✎ ✕」等等,每个分组实时显示收藏数量。点 chips 切换分组时,URL 会带上 ?groupId=N 参数同步,刷新页面状态保留,翻页也保留这个筛选条件。chips 末尾有「+ 新建分组」按钮,弹窗输入分组名就能创建。用户自定义分组右侧有两个小图标:✎ 重命名(弹窗预填当前名)和 ✕ 删除(弹窗确认,提示组内收藏将自动归入「未分组」)。

每个商品卡片底部新增了两个操作:一个下拉选择器用来移动到指定分组(选项就是当前用户的所有分组加「未分组」),一个 ✕ 按钮用来直接取消收藏。下拉切换时后端立即更新收藏的 group_id,chips 计数也会实时刷新——不需要刷新页面,全部走客户端 state 联动。如果当前正在查看某个具体分组,移动走的收藏会自动从列表消失(因为它已经不在这个分组了);如果当前是全部视图,则本地更新 group_id 字段并刷新分组计数。

商品详情页的收藏按钮也做了扩展。原来只有一个 ❤️/🤍 的心形按钮,现在变成两个按钮:主按钮依然是快速收藏/取消(行为完全不变,老调用方零影响);旁边新增了一个 ▼ 下拉箭头,只有当前用户至少有一个分组时才显示——避免空 popover 干扰没分组的用户。点 ▼ 弹出分组下拉,里面是用户的全部分组列表加「未分组」选项,最底下有一个「管理分组 →」链接跳转到用户中心的收藏 Tab 完整管理界面。

商品详情页收藏分组 popover

后端表结构也做了对应的扩展。原来只有一张 favorites 收藏表,现在新增一张 favorite_groups 分组表,字段包含 id / user_id / name / sort_order / 创建更新时间。同时给 favorites 表加了一个 group_id 字段,作为指向 favorite_groups.id 的外键,默认 NULL 表示「未分组」。这样所有已有收藏数据天然归到「未分组」,完全不需要数据迁移脚本。删除分组时靠数据库的 ON DELETE SET NULL 自动把组内收藏归到「未分组」,应用层只删除分组那一行,事务一致性强、逻辑也最简单。

API 一共新增了 4 个端点:GET /api/favorites/groups 拉当前用户的全部分组(含「未分组」虚拟项和每组计数);POST /api/favorites/groups 新建分组(校验非空、最多 20 个/用户、不能同名);PATCH /api/favorites/groups/[id] 重命名;DELETE /api/favorites/groups/[id] 删除(返回组内受影响收藏数);还有一个 PATCH /api/favorites/[id] 用来移动单条收藏到指定分组(支持 groupId: null 移到「未分组」)。所有写操作都有所有权校验——先 SELECT WHERE id=? AND user_id=? 防止越权,同时每个写接口都走了限流保护避免恶意刷分组。

同名分组防护用了双重保险:应用层先查重,有重名直接返 400(节省数据库一次 ER_DUP_ENTRY);数据库层用 UNIQUE(user_id, name) 复合唯一索引兜底,即使并发插入也不会产生重名(竞态保护)。分组数量上限 20 个/用户是参考淘宝、京东、小红书普遍支持的几十个自定义分组做的折中——既满足业务场景,又能防止恶意刷分组占用存储。

本次开发期间还修了一个 P0 真 Bug:3 个新的收藏相关 API 用了页面级鉴权函数,但 Next.js 的页面级鉴权在抛重定向时会触发 NEXT_REDIRECT 特殊异常,这个异常被外层 try/catch 当成普通错误吞掉,导致未登录请求返回 500 而不是 401。修复方法是把鉴权调用移出 try/catch,改用可选用户函数加显式 401 判断。这个模式让所有 favorites 系列 API 的未登录响应都符合预期——未登录一律 401,登录态才能访问。

新建分组弹窗

整个开发过程是按照「DB schema 先稳 → API 后接入 → 客户端组件最后」的顺序推进的,总共新增 2 个 migration、3 个新 API、1 个新组件、1 个新脚本,代码统计大约新增 785 行、修改 190 行。功能完成后 Qclaw 浏览器用户视角做了 13 项验收测试全过 0 bug,涵盖了分组 CRUD、收藏移动、分组筛选、回归边界等所有场景;之前自测发现的鉴权 Bug 也已经验证修复有效。下一阶段会进入 Day 18 浏览历史功能,继续完善用户中心模块…

← 返回文章列表
分类: 技术解读 标记: Day17, Next.js, ShopSystem, 开发日志, 收藏夹, 电商

© 2026 OpenClaw—AI研究 版权所有

沪ICP备2026010690号-1