perf(website): 图片管线 + 收尾 SEO/GEO 技术项

[Leaderxin]

补 #24 合并时漏掉的部分。

你合并 #24 时分支头停在 5fc1d59，而后面两笔（截图搬家、图片管线 + 技术项）是在合并之后才推的，所以都没进 master —— 而且 PR 一关，pull_request 触发器就不再理会那个分支，两次提交既没进主干也没跑过 CI。这个 PR 把它们补上。

安装包瘦 1.9MB

public/ 是 Vite 的静态目录，会被整份复制进 dist/，而 tauri.conf.json 的 frontendDist 就是 ../dist —— 所以 public/screenshots/ 那 1.9MB 一直在被打进桌面安装包，而应用代码里一处都没引用。搬到仓库根后 dist/ 从约 3.3MB 降到 1.4MB。

public/qrcode.png 留在原地不动：StatusBar.vue 里写死了 raw.githubusercontent.com/.../master/public/qrcode.png 作为二维码的远程地址，本地那份是兜底 —— 它确实被应用用着。

README 的 13 处引用同步改了路径，必须同一个提交：README 由 github.com 按仓库相对路径渲染，文件一挪就全变破图。

图片管线

截图原图是 2057px PNG，一张 200–330KB；现在出 WebP 三档（600/1100/2057）配 <picture> + srcset，落地通常 44–68KB，降约 75–80%。同时出 favicon 32/180、品牌图标 128（原先 28px 的导航图标挂着 512px 的 203KB 原图）、1200×630 社交卡片。

社交卡片是渲染出来的而不是缩放截图：截图比例 1.40:1，平台按 1.91:1 取景会把顶部那排指数切掉。

产物提交进仓库，所以 CI 不需要浏览器 —— 为十几张营销图给每次 npm ci 拉一个 sharp 那样的原生依赖不划算。代价是脚本依赖本机 Chrome（CHROME_PATH 可覆盖），只有换截图时才需要手动跑 npm run site:images。

SEO/GEO 收尾

• robots.txt 与 llms.txt 从本站删除，唯一一份放进新建的 Leaderxin/leaderxin.github.io。协议规定两者都只在域名根被读取，放在 /quant-desktop/ 下等于没有 —— 实测 https://leaderxin.github.io/robots.txt 之前是 404。那份现在已生效，顺带补上了根域名的 404 页。删掉本站副本是为了不留下两份必然漂移的文件。
• sitemap.xml 改由脚本按实际页面生成，lastmod 取自 git log。手维护的话加页面必然漏登记，而失败是静默的 —— 没有人类链接指向 sitemap 去看它。
• 引用校验扩展到所有页面并覆盖 srcset（描述符写错浏览器只会静默降档，看不出来）。
• H1 从只有品牌名改为「QuantDesktop 免费开源的 A 股桌面看盘工具」；description 从 99 字压到 75 字；JSON-LD 补 sameAs。
• 新增 website/404.html。项目站的 404 必须用站点绝对路径：GitHub Pages 会对任意深度的失效路径返回它，相对链接会以那条坏 URL 为基准解析。

三个实测踩出来的坑

写进脚本注释了，都是不看不知道的：

1. file:// 下 canvas 会被 taint，toDataURL 直接抛 SecurityError —— 要 --allow-file-access-from-files。
2. 目标宽 > 源宽时必须整个跳过，不能 Math.min 后仍按目标宽命名。 settings-index.png 只有 1298px 宽，早期实现产出 1298px 的图却叫 -2057.webp，而 HTML 里写着 2057w —— 描述符撒谎会让浏览器算出错误的密度。现在规则是「文件名永远等于真实宽度」，源图比所有目标都小的（行情条那两张 344×59）就不出 WebP。
3. background-clip: text 会静默吃掉溢出元素框的字形 —— 渐变只画在框内，溢出部分没有背景可裁，于是 color: transparent 生效、字直接消失。社交卡片的「QuantDesktop」被截断就是这个，配 width: max-content 修掉。

验证

• npm run site:images 产出 25 个 WebP，逐个解文件头确认文件名与真实宽高一致（25/25）
• 无头 Chrome 实测候选选择：500px 视口下所有图落到 600 档，1440px 下轮播（渲染 1070px）选 1100 档 ✓
• 引用校验：3 个页面、全部 src/href/srcset 解析通过
• JSON-LD 可解析，且 FAQ 答案与页面可见正文逐条对得上
• vue-tsc + 149 个单测全绿；dist/ 实测 1.4MB

一处没查清的地方：1440px 下几张懒加载的功能图会选中比所需大一档的候选（286px 的槽位拿了 1100px 的）。sizes 确实被正确解析（naturalWidth 的折算值印证），但 Chrome 的选择结果偏大。核心收益来自格式转换，这一档是额外的，没有继续追。

合并到 master 会自动触发 pages.yml 部署，不需要手动操作。
合并前请确认 CI 的 build job 通过 —— 它会跑 site:assets，页面里引用写错会直接失败。