From a21fe3750b3159749febd32038f5e87ae1fbaafa Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Sun, 4 Oct 2026 11:23:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20Starlight=20?=
 =?UTF-8?q?=E5=91=A8=E5=B9=B4=E5=BA=86=E5=BD=A9=E8=9B=8B=EF=BC=88=E6=AF=8F?=
 =?UTF-8?q?=E5=B9=B4=2010=20=E6=9C=88=204=20=E6=97=A5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

10 月 4 日（Starlight 首个发布日 2014-10-04）当天，启动器顶部显示周年横幅并飘落蛋糕/彩带，周年数按年份-2014 计算。新增 helpers/anniversary.ts 与 AnniversaryCelebration.vue；开发者页加入 force_anniversary_celebration 功能开关用于随时预览。
---
 apps/app-frontend/src/App.vue                 |   2 +
 .../components/ui/AnniversaryCelebration.vue  | 239 ++++++++++++++++++
 .../ui/settings/FeatureFlagSettings.vue       |   1 +
 apps/app-frontend/src/helpers/anniversary.ts  |  61 +++++
 .../app-frontend/src/locales/en-US/index.json |   3 +
 .../app-frontend/src/locales/zh-CN/index.json |   3 +-
 apps/app-frontend/src/store/theme.ts          |   1 +
 7 files changed, 309 insertions(+), 1 deletion(-)
 create mode 100644 apps/app-frontend/src/components/ui/AnniversaryCelebration.vue
 create mode 100644 apps/app-frontend/src/helpers/anniversary.ts

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 623cc59..521a733 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -72,6 +72,7 @@ import InstancePlayerModal from '@/components/instance/InstancePlayerModal.vue'
 import TaggedModDownloadsModal from '@/components/instance/TaggedModDownloadsModal.vue'
 import InstanceExportModal from '@/components/lab/recipe-generator/InstanceExportModal.vue'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
+import AnniversaryCelebration from '@/components/ui/AnniversaryCelebration.vue'
 import AppActionBar from '@/components/ui/AppActionBar.vue'
 import AxolotlLogo from '@/components/ui/AxolotlLogo.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
@@ -2221,6 +2222,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 </script>
 
 <template>
+	<AnniversaryCelebration />
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<SkinSiteSessionFrame v-if="stateInitialized" />
 	<InstancePlayerModal v-if="stateInitialized" />
