feat(annual-report): 新增年度报告组件及页面

添加年度报告相关组件，包括封面、时间轴、账户统计、高光时刻、分类图表、情感记忆、四季回顾、最远城市和足迹地图等模块。实现平滑滚动、动画效果和数据可视化功能，支持暗黑模式。

- 新增 AnnualContainer 作为报告容器
- 添加 ReportPage 作为基础页面组件
- 实现封面、结束页和消息页
- 添加时间、账户、高光时刻等数据展示模块
- 实现分类饼图和情感记忆轮播
- 添加四季回顾和城市足迹地图
- 支持暗黑模式切换
- 优化动画效果和响应式设计

Author: LC044

package/website/src/components/annual-report/AnnualContainer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="annual-container w-full h-screen overflow-hidden bg-bg-light dark:bg-dark-navy text-light-text1 dark:text-dark-text-warm-gray">
+    <!-- Scroll Wrapper -->
+    <div ref="scrollWrapper" class="scroll-wrapper snap-y snap-mandatory overflow-y-auto h-screen w-full relative">
+       <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scroll-wrapper {
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+.scroll-wrapper::-webkit-scrollbar { display: none; }
+</style>

package/website/src/components/annual-report/ReportPage.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="report-page page-item relative w-full h-full flex flex-col justify-center items-center overflow-hidden" :class="props.maxWidth ? 'p-0' : ''">
+    <!-- Gradient Background (Global) -->
+    <div class="absolute inset-0 bg-gradient-to-b from-bg-top to-bg-bottom dark:from-dark-navy dark:to-dark-gray-blue z-0"></div>
+    
+    <!-- Content Wrapper -->
+    <div class="content-wrapper relative z-10 w-full flex flex-col gap-6 md:px-0 h-full justify-center" :class="props.maxWidth ? '' : 'max-w-lg px-4'">
+      <transition name="page-fade" appear>
+        <div class="w-full h-full flex flex-col justify-center relative">
+            <slot />
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+
+const props = defineProps<{
+  maxWidth?: string;
+}>();
+
+</script>
+
+<style scoped>
+.page-fade-enter-active { transition: all 0.8s ease-out; }
+.page-fade-leave-active { transition: all 0.5s ease-in; }
+.page-fade-enter-from { opacity: 0; transform: translateY(20px); }
+.page-fade-leave-to { opacity: 0; transform: translateY(-20px); }
+</style>

package/website/src/components/annual-report/SectionAccount.vue

@@ -0,0 +1,67 @@
+
+<template>
+  <ReportPage>
+    <div class="flex flex-col justify-center h-full w-full">
+      <h2 class="text-2xl font-bold text-center mb-8 text-light-text1 dark:text-white">
+        时光账本
+      </h2>
+      
+      <div class="grid grid-cols-2 gap-4 md:gap-6 w-full">
+        <div 
+          v-for="(item, index) in items" 
+          :key="index"
+          class="bg-white/60 dark:bg-white/5 backdrop-blur-md rounded-2xl p-4 md:p-6 flex flex-col items-center text-center gap-3 border border-white/20 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1"
+          :style="{ animationDelay: `${index * 100}ms` }"
+        >
+          <component :is="item.icon" class="w-8 h-8" :class="item.color" />
+          <div class="text-2xl font-bold text-light-text1 dark:text-white">{{ item.value }}</div>
+          <div class="text-xs text-light-text3 dark:text-gray-400 font-medium">{{ item.label }}</div>
+          <div class="text-[10px] text-light-text3/70 dark:text-gray-500">{{ item.desc }}</div>
+        </div>
+      </div>
+    </div>
+  </ReportPage>
+</template>
+
+<script setup lang="ts">
+import ReportPage from './ReportPage.vue';
+import type { TimeMetrics, EmotionMetrics } from '@/types/annualReport';
+import { Camera, Star, Video, Tag, User, Clock } from 'lucide-vue-next';
+
+const props = defineProps<{
+  time: TimeMetrics;
+  emotion: EmotionMetrics;
+}>();
+
+const items = [
+  {
+    icon: Camera,
+    value: props.time.totalPhotos,
+    label: '年度留存总数',
+    desc: '每一帧，都是时光的印记',
+    color: 'text-blue-500'
+  },
+  {
+    icon: User,
+    value: props.emotion.starredPhotos,
+    label: '年度人物同框数',
+    desc: '藏起的，都是心头的偏爱',
+    color: 'text-yellow-500'
+  },
+  {
+    icon: Video,
+    value: `${(props.emotion.totalVideoDuration / 60).toFixed(0)}分钟`,
+    label: '年度拍摄视频时长',
+    desc: '流动的时光，都被温柔留存',
+    color: 'text-cyan-500'
+  },
+  {
+    icon: Tag,
+    value: props.emotion.totalOpenTimes,
+    label: '年度高频标签数',
+    desc: '镜头的偏爱，藏着生活模样',
+    color: 'text-purple-500'
+  }
+];
+</script>
+

package/website/src/components/annual-report/SectionCategory.vue

@@ -0,0 +1,110 @@
+<template>
+  <ReportPage>
+    <div class="flex flex-col w-full">
+        <!-- Title -->
+        <div class="text-center mb-2">
+            <h2 class="text-2xl font-bold text-light-text1 dark:text-white">你的年度生活图谱</h2>
+            <p class="text-sm text-light-text3 dark:text-gray-400 mt-2">镜头里的世界，藏着你的热爱</p>
+        </div>
+
+        <!-- Chart -->
+        <div ref="chartRef" class="w-full h-[250px] md:h-[350px]"></div>
+
+        <!-- Top List -->
+        <div class="flex flex-col gap-3 mt-0">
+            <div
+                v-for="(cat, index) in topCategories"
+                :key="cat.name"
+                class="relative overflow-hidden flex items-center justify-between bg-white/50 dark:bg-white/5 p-3 rounded-xl backdrop-blur-sm"
+            >
+                <!-- Hand-drawn style progress bar -->
+                <div 
+                    class="absolute top-0 left-0 h-full transition-all duration-1000 ease-out z-0"
+                    :style="{ 
+                        width: `calc(${cat.percent}% + 10px)`, 
+                        backgroundColor: ['#F97316', '#FBBF24', '#EC4899'][index] || '#ccc',
+                        opacity: 0.2,
+                        borderRadius: '0 12px 12px 0',
+                        transform: 'skewX(-10deg) translateX(-5px)'
+                    }"
+                ></div>
+                
+                <!-- Content -->
+                <div class="relative z-10 flex items-center gap-2">
+                    <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: ['#F97316', '#FBBF24', '#EC4899'][index] || '#ccc' }"></div>
+                    <span class="font-medium text-sm text-light-text1 dark:text-gray-200">{{ cat.name }}</span>
+                    <span class="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5 ml-1">{{ cat.percent }}%</span>
+                </div>
+                <div class="relative z-10 flex items-center">
+                    <span class="text-primary-amber font-bold text-sm">{{ cat.value }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+  </ReportPage>
+</template>
+
+
+<script setup lang="ts">
+import ReportPage from './ReportPage.vue';
+import type { MemoryMetrics } from '@/types/annualReport';
+import { onMounted, ref, computed } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps<{
+  data: MemoryMetrics;
+}>();
+
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  chartInstance = echarts.init(chartRef.value);
+  const isMobile = window.innerWidth < 768;
+  const option = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['50%', '40%'],
+        data: props.data.categoryDistribution,
+        color: ['#F97316', '#FBBF24', '#EC4899', '#8B5CF6', '#10B981'],
+        label: { show: !isMobile },
+        emphasis: {
+            itemStyle: {
+                scale: true,
+                scaleSize: 10,
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+            } 
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} ({d}%)'
+    }
+  };
+  chartInstance.setOption(option);
+};
+
+onMounted(() => {
+    // Delay init to ensure transition is done or use IntersectionObserver
+    setTimeout(initChart, 500);
+    window.addEventListener('resize', () => chartInstance?.resize());
+});
+
+// Top 3 Categories
+const topCategories = computed(() => {
+    const total = props.data.categoryDistribution.reduce((acc, cur) => acc + cur.value, 0);
+    return [...props.data.categoryDistribution]
+        .sort((a, b) => b.value - a.value)
+        .slice(0, 3)
+        .map(cat => ({
+            ...cat,
+            percent: total ? ((cat.value / total) * 100).toFixed(1) : '0'
+        }));
+});
+</script>

