feat: 更新预算摘要组件以支持日期选择；在预算视图中添加日期绑定，优化数据获取逻辑

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;
   }