diff --git a/apps/app-frontend/src/components/ui/AnniversaryCelebration.vue b/apps/app-frontend/src/components/ui/AnniversaryCelebration.vue
new file mode 100644
index 0000000..b59e8eb
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/AnniversaryCelebration.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import { anniversaryYear, ordinal, shouldCelebrate } from '@/helpers/anniversary'
+import { useTheming } from '@/store/state'
+
+const { formatMessage } = useVIntl()
+const themeStore = useTheming()
+
+const messages = defineMessages({
+	banner: {
+		id: 'app.anniversary.banner',
+		defaultMessage: 'Happy {ordinal} Anniversary, Starlight!',
+	},
+})
+
+/** Emoji that drift down from the top of the window. */
+const CONFETTI_EMOJI = ['🎂', '🎉', '🎊', '🎈', '✨', '🧁', '🍰']
+
+type Confetti = {
+	id: number
+	emoji: string
+	left: number
+	delay: number
+	duration: number
+	size: number
+	drift: number
+}
+
+const visible = ref(false)
+const years = ref(0)
+const confetti = ref<Confetti[]>([])
+let spawnTimer: number | undefined
+let nextId = 0
+
+function spawnConfetti(): void {
+	const emoji = CONFETTI_EMOJI[Math.floor(Math.random() * CONFETTI_EMOJI.length)]
+	confetti.value.push({
+		id: nextId++,
+		emoji,
+		left: Math.random() * 100,
+		delay: 0,
+		duration: 6 + Math.random() * 5,
+		size: 1 + Math.random() * 1.4,
+		drift: (Math.random() - 0.5) * 160,
+	})
+	// Keep the DOM small; drop the oldest once we exceed a cap.
+	if (confetti.value.length > 60) confetti.value.splice(0, 10)
+}
+
+const forced = computed(() => themeStore.getFeatureFlag('force_anniversary_celebration'))
+
+function startCelebration(): void {
+	if (spawnTimer !== undefined) return
+	years.value = anniversaryYear()
+	visible.value = true
+	// Seed a few so the screen is not empty on the first frame.
+	for (let i = 0; i < 12; i++) spawnConfetti()
+	spawnTimer = window.setInterval(spawnConfetti, 700)
+}
+
+function stopCelebration(): void {
+	if (spawnTimer !== undefined) {
+		window.clearInterval(spawnTimer)
+		spawnTimer = undefined
+	}
+	confetti.value = []
+	visible.value = false
+}
+
+watch(
+	() => shouldCelebrate(forced.value),
+	(active) => (active ? startCelebration() : stopCelebration()),
+	{ immediate: true },
+)
+
+onUnmounted(stopCelebration)
+
+const bannerText = computed(() =>
+	formatMessage(messages.banner, { ordinal: ordinal(years.value) }),
+)
+</script>
+
+<template>
+	<Transition name="anniversary-fade">
+		<div v-if="visible" class="anniversary-root" aria-live="polite">
+			<!-- Falling confetti layer (click-through). -->
+			<div class="anniversary-confetti" aria-hidden="true">
+				<span
+					v-for="piece in confetti"
+					:key="piece.id"
+					class="anniversary-piece"
+					:style="{
+						left: piece.left + '%',
+						fontSize: piece.size + 'rem',
+						animationDelay: piece.delay + 's',
+						animationDuration: piece.duration + 's',
+						'--drift': piece.drift + 'px',
+					}"
+				>
+					{{ piece.emoji }}
+				</span>
+			</div>
+
+			<!-- Top banner. -->
+			<div class="anniversary-banner">
+				<span class="anniversary-banner-emoji">🎂</span>
+				<span class="anniversary-banner-text">{{ bannerText }}</span>
+				<span class="anniversary-banner-emoji">🎉</span>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+.anniversary-root {
+	position: fixed;
+	inset: 0;
+	/* Above content, below modals/drag overlays (which use z-[200]). */
+	z-index: 150;
+	pointer-events: none;
+}
+
+.anniversary-confetti {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+}
+
+.anniversary-piece {
+	position: absolute;
+	top: -3rem;
+	will-change: transform;
+	animation-name: anniversary-fall;
+	animation-timing-function: linear;
+	animation-iteration-count: 1;
+	animation-fill-mode: forwards;
+}
+
+@keyframes anniversary-fall {
+	0% {
+		transform: translate3d(0, 0, 0) rotate(0deg);
+		opacity: 0;
+	}
+	10% {
+		opacity: 1;
+	}
+	100% {
+		transform: translate3d(var(--drift, 0), 110vh, 0) rotate(360deg);
+		opacity: 0.85;
+	}
+}
+
+.anniversary-banner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	padding: 0.4rem 1rem;
+	font-weight: 700;
+	font-size: 0.95rem;
+	letter-spacing: 0.02em;
+	color: #fff;
+	background: linear-gradient(
+		90deg,
+		#f472b6,
+		#facc15,
+		#4ade80,
+		#38bdf8,
+		#a78bfa,
+		#f472b6
+	);
+	background-size: 300% 100%;
+	animation: anniversary-gradient 8s linear infinite;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+.anniversary-banner-text {
+	animation: anniversary-pulse 1.8s ease-in-out infinite;
+}
+
+.anniversary-banner-emoji {
+	animation: anniversary-bounce 1.4s ease-in-out infinite;
+}
+
+@keyframes anniversary-gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 300% 50%;
+	}
+}
+
+@keyframes anniversary-pulse {
+	0%,
+	100% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.06);
+	}
+}
+
+@keyframes anniversary-bounce {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-3px);
+	}
+}
+
+.anniversary-fade-enter-active,
+.anniversary-fade-leave-active {
+	transition: opacity 0.6s ease;
+}
+
+.anniversary-fade-enter-from,
+.anniversary-fade-leave-to {
+	opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.anniversary-piece,
+	.anniversary-banner,
+	.anniversary-banner-text,
+	.anniversary-banner-emoji {
+		animation: none;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
index 6040baf..7457986 100644
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -71,6 +71,7 @@ const featureFlagLabels: Record<FeatureFlag, string> = {
 	advanced_filters_collapsed: '高级筛选默认折叠',
 	multiplayer_in_app: '多人联机',
 	auto_install_dependencies: '自动安装依赖',
+	force_anniversary_celebration: '强制显示周年庆庆祝（调试）',
 }
 
 const settings = ref(await getSettings())
diff --git a/apps/app-frontend/src/helpers/anniversary.ts b/apps/app-frontend/src/helpers/anniversary.ts
new file mode 100644
index 0000000..60c7c63
--- /dev/null
+++ b/apps/app-frontend/src/helpers/anniversary.ts
@@ -0,0 +1,61 @@
+/**
+ * Starlight anniversary helpers.
+ *
+ * Starlight's first release was on 2014-10-04, so every October 4th the
+ * launcher shows a small celebration. The anniversary number is simply
+ * `currentYear - 2014`.
+ */
+
+/** Year of Starlight's first release. */
+export const STARLIGHT_FOUNDING_YEAR = 2014
+
+/** Month (1-12) of Starlight's anniversary. */
+export const STARLIGHT_ANNIVERSARY_MONTH = 10
+
+/** Day of month of Starlight's anniversary. */
+export const STARLIGHT_ANNIVERSARY_DAY = 4
+
+/**
+ * Whether the given date falls on Starlight's anniversary (October 4th).
+ * Uses the local timezone, which is what the launcher user experiences.
+ */
+export function isAnniversary(date: Date = new Date()): boolean {
+	return (
+		date.getMonth() + 1 === STARLIGHT_ANNIVERSARY_MONTH &&
+		date.getDate() === STARLIGHT_ANNIVERSARY_DAY
+	)
+}
+
+/**
+ * The anniversary number for the given date (e.g. 12 for 2026).
+ * Not clamped: callers decide whether to guard against pre-2014 dates.
+ */
+export function anniversaryYear(date: Date = new Date()): number {
+	return date.getFullYear() - STARLIGHT_FOUNDING_YEAR
+}
+
+/**
+ * Whether the celebration should currently be shown.
+ *
+ * Normally this is only true on October 4th, but the developer-page
+ * `force_anniversary_celebration` feature flag forces it on for previewing.
+ */
+export function shouldCelebrate(force = false, date: Date = new Date()): boolean {
+	return force || isAnniversary(date)
+}
+
+/** English ordinal suffix for a number (1 -> "1st", 12 -> "12th"). */
+export function ordinal(n: number): string {
+	const mod100 = n % 100
+	if (mod100 >= 11 && mod100 <= 13) return `${n}th`
+	switch (n % 10) {
+		case 1:
+			return `${n}st`
+		case 2:
+			return `${n}nd`
+		case 3:
+			return `${n}rd`
+		default:
+			return `${n}th`
+	}
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 1a596a9..ec78130 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -11428,5 +11428,8 @@
   },
   "app.settings.synced-options.game-settings.value-unset": {
     "message": "Choose a value"
+  },
+  "app.anniversary.banner": {
+    "message": "Happy {ordinal} Anniversary, Starlight!"
   }
 }
diff --git a/apps/app-frontend/src/locales/zh-CN/index.json b/apps/app-frontend/src/locales/zh-CN/index.json
index 3fd5974..8760bfe 100644
--- a/apps/app-frontend/src/locales/zh-CN/index.json
+++ b/apps/app-frontend/src/locales/zh-CN/index.json
@@ -11350,5 +11350,6 @@
 	"app.settings.synced-options.game-settings.value-mixed": { "message": "各实例不同" },
 	"app.settings.synced-options.game-settings.value-off": { "message": "关闭" },
 	"app.settings.synced-options.game-settings.value-on": { "message": "开启" },
-	"app.settings.synced-options.game-settings.value-unset": { "message": "选择一个值" }
+	"app.settings.synced-options.game-settings.value-unset": { "message": "选择一个值" },
+	"app.anniversary.banner": { "message": "Starlight {ordinal} 周年快乐！" }
 }
diff --git a/apps/app-frontend/src/store/theme.ts b/apps/app-frontend/src/store/theme.ts
index e3dc50e..ed2ba47 100644
--- a/apps/app-frontend/src/store/theme.ts
+++ b/apps/app-frontend/src/store/theme.ts
@@ -25,6 +25,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	page_transitions: true,
 	advanced_filters_collapsed: true,
 	auto_install_dependencies: true,
+	force_anniversary_celebration: false,
 }
 
 export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const