新增：统计功能

Web/src/api/statistics.js

@@ -0,0 +1,90 @@
+import request from './request'
+
+/**
+ * 统计相关 API
+ * 注：统计接口定义在 TransactionRecordController 中
+ */
+
+/**
+ * 获取月度统计数据
+ * @param {Object} params - 查询参数
+ * @param {number} params.year - 年份
+ * @param {number} params.month - 月份
+ * @returns {Promise<{success: boolean, data: Object}>}
+ * @returns {Object} data.totalExpense - 总支出
+ * @returns {Object} data.totalIncome - 总收入
+ * @returns {Object} data.balance - 结余
+ * @returns {Object} data.expenseCount - 支出笔数
+ * @returns {Object} data.incomeCount - 收入笔数
+ * @returns {Object} data.totalCount - 总笔数
+ * @returns {Object} data.maxExpense - 最大单笔支出
+ * @returns {Object} data.maxIncome - 最大单笔收入
+ */
+export const getMonthlyStatistics = (params) => {
+  return request({
+    url: '/TransactionRecord/GetMonthlyStatistics',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取分类统计数据
+ * @param {Object} params - 查询参数
+ * @param {number} params.year - 年份
+ * @param {number} params.month - 月份
+ * @param {number} params.type - 交易类型 (0:支出, 1:收入, 2:不计入收支)
+ * @returns {Promise<{success: boolean, data: Array}>}
+ * @returns {Array} data - 分类统计列表
+ * @returns {string} data[].classify - 分类名称
+ * @returns {number} data[].amount - 金额
+ * @returns {number} data[].percent - 百分比
+ * @returns {number} data[].count - 交易笔数
+ */
+export const getCategoryStatistics = (params) => {
+  return request({
+    url: '/TransactionRecord/GetCategoryStatistics',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取趋势统计数据
+ * @param {Object} params - 查询参数
+ * @param {number} params.startYear - 开始年份
+ * @param {number} params.startMonth - 开始月份
+ * @param {number} [params.monthCount=6] - 月份数量，默认6个月
+ * @returns {Promise<{success: boolean, data: Array}>}
+ * @returns {Array} data - 趋势统计列表
+ * @returns {number} data[].year - 年份
+ * @returns {number} data[].month - 月份
+ * @returns {number} data[].expense - 支出金额
+ * @returns {number} data[].income - 收入金额
+ */
+export const getTrendStatistics = (params) => {
+  return request({
+    url: '/TransactionRecord/GetTrendStatistics',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取指定月份每天的消费统计
+ * @param {Object} params - 查询参数
+ * @param {number} params.year - 年份
+ * @param {number} params.month - 月份
+ * @returns {Promise<{success: boolean, data: Array}>}
+ * @returns {Array} data - 每日统计列表
+ * @returns {string} data[].date - 日期
+ * @returns {number} data[].count - 交易笔数
+ * @returns {number} data[].amount - 交易金额
+ */
+export const getDailyStatistics = (params) => {
+  return request({
+    url: '/TransactionRecord/GetDailyStatistics',
+    method: 'get',
+    params
+  })
+}

Web/src/router/index.js

@@ -57,6 +57,18 @@ const router = createRouter({
       name: 'classification-nlp',
       component: () => import('../views/ClassificationNLP.vue'),
       meta: { requiresAuth: true },
+    },
+    {
+      path: '/statistics',
+      name: 'statistics',
+      component: () => import('../views/StatisticsView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/bill-analysis',
+      name: 'bill-analysis',
+      component: () => import('../views/BillAnalysisView.vue'),
+      meta: { requiresAuth: true },
     }
   ],
 })

Web/src/views/BillAnalysisView.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="analysis-container">
+    <!-- 顶部导航栏 -->
+    <van-nav-bar 
+      title="智能分析" 
+      left-arrow 
+      placeholder 
+      @click-left="onClickLeft"
+    />
+
+    <div class="analysis-content">
+      <!-- 输入区域 -->
+      <div class="input-section">
+        <div class="input-header">
+          <h3>输入您的问题</h3>
+          <p class="input-tip">例如：我这三个月坐车花费了多少钱？</p>
+        </div>
+        
+        <van-field
+          v-model="userInput"
+          rows="2"
+          autosize
+          type="textarea"
+          maxlength="500"
+          placeholder="请输入您想了解的账单问题..."
+          show-word-limit
+          :disabled="analyzing"
+        />
+        
+        <div class="quick-questions">
+          <div class="quick-title">快捷问题</div>
+          <van-tag 
+            v-for="(q, index) in quickQuestions" 
+            :key="index"
+            type="primary"
+            plain
+            size="medium"
+            @click="selectQuestion(q)"
+            class="quick-tag"
+          >
+            {{ q }}
+          </van-tag>
+        </div>
+
+        <van-button 
+          type="primary" 
+          block 
+          round
+          :loading="analyzing"
+          loading-text="分析中..."
+          @click="startAnalysis"
+          :disabled="!userInput.trim()"
+        >
+          开始分析
+        </van-button>
+      </div>
+
+      <!-- 结果区域 -->
+      <div class="result-section" v-if="showResult">
+        <div class="result-header">
+          <h3>分析结果</h3>
+          <van-icon 
+            name="delete-o" 
+            size="18" 
+            @click="clearResult"
+            v-if="!analyzing"
+          />
+        </div>
+        
+        <div class="result-content" ref="resultContainer">
+          <div v-html="resultHtml"></div>
+          <van-loading v-if="analyzing" class="result-loading">
+            AI正在分析中...
+          </van-loading>
+          <div ref="scrollAnchor"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+
+const router = useRouter()
+const userInput = ref('')
+const analyzing = ref(false)
+const showResult = ref(false)
+const resultHtml = ref('')
+const resultContainer = ref(null)
+const scrollAnchor = ref(null)
+
+// 快捷问题
+const quickQuestions = [
+  '最近三个月交通费用多少？',
+  '这个月吃饭花了多少钱？',
+  '上个月的收入总额是多少？',
+  '最近半年哪个月花钱最多？'
+]
+
+// 返回
+const onClickLeft = () => {
+  router.back()
+}
+
+// 选择快捷问题
+const selectQuestion = (question) => {
+  userInput.value = question
+}
+
+// 清空结果
+const clearResult = () => {
+  showResult.value = false
+  resultHtml.value = ''
+}
+
+// 滚动到底部
+const scrollToBottom = async () => {
+  await nextTick()
+  if (scrollAnchor.value) {
+    scrollAnchor.value.scrollIntoView({ behavior: 'smooth', block: 'end' })
+  }
+}
+
+// 开始分析
+const startAnalysis = async () => {
+  if (!userInput.value.trim()) {
+    showToast('请输入您的问题')
+    return
+  }
+
+  analyzing.value = true
+  showResult.value = true
+  resultHtml.value = ''
+
+  try {
+    var baseUrl = import.meta.env.VITE_API_BASE_URL || ''
+    const response = await fetch(`${baseUrl}/TransactionRecord/AnalyzeBill`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        userInput: userInput.value
+      })
+    })
+
+    if (!response.ok) {
+      throw new Error('分析请求失败')
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const { done, value } = await reader.read()
+      
+      if (done) break
+
+      const chunk = decoder.decode(value, { stream: true })
+      const lines = chunk.split('\n')
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const data = line.substring(6).trim()
+          
+          if (data === '[DONE]') {
+            continue
+          }
+
+          try {
+            const json = JSON.parse(data)
+            if (json.content) {
+              resultHtml.value += json.content
+              // 滚动到底部
+              scrollToBottom()
+            }
+          } catch (e) {
+            // 忽略JSON解析错误
+          }
+        }
+      }
+    }
+
+  } catch (error) {
+    console.error('分析失败:', error)
+    showToast('分析失败，请重试')
+    resultHtml.value = '<div class="error-message">分析失败，请重试</div>'
+  } finally {
+    analyzing.value = false
+    // 确保分析完成后滚动到底部
+    scrollToBottom()
+  }
+}
+</script>
+
+<style scoped>
+.analysis-container {
+  min-height: 100vh;
+  background: var(--van-background-2);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.analysis-content {
+  padding: 16px;
+}
+
+/* 输入区域 */
+.input-section {
+  background: var(--van-background);
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--van-border-color);
+  margin-bottom: 16px;
+}
+
+.input-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  margin: 0 0 8px 0;
+}
+
+.input-tip {
+  font-size: 13px;
+  color: var(--van-text-color-3);
+  margin: 0 0 16px 0;
+}
+
+.quick-questions {
+  margin: 16px 0;
+}
+
+.quick-title {
+  font-size: 14px;
+  color: var(--van-text-color-2);
+  margin-bottom: 12px;
+}
+
+.quick-tag {
+  margin: 0 8px 8px 0;
+  cursor: pointer;
+}
+
+/* 结果区域 */
+.result-section {
+  background: var(--van-background);
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--van-border-color);
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--van-border-color);
+}
+
+.result-header h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  margin: 0;
+}
+
+.result-content {
+  max-height: 60vh;
+  overflow-y: auto;
+  line-height: 1.8;
+  color: var(--van-text-color);
+}
+
+.result-loading {
+  text-align: center;
+  padding: 20px;
+}
+
+/* 结果HTML样式 */
+.result-content :deep(h1),
+.result-content :deep(h2),
+.result-content :deep(h3) {
+  color: var(--van-text-color);
+  margin: 16px 0 12px 0;
+  font-weight: 600;
+}
+
+.result-content :deep(h1) {
+  font-size: 20px;
+}
+
+.result-content :deep(h2) {
+  font-size: 18px;
+}
+
+.result-content :deep(h3) {
+  font-size: 16px;
+}
+
+.result-content :deep(p) {
+  margin: 8px 0;
+  color: var(--van-text-color);
+}
+
+.result-content :deep(ul),
+.result-content :deep(ol) {
+  padding-left: 24px;
+  margin: 12px 0;
+}
+
+.result-content :deep(li) {
+  margin: 6px 0;
+  color: var(--van-text-color);
+}
+
+.result-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+}
+
+.result-content :deep(th),
+.result-content :deep(td) {
+  padding: 10px;
+  text-align: left;
+  border: 1px solid var(--van-border-color);
+}
+
+.result-content :deep(th) {
+  background: var(--van-background-2);
+  font-weight: 600;
+  color: var(--van-text-color);
+}
+
+.result-content :deep(td) {
+  color: var(--van-text-color);
+}
+
+.result-content :deep(strong) {
+  color: var(--van-text-color);
+  font-weight: 600;
+}
+
+.result-content :deep(.highlight) {
+  background: #fff3cd;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #856404;
+}
+
+.result-content :deep(.expense-value) {
+  color: #ff6b6b;
+  font-weight: 600;
+}
+
+.result-content :deep(.income-value) {
+  color: #51cf66;
+  font-weight: 600;
+}
+
+.error-message {
+  color: #ff6b6b;
+  text-align: center;
+  padding: 20px;
+}
+
+/* 暗色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .result-content :deep(.highlight) {
+    background: rgba(255, 243, 205, 0.2);
+    color: #ffc107;
+  }
+}
+</style>

Web/src/views/StatisticsView.vue

@@ -0,0 +1,834 @@
+<template>
+  <div class="statistics-container">
+    <!-- 顶部导航栏 -->
+    <van-nav-bar title="账单统计" placeholder>
+      <template #right>
+        <van-icon name="chat-o" size="20" @click="goToAnalysis" />
+      </template>
+    </van-nav-bar>
+
+    <!-- 下拉刷新 -->
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <!-- 加载中 -->
+      <van-loading v-if="loading" vertical style="padding: 100px 0">
+        加载统计数据中...
+      </van-loading>
+
+      <!-- 统计内容 -->
+      <div v-else class="statistics-content">
+        <!-- 月份选择器 -->
+        <div class="month-selector">
+          <van-button 
+            icon="arrow-left" 
+            plain 
+            size="small" 
+            @click="changeMonth(-1)"
+          />
+          <div class="month-text" @click="showMonthPicker = true">
+            {{ currentYear }}年{{ currentMonth }}月
+            <van-icon name="arrow-down" />
+          </div>
+          <van-button 
+            icon="arrow" 
+            plain 
+            size="small" 
+            @click="changeMonth(1)"
+            :disabled="isCurrentMonth"
+          />
+        </div>
+
+        <!-- 月度概览卡片 -->
+        <div class="overview-card">
+          <div class="overview-item">
+            <div class="label">总支出</div>
+            <div class="value expense">¥{{ formatMoney(monthlyData.totalExpense) }}</div>
+            <div class="sub-text">{{ monthlyData.expenseCount }}笔</div>
+          </div>
+          <div class="divider"></div>
+          <div class="overview-item">
+            <div class="label">总收入</div>
+            <div class="value income">¥{{ formatMoney(monthlyData.totalIncome) }}</div>
+            <div class="sub-text">{{ monthlyData.incomeCount }}笔</div>
+          </div>
+          <div class="divider"></div>
+          <div class="overview-item">
+            <div class="label">结余</div>
+            <div class="value" :class="monthlyData.balance >= 0 ? 'income' : 'expense'">
+              {{ monthlyData.balance >= 0 ? '' : '-' }}¥{{ formatMoney(Math.abs(monthlyData.balance)) }}
+            </div>
+            <div class="sub-text">{{ monthlyData.totalCount }}笔交易</div>
+          </div>
+        </div>
+
+        <!-- 分类统计 -->
+        <div class="stat-card">
+          <div class="stat-header">
+            <h3 class="stat-title">支出分类统计</h3>
+            <van-tag type="primary" size="medium">{{ expenseCategories.length }}类</van-tag>
+          </div>
+          
+          <!-- 环形图区域 -->
+          <div class="chart-container" v-if="expenseCategories.length > 0">
+            <div class="ring-chart">
+              <svg viewBox="0 0 200 200" class="ring-svg">
+                <circle 
+                  v-for="(segment, index) in chartSegments"
+                  :key="index"
+                  cx="100" 
+                  cy="100" 
+                  r="70"
+                  fill="none"
+                  :stroke="segment.color"
+                  :stroke-width="35"
+                  :stroke-dasharray="`${segment.length} ${circumference - segment.length}`"
+                  :stroke-dashoffset="-segment.offset"
+                  transform="rotate(-90 100 100)"
+                  class="ring-segment"
+                />
+              </svg>
+              <div class="ring-center">
+                <div class="center-value">¥{{ formatMoney(monthlyData.totalExpense) }}</div>
+                <div class="center-label">总支出</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分类列表 -->
+          <div class="category-list" v-if="expenseCategories.length > 0">
+            <div 
+              v-for="(category) in expenseCategories" 
+              :key="category.classify"
+              class="category-item"
+            >
+              <div class="category-info">
+                <div class="category-color" :style="{ backgroundColor: category.color }"></div>
+                <span class="category-name">{{ category.classify || '未分类' }}</span>
+              </div>
+              <div class="category-stats">
+                <div class="category-amount">¥{{ formatMoney(category.amount) }}</div>
+                <div class="category-percent">{{ category.percent }}%</div>
+              </div>
+            </div>
+          </div>
+
+          <van-empty 
+            v-else
+            description="本月暂无支出记录" 
+            image="search"
+          />
+        </div>
+
+        <!-- 收入分类统计 -->
+        <div class="stat-card" v-if="incomeCategories.length > 0">
+          <div class="stat-header">
+            <h3 class="stat-title">收入分类统计</h3>
+            <van-tag type="success" size="medium">{{ incomeCategories.length }}类</van-tag>
+          </div>
+          
+          <div class="category-list">
+            <div 
+              v-for="category in incomeCategories" 
+              :key="category.classify"
+              class="category-item"
+            >
+              <div class="category-info">
+                <div class="category-color income-color"></div>
+                <span class="category-name">{{ category.classify || '未分类' }}</span>
+              </div>
+              <div class="category-stats">
+                <div class="category-amount income-text">¥{{ formatMoney(category.amount) }}</div>
+                <div class="category-percent">{{ category.percent }}%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 趋势统计 -->
+        <div class="stat-card">
+          <div class="stat-header">
+            <h3 class="stat-title">近6个月趋势</h3>
+          </div>
+          
+          <div class="trend-chart">
+            <div class="trend-bars">
+              <div 
+                v-for="item in trendData" 
+                :key="item.month"
+                class="trend-bar-group"
+              >
+                <div class="bar-container">
+                  <div 
+                    class="bar expense-bar"
+                    :style="{ height: getBarHeight(item.expense, maxTrendValue) }"
+                  >
+                    <div class="bar-value" v-if="item.expense > 0">
+                      {{ formatShortMoney(item.expense) }}
+                    </div>
+                  </div>
+                  <div 
+                    class="bar income-bar"
+                    :style="{ height: getBarHeight(item.income, maxTrendValue) }"
+                  >
+                    <div class="bar-value" v-if="item.income > 0">
+                      {{ formatShortMoney(item.income) }}
+                    </div>
+                  </div>
+                </div>
+                <div class="bar-label">{{ item.label }}</div>
+              </div>
+            </div>
+            
+            <div class="trend-legend">
+              <div class="legend-item">
+                <div class="legend-color expense-color"></div>
+                <span>支出</span>
+              </div>
+              <div class="legend-item">
+                <div class="legend-color income-color"></div>
+                <span>收入</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 其他统计 -->
+        <div class="stat-card">
+          <div class="stat-header">
+            <h3 class="stat-title">其他统计</h3>
+          </div>
+          
+          <div class="other-stats">
+            <div class="stat-item">
+              <div class="stat-label">日均支出</div>
+              <div class="stat-value">¥{{ formatMoney(dailyAverage.expense) }}</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">日均收入</div>
+              <div class="stat-value income-text">¥{{ formatMoney(dailyAverage.income) }}</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">最大单笔支出</div>
+              <div class="stat-value">¥{{ formatMoney(monthlyData.maxExpense) }}</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">最大单笔收入</div>
+              <div class="stat-value income-text">¥{{ formatMoney(monthlyData.maxIncome) }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 底部安全距离 -->
+        <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
+      </div>
+    </van-pull-refresh>
+
+    <!-- 月份选择器 -->
+    <van-popup v-model:show="showMonthPicker" position="bottom" round>
+      <van-date-picker
+        v-model="selectedDate"
+        title="选择月份"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :columns-type="['year', 'month']"
+        @confirm="onMonthConfirm"
+        @cancel="showMonthPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { showToast } from 'vant'
+import { useRouter } from 'vue-router'
+import { getMonthlyStatistics, getCategoryStatistics, getTrendStatistics } from '@/api/statistics'
+
+const router = useRouter()
+
+// 响应式数据
+const loading = ref(true)
+const refreshing = ref(false)
+const showMonthPicker = ref(false)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth() + 1)
+const selectedDate = ref([new Date().getFullYear().toString(), (new Date().getMonth() + 1).toString().padStart(2, '0')])
+
+// 月度数据
+const monthlyData = ref({
+  totalExpense: 0,
+  totalIncome: 0,
+  balance: 0,
+  expenseCount: 0,
+  incomeCount: 0,
+  totalCount: 0,
+  maxExpense: 0,
+  maxIncome: 0
+})
+
+// 分类数据
+const expenseCategories = ref([])
+const incomeCategories = ref([])
+
+// 趋势数据
+const trendData = ref([])
+
+// 日期范围
+const minDate = new Date(2020, 0, 1)
+const maxDate = new Date()
+
+// 颜色配置
+const colors = [
+  '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
+  '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B88B', '#AAB7B8',
+  '#FF8ED4', '#67E6DC', '#FFAB73', '#C9B1FF', '#7BDFF2'
+]
+
+// 计算环形图数据
+const circumference = computed(() => 2 * Math.PI * 70)
+const chartSegments = computed(() => {
+  let offset = 0
+  return expenseCategories.value.map((category) => {
+    const percent = category.percent / 100
+    const length = circumference.value * percent
+    const segment = {
+      color: category.color,
+      length,
+      offset
+    }
+    offset += length
+    return segment
+  })
+})
+
+// 日均统计
+const dailyAverage = computed(() => {
+  const daysInMonth = new Date(currentYear.value, currentMonth.value, 0).getDate()
+  return {
+    expense: monthlyData.value.totalExpense / daysInMonth,
+    income: monthlyData.value.totalIncome / daysInMonth
+  }
+})
+
+// 趋势图最大值
+const maxTrendValue = computed(() => {
+  const allValues = trendData.value.flatMap(item => [item.expense, item.income])
+  return Math.max(...allValues, 1)
+})
+
+// 是否是当前月
+const isCurrentMonth = computed(() => {
+  const now = new Date()
+  return currentYear.value === now.getFullYear() && currentMonth.value === now.getMonth() + 1
+})
+
+// 格式化金额
+const formatMoney = (value) => {
+  if (!value && value !== 0) return '0.00'
+  return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+// 格式化短金额（k为单位）
+const formatShortMoney = (value) => {
+  if (!value) return '0'
+  if (value >= 10000) {
+    return (value / 10000).toFixed(1) + 'w'
+  }
+  if (value >= 1000) {
+    return (value / 1000).toFixed(1) + 'k'
+  }
+  return value.toFixed(0)
+}
+
+// 获取柱状图高度
+const getBarHeight = (value, maxValue) => {
+  if (!value || !maxValue) return '0%'
+  const percent = (value / maxValue) * 100
+  return Math.max(percent, 5) + '%' // 最小5%以便显示
+}
+
+// 切换月份
+const changeMonth = (offset) => {
+  let newMonth = currentMonth.value + offset
+  let newYear = currentYear.value
+
+  if (newMonth > 12) {
+    newMonth = 1
+    newYear++
+  } else if (newMonth < 1) {
+    newMonth = 12
+    newYear--
+  }
+
+  // 不能超过当前月份
+  const now = new Date()
+  const targetDate = new Date(newYear, newMonth - 1)
+  if (targetDate > now) {
+    return
+  }
+
+  currentYear.value = newYear
+  currentMonth.value = newMonth
+  fetchStatistics()
+}
+
+// 确认月份选择
+const onMonthConfirm = ({ selectedValues }) => {
+  currentYear.value = parseInt(selectedValues[0])
+  currentMonth.value = parseInt(selectedValues[1])
+  showMonthPicker.value = false
+  fetchStatistics()
+}
+
+// 下拉刷新
+const onRefresh = async () => {
+  await fetchStatistics()
+  refreshing.value = false
+}
+
+// 获取统计数据
+const fetchStatistics = async () => {
+  loading.value = true
+  try {
+    await Promise.all([
+      fetchMonthlyData(),
+      fetchCategoryData(),
+      fetchTrendData()
+    ])
+  } catch (error) {
+    console.error('获取统计数据失败:', error)
+    showToast('获取统计数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取月度数据
+const fetchMonthlyData = async () => {
+  try {
+    const response = await getMonthlyStatistics({
+      year: currentYear.value,
+      month: currentMonth.value
+    })
+
+    if (response.success && response.data) {
+      monthlyData.value = response.data
+    }
+  } catch (error) {
+    console.error('获取月度数据失败:', error)
+    showToast('获取月度数据失败')
+  }
+}
+
+// 获取分类数据
+const fetchCategoryData = async () => {
+  try {
+    // 获取支出分类
+    const expenseResponse = await getCategoryStatistics({
+      year: currentYear.value,
+      month: currentMonth.value,
+      type: 0 // 支出
+    })
+
+    if (expenseResponse.success && expenseResponse.data) {
+      expenseCategories.value = expenseResponse.data.map((item, index) => ({
+        classify: item.classify,
+        amount: item.amount,
+        percent: item.percent,
+        color: colors[index % colors.length]
+      }))
+    }
+
+    // 获取收入分类
+    const incomeResponse = await getCategoryStatistics({
+      year: currentYear.value,
+      month: currentMonth.value,
+      type: 1 // 收入
+    })
+
+    if (incomeResponse.success && incomeResponse.data) {
+      incomeCategories.value = incomeResponse.data.map(item => ({
+        classify: item.classify,
+        amount: item.amount,
+        percent: item.percent
+      }))
+    }
+  } catch (error) {
+    console.error('获取分类数据失败:', error)
+    showToast('获取分类数据失败')
+  }
+}
+
+// 获取趋势数据
+const fetchTrendData = async () => {
+  try {
+    // 计算开始年月（当前月往前推5个月）
+    let startYear = currentYear.value
+    let startMonth = currentMonth.value - 5
+    
+    if (startMonth <= 0) {
+      startMonth += 12
+      startYear--
+    }
+    
+    const response = await getTrendStatistics({
+      startYear,
+      startMonth,
+      monthCount: 6
+    })
+    
+    if (response.success && response.data) {
+      trendData.value = response.data.map(item => ({
+        year: item.year,
+        month: item.month,
+        label: `${item.month}月`,
+        expense: item.expense,
+        income: item.income
+      }))
+    }
+  } catch (error) {
+    console.error('获取趋势数据失败:', error)
+    showToast('获取趋势数据失败')
+  }
+}
+
+// 跳转到智能分析页面
+const goToAnalysis = () => {
+  router.push('/bill-analysis')
+}
+
+// 初始化
+onMounted(() => {
+  fetchStatistics()
+})
+</script>
+
+<style scoped>
+.statistics-container {
+  min-height: 100vh;
+  background: var(--van-background-2);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.statistics-content {
+  padding: 16px 0 0 0;
+}
+
+/* 月份选择器 */
+.month-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  margin: 0 12px 16px;
+  background: var(--van-background);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.month-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 月度概览卡片 */
+.overview-card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: var(--van-background);
+  margin: 0 12px 16px;
+  padding: 24px 12px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--van-border-color);
+}
+
+.overview-item {
+  flex: 1;
+  text-align: center;
+}
+
+.overview-item .label {
+  font-size: 13px;
+  color: var(--van-text-color-2);
+  margin-bottom: 8px;
+}
+
+.overview-item .value {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.overview-item .sub-text {
+  font-size: 12px;
+  color: var(--van-text-color-3);
+}
+
+.divider {
+  width: 1px;
+  height: 40px;
+  background: var(--van-border-color);
+}
+
+.expense {
+  color: #ff6b6b;
+}
+
+.income {
+  color: #51cf66;
+}
+
+/* 统计卡片 */
+.stat-card {
+  background: var(--van-background);
+  margin: 0 12px 16px;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--van-border-color);
+}
+
+.stat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.stat-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  margin: 0;
+}
+
+/* 环形图 */
+.chart-container {
+  padding: 20px;
+}
+
+.ring-chart {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+}
+
+.ring-svg {
+  width: 100%;
+  height: 100%;
+  transform: scale(1);
+}
+
+.ring-segment {
+  transition: all 0.3s ease;
+}
+
+.ring-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.center-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--van-text-color);
+  margin-bottom: 4px;
+}
+
+.center-label {
+  font-size: 13px;
+  color: var(--van-text-color-2);
+}
+
+/* 分类列表 */
+.category-list {
+  padding: 12px 16px;
+}
+
+.category-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--van-border-color);
+}
+
+.category-item:last-child {
+  border-bottom: none;
+}
+
+.category-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.category-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.category-name {
+  font-size: 14px;
+  color: var(--van-text-color);
+}
+
+.category-stats {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.category-amount {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--van-text-color);
+}
+
+.category-percent {
+  font-size: 12px;
+  color: var(--van-text-color-3);
+  background: var(--van-background-2);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.income-color {
+  background-color: #51cf66;
+}
+
+.income-text {
+  color: #51cf66;
+}
+
+.expense-color {
+  background-color: #ff6b6b;
+}
+
+/* 趋势图 */
+.trend-chart {
+  padding: 20px 16px;
+}
+
+.trend-bars {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: 180px;
+  margin-bottom: 16px;
+  padding: 0 4px;
+}
+
+.trend-bar-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.bar-container {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 4px;
+  padding: 0 2px;
+}
+
+.bar {
+  flex: 1;
+  max-width: 20px;
+  min-height: 4px;
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.expense-bar {
+  background: linear-gradient(180deg, #ff6b6b 0%, #ff8787 100%);
+}
+
+.income-bar {
+  background: linear-gradient(180deg, #51cf66 0%, #69db7c 100%);
+}
+
+.bar-value {
+  font-size: 10px;
+  color: var(--van-text-color-2);
+  white-space: nowrap;
+  margin-top: -18px;
+}
+
+.bar-label {
+  font-size: 11px;
+  color: var(--van-text-color-3);
+}
+
+.trend-legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  padding-top: 12px;
+  border-top: 1px solid var(--van-border-color);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--van-text-color-2);
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+/* 其他统计 */
+.other-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 16px;
+}
+
+.stat-item {
+  background: var(--van-background-2);
+  padding: 16px;
+  border-radius: 12px;
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--van-text-color-2);
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--van-text-color);
+}
+
+</style>