添加动态目标

Web/src/views/BudgetView.vue

@@ -170,6 +170,33 @@
                     </div>
                   </div>
                 </template>
+                
+                <template #footer>
+                  <div class="card-footer-actions">
+                    <van-button 
+                      size="small" 
+                      icon="arrow-left" 
+                      plain 
+                      type="primary"
+                      @click.stop="handleSavingsNav(budget, -1)"
+                    >
+                      {{ budget.type === BudgetPeriodType.Year ? '上一年' : '上一月' }}
+                    </van-button>
+                    <span class="current-date-label">
+                      {{ getSavingsDateLabel(budget) }}
+                    </span>
+                    <van-button 
+                      size="small" 
+                      icon="arrow" 
+                      plain 
+                      type="primary"
+                      icon-position="right"
+                      @click.stop="handleSavingsNav(budget, 1)"
+                    >
+                      {{ budget.type === BudgetPeriodType.Year ? '下一年' : '下一月' }}
+                    </van-button>
+                  </div>
+                </template>
               </BudgetCard>
             </template>
             <van-empty v-else description="暂无存款计划" />
@@ -251,7 +278,7 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { showToast, showConfirmDialog } from 'vant'
-import { getBudgetList, deleteBudget, getCategoryStats, getUncoveredCategories, getArchiveSummary, updateArchiveSummary } from '@/api/budget'
+import { getBudgetList, deleteBudget, getCategoryStats, getUncoveredCategories, getArchiveSummary, updateArchiveSummary, getSavingsBudget } from '@/api/budget'
 import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
 import BudgetCard from '@/components/Budget/BudgetCard.vue'
 import BudgetSummary from '@/components/Budget/BudgetSummary.vue'
@@ -539,9 +566,71 @@ const handleDelete = async (budget) => {
     }
   }
 }
+
+const getSavingsDateLabel = (budget) => {
+  if (!budget.periodStart) return ''
+  const date = new Date(budget.periodStart)
+  if (budget.type === BudgetPeriodType.Year) {
+    return `${date.getFullYear()}年`
+  } else {
+    return `${date.getFullYear()}年${date.getMonth() + 1}月`
+  }
+}
+
+const handleSavingsNav = async (budget, offset) => {
+  if (!budget.periodStart) return
+  
+  const date = new Date(budget.periodStart)
+  let year = date.getFullYear()
+  let month = date.getMonth() + 1
+  
+  if (budget.type === BudgetPeriodType.Year) {
+    year += offset
+  } else {
+    month += offset
+    if (month > 12) {
+      month = 1
+      year++
+    } else if (month < 1) {
+      month = 12
+      year--
+    }
+  }
+  
+  try {
+    const res = await getSavingsBudget(year, month, budget.type)
+    if (res.success && res.data) {
+      // 找到并更新对应的 budget 对象
+      const index = savingsBudgets.value.findIndex(b => b.id === budget.id)
+      if (index !== -1) {
+        savingsBudgets.value[index] = res.data
+      }
+    } else {
+      showToast('获取数据失败')
+    }
+  } catch (err) {
+    console.error('切换日期失败', err)
+    showToast('切换日期失败')
+  }
+}
 </script>
 
 <style scoped>
+.card-footer-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--van-gray-3);
+}
+
+.current-date-label {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--van-text-color);
+}
+
 .budget-tabs {
   flex: 1;
   display: flex;