元旦节皮肤

2026-10-09 13:56:57 +08:00
parent 7d62f3ec70
commit 365f3afc49
16 changed files with 476 additions and 10 deletions
@@ -1,7 +1,7 @@
 /* ============================================================
   BOTTOM NAV — Luxsin X9 Controller (Mobile)
   Design: iOS/Android App-style bottom tab bar
-   3 个入口（社区/主页/我的 AI），文案来自 locales/bottomNav，语言跟随 deviceState.language
+   5 tabs — labels from locales/bottomNav, language = deviceState.language (同系统页)
   - 社区：移动端进入 /community 引导复制链接；桌面（lg+）点击仍 window.open 论坛
   - Active tab: cyan icon + top indicator bar
   - Inactive: muted icon + label
@@ -13,7 +13,13 @@ import { useIsLgUp } from "@/hooks/useIsLgUp";
 import localeZh from "@/locales/data-zh.json";
 import localeEn from "@/locales/data-en.json";
 import { resolveLocalePack } from "@/locales/resolveLocale";
-import { Bot, Home, MessageSquare } from "lucide-react";
+import {
+  Activity,
+  Bot,
+  Home,
+  MessageSquare,
+  Sliders,
+} from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useMemo } from "react";
 import { bottomNavInnerClass, bottomNavOuterClass } from "@/lib/appShell";
@@ -33,7 +39,7 @@ interface NavItem {
 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`;
+  `${import.meta.env.BASE_URL}images/festival/${festival}/${name}.${festival === "newyear" ? "svg" : "png"}`;

 const NAV_ITEMS: NavItem[] = [
  {
@@ -43,6 +49,17 @@ const NAV_ITEMS: NavItem[] = [
    festivalIcons: {
      christmas: festivalIcon("christmas", "bell"),
      halloween: festivalIcon("halloween", "ghost"),
+      newyear: festivalIcon("newyear", "confetti"),
+    },
+  },
+  {
+    path: "/eq",
+    icon: Sliders,
+    labelKey: "hpEq",
+    festivalIcons: {
+      christmas: festivalIcon("christmas", "reindeer"),
+      halloween: festivalIcon("halloween", "skeleton"),
+      newyear: festivalIcon("newyear", "clock"),
    },
  },
  {
@@ -52,6 +69,17 @@ const NAV_ITEMS: NavItem[] = [
    festivalIcons: {
      christmas: festivalIcon("christmas", "santa"),
      halloween: festivalIcon("halloween", "pumpkin"),
+      newyear: festivalIcon("newyear", "calendar"),
+    },
+  },
+  {
+    path: "/effects",
+    icon: Activity,
+    labelKey: "effects",
+    festivalIcons: {
+      christmas: festivalIcon("christmas", "tree"),
+      halloween: festivalIcon("halloween", "witch"),
+      newyear: festivalIcon("newyear", "fireworks"),
    },
  },
  {
@@ -61,6 +89,7 @@ const NAV_ITEMS: NavItem[] = [
    festivalIcons: {
      christmas: festivalIcon("christmas", "gift"),
      halloween: festivalIcon("halloween", "vampire"),
+      newyear: festivalIcon("newyear", "party-hat"),
    },
  },
 ];
@@ -78,7 +107,9 @@ export default function BottomNav() {
  }, [deviceState?.language]);

  return (
-    <nav className={bottomNavOuterClass}>
+    <nav
+      className={bottomNavOuterClass}
+    >
      <div
        className={bottomNavInnerClass}
        style={{
@@ -90,7 +121,7 @@ export default function BottomNav() {
          paddingBottom: "env(safe-area-inset-bottom, 8px)",
        }}
      >
-      <div className="grid grid-cols-3 items-stretch">
+      <div className="flex items-stretch justify-around">
        {NAV_ITEMS.map((item) => {
          const isActive =
            item.path === "/ai"
@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from "react";
-import { FESTIVAL_GREETINGS, type FestivalId } from "@/lib/festival";
+import { FESTIVAL_GREETINGS, getNewYearDisplayYear, type FestivalId } from "@/lib/festival";
 import "./festival.css";
+import "./newyear.css";

 /**
 * VU 区的静态插画横幅：两端角色保持比例，中央背景平铺，文字独立缩放。
@@ -15,6 +16,8 @@ export default function FestivalGreeting({
  const textBoxRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(null);
  const [scale, setScale] = useState(1);
+  const [newYear] = useState(() => getNewYearDisplayYear());
+  const isNewYear = festival === "newyear";
  const artworkRoot = `${import.meta.env.BASE_URL}images/festival/${festival}/`;

  useLayoutEffect(() => {
@@ -60,7 +63,7 @@ export default function FestivalGreeting({
      ref={boxRef}
      className={`festival-greeting festival-greeting--${festival}`}
      role="img"
-      aria-label={FESTIVAL_GREETINGS[festival]}
+      aria-label={isNewYear ? `${FESTIVAL_GREETINGS[festival]} ${newYear}` : FESTIVAL_GREETINGS[festival]}
    >
      <div
        className="festival-greeting-backdrop"
@@ -78,6 +81,15 @@ export default function FestivalGreeting({
        />
      ))}
      <div className="festival-greeting-shade" aria-hidden="true" />
+      {isNewYear && (
+        <img
+          src={`${artworkRoot}calendar.svg`}
+          className="newyear-greeting-calendar"
+          alt=""
+          aria-hidden="true"
+          draggable={false}
+        />
+      )}
      <div
        ref={textBoxRef}
        className="festival-greeting-title"
@@ -88,7 +100,20 @@ export default function FestivalGreeting({
          className={`${festival}-greeting-text festival-greeting-inner`}
          style={{ transform: `scale(${scale})` }}
        >
-          {FESTIVAL_GREETINGS[festival].split(" ").map(word => (
+          {isNewYear ? (
+            <>
+              <div className="newyear-greeting-heading">
+                <div className="newyear-greeting-words">
+                  <span>Happy</span>
+                  <span>New Year</span>
+                </div>
+                <strong className="newyear-greeting-year">{newYear}</strong>
+              </div>
+              <span className="newyear-greeting-tagline">
+                NEW YEAR · NEW CHAPTER · MORE POSSIBILITIES
+              </span>
+            </>
+          ) : FESTIVAL_GREETINGS[festival].split(" ").map(word => (
            <span key={word} className="festival-greeting-line">
              {word}
            </span>
@@ -0,0 +1,58 @@
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+import "./newyear.css";
+
+const ROOT = `${import.meta.env.BASE_URL}images/festival/newyear/`;
+
+/** 新年礼帽与仙女棒只替换视觉层，拖拽命中和音量提交仍由滑块管理。 */
+export const NewYearVolumeThumb = memo(function NewYearVolumeThumb() {
+  return (
+    <img
+      src={`${ROOT}party-hat.svg`}
+      alt=""
+      draggable={false}
+      className="newyear-volume-thumb"
+    />
+  );
+});
+
+/** 两端占位仍为 24px：最小音量是小仙女棒，最大音量是绽放的烟花。 */
+export function NewYearVolumeIcon({ dim = false }: { dim?: boolean }) {
+  return (
+    <span className="newyear-volume-icon-slot" aria-hidden="true">
+      <img
+        src={`${ROOT}${dim ? "sparkler" : "fireworks"}.svg`}
+        alt=""
+        draggable={false}
+        className={cn("newyear-volume-icon", dim && "newyear-volume-icon--dim")}
+      />
+    </span>
+  );
+}
+
+/** 卡片顶部的金色彩带与星屑，不覆盖端口、不拦截指针事件。 */
+export const NewYearCardDecoration = memo(function NewYearCardDecoration() {
+  return (
+    <div className="newyear-card-decoration" aria-hidden="true">
+      <svg viewBox="0 0 600 20" preserveAspectRatio="none" focusable="false">
+        <path
+          d="M0 2Q150 19 300 5T600 2"
+          fill="none"
+          stroke="#e7bd6b"
+          strokeOpacity="0.35"
+          strokeWidth="0.7"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      {[7, 20, 35, 51, 67, 82, 95].map((left, index) => (
+        <span
+          key={left}
+          className="newyear-card-star"
+          style={{ left: `${left}%`, top: index % 2 ? 7 : 2 }}
+        >
+          {index % 2 ? "·" : "✦"}
+        </span>
+      ))}
+    </div>
+  );
+});
@@ -0,0 +1,152 @@
+/* 元旦视觉层：保留滑轨尺寸、青色音量反馈与所有交互热区。 */
+.newyear-volume-thumb {
+  display: block;
+  width: 44px;
+  height: 44px;
+  max-width: none;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+  filter: drop-shadow(0 2px 4px #000) drop-shadow(0 0 3px rgba(242, 196, 98, 0.35));
+}
+
+.newyear-volume-icon-slot {
+  display: block;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+}
+
+.newyear-volume-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 32px;
+  height: 32px;
+  max-width: none;
+  transform: translate(-50%, -50%);
+  filter: drop-shadow(0 0 3px rgba(242, 196, 98, 0.3));
+  pointer-events: none;
+  user-select: none;
+}
+
+.newyear-volume-icon--dim {
+  width: 27px;
+  height: 27px;
+  opacity: 0.75;
+}
+
+.newyear-card-decoration {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 20px;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+.newyear-card-decoration * {
+  pointer-events: none;
+}
+
+.newyear-card-decoration > svg {
+  width: 100%;
+  height: 20px;
+}
+
+.newyear-card-star {
+  position: absolute;
+  color: #e7bd6b;
+  opacity: 0.75;
+  font-size: 9px;
+  line-height: 1;
+}
+
+.festival-greeting--newyear {
+  background: #071221;
+}
+
+.festival-greeting--newyear .festival-greeting-art {
+  opacity: 0.75;
+}
+
+.festival-greeting--newyear .festival-greeting-shade {
+  background: linear-gradient(90deg, transparent, rgba(3, 9, 20, 0.3) 40%, rgba(3, 9, 20, 0.3) 60%, transparent);
+}
+
+/* 标题整体仍由共享组件测量缩放，窄屏按三行排列，宽屏增加副标题。 */
+.festival-greeting.festival-greeting--newyear[data-layout] .newyear-greeting-text {
+  flex-direction: column;
+  color: #ffe8ae;
+  text-shadow: 0 1px 1px #71390d, 0 0 8px rgba(236, 145, 52, 0.6);
+}
+
+.newyear-greeting-heading,
+.newyear-greeting-words {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.newyear-greeting-words {
+  font-family: "Snell Roundhand", "Apple Chancery", "URW Chancery L", Georgia, cursive;
+  font-size: 36px;
+  font-style: italic;
+  line-height: 1.05;
+}
+
+.newyear-greeting-year {
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 43px;
+  font-style: italic;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  line-height: 1;
+  color: #ffd57a;
+}
+
+.newyear-greeting-tagline {
+  display: none;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 8px;
+  line-height: 1.6;
+  letter-spacing: 2px;
+  color: #f5da9b;
+  text-shadow: 0 1px 3px #000;
+}
+
+.newyear-greeting-calendar {
+  display: none;
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  left: 22px;
+  bottom: 4px;
+  transform: rotate(-9deg);
+  filter: drop-shadow(0 2px 4px #000);
+}
+
+.festival-greeting--newyear[data-layout="wide"] .newyear-greeting-calendar {
+  display: block;
+}
+
+.festival-greeting--newyear[data-layout="wide"] .newyear-greeting-heading,
+.festival-greeting--newyear[data-layout="wide"] .newyear-greeting-words {
+  flex-direction: row;
+}
+
+.festival-greeting--newyear[data-layout="wide"] .newyear-greeting-words > span + span {
+  margin-left: 0.22em;
+}
+
+.festival-greeting--newyear[data-layout="wide"] .newyear-greeting-year {
+  margin-left: 18px;
+  font-size: 54px;
+}
+
+.festival-greeting--newyear[data-layout="wide"] .newyear-greeting-tagline {
+  display: block;
+  margin-top: 4px;
+}