Files
ttstd-infinite-canvas/web/index.html
AetherNo2332 9dd8c954d0 fix(web): 首屏 favicon - 不再先闪内置品牌图标 (#570)
Original-Commit: d049f7014d49e93ab0e6aa8b7e715d5155b94dc0
fix(web): 首屏 favicon - 不再先闪内置品牌图标

index.html 静态声明 /logo.svg 作 icon,而 favicon 由 use-appearance-store 在解析出外观后写入
(link[rel~="icon"] + appearanceLogoURL)。自定义品牌部署于是会先闪一下内置 logo。

换成空占位 <link rel="icon" href="data:," />:外观系统照旧覆盖它,占位只是为了不让浏览器去
请求 /favicon.ico(那是一条 404)。代价是外观接口不可用时标签页没有图标,这是有意的取舍。

新增源码级守卫用例(上游原态 1 pass/1 fail,改后 2 pass)。
2026-09-21 09:37:20 +08:00

72 lines
2.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN" class="font-sans">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="AI 影视与短剧创作工作台" />
<!-- 不写内置品牌资源:首屏必须品牌中性,favicon 由 use-appearance-store 解析出外观后写入。
空 data URL 只是为了不让浏览器去请求 /favicon.ico(那会是一条 404)。 -->
<link rel="icon" href="data:," />
<title>正在加载</title>
<style>
/* Fix layer order before production chunks can register utilities ahead of base. */
@layer theme, base, components, utilities;
html,
body {
margin: 0;
background: #ffffff;
}
#root:empty {
min-height: 100vh;
}
#root:empty::before {
content: "";
position: fixed;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
background: rgba(255, 255, 255, 0.84);
border-radius: 999px;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08);
animation: appearance-bootstrap-pulse 1.8s ease-in-out infinite;
}
#root:empty::after {
content: "";
position: fixed;
left: 50%;
top: 50%;
width: 82px;
height: 82px;
margin: -42px 0 0 -42px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-right-color: transparent;
border-radius: 999px;
animation: appearance-bootstrap-orbit 2.8s linear infinite;
}
@keyframes appearance-bootstrap-pulse { 0%, 100% { opacity: .62; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes appearance-bootstrap-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
#root:empty::before,
#root:empty::after {
animation: none;
}
}
</style>
<script>
try {
var s = JSON.parse(localStorage.getItem("infinite-canvas:theme_store") || "{}");
var t = s.state && s.state.theme === "dark" ? "dark" : "light";
document.documentElement.classList.toggle("dark", t === "dark");
document.documentElement.style.colorScheme = t;
} catch (e) {}
</script>
</head>
<body class="bg-background text-foreground antialiased" style="background:#ffffff">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>