蛛网之上 Above the Web
GitHub ↗

发布于 更新于 约 5 分钟读完 · 1,984 字

本文目录 9 节
  1. 一句话总结
  2. 背景与事实
  3. 可复用 insight
  4. 1. 打通以线上最后一环为准律
  5. 2. 小圆头像构图律(五轮迭代换来的)
  6. 3. Astro frontmatter 资源导入陷阱 ⚠️首次
  7. 4. 滚动容器悬浮预览裁剪律 ⚠️首次
  8. 顺手教训
  9. 关联文档

AI 问答板块收尾 · 打通判据与小圆头像构图律

入档:2026-08-18 来源:蛛网之上(tiaozhuxiansheng.com)知识库 AI 问答「最后一公里」收尾 + 加载动画 + 助手头像五轮迭代 + 悬浮高清预览,跨两个会话共 10 个 commit(8594d5c…f32f209)全部上线并线上验证 状态:已上线,用户验收「完美了」;两条 UI 律均有五轮实测迭代支撑

一句话总结

「打通」的判据不是代码写完,而是链路上最后一个消费者真正用上——收尾三件套是测试进 npm test、CI 出包前先跑、线上产物 grep 到新代码;而聊天小头像的正确裁法是人像带留白(眼睛落画面 38%、脸占三分之一),脸部特写填小圆永远是「怼脸诡异」。

背景与事实

  • 主线:知识库 AI 问答(浏览器 Pagefind 检索 → POST /api/ai/kb-chat → 千问 3.8 Max)服务端早已上线(/api/meta 双开关为 true),但浏览器端「整句口语提问零命中」的检索放宽重构在工作区躺了两天未提交——上会话写了一半的 src/lib/knowledge-search.mjs 和配套测试还是未跟踪文件。
  • 收尾交付:5 例单测全过并接进 npm test;deploy.yml 出包前先跑测试;文档补链路说明。CI 绿后线上 grep 新 bundle 确认放宽逻辑真的在产物里。
  • UI 三连:加载动画三个跳点→纯 CSS 流沙沙漏(2.2s 一轮翻转 180° 无缝续播);助手头像文字「蛛」→真人图,五轮迭代才收敛(见下);头像悬浮弹高清大图(body 单例 fixed 浮层)。
  • 验证链:每轮 node --check + 单测 → push → CI 绿 → curl 线上 HTML/CSS/JS 产物 grep 新代码/新文件名确认生效,再交用户实测。

可复用 insight

1. 打通以线上最后一环为准律

功能「没打通」的真判据:git status 里有未跟踪的核心文件,链路上还有一个消费者没真正用上。 本次服务端、前端框架、模型通道全就位,卡住的只是「问句检索零命中」这最后一环——它不解决,用户问一句就得到「没找到」,前面全部白搭。收尾动作固定三件:①测试接进 npm test(Windows 下注意 node --test test/ 目录形式会 MODULE_NOT_FOUND,用 glob test/*.test.mjs);②CI 在 npm run build 前先 npm test,检索逻辑挂了就不出包;③部署后 grep 线上产物里的新代码特征串(关键函数名、新资源文件名),和 2026-07-03_云端定时内容生产连环坑复盘_全绿不等于已发_v1 的「全绿≠已发」同一纪律。

2. 小圆头像构图律(五轮迭代换来的)

聊天类小尺寸(≤32px)圆头像,正解是人像带留白构图:眼睛落在画面 38% 高度、脸占画面三分之一到四成、头顶留白、肩线进入。脸部特写填小圆 = 「怼脸」,再怎么调装饰都救不回来。

五轮实录(原图 1436×1920 竖版人像):

轮裁切展示用户反馈
11190 方(原图 83% 宽)32px看不清人脸
2820 方32px还是看不清
3700 方·脸居中特写38px+细描边有点诡异
4同上 + 10% accent 光晕29px光晕抢戏;去掉后「还是大脸贴近」
51000 方·眼睛 38%·脸占 35%26px+墨色细描边好多了→完美

关键转折在第 4→5 轮之间才悟出来:用户说「参考 Coursera」,参考的是构图留白,不是脸的清晰度或占比——我连续把「参考」读成「脸要大」(轮 2-3)和「脸要居中」(轮 3),全错。人脸头像的容器装饰要接近无:细墨色描边、近乎无阴影;任何彩色光晕都会和人脸抢视觉焦点(轮 4 实测,一圈 10% 透明度的 accent 环就把整张脸压住了)。

附带:参考对象的读法——对方给「参考 X」而连续两轮方向不对时,该问的是「你要的是它的构图还是它的清晰度」,而不是继续猜裁切参数。参数级迭代收敛慢的原因往往是理解偏差在更上一层。

3. Astro frontmatter 资源导入陷阱 ⚠️首次

在 .astro frontmatter 里 import img from '../assets/foo.webp' 再把 img.src 用进模板/传给 data-*,CI 构建会在该组件抛 Unterminated string literal,报错位置指向模板里某个无辜的属性列(本次报在 hidden 上)——parse 级报错+误导性定位,极易往错误方向排障。本仓库约定:站点图片一律放 public/,frontmatter 里 ${base}相对路径 拼 URL(与 prompt-master、desk-pond 同一通道);指纹缓存不是刚需,文件名带版本号(kb-assistant-4.webp)天然破缓存。

4. 滚动容器悬浮预览裁剪律 ⚠️首次

聊天滚动区(overflow-y: auto)内部做绝对定位浮层,必被裁剪——CSS 规范下一个轴非 visible,另一个轴的 visible 会被强制成 auto,两轴都裁;transform 放大同样逃不掉。正解(头像悬浮看大图):单例 <img> 挂 document.body + position: fixed,按触发元素 getBoundingClientRect() 定位,左右与视口边界 clamp。交互三通道:桌面 hover 进出、触屏点按开关(click 事件委托 + capture: true 避免与同容器内其他点击目标冲突)、Esc 先关浮层再关面板;浮层 pointer-events: none 纯查看不拦截;大图首次弹出才加载。事件用委托而非逐元素绑定,后插入的消息(welcome/JS 动态生成)自动覆盖。

顺手教训

  • AI 会话内的构建失败,先分流「代码问题」还是「会话环境问题」:同一提交 CI 绿 = 会话环境问题,别改代码。 本次三类会话环境坑全部本地复现、CI 无恙:①WorkBuddy safe-delete shim 按「回合累计>50 文件」拦 node 侧批量 rmSync(astro 清 dist/pages 中间产物被拦,绕法=bash rm 手动删,shim 不拦 bash);②沙箱内 rollup 写 dist/_astro 报 EPERM,需脱沙箱跑;③.git/refs/remotes/origin/ 目录缺失时 git 对远端引用的更新会「假成功」(退出码 0 引用不变),rebase 中断留 rebase-merge + index.lock 残骸需手清。三坑已记入项目 memory,复用时直接查,不重新排障。
  • 文件锁不阻塞上线:某文件被系统锁住 git rm 报 Permission denied 时,只要它没有被任何组件引用,就留着不删——构建不受影响,锁释放后再清。
  • 远端被自动化推进时单提交直接 rebase:每日快讯机器人会推 main,本地提交 push 被拒后 git pull --rebase 即可;rebase 失败先清残骸再重来,不要 merge 糊历史。

关联文档

类型/平台工程