demoSpace

首页搜索 v1

2026-08-05 工具vibe-coding

今天做了什么

  • 首页 hero 加「命令台」搜索条（mono + 荧光绿光标 + > 提示符），回车即搜，内联 5 条结果卡片（标题 / 来源色点 / 摘要 / 链接新标签）。
  • 新增 site/functions/api/search.ts（代理火山引擎 WebSearch，Key 只在服务端）与 search/status.ts（额度查询）。
  • KV 计数：月度 500 熔断 + 每 IP 每日 30 次；首页显示「本月已用 X / 500 · 火山引擎驱动」。
  • 本地联调：pnpm dev:search 起内存计数代理，Astro dev 自动指向 localhost:8787；生产同源 /api/search。
  • 构建 65 页通过；Playwright 桌面 1440 / 移动 390 QA 通过（5 条结果、计数 0→1、无溢出、无报错）。

过程与坑

  • 火山引擎没有「查剩余额度」的 API，只能服务端自计数（只统计本站），控制台才是权威。
  • 浏览器直连会暴露 Key，必须服务端代理。
  • 本地联调踩坑：Astro dev 页面（4321）跨域请求代理（8787）被浏览器拦，给代理补了 CORS 头；生产同源不受影响。
  • 本机无系统 Node，代理/构建都用 Codex 内置运行时。

v1.1 打磨（同日）

  • 组合 redesign-existing-projects / emil-design-eng / web-design-guidelines 审计并重做搜索区：清除按钮（×）、加载 spinner、?q= 深链（刷新/分享可还原结果）、Esc 清空、结果 40ms 错峰入场、额度行显示剩余次数、tabular-nums、hover 只对精确指针生效。

  • 坑：搜索完成后清除按钮没恢复显示（runSearch 开头隐藏后未还原）——Playwright 抓到，抽成 syncClear() 修复；Esc 需输入框聚焦（监听挂在 input 上），符合常规交互。

  • 构建 67 页通过；Playwright 桌面/移动全流程 QA 通过。

  • v1.2 位置调整：搜索从 hero 移到「运转流水线」之后的独立「全网搜索」小节（# 全网搜索 + 火山引擎驱动 · 每月 500 次免费），搜索条/结果拉满版心；hero 恢复纯身份区。理由：首页叙事「我是谁 → 怎么运转 → 能做什么 → 内容」更顺，搜索不用滚太久且不抢标题。构建 67 页 + Playwright QA 通过。 用户调整：搜索不进顶栏——hero 下新增「本页大纲」（运转/全网搜索/拼豆/施工/作品/记录/工具/收藏/技能 9 项锚点）；右侧 Marginalia 的时间流/待办滚动 ticker 删除（rail-data 同步瘦身）；「本页大纲」最终放入右轨原 ticker 位置（竖排 9 项锚点、仅首页、右 aside 去掉 aria-hidden 保证可访问）。构建 67 页 + QA 通过。

上线（同日）

  • CF 后台配置完成（WEB_SEARCH_API_KEY secret + KV namespace demospace-search-count 绑定 SEARCH_COUNT，KV 在新版控制台 Storage & Databases 下）；master 合并 codex/home-search-v1 并 push（108532a..051c36f）。
  • 线上验证：首页 200；/api/search/status 返回 quota{used:0}；/api/search?q=Cloudflare Pages 返回 5 条（282ms），计数 1/500。上线成功。

上线后加固（同日）

  • 用户反馈「搜索服务暂时不可用」：复现排查（真实 Chrome + shell 连发）线上接口均 200，判定为部署窗口期/旧缓存兜底文案。
  • 顺手加固：KV 计数改为 best-effort（try/catch 包裹，计数失败不再让搜索 500）；本地代理验证通过后重新推送。

下一步

  • 在 Cloudflare 后台配 WEB_SEARCH_API_KEY 环境变量 + KV namespace 绑定 SEARCH_COUNT（步骤见 site/functions/README.md），push 即上线。
  • v2 候选：时间/权威过滤 chips、站内全文搜索（D1）、图片搜索、Turnstile。