From 49023237e7a680b8b4303c763d390b6d8e6ca8c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <sunchengsuncheng@gmail.com>
Date: Sun, 11 Jan 2026 12:41:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E9=A2=84=E7=AE=97?=
 =?UTF-8?q?=E6=91=98=E8=A6=81=E7=BB=84=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=EF=BC=9B=E5=9C=A8=E9=A2=84?=
 =?UTF-8?q?=E7=AE=97=E8=A7=86=E5=9B=BE=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E7=BB=91=E5=AE=9A=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/components/Budget/BudgetSummary.vue | 182 ++++++++++++++++++--
 Web/src/views/BudgetView.vue                |  36 +++-
 2 files changed, 193 insertions(+), 25 deletions(-)

diff --git a/Web/src/components/Budget/BudgetSummary.vue b/Web/src/components/Budget/BudgetSummary.vue
index 8372c4f..02ae88d 100644
--- a/Web/src/components/Budget/BudgetSummary.vue
+++ b/Web/src/components/Budget/BudgetSummary.vue
@@ -1,23 +1,50 @@
 <template>
-  <div v-if="stats && (stats.month || stats.year)" class="summary-card common-card">
-    <template v-for="(config, key) in periodConfigs" :key="key">
-      <div class="summary-item">
-        <div class="label">{{ config.label }}{{ title }}率</div>
-        <div class="value" :class="getValueClass(stats[key]?.rate || '0.0')">
-          {{ stats[key]?.rate || '0.0' }}<span class="unit">%</span>
+  <div class="summary-container">
+    <transition :name="transitionName" mode="out-in">
+      <div v-if="stats && (stats.month || stats.year)" :key="dateKey" class="summary-card common-card">
+        <!-- 左切换按钮 -->
+        <div class="nav-arrow left" @click.stop="changeMonth(-1)">
+          <van-icon name="arrow-left" />
         </div>
-        <div class="sub-info">
-          <span class="amount">¥{{ formatMoney(stats[key]?.current || 0) }}</span>
-          <span class="separator">/</span>
-          <span class="amount">¥{{ formatMoney(stats[key]?.limit || 0) }}</span>
+
+        <div class="summary-content">
+          <template v-for="(config, key) in periodConfigs" :key="key">
+            <div class="summary-item">
+              <div class="label">{{ config.label }}{{ title }}率</div>
+              <div class="value" :class="getValueClass(stats[key]?.rate || '0.0')">
+                {{ stats[key]?.rate || '0.0' }}<span class="unit">%</span>
+              </div>
+              <div class="sub-info">
+                <span class="amount">¥{{ formatMoney(stats[key]?.current || 0) }}</span>
+                <span class="separator">/</span>
+                <span class="amount">¥{{ formatMoney(stats[key]?.limit || 0) }}</span>
+              </div>
+            </div>
+            <div v-if="config.showDivider" class="divider"></div>
+          </template>
+        </div>
+
+        <!-- 右切换按钮 -->
+        <div 
+          class="nav-arrow right" 
+          :class="{ disabled: isCurrentMonth }"
+          @click.stop="!isCurrentMonth && changeMonth(1)"
+        >
+          <van-icon name="arrow" />
+        </div>
+
+        <!-- 非本月时显示的日期标识 -->
+        <div v-if="!isCurrentMonth" class="date-tag">
+          {{ props.date.getFullYear() }}年{{ props.date.getMonth() + 1 }}月
         </div>
       </div>
-      <div v-if="config.showDivider" class="divider"></div>
-    </template>
+    </transition>
   </div>
 </template>
 
 <script setup>
