- {FESTIVAL_GREETINGS[festival].split(" ").map(word => (
+ {isNewYear ? (
+ <>
+
+
+ Happy
+ New Year
+
+
{newYear}
+
+
+ NEW YEAR · NEW CHAPTER · MORE POSSIBILITIES
+
+
+ ) : FESTIVAL_GREETINGS[festival].split(" ").map(word => (
{word}
diff --git a/client/src/components/festival/NewYearDecoration.tsx b/client/src/components/festival/NewYearDecoration.tsx
new file mode 100644
index 0000000..4c1675d
--- /dev/null
+++ b/client/src/components/festival/NewYearDecoration.tsx
@@ -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 (
+
+ );
+});
+
+/** 两端占位仍为 24px：最小音量是小仙女棒，最大音量是绽放的烟花。 */
+export function NewYearVolumeIcon({ dim = false }: { dim?: boolean }) {
+ return (
+
+ 
+
+ );
+}
+
+/** 卡片顶部的金色彩带与星屑，不覆盖端口、不拦截指针事件。 */
+export const NewYearCardDecoration = memo(function NewYearCardDecoration() {
+ return (
+
+
+ {[7, 20, 35, 51, 67, 82, 95].map((left, index) => (
+
+ {index % 2 ? "·" : "✦"}
+
+ ))}
+
+ );
+});
\ No newline at end of file
diff --git a/client/src/components/festival/newyear.css b/client/src/components/festival/newyear.css
new file mode 100644
index 0000000..ec30ed9
--- /dev/null
+++ b/client/src/components/festival/newyear.css
@@ -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;
+}
diff --git a/client/src/lib/festival.ts b/client/src/lib/festival.ts
index 8bcd2f6..8f1f5e2 100644
--- a/client/src/lib/festival.ts
+++ b/client/src/lib/festival.ts
@@ -6,7 +6,7 @@
============================================================ */
import { useMemo } from "react";
-export type FestivalId = "christmas" | "halloween";
+export type FestivalId = "christmas" | "halloween" | "newyear";
/** Inclusive [month, day] windows. Christmas: Dec 20 – Dec 26; Halloween: Oct 26 – Nov 1. */
const FESTIVAL_WINDOWS: Record<
@@ -15,6 +15,8 @@ const FESTIVAL_WINDOWS: Record<
> = {
christmas: { from: [12, 20], to: [12, 26] },
halloween: { from: [10, 26], to: [11, 1] },
+ // 元旦接续圣诞节，跨年窗口包含首尾日期。
+ newyear: { from: [12, 27], to: [1, 3] },
};
function inWindow(
@@ -55,8 +57,14 @@ export function useFestival(): FestivalId | null {
return useMemo(() => getFestival(), []);
}
+/** 跨年夜展示即将到来的年份，其余月份预览展示当年。 */
+export function getNewYearDisplayYear(now: Date = new Date()): number {
+ return now.getFullYear() + (now.getMonth() === 11 ? 1 : 0);
+}
+
/** 首页 VU 区的节日问候语，键与 FestivalId 对应。 */
export const FESTIVAL_GREETINGS: Record
= {
christmas: "Merry Christmas",
halloween: "Happy Halloween",
+ newyear: "Happy New Year",
};
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 55c6a1b..514dd3a 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -20,6 +20,11 @@ import HalloweenVolumeThumb from "@/components/festival/HalloweenVolumeThumb";
import HalloweenPumpkinIcon from "@/components/festival/HalloweenPumpkinIcon";
import HalloweenCardDecoration from "@/components/festival/HalloweenCardDecoration";
import FestivalGreeting from "@/components/festival/FestivalGreeting";
+import {
+ NewYearCardDecoration,
+ NewYearVolumeIcon,
+ NewYearVolumeThumb,
+} from "@/components/festival/NewYearDecoration";
import "@/components/festival/christmas.css";
import "@/components/festival/halloween.css";
import "@/components/festival/festival.css";
@@ -200,6 +205,7 @@ export default function Home() {
const festival = useFestival();
const isChristmas = festival === "christmas";
const isHalloween = festival === "halloween";
+ const isNewYear = festival === "newyear";
const powerActionRef = useRef(false);
const [powerConfirmOpen, setPowerConfirmOpen] = useState(false);
const [volumeConfirm, setVolumeConfirm] = useState(null);
@@ -466,6 +472,7 @@ export default function Home() {
style={{ background: "rgba(18,18,20,0.8)", minHeight: 140 }}>
{isChristmas && }
{isHalloween && }
+ {isNewYear && }
{/* Stylized device illustration */}
{/* Device body */}
@@ -613,6 +620,8 @@ export default function Home() {
) : isHalloween ? (
+ ) : isNewYear ? (
+
) : (