xiaoxia-saas/apps/web/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 标题字体（#2001 / #font-selection 修复）：Google Fonts 中文字体完全延迟加载
         关键设计：所有 Google Fonts 子资源（CSS + 字体文件）必须在 window load 之后才发起请求。
         - 原因：fonts.googleapis.com/gstatic.com 在境内访问间歇性挂起，若在关键路径内
           （<link rel=stylesheet>/preload/preconnect 等任何会被计入文档子资源完成的形式），
           会拖死 window.load 事件，导致 Playwright page.goto 默认 waitUntil:'load' 90s 超时，
           同时真实用户首屏也可能因等字体而白屏。
         - 实现：head 里完全不出现 Google 域的 <link>，首屏用系统字体兜底
           （font-family fallback 链：Noto Sans SC → PingFang SC → Microsoft YaHei → sans-serif）；
           页面 load 后通过 requestIdleCallback 动态注入 <link rel=stylesheet>，字体异步加载生效。
         - noscript 降级：JS 禁用时仍然阻塞加载（可接受，这类用户极少）。
         - 参考：运维 2026-10-14 E2E 失败根因分析，#2300 preload/media=print 方案不治本，
           preload 与 media=print 样式表仍计入子资源完成，会阻塞 load 事件。 -->
    <title>小虾 SaaS - 自动化视频剪辑平台</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <!-- Google Fonts 延迟注入：必须在 main.tsx 之后，用独立 <script>（非 module）在页面解析
         完成时注册 load 回调；window.load 触发后再 requestIdleCallback 插 <link>，
         确保字体请求不进入首屏关键路径，也不阻塞 Playwright load 等待 -->
    <script>
      ;(function () {
        var FONT_HREF =
          "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;700;900&family=ZCOOL+KuaiLe&family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&family=Ma+Shan+Zheng&family=Long+Cang&family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&display=swap"
        function inject() {
          if (document.getElementById("__gfonts_link")) return
          var l = document.createElement("link")
          l.id = "__gfonts_link"
          l.rel = "stylesheet"
          l.href = FONT_HREF
          l.setAttribute("data-lazy", "1")
          document.head.appendChild(l)
        }
        function schedule() {
          if ("requestIdleCallback" in window) {
            requestIdleCallback(inject, { timeout: 2000 })
          } else {
            setTimeout(inject, 500)
          }
        }
        if (document.readyState === "complete") {
          schedule()
        } else {
          window.addEventListener("load", schedule, { once: true })
        }
      })()
    </script>
    <noscript
      ><link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;700;900&family=ZCOOL+KuaiLe&family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&family=Ma+Shan+Zheng&family=Long+Cang&family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&display=swap"
    /></noscript>
  </body>
</html>