feat(website): 年度报告页面集成车票明细数据

Author: rpxaaa

package/website/src/api/annualReport.ts

@@ -6,14 +6,51 @@ import type {
   LocationMetrics, 
   SeasonMetrics, 
   EmotionMetrics, 
-  EasterEgg 
+  EasterEgg,
+  ExpenseMetrics,
+  TicketDetail
 } from '@/types/annualReport';
 import type { Photo } from '@/types/album';
 import axios from 'axios'
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || ''
 const api = axios.create({ baseURL: API_BASE_URL })
 
+export async function getReportExpenses(startTime: string, endTime: string): Promise<ExpenseMetrics> {
+  const { data } = await api.get<ExpenseMetrics>('/api/annual-report/expenses', {
+    params: {
+        start_time: startTime,
+        end_time: endTime
+    }
+  });
+  return data
+}
+
+export async function getReportExpenseDetails(startTime: string, endTime: string): Promise<TicketDetail[]> {
+  const retries = 2;
+  let lastError;
+  
+  for (let i = 0; i <= retries; i++) {
+    try {
+      const { data } = await api.get<TicketDetail[]>('/api/annual-report/expenses/details', {
+        params: {
+            start_time: startTime,
+            end_time: endTime
+        }
+      });
+      return data;
+    } catch (error) {
+      lastError = error;
+      if (i < retries) {
+        // Exponential backoff or constant delay could be used here
+        await new Promise(resolve => setTimeout(resolve, 500)); 
+        continue;
+      }
+    }
+  }
+  throw lastError;
+}
+
 export async function getReportSummary(startTime: string, endTime: string): Promise<{user: UserInfo, time: TimeMetrics}> {
   const { data } = await api.get<{user: UserInfo, time: TimeMetrics}>('/api/annual-report/summary', {
     params: {

package/website/src/types/annualReport.ts

@@ -82,6 +82,31 @@ export interface EasterEgg {
   };
 }
 
+export interface MonthlyExpense {
+  month: string;
+  amount: number;
+}
+
+export interface ExpenseMetrics {
+  totalAmount: number;
+  totalCount: number;
+  averagePrice: number;
+  monthlyTrend: MonthlyExpense[];
+  maxExpenseTicket?: string;
+  maxExpenseAmount?: number;
+}
+
+export interface TicketDetail {
+  id: string;
+  train_code: string;
+  departure_station: string;
+  arrival_station: string;
+  date_time: string;
+  price: number;
+  seat_type: string;
+  name: string;
+}
+
 export interface AnnualReportData {
   year: number;
   user: UserInfo;
@@ -91,4 +116,5 @@ export interface AnnualReportData {
   location: LocationMetrics;
   season: SeasonMetrics;
   easterEgg: EasterEgg;
+  expense: ExpenseMetrics;
 }

package/website/src/views/annual-report/index.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { getReportEasterEgg, getReportSummary ,getReportMemory, getReportLocation, getReportSeason, getReportEmotion} from '@/api/annualReport';
+import { getReportEasterEgg, getReportSummary ,getReportMemory, getReportLocation, getReportSeason, getReportEmotion, getReportExpenses} from '@/api/annualReport';
 import type { AnnualReportData } from '@/types/annualReport';
 import AnnualContainer from '@/components/annual-report/AnnualContainer.vue';
 import SectionCover from '@/components/annual-report/SectionCover.vue';
 import SectionPhotoWall from '@/components/annual-report/SectionPhotoWall.vue';
 import SectionTime from '@/components/annual-report/SectionTime.vue';
 import SectionAccount from '@/components/annual-report/SectionAccount.vue';
+import SectionExpense from '@/components/annual-report/SectionExpense.vue';
 import SectionCategory from '@/components/annual-report/SectionCategory.vue';
 import SectionHighlight from '@/components/annual-report/SectionHighlight.vue';
 import SectionEmotion from '@/components/annual-report/SectionEmotion.vue';
@@ -40,6 +41,8 @@ onMounted(async () => {
     reportData.value.emotion = emotionData;
     const easterEggData = await getReportEasterEgg(startTime, endTime);
     reportData.value.easterEgg = easterEggData;
+    const expenseData = await getReportExpenses(startTime, endTime);
+    reportData.value.expense = expenseData;
   } catch (error) {
     console.error('Failed to load report data', error);
   } finally {
@@ -79,6 +82,9 @@ const handleReplay = () => {
         <!-- 3. Account -->
         <SectionAccount :time="reportData.time" :emotion="reportData.emotion" />
 
+        <!-- 3.5 Expense -->
+        <SectionExpense v-if="reportData.expense" :data="reportData.expense" :startTime="startTime" :endTime="endTime" />
+
         <!-- 4. Category -->
         <SectionCategory :data="reportData.memory" />