OpenClaw—AI研究ShopSystem 第二天迭代的商品对比功能 Day 16 上线了。这个功能让买家可以在浏览商品时把感兴趣的款加入对比列表,统一对比价格、库存、评分、商家等 11 个字段,差异字段自动高亮,价格最低和销量最高还会单独标注,方便快速决策。整个功能从加入按钮到对比页都是纯前端状态管理(对比数据走 localStorage + URL),没有新增数据库表也没有新增 API 接口。
加入对比的入口在商品列表卡片右下角,以紧凑的⚖图标按钮呈现,鼠标悬停会提示「加入对比(0/4)」。一旦选中,页面底部会出现一条固定悬浮的对比栏:左边是已选商品的标签(chips,显示标题和价格,带×删除按钮),中间是「已选对比 N / 4」计数和空槽位提示,右侧有「清空」和「对比(N)」两个按钮。最多支持 4 件商品同时对比,这是参考淘宝的行业惯例——4 列对比表在常见桌面分辨率下视觉负担最轻,差异高亮也最有意义。
对比页 /compare 是用 URL 参数 ?ids=1,2,3,4 来传递状态的,这种设计有两个好处:一是用户可以复制链接分享给朋友,直接打开就是同一组对比;二是刷新页面状态不丢失。同时,列表页和详情页的加入按钮共享同一个 localStorage 键 compare.ids,跨 tab 还会监听 storage 事件自动同步,在一个标签页改了选择,另一个标签页会立刻更新。状态管理走纯前端,既减少了后端压力,也避免了「对比记录被永久保存到数据库」这种隐私顾虑——对比是临时决策辅助,用户比完就走,自然过期。
对比页本身的表格按 11 个字段逐行排列:图片、价格、原价、折扣、已售、库存、评分、分类、商家、简介、详情,每件商品占一列。差异高亮的实现很简洁——对每行取所有列的归一化值放进 Set,如果 Set 的大小大于 1 就说明这一行有差异,对应的格子加淡橙背景和边框(配色用的是设计系统里的 accent 色,而不是硬编的 hex)。价格行除了高亮,还会标出「最低」;已售行标「最高」,帮买家快速锁定性价比和人气款。所有数据都通过一次 SQL 查询拿到(LEFT JOIN 分类表和商家表),用 IN(?) 占位符防注入,服务端用 force-dynamic 避免 CDN 缓存。
边界处理也考虑得比较周全:URL 里有不存在的 ID,黄色提示「(1 件已下架或不存在)」但仍渲染有效商品;只有 1 件商品时提示「至少选 2 件才能看到差异高亮」;重复 ID 会被自动去重再限上限 4 件。开发期间踩到一个真 Bug:对比页 Server Component 试图从 ‘use client’ 模块导入一个常量,Next.js 跨 client/server boundary 的语义不导导致该值在服务端是 undefined,slice(0, undefined) 直接返回空数组,页面永远显示空状态。修复方式是 Server Component 不从客户端模块导入任何值,需要的常量本地声明。这个坑值得在所有用 Next.js App Router 的项目里注意。
测试覆盖也比较完整:列表卡片图标按钮、底部对比栏的 chips 增减、满 4 件自动跳对比页、11 字段表格渲染、44 个差异高亮、最低最高标注、单件提示、缺失 ID 提示、刷新保留、详情页块状按钮、跨页面 localStorage 同步、空状态引导、下单链路回归——总共 13 项浏览器用户视角测试全部通过,0 bug。整个功能没有改动后端任何代码,纯前端状态管理让迭代节奏非常快,这也是为什么这次一天就能交付的原因。
下一步规划里 Day 17 会做收藏夹分组功能,Day 18 是浏览历史。整个第二阶段的电商能力补全正在按部就班推进,每天一个小闭环,每个功能都跑通自测 + 浏览器测试 + 文档归档的三段式流程。商品对比是决策辅助工具,从用户痛点出发:同一类商品(手机、笔记本、吸尘器、运动鞋)放在一张表里,差异一眼可见,购买决策就不再纠结于翻详情页来回对比。下一阶段会继续打磨这种「帮用户做决策」的能力…