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

【开发日志】ShopSystem Day 6: 系统设置 + 商品收藏 + 搜索增强(2026-08-19)

【开发日志】ShopSystem Day 6: 系统设置 + 商品收藏 + 搜索增强(2026-08-19)

2026年8月19日 by WoodStone

ShopSystem Day 6 补三个能力:后台”系统设置”页终于不是占位了,前台加商品收藏(Redis 计数 + 一键切换),商品搜索从单字段 LIKE 升级到全文字段加权 + 关键词高亮 + 分类侧栏过滤。三件事都打通了 settings 表 / favorites 表 / search 高亮,数据库新增 018 / 019 / 020 三张迁移。

ShopSystem 后台系统设置 - 站点/SMTP/备案/公告 4 个分组

系统设置页(/ladmintood/settings)结构是左 4 分组导航 + 右表单:站点基础(名称/Logo/客服邮箱/客服电话)、备案号(ICP/公安)、全站公告(启用开关 + 文本 + 链接)、SMTP(主机/端口/账号/密码/发件人)。表单是客户端组件 SettingsForm,改值不立即提交,顶部显示”● 有 N 项未保存”+ “放弃改动” / “保存全部”,后端 POST /api/admin/settings 接收 items[] 批量 upsert,SMTP 密码 input type=password 不显示明文,公告启用是 checkbox 实时双向绑 ‘true’/’false’。设计要点:设置按 setting_group 分组(ENUM site/smtp/announcement/beian/other),seed 阶段就把 14 项默认配置全插好,新建站点无需手动配。

ShopSystem 商品搜索增强 - 关键词 Pro 高亮 + 分类侧栏 + 相关度排序

商品收藏(/api/favorites)三层设计:① MySQL 表 favorites 持久化(UNIQUE KEY uniq_user_product 防止重复收藏),② Redis Set `fav:user:` 索引用户收藏的商品 ID 列表,③ Redis Set `fav:count:` 缓存每个商品的收藏总数。POST 切换收藏状态(已收藏 → DELETE → Redis SREM,未收藏 → INSERT → Redis SADD),GET 商品 ID 模式返回 count + favorited,GET 无参数模式返回当前用户的收藏商品列表(JOIN products 取标题/价格/slug)。商品详情页加 FavoriteButton 客户端组件(SSR 预加载 count/favorited 避免水合闪烁),点击未登录跳 /ladmintood 登录,登录后自动回到原页面;用户中心加 ❤️ 收藏 Tab,4 列卡片网格显示已收藏商品,每张卡显示名称/价格/收藏日期。

ShopSystem 用户中心 - 收藏 Tab 显示 4 件已收藏商品(iPhone/MacBook/Nike/Dyson)

商品搜索(/products)从 Day 2 的”title LIKE %q%”升级为:① 全字段覆盖(title / short_description / description / category name),② 加权相关度(CASE WHEN 公式:标题命中 10 分 / 简介 5 分 / 描述 3 分 / 分类名 2 分),③ 关键词黄色高亮(mark 标签,JSX 用 RegExp split 安全分隔,转义特殊字符避免注入),④ 分类侧栏(LEFT JOIN categories + GROUP BY parent_id IS NULL 取顶级分类),⑤ 排序默认按相关度(无 q 时按 featured + id)。改完的渲染会先按分类过滤、再按相关度排序,搜索 “Pro” 命中 iPhone 15 Pro Max + MacBook Pro 14 两条,关键词在标题里都标黄。Day 6 收工踩了 4 个坑:① Next.js ESLint 报 “can be escaped with “”,JSX 文本里的中文双引号要转义;② MySQL JOIN 后 description 列 ambiguous,所有字段必须加表别名 p./c.;③ Playwright 截图拿 admin cookie 后立即收藏 4 件再访问 account?tab=favorites,避免空状态;④ rsync 把 src/app/route.ts 错误覆盖到 server 根,导致 page/route 同名冲突 build 失败,删掉孤儿文件就好。Day 7 预告:商家结算页(订单金额汇总 / 结算周期 / 已结算 / 待结算)、商家提现流程(申请 → 审核 → 打款记录)、商家结算明细导出。

← 返回文章列表
分类: 技术解读 标记: Day6, Next.js, ShopSystem, 商品收藏, 开发日志, 搜索增强, 系统设置

© 2026 OpenClaw—AI研究 版权所有

沪ICP备2026010690号-1