Day 22 完成了第三阶段「营销 + 推荐」的第 4 项,也是收官项:店铺关注。新增 shop_follows 表记录「哪个用户关注了哪个商家」,沿用 users 表表达商家身份,无需新增 merchants 或 shops 表,单表表达清晰。用户在店铺主页或商品详情页看到喜欢的店铺时,点一下「+ 关注店铺」按钮即可关注,后续在「我的关注」tab 中随时查看已关注的店铺列表、查看粉丝数与在售数、进入店铺或取消关注。整个交互无需登录外部服务,完全在站内闭环。

核心设计是幂等与并发安全。关注表用 UNIQUE(user_id, merchant_id) 约束保证同一用户对同一商家只能存在一条关注记录;插入时若 UNIQUE 冲突(并发重复点击或网络重试),通过捕获 ER_DUP_ENTRY 错误码将失败视为成功,前端可以放心重试而不会产生脏数据。取关则更简单:DELETE 不预检,直接执行 SQL,affectedRows 等于 0 时也返回 ok,前端无需判断成功失败。这种「幂等返回 ok」的设计哲学在后续 API 设计中反复复用,既简单又抗网络抖动。粉丝数不冗余存字段,每次走实时 SELECT COUNT(*) FROM shop_follows WHERE merchant_id,虽然看似低效但量级小且一致性强,日后日 PV 起来再上 Redis 缓存。

店铺主页与详情页店铺区都走 SSR 直出。详情页 Server Component 内一次 JOIN users 表拿到商家名与头像,再单独 SELECT COUNT 粉丝数,客户端 FollowShopButton 仅负责点击交互,首屏零额外 API 调用,SEO 友好且无白屏闪烁。店铺主页 /shop/[merchantId] 复用商品卡组件,与 /products 列表视觉一致,店招区显示粉丝、在售数与入驻时间,FollowShopButton 在 hero 变体下用品牌色填充做大按钮,在详情页 block 变体下用白底品牌色描边做小按钮,同一组件双形态降低维护成本。未登录用户点关注按钮时,沿用 Day 20 改造的 ConfirmDialog 组件引导去登录页,而不是用浏览器原生 confirm 弹窗,确保自动化测试与无障碍工具都能正常工作。

「我的关注」tab 卡片化运营,展示已关注店铺的头像、店名、粉丝数、在售数与关注时间,每张卡都有「进入店铺」与「取消关注」两个动作,取消关注通过 ConfirmDialog 二次确认避免误操作,空状态文案引导用户去逛逛。第三阶段「营销 + 推荐」至此四件套完整闭环:Day 19 AI 推荐解决发现效率,Day 20 满减包邮解决价格促销,Day 21 限时秒杀解决时间营销,Day 22 店铺关注解决社交沉淀。下一步进入第四阶段「邀请分销」,从站内营销延伸到用户增长。
OpenClaw—AI研究