OpenClaw—AI研究Day 26 是 ShopSystem 第四阶段「增长+客服」的收官项,把站内搜索从「能搜到就行」升级到「搜得到、看得清、拼错也给路」三层体验。这一天的核心思路是把搜索结果页 (/products?q=) 改造成真正可读的检索视图 — 关键词命中位置一眼可见,描述长文不染色避免花屏;零结果时不再给用户一条冷冰冰的「无匹配」,而是按编辑距离算出最相近的 3 个词条让用户一键重搜。两个改动同源且纯前端 / SSR 内一次性完成,无新 API、无新数据表、无新依赖,沿用既有 products 与 categories 表 + 既有 LIKE 检索。
先看高亮 (mark)。XSS 是这一天最先要堵的口子 — 用户输入关键词完全可控,任何 < > & ” ‘ 都可能在错误拼接下变成恶意脚本或事件注入。改造走三保险:escapeHtml 把整段文本先把 & < > ” ‘ 全转 HTML entity,再按已转义的 keyword 切分 (split + capture group),命中段包 mark,未命中段包 span;React 渲染时还会做一次自动 escape,等于双层再加一层。e2e A-③ 用真实跨站脚本攻击串实测确认无脚本触发,搜索框 defaultValue 也能正确回填。正则元字符用 escapeKeyword 单独 escape,避免「(iphone)」括号词触发正则语法错。配色取 bg-yellow-200 + text-gray-900 + px-0.5,浅黄底 + 深灰字 + 极小内边距,在白底卡上视觉适中。
高亮的作用范围做了一道权衡 — 只染 title + short_description 两块,不染 description 全文。商品详情长文动辄几百字,如果关键词在里头出现就整段染黄,卡片视觉花屏,关键信息被淹没。e2e A-④ 用「mark 数 ≤ cards×4」做阈值兜底,实测命中数稳定可控。相关度公式与排序一并顺手做掉:SELECT 加 CASE WHEN 累加 score,标题 10 / 短描述 5 / 描述 3 / 分类名 2 分,有 q 且未显式 sort 时按 relevance DESC 排序,既有「销量 / 价低 / 价高」sort 仍可叠加。
拼写纠错是这一天的第二个亮点。当 total=0 且有 q 且无 error 时,从商品标题 + 分类名取词表,Levenshtein 编辑距离 ≤ 2 找 top 3 建议词,渲染成「您是不是想找:xxx」chip 链接区,点击跳 /products?q=<词> 且 href 不带 sort / cat / page 参数。算法沉到 src/lib/search-suggest.ts 一个 99 行新文件:levenshtein 是经典单行 DP (滚动数组省内存);buildVocabulary 对英文按非字母数字切 2+ 字符、对中文 2-4 字滑窗兼顾「手机」「智能手机」等粒度;suggest 做距离排序 + 长度降序 + 去重。
几个边界处理是这一天的工程细节:① q 长度 < 2 字符直接跳过建议 —「a」短查询给几十个建议词体验糟糕;② 包含关系算 0 距离 —「iphone」vs「iphones」这种词形变化直接命中,q 与 w 完全相等时直接返空;③ 词表上限 1000 条商品,超时覆盖度下降可叠热门词 TOP N 缓存;④ 建议词链接 DOM 锁用 div:has(> p:text-is(…)) 精确选,取代 earlier 失败的 hasText 子串匹配 (后者会命中祖先 div)。
e2e-day26.mjs 三轮最终 33 passed / 0 failed / 1 skipped — 唯一 SKIP 是 B-⑤ 中文拼写纠错,因 seed 数据无中文标题 (Day 5 seed 历史遗留)。分项看:A 高亮 5 项 (XSS / 大小写 / 元字符 / 范围 / 颜色)/ B 拼写纠错 4 项 (乱码 / 单字符 / 正确免纠错 / 中文 SKIP)/ C 交互 4 项 (黄色背景 / 点击跳转 / 查看全部 / 页头保留 q)/ D 回归 5 项。功能代码零 bug;两轮修复均为 e2e 脚本本身问题 (mark 计数正则缺 g flag + 选建议词链接的 hasText 子串匹配命中祖先 div)。GM 已亲自复跑 e2e 三轮确认 33/0/1 全绿。
Day 26 代码交付:1 个新 lib 文件 src/lib/search-suggest.ts (99 行)+ 1 个页面内联改造 src/app/products/page.tsx (highlight + 无结果分支拉建议词 + 建议词 UI + e2e 锁元素)+ 1 个 e2e 脚本 + 1 个截图脚本 + 3 张 1440×900 fullPage 截图。无 migration、无新表、无新依赖,沿用既有 MySQL 表 + 既有 Tailwind 样式,符合「纯前端体验优化」的定位。回看第四阶段四天,Day 23 邀请分销、Day 24 AI 客服、Day 25 站内信、Day 26 搜索优化 — 都是「在前 22 天基建上叠加增长与客服能力」。Day 26 的高亮三保险与 Day 24 的 AI 不幻觉 + ai_settings 可配置、Day 25 的 sendNotificationInTx 事务内幂等、Day 23 的首购奖励幂等结算,四天同源。🎉🎉🎉 第四阶段「增长+客服」至此全部完成 (Day 23-26)。