+import { computed, ref } from 'vue'
+
 const props = defineProps({
   stats: {
     type: Object,
@@ -30,12 +57,40 @@ const props = defineProps({
   getValueClass: {
     type: Function,
     required: true
+  },
+  date: {
+    type: Date,
+    default: () => new Date()
   }
 })
 
-const periodConfigs = {
-  month: { label: '本月', showDivider: true },
-  year: { label: '年度', showDivider: false }
+const emit = defineEmits(['update:date'])
+
+const transitionName = ref('slide-right')
+const dateKey = computed(() => props.date.getFullYear() + '-' + props.date.getMonth())
+
+const isCurrentMonth = computed(() => {
+  const now = new Date()
+  return props.date.getFullYear() === now.getFullYear() && 
+         props.date.getMonth() === now.getMonth()
+})
+
+const periodConfigs = computed(() => ({
+  month: { 
+    label: isCurrentMonth.value ? '本月' : `${props.date.getMonth() + 1}月`, 
+    showDivider: true 
+  },
+  year: { 
+    label: isCurrentMonth.value ? '年度' : `${props.date.getFullYear()}年`, 
+    showDivider: false 
+  }
+}))
+
+const changeMonth = (delta) => {
+  transitionName.value = delta > 0 ? 'slide-left' : 'slide-right'
+  const newDate = new Date(props.date)
+  newDate.setMonth(newDate.getMonth() + delta)
+  emit('update:date', newDate)
 }
 
 const formatMoney = (val) => {
@@ -44,14 +99,99 @@ const formatMoney = (val) => {
 </script>
 
 <style scoped>
+.summary-container {
+  margin-top: 12px;
+  position: relative;
+}
+
 .summary-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 16px 36px;
+  margin: 0 12px 8px;
+  min-height: 80px;
+}
+
+.summary-content {
+  flex: 1;
   display: flex;
   justify-content: space-around;
   align-items: center;
   text-align: center;
-  padding: 12px 16px;
-  margin-top: 12px;
-  margin-bottom: 4px;
+}
+
+.nav-arrow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #c8c9cc;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 1;
+}
+
+.nav-arrow:active {
+  color: var(--van-primary-color);
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.nav-arrow.left {
+  left: 0;
+}
+
+.nav-arrow.right {
+  right: 0;
+}
+
+.nav-arrow.disabled {
+  color: #f2f3f5;
+  cursor: not-allowed;
+}
+
+.date-tag {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--van-primary-color);
+  background-color: var(--van-primary-color-light);
+  padding: 1px 8px;
+  border-radius: 0 0 8px 8px;
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+/* 动画效果 */
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
 }
 
 .summary-item {
@@ -113,6 +253,12 @@ const formatMoney = (val) => {
 }
 
 @media (prefers-color-scheme: dark) {
+  .nav-arrow:active {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  .nav-arrow.disabled {
+    color: #323233;
+  }
   .summary-item .value {
     color: #f5f5f5;
   }
diff --git a/Web/src/views/BudgetView.vue b/Web/src/views/BudgetView.vue
index 5f935c9..5af2069 100644
--- a/Web/src/views/BudgetView.vue
+++ b/Web/src/views/BudgetView.vue
@@ -29,6 +29,7 @@
       <van-tab title="支出" :name="BudgetCategory.Expense">
         <BudgetSummary 
           v-if="activeTab !== BudgetCategory.Savings"
+          v-model:date="selectedDate"
           :stats="overallStats" 
           :title="activeTabTitle" 
           :get-value-class="getValueClass" 
@@ -80,6 +81,7 @@
       <van-tab title="收入" :name="BudgetCategory.Income">
         <BudgetSummary 
           v-if="activeTab !== BudgetCategory.Savings"
+          v-model:date="selectedDate"
           :stats="overallStats" 
           :title="activeTabTitle" 
           :get-value-class="getValueClass" 
@@ -217,6 +219,7 @@ import SavingsConfigPopup from '@/components/Budget/SavingsConfigPopup.vue'
 import PopupContainer from '@/components/PopupContainer.vue'
 
 const activeTab = ref(BudgetCategory.Expense)
+const selectedDate = ref(new Date())
 const budgetEditRef = ref(null)
 const savingsConfigRef = ref(null)
 const isRefreshing = ref(false)
@@ -240,6 +243,14 @@ watch(activeTab, async () => {
   await Promise.all([fetchCategoryStats(), fetchUncoveredCategories()])
 })
 
+watch(selectedDate, async () => {
+  await Promise.all([
+    fetchBudgetList(),
+    fetchCategoryStats(),
+    fetchUncoveredCategories()
+  ])
+})
+
 const getValueClass = (rate) => {
   const numRate = parseFloat(rate)
   if (numRate === 0) return ''
@@ -256,7 +267,7 @@ const getValueClass = (rate) => {
 
 const fetchBudgetList = async () => {
   try {
-    const res = await getBudgetList()
+    const res = await getBudgetList(selectedDate.value.toISOString())
     if (res.success) {
       const data = res.data || []
       expenseBudgets.value = data.filter(b => b.category === BudgetCategory.Expense)
@@ -280,7 +291,7 @@ const onRefresh = async () => {
 
 const fetchCategoryStats = async () => {
   try {
-    const res = await getCategoryStats(activeTab.value)
+    const res = await getCategoryStats(activeTab.value, selectedDate.value.toISOString())
     if (res.success) {
       // 转换后端返回的数据格式为前端需要的格式
       const data = res.data
@@ -310,7 +321,7 @@ const fetchUncoveredCategories = async () => {
     return
   }
   try {
-    const res = await getUncoveredCategories(activeTab.value)
+    const res = await getUncoveredCategories(activeTab.value, selectedDate.value.toISOString())
     if (res.success) {
       uncoveredCategories.value = res.data || []
     }
@@ -336,11 +347,22 @@ const formatMoney = (val) => {
 }
 
 const getPeriodLabel = (type) => {
-  const map = {
-    [BudgetPeriodType.Month]: '本月',
-    [BudgetPeriodType.Year]: '本年'
+  const isCurrent = (date) => {
+    const now = new Date()
+    return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth()
   }
-  return map[type] || '周期'
+  const isCurrentYear = (date) => {
+    const now = new Date()
+    return date.getFullYear() === now.getFullYear()
+  }
+
+  if (type === BudgetPeriodType.Month) {
+    return isCurrent(selectedDate.value) ? '本月' : `${selectedDate.value.getMonth() + 1}月`
+  }
+  if (type === BudgetPeriodType.Year) {
+    return isCurrentYear(selectedDate.value) ? '本年' : `${selectedDate.value.getFullYear()}年`
+  }
+  return '周期'
 }
 
 const getProgressColor = (budget) => {