fix(cloudflare): remove node-only site icon route

Author: KuekHaoYang

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.9.1 - 2026-04-12
+
+- 移除仅支持 Node.js 的 `/api/site-icon` 路由，避免 `next-on-pages` 因非 Edge 路由中止构建。
+- 站点图标改为由服务端布局直接解析，导航栏和播放器页继续显示运行时配置的图标。
+- PWA manifest 回退为静态图标，确保 Cloudflare Pages、Docker 和本地构建链路一致可用。
+
 ## 4.9.0 - 2026-04-12
 
 - 设置页新增“版本与更新”卡片，直接显示当前版本、最近更新内容和检查结果。
@@ -11,4 +17,3 @@
 - 站点图标改为支持运行时配置，Docker 镜像无需重新构建即可替换。
 - 扩展播放器默认视口，减少桌面端播放器黑边。
 - 修复 Android WebView 中 Cast SDK 判定以及全屏和画中画相关兼容性问题。
-

README.md

@@ -391,7 +391,7 @@ NEXT_PUBLIC_SITE_DESCRIPTION=专属视频聚合播放平台
 
 ## Docker 图标自定义
 
-Docker 预构建镜像支持在运行时替换图标，无需重新构建镜像。该配置会同时作用于顶部 Logo、浏览器 favicon 和 PWA 图标。
+Docker 预构建镜像支持在运行时替换图标，无需重新构建镜像。该配置会作用于顶部 Logo 和浏览器 favicon；如果你还要同步替换安装后的 PWA 图标，请直接覆盖仓库中的 `public/icon.png` 后重新构建镜像。
 
 ### 可用环境变量：
 

app-release.json

@@ -4,8 +4,18 @@
     "name": "KVideo",
     "branch": "main"
   },
