万圣节&圣诞节皮肤

client/src/components/BottomNav.tsx

@@ -17,6 +17,8 @@ import { Bot, Home, MessageSquare } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useMemo } from "react";
 import { bottomNavInnerClass, bottomNavOuterClass } from "@/lib/appShell";
+import FestivalNavIcon from "@/components/festival/FestivalNavIcon";
+import { useFestival, type FestivalId } from "@/lib/festival";
 
 type BottomNavLocale = NonNullable<(typeof localeZh)["bottomNav"]>;
 
@@ -24,14 +26,43 @@ interface NavItem {
   path: string;
   icon: React.ComponentType<{ size?: number; className?: string }>;
   labelKey: keyof BottomNavLocale;
+  /** 各节日替换 lucide 图标的贴纸素材，键为节日 ID。 */
+  festivalIcons?: Partial<Record<FestivalId, string>>;
 }
 
 const FORUM_URL = "https://forum.zidoo.tv/index.php";
 
+const festivalIcon = (festival: FestivalId, name: string) =>
+  `${import.meta.env.BASE_URL}images/festival/${festival}/${name}.png`;
+
 const NAV_ITEMS: NavItem[] = [
-  { path: "/community", icon: MessageSquare, labelKey: "community" },
-  { path: "/", icon: Home, labelKey: "home" },
-  { path: "/ai", icon: Bot, labelKey: "myAi" },
+  {
+    path: "/community",
+    icon: MessageSquare,
+    labelKey: "community",
+    festivalIcons: {
+      christmas: festivalIcon("christmas", "bell"),
+      halloween: festivalIcon("halloween", "ghost"),
+    },
+  },
+  {
+    path: "/",
+    icon: Home,
+    labelKey: "home",
+    festivalIcons: {
+      christmas: festivalIcon("christmas", "santa"),
+      halloween: festivalIcon("halloween", "pumpkin"),
+    },
+  },
+  {
+    path: "/ai",
+    icon: Bot,
+    labelKey: "myAi",
+    festivalIcons: {
+      christmas: festivalIcon("christmas", "gift"),
+      halloween: festivalIcon("halloween", "vampire"),
+    },
+  },
 ];
 
 export default function BottomNav() {
@@ -39,6 +70,7 @@ export default function BottomNav() {
   const isLgUp = useIsLgUp();
   const { open: aiDrawerOpen, setOpen: setAiDrawerOpen } = useAIDrawer();
   const { deviceState } = useDevice();
+  const festival = useFestival();
 
   const navText = useMemo((): BottomNavLocale => {
     const pack = resolveLocalePack(deviceState?.language);
@@ -67,6 +99,7 @@ export default function BottomNav() {
                 (item.path === "/" && location === "/") ||
                 (item.path !== "/" && location.startsWith(item.path));
           const Icon = item.icon;
+          const festivalSrc = festival ? item.festivalIcons?.[festival] : undefined;
 
           const inner = (
             <div className="flex flex-col items-center justify-center relative pt-2.5 pb-1.5 px-3">
@@ -92,13 +125,17 @@ export default function BottomNav() {
                     background: isActive ? "rgba(0,255,246,0.1)" : "transparent",
                   }}
                 >
-                  <Icon
-                    size={isActive ? 20 : 19}
-                    className={cn(
-                      "transition-all duration-200",
-                      isActive ? "text-[#00FFF6]" : "text-white/30"
-                    )}
-                  />
+                  {festivalSrc ? (
+                    <FestivalNavIcon src={festivalSrc} active={isActive} />
+                  ) : (
+                    <Icon
+                      size={isActive ? 20 : 19}
+                      className={cn(
+                        "transition-all duration-200",
+                        isActive ? "text-[#00FFF6]" : "text-white/30"
+                      )}
+                    />
+                  )}
                 </div>
 
                 {/* Label */}