package/website/src/components/annual-report/SectionCover.vue

@@ -0,0 +1,76 @@
+<template>
+  <ReportPage>
+    <div class="flex flex-col items-center justify-center h-full relative text-center">
+      <!-- Background Watermark -->
+      <div class="absolute inset-0 opacity-5 pointer-events-none flex items-center justify-center">
+         <div class="w-full h-full bg-[url('/icon/Report.svg')] bg-repeat opacity-10"></div>
+      </div>
+
+      <!-- Main Content -->
+      <div class="z-10 flex flex-col items-center gap-6 animate-fade-in-up">
+        <!-- Logo/Icon -->
+        <div class="w-16 h-16 bg-primary-amber rounded-2xl flex items-center justify-center shadow-lg mb-4">
+           <Camera class="w-10 h-10 text-white" />
+        </div>
+
+        <!-- Titles -->
+        <div class="space-y-2">
+            <h1 class="text-[clamp(2rem,5vw,2.8rem)] font-bold text-primary-amber tracking-wider">
+              TrailSnap
+            </h1>
+            <p class="text-lg font-light text-light-text3 dark:text-dark-blue-gray">
+              一帧一画，定格步履与温柔
+            </p>
+        </div>
+
+        <!-- User Info -->
+        <div class="flex items-center gap-4 mt-8 bg-white/50 dark:bg-black/20 p-4 rounded-full backdrop-blur-sm border border-white/20">
+            <img 
+              :src="user.avatarUrl || defaultAvatar" 
+              class="w-16 h-16 rounded-full border-2 border-primary-amber shadow-sm object-cover"
+              alt="Avatar"
+            />
+            <div class="text-left pr-4">
+                <div class="text-sm text-light-text3 dark:text-gray-400">时光旅人</div>
+                <div class="text-xl font-bold text-light-text1 dark:text-white">{{ user.nickname }}</div>
+            </div>
+        </div>
+        
+        <!-- Year -->
+        <div class="text-6xl font-black text-light-text1/10 dark:text-white/10 mt-4">
+            {{ year }}
+        </div>
+      </div>
+
+      <!-- Bottom Hint -->
+      <div class="absolute bottom-10 flex flex-col items-center gap-2 animate-bounce">
+        <p class="text-xs text-light-text3 dark:text-gray-400">向上滑动，开启你的时光回忆录</p>
+        <ArrowUp class="w-5 h-5 text-primary-amber" />
+      </div>
+    </div>
+  </ReportPage>
+</template>
+
+<script setup lang="ts">
+import ReportPage from './ReportPage.vue';
+import { computed } from 'vue';
+import type { UserInfo } from '@/types/annualReport';
+import { Camera, ArrowUp } from 'lucide-vue-next';
+
+const props = defineProps<{
+  user: UserInfo;
+  year: number;
+}>();
+
+const defaultAvatar = '/avatar.png'; // Placeholder
+</script>
+
+<style scoped>
+.animate-fade-in-up {
+  animation: fadeInUp 1s ease-out forwards;
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>

package/website/src/components/annual-report/SectionEasterEgg.vue

@@ -0,0 +1,60 @@
+<template>
+  <ReportPage>
+    <div class="flex flex-col h-full w-full items-center justify-center text-center">
+        <!-- Main Tag -->
+        <div class="relative mb-8 animate-scale-in">
+            <div class="absolute -inset-4 bg-primary-amber/10 rounded-full blur-xl"></div>
+            <h2 class="relative text-[clamp(2.5rem,8vw,3.5rem)] font-bold text-primary-amber">
+                {{ data.tags.main }}
+            </h2>
+        </div>
+
+        <!-- Sub Tags -->
+        <div class="flex flex-wrap gap-3 justify-center mb-10">
+            <span 
+                v-for="tag in data.tags.sub" 
+                :key="tag"
+                class="px-4 py-1.5 bg-white dark:bg-white/10 rounded-full text-sm text-light-text2 dark:text-gray-300 shadow-sm border border-gray-100 dark:border-gray-700"
+            >
+                {{ tag }}
+            </span>
+        </div>
+
+        <!-- Best Photo -->
+        <div class="relative w-64 h-64 md:w-72 md:h-72 mb-6 group">
+            <div class="absolute inset-0 bg-primary-amber rounded-2xl rotate-3 opacity-20 group-hover:rotate-6 transition-transform"></div>
+            <img 
+                :src="data.bestPhotoUrl" 
+                class="relative w-full h-full object-cover rounded-2xl shadow-xl border-4 border-white dark:border-gray-700 transform transition-transform group-hover:-rotate-1"
+                alt="Best Photo"
+            />
+            <div class="absolute -bottom-6 left-0 right-0 text-center">
+                <span class="inline-block bg-white/90 dark:bg-black/60 backdrop-blur px-3 py-1 rounded-full text-xs text-gray-500 shadow-sm">
+                    {{ data.bestPhotoDate }} · 年度最佳瞬间
+                </span>
+            </div>
+        </div>
+
+    </div>
+  </ReportPage>
+</template>
+
+<script setup lang="ts">
+import ReportPage from './ReportPage.vue';
+import type { EasterEgg } from '@/types/annualReport';
+import { Quote } from 'lucide-vue-next';
+
+const props = defineProps<{
+  data: EasterEgg;
+}>();
+</script>
+
+<style scoped>
+.animate-scale-in {
+  animation: scaleIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+@keyframes scaleIn {
+  from { transform: scale(0.5); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+</style>