-  "currentVersion": "4.9.0",
+  "currentVersion": "4.9.1",
   "releases": [
+    {
+      "version": "4.9.1",
+      "publishedAt": "2026-04-12",
+      "title": "修复 Cloudflare Pages 构建失败",
+      "notes": [
+        "移除仅支持 Node.js 的 /api/site-icon 路由，避免 next-on-pages 因非 Edge 路由中止构建。",
+        "站点图标改为由服务端布局直接解析，导航栏和播放器页继续显示运行时配置的图标。",
+        "PWA manifest 回退为静态图标，确保 Cloudflare Pages、Docker 和本地构建链路一致可用。"
+      ]
+    },
     {
       "version": "4.9.0",
       "publishedAt": "2026-04-12",

app/api/site-icon/route.ts

@@ -3,19 +3,21 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { AutoSync } from '@/components/AutoSync'; // <-- 引入了自动同步组件
+import { SiteIconProvider } from '@/components/SiteIconProvider';
 import { TVProvider } from "@/lib/contexts/TVContext";
 import { TVNavigationInitializer } from "@/components/TVNavigationInitializer";
 import { Analytics } from "@vercel/analytics/react";
 import { ServiceWorkerRegister } from "@/components/ServiceWorkerRegister";
 import { PasswordGate } from "@/components/PasswordGate";
-import { siteConfig, SITE_ICON_PATH } from "@/lib/config/site-config";
+import { siteConfig } from "@/lib/config/site-config";
 import { AdKeywordsInjector } from "@/components/AdKeywordsInjector";
 import { BackToTop } from "@/components/ui/BackToTop";
 import { ScrollPositionManager } from "@/components/ScrollPositionManager";
 import { LocaleProvider } from "@/components/LocaleProvider";
 import { RuntimeFeaturesProvider } from "@/components/RuntimeFeaturesProvider";
 import { VideoTogetherController } from '@/components/VideoTogetherController';
 import { getRuntimeFeatures } from "@/lib/server/runtime-features";
+import { resolveSiteIconSrc } from '@/lib/server/site-icon';
 import fs from 'fs';
 import path from 'path';
 
@@ -61,19 +63,24 @@ async function AdKeywordsWrapper() {
   return <AdKeywordsInjector keywords={keywords} />;
 }
 
-export const metadata: Metadata = {
-  title: siteConfig.title,
-  description: siteConfig.description,
-  icons: {
-    icon: SITE_ICON_PATH,
-  },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const siteIconSrc = await resolveSiteIconSrc();
 
-export default function RootLayout({
+  return {
+    title: siteConfig.title,
+    description: siteConfig.description,
+    icons: {
+      icon: siteIconSrc,
+    },
+  };
+}
+
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const siteIconSrc = await resolveSiteIconSrc();
   const runtimeFeatures = getRuntimeFeatures();
   const videoTogetherScriptUrl =
     process.env.VIDEOTOGETHER_SCRIPT_URL?.trim() || DEFAULT_VIDEOTOGETHER_SCRIPT_URL;
@@ -89,7 +96,7 @@ export default function RootLayout({
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="apple-mobile-web-app-title" content="KVideo" />
-        <link rel="apple-touch-icon" href={SITE_ICON_PATH} />
+        <link rel="apple-touch-icon" href={siteIconSrc} />
         {/* Theme Color (for browser address bar) */}
         <meta name="theme-color" content="#000000" />
         {/* Mobile viewport */}
@@ -99,30 +106,32 @@ export default function RootLayout({
         className="antialiased"
         suppressHydrationWarning
       >
-        <ThemeProvider>
-          <RuntimeFeaturesProvider initialFeatures={runtimeFeatures}>
-            <VideoTogetherController
-              envEnabled={videoTogetherEnvEnabled}
-              scriptUrl={videoTogetherScriptUrl}
-              settingUrl={videoTogetherSettingUrl}
-            />
-            {/* 加入自动同步组件，它会在后台默默工作，我们放在 ThemeProvider 内部的最前面 */}
-            <AutoSync />
-            <LocaleProvider />
+        <SiteIconProvider iconSrc={siteIconSrc}>
+          <ThemeProvider>
+            <RuntimeFeaturesProvider initialFeatures={runtimeFeatures}>
+              <VideoTogetherController
+                envEnabled={videoTogetherEnvEnabled}
+                scriptUrl={videoTogetherScriptUrl}
+                settingUrl={videoTogetherSettingUrl}
+              />
+              {/* 加入自动同步组件，它会在后台默默工作，我们放在 ThemeProvider 内部的最前面 */}
+              <AutoSync />
+              <LocaleProvider />
 
-            <TVProvider>
-              <TVNavigationInitializer />
-              <PasswordGate hasAuth={!!(process.env.ADMIN_PASSWORD || process.env.ACCOUNTS || process.env.ACCESS_PASSWORD)}>
-                <AdKeywordsWrapper />
-                {children}
-                <BackToTop />
-                <ScrollPositionManager />
-              </PasswordGate>
-            </TVProvider>
-            <Analytics />
-            <ServiceWorkerRegister />
-          </RuntimeFeaturesProvider>
-        </ThemeProvider>
+              <TVProvider>
+                <TVNavigationInitializer />
+                <PasswordGate hasAuth={!!(process.env.ADMIN_PASSWORD || process.env.ACCOUNTS || process.env.ACCESS_PASSWORD)}>
+                  <AdKeywordsWrapper />
+                  {children}
+                  <BackToTop />
+                  <ScrollPositionManager />
+                </PasswordGate>
+              </TVProvider>
+              <Analytics />
+              <ServiceWorkerRegister />
+            </RuntimeFeaturesProvider>
+          </ThemeProvider>
+        </SiteIconProvider>
 
         {/* ARIA Live Region for Screen Reader Announcements */}
         <div

app/layout.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+const SiteIconContext = createContext('/icon.png');
+
+export function SiteIconProvider({
+  children,
+  iconSrc,
+}: {
+  children: React.ReactNode;
+  iconSrc: string;
+}) {
+  return <SiteIconContext.Provider value={iconSrc}>{children}</SiteIconContext.Provider>;
+}
+
+export function useSiteIcon() {
+  return useContext(SiteIconContext);
+}

components/SiteIconProvider.tsx

@@ -4,8 +4,9 @@ import { useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { ThemeSwitcher } from '@/components/ThemeSwitcher';
+import { useSiteIcon } from '@/components/SiteIconProvider';
 import { Icons } from '@/components/ui/Icon';
-import { siteConfig, SITE_ICON_PATH } from '@/lib/config/site-config';
+import { siteConfig } from '@/lib/config/site-config';
 import { getSession, clearSession, hasPermission, type AuthSession } from '@/lib/store/auth-store';
 import { useRuntimeFeatures } from '@/components/RuntimeFeaturesProvider';
 import { LogOut } from 'lucide-react';
@@ -20,6 +21,7 @@ export function Navbar({ onReset, isPremiumMode = false }: NavbarProps) {
     const favoritesHref = isPremiumMode ? '/premium/favorites' : '/favorites';
     const [session] = useState<AuthSession | null>(() => getSession());
     const { iptvEnabled } = useRuntimeFeatures();
+    const siteIconSrc = useSiteIcon();
 
     const handleLogout = () => {
         clearSession();
@@ -45,7 +47,7 @@ export function Navbar({ onReset, isPremiumMode = false }: NavbarProps) {
                         >
                             <div className="w-8 h-8 sm:w-10 sm:h-10 relative flex items-center justify-center flex-shrink-0">
                                 <Image
-                                    src={SITE_ICON_PATH}
+                                    src={siteIconSrc}
                                     alt={siteConfig.name}
                                     width={40}
                                     height={40}

components/layout/Navbar.tsx

@@ -3,11 +3,13 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Button } from '@/components/ui/Button';
 import { ThemeSwitcher } from '@/components/ThemeSwitcher';
+import { useSiteIcon } from '@/components/SiteIconProvider';
 import { Icons } from '@/components/ui/Icon';
-import { siteConfig, SITE_ICON_PATH } from '@/lib/config/site-config';
+import { siteConfig } from '@/lib/config/site-config';
 
 export function PlayerNavbar({ isPremium }: { isPremium?: boolean }) {
     const router = useRouter();
+    const siteIconSrc = useSiteIcon();
 
     return (
         <nav className="sticky top-0 z-50 pt-4 pb-2 px-4" style={{ transform: 'translateZ(0)' }}>
@@ -20,7 +22,7 @@ export function PlayerNavbar({ isPremium }: { isPremium?: boolean }) {
                             title={isPremium ? "返回高级主页" : "返回首页"}
                         >
                             <Image
-                                src={SITE_ICON_PATH}
+                                src={siteIconSrc}
                                 alt={siteConfig.name}
                                 width={40}
                                 height={40}

components/player/PlayerNavbar.tsx

@@ -9,8 +9,6 @@ export interface SiteConfig {
   name: string;
 }
 
-export const SITE_ICON_PATH = "/api/site-icon";
-
 /**
  * Site configuration object
  * Uses environment variables with fallback to default values